/* =========================================================================
   ENISHI — ABOUT page (about.html)
   Page-specific styles only; shared classes/tokens live in style.css
   ========================================================================= */

/* ---- 1. PAGE HEADING --------------------------------------------------- */
.about-heading{ background:var(--bg); }
.about-heading__inner{ padding-block:80px 56px; display:flex; flex-direction:column; gap:20px; }

.about-heading__row{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
}
.about-heading__left{ display:flex; flex-direction:column; gap:14px; }
.about-heading__title{ font-size:46px; line-height:1.15; }

.about-heading__badge{
  background:var(--accent-soft); color:var(--accent);
  padding:10px 16px; font-family:var(--font-body); font-size:13px; font-weight:500; letter-spacing:0;
}
.about-heading__badge i{ font-size:16px; color:var(--accent); }

.about-heading__lead{ max-width:620px; font-size:15px; color:var(--muted); line-height:1.7; }

/* heading decoration motifs (scattered top-right) */
.heading-deco{ color:var(--accent); opacity:.10; }
.heading-deco--1{ left:1150px; top:30px; font-size:46px; color:var(--accent); }
.heading-deco--2{ left:1290px; top:90px; font-size:38px; color:var(--navy); opacity:.08; }
.heading-deco--3{ left:1080px; top:120px; font-size:30px; color:var(--navy); opacity:.08; }
.heading-deco--4{ left:1230px; top:18px; font-size:34px; color:var(--accent); }
.heading-deco--5{ left:1340px; top:40px; font-size:22px; color:var(--accent); }
.heading-deco--6{ left:1190px; top:160px; font-size:24px; color:var(--navy); opacity:.08; }

/* ---- 2. OVERVIEW ------------------------------------------------------- */
.about-overview{ background:var(--bg); padding-block:0 100px; }

.section-head{ display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.section-head i{ font-size:22px; color:var(--navy); }
.section-head__title{ font-family:var(--font-heading); font-weight:700; font-size:22px; color:var(--ink); }

.overview-card{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.overview-row{
  display:flex; align-items:flex-start;
  padding:28px 36px;
  border-bottom:1px solid var(--line);
}
.overview-row--last{ border-bottom:0; }

.overview-label{
  flex:0 0 240px; width:240px;
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--muted);
}
.overview-dot{ width:6px; height:6px; border-radius:999px; background:var(--accent); flex:0 0 auto; }
.overview-value{ flex:1 1 auto; min-width:0; }
.overview-text{ font-size:16px; font-weight:500; color:var(--ink); }

.company-name{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.company-name__jp{ font-family:var(--font-heading); font-weight:700; font-size:18px; color:var(--ink); }
.company-name__en{ font-family:var(--font-en); font-weight:500; font-size:13px; color:var(--muted); }

/* business items */
.biz-items{ display:flex; flex-direction:column; gap:12px; }
.biz-item{
  display:flex; align-items:center; gap:16px;
  background:var(--bg); border-radius:10px; padding:16px 18px;
}
.biz-item__icon{
  width:40px; height:40px; border-radius:8px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; font-size:20px;
}
.biz-item__icon--accent{ background:var(--accent-soft); color:var(--accent); }
.biz-item__icon--navy{ background:var(--navy-soft); color:var(--navy); }
.biz-item__text{ display:flex; flex-direction:column; gap:2px; }
.biz-item__title{ font-family:var(--font-heading); font-weight:700; font-size:16px; color:var(--ink); }
.biz-item__desc{ font-size:13px; color:var(--muted); }

/* ---- 3. PHILOSOPHY ----------------------------------------------------- */
.about-philosophy{ background:var(--surface); padding-block:96px; }
.about-philosophy .wrap{ display:flex; flex-direction:column; gap:56px; align-items:center; }

.philosophy-header{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.philosophy-title{ font-size:38px; }
.philosophy-sub{ font-size:15px; color:var(--muted); line-height:1.7; }

.mvv-grid{ display:flex; gap:32px; width:100%; }
.mvv-block{ flex:1 1 0; display:flex; flex-direction:column; gap:18px; }
.mvv-icon{ width:60px; height:60px; border-radius:999px; font-size:28px; }
.mvv-titles{ display:flex; flex-direction:column; gap:6px; }
.mvv-en{ font-family:var(--font-en); font-weight:600; font-size:12px; letter-spacing:1.5px; color:var(--accent); }
.mvv-jp{ font-family:var(--font-heading); font-weight:700; font-size:20px; color:var(--ink); }
.mvv-body{ font-size:14px; color:var(--muted); line-height:1.8; }

/* ---- 4. MESSAGE -------------------------------------------------------- */
.about-message{ background:var(--bg); padding-block:96px; }
.message-row{ display:flex; gap:80px; }
.message-left{ flex:0 0 320px; width:320px; display:flex; flex-direction:column; gap:20px; }
.message-title{ font-size:38px; }
.message-quote{ font-size:44px; color:var(--accent); opacity:.35; }

.message-right{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:24px; }
.message-p{ font-size:15px; color:var(--ink); line-height:1.95; }

.signature{ display:flex; flex-direction:column; gap:6px; padding-top:16px; }
.signature__name-row{ display:flex; align-items:flex-end; gap:12px; }
.signature__name{ font-family:var(--font-heading); font-weight:700; font-size:20px; color:var(--ink); }
.signature__name-en{ font-family:var(--font-en); font-weight:500; font-size:13px; color:var(--muted); }
.signature__title{ font-size:13px; font-weight:500; color:var(--muted); }

/* ---- 5. HISTORY -------------------------------------------------------- */
.about-history{ background:var(--surface); padding-block:96px; }
.about-history .wrap{ display:flex; flex-direction:column; gap:48px; }
.history-header{ display:flex; flex-direction:column; gap:16px; }
.history-title{ font-size:38px; }

.timeline{ display:flex; flex-direction:column; }
.milestone{ display:flex; gap:28px; }
.milestone__year{
  flex:0 0 84px; width:84px; text-align:right; padding-top:2px;
  font-family:var(--font-en); font-weight:700; font-size:22px; color:var(--accent); letter-spacing:.5px;
}
.milestone__content{
  position:relative; flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; gap:8px;
  padding-left:32px; padding-bottom:40px;
  border-left:2px solid var(--accent-soft);
}
.milestone__content--last{ border-left:0; padding-bottom:0; }
.milestone__dot{
  position:absolute; left:-8px; top:3px;
  width:14px; height:14px; border-radius:999px;
  background:var(--accent); border:3px solid #fff;
}
.milestone__content--last .milestone__dot{ left:-7px; }
.milestone__event{ font-family:var(--font-heading); font-weight:700; font-size:19px; color:var(--ink); }
.milestone__desc{ font-size:14px; color:var(--muted); line-height:1.8; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width:860px){
  .about-heading__inner{ padding-block:56px 40px; }
  .about-heading__row{ flex-direction:column; align-items:flex-start; gap:16px; }
  .about-heading__title{ font-size:36px; }

  .overview-row{ flex-direction:column; gap:12px; padding:22px 24px; }
  .overview-label{ flex-basis:auto; width:auto; }

  .philosophy-title,
  .message-title,
  .history-title{ font-size:30px; }

  .mvv-grid{ flex-direction:column; gap:32px; }

  .message-row{ flex-direction:column; gap:32px; }
  .message-left{ flex-basis:auto; width:auto; }
}