@import url("detail.css");

    .about-page .site-header {
      background: #050b16;
      border-bottom-color: rgba(255,255,255,.08);
      color: #fff;
      box-shadow: none;
    }

    .about-page .site-header.is-scrolled {
      background: rgba(255,255,255,.985);
      border-bottom-color: var(--line);
      box-shadow: 0 10px 30px rgba(17,45,95,.09);
      color: var(--brand-ink);
    }

    .about-page .brand img { filter: brightness(0) invert(1); }
    .about-page .site-header.is-scrolled .brand img { filter: none; }
    .about-page .main-nav a { color: rgba(255,255,255,.78); }
    .about-page .main-nav a:hover,
    .about-page .main-nav a:focus-visible,
    .about-page .main-nav a.active { color: #fff; }
    .about-page .site-header.is-scrolled .main-nav a { color: var(--text-muted); }
    .about-page .site-header.is-scrolled .main-nav a:hover,
    .about-page .site-header.is-scrolled .main-nav a:focus-visible,
    .about-page .site-header.is-scrolled .main-nav a.active { color: var(--brand-ink); }
    .about-page .header-consult-button {
      border-color: rgba(255,255,255,.36);
      background: rgba(255,255,255,.1);
      color: #fff;
    }
    .about-page .site-header.is-scrolled .header-consult-button {
      border-color: var(--brand-ink);
      background: var(--brand-ink);
      color: #fff;
    }

    .about-narrative {
      background: #050b16;
      color: var(--text);
      text-align: center;
    }

    .about-narrative .story-container {
      width: min(100% - 160px, 1500px);
      margin-inline: auto;
    }

    .about-narrative-hero {
      position: relative;
      min-height: calc(100svh - 80px);
      display: grid;
      align-items: center;
      overflow: hidden;
      background: #050b16;
      color: #fff;
    }

    .about-hero-copy {
      position: relative;
      z-index: 2;
      max-width: 980px;
      text-align: left;
    }

    .about-hero-copy .story-kicker {
      margin-bottom: 24px;
      color: rgba(255,255,255,.68);
    }

    .about-hero-copy h1 {
      margin: 0;
      color: #fff;
      font-size: clamp(68px, 7vw, 128px);
      line-height: 1.08;
      letter-spacing: 0;
    }

    .about-hero-copy p:not(.story-kicker) {
      max-width: 860px;
      margin: clamp(28px, 3vw, 46px) 0 0;
      color: rgba(255,255,255,.72);
      font-size: clamp(20px, 1.55vw, 26px);
      line-height: 1.8;
    }

    .about-symbol {
      position: absolute;
      top: 50%;
      right: max(8vw, calc((100vw - 1500px) / 2));
      width: min(30vw, 420px);
      opacity: 1;
      transform: translateY(-50%);
      filter: none;
    }

    .about-section {
      min-height: calc(100svh - 80px);
      display: grid;
      place-items: center;
      padding-block: clamp(72px, 7vw, 120px);
      background: #fff;
    }

    .about-section.alt { background: #f7f8fa; }
    .about-company-slogan { background: #fff; }
    .about-foundation { background: #f7f8fa; }

    .about-section h2 {
      max-width: 1180px;
      margin: 0 auto clamp(34px, 4vw, 58px);
      color: var(--text-heading);
      font-size: clamp(42px, 4.5vw, 76px);
      line-height: 1.22;
      letter-spacing: 0;
    }

    .about-section .about-body {
      max-width: 1080px;
      margin: 0 auto;
      color: var(--text-muted);
      font-size: clamp(18px, 1.4vw, 23px);
      line-height: 2.08;
      text-align: center;
    }

    .about-slogan {
      max-width: 1120px;
      margin: clamp(52px, 6vw, 88px) auto 0;
      padding-top: clamp(42px, 5vw, 72px);
      border-top: 1px solid var(--line);
      color: var(--text-heading);
      font-size: clamp(40px, 4vw, 68px);
      font-weight: 800;
      line-height: 1.35;
    }

    .about-slogan small {
      display: block;
      margin-top: 18px;
      color: var(--text-muted);
      font-size: clamp(18px, 1.4vw, 24px);
      font-weight: 500;
      line-height: 1.6;
    }

    .about-foundation-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 18px;
      margin-top: clamp(44px, 5vw, 72px);
    }

    .about-foundation-grid article {
      min-height: 250px;
      display: grid;
      place-items: center;
      padding: 34px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
    }

    .about-foundation-grid article:first-child,
    .about-foundation-grid article:nth-child(2) {
      grid-column: span 2;
      align-content: center;
    }

    .about-foundation-grid article:nth-child(n+3) {
      min-height: 170px;
      background: #fff;
    }

    .about-foundation-grid h3 {
      margin: 0;
      color: var(--text-heading);
      font-size: clamp(28px, 2.4vw, 42px);
      line-height: 1.2;
    }

    .about-foundation-grid p {
      max-width: 560px;
      margin: 18px auto 0;
      color: var(--text-muted);
      font-size: clamp(18px, 1.35vw, 22px);
      line-height: 1.9;
      text-align: center;
    }

    @media (max-width: 1180px) {
      .about-narrative .story-container {
        width: min(100% - 64px, 1040px);
      }

      .about-hero-copy { text-align: center; margin-inline: auto; }
      .about-symbol { right: 50%; width: min(62vw, 360px); transform: translate(50%, -50%); opacity: .22; }
      .about-foundation-grid { grid-template-columns: 1fr; }
      .about-foundation-grid article:first-child,
      .about-foundation-grid article:nth-child(2) { grid-column: auto; }
    }

    @media (max-width: 720px) {
      .about-narrative .story-container { width: min(100% - 40px, 640px); }
      .about-narrative-hero { min-height: calc(100svh - 72px); }
      .about-hero-copy h1 { font-size: 48px; }
      .about-section { min-height: auto; padding-block: 82px; }
    }

    /* Restore the original About page header behavior after the site-wide refresh. */
    body.about-page header.site-header.is-scrolled {
      background: rgba(255,255,255,.985) !important;
      border-bottom-color: var(--line) !important;
      box-shadow: 0 10px 30px rgba(17,45,95,.09) !important;
      color: var(--brand-ink) !important;
    }
    body.about-page header.site-header.is-scrolled .brand img { filter: none !important; }
    body.about-page header.site-header.is-scrolled .main-nav a { color: var(--text-muted) !important; }
    body.about-page header.site-header.is-scrolled .main-nav a:hover,
    body.about-page header.site-header.is-scrolled .main-nav a:focus-visible,
    body.about-page header.site-header.is-scrolled .main-nav a.active { color: var(--brand-ink) !important; }
    body.about-page header.site-header.is-scrolled .header-consult-button {
      border-color: var(--brand-ink) !important;
      background: var(--brand-ink) !important;
      color: #fff !important;
    }