@charset "utf-8";

body:has(.at-about-page) .at-sub-hero {
   display: none
}

body:has(.at-about-page) .at-content-shell {
   max-width: none;
   margin: 0;
   padding: 0
}

body:has(.at-about-page) .at-footer {
   padding-top: 55px
}

.at-about-page {
   overflow: hidden;
   background: #18181e;
   color: #f2f0f4
}

.at-about-kicker {
   margin: 0;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .19em;
   color: #c9a3ff
}

.at-about-hero {
   position: relative;
   min-height: 100svh;
   display: flex;
   align-items: center;
   padding: 150px var(--pad) 80px;
   overflow: hidden;
   isolation: isolate;
   background: #18181e
}

.at-about-grid {
   position: absolute;
   inset: 0;
   z-index: -4;
   background-image: linear-gradient(rgba(255, 255, 255, .032) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .032) 1px, transparent 1px);
   background-size: 8vw 8vw;
   mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 80%, transparent)
}

.at-about-glow {
   position: absolute;
   border-radius: 50%;
   filter: blur(18px);
   pointer-events: none;
   z-index: -3
}

.at-about-glow-a {
   width: 48vw;
   height: 48vw;
   left: -16vw;
   bottom: -18vw;
   background: radial-gradient(circle, rgba(242, 93, 176, .18), transparent 65%)
}

.at-about-glow-b {
   width: 42vw;
   height: 42vw;
   right: -10vw;
   top: 0;
   background: radial-gradient(circle, rgba(165, 92, 255, .19), transparent 68%)
}

.at-about-hero-inner {
   width: min(100%, var(--max));
   margin: auto
}

.at-about-title {
   display: flex;
   align-items: baseline;
   gap: clamp(18px, 3vw, 56px);
   margin: clamp(55px, 8vw, 120px) 0 0;
   font-size: clamp(78px, 13vw, 220px);
   line-height: .78;
   letter-spacing: -.075em;
   font-weight: 900;
   white-space: nowrap
}

.at-about-title span:first-child {
   color: transparent;
   -webkit-text-stroke: 1px rgba(255, 255, 255, .75)
}

.at-about-title i {
   font-style: normal;
   font-weight: 400;
   color: #c697ff;
   font-size: .52em;
   transform: translateY(-.08em)
}

.at-about-equation {
   display: flex;
   align-items: center;
   gap: clamp(20px, 3vw, 55px);
   margin-top: clamp(26px, 4vw, 58px)
}

.at-about-equation span {
   font-size: clamp(42px, 6vw, 95px);
   font-weight: 300;
   color: #f25db0
}

.at-about-equation strong {
   font-size: clamp(76px, 12vw, 205px);
   line-height: .82;
   letter-spacing: -.075em;
   font-weight: 900;
   color: #d1a8ff
}

.at-about-hero-bottom {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 40px;
   margin-top: clamp(70px, 9vw, 135px);
   padding-top: 22px;
   border-top: 1px solid rgba(255, 255, 255, .13)
}

.at-about-hero-bottom p {
   margin: 0;
   max-width: 760px;
   font-size: clamp(20px, 2vw, 31px);
   line-height: 1.55;
   letter-spacing: -.02em
}

.at-about-hero-bottom span {
   font-size: 10px;
   letter-spacing: .17em;
   color: #918e98
}

.at-about-origin,
.at-about-first {
   padding: clamp(110px, 11vw, 190px) var(--pad);
   background: #222229
}

.at-about-section-head {
   width: min(100%, var(--max));
   margin: 0 auto clamp(70px, 8vw, 125px);
   padding-bottom: 18px;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 30px;
   border-bottom: 1px solid rgba(255, 255, 255, .12)
}

.at-about-section-head>span {
   font-size: 12px;
   letter-spacing: .18em;
   color: #aaa7b1
}

.at-about-section-head>p {
   margin: 0;
   font-size: 15px;
   color: #8f8c96
}

.at-about-origin-grid {
   width: min(100%, var(--max));
   margin: auto;
   display: grid;
   grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
   gap: clamp(60px, 8vw, 140px);
   align-items: start
}

.at-about-origin-word {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   font-size: clamp(70px, 9vw, 155px);
   font-weight: 900;
   line-height: .78;
   letter-spacing: -.065em
}

.at-about-origin-word span:first-child {
   color: transparent;
   -webkit-text-stroke: 1px rgba(255, 255, 255, .68)
}

