.about-hero {
position: relative;
      min-height: calc(100vh - 80px);
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(290px, 0.75fr);
      align-items: end;
      gap: clamp(55px, 8vw, 140px);
      padding-top: clamp(110px, 10vw, 180px);
      padding-bottom: clamp(95px, 9vw, 145px);
}

.about-eyebrow {
display: block;
      margin-bottom: 28px;
      color: var(--muted);
      font-size: 14px;
}

.about-hero h1 {
max-width: 940px;
      margin: 0;
      font-size: clamp(78px, 9.2vw, 148px);
      font-weight: 400;
      line-height: 0.86;
      letter-spacing: -0.08em;
}

.about-hero-copy {
align-self: end;
      padding-bottom: 8px;
}

.about-hero-copy p {
margin: 0 0 34px;
      font-size: clamp(20px, 1.55vw, 25px);
      line-height: 1.35;
      letter-spacing: -0.03em;
}

.about-visual {
position: relative;
      min-height: clamp(560px, 58vw, 850px);
      padding: 0;
}

.about-visual-main,
    .about-visual-detail {
position: absolute;
      overflow: hidden;
      border-radius: 34px;
      box-shadow: 0 20px 55px rgba(0, 0, 0, 0.10);
}

.about-visual-main {
top: 0;
      left: 0;
      width: min(72%, 850px);
      aspect-ratio: 1.5 / 1;
      transform: rotate(-3deg);
}

.about-visual-detail {
right: 3%;
      bottom: 4%;
      width: min(42%, 480px);
      aspect-ratio: 1 / 1;
      transform: rotate(4deg);
}

.about-visual img {
width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
}

.about-visual-main img {
object-position: center 38%;
}

.about-visual-detail img {
object-position: 56% center;
}

.about-intro {
display: grid;
      grid-template-columns: 0.72fr 1.28fr;
      gap: clamp(55px, 9vw, 150px);
      padding-top: clamp(120px, 11vw, 180px);
}

.about-intro-label {
color: var(--muted);
      font-size: 14px;
}

.about-intro-copy p {
max-width: 900px;
      margin: 0;
      font-size: clamp(34px, 4.3vw, 65px);
      line-height: 1.03;
      letter-spacing: -0.055em;
}

.about-intro-copy p + p {
max-width: 650px;
      margin-top: 58px;
      font-size: clamp(18px, 1.5vw, 23px);
      line-height: 1.45;
      letter-spacing: -0.025em;
}

.about-values {
padding-top: clamp(120px, 11vw, 180px);
}

.about-values-grid {
display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: 55px;
}

.about-value {
min-height: 265px;
      padding: 0 34px 32px;
      border-left: 1px solid var(--line);
}

.about-value-number {
display: block;
      margin-bottom: 75px;
      color: var(--soft-number);
      font-size: 39px;
      font-style: normal;
}

.about-value h3 {
margin: 0 0 12px;
      font-size: 26px;
      font-weight: 500;
}

.about-value p {
max-width: 260px;
      margin: 0;
      font-size: 14px;
      line-height: 1.55;
}

.experience {
padding-top: clamp(120px, 11vw, 180px);
}

.experience-layout {
display: grid;
      grid-template-columns: 0.8fr 1.2fr;
      gap: clamp(60px, 9vw, 150px);
      margin-top: 70px;
}

.experience-intro p {
max-width: 430px;
      margin: 0 0 34px;
      font-size: 17px;
      line-height: 1.55;
}

.experience-item {
display: grid;
      grid-template-columns: 1fr auto;
      align-items: baseline;
      gap: 10px 30px;
      min-height: 112px;
      padding: 28px 0;
      border-bottom: 1px solid var(--line);
}

.experience-item strong {
grid-column: 1 / -1;
      font-size: clamp(25px, 2.3vw, 36px);
      font-weight: 400;
      letter-spacing: -0.04em;
}

.experience-company,
    .experience-period {
font-size: 14px;
}

.experience-company {
color: var(--muted);
}

.about-skills {
padding-top: clamp(120px, 11vw, 180px);
      padding-bottom: clamp(120px, 11vw, 180px);
}

.skills-cloud {
display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 55px;
}

.skill-tag {
display: inline-flex;
      align-items: center;
      min-height: 48px;
      padding: 0 20px;
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 15px;
}

