/* About composition; shared site components retain their defaults. */
.about-hero { position:relative;isolation:isolate;background:var(--section-soft); }
.about-landscape { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center;z-index:-2; }
.about-hero::after { content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--white) 12%,rgba(255,255,255,.97) 34%,rgba(245,252,255,.75) 50%,transparent 76%); }
.about-hero__layout { display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding-block:30px;min-height:310px; }
.about-hero__copy { max-width:620px;width:58%; }
.about-hero h1 { font-size:clamp(2rem,3vw,2.65rem);line-height:1.12;margin-bottom:14px; }
.about-hero h1 span,.about-story h2 span { color:var(--kizoshi-primary-dark); }
.about-hero__copy > p:not(.kicker) { font-size:1rem;line-height:1.55;margin-bottom:18px; }
.about-hero .kicker { margin-bottom:10px; }
.about-vision-note { background:var(--white);padding:18px;border-radius:12px;max-width:205px;font-weight:700;color:var(--ink);box-shadow:0 8px 24px #072d4415; }
section.about-values.container { display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:26px;padding-block:26px; }
.about-values h2,.about-story h2 { font-size:1.65rem;line-height:1.15;margin-bottom:14px; }
.about-values h3 { font-size:1rem;margin:8px 0 5px; }
.about-values p:not(.kicker) { font-size:.88rem;line-height:1.5;margin:0; }
.about-icon { display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--kizoshi-primary-soft);color:var(--kizoshi-primary-dark);flex-shrink:0; }
.about-icon .icon { width:28px;height:28px; }
.about-value:nth-child(3) .about-icon { background:#e7f8f2;color:#08796e; }
.about-value:nth-child(4) .about-icon { background:#f1edff;color:#6736ba; }
section.about-story.container { display:grid;grid-template-columns:1.1fr 1.15fr 1fr;gap:22px;padding-block:26px;border-top:1px solid var(--line);scroll-margin-top:110px; }
.about-story__copy > p:not(.kicker) { font-size:.9rem;line-height:1.55;margin-bottom:10px; }
.about-story__copy .btn { margin-top:8px; }
.about-meeting { width:100%;height:100%;min-height:320px;object-fit:cover;object-position:47% center;border-radius:10px; }
.about-purposes { display:grid;gap:14px;align-content:start; }
.about-purpose { display:flex;gap:12px;border:1px solid var(--line);border-radius:12px;background:var(--section-soft);padding:16px; }
.about-purpose .kicker { font-size:.68rem;margin-bottom:6px; }
.about-purpose h3 { font-size:1.12rem;line-height:1.25;margin-bottom:8px; }
.about-purpose p:last-child { font-size:.85rem;line-height:1.5;margin:0; }
body[data-page="about"] .closing-cta .container { padding-block:24px; }
@media(max-width:1100px) {
 section.about-values.container { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .about-values > div { grid-column:1/-1; }
 section.about-story.container { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .about-purposes { grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr)); }
 .about-hero__copy { width:66%; }
}
@media(max-width:600px) {
 .about-hero__layout { display:block;padding-block:24px 18px; }
 .about-hero__copy { width:100%;max-width:none; }
 .about-hero::after { background:linear-gradient(var(--white) 0%,var(--white) 60%,transparent 82%); }
 .about-landscape { top:auto;bottom:0;height:220px;object-position:75% center; }
 .about-vision-note { margin:100px 0 0 auto;max-width:210px;font-size:.9rem; }
 section.about-values.container,section.about-story.container { grid-template-columns:minmax(0,1fr);gap:22px;padding-block:24px; }
 .about-values p:not(.kicker),.about-story__copy > p:not(.kicker),.about-purpose p:last-child { font-size:1rem; }
 .about-purposes { grid-template-columns:minmax(0,1fr); }
 .about-meeting { height:auto;min-height:0;aspect-ratio:3/2;object-fit:contain; }
 .about-purpose { padding:16px; }
 .about-hero h1 { font-size:2rem; }
}
.about-hero__copy,.about-value,.about-story__copy,.about-purpose > div { min-width:0;overflow-wrap:anywhere; }
@media(max-width:600px) { .about-purpose { flex-wrap:wrap; } .about-purpose > div { flex:1 1 180px; } }
/* Let enlarged navigation text wrap without altering shared default layouts. */
body[data-page="about"] .nav nav { min-width:0;flex-wrap:wrap; }