.at-about-origin-word b {
   margin: .18em 0 .15em .06em;
   font-size: .42em;
   font-weight: 400;
   color: #c697ff
}

.at-about-origin-word span:last-child {
   color: #d1a8ff
}

.at-about-origin-copy {
   padding-top: 8px
}

.at-about-lead {
   margin: 0 0 38px;
   font-size: clamp(25px, 2.3vw, 39px);
   line-height: 1.48;
   letter-spacing: -.025em;
   color: #eeebf1
}

.at-about-lead strong {
   color: #d1a8ff;
   font-weight: 650
}

.at-about-origin-copy>p:last-child {
   margin: 0;
   font-size: clamp(16px, 1.3vw, 20px);
   line-height: 1.9;
   color: #aaa7b1
}

.at-about-create {
   padding: clamp(110px, 11vw, 190px) var(--pad);
   background: #f3f0ea;
   color: #151519
}

.at-about-section-head-dark {
   border-color: rgba(0, 0, 0, .15)
}

.at-about-section-head-dark>span,
.at-about-section-head-dark>p {
   color: #666269
}

.at-about-create-grid {
   width: min(100%, var(--max));
   margin: auto;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 1px;
   background: rgba(0, 0, 0, .18);
   border: 1px solid rgba(0, 0, 0, .16)
}

.at-about-create-grid article {
   min-height: 450px;
   padding: clamp(28px, 4vw, 60px);
   background: #f3f0ea;
   display: flex;
   flex-direction: column
}

.at-about-create-grid article>span {
   font-size: 11px;
   letter-spacing: .16em;
   color: #777178
}

.at-about-create-grid h2 {
   margin: auto 0 34px;
   font-size: clamp(48px, 5.2vw, 92px);
   letter-spacing: -.06em;
   line-height: .88
}

.at-about-create-grid p {
   margin: 0;
   max-width: 430px;
   font-size: clamp(15px, 1.2vw, 18px);
   line-height: 1.75;
   color: #5c575e
}

.at-about-first {
   background: radial-gradient(circle at 90% 18%, rgba(165, 92, 255, .10), transparent 30%), #1b1b21
}

.at-about-first-grid {
   width: min(100%, var(--max));
   margin: auto;
   display: grid;
   grid-template-columns: minmax(0, 1.05fr) minmax(370px, .95fr);
   gap: clamp(55px, 8vw, 135px);
   align-items: center
}

.at-about-first-image {
   position: relative;
   aspect-ratio: 4/5;
   overflow: hidden;
   background: #27252e;
   clip-path: polygon(0 0, 92% 0, 100% 8%, 100% 100%, 0 100%)
}

.at-about-first-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 1s var(--ease), filter 1s ease
}

.at-about-first-image:hover img {
   transform: scale(1.025);
   filter: saturate(1.06)
}

.at-about-first-placeholder {
   height: 100%;
   display: grid;
   place-items: center;
   background: radial-gradient(circle at 30% 20%, rgba(242, 93, 176, .25), transparent 30%), radial-gradient(circle at 75% 75%, rgba(165, 92, 255, .28), transparent 36%), #25232c
}

.at-about-first-placeholder span {
   font-size: clamp(50px, 8vw, 130px);
   font-weight: 900;
   letter-spacing: -.07em;
   color: rgba(255, 255, 255, .18)
}

.at-about-first-copy h2 {
   margin: 28px 0 25px;
   font-size: clamp(78px, 10vw, 165px);
   line-height: .82;
   letter-spacing: -.07em
}

.at-about-first-tagline {
   margin: 0 0 40px;
   font-size: clamp(21px, 2vw, 31px);
   line-height: 1.5;
   color: #cbc7d0
}

.at-about-first-copy dl {
   margin: 0;
   border-top: 1px solid rgba(255, 255, 255, .14)
}

