/* Page-specific styles extracted from style.css. Loaded only on this template. */


/* Original style.css lines 3483-3819 */
/* ===== About page (design/about.html) ===== */

    
    /* auto aspect-ratio placeholders (prevents CLS / scroll jump on refresh) */
    img[src*="about-mvv.png"] { aspect-ratio: 2560 / 1440; }
    img[src*="about-rd-moat.png"] { aspect-ratio: 1440 / 1440; }
    img[src*="about-manufacturing.png"] { aspect-ratio: 1440 / 1440; }
    img[src*="about-social.png"] { aspect-ratio: 1440 / 1440; }
/* ═══════════════════════════════════════════════════════════════
       About page — page-specific styles (Beatrice)
       Base tokens, header, footer, pilot form come from
       beatrice-base.css / homepage. Everything below is About-only.
       ═══════════════════════════════════════════════════════════════ */

    /* Anchor targets must clear the sticky header */
    section[id] { scroll-margin-top: 72px; }

    /* ── Hero: factory photo, light overlay ───────────────── */
    .a-hero {
      min-height: calc(100vh - 56px);
      display: flex; align-items: center;
      position: relative; overflow: hidden;
    }
    .a-hero-bg { position: absolute; inset: 0; z-index: 0; line-height: 0; }
    .a-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .a-hero-overlay {
      position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(to right,
        var(--bg) 0%,
        color-mix(in oklch, var(--bg) 92%, transparent) 38%,
        color-mix(in oklch, var(--bg) 66%, transparent) 58%,
        color-mix(in oklch, var(--bg) 30%, transparent) 78%,
        transparent 100%);
    }
    .a-hero-content {
      position: relative; z-index: 2;
      width: 100%; max-width: min(var(--container), calc(100vw - 96px)); margin-inline: auto;
      padding: clamp(72px, 11vh, 140px) var(--gutter);
    }
    .a-hero-eyebrow {
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--accent-deep); margin: 0 0 22px;
      display: flex; align-items: center; gap: 14px;
    }
    .a-hero-eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--accent-deep); opacity: 0.45; }
    .a-hero-content h1 {
      font-family: var(--font-display);
      font-size: clamp(42px, 5.2vw, 66px);
      line-height: 1.02; letter-spacing: -0.02em;
      margin: 0 0 14px; max-width: 15ch;
    }
    .a-hero-sub {
      font-family: var(--font-display);
      font-size: clamp(19px, 2.4vw, 28px);
      font-style: italic; font-weight: 400;
      color: var(--accent-deep); letter-spacing: -0.01em;
      margin: 0 0 20px; max-width: 42ch;
    }
    .a-hero-desc { max-width: 56ch; line-height: 1.7; color: var(--muted); margin: 0 0 34px; }
    .a-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .a-hero-actions .btn { border-radius: 999px; padding-inline: 26px; padding-block: 12px; }
    .a-hero-ghost {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 12px 26px; border: 1px solid color-mix(in oklch, var(--fg) 30%, transparent);
      border-radius: 999px; color: var(--fg);
      font-size: 15px; font-weight: 600; letter-spacing: 0.04em;
      background: transparent; transition: background 0.2s, border-color 0.2s;
    }
    .a-hero-ghost:hover { background: color-mix(in oklch, var(--accent) 8%, transparent); border-color: var(--accent); }
    .a-hero-strip {
      display: flex; flex-wrap: wrap; gap: 10px 28px;
      margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border);
    }
    .a-hero-strip span {
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
      display: inline-flex; align-items: center; gap: 8px;
    }
    .a-hero-strip span::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: var(--accent); flex-shrink: 0;
    }

    /* ── About intro: editorial split + key numbers ───────── */
    .a-intro { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--gap-2xl); align-items: center; }
    .a-intro-quote {
      font-family: var(--font-display);
      font-size: clamp(28px, 3.4vw, 42px);
      line-height: 1.12; letter-spacing: -0.015em; font-weight: 600;
      margin: 0;
    }
    .a-intro-quote em { font-style: normal; color: var(--accent-deep); }
    .a-intro-body p { color: var(--muted); line-height: 1.75; margin: 0 0 16px; }
    .a-intro-stats {
      margin-top: 40px; padding-top: 28px;
      display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-lg);
    }
    .a-intro-stats .is-num {
      font-family: var(--font-display); font-size: clamp(32px, 3vw, 44px);
      font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--accent-deep);
      text-align: center; white-space: nowrap;
    }
    .a-intro-stats .is-num::after {
      content: ''; display: block; width: 36px; height: 2px;
      background: var(--accent); margin: 12px auto 0;
    }
    .a-intro-stats .is-label {
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
      margin-top: 10px; line-height: 1.4; text-align: center;
    }

    /* ── History: left-rail timeline (year | line | text) ─── */
    .a-timeline { position: relative; max-width: 1020px; margin: 64px auto 0; }
    .a-timeline::before {
      content: ''; position: absolute; left: 199px; top: 10px; bottom: 10px;
      width: 2px;
      background: var(--accent);
    }
    .a-tl-item {
      display: grid; grid-template-columns: 160px 80px 1fr; align-items: start;
      padding: 18px 0;
      opacity: 0; transform: translateY(18px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .a-tl-item.a-in { opacity: 1; transform: none; }
    .a-tl-year {
      grid-column: 1; grid-row: 1; text-align: right;
      font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 32px); font-weight: 600;
      line-height: 1.05; letter-spacing: -0.015em; color: var(--accent-deep);
    }
    .a-tl-dot {
      grid-column: 2; grid-row: 1; justify-self: center;
      width: 15px; height: 15px; border-radius: 50%;
      background: var(--accent); border: 2px solid var(--accent);
      margin-top: 9px;
      z-index: 1; /* above timeline line, below sticky header (z-index 10) */
    }
    .a-tl-content { grid-column: 3; grid-row: 1; padding-top: 6px; }
    .a-tl-text { color: var(--muted); line-height: 1.65; margin: 0; max-width: 58ch; }
    .a-tl-item.future .a-tl-dot { border-color: var(--accent); background: var(--surface); }
    .a-tl-tag {
      display: inline-block; font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--accent); border: 1px solid color-mix(in oklch, var(--accent) 45%, transparent);
      border-radius: 5px; padding: 4px 10px; margin: 10px 0 0;
    }

    /* ── Mission / Vision / Values ────────────────────────── */
    .a-mvv-band {
      border-radius: var(--radius-lg); overflow: hidden; line-height: 0;
      border: 1px solid var(--border);
      height: clamp(240px, 30vw, 400px);
    }
    .a-mvv-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; }
    .a-core-block { max-width: 720px; margin: 52px auto 0; text-align: center; }
    .a-core-label {
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
      margin: 0 0 14px; display: block;
    }
    .a-core-text { color: var(--fg); line-height: 1.7; margin: 0; font-size: var(--fs-lead); }
    .a-mvv-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); margin-top: 52px; }
    .a-mvv-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
    .a-mvv-card .mv-label {
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep);
      display: block; margin-bottom: 10px;
    }
    .a-mvv-card h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin: 0 0 8px; line-height: 1.3; }
    .a-mvv-card p { color: var(--muted); line-height: 1.6; margin: 0; }
    .a-values-label {
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
      display: block; margin: 52px 0 20px;
    }
    .a-values { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap-lg); }
    .a-value { border-top: 2px solid var(--accent); padding-top: 18px; transition: border-color 0.2s; }
    .a-value:hover { border-top-color: var(--accent-deep); }
    .a-value .v-num { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.1em; color: var(--accent-deep); display: block; margin-bottom: 12px; }
    .a-value h4 { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
    .a-value p { color: var(--muted); margin: 0; line-height: 1.6; }

    /* ── R&D & Production: image + spec rows ──────────────── */
    .a-rd-group + .a-rd-group { margin-top: 72px; padding-top: 64px; border-top: 1px solid var(--border); }
    .a-rd-group-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 36px; }
    .a-rd-label {
      font-family: var(--font-mono); font-size: var(--fs-sm);
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep);
    }
    .a-rd-group-head h3 {
      font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 36px);
      line-height: 1.1; letter-spacing: -0.015em; margin: 0;
    }
    .a-rd-split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap-2xl); align-items: center; }
    .a-rd-split.reverse { grid-template-columns: 7fr 5fr; }
    .a-rd-media {
      border-radius: var(--radius-lg); border: 1px solid var(--border);
      overflow: hidden; line-height: 0; aspect-ratio: 3 / 2;
    }
    .a-rd-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .a-specs { display: flex; flex-direction: column; }
    .a-spec {
      padding: 22px 0;
    }
    .a-spec h4 { font-size: 17px; font-weight: 600; margin: 0 0 4px; line-height: 1.35; }
    .a-spec p { color: var(--muted); margin: 0; line-height: 1.65; }

    /* ── Social responsibility: tinted feature bento ──────── */
    .a-social-section { background: var(--gold-soft); }
    .a-social-section .container { max-width: var(--container-narrow); }
    .a-social-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin-top: 56px; }
    .a-social-bento .s3 { grid-column: span 3; }
    .a-social-bento .s4 { grid-column: span 4; }
    .a-social-bento .s6 { grid-column: span 6; }
    .a-social-bento .s7 { grid-column: span 7; }
    .a-social-img-cell {
      grid-column: span 5; grid-row: span 2;
      border-radius: var(--radius-lg); overflow: hidden; line-height: 0;
      border: 1px solid var(--border);
    }
    .a-social-img-cell img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
    .a-scard {
      background: var(--surface);
      border: 1px solid color-mix(in oklch, var(--fg) 12%, transparent);
      border-radius: var(--radius-lg); overflow: hidden;
      display: flex; flex-direction: column;
    }
    .a-scard .a-scard-img { line-height: 0; overflow: hidden; }
    .a-scard .a-scard-img img {
      width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
    }
    .a-scard .a-scard-body { padding: 22px 24px 24px; }
    .a-scard h4 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
    .a-scard p { color: var(--muted); margin: 0; line-height: 1.6; }
    .a-scard-certs { background: var(--surface); }
    .a-scard-certs-imgs { line-height: 0; }
    .a-scard-certs-imgs img {
      width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
    }
    .a-social-close {
      margin-top: 48px; font-family: var(--font-display);
      font-size: clamp(17px, 1.8vw, 21px); line-height: 1.6;
      font-style: normal; color: var(--fg); max-width: 640px;
      margin-inline: auto; text-align: center;
    }

    /* ── Pilot form (homepage-consistent) ─────────────────── */
    .pilot-section {
      background: linear-gradient(135deg, oklch(28% 0.03 195), oklch(20% 0.02 200));
      color: var(--surface);
    }
    .pilot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-2xl); align-items: center; }
    .pilot-impact { display: flex; flex-direction: column; gap: 16px; }
    .pilot-impact .pilot-motto {
      font-family: var(--font-display); font-size: clamp(32px, 4vw, 50px);
      line-height: 1.04; letter-spacing: -0.03em; margin: 0;
    }
    .pilot-impact .pilot-desc { font-size: var(--fs-body); line-height: 1.7; color: oklch(72% 0.03 195); margin: 0; max-width: 44ch; }
    .pilot-impact .pilot-desc em { font-style: normal; color: var(--accent); }
    .pilot-impact .pilot-punch {
      font-family: var(--font-display); font-size: clamp(16px, 1.8vw, 20px);
      font-style: normal; color: oklch(80% 0.035 195); margin: 0; letter-spacing: -0.01em;
    }
    .pilot-impact .pilot-cta {
      display: inline-flex; align-items: center; gap: 6px;
      color: var(--accent); text-decoration: none;
      font-size: 15px; font-weight: 600; letter-spacing: 0.03em;
      transition: opacity 0.15s;
    }
    .pilot-impact .pilot-cta:hover { opacity: 0.75; }
    .pilot-contact-list {
      list-style: none; padding: 0; margin: 4px 0 0;
      display: flex; flex-direction: column; gap: 10px;
    }
    .pilot-contact-list li {
      display: flex; gap: 12px; align-items: flex-start;
      color: oklch(78% 0.03 195); font-size: 16px; line-height: 1.55;
    }
    .pilot-contact-list li::before {
      content: ''; width: 7px; height: 7px; border-radius: 50%;
      background: var(--accent-gold); flex-shrink: 0; margin-top: 7px;
    }
    .pilot-form {
      background: var(--surface); border-radius: var(--radius-lg);
      padding: 36px 32px 32px; border: 1px solid var(--accent);
      display: flex; flex-direction: column; gap: var(--gap-md);
    }
    .pilot-form h3 { font-family: var(--font-display); font-size: 20px; color: var(--fg); margin: 0 0 4px; }
    .pilot-form .field { display: flex; flex-direction: column; gap: 6px; }
    .pilot-form .field label { font-size: var(--fs-sm); color: var(--muted); letter-spacing: 0.03em; text-transform: uppercase; }
    .pilot-form .field .input, .pilot-form .field .textarea {
      width: 100%; padding: 11px 14px; border: 1px solid var(--border);
      border-radius: var(--radius); background: var(--bg); color: var(--fg);
      font: inherit; font-size: 14px; transition: border-color 0.15s;
    }
    .pilot-form .field .input:focus, .pilot-form .field .textarea:focus {
      outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .pilot-form .field .textarea { min-height: 80px; resize: vertical; }
    .pilot-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }

    /* ── Responsive ───────────────────────────────────────── */
    @media (max-width: 1024px) {
      .a-intro { grid-template-columns: 1fr; gap: var(--gap-lg); }
      .a-rd-split, .a-rd-split.reverse { grid-template-columns: 1fr; gap: var(--gap-lg); }
      .a-rd-split.reverse .a-rd-media { order: -1; }
      .a-rd-media { max-width: 520px; }
      .a-social-bento .a-social-img-cell { grid-column: span 12; grid-row: auto; height: 300px; }
      .a-social-bento .s7 { grid-column: span 12; }
      .a-social-bento .s3, .a-social-bento .s4 { grid-column: span 6; }
    }
    @media (max-width: 920px) {
      .a-hero-strip { gap: 10px 18px; }
      .a-mvv-cards { grid-template-columns: 1fr; }
      .a-values { grid-template-columns: 1fr 1fr; }

      .a-social-bento .s3, .a-social-bento .s4, .a-social-bento .s6 { grid-column: span 12; }
      .pilot-grid { grid-template-columns: 1fr; }
      .pilot-form .form-row { grid-template-columns: 1fr; }
    }
    @media (max-width: 560px) {

      .a-scard .a-scard-body { padding: 20px 20px 22px; }
	  .a-hero-content {
      max-width: calc(100vw - 40px);
	  padding: 52px var(--gutter) 52px;
    }
	@media (max-width: 920px) {
    .pilot-grid {
        gap: var(--gap-xl);
    }
	}
    }
  


