/* テックキャンプ ブランドサイト — 単一スタイルシート
 *
 * 読む順序 = カスケードの順序。下に行くほど強い。
 *
 *   1. Design tokens          :root
 *   2. Reset                  要素セレクタのみ
 *   3. Shared primitives      複数セクションで使う部品
 *   4. Sections               DOM の並び順（header → hero → … → footer）
 *   5. Counseling dialog
 *   6. Layered stat numerals  数字の影 → 白フチ → グラデ塗りの3層処理
 *   7. Scroll reveal          スクロール進入でふわっと表示する横断ユーティリティ
 *   8. Responsive overrides   狭いクエリほど後ろ。この順序は動かさないこと
 *
 * ルールは1箇所にだけ書く。「後ろに上書きレイヤーを足す」で直さない。
 * デザインの出典は Figma。値の根拠が Figma 由来のものは各所にコメントを付す。
 */

/* ===== Design tokens ===== */

:root {
  --text: #121212;
  --line: #dedede;
  --bg: #fff;
  --surface: #f4f5f7;
  --primary: #b0303a;
  --primary-deep: #7f1822;
  --primary-soft: rgba(176, 48, 58, 0.05);
  --business: #007972;
  --business-soft: rgba(0, 121, 114, 0.05);
  --support: #c88216;
  --support-soft: rgba(200, 130, 22, 0.05);
  --service-fde-accent: #4a3be6;
  --service-fde-soft: rgba(74, 59, 230, 0.05);
  --service-engineer-accent: var(--header-brand);
  --service-engineer-accent-soft: rgba(17, 55, 107, 0.05);
  --service-highschool-accent: #3288d8;
  --service-highschool-ink: #006cd0;
  --service-highschool-soft: rgba(50, 136, 216, 0.05);
  --cta: #ef2828;
  --shadow: 0 14px 36px rgba(18, 18, 18, 0.1);
  --radius: 8px;
  --max: 1120px;
  --header-height: 106px;
  --header-shell-padding-block: 15px;
  --header-shell-padding-inline: 20px;
  --header-bar-height: 76px;
  --header-bar-padding-inline: 40px;
  --header-bar-radius: 10px;
  --header-bar-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
  --header-logo-width: 233px;
  --header-logo-height: 70px;
  --header-inner-gap: 32px;
  --header-nav-size: 1.05rem;
  --header-nav-weight: 900;
  --header-nav-line-height: 1.4;
  --header-nav-item-gap: 0.6em;
  --header-nav-item-padding: 0.8em 0.2em;
  --header-brand: #11376b;
  --header-focus-width: 2px;
  --header-focus-offset: 4px;
  --header-menu-button-width: 50px;
  --header-menu-button-height: 60px;
  --header-menu-icon-size: 24px;
  --hero-height: 666px;
  /* Figma Section 2 / node 353:3238 (PC). */
  --hero-title-ai-size: 126.719px;
  --hero-title-large-size: 99.359px;
  --hero-title-small-size: 65.842px;
  --hero-lede-size: 41.864px;
  /* Figma node 353:3249 — desktop photo mask canvas coordinates. */
  --hero-photo-canvas-left: 705.414px;
  --hero-photo-canvas-top: -365.623px;
  --hero-photo-canvas-width: 1541.586px;
  --hero-photo-canvas-height: 1312.729px;
  --hero-business-value-shift: -5px;
  --hero-stat-value-note-top: -14px;
  --company-logo-height: 240px;
  --footer-logo-filter: invert(1);
  --hero-annotation-edge-gap: 24px;
  --motion-fast: 180ms;
  --motion-reveal: 620ms;
  --motion-reveal-stagger: 70ms;
  --reveal-shift: 20px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --font: Avenir, "Noto Sans JP", sans-serif;
  --display: Avenir, "Noto Sans JP", sans-serif;
  --text-gradient-label:
    linear-gradient(180deg, #525252 28.646%, #a4a4a4 71.701%),
    linear-gradient(90deg, #888 0%, #888 100%);
  --text-gradient-number:
    linear-gradient(0deg, #000 28.437%, #818181 76.215%),
    linear-gradient(90deg, #121212 0%, #121212 100%);
  --text-gradient-unit:
    linear-gradient(0deg, #000 28.437%, #818181 76.215%),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(182, 182, 182, 0.7) 100%
    ),
    linear-gradient(90deg, #121212 0%, #121212 100%);
  --results-heading-gradient:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(90deg, #006cff 0%, #006cff 100%);
  --results-number-gradient:
    linear-gradient(0deg, #000 28.437%, #818181 76.215%),
    linear-gradient(90deg, #006cff 0%, #006cff 100%);
  --results-heading-tablet-size: clamp(38px, 4.1vw, 49px);
  --section-rule-width: 118px;
  --section-rule-height: 4px;
  --section-rule-gap: 12px;
  --section-brush-width: 256px;
  --section-brush-height: 39px;
  --stat-gap-unit: 4px;
  --stat-gap-laurel: 8px;
  --stat-hero-label-height: 31.5px;
  --stat-hero-height: 130px;
  --stat-hero-laurel-width: 56.216px;
  --stat-hero-value-offset: 32px;
  --stat-hero-unit-size: 25.2px;
  --stat-hero-tracking: 0.48px;
  --stat-lead-width: 570px;
  --stat-lead-height: 167.84px;
  --stat-lead-laurel-width: 72.58px;
  /* Figma current results nodes 276:22848 and 276:22861–22881. */
  --stat-lead-frame-width: 598px;
  --stat-lead-frame-height: 181px;
  --stat-lead-art-width: 591.013px;
  --stat-lead-art-height: 178.345px;
  --stat-lead-art-left: 5.362px;
  --stat-lead-art-top: 2.664px;
  --stat-lead-value-left: 64.22px;
  --stat-lead-value-top: -17.84px;
  --stat-lead-value-width: 409px;
  --stat-lead-value-height: 219px;
  --stat-lead-value-scale: 0.94;
  --stat-lead-number-tracking: -8.0328px;
  --stat-lead-number-paint-bleed: 8.0328px;
  --stat-lead-unit-left: 479.156px;
  --stat-lead-unit-top: 72.027px;
  --stat-lead-unit-size: 52.196px;
  --stat-lead-note-left: 490px;
  --stat-lead-note-top: 64px;
  --stat-grid-frame-height: 96.856px;
  --stat-grid-art-height: 95.4355px;
  --stat-grid-value-size: 78.155px;
  --stat-grid-unit-size: 27.931px;
  --stat-grid-number-tracking: -4.2985px;
  --stat-grid-number-paint-bleed: 4.2985px;
  --stat-grid-unit-tracking: 0.532px;
  --stat-grid-card-height: 155px;
  --stat-grid-height: 96.856px;
  --stat-grid-laurel-width: 49.297px;
  --stat-grid-unit-width: 25px;
  --stat-grid-wide-unit-width: 57px;
  --company-lead-size: 44px;
  --company-lead-line-height: 73.5px;
  --company-lead-tracking: 2px;
  --company-lead-frame-height: 138px;
  --company-lead-text-top: 8px;
  --company-lead-rule-top: 94px;

  --service-image-focus-scale: 1.12;
  --service-image-focus-hover-scale: 1.145;
  --service-image-focus-short-position: center 58%;
  --service-image-focus-fde-position: center 68%;
  --service-image-focus-ai-position: center 55%;
  --service-image-focus-work-position: center 52%;
  --service-card-desktop-height: 400px;
  --service-card-desktop-padding-y: 56px;
  --service-card-description-size: 28px;
  --service-card-tax-note-size: 16px;
  --service-card-tax-note-weight: 700;
  --service-card-media-width: 40%;
  --service-card-body-width: 60%;
  --dialog-max-width: 720px;
  --dialog-padding: 32px;
  --dialog-option-padding: 16px;
  --dialog-option-heading-size: 18px;
  --dialog-button-padding-inline: 16px;
  --dialog-button-font-size: 16px;
  --dialog-option-gap: 16px;
}

/* ===== Reset ===== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  overflow-x: clip;
}

body {
  margin: 0;
  padding-top: var(--header-height);
  overflow-x: clip;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

/* ===== Shared primitives ===== */

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 1000;
  background: #fff;
  padding: 10px 18px;
  border: 2px solid var(--primary);

  &:focus {
    top: 12px;
  }
}

.section-inner {
  width: var(--max);
  max-width: calc(100% - 64px);
  margin-inline: auto;
}

.en {
  display: block;
  color: var(--primary);
  font: 700 12px/1.2 var(--display);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.annotation {
  font-size: 10px !important;
  line-height: 1.6 !important;
  color: #777;
  font-weight: 400 !important;
}

.section-heading {
  margin-bottom: 48px;

  &.section-heading--center {
    text-align: center;
  }

  h2 {
    font-size: clamp(32px, 5vw, 54px);
    line-height: 1.25;
    margin: 8px 0 20px;
    font-weight: 900;
    letter-spacing: -0.03em;
  }

  p {
    font-size: 14px;
    line-height: 1.9;

    br {
      @media (max-width: 700px) {
        display: none;
      }
    }
  }
}

.logo {
  display: flex;
  align-items: center;
  white-space: nowrap;

  img {
    display: block;
    width: 108px;
    height: auto;
  }

  &.logo--footer img {
    width: 200px;
    margin-left: -20px;
    object-fit: cover;
    filter: var(--footer-logo-filter);
    mix-blend-mode: screen;
  }
}

.mobile-break {
  display: none;
}

.mobile-copy {
  display: none;
}

.pc-none-br {
  display: block;
}

.sp-none-br {
  display: none;
}

.cta-band .desktop-copy,
.cta-band .mobile-copy {
  min-width: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  font: inherit;
}

/* ===== Sections, in document order ===== */

@media (max-width: 1400px) {
  :root {
    --header-nav-size: 0.875rem;
  }
}

@media (max-width: 1200px) {
  :root {
    --header-bar-padding-inline: 35px;
  }
}

@media (max-width: 900px) {
  :root {
    --header-height: 70px;
    --header-shell-padding-block: 5px;
    --header-shell-padding-inline: 5px;
    --header-bar-height: 60px;
    --header-bar-padding-inline: 15px;
    --header-bar-radius: 6px;
    --header-bar-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
    --header-logo-width: 140px;
    --header-logo-height: 42px;
  }
}

.site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 50;
  padding: var(--header-shell-padding-block) var(--header-shell-padding-inline);
  background: transparent;

  .header-inner {
    width: 100%;
    max-width: none;
    height: var(--header-bar-height);
    margin: 0;
    padding-inline: var(--header-bar-padding-inline);
    display: flex;
    align-items: center;
    gap: var(--header-inner-gap);
    border-radius: var(--header-bar-radius);
    background: var(--bg);
    box-shadow: var(--header-bar-shadow);
  }

  .logo img {
    width: var(--header-logo-width);
    height: var(--header-logo-height);
    object-fit: cover;
  }

  .global-nav {
    display: flex;
    align-items: center;
    gap: var(--header-nav-item-gap);
    margin-left: auto;
    font-size: var(--header-nav-size);
    font-weight: var(--header-nav-weight);
    line-height: var(--header-nav-line-height);

    a {
      padding: var(--header-nav-item-padding);
      transition: color var(--motion-fast) var(--ease-out);

      &:hover {
        color: var(--header-brand);
      }

      &:focus-visible {
        outline: var(--header-focus-width) solid var(--header-brand);
        outline-offset: var(--header-focus-offset);
      }
    }

    @media (max-width: 900px) {
      display: none;
    }
  }

  .menu-button,
  .mobile-menu {
    display: none;
  }

  @media (max-width: 900px) {
    .menu-button {
      display: grid;
      place-items: center;
      width: var(--header-menu-button-width);
      height: var(--header-menu-button-height);
      margin-left: auto;
      border: 0;
      color: var(--text);
      background: transparent;
      padding: 0;

      svg {
        display: block;
        width: var(--header-menu-icon-size);
        height: var(--header-menu-icon-size);
      }

      path {
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
      }
    }

    .mobile-menu {
      padding: 10px 3% 18px;
      gap: 14px;
      font-size: 13px;

      &:not([hidden]) {
        display: flex;
        flex-direction: column;
      }
    }
  }
}

@keyframes mobile-menu-in {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--sp-menu-animation-offset)));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero {
  min-height: var(--hero-height);
  height: var(--hero-height);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #c2f1fd;

  .hero-art {
    display: none;
  }

  .hero-grid {
    display: none;
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.42) 50%,
      rgba(255, 255, 255, 0.05)
    );
  }

  .hero-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding-top: 2px;
    text-align: center;
  }

  h1 {
    margin: 0 0 24px;
    font: 900 86px/1.2 var(--font);
    letter-spacing: -0.055em;
    -webkit-text-stroke: 6px #fff;
    paint-order: stroke fill;
    text-shadow: none;

    span {
      position: relative;
      color: var(--primary);

      &::after {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        bottom: 8px;
        height: 28px;
        background: #ffdca7;
      }
    }
  }

  .hero-lede {
    margin: 0;
    font-size: 32px;
    line-height: 1.5;
    font-weight: 800;
  }

  .hero-stats {
    display: flex;
    justify-content: center;
    gap: 64px;
    margin: 40px 0 0;

    > div {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    strong {
      position: relative;
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
      font-family: var(--display);
      font-size: 64px;
      font-weight: 900;
      line-height: 1.5;
      letter-spacing: 0;
      background: none;
      color: var(--text);
      -webkit-text-fill-color: var(--text);
      -webkit-text-stroke: 0;
      text-shadow: none;

      /* The unit glyph carries its own shadow/outline pair, sized down from
         the number's. See the .layered-stat-* block for the shared machinery. */
      small {
        --hero-unit-outline-width: 4px;
        --hero-unit-shadow-offset: 2px;
        position: relative;
        z-index: 0;
        display: inline-block;
        background: none;
        color: var(--text);
        -webkit-text-fill-color: var(--text);
        -webkit-text-stroke: 0;
        text-shadow: none;

        &::before,
        &::after {
          content: attr(data-unit);
          position: absolute;
          inset: 0;
          font: inherit;
          pointer-events: none;
        }

        &::before {
          z-index: 0;
          color: #fff;
          -webkit-text-fill-color: #fff;
          -webkit-text-stroke: 0;
          text-shadow: var(--hero-unit-shadow-offset)
            var(--hero-unit-shadow-offset) 0 rgba(0, 0, 0, 0.25);
        }

        &::after {
          z-index: 1;
          color: #fff;
          -webkit-text-fill-color: #fff;
          -webkit-text-stroke: var(--hero-unit-outline-width) #fff;
          paint-order: stroke fill;
          text-shadow: none;
        }
      }

      &::before,
      &::after {
        content: "";
        width: 56px;
        height: 130px;
        align-self: center;
        flex: 0 0 auto;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
      }

      &::before {
        margin-right: 0.18em;
        background-image: url("./images/image-ornament-left.png");
      }

      &::after {
        margin-left: 0.18em;
        background-image: url("./images/image-ornament-right.png");
      }
    }

    small {
      font-size: 0.42em;
    }

    span {
      order: -1;
      margin: 0 0 8px;
      font-size: 21px;
      font-weight: 800;
    }
  }

  sup {
    font-size: 10px;
  }

  /* ヒーロー右下。写真（デスク）の上に乗るので、白のごく薄いシャドウで可読性を確保。 */
  .annotation {
    position: absolute;
    right: var(--hero-annotation-edge-gap);
    bottom: 10px;
    width: calc(100% - var(--hero-annotation-edge-gap));
    margin: 0;
    text-align: right;
    text-shadow:
      0 0 3px rgba(255, 255, 255, 0.9),
      0 1px 2px rgba(255, 255, 255, 0.7);

    @media (max-width: 700px) {
      text-shadow: none;
      font-size: 8px !important;
    }
  }
}

@media (min-width: 701px) {
  .hero {
    min-height: calc(var(--hero-height) + var(--header-height));
    height: calc(var(--hero-height) + var(--header-height));
    margin-top: calc(-1 * var(--header-height));
    padding-top: var(--header-height);
  }
}

.service-gateway {
  min-height: 662px;
  padding: 80px 0 240px;
  background-color: #f5fbfb;
  background-image: url("./images/figma-gateway-background-current.png");
  background-position: center;
  background-size: 100% 199.4%;
  background-blend-mode: overlay;

  h2 {
    position: relative;
    text-align: center;
    margin: 0 0 40px;
    font-size: 40px;
    line-height: 1.5;
    font-weight: 900;
    text-shadow: none;

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      top: calc(100% + var(--section-rule-gap));
      width: var(--section-rule-width);
      height: var(--section-rule-height);
      border-radius: 99px;
      background: #171717;
      transform: translateX(-50%);
    }
  }

  .gateway-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;

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

  .gateway {
    --gateway-shadow-color: #640a11;
    position: relative;
    min-height: 242px;
    padding: 48px 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    border: 4px solid var(--primary);
    border-radius: 8px;
    background: #fff;
    box-shadow: 6px 6px 0 var(--gateway-shadow-color);
    transition:
      transform var(--motion-fast) var(--ease-out),
      box-shadow var(--motion-fast) var(--ease-out);

    &:hover,
    &:focus-visible {
      transform: translateY(-4px);
      box-shadow: 6px 10px 0 var(--gateway-shadow-color);
    }

    &::after {
      content: "";
      width: 40px;
      height: 40px;
      background: url("./images/figma-gateway-arrow-current.svg") center /
        contain no-repeat;
      margin-top: 8px;
      order: 3;
    }

    &.gateway--business {
      --gateway-shadow-color: #00514c;
      border-color: var(--business);

      b {
        color: var(--business);
      }
    }

    &.gateway--support {
      --gateway-shadow-color: #a76a0c;
      border-color: var(--support);

      b {
        color: var(--support);
      }
    }

    b {
      margin: 0;
      color: var(--primary);
      font-size: 32px;
      line-height: 1.5;
    }

    strong {
      order: 2;
      font-size: 18px;
      line-height: 1.5;
    }
  }
}

/* Each catalog is pulled 136px up over the section above it and given a higher
   z-index, so its rounded top edge overlaps the previous one. Change the
   negative margin and the gateway's bottom padding together. */
.catalog {
  --service-accent: var(--primary);
  --service-accent-ink: var(--primary);
  --service-accent-soft: var(--primary-soft);
  --service-on-accent: var(--bg);

  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  margin-top: -136px;
  padding: 96px 0 0;
  border-radius: 96px 96px 0 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  background: #f7eaeb;

  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -160px;
    left: calc(50% - 1125px);
    width: 2861px;
    height: 2436px;
    background: url("./images/figma-personal-background.svg") left top / 100%
      100% no-repeat;
    pointer-events: none;
  }

  > .section-inner {
    position: relative;
    z-index: 1;
  }

  &.catalog--business {
    --service-accent: var(--business);
    --service-accent-ink: var(--business);
    --service-accent-soft: var(--business-soft);

    z-index: 2;
    margin-top: -136px;
    background: #e6f2f1;

    &::before {
      top: 0;
      left: calc(50% - 1120px);
      width: 2868px;
      height: 2255px;
      background-image: url("./images/figma-business-background.svg");
    }
  }

  &.catalog--support {
    --service-accent: var(--support);
    --service-accent-ink: var(--support);
    --service-accent-soft: var(--support-soft);

    z-index: 3;
    margin-top: -136px;
    background: #faf2e7;

    &::before {
      top: 0;
      left: calc(50% - 1125px);
      width: 2328px;
      height: 1412px;
      background-image: url("./images/figma-support-background.svg");
    }
  }

  .section-heading {
    height: 306px;
    margin: 0 0 64px;
    text-align: center;

    .en {
      font: 800 24px/1.5 var(--display);
      letter-spacing: 4px;
      background-image: var(--text-gradient-label);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }

    h2 {
      position: relative;
      width: max-content;
      /* height: 151px; */
      margin: 8px auto 8px;
      color: var(--primary);
      font-size: 64px;
      line-height: 1.5;
      letter-spacing: 6.4px;
      padding-bottom: 50px;

      &::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 112px;
        width: var(--section-brush-width);
        height: var(--section-brush-height);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        transform: translateX(-50%);
      }
    }

    p {
      margin: 0;
      font-size: 24px;
      line-height: 1.8;
      font-weight: 700;
    }
  }

  &.catalog--business .section-heading {
    height: 290px;
  }

  &.catalog--business .section-heading h2 {
    color: var(--business);

    &::after {
      background-image: url("./images/figma-section-underline-business.svg");
    }
  }

  &.catalog--support .section-heading h2 {
    color: var(--support);

    &::after {
      width: 254.318px;
      height: 38.998px;
      background-image: url("./images/figma-section-underline-support.svg");
    }
  }

  &.catalog--personal .section-heading h2::after {
    background-image: url("./images/figma-section-underline-current.svg");
  }

  .service-list {
    display: grid;
    gap: 32px;
  }

  .service-card {
    display: grid;
    grid-template-columns: var(--service-card-media-width) var(
        --service-card-body-width
      );
    min-height: 300px;
    height: 300px;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(18, 18, 18, 0.06);
    transition:
      transform var(--motion-fast) var(--ease-out),
      box-shadow var(--motion-fast) var(--ease-out);

    &.service-card--fde {
      --service-accent: var(--service-fde-accent);
      --service-accent-ink: var(--service-fde-accent);
      --service-accent-soft: var(--service-fde-soft);
    }

    &.service-card--engineer {
      --service-accent: var(--service-engineer-accent);
      --service-accent-ink: var(--service-engineer-accent);
      --service-accent-soft: var(--service-engineer-accent-soft);
    }

    &.service-card--highschool {
      --service-accent: var(--service-highschool-accent);
      --service-accent-ink: var(--service-highschool-ink);
      --service-accent-soft: var(--service-highschool-soft);
      --service-on-accent: var(--bg);
    }

    &.service-card--reverse {
      grid-template-columns: var(--service-card-body-width) var(
          --service-card-media-width
        );

      .card-body {
        order: 1;
      }

      .card-visual {
        order: 2;
      }
    }

    &:focus-visible {
      outline: 3px solid currentColor;
      outline-offset: 4px;
    }

    &:active {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(18, 18, 18, 0.12);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow);
      }

      &:hover .card-visual img {
        transform: scale(1.025);
      }

      &:hover .card-body em img {
        transform: translateX(4px);
      }
    }
  }

  .card-visual {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    background: #e9eef2;

    img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 360ms var(--ease-out);
    }
  }

  .card-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 32px 24px 0 36px;

    h3 {
      margin: 0 0 4px;
      font-size: 28px;
      line-height: 1.5;
      white-space: nowrap;
    }

    p {
      margin: 16px 0;
      font-size: 16px;
      line-height: 1.9;
      font-weight: 900;
      letter-spacing: 1px;
    }

    .service-price-tax {
      font-size: var(--service-card-tax-note-size);
      font-weight: var(--service-card-tax-note-weight);
      white-space: nowrap;
    }

    em {
      position: absolute;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: auto;
      align-self: flex-end;
      padding: 8px 24px;
      border-radius: 8px 0 0;
      background: var(--service-accent);
      color: var(--service-on-accent);
      font-style: normal;
      font-size: 16px;
      font-weight: 500;

      img {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        transition: transform var(--motion-fast) var(--ease-out);
      }
    }
  }

  .product-logo {
    display: block;
    width: auto;
    height: 56px;
    object-fit: contain;
    object-position: left center;
    margin: 0 0 -4px -16px;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    span {
      border: 1px solid var(--service-accent);
      border-radius: 4px;
      padding: 2px 8px;
      font-size: 14px;
      line-height: 1.5;
      font-weight: 700;
      color: var(--service-accent-ink);
      background: var(--service-accent-soft);
    }
  }

  .cta-band {
    width: 100vw;
    height: 482px;
    margin: 80px 0 0 calc(50% - 50vw);
    padding: 64px 56px 208px;
    gap: 8px;
    justify-content: flex-start;
    border-radius: 0;
    background-position: center;
    background-size: cover;

    small {
      font-size: 20px;
      font-weight: 700;
    }

    b {
      font-size: 36px;
      line-height: 1.5;
    }

    .cta-button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      /* min-width: 0; */
      margin-top: 32px;
      /* padding: 16px 64px; */
      font-size: 24px;
      font-weight: 900;

      img {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
      }
    }
  }

  &.catalog--personal .cta-band {
    background-image:
      linear-gradient(rgba(176, 48, 58, 0.8), rgba(176, 48, 58, 0.8)),
      url("./images/figma-personal-cta-background.jpg");
  }

  &.catalog--business .cta-band {
    background-color: var(--business);
    background-image:
      linear-gradient(rgba(0, 121, 114, 0.8), rgba(0, 121, 114, 0.8)),
      url("./images/figma-business-cta-background.jpg");
  }

  &.catalog--support .cta-band {
    height: 338px;
    padding-bottom: 64px;
    background-color: var(--support);
    background-image:
      linear-gradient(rgba(200, 130, 22, 0.8), rgba(200, 130, 22, 0.8)),
      url("./images/figma-support-cta-background.jpg");
  }
}