.about-contact {
min-height: auto;
      padding-top: clamp(130px, 13vw, 210px);
      padding-bottom: clamp(90px, 9vw, 140px);
}

.about-contact-layout {
display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: clamp(45px, 8vw, 140px);
}

.about-contact h2 {
max-width: 1100px;
      margin: 0;
      font-size: clamp(55px, 7.1vw, 112px);
      font-weight: 400;
      line-height: 0.91;
      letter-spacing: -0.07em;
}

.about-contact .pill-button {
min-width: 140px;
}

@media (max-width: 900px) {
.about-hero {
grid-template-columns: 1fr;
        align-items: start;
}
}

@media (max-width: 900px) {
.about-hero-copy {
max-width: 650px;
}
}

@media (max-width: 900px) {
.about-visual {
min-height: 620px;
}
}

@media (max-width: 900px) {
.about-intro,
      .experience-layout {
grid-template-columns: 1fr;
        gap: 48px;
}
}

@media (max-width: 900px) {
.about-values-grid {
grid-template-columns: 1fr;
}
}

@media (max-width: 900px) {
.about-value {
min-height: auto;
        padding: 35px 0;
        border-top: 1px solid var(--line);
        border-left: 0;
}
}

@media (max-width: 900px) {
.about-value-number {
margin-bottom: 36px;
}
}

@media (max-width: 900px) {
.about-contact-layout {
grid-template-columns: 1fr;
        align-items: start;
}
}

@media (max-width: 900px) {
.about-contact .pill-button {
justify-self: end;
}
}

@media (max-width: 680px) {
.about-hero {
min-height: auto;
        gap: 52px;
        padding-top: 72px;
        padding-bottom: 80px;
}
}

@media (max-width: 680px) {
.about-eyebrow {
margin-bottom: 20px;
        font-size: 12px;
}
}

@media (max-width: 680px) {
.about-hero h1 {
font-size: clamp(62px, 18vw, 88px);
        line-height: 0.88;
}
}

@media (max-width: 680px) {
.about-hero-copy p {
margin-bottom: 30px;
        font-size: 19px;
}
}

@media (max-width: 680px) {
.about-visual {
min-height: 460px;
        padding: 0;
}
}

@media (max-width: 680px) {
.about-visual-main {
width: 88%;
        border-radius: 26px;
}
}

@media (max-width: 680px) {
.about-visual-detail {
right: 0;
        width: 52%;
        border-radius: 24px;
}
}

@media (max-width: 680px) {
.about-intro {
gap: 34px;
        padding-top: 95px;
}
}

@media (max-width: 680px) {
.about-intro-copy p {
font-size: 34px;
        line-height: 1.08;
}
}

@media (max-width: 680px) {
.about-intro-copy p + p {
margin-top: 38px;
        font-size: 17px;
}
}

@media (max-width: 680px) {
.about-values,
      .experience,
      .about-skills {
padding-top: 95px;
}
}

@media (max-width: 680px) {
.about-values-grid {
margin-top: 38px;
}
}

@media (max-width: 680px) {
.about-value h3 {
font-size: 23px;
}
}

@media (max-width: 680px) {
.experience-layout {
margin-top: 42px;
}
}

@media (max-width: 680px) {
.experience-item {
grid-template-columns: 1fr auto;
        gap: 10px 20px;
        min-height: auto;
        padding: 24px 0;
}
}

@media (max-width: 680px) {
.experience-item strong {
grid-column: 1 / -1;
        font-size: 27px;
}
}

@media (max-width: 680px) {
.experience-company,
      .experience-period {
font-size: 12px;
}
}

@media (max-width: 680px) {
.skills-cloud {
gap: 9px;
        margin-top: 38px;
}
}

@media (max-width: 680px) {
.skill-tag {
min-height: 42px;
        padding-inline: 16px;
        font-size: 13px;
}
}

@media (max-width: 680px) {
.about-contact {
padding-top: 110px;
        padding-bottom: 80px;
}
}

@media (max-width: 680px) {
.about-contact-layout {
gap: 42px;
}
}

@media (max-width: 680px) {
.about-contact h2 {
font-size: clamp(48px, 13vw, 70px);
}
}

@media (max-width: 680px) {
.about-contact .pill-button {
justify-self: end;
        align-self: flex-end;
}
}