/* Original style.css lines 9022-9134 */
   Sync 修改版本0828/about.html — history video, mission grid,
   RD badges, social bento with images.
   ═══════════════════════════════════════════════════════════════ */

/* History — video + timeline side by side */
#history { background: var(--surface); }
.a-history-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
  margin-top: 56px;
}
.a-history-video { position: sticky; top: 92px; }
.a-video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: oklch(20% 0.02 200);
  box-shadow: 0 14px 40px -14px color-mix(in oklch, var(--fg) 28%, transparent);
}
.a-video-wrap video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.a-history-grid .a-timeline { margin-top: 0; max-width: none; }

/* Mission — sticky anchor + mv list (replaces old .a-mvv-band + .a-mvv-cards) */
#mission { padding-block: clamp(48px, 5vw, 72px); }
#mission .section-lead { margin-bottom: 40px; }
.a-mission-grid {
  display: grid; grid-template-columns: 0.9fr 1.5fr;
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
.a-mission-anchor { position: sticky; top: 92px; }
.a-core-quote {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(21px, 2vw, 27px); line-height: 1.5;
  color: var(--fg); margin: 0; max-width: 34ch;
  padding-left: 20px; border-left: 2px solid var(--accent-deep);
}
.a-mv-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-xl); }
.a-mv-list .a-mv-item,
.a-mv-list .a-mv-item:first-child { padding: 18px 0 0; border-top: 1px solid var(--border); }
.mv-label {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
  display: block; margin-bottom: 10px;
}
.a-mv-body h3 {
  font-family: var(--font-display); font-size: clamp(21px, 2vw, 25px);
  font-weight: 600; margin: 0 0 10px; line-height: 1.28; letter-spacing: -0.01em;
}
.a-mv-body p { color: var(--muted); line-height: 1.65; margin: 0; }
.a-values-label { margin: 32px 0 16px; }

