.breadcrumb { display: flex; gap: 10px; align-items: center; min-height: 66px; color: var(--color-muted); font-size: .82rem; }
.breadcrumb a { color: var(--color-primary); font-weight: 800; }

.about-hero { overflow: hidden; padding: 76px 0; color: #fff; background: linear-gradient(120deg, #19384e 0%, #274961 60%, #315a76 100%); }
.about-hero__grid { display: grid; grid-template-columns: minmax(0, .96fr) minmax(380px, .84fr); gap: clamp(44px, 7vw, 100px); align-items: center; }
.about-hero .eyebrow { color: #c4d9e5; }
.about-hero h1 { max-width: 630px; margin-bottom: 22px; }
.about-hero__lead { max-width: 580px; margin-bottom: 30px; color: #e3edf2; font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
.about-hero__facts { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 34px; }
.about-hero__facts span { padding: 7px 11px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; color: #edf5f8; font-size: .75rem; font-weight: 750; }
.about-hero__image { position: relative; margin: 0; min-height: 440px; overflow: hidden; border-radius: 28px 28px 28px 6px; box-shadow: 28px 28px 0 rgba(255, 255, 255, .09); }
.about-hero__image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 52%, rgba(13, 33, 45, .78)); }
.about-hero__image img { height: 100%; min-height: 440px; object-fit: cover; }
.about-hero__image figcaption { position: absolute; z-index: 1; right: 24px; bottom: 21px; left: 24px; font-size: .82rem; font-weight: 700; }

.company-section__layout { display: grid; grid-template-columns: .83fr 1.17fr; gap: clamp(48px, 10vw, 150px); align-items: start; }
.company-section__aside { position: sticky; top: 100px; }
.company-section h2 { margin-bottom: 30px; }
.company-section__aside img { height: 250px; border-radius: var(--radius-large); object-fit: cover; }
.company-section__body { max-width: 650px; }
.company-section__body > p { margin-bottom: 21px; color: var(--color-muted); font-size: 1.04rem; }
.company-section__notes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }
.company-section__notes article { padding: 20px; border-radius: var(--radius-medium); background: var(--color-soft); }
.company-section__notes span { color: var(--color-primary); font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
.company-section__notes h3 { margin: 12px 0 7px; font-size: 1.05rem; }
.company-section__notes p { margin: 0; color: var(--color-muted); font-size: .86rem; }

.direction-section__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.direction-card { position: relative; min-height: 515px; overflow: hidden; border-radius: var(--radius-large); }
.direction-card--vision { color: #fff; background: var(--color-primary); }
.direction-card--vision img { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: .38; }
.direction-card--vision::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(16, 39, 53, .14), rgba(16, 39, 53, .96)); }
.direction-card--vision > div:last-child { position: absolute; z-index: 1; right: 42px; bottom: 39px; left: 42px; }
.direction-card .eyebrow { color: #c6e0eb; }
.direction-card h2 { max-width: 480px; margin-bottom: 18px; font-size: clamp(2rem, 3.4vw, 3.2rem); }
.direction-card p:last-child { max-width: 500px; margin-bottom: 0; color: #e5eef2; }
.direction-card__number { position: absolute; z-index: 1; top: 22px; right: 30px; color: rgba(255, 255, 255, .28); font-size: 7rem; font-weight: 800; line-height: 1; }
.direction-card--mission { display: grid; grid-template-columns: 1fr auto; gap: 26px; padding: 42px; color: var(--color-text); background: #fff; box-shadow: var(--shadow); }
.direction-card--mission .eyebrow { color: var(--color-primary); }
.direction-card--mission p { color: var(--color-muted); }
.direction-card--mission .direction-card__number { position: static; align-self: end; color: #d8e4e9; }
.direction-card ul { display: grid; gap: 9px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--color-primary); font-size: .88rem; font-weight: 750; }
.direction-card li { padding-left: 20px; position: relative; }
.direction-card li::before { position: absolute; left: 0; content: "•"; }

.section-heading { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin-bottom: 34px; }
.section-heading h2 { margin: 0; }
.section-heading > p { max-width: 410px; margin: 0 0 7px; color: var(--color-muted); }
.values-feature { position: relative; height: 275px; margin-bottom: 16px; overflow: hidden; border-radius: var(--radius-large); }
.values-feature::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(17, 42, 57, .78), transparent 65%); }
.values-feature img { height: 100%; object-fit: cover; }
.values-feature__overlay { position: absolute; z-index: 1; top: 50%; left: 38px; max-width: 300px; transform: translateY(-50%); color: #fff; font-size: clamp(1.4rem, 2.3vw, 2rem); font-weight: 750; line-height: 1.18; }
.values-feature__overlay p { margin: 0; }
.value-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.value-list article { padding: 24px 20px; border-radius: var(--radius-medium); background: var(--color-soft); }
.value-list__icon { display: block; margin-bottom: 34px; color: var(--color-primary); font-size: .74rem; font-weight: 800; letter-spacing: .11em; }
.value-list h3 { margin-bottom: 10px; font-size: 1.08rem; }
.value-list p { margin: 0; color: var(--color-muted); font-size: .88rem; }

.advantages-section { color: #fff; background: var(--color-text); }
.advantages-section__top { display: flex; align-items: end; justify-content: space-between; gap: 44px; margin-bottom: 38px; }
.advantages-section h2 { max-width: 620px; margin: 0; }
.advantages-section__top > p { max-width: 420px; margin: 0; color: #cbd6dc; }
.advantages-section__content { display: grid; grid-template-columns: .77fr 1.23fr; gap: 16px; }
.advantages-section figure { position: relative; height: 350px; margin: 0; overflow: hidden; border-radius: var(--radius-large); }
.advantages-section figure::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 45%, rgba(23, 31, 36, .78)); }
.advantages-section figure img { height: 100%; object-fit: cover; }
.advantages-section figcaption { position: absolute; z-index: 1; right: 22px; bottom: 20px; left: 22px; font-size: .83rem; font-weight: 700; }
.advantages-matrix { display: grid; height: 350px; grid-template-columns: 1fr 1fr; }
.advantages-matrix article { display: flex; min-height: 0; padding: 24px; flex-direction: column; justify-content: center; border-right: 1px solid rgba(255, 255, 255, .15); border-bottom: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .03); }
.advantages-matrix article:nth-child(2n) { border-right: 0; }
.advantages-matrix article:nth-last-child(-n + 2) { border-bottom: 0; }
.advantages-matrix h3 { margin-bottom: 12px; color: #fff; font-size: 1.12rem; }
.advantages-matrix p { margin: 0; color: #cbd6dc; font-size: .91rem; }

.story-section__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(42px, 8vw, 120px); align-items: center; }
.story-section__image { position: relative; margin: 0; }
.story-section__image::before { position: absolute; z-index: -1; top: -18px; right: -18px; width: 52%; height: 62%; border-radius: var(--radius-large); background: var(--color-primary); content: ""; }
.story-section__image img { height: 520px; border-radius: var(--radius-large); object-fit: cover; }
.story-section__copy > p:not(.eyebrow) { max-width: 590px; margin-bottom: 18px; color: var(--color-muted); }
.story-section__copy h2 { margin-bottom: 25px; }
.story-section__copy .text-link { margin-top: 14px; }

.about-inquiry { color: #fff; background: linear-gradient(100deg, #19384e, #274961); }
.about-inquiry__grid { display: grid; grid-template-columns: 1fr .88fr; gap: clamp(46px, 8vw, 110px); align-items: center; }
.about-inquiry h2 { margin-bottom: 20px; }
.about-inquiry > p, .about-inquiry__grid > div > p:not(.eyebrow) { max-width: 500px; color: #d8e6ed; }
.about-inquiry__grid img { width: min(360px, 100%); height: 190px; margin-top: 30px; border-radius: var(--radius-medium); object-fit: cover; }
.about-inquiry__form { display: grid; gap: 15px; padding: 30px; border-radius: var(--radius-large); color: var(--color-text); background: #fff; box-shadow: var(--shadow); }
.about-inquiry__form label { display: grid; gap: 7px; font-size: .78rem; font-weight: 800; }
.about-inquiry__form input, .about-inquiry__form textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--color-line); border-radius: 10px; color: var(--color-text); background: #fff; resize: vertical; }
.about-inquiry__form .button { justify-self: start; }

@media (max-width: 920px) {
    .about-hero__grid, .company-section__layout, .story-section__grid, .about-inquiry__grid { grid-template-columns: 1fr; }
    .about-hero__image { max-width: 640px; }
    .company-section__aside { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: end; }
    .company-section__aside h2 { margin: 0; }
    .company-section__aside .eyebrow { grid-column: 1 / -1; }
    .advantages-section__content { grid-template-columns: 1fr; }
    .advantages-section figure { height: 300px; }
    .story-section__image { max-width: 600px; }
}
@media (max-width: 680px) {
    .about-hero { padding: 54px 0; }
    .about-hero__image, .about-hero__image img { min-height: 330px; }
    .direction-section__grid, .value-list { grid-template-columns: 1fr; }
    .direction-card { min-height: 430px; }
    .direction-card--vision > div:last-child { right: 26px; bottom: 26px; left: 26px; }
    .direction-card--mission { padding: 28px; }
    .section-heading, .advantages-section__top { display: block; }
    .section-heading > p, .advantages-section__top > p { margin-top: 20px; }
    .values-feature { height: 240px; }
    .value-list { gap: 10px; }
    .value-list__icon { margin-bottom: 16px; }
    .advantages-matrix { height: auto; grid-template-columns: 1fr; }
    .advantages-matrix article, .advantages-matrix article:nth-last-child(-n + 2), .advantages-matrix article:nth-child(2n) { min-height: auto; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .15); }
    .advantages-matrix article:last-child { border-bottom: 0; }
    .story-section__image img { height: 400px; }
    .company-section__aside { display: block; }
    .company-section__aside h2 { margin-bottom: 22px; }
    .company-section__aside .eyebrow { margin-bottom: 12px; }
    .company-section__notes { grid-template-columns: 1fr; }
}

/* CaratVella brand refinements and image-supported content cards. */
.about-hero { background: linear-gradient(120deg, #322a1c 0%, #776333 57%, #b99e54 100%); }
.about-hero .eyebrow { color: #f6e8b8; }
.about-hero__lead { margin-bottom: 18px; color: #fffaf0; }
.about-hero__detail { max-width: 580px; margin-bottom: 0; color: #fbf4e5; }
.about-hero__image::after { background: linear-gradient(180deg, transparent 52%, rgba(43, 34, 18, .82)); }
.company-section__notes .company-section__notes-address { grid-column: 1 / -1; }
.company-section__notes span { color: var(--color-primary-dark); text-transform: uppercase; }
.company-section__notes p { margin: 9px 0 0; }
.company-section__notes h3 { display: none; }
.company-section__notes a:hover { color: var(--color-primary-dark); }

.direction-card--vision > img { opacity: .42; }
.direction-card--vision::after { background: linear-gradient(180deg, rgba(56, 43, 18, .12), rgba(45, 36, 20, .96)); }
.direction-card .eyebrow { color: #f7e8b5; }
.direction-card--vision p:not(.eyebrow) { color: #fffaf1; }
.direction-card--mission { grid-template-columns: 1.1fr .9fr; padding: 28px; }
.direction-card--mission .direction-card__copy { align-self: center; }
.direction-card--mission .eyebrow { color: var(--color-primary-dark); }
.direction-card--mission p { color: var(--color-muted); }
.direction-card--mission p:last-child { margin-bottom: 0; }
.direction-card__image { min-height: 100%; margin: 0; overflow: hidden; border-radius: 16px; }
.direction-card__image img { width: 100%; height: 100%; object-fit: cover; }

.values-feature::after { background: linear-gradient(90deg, rgba(50, 39, 18, .82), transparent 65%); }
.values-feature img { object-position: center 43%; }
.values-feature__overlay { max-width: 330px; margin: 0; }
.value-list article { overflow: hidden; padding: 0; }
.value-list__image { height: 150px; object-fit: cover; }
.value-list article > :not(.value-list__image) { margin-right: 20px; margin-left: 20px; }
.value-list__icon { margin-top: 18px; margin-bottom: 13px; color: var(--color-primary-dark); }
.value-list p { margin-bottom: 22px; }

.advantages-section { background: #332d24; }
.advantages-section figure, .advantages-matrix { height: 484px; }
.advantages-section figure::after { background: linear-gradient(180deg, transparent 45%, rgba(43, 34, 20, .84)); }
.advantages-matrix article { display: block; padding: 0; }
.advantage-card__image { width: 100%; height: 94px; object-fit: cover; opacity: .88; }
.advantages-matrix article > div { padding: 16px 20px 20px; }
.advantages-matrix h3 { margin-bottom: 10px; font-size: 1.05rem; }
.advantages-matrix p { color: #eee8dd; font-size: .85rem; }

.about-inquiry { background: linear-gradient(100deg, #342c1d, #947b38); }
.about-inquiry__grid > div > .eyebrow { color: #f4e6b8; }
.about-inquiry__grid > div > p:not(.eyebrow) { color: #fffaf0; }
.about-inquiry__grid > div > img { width: min(360px, 100%); height: 190px; margin-top: 30px; border-radius: var(--radius-medium); object-fit: cover; }
.about-inquiry__form input:focus-visible, .about-inquiry__form textarea:focus-visible { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(216, 192, 120, .22); outline: 0; }

@media (max-width: 920px) {
    .advantages-section figure { height: 300px; }
}
@media (max-width: 680px) {
    .direction-card--mission { grid-template-columns: 1fr; padding: 24px; }
    .direction-card__image { min-height: 260px; }
    .value-list__image { height: 180px; }
    .company-section__notes .company-section__notes-address { grid-column: auto; }
    .advantages-matrix { height: auto; }
    .advantage-card__image { height: 150px; }
}

/* Lighter, brand-led surfaces for the About Us introduction and inquiry. */
.about-hero {
    color: var(--color-text);
    background: linear-gradient(125deg, #f5edcf 0%, #d8c078 56%, #bea14e 100%);
}
.about-hero .eyebrow { color: #806a2e; }
.about-hero__lead, .about-hero__detail { color: #3d372c; }
.about-hero__image { box-shadow: 22px 22px 0 rgba(128, 106, 46, .16); }

.about-inquiry {
    color: var(--color-text);
    background: linear-gradient(135deg, #f8f7f3 0%, #f1e5bd 100%);
}
.about-inquiry__grid > div > .eyebrow { color: var(--color-primary-dark); }
.about-inquiry__grid > div > p:not(.eyebrow) { color: var(--color-muted); }
.about-inquiry__form { box-shadow: 0 18px 45px rgba(76, 64, 34, .12); }

/* Comment-round refinements: match the Mission surface and improve contrast. */
.about-hero { background: var(--color-soft); }
.about-hero .eyebrow { color: var(--color-primary); }
.direction-card--mission .direction-card__copy > p:not(.eyebrow) { color: #000; }
.direction-card--mission .direction-card__copy > .eyebrow { color: var(--color-primary); }

/* Latest visual feedback: soften the hero caption treatment and carry the inquiry surface into Advantages. */
.about-hero__image::after { background: linear-gradient(180deg, transparent 56%, rgba(50, 42, 32, .28)); }
.advantages-section {
    color: var(--color-text);
    background: linear-gradient(135deg, #f8f7f3 0%, #f1e5bd 100%);
}
.advantages-section .eyebrow { color: var(--color-primary-dark); }
.advantages-section h2 { color: var(--color-text); }
.advantages-section figure::after { background: linear-gradient(180deg, transparent 45%, rgba(50, 42, 32, .38)); }
.advantages-matrix article {
    border-color: rgba(76, 64, 34, .16);
    background: rgba(255, 255, 255, .62);
}
.advantages-matrix h3 { color: var(--color-text); }
.advantages-matrix p { color: var(--color-muted); }

/* Visual hierarchy: align Vision, Mission and Values around one numbered image-card system. */
.direction-section { padding-bottom: 72px; }
.values-section { padding-top: 64px; }
.about-hero h1 { font-size: clamp(2.6rem, 4.5vw, 4.65rem); }
.about-hero__lead,
.about-hero__detail {
    max-width: 580px;
    color: #3d372c;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.62;
}
.about-hero__lead { margin-bottom: 18px; }
.about-hero__detail { margin-bottom: 0; }
.about-hero__image::after { display: none; }

.direction-card--mission {
    display: block;
    padding: 0;
    color: #fff;
    background: #6d5a34;
    box-shadow: none;
}
.direction-card--mission > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
    opacity: .78;
}
.direction-card--mission::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, rgba(50, 39, 18, .08) 12%, rgba(45, 36, 20, .88) 100%);
}
.direction-card--mission > div {
    position: absolute;
    z-index: 1;
    right: 42px;
    bottom: 39px;
    left: 42px;
}
.direction-card--mission .direction-card__number {
    position: absolute;
    z-index: 1;
    top: 22px;
    right: 30px;
    color: rgba(255, 255, 255, .3);
    font-size: 7rem;
    font-weight: 800;
    line-height: 1;
}
.direction-card--mission .eyebrow { color: #f7e8b5; }
.direction-card--mission h2 { color: #fff; }
.direction-card--mission > div > p:last-child { color: #fffaf1; }

.values-feature {
    height: 440px;
    margin-bottom: 20px;
}
.values-feature::after {
    background: linear-gradient(90deg, rgba(50, 39, 18, .86) 0%, rgba(50, 39, 18, .64) 46%, rgba(50, 39, 18, .08) 78%);
}
.values-feature img { object-position: center; }
.values-feature__number {
    position: absolute;
    z-index: 1;
    top: 22px;
    right: 30px;
    color: rgba(255, 255, 255, .32);
    font-size: 7rem;
    font-weight: 800;
    line-height: 1;
}
.values-feature__overlay {
    top: auto;
    right: 42px;
    bottom: 39px;
    left: 42px;
    max-width: 520px;
    margin: 0;
    transform: none;
    color: #fff;
}
.values-feature__overlay .eyebrow { margin-bottom: 12px; color: #f7e8b5; }
.values-feature__overlay h2 { margin: 0 0 16px; color: #fff; font-size: clamp(2rem, 3.4vw, 3.2rem); }
.values-feature__overlay > p:last-child { margin: 0; color: #fffaf1; font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 400; line-height: 1.55; }
.value-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.value-list__image { height: 190px; }
.value-list article > :not(.value-list__image) { margin-right: 24px; margin-left: 24px; }
.value-list p { max-width: 550px; }

@media (max-width: 680px) {
    .direction-section { padding-bottom: 56px; }
    .values-section { padding-top: 48px; }
    .about-hero h1 { font-size: clamp(2.45rem, 11vw, 3.25rem); }
    .direction-section__grid { gap: 16px; }
    .direction-card { min-height: 465px; }
    .direction-card--mission > img { object-position: 73% center; }
    .direction-card--vision > div:last-child,
    .direction-card--mission > div {
        right: 26px;
        bottom: 28px;
        left: 26px;
    }
    .direction-card__number,
    .direction-card--mission .direction-card__number,
    .values-feature__number {
        top: 18px;
        right: 22px;
        font-size: 5rem;
    }
    .values-feature {
        height: 410px;
        margin-bottom: 16px;
    }
    .values-feature img { object-position: 62% center; }
    .values-feature__overlay {
        right: 26px;
        bottom: 28px;
        left: 26px;
    }
    .values-feature__overlay h2 { font-size: clamp(2.2rem, 11vw, 3rem); }
    .value-list { gap: 14px; }
    .value-list__image { height: 190px; }
    .value-list article > :not(.value-list__image) { margin-right: 20px; margin-left: 20px; }
}

@media (max-width: 420px) {
    .values-feature { height: 380px; }
    .values-feature__overlay > p:last-child { font-size: 1rem; }
}

/* Latest content review: keep Mission copy off the jewelry and simplify Values on phones. */
.direction-card--mission > img { object-position: 92% center; }
.direction-card--mission::after {
    background: linear-gradient(90deg, rgba(48, 37, 18, .88) 0%, rgba(48, 37, 18, .7) 52%, rgba(48, 37, 18, .1) 100%), linear-gradient(180deg, rgba(48, 37, 18, .08), rgba(48, 37, 18, .38));
}
.direction-card--mission > div {
    top: 48px;
    right: auto;
    bottom: auto;
    width: min(56%, 340px);
}
.advantages-section figcaption {
    color: #fffaf1;
    text-shadow: 0 1px 12px rgba(28, 20, 10, .65);
}

@media (max-width: 680px) {
    .direction-card--mission > img { object-position: 96% center; }
    .direction-card--mission > div {
        top: 38px;
        right: auto;
        bottom: auto;
        width: min(76%, 365px);
    }
    .values-feature {
        display: flex;
        height: auto;
        margin-bottom: 18px;
        overflow: hidden;
        background: #42351f;
    }
    .values-feature::after { display: none; }
    .values-feature img {
        width: 100%;
        height: 220px;
        object-position: 65% center;
    }
    .values-feature__overlay {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        max-width: none;
        padding: 26px 24px 30px;
        background: #42351f;
    }
    .values-feature__overlay h2 { margin-bottom: 12px; font-size: clamp(2.15rem, 10vw, 2.8rem); }
    .values-feature__overlay > p:last-child { max-width: 30rem; }
    .value-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .value-list__image { height: 205px; }
}

@media (max-width: 420px) {
    .values-feature { height: auto; }
    .values-feature img { height: 195px; }
}

/* Final mobile composition refinements for the numbered story cards. */
.direction-card--mission::after {
    background: linear-gradient(90deg, rgba(48, 37, 18, .5) 0%, rgba(48, 37, 18, .24) 50%, rgba(48, 37, 18, .04) 100%), linear-gradient(180deg, rgba(48, 37, 18, .03), rgba(48, 37, 18, .22));
}
.direction-card--mission > div {
    top: auto;
    right: auto;
    bottom: 39px;
    left: 42px;
    width: min(58%, 350px);
}
.direction-card--mission .direction-card__number {
    top: 22px;
    right: auto;
    left: 30px;
}

@media (max-width: 680px) {
    .direction-card--mission > div {
        top: auto;
        right: auto;
        bottom: 28px;
        left: 26px;
        width: min(78%, 380px);
    }
    .direction-card--mission .direction-card__number {
        top: 18px;
        right: auto;
        left: 22px;
    }
    .values-feature {
        display: flex;
        flex-direction: column;
        height: 465px;
        min-height: 465px;
    }
    .values-feature img {
        height: 235px;
        flex: 0 0 235px;
    }
    .values-feature__overlay {
        display: flex;
        min-height: 0;
        flex: 1 1 auto;
        flex-direction: column;
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .values-feature { height: 440px; min-height: 440px; }
    .values-feature img { height: 215px; flex-basis: 215px; }
}

/* Values hero: match the numbered-card rhythm without over-darkening the photography. */
.values-feature::after {
    background: linear-gradient(90deg, rgba(50, 39, 18, .58) 0%, rgba(50, 39, 18, .36) 46%, rgba(50, 39, 18, .04) 78%);
}
.values-feature__number {
    top: 22px;
    right: auto;
    left: 30px;
}

@media (max-width: 680px) {
    .values-feature__number {
        top: 18px;
        right: auto;
        left: 22px;
    }
}

/* Values section redesign: editorial introduction, unmasked image, and clear value cards. */
.direction-section { padding-bottom: 48px; }
.values-section { padding-top: 48px; }
.values-section__layout {
    display: grid;
    grid-template-areas:
        "intro feature"
        "list list";
    grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
    gap: 20px;
}
.values-intro {
    position: relative;
    display: flex;
    min-height: 420px;
    align-items: end;
    padding: 40px;
    overflow: hidden;
    border-radius: var(--radius-large);
    background: linear-gradient(145deg, #f4e8ba 0%, #d8c078 100%);
}
.values-intro::after {
    position: absolute;
    right: -16%;
    bottom: -26%;
    width: 72%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .44);
    border-radius: 50%;
    content: "";
}
.values-intro > div { position: relative; z-index: 1; max-width: 420px; }
.values-intro .eyebrow { margin-bottom: 13px; color: #72591a; }
.values-intro h2 { margin: 0 0 18px; font-size: clamp(2.3rem, 4vw, 3.65rem); }
.values-intro p:last-child { max-width: 330px; margin: 0; color: #4b4027; font-size: 1.08rem; line-height: 1.55; }
.values-intro__number {
    position: absolute;
    z-index: 1;
    top: 25px;
    left: 32px;
    color: rgba(104, 78, 20, .2);
    font-size: clamp(5.5rem, 9vw, 9rem);
    font-weight: 800;
    line-height: 1;
}
.values-feature {
    grid-area: feature;
    height: 420px;
    margin: 0;
    border-radius: var(--radius-large);
}
.values-feature::after { display: none; }
.values-feature img { width: 100%; height: 100%; object-position: center; }
.value-list {
    display: grid;
    grid-area: list;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 4px;
}
.value-list article {
    display: grid;
    min-height: 244px;
    padding: 0;
    overflow: hidden;
    grid-template-columns: minmax(160px, .84fr) minmax(0, 1.16fr);
    grid-template-rows: auto auto 1fr;
    border: 1px solid rgba(104, 78, 20, .1);
    border-radius: var(--radius-medium);
    background: var(--color-soft);
}
.value-list__image {
    width: 100%;
    height: 100%;
    min-height: 244px;
    grid-row: 1 / -1;
    object-fit: cover;
}
.value-list article > :not(.value-list__image) { margin-right: 26px; margin-left: 26px; }
.value-list__icon { margin-top: 26px; margin-bottom: 9px; }
.value-list h3 { margin-top: 0; margin-bottom: 10px; }
.value-list p { margin-top: 0; margin-bottom: 24px; font-size: .92rem; line-height: 1.55; }

@media (max-width: 900px) {
    .values-section__layout {
        grid-template-areas:
            "intro"
            "feature"
            "list";
        grid-template-columns: 1fr;
    }
    .values-intro { min-height: 270px; }
    .values-feature { height: 360px; }
}

@media (max-width: 680px) {
    .direction-section { padding-bottom: 28px; }
    .values-section { padding-top: 28px; }
    .values-section__layout { gap: 14px; }
    .values-intro {
        min-height: 250px;
        padding: 30px 26px;
        border-radius: 24px;
    }
    .values-intro__number { top: 18px; left: 22px; font-size: 5.3rem; }
    .values-intro h2 { margin-bottom: 12px; font-size: clamp(2.35rem, 11vw, 3.15rem); }
    .values-intro p:last-child { max-width: 285px; font-size: 1rem; }
    .values-feature { display: block; height: 240px; min-height: 0; border-radius: 24px; }
    .values-feature img { height: 100%; flex: none; object-position: 58% center; }
    .value-list { grid-template-columns: 1fr; gap: 14px; margin-top: 2px; }
    .value-list article { display: block; min-height: 0; }
    .value-list__image { display: block; width: 100%; height: 195px; min-height: 0; }
    .value-list article > :not(.value-list__image) { margin-right: 22px; margin-left: 22px; }
    .value-list__icon { margin-top: 20px; margin-bottom: 9px; }
    .value-list p { margin-bottom: 24px; }
}

/* Advantages redesign: the fourth editorial chapter follows the Values layout. */
.advantages-section {
    padding-top: 96px;
    padding-bottom: 112px;
    background: linear-gradient(135deg, #f8f7f3 0%, #f1e5bd 100%);
}
.advantages-section__layout {
    display: grid;
    grid-template-areas:
        "intro feature"
        "list list";
    grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
    gap: 20px;
}
.advantages-intro {
    position: relative;
    display: flex;
    min-height: 420px;
    align-items: end;
    padding: 40px;
    overflow: hidden;
    border-radius: var(--radius-large);
    color: #fff;
    background: linear-gradient(145deg, #4f402e 0%, #2f271d 100%);
}
.advantages-intro::after {
    position: absolute;
    top: -32%;
    right: -22%;
    width: 78%;
    aspect-ratio: 1;
    border: 1px solid rgba(247, 232, 181, .26);
    border-radius: 50%;
    content: "";
}
.advantages-intro > div { position: relative; z-index: 1; max-width: 410px; }
.advantages-intro .eyebrow { margin-bottom: 13px; color: #f7e8b5; }
.advantages-intro h2 { margin: 0 0 18px; color: #fff; font-size: clamp(2.3rem, 4vw, 3.65rem); }
.advantages-intro p:last-child { max-width: 335px; margin: 0; color: #f6efe0; font-size: 1.08rem; line-height: 1.55; }
.advantages-intro__number {
    position: absolute;
    z-index: 1;
    top: -12px;
    left: 32px;
    color: rgba(247, 232, 181, .2);
    font-size: clamp(5.5rem, 9vw, 9rem);
    font-weight: 800;
    line-height: 1;
}
.advantages-feature {
    grid-area: feature;
    height: 420px !important;
    margin: 0;
    border-radius: var(--radius-large);
}
.advantages-feature::after { display: none; }
.advantages-feature img { width: 100%; height: 100%; object-position: center; }
.advantages-matrix {
    display: grid;
    height: auto;
    grid-area: list;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 4px;
}
.advantages-matrix article,
.advantages-matrix article:nth-child(2n),
.advantages-matrix article:nth-last-child(-n + 2) {
    display: grid;
    min-height: 244px;
    padding: 0;
    overflow: hidden;
    grid-template-columns: minmax(160px, .84fr) minmax(0, 1.16fr);
    border: 1px solid rgba(104, 78, 20, .1);
    border-radius: var(--radius-medium);
    background: rgba(255, 255, 255, .72);
}
.advantage-card__image {
    width: 100%;
    height: 100%;
    min-height: 244px;
    opacity: 1;
    object-fit: cover;
}
.advantages-matrix article > div { padding: 26px; }
.advantages-matrix h3 { margin: 0 0 10px; color: var(--color-text); font-size: 1.15rem; }
.advantages-matrix p { margin: 0; color: var(--color-muted); font-size: .92rem; line-height: 1.55; }

@media (max-width: 900px) {
    .advantages-section__layout {
        grid-template-areas:
            "intro"
            "feature"
            "list";
        grid-template-columns: 1fr;
    }
    .advantages-intro { min-height: 270px; }
    .advantages-feature { height: 360px !important; }
}

@media (max-width: 680px) {
    .advantages-section { padding-top: 64px; padding-bottom: 72px; }
    .advantages-section__layout { gap: 14px; }
    .advantages-intro {
        min-height: 250px;
        padding: 30px 26px;
        border-radius: 24px;
    }
    .advantages-intro__number { top: 18px; left: 22px; font-size: 5.3rem; }
    .advantages-intro h2 { margin-bottom: 12px; font-size: clamp(2.35rem, 11vw, 3.15rem); }
    .advantages-intro p:last-child { max-width: 285px; font-size: 1rem; }
    .advantages-feature { height: 240px !important; border-radius: 24px; }
    .advantages-feature img { object-position: 58% center; }
    .advantages-matrix { grid-template-columns: 1fr; gap: 14px; margin-top: 2px; }
    .advantages-matrix article,
    .advantages-matrix article:nth-child(2n),
    .advantages-matrix article:nth-last-child(-n + 2) {
        display: block;
        min-height: 0;
    }
    .advantage-card__image { display: block; width: 100%; height: 195px; min-height: 0; }
    .advantages-matrix article > div { padding: 22px; }
}

/* Page motion: retain the home page's restrained reveal and lift language. */
html.js .about-motion-item {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity .6s ease,
        transform .7s cubic-bezier(.2, .72, .22, 1);
    transition-delay: calc(var(--about-reveal-order, 0) * 85ms);
}
html.js .about-motion-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
    .about-hero__image,
    .company-section__aside img,
    .direction-card,
    .values-feature,
    .value-list article,
    .advantages-intro,
    .advantages-feature,
    .advantages-matrix article,
    .story-section__image,
    .about-inquiry__grid > div > img,
    .about-inquiry__form {
        transition: transform .35s cubic-bezier(.2, .72, .22, 1), box-shadow .35s ease;
    }

    .about-hero__image:hover,
    .company-section__aside img:hover,
    .direction-card:hover,
    .values-feature:hover,
    .value-list article:hover,
    .advantages-intro:hover,
    .advantages-feature:hover,
    .advantages-matrix article:hover,
    .story-section__image:hover,
    .about-inquiry__grid > div > img:hover,
    .about-inquiry__form:hover,
    .about-inquiry__form:focus-within {
        transform: translateY(-6px);
        box-shadow: 0 20px 42px rgba(76, 64, 34, .18);
    }

    .about-hero__image img,
    .company-section__aside img,
    .direction-card > img,
    .values-feature img,
    .value-list__image,
    .advantages-feature img,
    .advantage-card__image,
    .story-section__image img,
    .about-inquiry__grid > div > img {
        transition: transform .6s cubic-bezier(.2, .72, .22, 1);
    }

    .about-hero__image:hover img,
    .direction-card:hover > img,
    .values-feature:hover img,
    .value-list article:hover .value-list__image,
    .advantages-feature:hover img,
    .advantages-matrix article:hover .advantage-card__image,
    .story-section__image:hover img,
    .about-inquiry__grid > div > img:hover {
        transform: scale(1.045);
    }
}

/* The inquiry image is intentionally a stronger visual anchor than before. */
.about-inquiry__grid > div > img {
    width: min(540px, 100%);
    height: 285px;
}

@media (max-width: 680px) {
    .advantages-intro__number {
        right: 22px;
        left: auto;
    }
}

/* Close the page with the same warm transition used before the brand-black footer. */
.about-inquiry {
    color: #fffaf0;
    background: linear-gradient(180deg, #7b7268 0%, #5c554e 100%);
}
.about-inquiry h2 { color: #fffaf0; }
.about-inquiry__grid > div > .eyebrow { color: #f2d98d; }
.about-inquiry__grid > div > p:not(.eyebrow) { color: #f2eee6; }