body.about-page-body {
  background: #ffffff;
}

.about-page {
  --about-frame-offset: max(0px, calc((100vw - 1728px) / 2));

  position: relative;
  min-width: var(--layout-min-width);
  min-height: max(
    min(481.25vw, 8316px),
    calc(min(416.262vw, 7193px) + 100svh)
  );
  overflow: hidden;
  background: #ffffff;
  color: #000000;
}

.about-kicker {
  position: absolute;
  top: min(13.137vw, 227px);
  left: calc(var(--about-frame-offset) + min(4.456vw, 77px));
  display: flex;
  align-items: center;
  gap: clamp(10px, 0.579vw, 10px);
  color: #76777a;
}

.about-kicker span {
  width: min(1.1vw, 19px);
  border-top: 1px solid currentColor;
}

.about-kicker p {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 30px;
}

.about-hero {
  position: absolute;
  top: min(20.833vw, 360px);
  left: calc(var(--about-frame-offset) + min(9.201vw, 159px));
  width: min(69.213vw, 1196px);
  margin: 0;
  font-size: clamp(38px, 3.472vw, 60px);
  font-weight: 800;
  line-height: 1.217;
}

.about-foundation h2,
.about-foundation h3,
.about-foundation__copy,
.about-foundation__image {
  position: absolute;
}