.catalog .service-card--focus-short .card-visual img {
  object-position: var(--service-image-focus-short-position);
  transform: scale(var(--service-image-focus-scale));
}

.catalog .service-card--focus-fde .card-visual img {
  object-position: var(--service-image-focus-fde-position);
  transform: scale(var(--service-image-focus-scale));
}

.catalog .service-card--focus-ai-solution .card-visual img {
  object-position: var(--service-image-focus-ai-position);
  transform: scale(var(--service-image-focus-scale));
}

.catalog .service-card--focus-work .card-visual img {
  object-position: var(--service-image-focus-work-position);
  transform: scale(var(--service-image-focus-scale));
}

.catalog .service-card--focus-short:hover .card-visual img,
.catalog .service-card--focus-fde:hover .card-visual img,
.catalog .service-card--focus-ai-solution:hover .card-visual img,
.catalog .service-card--focus-work:hover .card-visual img {
  transform: scale(var(--service-image-focus-hover-scale));
}

.cta-band {
  margin-top: 42px;
  padding: 30px 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);

  small {
    font-size: 12px;
  }

  b {
    font-size: clamp(18px, 3vw, 28px);
  }

  > .cta-button {
    margin-top: 14px;
    min-width: min(420px, 100%);
    background: var(--cta);
    border-radius: 2000px;
    padding: 13px 24px;
    font-weight: 900;
    box-shadow: 0 4px 0 #a90000;

    @media (max-width: 700px) {
      font-size: 13px;
    }
  }

  .cta-button {
    transition:
      transform var(--motion-fast) var(--ease-out),
      box-shadow var(--motion-fast) var(--ease-out);

    img {
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      transition: transform var(--motion-fast) var(--ease-out);
    }
  }

  &:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
  }

  &:active .cta-button,
  .cta-trigger:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #a90000;
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover .cta-button {
      transform: translateY(-4px);
      box-shadow: 0 8px 0 #a90000;
    }

    &:hover .cta-button img {
      transform: translateX(4px);
    }
  }
}

.catalog .cta-trigger {
  width: min(420px, 100%);
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.catalog--personal .cta-trigger {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 4px 0 var(--primary-deep);
}

.catalog--personal .cta-trigger:active {
  box-shadow: 0 2px 0 var(--primary-deep);
}

.catalog--personal .cta-trigger:hover {
  box-shadow: 0 8px 0 var(--primary-deep);
}

.catalog .cta-trigger:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.mentor {
  height: 849px;
  padding: 8px 0 64px;
  background: #fff;

  .mentor-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: none;
  }

  /* The visual runs full-bleed and the copy card overlaps its bottom edge. */
  .mentor-visual {
    order: -1;
    overflow: hidden;
    width: 100%;
    height: 488px;
    border-radius: 0;
    box-shadow: none;

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 12%;
    }
  }

  .mentor-grid > div:first-child {
    z-index: 1;
    width: var(--max);
    max-width: calc(100% - 64px);
    min-height: 353px;
    margin: -64px auto 0;
    padding: 48px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 4px 20px rgba(18, 18, 18, 0.12);
    text-align: center;
  }

  .en {
    font: 800 24px/1.5 var(--display);
    letter-spacing: 4px;
    background-image: var(--text-gradient-label);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  h2 {
    margin: 0 0 32px;
    font-size: 40px;
    line-height: 1.5;
    /*
    br {
      display: none;
    } */

    span {
      color: var(--primary);
    }
  }

  p {
    margin: 0;
    font-size: 24px;
    line-height: 1.8;

    strong {
      color: var(--primary);
      background: none;
    }
  }
}

