/* Lead area: one master-grid row between the FV and concept section. */
.lead-area {
   position: relative;
   height: var(--cell);
   overflow: hidden;
}

.lead-heading {
   position: absolute;
   left: calc(180 * var(--u));
   top: 50%;
   transform: translateY(-50%);
}

.lead-kicker {
   margin: 0 0 calc(10 * var(--u)) calc(54 * var(--u));
   font-family: "Zen Kaku Gothic New", "Yu Gothic", sans-serif;
   font-size: calc(16 * var(--u));
   font-weight: 500;
   line-height: 1;
   letter-spacing: .08em;
}

.lead-title {
   display: flex;
   align-items: flex-start;
   gap: calc(20 * var(--u));
   font-size: calc(64 * var(--u));
   font-weight: 500;
   line-height: 1.04;
   letter-spacing: .1em;
   white-space: nowrap;
}

.lead-title .cross {
   width: calc(34 * var(--u));
   height: calc(34 * var(--u));
   margin-top: .18em;
}

.lead-copy {
   position: absolute;
   left: calc(1000 * var(--u));
   right: calc(60 * var(--u));
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   gap: 0;
   font-family: "Zen Kaku Gothic New", "Yu Gothic", sans-serif;
   font-size: calc(14 * var(--u));
   font-weight: 500;
   line-height: 1.75;
   letter-spacing: .055em;
}

.lead-copy p {
   margin: 0;
}

.lead-copy p.lead-copy-gap {
   margin-top: 1.25em;
}

/* Figma 616:71 concept section. Reuse the page's grid dimensions. */
.about-teaser {
   min-height: calc(2300 * var(--u));
   height: auto;
   padding: calc(249 * var(--u)) var(--gutter) calc(270 * var(--u));
   border-block: 1px solid var(--rule);
   isolation: isolate;
   overflow: hidden;
}

.about-teaser::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: url('../images/about-texture.png') center / cover no-repeat;
   opacity: .5;
   pointer-events: none;
}

.about-teaser > .cross {
   position: absolute;
   width: calc(51 * var(--u));
   height: calc(51 * var(--u));
}

.about-cross-start,
.about-cross-top-right { top: calc(40 * var(--u)); }
.about-cross-start,
.about-cross-bottom-left { left: var(--gutter); }
.about-cross-top-right,
.about-cross-end { right: var(--gutter); }
.about-cross-bottom-left,
.about-cross-end { bottom: calc(40 * var(--u)); }

.about-teaser h2 {
   font-size: calc(115 * var(--u));
   font-weight: 700;
   line-height: 1.1;
   letter-spacing: .1em;
   text-box-trim: trim-both;
   text-box-edge: cap alphabetic;
}

/* Keep tall glyphs clear of the reveal mask without moving the typography. */
.about-teaser h2.text-reveal > .text-reveal__mask,
.about-subtitle p.text-reveal > .text-reveal__mask {
   padding-block: .16em;
   margin-block: -.16em;
}

.about-subtitle {
   gap: calc(40 * var(--u));
   margin-top: calc(40 * var(--u));
}

.about-subtitle > span {
   width: calc(347 * var(--u));
   flex-shrink: 1;
}

.about-subtitle p {
   font-family: "Zen Kaku Gothic New", "Yu Gothic", sans-serif;
   font-size: calc(32 * var(--u));
   line-height: 1.1;
   letter-spacing: .1em;
   white-space: nowrap;
   text-box-trim: trim-both;
   text-box-edge: cap alphabetic;
}

.about-copy {
   max-width: calc(1432 * var(--u));
   margin: calc(119 * var(--u)) auto 0;
   gap: calc(48 * var(--u));
   font-family: "Zen Kaku Gothic New", "Yu Gothic", sans-serif;
   font-size: calc(21 * var(--u));
   line-height: 2;
   letter-spacing: .05em;
}

.about-brand-row {
   display: block;
   margin: calc(217 * var(--u)) 0 0;
   text-align: center;
}

