/* ============================================================
   about page — standard info layout
   ============================================================ */

body.about {
  height: auto;
  min-height: 100dvh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 100% 0%, #fff3e9 0%, rgba(255,243,233,0) 45%),
    radial-gradient(110% 70% at 0% 100%, #f3eefe 0%, rgba(243,238,254,0) 50%),
    var(--paper);
}

.about__top {
  padding: clamp(18px, 4vh, 36px) clamp(20px, 6vw, 64px);
}
.about__back { align-items: flex-start; padding: 0; }
.about__back .chev { animation: none; }

.about__main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(8px, 2vh, 24px) clamp(20px, 6vw, 64px) clamp(40px, 8vh, 90px);
}

.about__hero { margin-bottom: clamp(40px, 8vh, 88px); }
.about__mark {
  width: clamp(190px, 30vw, 360px);
  height: auto;
  margin-bottom: clamp(20px, 4vh, 36px);
}
.about__lede {
  margin: 0;
  max-width: 22ch;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-size: clamp(1.7rem, 5.5vw, 3.4rem);
}

/* service cards */
.about__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin-bottom: clamp(48px, 9vh, 100px);
}
.card {
  border: 1px solid rgba(10,10,10,.12);
  border-radius: 22px;
  padding: clamp(20px, 3vw, 32px);
  background: rgba(255,255,255,.6);
  transition: transform .35s var(--ease), border-color .35s ease;
}
.card:hover { transform: translateY(-4px); border-color: rgba(10,10,10,.3); }
.card__tag {
  display: inline-block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 14px;
}
.card h2 {
  margin: 0 0 10px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
}
.card p {
  margin: 0;
  color: #2b2b2e;
  line-height: 1.5;
  font-size: clamp(.95rem, 1.6vw, 1.02rem);
}

/* contact */
.about__contact { border-top: 1px solid rgba(10,10,10,.12); padding-top: clamp(32px, 6vh, 64px); }
.about__h2 {
  margin: 0 0 clamp(16px, 3vh, 28px);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: clamp(1.6rem, 5vw, 3rem);
}
.about__contact-line { margin: 0 0 clamp(20px, 4vh, 32px); }
.biglink {
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 4vw, 2.4rem);
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  transition: opacity .25s ease;
}
.biglink:hover { opacity: .6; }
.about__follow { display: flex; gap: 10px; flex-wrap: wrap; }

/* footer */
.about__foot {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: clamp(20px, 4vh, 32px) clamp(20px, 6vw, 64px);
  border-top: 1px solid rgba(10,10,10,.1);
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
}
.about__home { font-weight: 600; color: var(--ink); }
.about__home:hover { opacity: .6; }