/* About page — manufacturer trust. Reuses tokens, buttons, section rhythm. */

.ab-hero{
  padding:28px 0 64px;
  background:var(--soft);
  border-bottom:1px solid var(--line);
}
.ab-hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
}
.ab-hero-copy h1{
  font-size:clamp(34px,4.2vw,52px);
  line-height:1.08;
  letter-spacing:-.035em;
  margin-bottom:16px;
  color:var(--ink);
}
.ab-hero-copy > p{
  font-size:17px;
  line-height:1.65;
  max-width:560px;
  margin-bottom:26px;
}
.ab-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.ab-hero-media,
.ab-media,
.ab-factory-main,
.ab-factory-side figure{
  background:#dce1e6;
  display:grid;
  place-items:center;
  color:#6b7882;
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  padding:24px;
  overflow:hidden;
}
.ab-hero-media{
  aspect-ratio:4/3;
  min-height:360px;
  background:#fff;
}

.ab-split{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:48px;
  align-items:center;
}
.ab-split.is-reverse{grid-template-columns:.85fr 1.15fr}
.ab-split.is-reverse .ab-media{order:1}
.ab-split.is-reverse .ab-copy{order:2}
.ab-copy p{
  max-width:640px;
  margin:0 0 14px;
}
.ab-media{aspect-ratio:4/3;min-height:280px}

.ab-points{
  margin:18px 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
.ab-points li{
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:15px;
  font-weight:700;
  color:var(--ink);
}
.ab-points li span{
  display:block;
  margin-top:4px;
  font-weight:400;
  color:var(--muted);
  font-size:14px;
}

.ab-systems{
  display:grid;
  gap:0;
}
.ab-system{
  display:grid;
  grid-template-columns:140px 1fr auto;
  gap:24px;
  align-items:center;
  padding:28px 0;
  border-top:1px solid var(--line);
  text-decoration:none;
  color:inherit;
}
.ab-system:last-child{border-bottom:1px solid var(--line)}
.ab-system:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:4px;
}
.ab-system-no{
  color:var(--red);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.ab-system h3{
  margin:0 0 6px;
  font-size:22px;
  color:var(--ink);
}
.ab-system p{
  margin:0;
  font-size:14px;
  max-width:620px;
}
.ab-system .btn-text{white-space:nowrap}

.ab-cap-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px 36px;
}
.ab-cap{
  padding-top:14px;
  border-top:1px solid var(--line);
}
.ab-cap .no{
  color:var(--red);
  font-size:12px;
  font-weight:900;
  letter-spacing:.1em;
  margin-bottom:8px;
}
.ab-cap h3{
  margin:0 0 8px;
  font-size:20px;
  color:var(--ink);
}
.ab-cap p{margin:0;font-size:14px}

.ab-process{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px 28px;
  counter-reset:ab-step;
}
.ab-process li{
  list-style:none;
  counter-increment:ab-step;
  padding-top:14px;
  border-top:1px solid var(--line);
  position:relative;
}
.ab-process{
  margin:0;
  padding:0;
}
.ab-process li:before{
  content:counter(ab-step, decimal-leading-zero);
  display:block;
  color:var(--red);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  margin-bottom:8px;
}
.ab-process h3{
  margin:0 0 6px;
  font-size:17px;
  color:var(--ink);
}
.ab-process p{margin:0;font-size:14px}

.ab-principles{
  margin:0;
  padding:0;
  list-style:none;
}
.ab-principles li{
  padding:14px 0;
  border-top:1px solid var(--line);
}
.ab-principles li:last-child{border-bottom:1px solid var(--line)}
.ab-principles strong{
  display:block;
  margin-bottom:4px;
  color:var(--ink);
  font-size:16px;
}
.ab-principles span{
  font-size:14px;
  color:var(--muted);
}

.ab-industries{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px 28px;
}
.ab-industry{
  padding-top:14px;
  border-top:1px solid var(--line);
}
.ab-industry h3{
  margin:0 0 6px;
  font-size:18px;
  color:var(--ink);
}
.ab-industry .meta{
  display:block;
  margin-bottom:8px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#7a8792;
}
.ab-industry p{margin:0;font-size:14px}

.ab-factory{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:18px;
  align-items:stretch;
}
.ab-factory-main{
  aspect-ratio:16/10;
  min-height:320px;
}
.ab-factory-side{
  display:grid;
  gap:18px;
}
.ab-factory-side figure{
  margin:0;
  aspect-ratio:4/3;
  min-height:140px;
}
.ab-factory-note{
  margin-top:16px;
  font-size:13px;
  color:#7a8792;
}

.ab-why{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px 36px;
}
.ab-why article{
  padding-top:14px;
  border-top:1px solid var(--line);
}
.ab-why h3{
  margin:0 0 8px;
  font-size:18px;
  color:var(--ink);
}
.ab-why p{margin:0;font-size:14px}

.ab-explore{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}
.ab-explore h3{
  margin:0 0 14px;
  font-size:20px;
}
.ab-explore-list{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
.ab-explore-list li{
  border-bottom:1px solid var(--line);
}
.ab-explore-list a,
.ab-explore-list span{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  text-decoration:none;
  color:var(--ink);
  font-weight:700;
  font-size:15px;
}
.ab-explore-list a:hover{color:var(--blue)}
.ab-explore-list a:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
}
.ab-explore-list .meta{
  color:#7a8792;
  font-weight:600;
  font-size:13px;
}
.ab-note{
  margin:0 0 18px;
  font-size:14px;
  color:var(--muted);
}

@media(max-width:1024px){
  .ab-industries{grid-template-columns:1fr 1fr}
  .ab-process{grid-template-columns:1fr 1fr}
}
@media(max-width:980px){
  .ab-hero-grid,
  .ab-split,
  .ab-split.is-reverse,
  .ab-factory,
  .ab-explore{grid-template-columns:1fr;gap:28px}
  .ab-split.is-reverse .ab-media,
  .ab-split.is-reverse .ab-copy{order:initial}
  .ab-system{
    grid-template-columns:1fr;
    gap:10px;
  }
  .ab-why,
  .ab-cap-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .ab-hero{padding:24px 0 48px}
  .ab-industries,
  .ab-process{grid-template-columns:1fr}
  .ab-hero-media{min-height:240px}
}