.about-brand-heading {
   font-size: calc(48 * var(--u));
   font-weight: 500;
   line-height: 1.1;
   letter-spacing: .1em;
   margin-bottom: calc(62 * var(--u));
   text-box-trim: trim-both;
   text-box-edge: cap alphabetic;
}

.about-brand-tiles {
   display: grid;
   grid-template-columns: minmax(0, 380fr) 27fr minmax(0, 380fr) 27fr minmax(0, 380fr);
   align-items: center;
   gap: calc(26 * var(--u));
   width: calc(1298 * var(--u));
   max-width: 100%;
   margin: auto;
}

.brand-tile {
   width: 100%;
   padding: 0;
   border-radius: 0;
}

.brand-tile::after { content: none; }

.brand-tile img { max-width: none; max-height: none; }
.brand-tile .brand-tile-logo { object-fit: contain; }
.brand-tile--tools .brand-tile-logo { width: 52.6316%; height: 17.6316%; }
.brand-tile--hirock .brand-tile-logo { width: 56.8421%; height: 22.1053%; }
.brand-tile--air .brand-tile-logo { width: 45.5263%; height: 24.4737%; }

.brand-x {
   width: 100%;
   height: auto;
   aspect-ratio: 1;
   object-fit: contain;
}

.about-logo-row {
   margin-top: 0;
   min-height: calc(2 * var(--cell));
   text-align: left;
   border-top: 0 !important;
}

.about-logo-row::before {
   content: "";
   position: absolute;
   z-index: 2;
   top: -1px;
   left: calc(-1 * var(--gutter));
   right: calc(-1 * var(--gutter));
   height: 1px;
   background: var(--ink);
   pointer-events: none;
}

.about-logo-row > .cell { padding: var(--pad); }

.about-logo-card {
   position: relative;
   width: 100%;
   aspect-ratio: 1;
   display: grid;
   place-items: center;
}

.about-logo-character {
   display: block;
   width: 58%;
   height: auto;
   object-fit: contain;
}

.about-logo-copy h2 {
   display: flex;
   align-items: center;
   gap: calc(15 * var(--u));
   font-size: calc(40 * var(--u));
   line-height: 1.1;
   letter-spacing: .1em;
   margin-bottom: calc(38 * var(--u));
   white-space: nowrap;
   text-box-trim: trim-both;
   text-box-edge: cap alphabetic;
}