/* Two white cards float over a tinted, blend-mode background: .results-card
   holds the stats, .company-card holds the logo marquee. Everything inside them
   is laid out by the card rules — the section itself only paints the backdrop. */
.results {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 1475px;
  padding: 96px 0;
  background: #c2f1fd;
  color: #121212;

  .results-art {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;

    .results-art__background,
    .results-art__decoration {
      position: absolute;
      display: block;
      max-width: none;
    }

    .results-art__background {
      object-fit: cover;

      &.results-art__background--one {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }

    .results-art__decoration {
      top: -230px;
      left: calc(50% - 1584px);
      width: 2848px;
      height: 1727px;
    }
  }

  /* Keep the old single-layer hook inert; the current Figma design uses the
     two source textures and the separate decorative vector above. */
  &::before {
    content: "";
    display: none;
  }

  .section-inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  sup {
    font-size: 10px;
  }

  .annotation {
    color: #888;
  }

  .results-card {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 56px;
    background: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    > .section-heading,
    > .results-lead,
    > .results-grid,
    > .annotation {
      width: 100%;
      margin: 0;
      padding: 0;
      background: transparent;
    }

    > .section-heading {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    > .results-lead {
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }

    > .results-grid {
      gap: 24px;

      > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: var(--stat-grid-card-height);
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
      }
    }

    > .annotation {
      max-width: none;
      text-align: right;
    }
  }

  .section-heading {
    .en {
      font: 800 24px/1.5 var(--display);
      letter-spacing: 4px;
      background-image: var(--text-gradient-label);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }

    h2 {
      position: relative;
      margin: 0;
      color: #000;
      font-size: 49px;
      line-height: 1.5;
      letter-spacing: 4.9px;

      &::after {
        content: "";
        position: absolute;
        left: 50%;
        top: calc(100% + var(--section-rule-gap));
        width: var(--section-rule-width);
        height: var(--section-rule-height);
        border-radius: 99px;
        background: #171717;
        transform: translateX(-50%);
      }
    }
  }

  .results-lead {
    text-align: center;

    strong {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      font-family: var(--display);
      font-size: 105.376px;
      font-weight: 900;
      line-height: 1.5;
      letter-spacing: 0.7903px;
      paint-order: stroke fill;

      small {
        font-size: 36.095px;
        background-image: var(--text-gradient-number);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 6.586px #fff;
      }

      sup {
        color: #121212;
        -webkit-text-fill-color: #121212;
        -webkit-text-stroke: 0;
        position: absolute;
        right: 0px;
        top: -10px;
      }

      &::before,
      &::after {
        display: none;
      }
    }

    b {
      display: block;
      margin-top: 0;
      padding-top: 32px;
      background-image: var(--results-heading-gradient);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      font-size: 40px;
      line-height: 1.5;
    }

    p {
      color: #121212;
      font-size: 20px;
      line-height: 1.5;
      font-weight: 800;
    }
  }

  .results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 0;

    > div {
      text-align: center;
    }

    span {
      display: block;
      background-image: var(--results-heading-gradient);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      font-size: 22px;
      line-height: 1.5;
      font-weight: 900;
    }

    strong {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-family: var(--display);
      font-size: 70px;
      font-weight: 900;
      line-height: 1.5;
      letter-spacing: 0.48px;
      paint-order: stroke fill;

      small {
        font-size: 24.5px;
        background-image: var(--text-gradient-number);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 4px #fff;
      }

      sup {
        color: #888;
        -webkit-text-fill-color: #888;
        -webkit-text-stroke: 0;
      }

      &::before,
      &::after {
        display: none;
      }
    }
  }

  .company-card {
    padding: 40px 0;
    background: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    .company-lead {
      margin: 0;
      height: var(--company-lead-frame-height);
      padding: var(--company-lead-text-top) 0 0;
      background: transparent;
    }

    .logo-cloud {
      margin: 0;
      padding: 0;
      background: transparent;
    }

    .annotation {
      margin: 8px 0 0;
      padding: 0 24px;
      background: transparent;
    }
  }

  .company-lead {
    position: relative;
    text-align: center;
    color: #000;
    font-family: var(--display);
    font-size: var(--company-lead-size);
    font-weight: 900;
    line-height: var(--company-lead-line-height);
    letter-spacing: var(--company-lead-tracking);

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      top: var(--company-lead-rule-top);
      width: var(--section-rule-width);
      height: var(--section-rule-height);
      border-radius: 99px;
      background: #171717;
      transform: translateX(-50%);
    }
  }

  .logo-cloud {
    overflow: hidden;

    .logo-track {
      display: flex;
      width: max-content;
      animation: company-logo-marquee 24s linear infinite;
      will-change: transform;

      > picture {
        display: block;
        width: max-content;
        flex: 0 0 auto;
        margin-right: -102px;
      }
    }

    img {
      display: block;
      width: auto;
      height: var(--company-logo-height);
      max-width: none;
      flex: 0 0 auto;
      object-fit: contain;
    }
  }

  .logo-cloud + .annotation {
    max-width: none;
    text-align: right;
  }
}

@keyframes company-logo-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.final-contact {
  height: 550px;
  padding: 95px 0;
  background: linear-gradient(#fff, #f1f1f1);

  > div > p {
    position: relative;
    text-align: center;
    margin: 0 0 40px;
    font-size: 40px;
    line-height: 1.5;
    font-weight: 900;

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      top: calc(100% + 16px);
      width: var(--section-rule-width);
      height: var(--section-rule-height);
      border-radius: 99px;
      background: #171717;
      transform: translateX(-50%);
    }
  }

  .final-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;

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

  .final-card {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    height: 260px;
    padding: 48px 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 4px solid var(--primary);
    border-radius: var(--radius);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition:
      transform var(--motion-fast) var(--ease-out),
      box-shadow var(--motion-fast) var(--ease-out);

    &:focus-visible {
      outline: 3px solid currentColor;
      outline-offset: 4px;
    }

    &:active {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(18, 18, 18, 0.12);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow);
      }

      &:hover em img {
        transform: translateX(4px);
      }
    }

    b {
      margin: 0;
      color: var(--primary);
      font-size: 32px;
    }

    strong {
      font-size: 18px;
      line-height: 1.5;
    }

    em {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 292px;
      margin-top: auto;
      padding: 12px 16px;
      border-radius: 999px;
      background: var(--primary);
      color: #fff;
      font-style: normal;
      font-size: 16px;
      font-weight: 900;

      img {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        transition: transform var(--motion-fast) var(--ease-out);
      }
    }

    &.final-card--business {
      border-color: var(--business);

      b {
        color: var(--business);
      }

      em {
        background: var(--business);
        color: #fff;
      }
    }

    &.final-card--support {
      border-color: var(--support);

      b {
        color: var(--support);
      }

      em {
        background: var(--support);
        color: #fff;
      }
    }
  }
}

.site-footer {
  height: 342px;
  padding: 70px 0 25px;
  background: #0d0d0d;
  color: #fff;

  .footer-grid {
    display: grid;
    grid-template-columns: 307px repeat(3, 236px);
    gap: 35px;

    p {
      margin-top: 20px;
      font-size: 10px;
      line-height: 1.7;
      color: #aaa;
    }

    > div:not(:first-child) {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    b {
      font-size: 13px;
      margin-bottom: 8px;
    }

    a {
      font-size: 10px;
      line-height: 23px;
      color: #aaa;
      transition: color var(--motion-fast) var(--ease-out);

      &:hover {
        color: #fff;
      }

      &:focus-visible {
        outline: var(--header-focus-width) solid currentColor;
        outline-offset: var(--header-focus-offset);
      }
    }
  }

  .footer-bottom {
    width: var(--max);
    max-width: calc(100% - 64px);
    margin: 50px auto 0;
    padding: 21px 0 0;
    border-top: 1px solid #333;
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #777;

    @media (max-width: 700px) {
      flex-direction: column;
      gap: 5px;
    }
  }
}

/* ===== Counseling dialog ===== */

.counseling-dialog {
  width: min(var(--dialog-max-width), calc(100% - 64px));
  max-height: calc(100vh - 64px);
  padding: var(--dialog-padding);
  border: 0;
  border-radius: var(--radius);
  color: var(--text);
  background: var(--bg);
  box-shadow: var(--shadow);
}

.counseling-dialog::backdrop {
  background: rgba(18, 18, 18, 0.6);
}

.counseling-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--dialog-option-gap);
  margin-bottom: var(--dialog-option-gap);
}

.counseling-dialog__eyebrow {
  margin: 0;
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
}

.counseling-dialog h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.5;
}

.counseling-dialog__close {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--text);
  background: var(--surface);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.counseling-dialog__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dialog-option-gap);
}

.counseling-option {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--dialog-option-padding);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.counseling-option h3 {
  margin: 0 0 var(--dialog-option-gap);
  font-size: var(--dialog-option-heading-size);
  line-height: 1.5;
  white-space: nowrap;
}

.counseling-option p {
  flex: 1;
  margin: 0 0 var(--dialog-padding);
  font-size: 14px;
  line-height: 1.8;
}

.counseling-option a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dialog-option-gap);
  min-width: 0;
  padding: var(--dialog-option-gap) var(--dialog-button-padding-inline);
  border-radius: 2000px;
  color: #fff;
  background: var(--primary);
  font-size: var(--dialog-button-font-size);
  font-weight: 900;
  white-space: nowrap;
}

.counseling-option a > span[aria-hidden="true"] {
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border-radius: 50%;
  color: var(--primary);
  background: #fff;
  font-size: 0;
  line-height: 1;
}

.counseling-option a > span[aria-hidden="true"]::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: -3px;
  margin-top: 5px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* ===== Layered stat numerals (shadow -> white outline -> gradient fill) ===== */

