.about-hero{
  padding-top: calc(var(--header-h) + clamp(24px, 5vw, 64px));
  padding-bottom: clamp(56px, 8vw, 108px);
  padding-left: 130px;
  padding-right: 60px;
}

.about-title{
  font-family: var(--font-polonium);
  font-size: clamp(2.75rem, 1.5rem + 7vw, 8rem);
  font-weight:700;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: clamp(12px, 2vw, 22px);
  background-image: url("../assets/about/sinvya_glow.png");
  background-repeat: no-repeat;
  background-position: 0% 50%;
  background-size: contain 100%;
  padding-top: clamp(16px, 2.5vw, 32px);
}

.about-lede{
  font-family: var(--font-onest);
  font-size: clamp(1.1rem, 0.9rem + 1vw, 1.5rem);
  font-weight:400;
  color: var(--text);
  margin-bottom: clamp(32px, 6vw, 64px);
}

.about-content{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items:center;
  gap: clamp(24px, 4vw, 48px);
}

.company-card{
  font-family: var(--font-onest);
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 57px);
}
.company-card h2{
  font-family: var(--font-onest);
  font-size: clamp(2.25rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: clamp(20px, 3vw, 62px);
}
.company-details{ display:flex; flex-direction:column; gap: 10px; margin:0; }
.company-details > div{
  display:flex; flex-wrap:wrap; gap: 6px;
  font-family: var(--font-onest);
  font-size: clamp(1.5rem, 0.9rem + 0.3vw, 1.1125rem);
  font-weight: 300;
  color: var(--text);
}
.company-details dt{ font-weight:500; }
.company-details dd{ margin:0; color: var(--text); }
.company-details a{ color: var(--text); }
.company-details a:hover{ color: var(--accent); }

.about-visual{ justify-self:end; align-self:flex-end; }
.about-visual img{ width:100%; }

@media (max-width: 860px){
  .about-content{ grid-template-columns: 1fr; }
  .about-visual{ order:-1; max-width: 320px; margin-inline:auto; }
}