.about-logo-copy h2 .cross { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.about-logo-copy .small-copy {
   font-family: "Zen Kaku Gothic New", "Yu Gothic", sans-serif;
   font-size: calc(14 * var(--u));
   line-height: 1.5;
   letter-spacing: .1em;
}

.notice-area {
   position: relative;
   z-index: 1;
   min-height: var(--cell);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: calc(68 * var(--u)) var(--gutter) calc(72 * var(--u));
   text-align: center;
   font-family: "Zen Kaku Gothic New", "Yu Gothic", sans-serif;
}

.notice-lead {
   font-size: calc(24 * var(--u));
   font-weight: 500;
   line-height: 1.55;
   letter-spacing: .1em;
   text-wrap: balance;
}

.notice-sp-break { display: none; }

.notice-channels {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: calc(14 * var(--u));
   margin-top: calc(28 * var(--u));
}

.notice-channel {
   width: calc(60 * var(--u));
   height: calc(60 * var(--u));
   flex: none;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: #1a1a1a;
}

.notice-channel img {
   display: block;
   width: calc(38 * var(--u));
   height: calc(38 * var(--u));
   object-fit: contain;
}

.notice-note {
   margin-top: calc(20 * var(--u));
   font-size: calc(14 * var(--u));
   font-weight: 500;
   line-height: 1.55;
   letter-spacing: .1em;
}

@media (max-width: 1023px) {
   .lead-area {
      height: auto;
      min-height: 0;
      padding: 18vw 6vw;
   }
   .lead-heading,
   .lead-copy {
      position: static;
      transform: none;
   }
   .lead-kicker {
      margin: 0 0 2vw 6.5vw;
      font-size: 2.7vw;
   }
   .lead-title {
      gap: 2.5vw;
      font-size: 7vw;
   }
   .lead-title .cross {
      width: 4vw;
      height: 4vw;
   }
   .lead-copy {
      margin-top: 8vw;
      gap: 0;
      font-size: clamp(13px, 3.4vw, 18px);
      line-height: 1.9;
      letter-spacing: .035em;
   }
   .lead-copy p.lead-copy-gap { margin-top: 1.2em; }
   .about-teaser {
      min-height: 0;
      padding: 23vw 6vw 25vw;
   }
   .about-teaser > .cross { width: 5vw; height: 5vw; }
   .about-cross-start, .about-cross-top-right { top: 5vw; }
   .about-cross-bottom-left, .about-cross-end { bottom: 5vw; }
   .about-teaser h2 { font-size: 7.5vw; letter-spacing: .055em; }
   .about-subtitle { gap: 3vw; margin-top: 5vw; }
   .about-subtitle p { font-size: 3.6vw; }
   .about-subtitle > span { width: 14vw; }
   .about-copy {
      max-width: 100%;
      margin-top: 12vw;
      gap: 1.8em;
      font-size: clamp(14px, 3.6vw, 20px);
      line-height: 2;
      letter-spacing: .025em;
   }
   .about-copy p {
      word-break: auto-phrase;
      line-break: strict;
      overflow-wrap: normal;
      text-wrap: pretty;
   }
   .about-copy .keep-together { white-space: nowrap; }
   .about-copy br { display: none; }
   .about-brand-row { margin: 17vw 0 0; }
   .about-brand-heading { font-size: 4.4vw; letter-spacing: .07em; margin-bottom: 7vw; }
   .about-brand-tiles { width: 100%; gap: 1.4vw; }
   .about-logo-row { display: block; min-height: 0; margin-inline: 4vw; }
   .about-logo-row > .cell { padding: 4vw; }
   .about-logo-row > .about-logo-copy { padding: 7vw 4vw 14vw; }
   .about-logo-copy h2 { font-size: 4.3vw; gap: 2vw; margin-bottom: 6vw; }
   .about-logo-copy h2 .cross { width: 4vw; height: 4vw; }
   .about-logo-copy .small-copy { font-size: clamp(13px, 3.4vw, 18px); line-height: 1.8; letter-spacing: .05em; }
   .notice-area {
      min-height: 0;
      padding: 14vw 5vw 16vw;
   }
   .notice-lead {
      font-size: clamp(14px, 3.8vw, 20px);
      line-height: 1.65;
      letter-spacing: .06em;
   }
   .notice-lead span { white-space: nowrap; }
   .notice-sp-break { display: inline; }
   .notice-channels {
      gap: 3vw;
      margin-top: 6vw;
   }
   .notice-channel {
      width: 15vw;
      height: 15vw;
      max-width: 60px;
      max-height: 60px;
   }
   .notice-channel img {
      width: 9.5vw;
      height: 9.5vw;
      max-width: 38px;
      max-height: 38px;
   }
   .notice-note {
      max-width: 31em;
      margin-top: 5vw;
      font-size: clamp(11px, 3vw, 15px);
      line-height: 1.65;
      letter-spacing: .045em;
      word-break: auto-phrase;
      text-wrap: pretty;
   }
}

@media (max-width: 767px) {
   .lead-area {
      border-top: 0 !important;
   }
   .about-teaser {
      padding-inline: 4vw;
   }
   .about-teaser h2 {
      font-size: 8.4vw;
   }
   .about-brand-tiles {
      grid-template-columns: minmax(0, 1fr) 3.5vw minmax(0, 1fr) 3.5vw minmax(0, 1fr);
      width: 100%;
      gap: 1vw;
   }
   .brand-x {
      width: 100%;
      height: auto;
      justify-self: center;
   }
}

.about-teaser {
   border-top-color: var(--ink)
}