/* ============================================================
   About page — same design language as the service pages,
   tuned for reading rather than selling.
   ============================================================ */

.about-page { --accent: var(--violet); }
.about-section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.about-section.band { background: var(--paper-2); }
.about-page .eyebrow.q { color: var(--muted); }
.section-lede { color: var(--ink-2); margin-top: .9rem; }

/* ---------------- hero ---------------- */
.about-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4rem);
  background:
    radial-gradient(52% 44% at 12% 8%, var(--violet-soft), transparent 64%),
    radial-gradient(46% 40% at 88% 0%, var(--grad-soft), transparent 62%);
}
.about-hero-inner {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
}
@media (max-width: 940px) { .about-hero-inner { grid-template-columns: 1fr; } }

.about-h1 {
  font-size: clamp(2.2rem, 5.4vw, 3.7rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
}
.about-h1 .accent { color: var(--violet); }
.about-lede {
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  color: var(--ink-2);
  margin: 1.25rem 0 0;
  max-width: 52ch;
}

/* registered-company card */
.about-card {
  background: var(--surface);
  border: 1.5px solid var(--violet);
  border-radius: var(--r);
  padding: 1.5rem 1.4rem;
  box-shadow: var(--sh-glow);
}
.ac-label {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--violet);
  margin: 0 0 .35rem;
}
.ac-name { font-size: 1.2rem; font-weight: 750; margin: 0 0 1.1rem; letter-spacing: -.02em; }
.ac-list { margin: 0; display: grid; gap: .95rem; }
.ac-list > div { display: grid; gap: .18rem; }
.ac-list dt {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.ac-list dd { margin: 0; font-size: .95rem; color: var(--ink); line-height: 1.5; }
.ac-list dd.mono, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ac-list.compact { gap: .7rem; }

/* ---------------- trust numbers ---------------- */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  overflow: hidden;
}
.trust { background: var(--surface); padding: 1.6rem 1.3rem; }
.trust .n {
  display: block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.7rem, 3.6vw, 2.25rem);
  font-weight: 650;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--violet);
}
.trust .n .sub { font-size: .5em; color: var(--muted); }
.trust .l { display: block; font-size: .86rem; color: var(--ink-2); margin-top: .55rem; }

/* ---------------- prose ---------------- */
.about-prose h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 800; margin-top: 2.6rem; }
.about-prose h2:first-child { margin-top: 0; }
.about-prose h3 { font-size: clamp(1.05rem, 2vw, 1.22rem); font-weight: 700; margin-top: 1.9rem; }
.about-prose blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.12rem, 2.3vw, 1.42rem);
  line-height: 1.45;
  color: var(--ink);
  border-left: 3px solid var(--violet);
  padding: .3rem 0 .3rem 1.3rem;
  margin: 2rem 0;
}
.about-prose blockquote p { margin: 0; }

/* ---------------- commitments ---------------- */
.commit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.1rem;
  margin-top: 2rem;
}
.commit {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 1.5rem 1.4rem;
  transition: transform .18s, box-shadow .18s;
}
.commit:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.commit h3 { font-size: 1.05rem; font-weight: 750; margin: 0 0 1rem; }
.commit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.commit li {
  font-size: .93rem;
  color: var(--ink-2);
  padding-left: 1.75rem;
  position: relative;
  line-height: 1.5;
}
.commit li::before {
  position: absolute;
  left: 0;
  top: .1em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 700;
}
.commit.is-do { border-color: color-mix(in srgb, var(--green) 45%, var(--hairline)); }
.commit.is-do h3 { color: var(--green); }
.commit.is-do li::before { content: "✓"; background: var(--green); color: #fff; }
.commit.is-dont { border-color: color-mix(in srgb, var(--danger) 40%, var(--hairline)); }
.commit.is-dont h3 { color: var(--danger); }
.commit.is-dont li::before { content: "✕"; background: var(--danger); color: #fff; }
.commit-note { margin: 1.3rem 0 0; font-size: .9rem; color: var(--ink-2); max-width: 68ch; }

/* ---------------- contact details ---------------- */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.1rem;
  margin-top: 2rem;
}
.detail {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 1.5rem 1.4rem;
}
.detail h3 { font-size: 1rem; font-weight: 750; margin: 0 0 .8rem; }
.detail p { margin: 0 0 .6rem; }
.detail .muted { font-size: .84rem; color: var(--muted); }
.detail address { font-style: normal; font-size: .95rem; line-height: 1.6; color: var(--ink); margin-bottom: .6rem; }
.detail-mail {
  font-family: var(--mono);
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--violet);
  word-break: break-all;
}
.detail .btn { margin-top: .4rem; }

.about-fine {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  font-size: .82rem;
  color: var(--muted);
  max-width: 72ch;
}