.about-foundation h2 {
  top: min(56.539vw, 977px);
  left: calc(var(--about-frame-offset) + min(9.201vw, 159px));
  width: min(27.315vw, 472px);
  min-height: min(8.044vw, 139px);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: clamp(30px, 2.778vw, 48px);
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.about-foundation h3 {
  top: min(52.546vw, 908px);
  left: calc(var(--about-frame-offset) + min(63.6vw, 1099px));
  width: min(32vw, 553px);
  min-height: min(8.044vw, 139px);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(30px, 2.5vw, 44px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.about-foundation__copy {
  top: min(62.442vw, 1079px);
  left: calc(var(--about-frame-offset) + min(9.201vw, 159px));
  width: min(34.491vw, 596px);
  font-size: clamp(17px, 1.62vw, 28px);
  font-weight: 500;
  line-height: 1.65;
}

.about-foundation__copy p {
  margin: 0;
}

.about-foundation__image {
  top: min(63.889vw, 1104px);
  left: calc(var(--about-frame-offset) + min(44.618vw, 771px));
  width: min(50.926vw, 880px);
  height: auto;
  display: block;
}

.about-manifesto {
  position: absolute;
  top: min(124.016vw, 2143px);
  left: var(--about-frame-offset);
  width: min(100vw, 1728px);
  min-height: min(41.493vw, 717px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  font-size: clamp(26px, 2.546vw, 44px);
  font-weight: 700;
  line-height: 1.222;
  text-align: center;
}

.about-manifesto h2,
.about-manifesto p,
.about-manifesto div {
  margin: 0;
}

.about-manifesto-cta {
  position: absolute;
  top: min(168.403vw, 2910px);
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
}

.about-principles {
  position: absolute;
  top: min(182.986vw, 3162px);
  left: calc(var(--about-frame-offset) + min(11.169vw, 193px));
  width: min(77.662vw, 1342px);
  height: min(71.254vw, 1231.26px);
}

.about-principles > h2 {
  width: min(22.375vw, 386.64px);
  min-height: min(5.182vw, 89.54px);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(30px, 2.778vw, 48px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.about-principles__grid {
  position: absolute;
  top: min(11.901vw, 205.64px);
  left: min(4.225vw, 73px);
  display: grid;
  grid-template-columns: repeat(2, min(32.818vw, 567.1px));
  grid-template-rows: repeat(2, min(27.58vw, 476.58px));
  column-gap: min(3.548vw, 61.3px);
  row-gap: min(2.568vw, 44.37px);
}

.about-principle {
  position: relative;
  border: 1px solid #000000;
}

.about-principle h3 {
  position: absolute;
  margin: 0;
  font-size: clamp(23px, 2.083vw, 36px);
  font-weight: 700;
  line-height: 1.563;
  white-space: nowrap;
}

.about-principle p {
  position: absolute;
  width: min(17.43vw, 301.17px);
  margin: 0;
  font-size: clamp(17px, 1.62vw, 28px);
  font-weight: 500;
  line-height: 1.6;
}

.about-principle--structure h3,
.about-principle--precision h3 {
  top: 50%;
  left: 0;
  transform: translate(-56%, -50%) rotate(-90deg);
}

.about-principle--perception h3,
.about-principle--craft h3 {
  top: 50%;
  right: 0;
  transform: translate(56%, -50%) rotate(-90deg);
}

.about-principle--structure p {
  top: min(10.787vw, 186.4px);
  left: min(13.237vw, 228.73px);
  width: min(15.625vw, 270px);
}

.about-principle--perception p {
  top: min(10.787vw, 186.4px);
  left: min(0.839vw, 14.5px);
  width: min(17.361vw, 300px);
  text-align: right;
}

.about-principle--precision p {
  top: min(7.87vw, 136px);
  left: min(13.237vw, 228.73px);
}

.about-principle--craft p {
  top: min(7.349vw, 127px);
  left: min(0.989vw, 17.09px);
  width: min(16.204vw, 280px);
  text-align: right;
}

.about-name {
  position: absolute;
  top: min(267.593vw, 4624px);
  left: 0;
  width: 100%;
  height: min(58.507vw, 1011px);
  overflow: hidden;
  background: #f3f3f3;
}

.about-name__copy {
  position: absolute;
  top: min(3.183vw, 55px);
  left: calc(var(--about-frame-offset) + min(9.201vw, 159px));
  width: min(34.722vw, 600px);
  z-index: 1;
}

.about-name h2,
.about-name h3,
.about-name__copy p {
  margin: 0;
}

.about-name h2 {
  margin-left: min(0.289vw, 5px);
  font-size: clamp(30px, 2.778vw, 48px);
  font-weight: 700;
  line-height: 1.25;
}

.about-name h3 {
  margin: min(0.579vw, 10px) 0 0 min(0.289vw, 5px);
  font-size: clamp(23px, 2.083vw, 36px);
  font-weight: 700;
  line-height: 1.563;
}

.about-name__copy p {
  margin-top: min(10.88vw, 188px);
  font-size: clamp(17px, 1.62vw, 28px);
  font-weight: 500;
  line-height: 1.6;
}

.about-name__image {
  position: absolute;
  top: 0;
  right: var(--about-frame-offset);
  width: min(55.845vw, 965px);
  height: auto;
  display: block;
}

.about-name__answer {
  position: absolute;
  top: min(48.09vw, 831px);
  left: calc(var(--about-frame-offset) + min(37.384vw, 646px));
  width: min(25.868vw, 447px);
  min-height: min(4.861vw, 84px);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(20px, 1.852vw, 32px);
  font-weight: 700;
  line-height: 1.563;
  text-align: center;
}

.about-mark {
  position: absolute;
  top: min(349.826vw, 6045px);
  left: var(--about-frame-offset);
  width: min(100vw, 1728px);
  height: min(48.958vw, 846px);
}

.about-mark h2,
.about-mark > p,
.about-mark__eye {
  position: absolute;
}

.about-mark h2 {
  top: min(2.199vw, 38px);
  left: min(9.201vw, 159px);
  margin: 0;
  font-size: clamp(26px, 2.431vw, 42px);
  font-weight: 700;
  line-height: 1.389;
}

.about-mark__intro,
.about-mark__lead,
.about-mark__traits,
.about-mark__explanation {
  left: min(9.201vw, 159px);
  margin: 0;
  font-size: clamp(21px, 2.083vw, 36px);
  line-height: 1.563;
}

.about-mark__intro {
  top: min(7.176vw, 124px);
  width: min(38.426vw, 664px);
  font-weight: 400;
}

.about-mark__lead {
  top: min(16.493vw, 285px);
  width: min(31.019vw, 536px);
  font-weight: 400;
}

.about-mark__traits {
  top: min(29.977vw, 518px);
  width: min(38.426vw, 664px);
  display: flex;
  gap: min(2.315vw, 40px);
  color: #ff0000;
}

.about-mark__traits strong {
  font-weight: 600;
}

.about-mark__explanation {
  top: min(40.22vw, 695px);
  width: min(79.977vw, 1382px);
  font-weight: 400;
}

.about-mark__wordmark {
  top: 0;
  left: min(57.465vw, 993px);
  width: min(38.426vw, 664px);
  margin: 0;
  font-size: clamp(80px, 10.417vw, 180px);
  font-weight: 600;
  line-height: 1.211;
  text-align: center;
}

.about-mark__eye {
  top: min(19.271vw, 333px);
  left: min(62.037vw, 1072px);
  width: min(29.282vw, 506px);
  height: min(19.502vw, 337px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000000;
}

.about-mark__eye img {
  width: min(20.106vw, 347.43px);
  height: auto;
  display: block;
}

.about-closing {
  position: absolute;
  top: min(416.262vw, 7193px);
  left: 0;
  width: 100%;
  height: max(min(64.988vw, 1123px), 100svh);
  padding-top: min(18.634vw, 322px);
  background: #000000;
  color: #ffffff;
  text-align: center;
}

.about-closing p {
  margin: 0;
  font-size: clamp(34px, 3.704vw, 64px);
  font-weight: 700;
  line-height: 1.094;
}

.about-closing p + p {
  margin-top: min(7.755vw, 134px);
}

.about-closing .build-yours-link {
  margin-top: min(6.25vw, 108px);
}

@media (max-width: 980px) {
  .about-page {
    min-height: 0;
    overflow: hidden;
    padding-top: 150px;
  }

  .about-kicker,
  .about-hero,
  .about-foundation h2,
  .about-foundation h3,
  .about-foundation__copy,
    .about-foundation__image,
    .about-manifesto,
    .about-manifesto-cta,
    .about-principles,
  .about-principles__grid,
  .about-name,
  .about-name__copy,
  .about-name__image,
  .about-name__answer,
  .about-mark,
  .about-mark h2,
  .about-mark > p,
  .about-mark__eye,
  .about-closing {
    position: static;
  }

  .about-manifesto-cta {
    display: block;
    width: max-content;
    margin: 68px auto 0;
    transform: none;
  }

  .about-kicker {
    margin: 72px 28px 0;
  }

  .about-kicker span {
    width: 19px;
  }

  .about-hero {
    width: auto;
    margin: 62px 32px 0;
    font-size: clamp(40px, 6.6vw, 58px);
    line-height: 1.3;
  }

  .about-foundation {
    margin: 160px 32px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px 38px;
  }

  .about-foundation h2,
  .about-foundation h3 {
    width: auto;
    min-height: 0;
    justify-content: flex-start;
    font-size: clamp(28px, 4.2vw, 38px);
    text-align: left;
  }

  .about-foundation__copy {
    width: auto;
    font-size: clamp(18px, 2.8vw, 24px);
    line-height: 1.75;
  }

  .about-foundation__copy p + p {
    margin-top: 18px;
  }

  .about-foundation__image {
    align-self: center;
    width: 100%;
    height: auto;
  }

  .about-manifesto {
    width: auto;
    min-height: 680px;
    margin: 190px 32px 0;
    font-size: clamp(28px, 4.5vw, 40px);
    line-height: 1.3;
  }

  .about-principles {
    width: auto;
    height: auto;
    margin: 190px 32px 0;
  }

  .about-principles > h2 {
    width: auto;
    min-height: 0;
    justify-content: flex-start;
    font-size: clamp(32px, 5.2vw, 44px);
    text-align: left;
  }

  .about-principles__grid {
    margin-top: 68px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(330px, auto));
    gap: 28px;
  }

  .about-principle {
    min-height: 330px;
    padding: 42px;
  }

  .about-principle h3,
  .about-principle p {
    position: static;
    width: auto;
    transform: none;
    text-align: left;
    white-space: normal;
  }

  .about-principle h3 {
    font-size: clamp(24px, 3.8vw, 32px);
    line-height: 1.25;
  }

  .about-principle p {
    margin-top: 52px;
    font-size: clamp(19px, 3vw, 26px);
    line-height: 1.65;
  }

  .about-name {
    width: 100%;
    height: auto;
    margin-top: 190px;
    padding: 76px 32px 86px;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 52px 36px;
  }

  .about-name__copy {
    width: auto;
    z-index: auto;
  }

  .about-name h2 {
    margin: 0;
    font-size: clamp(32px, 5.2vw, 44px);
  }

  .about-name h3 {
    margin: 12px 0 0;
    font-size: clamp(24px, 4vw, 36px);
  }

  .about-name__copy p {
    margin-top: 80px;
    font-size: clamp(19px, 3vw, 26px);
    line-height: 1.7;
  }

  .about-name__image {
    width: 100%;
    align-self: center;
  }

  .about-name__answer {
    grid-column: 1 / -1;
    width: auto;
    min-height: 0;
    justify-content: center;
    font-size: clamp(23px, 3.6vw, 32px);
  }

  .about-mark {
    width: auto;
    height: auto;
    margin: 190px 32px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 42px 48px;
    align-items: start;
  }

  .about-mark h2,
  .about-mark__intro,
  .about-mark__lead,
  .about-mark__traits,
  .about-mark__explanation {
    width: auto;
  }

  .about-mark h2 {
    grid-column: 1;
    font-size: clamp(32px, 5.2vw, 44px);
  }

  .about-mark__intro,
  .about-mark__lead,
  .about-mark__traits,
  .about-mark__explanation {
    font-size: clamp(19px, 3vw, 27px);
    line-height: 1.6;
  }

  .about-mark__wordmark {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    font-size: clamp(80px, 12vw, 132px);
    text-align: center;
  }

  .about-mark__eye {
    grid-column: 2;
    grid-row: 3 / span 2;
    width: 100%;
    height: auto;
    aspect-ratio: 506 / 337;
  }

  .about-mark__eye img {
    width: 69%;
  }

  .about-mark__traits {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
  }

  .about-mark__explanation {
    grid-column: 1 / -1;
    margin-top: 38px;
  }

  .about-closing {
    width: 100%;
    height: auto;
    min-height: 100svh;
    margin-top: 190px;
    padding: 150px 32px 90px;
  }

  .about-closing p {
    font-size: clamp(38px, 6.6vw, 58px);
    line-height: 1.16;
  }

  .about-closing p + p {
    margin-top: 100px;
  }

  .about-closing .build-yours-link {
    margin-top: 90px;
    font-size: clamp(23px, 3.7vw, 32px);
  }
}

@media (max-width: 640px) {
  html,
  body.about-page-body,
  .about-page {
    min-width: 0;
  }

  .about-page {
    padding-top: 98px;
  }

  .about-kicker,
  .about-hero,
  .about-foundation,
  .about-manifesto,
  .about-principles,
  .about-mark {
    margin-left: 20px;
    margin-right: 20px;
  }

  .about-hero {
    margin-top: 52px;
    font-size: var(--subpage-mobile-title-size);
    line-height: 1.24;
  }

  .about-foundation {
    margin-top: 130px;
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .about-foundation h3 {
    margin-top: 34px;
    font-size: clamp(22px, 7.5vw, 32px);
  }

  .about-foundation__copy {
    font-size: 19px;
    line-height: 1.6;
  }

  .about-foundation__image {
    margin-top: 24px;
  }

  .about-manifesto {
    min-height: 650px;
    margin-top: 140px;
    font-size: clamp(24px, 7vw, 30px);
  }

  .about-manifesto-cta {
    margin-top: 56px;
  }

  .about-principles {
    margin-top: 140px;
  }

  .about-principles__grid {
    margin-top: 48px;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 20px;
  }

  .about-principle {
    min-height: 270px;
    padding: 34px 30px;
  }

  .about-principle p {
    margin-top: 42px;
    font-size: 21px;
    line-height: 1.55;
  }

  .about-name {
    margin-top: 140px;
    padding: 64px 20px 72px;
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .about-name__copy p {
    margin-top: 54px;
    font-size: 20px;
    line-height: 1.6;
  }

  .about-name__image {
    width: calc(100% + 40px);
    max-width: none;
    margin-left: -20px;
  }

  .about-name__answer {
    font-size: 24px;
    line-height: 1.35;
  }

  .about-mark {
    margin-top: 140px;
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-mark h2,
  .about-mark__intro,
  .about-mark__lead,
  .about-mark__traits,
  .about-mark__wordmark,
  .about-mark__eye,
  .about-mark__explanation {
    grid-column: 1;
    grid-row: auto;
  }

  .about-mark__wordmark {
    margin-top: 48px;
    font-size: clamp(70px, 23vw, 96px);
  }

  .about-mark__eye {
    margin-top: 8px;
  }

  .about-mark__explanation {
    margin-top: 24px;
  }

  .about-closing {
    margin-top: 140px;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 120px 20px 76px;
  }

  .about-closing p {
    font-size: clamp(34px, 10vw, 44px);
  }

  .about-closing p + p {
    margin-top: 84px;
  }

  .about-closing .build-yours-link {
    margin-top: 76px;
    font-size: 24px;
  }
}