.at-about-first-copy dl>div {
   display: grid;
   grid-template-columns: 100px 1fr;
   gap: 24px;
   padding: 15px 0;
   border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.at-about-first-copy dt {
   font-size: 10px;
   letter-spacing: .13em;
   color: #85818c
}

.at-about-first-copy dd {
   margin: 0;
   font-size: 14px;
   color: #d4d0d9
}

.at-about-first-text {
   margin: 42px 0 0;
   max-width: 650px;
   font-size: clamp(16px, 1.35vw, 20px);
   line-height: 1.9;
   color: #aaa7b1
}

.at-about-link {
   display: inline-flex;
   align-items: center;
   gap: 44px;
   margin-top: 42px;
   padding-bottom: 11px;
   border-bottom: 1px solid rgba(255, 255, 255, .4);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .15em
}

.at-about-link b {
   font-size: 18px;
   font-weight: 400;
   transition: transform .3s ease
}

.at-about-link:hover b {
   transform: translate(6px, -6px)
}

.at-about-manifesto {
   padding: clamp(130px, 14vw, 240px) var(--pad);
   background: #222229
}

.at-about-manifesto-inner {
   width: min(100%, var(--max));
   margin: auto
}

.at-about-manifesto-line {
   margin: .03em 0;
   font-size: clamp(57px, 9.2vw, 155px);
   font-weight: 900;
   line-height: .88;
   letter-spacing: -.062em
}

.at-about-manifesto-line span {
   color: transparent;
   -webkit-text-stroke: 1px rgba(255, 255, 255, .62)
}

.at-about-manifesto-accent {
   color: #d1a8ff
}

.at-about-manifesto-links {
   display: flex;
   justify-content: flex-end;
   gap: 12px;
   flex-wrap: wrap;
   margin-top: clamp(70px, 8vw, 125px);
   padding-top: 24px;
   border-top: 1px solid rgba(255, 255, 255, .12)
}

.at-about-manifesto-links a {
   padding: 13px 18px;
   border: 1px solid rgba(255, 255, 255, .16);
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .14em;
   color: #d9d6df;
   transition: background .25s ease, color .25s ease
}

.at-about-manifesto-links a:hover {
   background: #f2f0f4;
   color: #18181e
}

@media(max-width:900px) {
   .at-about-hero {
      min-height: auto;
      padding-top: 145px;
      padding-bottom: 100px
   }

   .at-about-title {
      gap: 15px;
      font-size: clamp(58px, 15vw, 110px)
   }

   .at-about-equation strong {
      font-size: clamp(62px, 16vw, 120px)
   }

   .at-about-hero-bottom {
      align-items: flex-start;
      flex-direction: column
   }

   .at-about-origin-grid,
   .at-about-first-grid {
      grid-template-columns: 1fr;
      gap: 60px
   }

   .at-about-origin-word {
      font-size: clamp(72px, 17vw, 135px)
   }

   .at-about-origin-copy {
      max-width: 700px
   }

   .at-about-create-grid {
      grid-template-columns: 1fr
   }

   .at-about-create-grid article {
      min-height: 360px
   }

   .at-about-first-image {
      width: min(100%, 680px)
   }

   .at-about-manifesto-line {
      font-size: clamp(52px, 13vw, 100px)
   }
}

@media(max-width:540px) {
   .at-about-hero {
      padding: 125px 20px 80px
   }

   .at-about-title {
      flex-wrap: wrap;
      white-space: normal;
      font-size: 19vw;
      line-height: .82
   }

   .at-about-title i {
      font-size: .42em
   }

   .at-about-equation {
      gap: 14px
   }

   .at-about-equation strong {
      font-size: 18vw
   }

   .at-about-origin,
   .at-about-first,
   .at-about-create,
   .at-about-manifesto {
      padding-left: 20px;
      padding-right: 20px
   }

   .at-about-section-head {
      align-items: flex-start;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 55px
   }

   .at-about-origin-word {
      font-size: 20vw
   }

   .at-about-create-grid article {
      min-height: 315px;
      padding: 28px 22px
   }

   .at-about-first-copy h2 {
      font-size: 21vw
   }

   .at-about-first-copy dl>div {
      grid-template-columns: 82px 1fr;
      gap: 15px
   }

   .at-about-manifesto-links {
      justify-content: flex-start
   }
}

/* ABOUT typography scale down */
.at-about-title {
   font-size: clamp(70px, 10.5vw, 180px);
}

.at-about-equation strong {
   font-size: clamp(68px, 9.5vw, 170px);
}

.at-about-origin-word {
   font-size: clamp(64px, 8vw, 135px);
}

.at-about-create-grid h2 {
   font-size: clamp(44px, 4.3vw, 78px);
}

.at-about-first-copy h2 {
   font-size: clamp(68px, 8vw, 140px);
}

.at-about-manifesto-line {
   font-size: clamp(52px, 7.5vw, 130px);
}