.hero {
  padding: 31px 0 42px;
}

.hero__inner {
  min-height: 405px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero__content { padding-top: 0; }


.hero h1 {
  margin: 0 0 30px;
  font-size: clamp(48px, 5vw, 65px);
  line-height: 1;
}

.hero__label,
.hero__name,
.hero__reading {
  display: block;
}

.hero__label {
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
}

.hero__reading {
  margin-top: 12px;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
}

.hero p {
  width: 100%;
  min-width: 0;
  margin: 0 0 29px;
  font-size: 16px;
  line-height: 1.88;
  letter-spacing: .025em;
}

.hero__visual {
  align-self: start;
  margin: 34px -19px 0 -24px;
}

.hero__visual img { width: 100%; }

.brand-intro {
  padding: 12px 0 58px;
}

.brand-intro__inner {
  max-width: 900px;
}

.brand-intro h2 {
  margin: 0 0 18px;
  font-size: 30px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.brand-intro p {
  margin: 0;
  font-size: 16px;
  line-height: 2;
  word-break: normal;
  overflow-wrap: anywhere;
}

.services {
  padding: 0 0 115px;
}

.services__panel {
  padding: 24px 45px 45px;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 4px 23px rgb(0 0 0 / 9%);
}

.services h2 {
  margin: 0 auto 20px;
  width: 242px;
}

.services h2 img { width: 100%; }

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 68px;
}

.service-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.service-card__image {
  width: 100%;
  aspect-ratio: 391 / 295;
  object-fit: cover;
  border-radius: 10px;
}

.service-card p {
  min-height: 71px;
  margin: 19px 0 10px;
  font-size: 16px;
  line-height: 1.65;
}

.primary-button {
  width: calc(100% - 16px);
  min-height: 60px;
  margin: auto auto 0;
  padding: 12px 17px 12px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #fff;
  border-radius: 999px;
  background: var(--color-blue);
  font-size: 16px;
  font-weight: 700;
  transition: opacity .2s, transform .2s;
}

.primary-button span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--color-blue);
  border-radius: 50%;
  background: #fff;
  font-size: 8px;
}

.primary-button:hover,
.primary-button:focus-visible {
  opacity: .8;
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr 1fr; }
  .hero p { font-size: 14px; }
  .services__grid { gap: 28px; }
  .services__panel { padding-inline: 30px; }
  .service-card p { font-size: 14px; }
  .primary-button { padding-inline: 18px; font-size: 14px; }
}

@media (max-width: 700px) {
  .hero { padding: 22px 0 40px; }
  .hero__inner { display: flex; flex-direction: column; min-height: 0; gap: 0; align-items: stretch; }
  .hero__content { display: contents; }
  .hero h1 { max-width: 100%; order: 2; margin-bottom: 22px; font-size: 42px; overflow-wrap: anywhere; }
  .hero__label { margin-bottom: 8px; font-size: 14px; }
  .hero__reading { margin-top: 9px; font-size: 17px; }
  .hero__visual { order: 3; width: 100%; margin: 0 0 28px; }
  .hero p { order: 4; margin-bottom: 22px; font-size: 14px; line-height: 1.85; word-break: normal; overflow-wrap: anywhere; }
  .hero p br { display: none; }
  .brand-intro { padding: 0 0 44px; }
  .brand-intro h2 { margin-bottom: 14px; font-size: 24px; }
  .brand-intro p { font-size: 15px; line-height: 1.9; }
  .services { padding-bottom: 72px; }
  .services__panel { padding: 26px 20px 30px; border-radius: 14px; }
  .services h2 { width: min(240px, 78%); margin-bottom: 25px; }
  .services__grid { grid-template-columns: 1fr; gap: 38px; }
  .service-card__image { aspect-ratio: 391 / 255; }
  .service-card p { min-height: 0; margin: 16px 4px 14px; font-size: 15px; }
  .primary-button { width: min(100%, 300px); min-height: 55px; }
}