/* Values: 4 items in 2 cols (override old 5-col) */
.a-values { grid-template-columns: repeat(2, 1fr); gap: 18px var(--gap-xl); }
.a-value { border-top: 1px solid var(--border); padding-top: 12px; }
.a-value:hover { border-top-color: var(--border); }
.a-value h4 { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.a-value .v-num { display: none; }

/* R&D badges */
.a-rd-group-head { display: block; }
.a-rd-group-head h3 { margin-bottom: 0; }
.a-rd-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.a-rd-badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: var(--fs-sm);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep);
  border: 1px solid color-mix(in oklch, var(--accent-deep) 35%, transparent);
  border-radius: 5px; padding: 5px 12px;
}
.a-rd-label { display: none; }
#rd { background: var(--surface); border-top: 1px solid var(--border); }

/* Social bento: 6-col grid, 4 card images */
.a-social-bento { grid-template-columns: repeat(6, 1fr); margin-top: 48px; }
.a-social-bento .a-scard { grid-column: span 3; }
.a-social-img-cell { display: none; }
.a-scard h4 { font-size: 18px; }
@media (max-width: 1024px) {
  .a-rd-group-head { display: block; }
}
@media (max-width: 920px) {
  .a-history-grid { grid-template-columns: 1fr; gap: var(--gap-lg); margin-top: 40px; }
  .a-history-video { position: static; }
  .a-history-grid .a-timeline { margin-top: 0; }
  .a-intro-stats { grid-template-columns: 1fr 1fr; }
  .a-mission-grid { grid-template-columns: 1fr; gap: var(--gap-lg); }
  .a-mission-anchor { position: static; }
  .a-mv-list { grid-template-columns: 1fr; gap: 0; }
  .a-mv-list .a-mv-item,
  .a-mv-list .a-mv-item:first-child { padding: 24px 0; }
  .a-mv-list .a-mv-item:first-child { border-top: none; padding-top: 0; }
  .a-timeline { margin-top: 48px; }
  .a-timeline::before { left: 7px; top: 8px; bottom: 8px; }
  .a-tl-item { grid-template-columns: 26px 1fr; padding: 16px 0; }
  .a-tl-dot { grid-column: 1; grid-row: 1 / span 2; justify-self: start; margin-top: 8px; }
  .a-tl-year { grid-column: 2; grid-row: 1; text-align: left; margin-bottom: 6px; }
  .a-tl-content { grid-column: 2; grid-row: 2; padding-top: 0; }
  .a-social-bento .a-scard { grid-column: span 6; }
  .a-values { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .a-intro-stats { grid-template-columns: 1fr; }
  .a-values { grid-template-columns: 1fr; }
}

/* Ultra-wide displays (>1920px): cap page hero instead of using 100vh. */
@media (min-width: 1921px) {
  .a-hero { min-height: 720px; }
}

/* Mobile: narrow containers align to the site-wide 100vw - 40px gutter. */
@media (max-width: 920px) {
  .a-social-section .container {
    max-width: calc(100vw - 40px);
  }
}