@layer page {

  

  
  
  .hero {
    position: sticky;
    top: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--color-gray-950);
    color: var(--color-text-inverse);
    font-family: var(--font-body);
    height: 100dvh;
    container-type: size;
  }

  @scope (.hero) {
    :scope {
      .canvas {
        display: contents;
      }

      
      .visual-fade {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, transparent 50.427%, var(--color-gray-950) 89.703%);
        pointer-events: none;
      }
      .visual img {
        position: absolute;
        object-fit: cover;
        pointer-events: none;
      }

      
      .visual {
        position: absolute;
        inset: 0;
        mix-blend-mode: multiply;
      }
      .visual .person-3 {
        left: calc(50% + 27.334cqh);
        translate: -50% 0;
        top: 31.64cqh;
        width: 27.007cqh;
        height: 58.2cqh;
        filter: blur(2px);
      }
      .visual .person-2 {
        left: calc(50% + 6.273cqh);
        translate: -50% 0;
        top: 23.44cqh;
        width: 34.681cqh;
        height: 73.83cqh;
      }
      .visual .person-1 {
        left: calc(50% - 23.598cqh);
        translate: -50% 0;
        top: 8.12cqh;
        width: 48.907cqh;
        height: 104.92cqh;
      }
    }
  }

  
  .copy {
    position: absolute;
    inset-inline: 0;
    
    max-width: 1024px;
    margin-inline: auto;
    top: calc(50% + 23.76cqh);
    translate: 0 -50%;
    z-index: 1;
    padding-inline: var(--spacing-5);
  }

  @scope (.copy) {
    :scope {
      .heading {
        position: relative;
      }
      .art {
        display: flex;
        flex-direction: column;
      }
      .headline-img {
        display: block;
        width: 100%;
        
        aspect-ratio: 333 / 190;
        margin-bottom: -21.3%;
      }
      .tagline-img {
        display: block;
        width: 100%;
        aspect-ratio: 342.0986 / 133.998;
        mix-blend-mode: screen;
      }
    }
  }

  
  
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    color: var(--color-text-inverse);
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3);
    transition: color 0.3s ease;
  }
  
  .header[data-theme='light'] {
    color: var(--color-text-primary);
  }
  @scope (.header) {
    :scope {
      .nav ul {
        display: none;
      }

      .logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-2);
      }
      
      .header-mark.is-pc {
        display: none;
      }
      .logo-caption {
        width: 100px;
        height: auto;
      }
      
      .logo-caption-line {
        transform-box: fill-box;
        transform-origin: 50% 50%;
        animation: logo-caption-stretch 3.6s ease-in-out infinite;
      }
      .logo-caption-u {
        animation: logo-caption-u-move 3.6s ease-in-out infinite;
      }
      .logo-caption-b {
        animation: logo-caption-b-move 3.6s ease-in-out infinite;
      }
    }
  }

  
  .hero-footer {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 20;
    color: var(--color-text-inverse);
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    
    justify-content: flex-end;
    padding: var(--spacing-4);
    transition: color 0.3s ease, opacity 0.4s ease;
  }
  
  .hero-footer[data-theme='light'] {
    color: var(--color-gray-700);
  }
  
  .hero-footer.is-near-footer {
    opacity: 0;
    pointer-events: none;
  }
  @scope (.hero-footer) {
    :scope {
      .recruit-link {
        display: none;
      }
      .scroll-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        
        width: 80px;
        height: 80px;
      }
      .scroll-circle {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        opacity: 0.6;
      }
      .scroll-circle .ring {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        animation: scroll-ring-spin 10s linear infinite;
      }
      .scroll-circle .ring text {
        font-family: var(--font-latin);
        font-size: 11.7px;
        font-weight: var(--font-weight-medium);
        letter-spacing: 2.5px;
        
        fill: currentColor;
      }
      
      .scroll-circle .arrow-viewport {
        position: absolute;
        left: 0;
        top: 50%;
        translate: 0 -50%;
        width: 100%;
        height: 40%;
        overflow: hidden;
      }
      .scroll-circle .arrow {
        position: absolute;
        left: 50%;
        top: 0;
        translate: -50% 0;
        animation: scroll-arrow-move 3.69s linear infinite;
        width: 40%;
        height: 100%;
        
        background-color: currentColor;
        -webkit-mask-image: url('/assets/images/top/hero/scroll-arrow.svg');
        mask-image: url('/assets/images/top/hero/scroll-arrow.svg');
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
      }
      
      .scroll-circle .arrow:nth-of-type(2) { animation-delay: -1.23s; }
      .scroll-circle .arrow:nth-of-type(3) { animation-delay: -2.46s; }
    }
  }

  
  @keyframes logo-caption-stretch {
    0% {
      transform: scaleX(0.1);
      animation-timing-function: ease-out;
    }
    66.667% {
      transform: scaleX(1);
      animation-timing-function: linear;
    }
    77.778% {
      transform: scaleX(1);
      animation-timing-function: ease-in;
    }
    80.556% {
      transform: scaleX(0);
      animation-timing-function: ease-out;
    }
    83.333% {
      transform: scaleX(0.36);
      animation-timing-function: ease-in;
    }
    86.111% {
      transform: scaleX(0.02);
      animation-timing-function: ease-out;
    }
    88.889% {
      transform: scaleX(0.15);
      animation-timing-function: ease-in;
    }
    91.667% {
      transform: scaleX(0.06);
      animation-timing-function: ease-out;
    }
    95% {
      transform: scaleX(0.1);
      animation-timing-function: ease-out;
    }
    100% {
      transform: scaleX(0.1);
    }
  }

  
  @keyframes logo-caption-u-move {
    0% {
      translate: 40.33px 0;
      animation-timing-function: ease-out;
    }
    66.667% {
      translate: 0 0;
      animation-timing-function: linear;
    }
    77.778% {
      translate: 0 0;
      animation-timing-function: ease-in;
    }
    80.556% {
      translate: 44.8px 0;
      animation-timing-function: ease-out;
    }
    83.333% {
      translate: 28.7px 0;
      animation-timing-function: ease-in;
    }
    86.111% {
      translate: 43.9px 0;
      animation-timing-function: ease-out;
    }
    88.889% {
      translate: 38.1px 0;
      animation-timing-function: ease-in;
    }
    91.667% {
      translate: 42.1px 0;
      animation-timing-function: ease-out;
    }
    95% {
      translate: 40.33px 0;
      animation-timing-function: ease-out;
    }
    100% {
      translate: 40.33px 0;
    }
  }

  @keyframes logo-caption-b-move {
    0% {
      translate: -40.33px 0;
      animation-timing-function: ease-out;
    }
    66.667% {
      translate: 0 0;
      animation-timing-function: linear;
    }
    77.778% {
      translate: 0 0;
      animation-timing-function: ease-in;
    }
    80.556% {
      translate: -44.8px 0;
      animation-timing-function: ease-out;
    }
    83.333% {
      translate: -28.7px 0;
      animation-timing-function: ease-in;
    }
    86.111% {
      translate: -43.9px 0;
      animation-timing-function: ease-out;
    }
    88.889% {
      translate: -38.1px 0;
      animation-timing-function: ease-in;
    }
    91.667% {
      translate: -42.1px 0;
      animation-timing-function: ease-out;
    }
    95% {
      translate: -40.33px 0;
      animation-timing-function: ease-out;
    }
    100% {
      translate: -40.33px 0;
    }
  }

  @keyframes scroll-ring-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      
      transform: rotate(-360deg);
    }
  }

  
  @keyframes scroll-arrow-move {
    0% {
      translate: -50% -195%;
    }
    100% {
      translate: -50% 195%;
    }
  }

  @keyframes lead-gradient-pan {
    from {
      background-position: 0% 0%;
    }
    to {
      background-position: 100% 0%;
    }
  }

  
  @media (min-width: 768px) {
    

    @scope (.hero) {
      :scope {
        
        
        .canvas {
          display: block;
          position: absolute;
          left: calc(50% - 720px);
          width: 1440px;
          height: 100%;
        }
        
        
        .visual {
          mask-image: url('/assets/images/top/hero/bg-people-mask.svg');
          mask-mode: luminance;
          mask-position: 0 0;
          mask-size: 100% 100%;
          mask-repeat: no-repeat;
        }
        .visual .person-1 { left: calc(50% - 56.689cqh); translate: 0; top: 4.102cqh; width: 62.402cqh; height: 133.789cqh; }
        .visual .person-2 { left: calc(50% - 9.521cqh); translate: 0; top: 23.633cqh; width: 44.238cqh; height: 94.141cqh; }
        .visual .person-3 { left: calc(50% + 22.217cqh); translate: 0; top: 34.082cqh; width: 34.473cqh; height: 74.219cqh; filter: blur(2px); }
        
        .visual-fade {
          background: linear-gradient(to bottom, transparent 0%, transparent 70%, var(--color-gray-950) 100%);
        }
      }
    }

    .copy {
      
      top: 50%;
      
      translate: 0 -60.4194%;
      
      max-width: min(1024px, calc(144.93dvh + 2 * var(--spacing-5)));
    }
    @scope (.copy) {
      :scope {
        .art {
          display: block;
          position: relative;
        }
        .headline-img {
          aspect-ratio: 960 / 548.16;
          margin-bottom: 0;
        }
        
        .tagline-img {
          position: absolute;
          left: 14%;
          top: 62.52%;
          width: 85%;
          aspect-ratio: 816 / 319.68;
        }
      }
    }

    .header {
      
      padding: var(--spacing-5);
    }

    
    @scope (.header) {
      :scope {
        .nav {
          display: flex;
          align-items: center;
        }
        .nav ul {
          display: flex;
          align-items: center;
          gap: 24.77px;
        }
        .nav a {
          font-family: var(--font-accent);
          font-weight: var(--font-weight-medium);
          font-size: 12.38px;
          text-transform: uppercase;
          transform: rotate(-15deg) skewX(-15deg);
          display: inline-block;
        }
      }
    }

    .hero-footer {
      position: fixed;
      inset: auto 0 0 0;
      height: 192px;
      padding: var(--spacing-5);
      
      justify-content: space-between;
      z-index: 20;
    }
    @scope (.hero-footer) {
      :scope {
        .recruit-link {
          display: inline-flex;
          align-items: center;
          gap: var(--spacing-3);
          height: 64px;
          padding-inline: var(--spacing-4);
          border: var(--border-width-heavy) solid var(--color-brand-green);
          border-radius: var(--radius-2xl);
          backdrop-filter: blur(16px);
          font-family: var(--font-accent);
          font-weight: var(--font-weight-bold);
          font-size: var(--text-md);
          text-transform: uppercase;
          opacity: 0; 
        }
        .recruit-link .icon { width: 20px; height: 20px; }
        .scroll-link { width: 144px; height: 144px; }
      }
    }
  }

  @media (min-width: 1280px) {
    .header {
      
      height: 160px;
      padding-inline: var(--spacing-7);
    }
    @scope (.header) {
      :scope {
        
        .header-mark.is-tb { display: none; }
        .header-mark.is-pc { display: inline-block; }
        .logo-caption { width: 133px; }

        .nav {
          display: flex;
          align-items: center;
        }
        .nav ul {
          display: flex;
          align-items: center;
          gap: var(--spacing-5);
        }
        .nav a {
          font-family: var(--font-accent);
          font-weight: var(--font-weight-medium);
          font-size: var(--text-base);
          text-transform: uppercase;
          transform: rotate(-15deg) skewX(-15deg);
          display: inline-block;
        }
      }
    }

    .hero-footer {
      position: fixed;
      inset: auto 0 0 0;
      height: 192px;
      padding: var(--spacing-5);
      z-index: 20;
    }
    @scope (.hero-footer) {
      :scope {
        .recruit-link {
          display: inline-flex;
          align-items: center;
          gap: var(--spacing-3);
          height: 64px;
          padding-inline: var(--spacing-4);
          border: var(--border-width-heavy) solid var(--color-brand-green);
          border-radius: var(--radius-2xl);
          backdrop-filter: blur(16px);
          font-family: var(--font-accent);
          font-weight: var(--font-weight-bold);
          font-size: var(--text-md);
          text-transform: uppercase;
          opacity: 0; 
        }
        .recruit-link .icon { width: 20px; height: 20px; }
        .scroll-link { width: 144px; height: 144px; }
      }
    }
  }

  

  .mission {
    
    position: relative;
    
    height: 200dvh;
  }

  @scope (.mission) {
    :scope {
      .sticky-area {
        
        position: sticky;
        top: 0;
        height: 100dvh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-block: var(--spacing-4);
        
        padding-inline: var(--spacing-2);
      }
      .panel {
        width: 100%;
        max-width: 800px;
        border: var(--border-width-thin) solid #333;
        backdrop-filter: blur(32px);
        -webkit-backdrop-filter: blur(32px);
      }
      .bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-2);
        padding: var(--spacing-1) var(--spacing-2);
        background: rgba(0, 0, 0, 0.8);
        border-block-end: var(--border-width-thin) solid #333;
      }
      .bar-icon {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 18px;
        height: 18px;
        overflow: hidden;
      }
      
      .bar-icon:not(.bar-icon-active) {
        border: var(--border-width-thin) solid var(--color-gray-600);
      }
      .bar-icon img { display: block; width: 100%; height: 100%; }
      
      .bar-icon:not(.bar-icon-active) img {
        position: absolute;
        top: -1px;
        left: -1px;
        width: 18px;
        height: 18px;
        max-width: none;
      }
      .bar-line {
        flex: 1 0 0;
        min-width: 0;
        height: 18px;
        -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px 4px);
        mask-image: repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px 4px);
      }
      
      .bar-line-start {
        background: linear-gradient(to right, #00aaff 0%, #ff41de 50%, #ffcc00 100%);
      }
      
      .bar-line-end {
        background: linear-gradient(to right, #00fe48 0%, #f7ff00 50%, #ff41de 100%);
      }
      .bar-title {
        flex-shrink: 0;
        font-family: var(--font-body);
        font-weight: var(--font-weight-bold);
        font-size: var(--text-sm);
        line-height: 2;
        text-align: center;
        color: var(--color-text-inverse);
        white-space: nowrap;
      }
      .body {
        display: flex;
        
        gap: var(--spacing-4);
        padding: var(--spacing-4);
        background: rgba(0, 0, 0, 0.8);
      }
      .line-numbers {
        flex-shrink: 0;
        margin: 0;
        padding: 0;
        list-style: none;
        font-family: var(--font-accent);
        
        font-size: var(--text-xs);
        line-height: 2;
        text-align: right;
        color: var(--color-gray-700);
      }
      .code {
        flex: 1 0 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        
        gap: var(--spacing-4);
        font-family: var(--font-body);
        
        font-size: var(--text-base);
        line-height: 1.5;
        
        letter-spacing: 1.6px;
        color: var(--color-text-inverse);
        
        background-image: var(--gradient-rainbow);
        background-size: 100% 100%;
        background-clip: text;
        -webkit-background-clip: text;
      }
      .code .line { margin: 0; }
      .code .line.block p { margin: 0; }
      .code .gradient {
        color: transparent;
      }
    }
  }

  @media (min-width: 768px) {
    @scope (.mission) {
      :scope {
        
        .sticky-area {
          padding-inline: var(--spacing-4);
        }
        .body {
          gap: var(--spacing-5);
          padding: var(--spacing-5);
        }
        .line-numbers {
          font-size: 15px;

          
          li:nth-child(n + 19) { display: none; }
        }
        .code {
          gap: 30px;
          font-size: var(--text-lg);
          letter-spacing: 2px;
        }
      }
    }
  }

  

  .services {
    
    position: relative;
    min-height: 100dvh;
    background: var(--color-bg-primary);
    font-family: var(--font-body);
    
    padding-block: 192px var(--spacing-10);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-9);
  }

  @scope (.services) {
    :scope {
      .intro {
        display: flex;
        flex-direction: column;
        
        align-items: flex-start;
        gap: var(--spacing-7);
        text-align: left;
      }
      .title {
        position: relative;
        overflow: hidden;
        font-family: var(--font-heading);
        font-weight: var(--font-weight-bold);
        
        font-size: var(--text-2xl);
        line-height: 1;
        
        letter-spacing: 2.56px;
        text-transform: uppercase;
        
        color: var(--color-text-primary);
      }
      .title-mark {
        position: absolute;
        
        left: -3.551px;
        top: -8.941px;
        
        filter: blur(8px);
        
        transform-origin: 99.45px 29.011px;
        scale: 0.5;
      }
      .lead-block {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-5);
      }
      
      .lead-block .lead { font-size: var(--text-xl); line-height: 1.5; }
      
      .lead-block .body { font-size: var(--text-base); line-height: 1.5; }

      .list {
        display: flex;
        flex-direction: column;
        width: 100%;
      }
      .item {
        border-block: var(--border-width-thin) solid var(--color-border-primary);
        margin-block-start: -1px;
      }
      
      .item-inner {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: 'heading' 'body' 'photo';
        row-gap: var(--spacing-2);
        padding-inline: var(--spacing-5);
        padding-block: var(--spacing-4) 0;
      }
      .item-inner > .photo { grid-area: photo; }
      .heading {
        grid-area: heading;
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
        white-space: nowrap;
      }
      .item-inner > .body {
        grid-area: body;
        font-size: var(--text-base);
        line-height: 1.5;
        color: var(--color-text-primary);
      }
      .heading > .no {
        font-family: var(--font-number);
        font-size: var(--text-lg);
        line-height: 1.5;
        color: var(--color-text-muted);
      }
      .heading > .title {
        font-family: var(--font-body);
        
        font-size: 28px;
        font-weight: var(--font-weight-semibold);
        line-height: 1.5;
        
        text-align: right;
        color: var(--color-text-primary);
      }
      
      .photo {
        container-type: inline-size;
        position: relative;
        width: 100%;
        aspect-ratio: 400 / 209;
        overflow: hidden;
      }
      .photo img {
        position: absolute;
        
        max-width: none;
        object-fit: cover;
        mask-repeat: no-repeat;
        mask-mode: alpha;
      }

      .platforms {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-7);
        width: 100%;
      }
      .platforms .label { font-family: var(--font-accent); font-weight: var(--font-weight-semibold); font-size: var(--text-xl); text-transform: uppercase; text-align: center; }
      .grid {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-6);
        width: 100%;
        overflow: hidden;
      }
      .track {
        display: flex;
        flex-wrap: nowrap;
        width: max-content;
        animation: services-marquee-left 64s linear infinite;
      }
      .track[data-direction='right'] {
        animation-name: services-marquee-right;
      }
      .row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--spacing-9);
        padding-inline-end: var(--spacing-9);
      }
      .row img { width: auto; height: 32px; }
    }
  }

  @media (min-width: 768px) {
    @scope (.services) {
      :scope {
        
        
        padding-block-start: var(--spacing-10);
        .intro { align-items: center; text-align: center; }
        .title { font-size: var(--text-5xl); letter-spacing: 5.12px; }
        .title-mark { scale: 1; }
        .lead-block .lead { font-size: var(--text-3xl); }
        .lead-block .body { font-size: var(--text-lg); }

        
        .item-inner {
          grid-template-columns: 256px 1fr;
          grid-template-areas: 'photo heading' 'photo body';
          align-items: end;
          column-gap: var(--spacing-6);
          row-gap: var(--spacing-1);
          padding-block: 0;
        }
        .heading { gap: var(--spacing-4); padding-top: var(--spacing-3); }
        .item-inner > .body { padding-bottom: var(--spacing-3); font-size: var(--text-lg); }
        .heading > .no { font-size: var(--text-xl); }
        .heading > .title { font-size: var(--text-4xl); }
      }
    }
  }

  @keyframes services-marquee-left {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  @keyframes services-marquee-right {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
  }

  
  @media (min-width: 1024px) {
    @scope (.services) {
      :scope {
        .item-inner {
          grid-template-columns: 400px auto 1fr;
          grid-template-areas: 'photo no title' 'photo no body';
          align-items: center;
          
          row-gap: var(--spacing-1);
          
          max-width: 1264px;
        }
        .heading { display: contents; }
        .heading > .no { grid-area: no; }
        
        .heading > .title {
          grid-area: title;
          align-self: end;
          
          justify-self: start;
        }
        .item-inner > .body { grid-area: body; padding-bottom: 0; align-self: start; }
        
        .photo { margin-top: 16px; }
      }
    }
  }

  @media (min-width: 1280px) {
    @scope (.services) {
      :scope {
        .row img { height: 55px; }
      }
    }
  }

  

  .about {
    
    position: relative;
    min-height: 100dvh;
    background: var(--color-bg-secondary);
    font-family: var(--font-body);
    
    padding-block: 192px var(--spacing-10);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-9);
  }

  @scope (.about) {
    :scope {
      
      & > .l-container { display: flex; flex-direction: column; gap: var(--spacing-6); }

      .intro {
        display: flex;
        flex-direction: column;
        
        align-items: flex-start;
        gap: var(--spacing-6);
        text-align: left;
      }
      .intro .title {
        position: relative;
        overflow: hidden;
        font-family: var(--font-heading);
        font-weight: var(--font-weight-bold);
        
        font-size: var(--text-2xl);
        line-height: 1;
        
        letter-spacing: 2.56px;
        text-transform: uppercase;
        
        color: var(--color-text-primary);
      }
      .intro .title-mark {
        position: absolute;
        
        left: -3.556px;
        top: -2.02px;
        filter: blur(8px);
        
        transform-origin: 87.036px 19.76px;
        scale: 0.5;
      }
      
      .intro .lead { font-size: var(--text-xl); }
      
      .intro .body { font-size: var(--text-base); line-height: 2; }

      .badges {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        
        gap: 0;
      }
      .badge {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        gap: var(--spacing-4);
        
        width: 338px;
        height: 338px;
        border-radius: var(--radius-full);
        
        border: 3px solid transparent;
        text-align: center;
      }
      
      .badge:first-child {
        
        margin-block-end: -48px;
      }
      
      .badge::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: var(--radius-full);
        
        padding: 3px;
        background: var(--gradient-rainbow);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        pointer-events: none;
      }
      
      .badge:last-child::before {
        background: conic-gradient(
          from 0deg,
          #828282 0deg,
          #bebebe 15deg,
          #a3a3a3 30deg,
          #747474 45deg,
          #505050 59deg,
          #393939 74deg,
          #333333 90deg,
          #393939 105deg,
          #505050 120deg,
          #747474 135deg,
          #a3a3a3 150deg,
          #bebebe 165deg,
          #828282 180deg,
          #464646 195deg,
          #5c5c5c 210deg,
          #949494 225deg,
          #bfbfbf 240deg,
          #dadada 254deg,
          #e3e3e3 270deg,
          #dadada 285deg,
          #c0c0c0 300deg,
          #959595 315deg,
          #5d5d5d 330deg,
          #464646 345deg,
          #828282 360deg
        );
      }
      
      .badge-mark { transform: scale(0.9); }
      
      .badge-icon { width: 137px; height: 36px; }
      .badge-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        gap: var(--spacing-1);
      }
      
      .badge-title { font-weight: var(--font-weight-semibold); font-size: var(--text-lg); }
      
      .badge-lead { font-size: var(--text-sm); }
      
      .cross { display: block; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 16px; height: 16px; }

      
      .member { display: flex; flex-direction: column; gap: var(--spacing-6); overflow-x: hidden; }
      .member > .l-container { display: flex; flex-direction: column; gap: var(--spacing-3); }
      .member .label { font-family: var(--font-accent); font-weight: var(--font-weight-semibold); font-size: var(--text-xl); text-transform: uppercase; }
      .member .lead { font-size: var(--text-lg); line-height: 2; }
      .member-list {
        display: flex;
        gap: var(--spacing-5);
        overflow-x: auto;
        padding-inline: var(--spacing-3);
      }
      .member-list .card {
        flex: 0 0 280px;
        
        padding: 0;
        border-radius: 0;
        box-shadow: none;
      }
      .member-list .photo { position: relative; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; background: var(--color-gray-300); }
      
      .member-list .card-texture {
        position: absolute;
        left: -3.6163%;
        top: -2.9619%;
        width: 117.675%;
        height: 29.5659%;
        max-width: none;
        object-fit: cover;
        transform: rotate(-30deg);
      }
      .member-list .glass {
        position: absolute;
        inset: 0;
        backdrop-filter: blur(75px);
        background: rgba(255, 255, 255, 0.01);
      }
      .member-list .portrait-frame {
        position: absolute;
      }
      .member-list .portrait {
        position: absolute;
        
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        
        max-width: none;
        object-fit: cover;
      }
      
      .member-list .card:nth-child(1) .portrait-frame {
        left: 45.7434%;
        top: 40%;
        width: 58.3647%;
        height: 98.6091%;
      }
      .member-list .card:nth-child(1) .portrait {
        inset: auto;
        left: 6.89%;
        top: 2.04%;
        width: 86.22%;
        height: 95.92%;
        
        transform: rotate(5deg);
      }
      .member-list .card:nth-child(2) .portrait-frame {
        left: 49.1134%;
        top: 43.3334%;
        width: 44.8985%;
        height: 56.6666%;
      }
      .member-list .card:nth-child(3) .portrait-frame {
        left: 43.125%;
        top: 44.0625%;
        width: 48.125%;
        height: 65.625%;
      }
      .member-list .card:nth-child(4) .portrait-frame {
        left: 48.125%;
        top: 44.0625%;
        width: 47.5%;
        height: 63.125%;
      }
      .member-list .text { display: flex; flex-direction: column; gap: var(--spacing-2); padding-block: var(--spacing-3); }
      .member-list .row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-2); }
      
      .member-list .name { padding-top: var(--spacing-2); }
      .member-list .name .ja { font-size: var(--text-lg); }
      .member-list .name .en { font-family: var(--font-latin); font-size: var(--text-xs); color: var(--color-text-muted-alt); text-transform: uppercase; }
      .member-list .role { font-size: var(--text-xs); white-space: nowrap; }
      .member-list .bio { font-size: var(--text-sm); line-height: 1.7; }

      
      
      .profile-outer {
        position: relative;
        
        overflow: hidden;
      }
      
      .profile-outer > .l-container {
        max-width: none;
        padding-inline: 0;
      }
      .profile {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--color-text-inverse);
        
        min-height: 600px;
        display: flex;
        align-items: center;
        box-shadow: 0 0 0 9999px transparent;
        transition: background-color 0.8s ease, box-shadow 0.8s ease;
      }
      
      .profile-outer.is-revealed .profile {
        background: rgba(0, 0, 0, 0.7);
      }
      .profile-outer.is-revealed .profile {
        box-shadow: 0 0 0 9999px var(--color-bg-secondary);
      }
      
      .profile-bg {
        display: block;
        position: absolute;
        inset: 0 0 auto 0;
        height: 100%;
        overflow: hidden;
        background: var(--color-bg-secondary);
        transition: background-color 0.8s ease;
      }
      .profile-outer.is-revealed .profile-bg {
        background: var(--color-black);
      }
      
      .profile-collage {
        position: absolute;
        top: 300px;
        left: 50%;
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 2149.87px;
        overflow: hidden;
        transform: translate(-50%, -50%) rotate(-20deg);
        transform-origin: center;
      }
      .collage-row {
        display: flex;
        gap: 4px;
        width: max-content;
        animation: services-marquee-left 40s linear infinite;
      }
      .collage-row:nth-child(even) { animation-name: services-marquee-right; }
      .collage-row img { height: 320px; width: auto; object-fit: cover; }
      
      .content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-5);
        padding-inline: var(--spacing-5);
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s ease, transform 0.7s ease;
        transition-delay: 0.3s;
      }
      .profile-outer.is-revealed .content {
        opacity: 1;
        transform: translateY(0);
      }
      
      .content .label { font-family: var(--font-accent); font-weight: var(--font-weight-semibold); font-size: var(--text-lg); text-transform: uppercase; }
      
      .table { display: flex; flex-direction: column; gap: var(--spacing-3); font-size: var(--text-sm); }
      .table .row { display: flex; gap: var(--spacing-3); }
      .table dt { flex: 0 0 96px; }
    }
  }

  
  @media (max-width: 1439px) {
    @scope (.about) {
      :scope {
        .profile { border-radius: 0; }
      }
    }
  }

  @media (min-width: 768px) {
    @scope (.about) {
      :scope {
        
        
        padding-block-start: var(--spacing-10);
        .intro { align-items: center; text-align: center; }
        .intro .title { font-size: var(--text-5xl); letter-spacing: 5.12px; }
        .intro .title-mark { scale: 1; }
        .intro .lead { font-size: var(--text-3xl); }
        .intro .body { font-size: var(--text-lg); }

        
        .badge {
          width: 480px;
          height: 480px;
          gap: var(--spacing-6);
          border-width: var(--border-width-heavy);
        }
        .badge::before { padding: var(--border-width-heavy); }
        .badge:first-child { margin-block-end: -96px; }
        .badge-mark { transform: scale(1); }
        .badge-icon { width: 164px; height: 40px; }
        .badge-title { font-size: var(--text-xl); }
        .badge-lead { font-size: var(--text-md); }
        .cross { width: 28px; height: 28px; }

        
        .content {
          flex-direction: row;
          align-items: flex-start;
          gap: var(--spacing-7);
          max-width: 768px;
          margin-inline: auto;
          padding-inline: var(--spacing-5);
        }
        .content .label { font-size: var(--text-xl); }
        .table { font-size: var(--text-base); }
        .table dt { flex-basis: 128px; }
      }
    }
  }

  
  @media (min-width: 1024px) {
    @scope (.about) {
      :scope {
        .badges { flex-direction: row; justify-content: center; }
        .badge:first-child { margin-block-end: 0; margin-inline-end: -96px; }
      }
    }
  }

  @media (min-width: 1280px) {
    @scope (.about) {
      :scope {
        
        & > .l-container { max-width: 1264px; padding-inline: var(--spacing-5); }

        
        .member > .l-container { max-width: 1264px; padding-inline: var(--spacing-5); }

        
        .member-sticky { width: 100%; overflow: visible; }
        .member-list {
          overflow: visible;
          flex-wrap: nowrap;
          width: max-content;
          
          padding-inline: 120px;
          transform: translateX(var(--member-slide, 0px));
        }
        
        .member-list .card { flex-basis: 320px; }
      }
    }
  }

  
  @media (min-width: 1441px) {
    @scope (.about) {
      :scope {
        .member-sticky { max-width: 1200px; margin-inline: auto; }
        .member-list { padding-inline: 0; }
        .member-list .card { flex-basis: 276px; }
      }
    }
  }

  
  @media (min-width: 1440px) {
    @scope (.about) {
      :scope {
        
        padding-block-end: 0;

        
        .profile-outer > .l-container { max-width: 1264px; padding-inline: var(--spacing-5); }

        
        .profile-outer { padding-block-end: var(--spacing-10); }

        
        .profile { height: 600px; }

        
        .content { padding-block: var(--spacing-6); }
      }
    }
  }

  

  .recruit {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--color-gray-150);
    font-family: var(--font-body);
    color: var(--color-text-inverse);
  }

  @scope (.recruit) {
    :scope {
      
      .blobs, .visual { position: absolute; inset: 0; }
      .blob { position: absolute; }
      
      .blob-orange { left: 89px; top: 720px; width: 530px; height: 530px; }
      .blob-pink { left: 270px; top: -16px; width: 592px; height: 592px; }
      .blob-green { left: -808px; top: 175px; width: 810px; height: 810px; }
      .blob-blue { left: 523px; top: 236px; width: 849px; height: 849px; }
      
      .blobs-blur { position: absolute; inset: 0; backdrop-filter: blur(128px); background: rgba(255, 255, 255, 0.01); }
      
      .visual {
        inset: auto;
        left: 50%;
        top: -1.58px;
        width: 1362px;
        height: 1341.58px;
        transform: translateX(-50%);
      }
      .visual .photo { position: absolute; object-fit: cover; }
      
      .photo-frame-1 { position: absolute; left: 358.35px; top: 0; width: 382px; height: 403px; }
      
      .visual .photo-1 {
        inset: auto;
        left: 16.125%;
        top: 10.8125%;
        width: 67.75%;
        height: 78.375%;
        transform: translateY(calc(var(--recruit-parallax, 0px) * 0.22)) rotate(-30deg);
        filter: blur(2px);
      }
      .visual .photo-2 {
        left: 0;
        top: 130.58px;
        width: 482px;
        height: 722px;
        transform: translateY(calc(var(--recruit-parallax, 0px) * 0.26)) rotate(180deg) scaleY(-1);
      }
      
      .visual .photo-3 {
        left: 562px;
        top: 265.58px;
        width: 800px;
        height: 1076px;
        transform: translateY(calc(var(--recruit-parallax, 0px) * 0.32));
      }
      
      .overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: var(--color-overlay-black-70);
        display: flex;
        flex-direction: column;
        
        align-items: flex-start;
        justify-content: center;
        gap: var(--spacing-6);
        padding: var(--spacing-8) var(--spacing-3);
        text-align: left;
      }
      .title {
        font-family: var(--font-heading);
        font-weight: var(--font-weight-bold);
        
        font-size: var(--text-2xl);
        letter-spacing: 2.56px;
        text-transform: uppercase;
      }
      
      .lead { font-size: var(--text-xl); line-height: 1.5; }
      .positions {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-3);
        width: 100%;
        max-width: 768px;
        list-style: none;
      }
      .position {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
        width: 100%;
        
        padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-4);
        border: var(--border-width-thick) solid transparent;
        border-radius: var(--radius-lg);
        backdrop-filter: blur(16px);
        background: rgba(0, 0, 0, 0.05);
        color: var(--color-text-inverse);
        text-align: left;
      }
      
      .position::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: var(--radius-lg);
        padding: var(--border-width-thick);
        background: var(--gradient-rainbow);
        background-size: 200% 200%;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        animation: lead-gradient-pan 5s ease-in-out infinite alternate;
        pointer-events: none;
      }
      .position .text { flex: 1 0 0; display: flex; flex-direction: column; gap: var(--spacing-1); min-width: 0; }
      
      .position .desc { font-size: var(--text-sm); line-height: 1.5; }
      
      .position .role { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); line-height: 1.5; }
      .position .icon { flex-shrink: 0; width: 16px; height: 16px; }
    }
  }

  
  @media (min-width: 768px) {
    .recruit { height: 1024px; }
    @scope (.recruit) {
      :scope {
        .blob-orange { left: 539px; }
        .blob-pink { left: 720px; }
        .blob-green { left: -358px; }
        .blob-blue { left: 973px; }
        .overlay {
          position: absolute;
          inset: 0;
          align-items: center;
          gap: var(--spacing-7);
          padding: 0;
          text-align: center;
        }
        .title { font-size: var(--text-5xl); letter-spacing: 5.12px; }
        .lead { font-size: var(--text-3xl); }
        .positions { gap: var(--spacing-5); }
        .position {
          gap: var(--spacing-5);
          padding: var(--spacing-5);
          border-width: var(--border-width-heavy);
          border-radius: var(--radius-xl);
        }
        .position::before {
          border-radius: var(--radius-xl);
          padding: var(--border-width-heavy);
        }
        .position .desc { font-size: var(--text-base); }
        .position .role { font-size: var(--text-2xl); }
        .position .icon { width: 24px; height: 24px; }
      }
    }
  }

  

  .contact {
    
    position: relative;
    min-height: 100dvh;
    background: var(--color-gray-950);
    color: var(--color-text-inverse);
    font-family: var(--font-body);
    
    padding-block: var(--spacing-10);
    
    padding-bottom: calc(var(--spacing-10) + (100% - var(--spacing-4) * 2) / 6);
  }

  @scope (.contact) {
    :scope {
      .inner { display: flex; flex-direction: column; max-width: 768px; }

      .link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-1);
        padding: var(--spacing-6) var(--spacing-7);
        border: var(--border-width-heavy) solid var(--color-text-inverse);
        border-radius: var(--radius-xl);
        color: var(--color-text-inverse);
        font-family: var(--font-heading);
        font-weight: var(--font-weight-bold);
        font-size: var(--text-3xl);
        line-height: 1;
        letter-spacing: 2.88px;
        text-transform: uppercase;
      }
      .link .icon { width: 28px; height: 28px; }
    }
  }

  
  .footer-sentinel {
    height: 4px;
  }

  

  .site-footer {
    
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    translate: 0 100%;
    transition: translate 0.5s ease-out;
    overflow: hidden;
    container-type: inline-size;
    
    padding-inline: var(--spacing-4);
    
    padding-top: calc((100% - var(--spacing-4) * 2) / 6);
    color: var(--color-text-inverse);
  }

  @scope (.site-footer) {
    :scope {
      
      --mark-anchor-x: 48.3333%; 
      .mark {
        display: block;
        position: absolute;
        left: 50%;
        top: 0;
        transform-origin: var(--mark-anchor-x) top;
        transform: scale(calc(100cqw / 1392px));
        translate: calc(var(--mark-anchor-x) * -1) 30%;
        opacity: 0;
        
        transition: translate 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.65s ease-out;
      }
      .copyright {
        position: absolute;
        right: var(--spacing-4);
        bottom: var(--spacing-4);
        z-index: 1;
        font-family: var(--font-latin);
        font-size: var(--text-xs);
        letter-spacing: 1px;
      }
    }
  }

  .site-footer.is-visible {
    translate: 0 0;
  }

  .site-footer.is-visible .mark {
    translate: calc(var(--mark-anchor-x) * -1) 0;
    opacity: 1;
  }
}