/* Shared three-layer treatment: shadow -> white outline -> foreground text */
.hero .hero-stats strong,
.results .results-lead strong,
.results .results-grid strong {
  background: none;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.layered-stat-value,
.layered-stat-unit {
  position: relative;
  z-index: 0;
  display: inline-block;
  order: initial;
  margin: 0;
  background: none;
  color: transparent;
  font: inherit;
  letter-spacing: inherit;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.layered-stat-value {
  --layered-stat-outline-width: 8px;
  --layered-stat-shadow-offset: 4px;
}

.layered-stat-unit {
  --layered-unit-outline-width: 4px;
  --layered-unit-shadow-offset: 2px;
}

.layered-stat-unit-group {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  margin: 0;
  line-height: 1.5;
  white-space: nowrap;
}

.layered-stat-unit-group > .layered-stat-unit {
  margin: 0;
}

.layered-stat-unit-group > sup {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
  transform: translateX(-50%);
}

.hero .hero-stats strong > .hero-stat__value-note {
  position: absolute;
  z-index: 2;
  top: 66px;
  left: 58%;
  margin: 0;
  color: #777;
  /* -webkit-text-fill-color: #777; */
  font-size: 10px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0;
  /* white-space: nowrap; */
  transform: translateX(-50%);
}

.results .results-lead strong {
  --layered-stat-outline-width: 10px;
  --layered-stat-shadow-offset: 6px;
  --layered-unit-outline-width: 6px;
  --layered-unit-shadow-offset: 3px;
}

.results .results-grid strong {
  --layered-stat-outline-width: 8px;
  --layered-stat-shadow-offset: 3px;
  --layered-unit-outline-width: 4px;
  --layered-unit-shadow-offset: 2px;
}

.layered-stat-value::before,
.layered-stat-value::after,
.layered-stat-unit::before,
.layered-stat-unit::after {
  position: absolute;
  inset: 0;
  font: inherit;
  letter-spacing: inherit;
  pointer-events: none;
}

.layered-stat-value::before,
.layered-stat-value::after {
  content: attr(data-value);
}

.layered-stat-unit::before,
.layered-stat-unit::after {
  content: attr(data-unit);
}

.layered-stat-value::before,
.layered-stat-unit::before {
  z-index: 0;
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 0;
}

.layered-stat-value::before {
  text-shadow: var(--layered-stat-shadow-offset)
    var(--layered-stat-shadow-offset) 0 rgba(0, 0, 0, 0.25);
}

.layered-stat-unit::before {
  text-shadow: var(--layered-unit-shadow-offset)
    var(--layered-unit-shadow-offset) 0 rgba(0, 0, 0, 0.25);
}

.layered-stat-value::after,
.layered-stat-unit::after {
  z-index: 1;
  color: #fff;
  -webkit-text-fill-color: #fff;
  paint-order: stroke fill;
  text-shadow: none;
}

.layered-stat-value::after {
  -webkit-text-stroke: var(--layered-stat-outline-width) #fff;
}

.layered-stat-unit::after {
  -webkit-text-stroke: var(--layered-unit-outline-width) #fff;
}

/* Current Figma stat groups use blue numerals and gradient units without the
   legacy white outline layers. */
.hero .layered-stat-value::before,
.hero .layered-stat-value::after,
.hero .layered-stat-unit::before,
.hero .layered-stat-unit::after,
.results .layered-stat-value::before,
.results .layered-stat-value::after,
.results .layered-stat-unit::before,
.results .layered-stat-unit::after {
  display: none;
}

.layered-stat-text,
.layered-stat-unit-text {
  position: relative;
  z-index: 2;
  display: block;
  order: initial;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.layered-stat-text {
  background-image: var(--text-gradient-number);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.layered-stat-unit-text {
  background-image: var(--text-gradient-unit);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.results .layered-stat-unit,
.results .layered-stat-unit-text {
  font-weight: 500;
}

.results .layered-stat-text {
  background-image: var(--results-number-gradient);
  background-blend-mode: soft-light, normal;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero .layered-stat-text {
  background-image: linear-gradient(90deg, #006cff 0%, #006cff 100%);
  color: #006cff;
  -webkit-text-fill-color: #006cff;
}

/* Current Figma laurels are vector pairs painted behind each stat group. */
.results .results-lead strong {
  background-image: url("./images/figma-results-laurel-lead-current-latest.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.results .results-grid > div:nth-child(1) strong {
  background-image: url("./images/figma-results-laurel-1-current-latest.svg");
}

.results .results-grid > div:nth-child(2) strong {
  background-image: url("./images/figma-results-laurel-2-current-latest.svg");
}

.results .results-grid > div:nth-child(3) strong {
  background-image: url("./images/figma-results-laurel-3-current-latest.svg");
}

.results .results-grid strong {
  background-repeat: no-repeat;
}

/* ===== Scroll reveal ===== */

/* script.js が対象要素に .reveal を付与し、ビューポート進入時に .is-visible を足す。
   head のインラインスニペットが html.reveal-enabled を（prefers-reduced-motion が
   無効かつ IntersectionObserver が使える時のみ）付けた場合だけ初期状態を隠す。
   JS 無効時・reduced-motion 時は常に可視のまま。
   スタガーは JS が --reveal-index（グリッド内の連番）をセットして表現する。 */

.reveal-enabled .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition:
    opacity var(--motion-reveal) var(--ease-out),
    transform var(--motion-reveal) var(--ease-out);
  transition-delay: calc(var(--motion-reveal-stagger) * var(--reveal-index, 0));
}

.reveal-enabled .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ===== Responsive overrides (narrower query wins, so order is fixed) ===== */

@media (min-width: 701px) and (max-width: 1199px) {
  .section-inner {
    width: calc(100% - 64px);
    max-width: none;
  }

  .hero .annotation {
    right: 0;
    bottom: 16px;
    width: 60%;
  }

  .service-gateway {
    .gateway-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gateway {
      min-width: 0;
      padding-inline: 16px;
    }
  }

  .catalog {
    .section-heading,
    &.catalog--business .section-heading {
      height: auto;
    }

    .service-card {
      width: 100%;
      height: auto;
      min-height: 260px;
      grid-template-columns: 42% 58%;

      &.service-card--reverse {
        grid-template-columns: 58% 42%;
      }
    }

    .card-body h3 {
      white-space: normal;
    }
  }

  .results-card,
  .company-card {
    max-width: 100%;
  }

  .results .results-grid {
    span {
      font-size: 18px;
    }

    strong {
      gap: 0;
      font-size: 48px;

      small {
        font-size: 18px;
      }

      &::before,
      &::after {
        width: 28px;
        height: 72px;
      }
    }
  }

  .site-footer {
    height: auto;

    .footer-grid {
      grid-template-columns: 1fr 1fr;

      > div:first-child {
        grid-column: 1 / -1;
      }
    }
  }
}

@media (min-width: 701px) {
  .pc-none-br {
    display: none;
  }

  .sp-none-br {
    display: block;
  }

  /* Figma Section 2 / node 353:3238 — current desktop hero artwork.
     テキスト塊は node 353:3344 の 1,176px コンテナを基準に配置し、
     1,440px 以下では既存の相似縮小だけを適用する。 */
  .hero {
    --hero-scale: 1;
    /* テキストと同じFigma座標系で縮小する。写真だけを画面幅へ
       合わせると左へ寄って文字の背後に入り込むため、hero-scaleを共有する。 */
    --hero-photo-scale: var(--hero-scale, 1);
    /* Figma Section 2 / node 353:3238 is 1,981 × 775px. */
    --hero-height: 669px;
    background: #c2f1fd;
    place-items: start;

    .hero-art {
      display: block;
      position: absolute;
      z-index: 0;
      inset: 0;
      overflow: hidden;
      pointer-events: none;

      .hero-art__background,
      .hero-art__photo,
      .hero-art__ornament {
        position: absolute;
        display: block;
        max-width: none;
      }

      .hero-art__background {
        object-fit: cover;
        width: auto;
        height: auto;

        &.hero-art__background--one {
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
          /* mix-blend-mode: overlay; */
        }

        &.hero-art__background--two {
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
          mix-blend-mode: hard-light;
          opacity: 0.2;
        }
      }

      /* Figma node 353:3249 — exported photo + triangle mask canvas. */
      .hero-art__photo {
        top: 50%;
        bottom: 0;
        left: auto;
        right: calc(10px - min(230px, max(-220px, 770px - 40vw) * 1));

        /* width: 100%; */
        height: 130%;
        aspect-ratio: 1.17 / 1;
        transform: translateY(-50%);
        overflow: hidden;
        display: block;
        object-fit: cover;
      }
    }

    .hero-inner {
      position: absolute;
      z-index: 1;
      top: calc(50% + 18.9px);
      left: max(76px, calc((100% - 1583px) / 2));
      display: block;
      width: 1176px;
      height: 553.04px;
      max-width: none;
      margin: 0;
      padding: 0;
      transform: translateY(-50%) scale(var(--hero-scale, 1));
      transform-origin: left center;
      text-align: left;
    }
  }

  .hero .hero-title {
    position: relative;
    width: 976.549px;
    height: 329.6px;
    margin: 0;
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
    -webkit-text-stroke: 0;
    text-shadow: none;
  }

  .hero-art__ornament {
    position: absolute;
    z-index: -1;
    top: 11.73px;
    left: 16.99px;
    width: 960.013px;
    height: 198.251px;
    object-fit: fill;
    transform: none;
  }

  .hero .hero-title picture {
    display: none;
  }

  .hero .hero-logo {
    display: none;
  }

  .hero .hero-title-text {
    display: block;
    position: relative;
    width: 977px;
    height: 209.98px;
    color: #121212;

    &::after {
      display: none;
    }

    > span {
      position: absolute;
      display: block;
      margin: 0;
      white-space: nowrap;
      background-image:
        linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.35) 0%,
          rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(90deg, #121212 0%, #121212 100%);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 0;
      text-shadow: none;

      &::after {
        display: none;
      }
    }

    .hero-title-text__ai {
      top: 0;
      left: 0;
      font-size: var(--hero-title-ai-size);
      font-weight: 900;
      line-height: 1.16;
      letter-spacing: -2.5344px;
      background-image: linear-gradient(138deg, #c06dff 22%, #006cff 91%);
    }

    .hero-title-text__de {
      top: 59.79px;
      left: 124.01px;
      font-size: var(--hero-title-small-size);
      font-weight: 900;
      line-height: 1.16;
      letter-spacing: 1.9753px;
    }

    .hero-title-text__work {
      top: 21.534px;
      left: 194.6px;
      font-size: var(--hero-title-large-size);
      font-weight: 900;
      line-height: 1.16;
      letter-spacing: -3.9744px;
      background-image:
        linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.35) 0%,
          rgba(255, 255, 255, 0) 100%
        ),
        linear-gradient(90deg, #006cff 0%, #006cff 100%);
    }

    .hero-title-text__wo {
      top: 61.746px;
      left: 481.725px;
      font-size: var(--hero-title-small-size);
      font-weight: 700;
      line-height: 1.16;
      letter-spacing: 1.9753px;
    }

    .hero-title-text__change {
      top: 22.045px;
      left: 549.06px;
      font-size: var(--hero-title-large-size);
      font-weight: 900;
      line-height: 1.16;
      letter-spacing: -4.9847px;
    }
  }

  .hero .hero-lede {
    position: absolute;
    top: 205.6px;
    left: 0;
    width: 808px;
    margin: 0;
    font-size: var(--hero-lede-size);
    line-height: 1.47;
    font-weight: 900;
    letter-spacing: 2.93px;
    white-space: nowrap;

    .desktop-copy {
      display: inline;
    }

    .mobile-copy {
      display: none;
    }

    .desktop-copy > span {
      color: #d7313e;
    }
  }

  .hero .hero-stats {
    position: absolute;
    top: 371.6px;
    left: 0;
    width: 940.8px;
    gap: 53.76px;
    margin: 0;
    justify-content: flex-start;

    > div {
      position: relative;
      width: 202.44px;
      height: 181.44px;
    }

    .hero-stat__laurel {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      max-width: none;
    }

    > div > span {
      position: absolute;
      z-index: 1;
      top: 50.4px;
      /* left: 7.56px; */
      width: 170.52px;
      margin: 0;
      font-size: 15.96px;
      font-family: "Noto Sans JP", sans-serif;
      font-weight: 900;
      font-feature-settings: "palt" 1;
      line-height: 1.5;
      letter-spacing: 0.6384px;
      text-align: center;
      white-space: nowrap;
    }

    strong {
      position: absolute;
      z-index: 1;
      top: 58.8px;
      /* left: 7.56px; */
      display: block;
      width: 170.52px;
      height: 80.64px;
      margin: 0;
      font-size: 53.76px;
      line-height: 1.5;
      letter-spacing: -3.2256px;
      background:
        linear-gradient(0deg, #000, #818181), linear-gradient(#006cff, #006cff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-align: center;

      &::before,
      &::after {
        display: none;
      }
    }

    .layered-stat-value,
    .layered-stat-unit {
      transform: none;
    }

    .layered-stat-value {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      /* width: 170.52px;
      height: 80.64px; */
    }

    .layered-stat-text {
      width: 100%;
      height: 80.64px;
      white-space: nowrap;
    }

    .layered-stat-value::before,
    .layered-stat-value::after,
    .layered-stat-unit::before,
    .layered-stat-unit::after {
      display: none;
    }

    .layered-stat-text {
      background-color: transparent;
      background-image: linear-gradient(90deg, #006cff 0%, #006cff 100%);
      background-clip: text;
      -webkit-background-clip: text;
      color: #006cff;
      -webkit-text-fill-color: #006cff;
    }

    .layered-stat-unit {
      position: absolute;
      top: 58.8px;
      left: 78px;
      width: 22px;
      height: 31.752px;
      font-family: var(--display);
      font-size: 21.168px;
      line-height: 1.5;
      white-space: nowrap;
    }

    .layered-stat-unit-text {
      font-family: var(--display);
      font-size: 21.168px;
      line-height: 1.5;
      letter-spacing: 0.4032px;
      background-image: var(--text-gradient-unit);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }

    .layered-stat-unit > sup {
      position: absolute;
      left: 22px;
      top: 15px;
      margin: 0;
      color: #777;
      -webkit-text-fill-color: #777;
      /* font-size: 8.4px; */
      letter-spacing: 0;
      line-height: 1.5;
      white-space: nowrap;
      /* display: none; */
    }

    > div:nth-child(2) .layered-stat-unit sup {
      top: -12px;
      left: 4px;
    }

    .hero-stat__note {
      position: absolute;
      z-index: 2;
      display: block;
      margin: 0;
      color: #777;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 8.4px;
      font-weight: 400;
      line-height: 1.5;
      white-space: nowrap;
    }

    .hero-stat__note--lead {
      left: 118.44px;
      top: 132.83px;
    }

    .hero-stat__note--business {
      left: 397.15px;
      top: 89.88px;
    }

    > div:nth-child(2) strong {
      top: 66.25px;
    }

    > div:nth-child(2) .layered-stat-value {
      left: calc(34px + var(--hero-business-value-shift));
      width: auto;
    }

    > div:nth-child(2) .layered-stat-unit {
      top: 28px;
      left: 116px;
      width: 28px;
    }
  }

  .results .results-lead strong {
    position: relative;
    display: block;
    width: var(--stat-lead-frame-width);
    height: var(--stat-lead-frame-height);
    background-size: var(--stat-lead-art-width) var(--stat-lead-art-height);
    background-position: var(--stat-lead-art-left) var(--stat-lead-art-top);
  }

  .results .results-lead .layered-stat-value {
    position: absolute;
    left: var(--stat-lead-value-left);
    top: var(--stat-lead-value-top);
    width: var(--stat-lead-value-width);
    height: var(--stat-lead-value-height);
    margin: 0;
  }

  .results .results-lead .layered-stat-unit {
    position: absolute;
    left: var(--stat-lead-unit-left);
    top: var(--stat-lead-unit-top);
    width: var(--stat-lead-unit-size);
    height: calc(var(--stat-lead-unit-size) * 1.5);
    margin: 0;
    font-family: var(--display);
    font-size: var(--stat-lead-unit-size);
    line-height: 1.5;
    letter-spacing: 0.9942px;
    white-space: nowrap;
  }

  .results .results-lead .layered-stat-text {
    box-sizing: content-box;
    display: block;
    width: max-content;
    height: var(--stat-lead-value-height);
    padding-inline-end: var(--stat-lead-number-paint-bleed);
    font-family: var(--display);
    font-size: 146.052px;
    line-height: 1.5;
    letter-spacing: var(--stat-lead-number-tracking);
    white-space: nowrap;
    /* Figmaの値幅を保ったまま、ローカルフォントの字幅差による単位との重なりを吸収。 */
    transform: scaleX(var(--stat-lead-value-scale));
    transform-origin: left center;
  }

  .results .results-lead .layered-stat-unit-text {
    display: block;
    width: var(--stat-lead-unit-size);
    height: calc(var(--stat-lead-unit-size) * 1.5);
    font-family: var(--display);
    font-size: var(--stat-lead-unit-size);
    line-height: 1.5;
    letter-spacing: 0.9942px;
    background-image: var(--text-gradient-unit);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .results .results-lead .layered-stat-unit > sup {
    position: absolute;
    left: 10.844px;
    top: -8.027px;
    margin: 0;
    color: #888;
    -webkit-text-fill-color: #888;
    font-family: var(--display);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.48px;
    white-space: nowrap;
  }

  .results .results-lead b {
    box-sizing: border-box;
    height: 100px;
    margin-top: 0;
    padding-top: 32px;
    border-top: 0;
  }

  .results .results-lead p {
    box-sizing: border-box;
    height: 100px;
    margin: 0;
    padding-top: 20px;
  }

  /* Figma node 276:22827: Results header = 36px label + 106px title frame. */
  .results-card > .section-heading {
    height: 142px;
  }

  .results-card > .section-heading h2 {
    box-sizing: border-box;
    height: 106px;
    line-height: 73.5px;

    &::after {
      top: 94px;
    }
  }

  /* Figma node 276:23288: keep the underline inside the 79px heading frame. */
  .final-contact > div > p {
    height: 79px;
    margin: 0 0 40px;

    &::after {
      top: 76px;
    }
  }

  .results .results-grid strong {
    position: relative;
    display: block;
    width: 320px;
    height: var(--stat-grid-frame-height);
    flex: 0 0 auto;
    background-size: auto var(--stat-grid-art-height);
    background-repeat: no-repeat;
    overflow: visible;
  }

  .results .results-grid .layered-stat-unit-group {
    position: absolute;
    top: 38.543px;
    min-width: var(--stat-grid-unit-width);
    height: 41.897px;
    margin: 0;
    white-space: nowrap;
  }

  .results .results-grid > div:last-child .layered-stat-unit-group {
    min-width: var(--stat-grid-wide-unit-width);
  }

  .results .results-grid .layered-stat-value {
    position: absolute;
    top: -9.545px;
    width: 131px;
    height: 117.233px;
    margin: 0;
  }

  .results .results-grid .layered-stat-text {
    box-sizing: content-box;
    display: block;
    width: max-content;
    height: 117.233px;
    padding-inline-end: var(--stat-grid-number-paint-bleed);
    font-family: var(--display);
    font-size: var(--stat-grid-value-size);
    line-height: 1.5;
    letter-spacing: var(--stat-grid-number-tracking);
    white-space: nowrap;
  }

  .results .results-grid .layered-stat-unit {
    position: relative;
    display: block;
    height: 41.897px;
    font-family: var(--display);
    font-size: var(--stat-grid-unit-size);
    line-height: 1.5;
    letter-spacing: var(--stat-grid-unit-tracking);
  }

  .results .results-grid .layered-stat-unit-text {
    display: block;
    height: 41.897px;
    font-family: var(--display);
    font-size: var(--stat-grid-unit-size);
    line-height: 1.5;
    letter-spacing: var(--stat-grid-unit-tracking);
    background-image: var(--text-gradient-unit);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .results .results-grid .layered-stat-unit-group > sup {
    position: absolute;
    left: 8px;
    top: -7.233px;
    bottom: auto;
    margin: 0;
    color: #888;
    -webkit-text-fill-color: #888;
    font-family: var(--display);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.48px;
    white-space: nowrap;
    transform: none;
  }

  .results .results-grid > div:nth-child(3) .layered-stat-unit-group > sup {
    left: 40px;
  }

  .results .results-grid > div:nth-child(1) strong {
    background-position: 34.869px 1.424px;
  }

  .results .results-grid > div:nth-child(2) strong {
    background-position: 50.869px 1.424px;
  }

  .results .results-grid > div:nth-child(3) strong {
    background-position: 26.869px 1.424px;
  }

  .results .results-grid > div:nth-child(1) .layered-stat-value {
    left: 78.365px;
  }

  .results .results-grid > div:nth-child(2) .layered-stat-value {
    left: 99.365px;
    width: 89px;
  }

  .results .results-grid > div:nth-child(3) .layered-stat-value {
    left: 70.365px;
  }

  .results .results-grid > div:nth-child(1) .layered-stat-unit-group {
    left: 213.404px;
  }

  .results .results-grid > div:nth-child(2) .layered-stat-unit-group {
    left: 196.404px;
  }

  .results .results-grid > div:nth-child(3) .layered-stat-unit-group {
    left: 199.404px;
  }

  .catalog .service-card {
    min-height: var(--service-card-desktop-height);
    height: var(--service-card-desktop-height);
  }

  .catalog .card-visual {
    min-height: var(--service-card-desktop-height);
  }

  .catalog .card-body {
    padding-top: var(--service-card-desktop-padding-y);
    padding-bottom: var(--service-card-desktop-padding-y);
  }

  .catalog .service-card .card-body p {
    font-size: var(--service-card-description-size);
    line-height: 1.5;
  }

  .catalog .cta-band small {
    font-size: 36px;
    line-height: 1.5;
  }

  /* Figma desktop section rhythm: the heading, card list and CTA are
     siblings in a fixed-gap column. */
  .service-gateway > .section-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .service-gateway h2 {
    height: 76px;
    margin: 0;
  }

  .catalog > .section-inner {
    display: flex;
    flex-direction: column;
    gap: 64px;
  }

  .catalog .section-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 356px;
    margin: 0;
  }

  .catalog.catalog--business .section-heading {
    height: 356px;
  }

  .catalog .section-heading h2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    gap: 16px;
  }

  .catalog .section-heading p {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    height: 153px;
    padding-top: 66px;
  }

  .catalog .cta-band {
    margin: 0 0 0 calc(50% - 50vw);
  }

  .catalog--personal {
    margin-top: -152px;
  }

  .catalog--personal .cta-band {
    height: 498px;
    padding: 80px 56px 208px;
  }

  .catalog.catalog--business {
    margin-top: -98px;
  }

  .catalog--business > .section-inner {
    gap: 53.6px;
  }

  .catalog--business .cta-band {
    height: 508.4px;
    padding: 90.4px 56px 208px;
  }

  .catalog.catalog--support {
    margin-top: -111.6px;
  }

  .catalog.catalog--support .cta-band {
    height: 354px;
    padding: 80px 56px 64px;
  }
}

/* Tablet: let the Results heading wrap without clipping. */
@media (min-width: 701px) and (max-width: 1199px) {
  .results-card > .section-heading {
    height: auto;
  }

  .results-card > .section-heading h2 {
    height: auto;
    font-size: var(--results-heading-tablet-size);
    line-height: 1.5;

    &::after {
      top: calc(100% + var(--section-rule-gap));
    }
  }

  .results .results-grid {
    grid-template-columns: minmax(320px, 1fr);

    > div:nth-child(3) {
      grid-column: auto;
    }
  }
}

/* 840px is the first width that fits two 320px stat frames plus the 24px gap
   inside the existing tablet card padding. */
@media (min-width: 840px) and (max-width: 1199px) {
  .results .results-grid {
    grid-template-columns: repeat(2, minmax(320px, 1fr));

    > div:nth-child(3) {
      grid-column: 1 / -1;
    }
  }
}

/* 701〜1,640px: Figmaの1280/1440px版を基準に、画面幅に合わせて
   ヒーロー全体（高さ・文字・写真）を同じ比率で縮小する。 */
@media (min-width: 701px) and (max-width: 1640px) {
  .hero {
    --hero-mid-scale: clamp(0.66, calc(100vw / 1280px), 1);
    --hero-scale: calc(0.81569 * var(--hero-mid-scale));
    --hero-photo-scale: var(--hero-mid-scale);
    --hero-height: 666px;
    min-height: calc(666px * var(--hero-mid-scale));
    height: calc(666px * var(--hero-mid-scale));
    padding-top: 0;
  }

  .hero .hero-inner {
    top: 55%;
    left: max(76px, calc((100vw - 1256px) / 2));
  }

  .hero .annotation {
    right: var(--hero-annotation-edge-gap);
    bottom: max(10px, calc(16px * var(--hero-mid-scale)));
    width: calc(100% - (2 * var(--hero-annotation-edge-gap)));
  }
}

@media (max-width: 700px) {
  :root {
    --company-logo-height: 160px;
    --sp-space-2xs: 4px;
    --sp-space-xs: 8px;
    --sp-space-sm: 12px;
    --sp-space-md: 16px;
    --sp-space-lg: 20px;
    --sp-space-xl: 24px;
    --sp-space-2xl: 26px;
    --sp-space-3xl: 32px;
    --sp-space-4xl: 40px;
    --sp-space-5xl: 48px;
    --sp-space-6xl: 50px;
    --sp-space-7xl: 64px;
    --sp-space-8xl: 91px;
    --sp-space-9xl: 96px;
    --sp-inline: 16px;
    --sp-header-logo-width: 140px;
    --sp-header-logo-height: 42px;
    --sp-header-gap: 32px;
    --sp-nav-gap: 26px;
    --sp-radius: 6px;
    --sp-hairline: 1px;
    --sp-stroke-width: 2px;
    --sp-catalog-radius: 48px;
    --sp-catalog-overlap: 48px;
    --sp-section-rule-width: 118px;
    --sp-section-rule-height: 6px;
    --sp-section-rule-offset: 34px;
    --sp-card-visual-height: 200px;
    --sp-support-visual-height: 260px;
    --sp-mentor-visual-height: 243px;
    --sp-product-logo-height: 44px;
    --sp-icon-size: 32px;
    --sp-gateway-icon-size: 33px;
    --sp-card-action-icon-size: 28px;
    --sp-card-action-gap: 7px;
    --sp-card-action-padding-y: 8px;
    --sp-card-copy-end: 9px;
    --sp-type-nav: 24px;
    --sp-type-gateway-title: 24px;
    --sp-type-en: 14px;
    --sp-type-section-title: 30px;
    --sp-type-body: 16px;
    --sp-type-card-copy: 18px;
    --sp-type-tag: 14px;
    --sp-type-card-action: 16px;
    --sp-type-mentor-title: 28px;
    --sp-type-result-main: 68px;
    --sp-type-result-sub: 58px;
    --sp-type-final-title: 24px;
    --sp-type-final-copy: 14px;
    --sp-type-cta-note: 15px;
    --sp-type-cta-title: 22px;
    --sp-type-result-label: 15px;
    --sp-type-result-heading: 26px;
    --sp-type-note: 10px;
    --sp-line-title: 1.5;
    --sp-line-body: 1.8;
    /* Figma node 345:3217 — photo frame geometry scaled from the 410px frame. */
    --sp-hero-photo-top: -16.5vw;
    --sp-hero-photo-left: -30.487805vw;
    --sp-hero-photo-width: 159.268293vw;
    --sp-hero-photo-height: 114.195122vw;
    --sp-hero-photo-mask-x: 27.804878vw;
    --sp-hero-photo-mask-y: -24.878049vw;
    --sp-hero-photo-mask-width: 131.571951vw;
    --sp-hero-photo-mask-height: 112.039268vw;
    --sp-hero-photo-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201541.59%201312.73%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22m1203.06%20739.311c1.58%202.68%202.5%205.692%202.7%208.794.2%203.103-.33%206.208-1.55%209.067-1.22%202.858-3.1%205.391-5.48%207.393-2.37%202.003-5.19%203.42-8.21%204.137-197.388%2048.528-439.387%20152.503-653.532%20256.688%20329.608-116.554%20644.812-154.448%20714.172-165.38%206.8-.974%2013.74.084%2019.94%203.04%206.2%202.955%2011.39%207.678%2014.91%2013.573l255.58%20436.107h-1541.58707031c-.00181254%200-.00272734%200-.00292969%200h.00097656-.00097656.00195312l770.79104688-1312.73z%22%2F%3E%3C%2Fsvg%3E");
    --sp-hero-photo-image-width: 100.9%;
    --sp-hero-photo-image-height: 116.21%;
    --sp-hero-photo-image-shift: -0.93%;
    /* Figma node 345:3218 — title frame starts 7px after the 283px photo area. */
    --sp-hero-photo-title-gap: 1.707317vw;
    --sp-hero-content-top: 5vw;
    --sp-hero-title-width: 94.499756vw;
    --sp-hero-title-scale: 1;
    --sp-hero-title-height: 16.585366vw;
    --sp-hero-title-inline-offset: 0;
    --sp-hero-title-copy-gap: 3.250244vw;
    --sp-hero-content-bottom: 5vw;
    --sp-hero-lede-size: 4.390244vw;
    --sp-hero-lede-gap: 7.5vw;
    --sp-hero-stat-grid-width: 79.512195vw;
    --sp-hero-stat-grid-gap: 4.878049vw;
    --sp-hero-stat-label-size: 2.941951vw;
    --sp-hero-stat-note-size: 2.04878vw;
    --sp-hero-stat-value-size: 9.909999vw;
    --sp-hero-stat-value-line-height: 51.373px;
    --sp-hero-stat-unit-size: 13.485px;
    --sp-hero-stat-unit-line-height: 20.228px;
    --sp-hero-stat-laurel-width: 29.968px;
    --sp-hero-stat-laurel-height: 69.568px;
    --sp-hero-stat-laurel-offset: -16.86px;
    --sp-hero-stat-inline: 21px;
    --sp-hero-stat-label-overlap: -6.422px;
    --sp-hero-stat-bottom: 6.443px;
    --hero-stat-value-note-top: -10px;
    /* Figma hero stat child positions scaled from the 202.44 × 181.44 frame. */
    --sp-hero-stat-first-unit-left: 50%;
    --sp-hero-stat-first-unit-top: 72.98%;
    --sp-hero-stat-second-top: 36.51%;
    --sp-hero-stat-second-unit-left: 75.06%;
    --sp-gateway-card-top: 27px;
    --sp-section-title-tracking: 3px;
    --sp-section-brush-width: 120px;
    --sp-section-brush-height: 18px;
    --sp-section-heading-gap: 8px;
    --sp-section-copy-top: 66px;
    --sp-support-label-tracking: 2px;
    --sp-footer-bottom-padding: 25px;
    --sp-cta-bottom-padding: 90px;
    --sp-cta-personal-slash-height: 23px;
    --sp-cta-business-slash-height: 36px;
    --sp-cta-support-slash-height: 27px;
    --sp-dialog-edge: 32px;
    --sp-dialog-title: 20px;
    --sp-result-lead-content-padding: 19px;
    --sp-result-heading-width: 250px;
    --sp-result-heading-tracking: 2.6px;
    --sp-result-grid-laurel-width: 49.3px;
    --sp-result-grid-laurel-height: 114px;
    --sp-result-unit-size: 18px;
    --sp-result-bottom-padding: 25px;
    /* Figma node 355:3785 / Group24 — 375px mobile reference geometry. */
    --sp-result-group-width: 343px;
    --sp-result-group-gap: 32px;
    --sp-result-lead-height: 285.95px;
    --sp-result-lead-label-frame-height: 68px;
    --sp-result-lead-label-padding-top: 8px;
    --sp-result-lead-label-size: 33px;
    --sp-result-lead-label-line-height: 60px;
    --sp-result-lead-stat-width: 317px;
    --sp-result-lead-stat-height: 95.95px;
    --sp-result-lead-laurel-width: 313.3px;
    --sp-result-lead-laurel-height: 94.54px;
    --sp-result-lead-laurel-left: 2.84px;
    --sp-result-lead-laurel-top: 1.41px;
    --sp-result-lead-number-size: 77.360877px;
    --sp-result-lead-number-line-height: 116px;
    --sp-result-lead-number-tracking: -4.254816px;
    --sp-result-lead-unit-size: 27.669203px;
    --sp-result-lead-unit-line-height: 41.503805px;
    --sp-result-lead-unit-tracking: 0.53px;
    --sp-result-lead-note-size: 5.301003px;
    --sp-result-lead-note-line-height: 8px;
    --sp-result-lead-note-tracking: 0.25px;
    --sp-result-lead-copy-height: 90px;
    --sp-result-lead-copy-size: 18px;
    --sp-result-lead-copy-line-height: 30px;
    --sp-result-grid-container-height: 401.45px;
    --sp-result-grid-gap: 23px;
    --sp-result-grid-frame-height: 118.48px;
    --sp-result-grid-label-size: 22px;
    --sp-result-grid-label-line-height: 33px;
    --sp-result-grid-stat-width: 256px;
    --sp-result-grid-stat-height: 77.48px;
    --sp-result-grid-number-size: 62.523804px;
    --sp-result-grid-number-line-height: 93.785706px;
    --sp-result-grid-number-tracking: -3.44px;
    --sp-result-grid-unit-size: 22.344843px;
    --sp-result-grid-unit-line-height: 33.517264px;
    --sp-result-grid-unit-tracking: 0.43px;
    --sp-result-grid-note-size: 8px;
    --sp-result-grid-note-line-height: 12px;
    --sp-result-grid-note-tracking: 0.38px;
    --sp-result-grid-laurel-1-width: 201.81px;
    --sp-result-grid-laurel-2-width: 176.21px;
    --sp-result-grid-laurel-3-width: 214.61px;
    --sp-result-grid-laurel-height-exact: 76.35px;
    --sp-result-grid-laurel-1-left: 27.9px;
    --sp-result-grid-laurel-2-left: 40.7px;
    --sp-result-grid-laurel-3-left: 21.49px;
    --sp-result-grid-laurel-top-exact: 1.14px;
    --sp-company-note-inline: 21px;
    --sp-menu-overlay: rgba(255, 255, 255, 0.9);
    --sp-menu-backdrop-blur: 20px;
    --sp-menu-animation-offset: 16px;
    --sp-menu-close-size: 40px;
    --sp-menu-close-glyph-size: 32px;
    --sp-menu-open-header-height: 56px;
    --sp-menu-open-header-background: rgba(255, 255, 255, 0.94);
    --sp-menu-open-header-border: rgba(18, 18, 18, 0.08);
    --sp-menu-open-header-blur: 16px;
    --dialog-padding: 24px;
  }

  body.menu-open {
    overflow: hidden;
  }

  .mobile-break {
    display: block;
  }

  .desktop-copy {
    display: none;
  }

  .mobile-copy {
    display: inline;
  }

  .section-inner {
    width: 100%;
    max-width: none;
  }

  .site-header {
    height: var(--header-height);
    overflow: visible;

    .header-inner {
      width: 100%;
      max-width: none;
      height: var(--header-bar-height);
      margin: 0;
      position: relative;
      z-index: 60;
      padding-inline: var(--header-bar-padding-inline);
      gap: var(--header-inner-gap);
      overflow: clip;
    }

    .logo img {
      width: var(--sp-header-logo-width);
      height: var(--sp-header-logo-height);
      object-fit: cover;
    }

    .global-nav {
      display: none;
    }

    .menu-button {
      display: block;
    }

    .menu-button[aria-expanded="true"] {
      display: grid;
      place-items: center;
      width: var(--sp-menu-close-size);
      height: var(--sp-menu-close-size);
      padding: 0;
      font-size: var(--sp-menu-close-glyph-size);
      line-height: 1;

      svg {
        display: none;
      }

      &::before {
        content: "×";
      }
    }

    .mobile-menu {
      position: fixed;
      z-index: 40;
      inset: 0;
      width: 100%;
      height: 100%;
      min-height: 100vh;
      min-height: 100dvh;
      overflow-y: auto;
      padding: calc(var(--sp-menu-open-header-height) + var(--sp-space-4xl))
        var(--sp-inline) var(--sp-space-4xl);
      gap: var(--sp-space-md);
      color: var(--text);
      background: var(--sp-menu-overlay);
      -webkit-backdrop-filter: blur(var(--sp-menu-backdrop-blur));
      backdrop-filter: blur(var(--sp-menu-backdrop-blur));
      animation: mobile-menu-in var(--motion-fast) var(--ease-out) both;

      &:not([hidden]) {
        display: flex;
        flex-direction: column;
      }

      a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-space-md);
        padding: var(--sp-space-3xl) var(--sp-space-lg);
        border-radius: var(--sp-radius);
        color: #fff;
        font-size: var(--sp-type-nav);
        line-height: var(--sp-line-title);

        &.mobile-menu__link--personal {
          background: var(--primary);
        }

        &.mobile-menu__link--business {
          background: var(--business);
        }

        &.mobile-menu__link--support {
          background: var(--support);
        }

        img {
          display: block;
          width: var(--sp-icon-size);
          height: var(--sp-icon-size);
          flex: 0 0 var(--sp-icon-size);
        }
      }
    }
  }

  body.menu-open .site-header {
    height: var(--sp-menu-open-header-height);
    padding: 0;
    border-bottom: var(--sp-hairline) solid var(--sp-menu-open-header-border);
    background: var(--sp-menu-open-header-background);
    -webkit-backdrop-filter: blur(var(--sp-menu-open-header-blur));
    backdrop-filter: blur(var(--sp-menu-open-header-blur));

    .header-inner {
      height: var(--sp-menu-open-header-height);
      padding-inline: var(--sp-inline);
      gap: var(--sp-header-gap);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
  }

  body.menu-open .site-header .logo {
    visibility: hidden;
  }

  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f4f8fb;
    background-image: url("./images/figma-hero-background-current.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: calc(-1 * var(--header-height));
    padding-top: var(--header-height);

    .hero-art {
      display: block;
      position: relative;
      z-index: 0;
      width: 100%;
      height: calc(var(--sp-hero-photo-height) + var(--sp-hero-photo-top));
      flex: 0 0 auto;
      margin-top: calc(-1 * var(--header-height));
      overflow: hidden;
      pointer-events: none;

      .hero-art__background,
      .hero-art__ornament {
        position: absolute;
        display: block;
        max-width: none;
      }

      .hero-art__background {
        display: none;
      }

      .hero-art__photo {
        top: var(--sp-hero-photo-top);
        left: var(--sp-hero-photo-left);
        width: var(--sp-hero-photo-width);
        height: var(--sp-hero-photo-height);
        overflow: hidden;
        aspect-ratio: 1.17 / 1;
        object-fit: cover;
        object-position: top;
        margin: auto;

        img {
          width: 100%;
          aspect-ratio: 1.17 / 1;
        }
      }
    }

    .hero-grid {
      display: none;
    }

    .hero-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: none;

      width: 100%;
      justify-content: flex-start;
      width: 100%;
      max-width: none;
      height: auto;
      padding: var(--sp-hero-content-top) var(--sp-space-lg)
        var(--sp-hero-content-bottom);
      transform: none;
      position: relative;
      z-index: 1;
      text-align: center;
    }

    .hero-title {
      position: relative;
      z-index: 1;
      width: var(--sp-hero-title-width);
      max-width: none;
      height: var(--sp-hero-title-height);
      margin: 0 0 var(--sp-hero-title-copy-gap) 10px;
      font-size: 0;
      line-height: 0;
    }

    .hero-art__ornament {
      position: absolute;
      z-index: -1;
      top: 0;
      left: 55%;
      width: var(--sp-hero-title-width);
      height: auto;
      display: block;
      object-fit: fill;
      transform: translateX(-50%);
    }

    .hero-title picture {
      display: none;
    }

    .hero-logo {
      display: none;
    }

    .hero-title-text {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      color: #121212;
      left: var(--sp-hero-title-inline-offset);
      transform: none;
      transform-origin: left top;

      &::after {
        display: none;
      }

      > span {
        position: absolute;
        display: block;
        margin: 0;
        white-space: nowrap;
        background-image:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.35) 0%,
            rgba(255, 255, 255, 0) 100%
          ),
          linear-gradient(90deg, #121212 0%, #121212 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 0;
        text-shadow: none;

        &::after {
          display: none;
        }
      }

      .hero-title-text__ai {
        top: 0;
        left: 0;
        font-size: 14.323171vw;
        font-weight: 900;
        line-height: 1.16;
        letter-spacing: 0;
        background-image: linear-gradient(138deg, #c06dff 22%, #006cff 91%);
      }

      .hero-title-text__de {
        top: 6.757805vw;
        left: 14.017073vw;
        font-size: 7.442195vw;
        font-weight: 900;
        line-height: 1.16;
        letter-spacing: 0.223268vw;
      }

      .hero-title-text__work {
        top: 2.434146vw;
        left: 21.995854vw;
        font-size: 11.230732vw;
        font-weight: 900;
        line-height: 1.16;
        letter-spacing: -0.44922vw;
        background-image:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.35) 0%,
            rgba(255, 255, 255, 0) 100%
          ),
          linear-gradient(90deg, #006cff 0%, #006cff 100%);
      }

      .hero-title-text__wo {
        top: 6.979268vw;
        left: 54.449512vw;
        font-size: 7.442195vw;
        font-weight: 700;
        line-height: 1.16;
        letter-spacing: 0.223268vw;
      }

      .hero-title-text__change {
        top: 2.491707vw;
        left: 62.060732vw;
        font-size: 11.268537vw;
        font-weight: 900;
        line-height: 1.16;
        letter-spacing: -0.563439vw;
      }
    }

    .hero-lede {
      width: 100%;
      margin: 0;
      font-size: var(--sp-hero-lede-size);
      line-height: 1.47;
      font-weight: 900;
      letter-spacing: 0.307317vw;
      white-space: normal;

      .desktop-copy {
        display: none;
      }

      .mobile-copy {
        display: inline;
      }

      .desktop-copy > span,
      .mobile-copy > span {
        color: #d7313e;
      }
    }

    .hero-lede br {
      display: block;
    }

    .hero-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      width: var(--sp-hero-stat-grid-width);
      max-width: none;
      margin: var(--sp-hero-lede-gap) 0 0;
      padding: 0;
      gap: var(--sp-hero-stat-grid-gap);

      .hero-stat__note {
        display: none;
      }

      > div {
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 202.44 / 181.44;
      }

      .hero-stat__laurel {
        position: absolute;
        inset: 0;
        z-index: 0;
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
      }

      > div > span {
        position: absolute;
        z-index: 1;
        top: 27.77%;
        left: 0;
        width: 100%;
        margin: 0;
        font-size: var(--sp-hero-stat-label-size);
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 900;
        font-feature-settings: "palt" 1;
        line-height: 1.5;
        letter-spacing: 0.117683vw;
        text-align: center;
        white-space: nowrap;
      }

      strong {
        position: absolute;
        z-index: 1;
        top: 32.45%;
        left: 0;
        width: 100%;
        display: block;
        height: 44.45%;
        margin: 0;
        font-size: var(--sp-hero-stat-value-size);
        line-height: 1.5;
        letter-spacing: -0.545049vw;
        text-align: center;
      }

      strong::before,
      strong::after,
      .layered-stat-value::before,
      .layered-stat-value::after,
      .layered-stat-unit::before,
      .layered-stat-unit::after {
        display: none;
      }

      .layered-stat-value {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
      }

      /* Figma positions the first stat's unit and footnote against the full
         202.44 × 181.44 frame. Keep only the number in the original value
         band so every child uses the same frame as the laurel. */
      > div:first-child > strong {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      > div:first-child > strong > .layered-stat-value {
        top: 32.45%;
        left: 0;
        width: 100%;
        height: 44.45%;
      }

      .layered-stat-text {
        width: 100%;
        height: 100%;
        color: #006cff;
        -webkit-text-fill-color: #006cff;
        background-image: linear-gradient(90deg, #006cff 0%, #006cff 100%);
        background-clip: text;
        -webkit-background-clip: text;
        white-space: nowrap;
        font-family: var(--display);
        font-weight: 900;
        letter-spacing: inherit;
        transform: scaleX(0.9);
        transform-origin: center center;
      }

      .layered-stat-unit {
        position: absolute;
        z-index: 2;
        top: var(--sp-hero-stat-first-unit-top);
        left: 72%;
        width: auto;
        height: auto;
        margin: 0;
        font-family: var(--display);
        font-size: 3.902439vw;
        line-height: 1.5;
        letter-spacing: 0.074317vw;
        white-space: nowrap;
      }

      .layered-stat-unit-text {
        font-family: var(--display);
        font-size: inherit;
        line-height: inherit;
        background-image: var(--text-gradient-unit);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }

      .layered-stat-unit > sup {
        position: absolute;
        left: 12px;
        top: 5px;
        margin: 0;
        color: #777;
        -webkit-text-fill-color: #777;
        font-size: var(--sp-hero-stat-note-size);
        line-height: 1.5;
        white-space: nowrap;
      }

      > div:nth-child(2) .layered-stat-value {
        left: 22.66%;
        width: 52.78%;
      }

      > div:nth-child(2) .layered-stat-unit {
        top: 44.55%;
        left: 72%;
        width: auto;

        > sup {
          top: -12px;
          left: 0px;
        }
      }

      > div:first-child > strong > .layered-stat-unit {
        top: var(--sp-hero-stat-first-unit-top);
        left: var(--sp-hero-stat-first-unit-left);
        transform: translateX(-50%);
      }

      > div:first-child > strong > .hero-stat__value-note {
        top: 77.75%;
        left: 54.82%;
        font-size: var(--sp-hero-stat-note-size);
        transform: none;
        white-space: nowrap;
      }

      > div:nth-child(2) strong {
        top: var(--sp-hero-stat-second-top);
      }
    }

    .annotation {
      /* display: none; */
      position: relative;
      padding-top: 12px;
      padding-left: 10px;
      left: 10px;
    }
  }

  .service-gateway {
    min-height: 0;
    padding: var(--sp-space-lg) var(--sp-inline) var(--sp-space-8xl);

    h2 {
      margin: 0 0 var(--sp-space-xl);
      font-size: var(--sp-type-gateway-title);
      line-height: var(--sp-line-title);
    }

    .gateway-grid {
      gap: var(--sp-space-md);
    }

    .gateway {
      min-height: 0;
      padding: var(--sp-gateway-card-top) var(--sp-space-xl) var(--sp-space-2xs);
      justify-content: flex-start;
      gap: var(--sp-space-xs);
      border-radius: var(--sp-radius);

      b {
        font-size: var(--sp-type-gateway-title);
        line-height: var(--sp-line-title);
      }

      strong {
        font-size: var(--sp-type-body);
        line-height: var(--sp-line-title);
      }

      &::after {
        width: var(--sp-gateway-icon-size);
        height: var(--sp-gateway-icon-size);
        margin-top: var(--sp-hairline);
      }
    }
  }

  .catalog {
    margin-top: calc(-1 * var(--sp-catalog-overlap));
    padding: var(--sp-space-5xl) var(--sp-inline) 0;
    border-radius: var(--sp-catalog-radius) var(--sp-catalog-radius) 0 0;

    &::before {
      inset: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: none;
      background-position: center top;
      background-size: cover;
    }

    &.catalog--business,
    &.catalog--support {
      margin-top: calc(-1 * var(--sp-catalog-overlap));
      padding-top: var(--sp-space-7xl);
    }

    .section-heading {
      height: auto;
      margin: 0 0 var(--sp-space-5xl);

      .en {
        font-size: var(--sp-type-en);
        line-height: var(--sp-line-title);
        letter-spacing: var(--sp-space-2xs);
        white-space: nowrap;
      }

      h2 {
        width: auto;
        /* height: 151px; */
        margin: var(--sp-space-xs) auto var(--sp-section-heading-gap);
        font-size: var(--sp-type-section-title);
        line-height: var(--sp-line-title);
        letter-spacing: var(--sp-section-title-tracking);

        &::after {
          top: 60px;
          width: var(--sp-section-brush-width);
          height: var(--sp-section-brush-height);
          background-position: center;
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }

      p {
        box-sizing: border-box;
        margin: 0;
        /* padding-top: var(--sp-section-copy-top); */
        font-size: var(--sp-type-body);
        line-height: var(--sp-line-body);
        font-weight: 700;
      }
    }

    &.catalog--business .section-heading {
      height: auto;
    }

    &.catalog--business .section-heading h2 {
      margin-bottom: var(--sp-section-heading-gap);
    }

    &.catalog--support .section-heading .en {
      letter-spacing: var(--sp-support-label-tracking);
    }

    &.catalog--personal .section-heading p br,
    &.catalog--support .section-heading p br {
      display: block;
    }

    .service-list {
      gap: var(--sp-space-3xl);
    }

    .service-card {
      grid-template-columns: 1fr;
      height: auto;
      min-height: 0;
      border-radius: var(--sp-radius);

      &.service-card--reverse {
        grid-template-columns: 1fr;

        .card-visual {
          order: 1;
        }
        .card-body {
          order: 2;
        }
      }
    }

    .card-visual {
      order: 1;
      min-height: 0;
      height: var(--sp-card-visual-height);

      picture {
        display: contents;
      }

      img {
        object-position: center;
        transform: none;
      }
    }

    .card-body {
      position: static;
      order: 2;
      min-height: 0;
      padding: var(--sp-space-sm) 0 0;

      h3 {
        font-size: var(--sp-type-gateway-title);
        white-space: normal;
      }

      .product-logo {
        max-width: none;
        height: var(--sp-product-logo-height);
        margin: 0 0 calc(-1 * var(--sp-space-2xs));
      }

      p {
        margin: var(--sp-space-sm) var(--sp-space-sm) var(--sp-space-md);
        font-size: var(--sp-type-card-copy);
        line-height: var(--sp-line-title);
        letter-spacing: 0;
      }

      .tags {
        gap: var(--sp-space-xs);
        margin-inline: var(--sp-space-sm);

        span {
          font-size: var(--sp-type-tag);
        }
      }

      em {
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--sp-card-action-gap);
        width: auto;
        margin: var(--sp-card-action-icon-size) 0 0 auto;
        padding: var(--sp-card-action-padding-y) var(--sp-space-sm)
          var(--sp-card-action-padding-y) var(--sp-space-xl);
        border-radius: var(--sp-radius) 0 0;
        background: var(--service-accent);
        color: var(--service-on-accent);
        font-size: var(--sp-type-card-action);

        img {
          width: var(--sp-card-action-icon-size);
          height: var(--sp-card-action-icon-size);
          flex-basis: var(--sp-card-action-icon-size);
        }
      }
    }

    &.catalog--business .card-body p br {
      /* display: none; */
    }

    &.catalog--business .service-card:first-child .card-body p {
      /* width: calc(100% - var(--sp-card-copy-end)); */
      /* margin-right: 0; */
    }

    &.catalog--support .card-visual {
      height: var(--sp-support-visual-height);
    }
  }

  .catalog .service-card--focus-short .card-visual img,
  .catalog .service-card--focus-fde .card-visual img,
  .catalog .service-card--focus-ai-solution .card-visual img,
  .catalog .service-card--focus-work .card-visual img,
  .catalog .service-card--focus-short:hover .card-visual img,
  .catalog .service-card--focus-fde:hover .card-visual img,
  .catalog .service-card--focus-ai-solution:hover .card-visual img,
  .catalog .service-card--focus-work:hover .card-visual img {
    object-position: center;
    transform: none;
  }

  .catalog .cta-band {
    width: calc(100% + (var(--sp-inline) * 2));
    height: auto;
    min-height: 0;
    margin: calc(var(--sp-space-4xl) * 2) 0 0 calc(-1 * var(--sp-inline));
    padding: var(--sp-space-7xl) var(--sp-inline) var(--sp-cta-bottom-padding);
    gap: var(--sp-space-xs);
    background-position: center;
    background-size: cover;

    small {
      --sp-cta-slash-height: var(--sp-cta-personal-slash-height);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--sp-space-xs);
      width: 100%;
      font-size: var(--sp-type-cta-note);
      line-height: var(--sp-line-title);
      white-space: nowrap;

      &::before,
      &::after {
        content: "";
        width: var(--sp-stroke-width);
        height: var(--sp-cta-slash-height);
        flex: 0 0 auto;
        background: currentColor;
      }

      &::before {
        transform: rotate(-25deg);
      }

      &::after {
        transform: rotate(25deg);
      }
    }

    b {
      font-size: var(--sp-type-cta-title);
      line-height: var(--sp-line-title);
      letter-spacing: 0;
      white-space: normal;
    }

    .cta-button {
      width: 100%;
      max-width: none;
      min-width: 0;
      margin-top: var(--sp-space-3xl);
      padding: var(--sp-space-md) 0;
      font-size: var(--sp-type-card-copy);
      line-height: var(--sp-line-title);

      img {
        width: var(--sp-space-4xl);
        height: var(--sp-space-4xl);
        flex-basis: var(--sp-space-4xl);
      }
    }
  }

  .catalog.catalog--personal .cta-band b .mobile-break {
    display: block;
  }

  .catalog.catalog--business .cta-band small {
    --sp-cta-slash-height: var(--sp-cta-business-slash-height);
  }

  .catalog.catalog--business .cta-band .cta-button {
    /* width: auto; */
    padding-inline: var(--sp-space-7xl);
  }

  .catalog.catalog--support .cta-band small {
    --sp-cta-slash-height: var(--sp-cta-support-slash-height);
  }

  .catalog.catalog--support .cta-band {
    height: auto;
    min-height: 0;
    padding-bottom: var(--sp-space-7xl);
  }

  .mentor {
    height: auto;
    min-height: 0;
    padding: var(--sp-space-xs) 0 var(--sp-space-7xl);

    .mentor-visual {
      width: 100%;
      height: var(--sp-mentor-visual-height);
      border-radius: 0;

      picture {
        display: block;
        width: 100%;
        height: 100%;
      }

      img {
        object-position: center;
      }
    }

    .mentor-grid > div:first-child {
      width: calc(100% - (var(--sp-space-lg) * 2));
      max-width: none;
      min-height: 0;
      margin-top: calc(-2 * var(--sp-space-4xl));
      padding: var(--sp-space-3xl) var(--sp-space-lg);
      border-radius: var(--sp-radius);
    }

    .en {
      font-size: var(--sp-type-en);
      line-height: var(--sp-line-title);
      letter-spacing: var(--sp-space-2xs);
    }

    h2 {
      margin: 0 0 var(--sp-space-xl);
      font-size: var(--sp-type-mentor-title);
      line-height: var(--sp-line-title);
    }

    p {
      font-size: var(--sp-type-body);
      line-height: var(--sp-line-body);
    }
  }

  .results {
    min-height: 0;
    padding: var(--sp-space-5xl) var(--sp-inline);

    .section-inner {
      gap: var(--sp-space-3xl);
      padding-bottom: var(--sp-result-bottom-padding);
    }

    .results-card {
      gap: 0;
      padding: var(--sp-space-3xl) var(--sp-space-lg);
    }

    .section-heading {
      order: 1;
      padding: 0;

      .en {
        font-size: var(--sp-type-en);
        line-height: var(--sp-line-title);
        letter-spacing: var(--sp-space-2xs);
      }

      h2 {
        width: var(--sp-result-heading-width);
        margin: 0 auto;
        font-size: var(--sp-type-result-heading);
        line-height: var(--sp-line-title);
        letter-spacing: var(--sp-result-heading-tracking);
        text-align: center;
      }
    }

    /* Figma node 355:3785 — keep the lead stat as one vertical group.
       HTML order is already label → value → copy, so do not flatten the group
       with display: contents just to reorder its children. */
    .results-card > .results-lead {
      display: flex;
      order: 2;
      flex-direction: column;
      align-items: center;
      gap: 0;
      padding-top: 40px;
    }

    .results-lead > strong {
      order: initial;
      box-sizing: content-box;
      width: 100%;
      height: auto;
      margin-top: var(--sp-space-md);
      padding: var(--sp-result-lead-content-padding) 0
        calc(var(--sp-result-lead-content-padding) + var(--sp-space-3xl));
      border-bottom: 0;
      font-size: var(--sp-type-result-main);
      background-image: url("./images/figma-results-laurel-lead-current-latest.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;

      small {
        font-size: var(--sp-result-unit-size);
      }
    }

    .results-lead {
      > b {
        order: initial;
        width: 100%;
        margin-top: var(--sp-space-3xl);
        padding-top: 0;
        border-top: 0;
        font-size: var(--sp-type-gateway-title);
        line-height: var(--sp-line-title);
        text-align: center;
      }

      > p {
        order: initial;
        width: 100%;
        margin: var(--sp-space-md) 0 0;
        font-size: var(--sp-type-result-label);
        line-height: var(--sp-line-title);
        text-align: center;
      }
    }

    .results-card > .results-grid {
      order: 5;
      grid-template-columns: 1fr;
      gap: var(--sp-space-xl);
      margin-top: var(--sp-space-3xl);

      > div {
        min-height: 0;
        padding: 0;
      }

      span {
        font-size: var(--sp-type-result-label);
        line-height: var(--sp-line-title);
      }

      strong {
        width: 100%;
        font-size: var(--sp-type-result-sub);
        background-position: center;
        background-size: contain;

        &::before,
        &::after {
          width: var(--sp-result-grid-laurel-width);
          height: var(--sp-result-grid-laurel-height);
        }
      }
    }

    .results-card > .results-grid > div {
      min-height: 0;
    }

    .results-card > .annotation {
      order: 6;
      margin-top: var(--sp-space-3xl);
      font-size: var(--sp-type-note) !important;
      line-height: var(--sp-line-title) !important;
    }

    .company-card {
      padding: var(--sp-space-4xl) 0;

      .company-lead {
        height: auto;
        padding: 0;
        font-size: var(--sp-type-gateway-title);
        line-height: var(--sp-line-title);
        letter-spacing: 0;

        &::after {
          top: calc(100% + var(--section-rule-gap));
        }
      }

      .logo-cloud {
        margin-top: var(--sp-space-3xl);

        .logo-track > picture {
          margin-right: -69px;
        }
      }
    }

    .company-card .annotation {
      margin-top: var(--sp-space-xs);
      padding-inline: var(--sp-company-note-inline);
      font-size: var(--sp-type-note) !important;
      line-height: var(--sp-line-title) !important;
    }
  }

  .final-contact {
    height: auto;
    min-height: 0;
    padding: var(--sp-space-4xl) var(--sp-inline);

    > div > p {
      margin: 0 0 var(--sp-space-4xl);
      font-size: var(--sp-type-final-title);
      line-height: var(--sp-line-title);
    }

    .final-grid {
      gap: var(--sp-space-xl);
    }

    .final-card {
      width: 100%;
      height: auto;
      min-height: 0;
      padding: var(--sp-space-md) var(--sp-space-2xl);
      gap: var(--sp-space-xs);
      border-radius: var(--sp-radius);

      b {
        font-size: var(--sp-type-final-title);
        line-height: var(--sp-line-title);
      }

      em {
        width: 100%;
        margin-top: var(--sp-space-xs);
        gap: var(--sp-space-xs);
        font-size: var(--sp-type-card-action);
      }

      strong {
        font-size: var(--sp-type-body);
        line-height: var(--sp-line-title);
      }
    }
  }

  .site-footer {
    height: auto;
    min-height: 0;
    padding: var(--sp-space-4xl) var(--sp-inline)
      var(--sp-footer-bottom-padding);

    .footer-grid {
      grid-template-columns: 1fr;
      gap: var(--sp-space-xl);

      > div:first-child {
        grid-column: auto;
      }

      > div:not(:first-child) {
        gap: var(--sp-space-xs);
      }

      b {
        margin-bottom: var(--sp-space-sm);
      }

      a {
        line-height: var(--sp-line-title);
      }
    }

    .footer-bottom {
      width: 100%;
      max-width: none;
      margin-top: var(--sp-space-6xl);
      padding-top: var(--sp-space-lg);
      flex-direction: row;
      justify-content: space-between;
      gap: 0;
    }
  }

  .hero .hero-stats strong,
  .results .results-lead strong,
  .results .results-grid strong {
    --layered-stat-outline-width: 4px;
    --layered-stat-shadow-offset: 2px;
    --layered-unit-outline-width: 2px;
    --layered-unit-shadow-offset: 1px;
  }

  .results .results-lead strong,
  .results .results-grid strong {
    position: relative;
  }

  .results .results-lead strong {
    gap: 0;
  }

  .results .results-lead .layered-stat-value {
    margin-right: var(--stat-gap-unit);
  }

  .results .results-lead .layered-stat-unit {
    margin-right: var(--stat-gap-laurel);
    position: relative;
  }

  .results .results-lead > strong > .layered-stat-unit > sup {
    position: absolute;
    left: calc(100% + var(--sp-space-xs));
    top: calc(-1 * var(--sp-space-xs));
    margin: 0;
    color: #888;
    -webkit-text-fill-color: #888;
    white-space: nowrap;
    transform: none;
  }

  .results .results-lead strong sup {
    align-self: center;
    flex: 0 0 auto;
    transform: translateY(calc(-1 * var(--stat-gap-laurel)));
  }

  .results .results-grid .layered-stat-unit-group {
    white-space: nowrap;
  }

  .counseling-dialog {
    width: calc(100% - var(--sp-dialog-edge));
    max-height: calc(100vh - var(--sp-dialog-edge));
  }

  .counseling-dialog__options {
    grid-template-columns: 1fr;
  }

  .counseling-dialog h2 {
    font-size: var(--sp-dialog-title);
  }
}

@media (max-width: 380px) {
  :root {
    --sp-hero-title-width: 94.499756vw;
    --sp-hero-title-scale: 1;
    --sp-hero-title-height: 16.585366vw;
  }
}

/* Figma node 355:3785 / Group24.
   The reference is a 375px mobile canvas. Keep the measured frames intact at
   the normal mobile width and leave the existing narrow-phone fallback below
   361px untouched. */
@media (min-width: 350px) and (max-width: 700px) {
  .results .results-card > .results-lead,
  .results .results-card > .results-grid {
    align-self: flex-start;
    /* width: var(--sp-result-group-width); */
    position: relative;
    /* left: calc(0px - var(--sp-space-xl)); */
    margin-left: auto;
    margin-right: auto;
  }

  .results-card > .results-lead {
    display: flex;
    flex: 0 0 var(--sp-result-lead-height);

    gap: 0;
    justify-content: flex-start;
    overflow: visible;
  }

  .results-card > .results-lead > b {
    box-sizing: border-box;
    width: 293px;
    height: var(--sp-result-lead-label-frame-height);
    flex: 0 0 var(--sp-result-lead-label-frame-height);
    align-self: center;
    margin: 0;
    padding: 0;
    font-family: var(--display);
    font-size: var(--sp-result-lead-label-size);
    font-weight: 900;
    line-height: var(--sp-result-lead-label-line-height);
    text-align: center;
    white-space: nowrap;
  }

  .results .results-card > .results-lead > strong {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: var(--sp-result-lead-stat-width);
    height: var(--sp-result-lead-stat-height);
    flex: 0 0 var(--sp-result-lead-stat-height);
    align-self: center;
    margin: var(--sp-space-md) 0 0;
    padding: 0;
    overflow: visible;
    font-family: var(--display);
    font-size: var(--sp-result-lead-number-size);
    font-weight: 900;
    line-height: var(--sp-result-lead-number-line-height);
    letter-spacing: var(--sp-result-lead-number-tracking);
    background-size: var(--sp-result-lead-laurel-width)
      var(--sp-result-lead-laurel-height);
    background-position: var(--sp-result-lead-laurel-left)
      var(--sp-result-lead-laurel-top);
  }

  .results .results-card > .results-lead > strong > .layered-stat-value {
    position: absolute;
    left: 29.04px;
    top: -9.46px;
    width: calc-size(fit-content, size + 5px);

    /* height: 116px; */
    margin: 0;
    font-size: var(--sp-result-lead-number-size);
    line-height: var(--sp-result-lead-number-line-height);
    letter-spacing: var(--sp-result-lead-number-tracking);
    margin-right: var(--stat-gap-unit);
    white-space: nowrap;
  }

  .results
    .results-card
    > .results-lead
    > strong
    > .layered-stat-value
    > .layered-stat-text {
    /* width: 217px;
    height: 116px; */
    font-size: var(--sp-result-lead-number-size);
    line-height: var(--sp-result-lead-number-line-height);
    letter-spacing: var(--sp-result-lead-number-tracking);
    white-space: nowrap;
  }

  .results .results-card > .results-lead > strong > .layered-stat-unit {
    position: absolute;
    left: 263px;
    top: 38.18px;
    width: 28px;
    height: 42px;
    margin: 0;
    font-family: var(--display);
    font-size: var(--sp-result-lead-unit-size);
    line-height: var(--sp-result-lead-unit-line-height);
    letter-spacing: var(--sp-result-lead-unit-tracking);
    white-space: nowrap;
  }

  .results
    .results-card
    > .results-lead
    > strong
    > .layered-stat-unit
    > .layered-stat-unit-text {
    width: 28px;
    height: 42px;
    font-size: var(--sp-result-lead-unit-size);
    line-height: var(--sp-result-lead-unit-line-height);
    letter-spacing: var(--sp-result-lead-unit-tracking);
    white-space: nowrap;
  }

  .results .results-card > .results-lead > strong > .layered-stat-unit > sup {
    position: absolute;
    left: 5.75px;
    top: -4.25px;
    right: auto;
    bottom: auto;
    width: 17px;
    height: 8px;
    margin: 0;
    color: #888;
    font-family: var(--display);
    font-size: var(--sp-result-lead-note-size);
    font-weight: 900;
    line-height: var(--sp-result-lead-note-line-height);
    letter-spacing: var(--sp-result-lead-note-tracking);
    -webkit-text-fill-color: #888;
    white-space: nowrap;
    transform: none;
  }

  .results .results-card > .results-lead > p {
    box-sizing: border-box;
    /* width: 343px; */
    /* height: var(--sp-result-lead-copy-height); */
    flex: 0 0 var(--sp-result-lead-copy-height);
    align-self: center;
    margin: var(--sp-space-xl) 0 0;
    padding: 0;
    font-family: var(--display);
    font-size: var(--sp-result-lead-copy-size);
    font-weight: 800;
    line-height: var(--sp-result-lead-copy-line-height);
    text-align: center;
  }

  .results .results-card > .results-grid {
    display: flex;
    flex: 0 0 var(--sp-result-grid-container-height);
    height: var(--sp-result-grid-container-height);
    flex-direction: column;
    gap: var(--sp-result-grid-gap);
    grid-template-columns: none;
    margin-top: var(--sp-result-group-gap);
    padding: 0;
  }

  .results .results-card > .results-grid > div {
    box-sizing: border-box;
    width: 100%;
    height: var(--sp-result-grid-frame-height);
    min-height: var(--sp-result-grid-frame-height);
    flex: 0 0 var(--sp-result-grid-frame-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-space-xs);
    margin: 0;
    padding: 0;
  }

  .results .results-card > .results-grid > div > span {
    width: auto;
    height: var(--sp-result-grid-label-line-height);
    flex: 0 0 var(--sp-result-grid-label-line-height);
    margin: 0;
    font-family: var(--display);
    font-size: var(--sp-result-grid-label-size);
    font-weight: 900;
    line-height: var(--sp-result-grid-label-line-height);
    white-space: nowrap;
  }

  .results .results-card > .results-grid > div > strong {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: var(--sp-result-grid-stat-width);
    height: var(--sp-result-grid-stat-height);
    flex: 0 0 var(--sp-result-grid-stat-height);
    margin: 0;
    padding: 0;
    overflow: visible;
    font-family: var(--display);
    font-size: var(--sp-result-grid-number-size);
    font-weight: 900;
    line-height: var(--sp-result-grid-number-line-height);
    letter-spacing: var(--sp-result-grid-number-tracking);
  }

  .results .results-card > .results-grid > div:nth-child(1) > strong {
    background-size: var(--sp-result-grid-laurel-1-width)
      var(--sp-result-grid-laurel-height-exact);
    background-position: var(--sp-result-grid-laurel-1-left)
      var(--sp-result-grid-laurel-top-exact);
  }

  .results .results-card > .results-grid > div:nth-child(2) > strong {
    background-size: var(--sp-result-grid-laurel-2-width)
      var(--sp-result-grid-laurel-height-exact);
    background-position: var(--sp-result-grid-laurel-2-left)
      var(--sp-result-grid-laurel-top-exact);
  }

  .results .results-card > .results-grid > div:nth-child(3) > strong {
    background-size: var(--sp-result-grid-laurel-3-width)
      var(--sp-result-grid-laurel-height-exact);
    background-position: var(--sp-result-grid-laurel-3-left)
      var(--sp-result-grid-laurel-top-exact);
  }

  .results .results-card > .results-grid > div > strong > .layered-stat-value {
    position: absolute;
    top: -7.64px;
    width: 105px;
    height: 94px;
    margin: 0;
    font-size: var(--sp-result-grid-number-size);
    line-height: var(--sp-result-grid-number-line-height);
    letter-spacing: var(--sp-result-grid-number-tracking);
  }

  .results
    .results-card
    > .results-grid
    > div
    > strong
    > .layered-stat-value
    > .layered-stat-text {
    height: 94px;
    font-size: var(--sp-result-grid-number-size);
    line-height: var(--sp-result-grid-number-line-height);
    letter-spacing: var(--sp-result-grid-number-tracking);
    white-space: nowrap;
  }

  .results
    .results-card
    > .results-grid
    > div:nth-child(1)
    > strong
    > .layered-stat-value {
    left: 62.69px;
    width: 105px;
  }

  .results
    .results-card
    > .results-grid
    > div:nth-child(1)
    > strong
    > .layered-stat-value
    > .layered-stat-text {
    width: 105px;
  }

  .results
    .results-card
    > .results-grid
    > div:nth-child(2)
    > strong
    > .layered-stat-value {
    left: 79.49px;
    width: 71px;
  }

  .results
    .results-card
    > .results-grid
    > div:nth-child(2)
    > strong
    > .layered-stat-value
    > .layered-stat-text {
    width: 71px;
  }

  .results
    .results-card
    > .results-grid
    > div:nth-child(3)
    > strong
    > .layered-stat-value {
    left: 56.29px;
    width: 105px;
  }

  .results
    .results-card
    > .results-grid
    > div:nth-child(3)
    > strong
    > .layered-stat-value
    > .layered-stat-text {
    width: 105px;
  }

  .results
    .results-card
    > .results-grid
    > div
    > strong
    > .layered-stat-unit-group {
    position: absolute;
    top: 25.05px;
    height: 40px;
    margin: 0;
    line-height: var(--sp-result-grid-unit-line-height);
  }

  .results
    .results-card
    > .results-grid
    > div
    > strong
    > .layered-stat-unit-group
    > .layered-stat-unit {
    position: absolute;
    top: 5.78px;
    left: 0;
    width: 23px;
    height: 34px;
    margin: 0;
    font-family: var(--display);
    font-size: var(--sp-result-grid-unit-size);
    font-weight: 500;
    line-height: var(--sp-result-grid-unit-line-height);
    letter-spacing: var(--sp-result-grid-unit-tracking);
  }

  .results
    .results-card
    > .results-grid
    > div
    > strong
    > .layered-stat-unit-group
    > .layered-stat-unit
    > .layered-stat-unit-text {
    width: 23px;
    height: 34px;
    font-size: var(--sp-result-grid-unit-size);
    line-height: var(--sp-result-grid-unit-line-height);
    letter-spacing: var(--sp-result-grid-unit-tracking);
    white-space: nowrap;
  }

  .results
    .results-card
    > .results-grid
    > div
    > strong
    > .layered-stat-unit-group
    > sup {
    position: absolute;
    top: 0;
    left: 6.4px;
    right: auto;
    bottom: auto;
    width: 12px;
    height: 12px;
    margin: 0;
    color: #888;
    font-family: var(--display);
    font-size: var(--sp-result-grid-note-size);
    font-weight: 900;
    line-height: var(--sp-result-grid-note-line-height);
    letter-spacing: var(--sp-result-grid-note-tracking);
    -webkit-text-fill-color: #888;
    white-space: nowrap;
    transform: none;
  }

  .results
    .results-card
    > .results-grid
    > div:nth-child(1)
    > strong
    > .layered-stat-unit-group {
    left: 170.72px;
    width: 23px;
  }

  .results
    .results-card
    > .results-grid
    > div:nth-child(2)
    > strong
    > .layered-stat-unit-group {
    left: 157.12px;
    width: 23px;
  }

  .results
    .results-card
    > .results-grid
    > div:nth-child(3)
    > strong
    > .layered-stat-unit-group {
    left: 159.52px;
    width: 46px;
  }

  .results
    .results-card
    > .results-grid
    > div:nth-child(3)
    > strong
    > .layered-stat-unit-group
    > .layered-stat-unit {
    width: 46px;
  }

  .results
    .results-card
    > .results-grid
    > div:nth-child(3)
    > strong
    > .layered-stat-unit-group
    > .layered-stat-unit
    > .layered-stat-unit-text {
    width: 46px;
  }

  .results
    .results-card
    > .results-grid
    > div:nth-child(3)
    > strong
    > .layered-stat-unit-group
    > .layered-stat-note--3 {
    left: 17.6px;
  }

  .results
    .results-card
    > .results-grid
    > div:nth-child(3)
    > strong
    > .layered-stat-unit-group
    > .layered-stat-note--4 {
    left: 32px;
  }
}

@media (max-width: 360px) {
  :root {
    --sp-type-en: 12px;
    --sp-support-label-tracking: 1.5px;
    --sp-type-cta-note: 12px;
    --sp-type-result-sub: 46px;
    --sp-result-grid-laurel-width: 38px;
    --sp-result-grid-laurel-height: 88px;
    --sp-type-result-main-narrow: 44px;
    --dialog-option-heading-size: 16px;
    --dialog-button-padding-inline: 12px;
    --dialog-button-font-size: 14px;
    --sp-hero-title-scale: 1;
  }

  .hero .hero-title {
    width: 94.499756vw;
  }

  .catalog .cta-band small {
    white-space: normal;
  }

  .results .section-heading h2 {
    width: 100%;
  }

  .results .results-lead strong {
    font-size: var(--sp-type-result-main-narrow);
  }

  .counseling-option h3 {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
  }

  .logo-track {
    animation: none !important;
    transform: none !important;
  }

  .mobile-menu {
    animation: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}