@import url('about-page-v18.css');

.about-page .about-photo-hero .vertical-philosophy{
  top:30px;left:max(40px,calc((100% - 1280px)/2 + 32px));
  width:168px;height:560px;padding:28px 32px;gap:16px;font-size:36px;
}
.about-page .about-photo-hero .vertical-philosophy > span{
  width:44px;line-height:44px;letter-spacing:6px;
}
.about-page .about-photo-hero .vertical-philosophy strong{font-size:1em}

.about-page .philosophy-cycle{
  display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr);
  align-items:center;gap:16px;padding:0;background:transparent;
}
.cycle-step{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:8px;min-width:0;height:156px;padding:24px;border-radius:12px;
  background:var(--navy);color:white;
}
.cycle-step .cycle-step-number{font-size:18px;line-height:24px;font-weight:700;color:var(--about-yellow)}
.about-page .cycle-step h3{font-size:34px;line-height:46px;font-weight:700;white-space:nowrap;margin:0;color:inherit}
.cycle-step.is-orange{background:var(--warm);color:var(--navy)}
.cycle-step.is-orange .cycle-step-number{color:var(--navy)}
.cycle-step.is-blue{background:var(--accent,#327ba0)}
.cycle-step-arrow{font-size:34px;line-height:46px;font-weight:700;color:var(--navy);text-align:center}

.about-page .about-stance{height:136px;padding:22px 0}
.about-page .blue-banner-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;--stance-size:clamp(28px,2.5vw,36px)}
.about-page .blue-banner-grid h2,.about-page .blue-banner-grid p{
  font-size:var(--stance-size);font-weight:700;line-height:1.278;
}
.about-page .message-label small{text-orientation:mixed}

@media(max-width:1250px){
  .about-page .about-photo-hero .vertical-philosophy{left:48px}
  .about-page .cycle-step h3{font-size:30px;line-height:42px}
  .about-page .blue-banner-grid{gap:40px;--stance-size:28px}
}
@media(max-width:960px){
  .about-page .about-photo-hero .vertical-philosophy{left:32px;width:156px;height:504px;padding:24px 32px;font-size:32px}
  .about-page .about-photo-hero .vertical-philosophy > span{width:38px;line-height:38px;letter-spacing:6px}
  .about-page .cycle-step h3{font-size:24px;line-height:34px}
  .cycle-step{height:144px;padding:20px 12px}
  .about-page .blue-banner-grid{gap:28px;--stance-size:24px}
}
@media(max-width:760px){
  .about-page .about-photo-hero .vertical-philosophy{top:80px;left:20px;width:124px;height:392px;padding:16px 20px;font-size:26px}
  .about-page .about-photo-hero .vertical-philosophy > span{width:34px;line-height:34px;letter-spacing:4px}
  .about-page .philosophy-cycle{grid-template-columns:1fr;gap:10px}
  .cycle-step{height:132px;padding:20px}
  .about-page .cycle-step h3{font-size:28px;line-height:38px}
  .cycle-step-arrow{font-size:28px;line-height:32px;transform:rotate(90deg)}
  .about-page .about-stance{height:auto;padding:28px 0}
  .about-page .blue-banner-grid{grid-template-columns:1fr;gap:18px;--stance-size:clamp(18px,4.6vw,26px)}
}