:root {
      --navy: #06245c;
      --blue: #1689f5;
      --red: #ef1821;
      --orange: #ff8b0b;
      --green: #20b959;
      --pink: #eb2d79;
      --teal: #08bea9;
      --soft-shadow: 0 16px 40px rgba(12, 42, 96, .08);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--navy);
      background: #fff;
      font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    button, a { -webkit-tap-highlight-color: transparent; }

    .site-header {
      height: 64px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e9edf5;
      background: rgba(255, 255, 255, .96);
      position: sticky;
      top: 0;
      z-index: 20;
    }
    .header-inner {
      width: min(100% - 54px, 1120px);
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .logo {
      display: inline-flex;
      align-items: center;
      line-height: 0;
    }
    .logo img { display: block; width: 82px; height: auto; }
    .logo i { font-style: normal; }
    .logo i:nth-child(1) { color: #f22b1c; }
    .logo i:nth-child(2) { color: #f6b219; }
    .logo i:nth-child(3) { color: #27af64; }
    .logo i:nth-child(4) { color: #ea6680; }
    .logo i:nth-child(5) { color: #087bdc; }
    .nav { display: flex; align-items: center; gap: 34px; font-size: 13px; font-weight: 700; }
    .nav a { transition: color .2s; }
    .nav a:hover { color: var(--blue); }
    .nav .contact-link {
      color: #fff;
      background: var(--red);
      padding: 12px 24px;
      border-radius: 999px;
      box-shadow: 0 6px 15px rgba(239, 24, 33, .18);
    }
    .nav .contact-link:hover { color: #fff; background: #d50e17; }

    .hero {
      height: calc(100vh - 64px);
      height: calc(100svh - 64px);
      min-height: calc(100vh - 64px);
      min-height: calc(100svh - 64px);
      overflow: hidden;
      position: relative;
      background:
        radial-gradient(circle at 13% 70%, rgba(0, 213, 255, .11), transparent 26%),
        radial-gradient(circle at 82% 27%, rgba(110, 85, 255, .12), transparent 29%),
        radial-gradient(circle at 57% 96%, rgba(20, 137, 245, .08), transparent 24%),
        #fff;
    }
    #ai-network {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: .45;
      pointer-events: none;
    }
    .hero-inner {
      width: min(100% - 66px, 1120px);
      height: 100%;
      min-height: 0;
      margin: auto;
      padding-top: clamp(52px, 8vh, 92px);
      padding-bottom: clamp(52px, 8vh, 92px);
      display: grid;
      grid-template-columns: 44% 56%;
      align-items: center;
      position: relative;
      z-index: 2;
    }
    .hero-copy { padding: clamp(18px, 3vh, 38px) 0; position: relative; z-index: 2; }
    .hero h1 {
      margin: 0 0 27px;
      font-size: 80px;
      line-height: 1.32;
      letter-spacing: .04em;
      font-weight: 800;
      white-space: nowrap;
    }
    .hero h1 .color-word {
      background: linear-gradient(90deg, #ed0d25 0 12%, #f0348c 30%, #17c69e 70%, #11a3cf 100%);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      filter: drop-shadow(0 7px 16px rgba(22, 160, 196, .12));
    }
    .ai-kicker {
      width: max-content;
      margin: -20px 0 18px;
      padding: 8px 13px 8px 10px;
      display: flex;
      align-items: center;
      gap: 9px;
      border: 1px solid rgba(21, 137, 239, .20);
      border-radius: 999px;
      color: #126ec6;
      background: rgba(255, 255, 255, .68);
      box-shadow: 0 8px 24px rgba(17, 108, 206, .08), inset 0 0 0 1px rgba(255,255,255,.8);
      backdrop-filter: blur(10px);
      font-family: Arial, sans-serif;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .16em;
    }
    .ai-kicker::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #13c8ca;
      box-shadow: 0 0 0 5px rgba(19,200,202,.11), 0 0 16px #13c8ca;
      animation: aiPulse 2.2s ease-in-out infinite;
    }
    .lead { margin: 0 0 34px; font-size: 16px; line-height: 2.15; font-weight: 700; letter-spacing: .01em; }
    .actions { display: flex; gap: 21px; }
    .button {
      min-width: 164px;
      padding: 15px 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 22px;
      border-radius: 999px;
      border: 1.5px solid currentColor;
      font-size: 14px;
      font-weight: 800;
      transition: transform .2s, box-shadow .2s;
    }
    .button:hover { transform: translateY(-2px); box-shadow: 0 9px 18px rgba(15, 56, 113, .12); }
    .button::after { content: "›"; font-size: 19px; line-height: 0; }
    .button.primary { color: #fff; background: var(--red); border-color: var(--red); }
    .button.outline { color: var(--blue); background: #fff; }
    .hero .button {
      min-width: 184px;
      padding: 17px 30px;
      gap: 25px;
      font-size: 15px;
    }

    .hero-art {
      height: 440px;
      position: relative;
      transform: translateX(25px);
    }
    .scroll-cue {
      position: absolute;
      left: 50%;
      bottom: 13px;
      z-index: 7;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      color: #126ec6;
      transform: translateX(-50%);
      font: 800 9px/1 Arial, sans-serif;
      letter-spacing: .22em;
    }
    .scroll-cue i {
      width: 1px;
      height: 27px;
      overflow: hidden;
      position: relative;
      display: block;
      background: rgba(18, 110, 198, .18);
    }
    .scroll-cue i::after {
      content: "";
      position: absolute;
      width: 1px;
      height: 13px;
      left: 0;
      top: -13px;
      background: linear-gradient(#08bea9, #1689f5);
      animation: scrollLine 1.8s ease-in-out infinite;
    }

    .feature-slider {
      --feature-slide-width: 400px;
      --feature-gap: 24px;
      width: 100%;
      padding-top: 60px;
      overflow: hidden;
      position: relative;
      background: #fff;
    }
    .feature-slider__stage {
      position: relative;
    }
    .feature-slider__control {
      width: 48px;
      height: 48px;
      padding: 0;
      display: grid;
      place-items: center;
      border: 1px solid rgba(6, 36, 92, .22);
      border-radius: 50%;
      color: var(--navy);
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 8px 22px rgba(6, 36, 92, .12);
      font: 800 18px/1 Arial, sans-serif;
      cursor: pointer;
      transition: color .2s ease, background .2s ease, transform .2s ease;
    }
    .feature-slider__control:hover {
      color: #fff;
      background: var(--navy);
    }
    .feature-slider__control--prev,
    .feature-slider__control--next {
      width: 64px;
      height: 112px;
      position: absolute;
      z-index: 5;
      top: 50%;
      border: 0;
      border-radius: 0;
      color: var(--navy);
      background: rgba(255, 255, 255, .82);
      box-shadow: none;
      font-size: 44px;
      font-weight: 400;
      transform: translateY(-50%);
      backdrop-filter: blur(5px);
    }
    .feature-slider__control--prev { left: 0; }
    .feature-slider__control--next { right: 0; }
    .feature-slider__control--prev:hover,
    .feature-slider__control--next:hover {
      transform: translateY(calc(-50% - 2px));
    }
    .feature-slider__control--autoplay {
      width: 44px;
      height: 32px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      font-size: 14px;
    }
    .feature-slider__control:focus-visible,
    .feature-slider__dot:focus-visible,
    .feature-banner:focus-visible {
      outline: 3px solid var(--blue);
      outline-offset: 4px;
    }
    .feature-slider__viewport {
      width: 100%;
      overflow-x: auto;
      overflow-y: clip;
      overscroll-behavior-inline: contain;
      scrollbar-width: none;
      scroll-snap-type: x mandatory;
    }
    .feature-slider__viewport::-webkit-scrollbar { display: none; }
    .feature-slider__track {
      width: max-content;
      padding-inline: calc(50vw - 200px);
      display: flex;
      align-items: center;
      gap: var(--feature-gap);
    }
    .feature-banner {
      width: var(--feature-slide-width);
      aspect-ratio: 16 / 9;
      overflow: hidden;
      position: relative;
      flex: 0 0 auto;
      display: block;
      border: 1px solid rgba(6, 36, 92, .14);
      border-radius: 12px;
      scroll-snap-align: center;
      isolation: isolate;
      opacity: .46;
      transform: scale(.88);
      box-shadow: 0 10px 26px rgba(6, 36, 92, .08);
      transition: opacity .38s ease, transform .38s cubic-bezier(.2, .7, .2, 1), box-shadow .38s ease;
    }
    .feature-banner.is-active {
      z-index: 2;
      opacity: 1;
      transform: scale(1);
      box-shadow: 0 18px 42px rgba(6, 36, 92, .16);
    }
    .feature-banner img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
    }
    .feature-banner.is-active:hover {
      transform: translateY(-3px) scale(1);
    }
    .feature-slider__meta {
      margin-top: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 13px;
    }
    .feature-slider__dots {
      display: flex;
      gap: 8px;
    }
    .feature-slider__dot {
      width: 34px;
      height: 4px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: rgba(6, 36, 92, .16);
      cursor: pointer;
      transition: width .25s ease, background .25s ease;
    }
    .feature-slider__dot[aria-current="true"] {
      width: 58px;
      background: var(--blue);
    }
    .feature-slider + .philosophy { padding-top: 116px; }
    .hero-art::before {
      content: "AI";
      position: absolute;
      width: 110px;
      height: 110px;
      right: 17px;
      top: 50%;
      z-index: -1;
      display: grid;
      place-items: center;
      border: 1px solid rgba(22,137,245,.18);
      border-radius: 50%;
      color: rgba(18, 110, 198, .12);
      background: radial-gradient(circle, rgba(255,255,255,.8), rgba(65,154,255,.04) 60%, transparent 61%);
      font: 800 30px/1 Arial, sans-serif;
      letter-spacing: .08em;
      box-shadow: 0 0 0 30px rgba(31,145,247,.025), 0 0 0 58px rgba(97,84,255,.018);
      animation: aiOrbit 12s linear infinite;
    }
    .tile {
      position: absolute;
      width: 146px;
      height: 146px;
      border-radius: 22px;
      transform: rotate(45deg);
      overflow: hidden;
      box-shadow: 0 10px 25px rgba(15, 49, 97, .10);
      border: 5px solid #fff;
    }
    .tile > div { width: 100%; height: 100%; transform: rotate(-45deg); display: grid; place-items: center; }
    .tile svg { width: 66px; height: 66px; fill: none; stroke: white; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
    .tile.red { left: 24px; top: 130px; background: linear-gradient(135deg, #ff2b38, #ff6053); }
    .tile.orange { left: 190px; top: 130px; background: linear-gradient(135deg, #ffbd2c, #ff841b); }
    .tile.blue { left: 358px; top: 130px; background: linear-gradient(135deg, #42b9ff, #1e75e8); }
    .tile.pink { left: 275px; top: 296px; background: linear-gradient(135deg, #f13a87, #df1769); }
    .tile.photo-one { left: 108px; top: -35px; background: linear-gradient(150deg, #c8f3e8, #f8d7bd); }
    .tile.photo-two { left: 274px; top: -35px; background: linear-gradient(150deg, #b4e6bf, #6aa16e); }
    .tile.photo-three { left: 108px; top: 296px; background: linear-gradient(150deg, #d4eaff, #b3c6fa); }
    .avatar { position: relative; }
    .avatar::before { content: ""; width: 45px; height: 45px; border-radius: 50%; background: #f4b489; position: absolute; top: 20px; left: 47px; box-shadow: 1px -7px 0 3px #263b4f; }
    .avatar::after { content: ""; width: 92px; height: 82px; border-radius: 48px 48px 18px 18px; background: #fff; position: absolute; top: 65px; left: 23px; }
    .photo-two .avatar::after { background: #1971bb; }
    .photo-three .avatar::after { background: #526179; }
    .dots { position: absolute; display: grid; grid-template-columns: repeat(3, 4px); gap: 10px; opacity: .45; }
    .dots i { width: 4px; height: 4px; border-radius: 50%; background: #ff5e6e; }
    .dots.d1 { left: 10px; top: 330px; }
    .dots.d2 { right: 5px; top: 38px; }
    .dots.d2 i { background: #1689f5; }

    /* FV mosaic v2: a true interlocking diamond grid. The square tiles are
       rotated as one lattice so their diagonal edges keep an even rhythm. */
    .mosaic {
      position: absolute;
      width: 620px;
      height: 420px;
      left: 0;
      top: 8px;
      transform: scale(1.3) translateZ(0);
      transform-origin: 54% 50%;
    }
    .m-tile {
      --tile-color: #eef4ff;
      position: absolute;
      width: 116px;
      height: 116px;
      border: 5px solid #fff;
      border-radius: 19px;
      overflow: hidden;
      background: var(--tile-color);
      box-shadow: 0 13px 27px rgba(14, 49, 98, .10);
      transform: rotate(45deg) translateZ(0);
      transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
      will-change: transform;
    }
    .m-tile:hover {
      z-index: 5;
      transform: rotate(45deg) translate(-4px, -4px) scale(1.035);
      box-shadow: 0 20px 35px rgba(14, 49, 98, .18);
    }
    .m-tile.blue,
    .m-tile.pink {
      box-shadow: 0 13px 28px rgba(20, 111, 226, .16), 0 0 25px rgba(65, 190, 255, .08);
    }
    .m-tile.photo::before {
      content: "";
      position: absolute;
      inset: -34%;
      transform: rotate(-45deg);
      background-image: url("../img/hero-team-v2.webp");
      background-repeat: no-repeat;
      background-size: cover;
      filter: saturate(.92) contrast(.98);
    }
    .m-tile.woman-one::before { background-position: 22% 42%; }
    .m-tile.man::before { background-position: 89% 34%; }
    .m-tile.woman-two::before { background-position: 54% 82%; }
    .m-tile.red { --tile-color: linear-gradient(135deg, #ff2736, #ff6255); }
    .m-tile.orange { --tile-color: linear-gradient(135deg, #ffbf2e, #ff861d); }
    .m-tile.blue { --tile-color: linear-gradient(135deg, #47bdff, #1c77e8); }
    .m-tile.pink { --tile-color: linear-gradient(135deg, #f23d89, #df176b); }
    .m-tile.green { --tile-color: linear-gradient(135deg, #8bce3f, #52af25); }
    .m-tile.ghost {
      --tile-color: linear-gradient(145deg, rgba(252,253,255,.9), rgba(235,241,251,.45));
      opacity: .58;
      box-shadow: inset 0 0 30px rgba(184,203,234,.22);
    }
    .m-tile.ghost-blue {
      --tile-color: linear-gradient(145deg, #f7fbff, #e7f1ff);
      opacity: .63;
    }
    .m-tile .tile-content {
      position: absolute;
      inset: -24%;
      display: grid;
      place-items: center;
      transform: rotate(-45deg);
    }
    .m-tile svg {
      width: 55px;
      height: 55px;
      fill: none;
      stroke: #fff;
      stroke-width: 2.25;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 3px 4px rgba(0,0,0,.06));
    }
    .m-tile svg.ai-sparkle { transform: translateX(-4px) scale(1.14); }
    .m-tile svg.gear-icon { transform: scale(1.04); stroke-width: 1px; }
    .m-tile svg.bulb-icon { transform: scale(1.08); stroke-width: 2.7px; }
    .m-tile svg.chart-icon,
    .m-tile svg.cloud-icon { stroke-width: 2.7px; }
    .m-tile svg.chart-icon { stroke-width: 2.7px; }
    .m-dots {
      position: absolute;
      display: grid;
      grid-template-columns: repeat(3, 4px);
      gap: 10px;
      opacity: .48;
    }
    .m-dots i { width: 4px; height: 4px; border-radius: 50%; background: #ff6570; }
    .m-dots.left { left: 33px; top: 315px; }
    .m-dots.right { right: 12px; top: 15px; }
    .m-dots.right i { background: #2998f7; }
    .ai-signals {
      position: absolute;
      right: 10px;
      bottom: 2px;
      z-index: 6;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 9px;
      transform: translateZ(0);
    }
    .ai-signals__tags {
      display: flex;
      gap: 7px;
    }
    .ai-signals__tags span {
      padding: 7px 10px;
      border: 1px solid rgba(32, 132, 231, .16);
      border-radius: 8px;
      color: #126ec6;
      background: rgba(255,255,255,.78);
      box-shadow: 0 7px 18px rgba(16,78,157,.08);
      backdrop-filter: blur(10px);
      font: 700 8px/1 Arial, sans-serif;
      letter-spacing: .08em;
    }
    .ai-signals__capability {
      margin: 0;
      padding-right: 2px;
      color: var(--navy);
      font-size: 12px;
      line-height: 1.5;
      font-weight: 900;
      letter-spacing: .035em;
      white-space: nowrap;
    }
    @keyframes aiPulse {
      0%, 100% { transform: scale(.86); opacity: .7; }
      50% { transform: scale(1.15); opacity: 1; }
    }
    @keyframes aiOrbit { to { transform: rotate(360deg); } }
    @keyframes scrollLine {
      0% { transform: translateY(0); opacity: 0; }
      25% { opacity: 1; }
      100% { transform: translateY(40px); opacity: 0; }
    }

    .section { width: min(100% - 96px, 1080px); margin: auto; }
    .philosophy { padding: 184px 0 58px; }
    .eyebrow { margin: 0 0 105px; font-size: 18px; font-weight: 900; letter-spacing: .04em; }
    .section-title { margin: 0; font-size: 80px; letter-spacing: .02em; line-height: normal; white-space: nowrap; }
    .philosophy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; margin-top: 0; }
    .glass-art {
      height: 300px;
      margin-top: clamp(50px, calc(22vw - 130px), 150px);
      overflow: hidden;
      position: relative;
      border-radius: 19px;
      background: #e8f0f8;
      box-shadow: 0 18px 44px rgba(14, 50, 101, .13);
    }
    .glass-art img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: 50% 45%;
      transition: transform .8s cubic-bezier(.2, .7, .2, 1);
    }
    .glass-art:hover img { transform: scale(1.035); }
    .philosophy-copy { padding-bottom: 9px; }
    .philosophy-copy p { margin: 0 0 18px; font-size: 16px; line-height: 2.05; font-weight: 700; }
    .philosophy-copy .button { width: 100%; margin-top: 33px; min-width: 0; color: #fff; background: var(--blue); border-color: var(--blue); }

    .services { width: calc(100% - 48px); padding: 120px 0 18px; }
    .services-title { position: relative; top: -8px; text-align: center; font-size: clamp(48px, 6vw, 82px); margin: 0 0 39px; letter-spacing: .10em; }
    .services-title::after { content: ""; display: block; width: 31px; height: 2px; margin: 10px auto 0; background: var(--blue); }
    .cards { display: grid; grid-template-columns: 1fr; gap: 28px; }
    @media (min-width: 901px) {
      .cards { grid-template-columns: repeat(10, minmax(0, 1fr)); }
      .card:nth-child(1),
      .card:nth-child(4),
      .card:nth-child(6) { grid-column: span 6; }
      .card:nth-child(2),
      .card:nth-child(3),
      .card:nth-child(5) { grid-column: span 4; }
    }
    .card {
      min-height: 448px;
      border-radius: 17px;
      padding: 42px 40px 34px;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      color: #fff;
      box-shadow: 0 14px 34px rgba(14, 50, 101, .13);
    }
    .card::before { display: none; }
    .card.red { background: linear-gradient(rgba(6,36,92,.40), rgba(6,36,92,.40)), #ef1720; --accent: #ef1720; }
    .card.orange { background: linear-gradient(rgba(6,36,92,.40), rgba(6,36,92,.40)), #ff8b0b; --accent: #ff8b0b; }
    .card.green { background: linear-gradient(rgba(6,36,92,.40), rgba(6,36,92,.40)), #16b850; --accent: #16b850; }
    .card.blue { background: linear-gradient(rgba(6,36,92,.40), rgba(6,36,92,.40)), #1689ef; --accent: #1689ef; }
    .card.pink { background: linear-gradient(rgba(6,36,92,.40), rgba(6,36,92,.40)), #e93379; --accent: #e93379; }
    .card.teal { background: linear-gradient(rgba(6,36,92,.40), rgba(6,36,92,.40)), #06baa8; --accent: #06baa8; }
    .tag { position: relative; z-index: 2; display: inline-block; padding: 0 0 11px 24px; border: 0; border-bottom: 2px solid rgba(255,255,255,.72); border-radius: 0; color: inherit; background: none; text-shadow: 0 2px 10px rgba(6,36,92,.28); font-size: 14px; line-height: 1.35; font-weight: 900; letter-spacing: .04em; }
    .tag::before { content: ""; width: 9px; height: 9px; position: absolute; left: 2px; top: .28em; border: 2px solid currentColor; transform: rotate(45deg); }
    .card h3 { width: 100%; margin: 24px 0 15px; position: relative; z-index: 2; color: inherit; font-size: 27px; line-height: 1.45; letter-spacing: .02em; }
    .card p { width: 100%; margin: 0; position: relative; z-index: 2; color: inherit; font-size: 15px; line-height: 1.9; font-weight: 700; }
    .mini-button { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 18px; margin-top: 28px; padding: 12px 22px; border: 1px solid rgba(255,255,255,.62); border-radius: 99px; background: rgba(6,36,92,.16); color: #fff; box-shadow: 0 7px 17px rgba(4,30,75,.13); font-size: 13px; font-weight: 800; }
    .mini-button::after { content: "›"; font-size: 19px; }
    .card-art {
      position: absolute;
      right: 0;
      bottom: 0;
      top: auto;
      z-index: 0;
      width: clamp(210px, 46%, 380px);
      aspect-ratio: 3 / 2;
      opacity: 1;
      transform-origin: right bottom;
      pointer-events: none;
    }
    .card-art img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: right bottom;
    }

    .process {
      width: calc(100% - 48px);
      margin: auto;
      padding: 150px 0 130px;
    }
    .process-inner { width: min(100% - 48px, 1200px); margin: auto; }
    .process-heading {
      margin-bottom: 64px;
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
      gap: 64px;
      align-items: end;
    }
    .process-kicker {
      margin: 0 0 18px;
      color: var(--blue);
      font: 800 12px/1 Arial, sans-serif;
      letter-spacing: .17em;
    }
    .process-title {
      margin: 0;
      font-size: clamp(48px, 6vw, 82px);
      line-height: 1.16;
      letter-spacing: .02em;
    }
    .process-lead {
      margin: 0;
      font-size: 16px;
      line-height: 2;
      font-weight: 700;
    }
    .process-grid {
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0;
      border-bottom: 1px solid rgba(6, 36, 92, .14);
      list-style: none;
    }
    .process-step {
      --step-color: var(--blue);
      min-height: 330px;
      padding: 38px 32px 44px;
      position: relative;
      border-top: 5px solid var(--step-color);
      border-right: 1px solid rgba(6, 36, 92, .14);
    }
    .process-step:nth-child(2) { --step-color: var(--teal); }
    .process-step:nth-child(3) { --step-color: var(--orange); }
    .process-step:nth-child(4) { --step-color: var(--pink); }
    .process-step:last-child { border-right: 0; }
    .process-no {
      display: block;
      margin-bottom: 56px;
      color: color-mix(in srgb, var(--step-color) 72%, #fff);
      font: 300 clamp(58px, 6vw, 86px)/.82 Arial, sans-serif;
      letter-spacing: -.06em;
    }
    .process-label {
      margin: 0 0 12px;
      color: var(--step-color);
      font: 800 10px/1 Arial, sans-serif;
      letter-spacing: .13em;
    }
    .process-step h3 { margin: 0 0 18px; font-size: 27px; line-height: 1.45; }
    .process-step p:last-child { margin: 0; font-size: 14px; line-height: 1.95; font-weight: 650; }

    .closing-cta {
      width: calc(100% - 48px);
      margin: 0 auto 120px;
      padding: 72px;
      overflow: hidden;
      position: relative;
      border-radius: 30px;
      color: #fff;
      background:
        radial-gradient(circle at 88% 12%, rgba(255,224,115,.42), transparent 29%),
        radial-gradient(circle at 12% 100%, rgba(172,9,72,.24), transparent 34%),
        linear-gradient(128deg, #e91642 0%, #f33468 48%, #ff8218 100%);
      box-shadow: 0 28px 70px rgba(224, 26, 70, .25);
    }
    .closing-cta::after {
      content: "AI";
      position: absolute;
      right: 5%;
      bottom: -55px;
      color: rgba(255,255,255,.06);
      font: 900 220px/1 Arial, sans-serif;
    }
    .cta-heading { position: relative; z-index: 1; margin-bottom: 48px; }
    .cta-kicker { margin: 0 0 15px; color: #fff0ad; font: 800 11px/1 Arial, sans-serif; letter-spacing: .18em; }
    .cta-heading h2 { margin: 0; font-size: clamp(35px, 4vw, 58px); line-height: 1.35; }
    .cta-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: 22px; }
    .cta-option {
      min-height: 210px;
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 1px solid rgba(255,255,255,.24);
      border-radius: 20px;
      background: rgba(255,255,255,.10);
      box-shadow: inset 0 1px rgba(255,255,255,.12);
      backdrop-filter: blur(10px);
      transition: transform .25s ease, background .25s ease;
    }
    .cta-option:hover { transform: translateY(-4px); background: rgba(255,255,255,.16); }
    .cta-option.recommended { background: #fff; color: var(--navy); }
    .cta-label { color: #fff0ad; font-size: 11px; font-weight: 900; letter-spacing: .10em; }
    .cta-option.recommended .cta-label { color: #e91642; }
    .cta-option h3 { margin: 13px 0 10px; font-size: 27px; }
    .cta-option p { margin: 0; font-size: 13px; line-height: 1.8; font-weight: 600; opacity: .82; }
    .cta-arrow { align-self: flex-end; width: 43px; height: 43px; margin-top: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid currentColor; border-radius: 999px; font-size: 22px; transition: transform .2s ease, background .2s ease, color .2s ease; }
    .cta-arrow__label { display: none; font-size: 13px; line-height: 1; font-weight: 900; letter-spacing: .02em; }
    .cta-arrow__icon { line-height: 1; }
    .cta-option:hover .cta-arrow { transform: translateX(3px); }
    @media (min-width: 681px) {
      .cta-arrow { width: auto; min-width: 148px; height: 46px; padding: 0 17px; color: #e91642; border-color: #fff; background: #fff; box-shadow: 0 8px 18px rgba(65, 8, 37, .16); }
      .cta-option.recommended .cta-arrow { color: #fff; border-color: var(--navy); background: var(--navy); }
      .cta-arrow__label { display: inline; }
    }

    .site-footer { width: min(100% - 96px, 1080px); margin: auto; padding: 38px 0 22px; display: grid; grid-template-columns: 130px 1fr; align-items: start; gap: 26px; border-top: 1px solid #f1f3f7; }
    .footer-links { min-width: 0; display: grid; gap: 24px; }
    .footer-service-nav { padding-bottom: 24px; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 20px; border-bottom: 1px solid #e9edf5; }
    .footer-service-nav__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 900; }
    .footer-service-nav > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 22px; }
    .footer-service-nav > div a { font-size: 10px; line-height: 1.55; font-weight: 750; }
    .footer-nav { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 15px 28px; font-size: 10px; font-weight: 800; }
    .footer-service-nav a, .footer-nav a { transition: color .2s ease; }
    .footer-service-nav a:hover, .footer-nav a:hover { color: var(--blue); }
    .copyright { grid-column: 1 / -1; text-align: center; margin: 3px 0 0; font-size: 11px; }

    @media (max-width: 850px) {
      .nav a:not(.contact-link) { display: none; }
      .process-heading { grid-template-columns: 1fr; gap: 28px; }
      .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .process-step { border-bottom: 1px solid rgba(6, 36, 92, .14); }
      .process-step:nth-child(2n) { border-right: 0; }
    }

    @media (max-width: 680px) {
      .hero-inner { grid-template-columns: 1fr; padding: 35px 0 20px; }
      .hero-art { height: 315px; margin: 8px auto 0; width: 560px; transform: scale(.68); transform-origin: top center; }
      .ai-kicker { margin-bottom: 11px; }
      .ai-signals {
        right: 4px;
        bottom: -7px;
        display: flex;
        gap: 7px;
        transform: scale(1.58);
        transform-origin: right bottom;
      }
      .ai-signals__tags { gap: 5px; }
      .ai-signals__tags span { padding: 5px 7px; font-size: 7px; }
      .ai-signals__capability { font-size: 11px; }
      .feature-slider {
        --feature-slide-width: min(400px, calc(100vw - 56px));
        --feature-gap: 14px;
        padding-top: 44px;
      }
      .feature-slider__track { padding-inline: calc((100vw - var(--feature-slide-width)) / 2); }
      .feature-banner {
        border-radius: 10px;
      }
      .feature-slider__control--prev,
      .feature-slider__control--next { width: 48px; height: 88px; }
      .feature-slider__control--autoplay { width: 40px; height: 32px; }
      .feature-slider + .philosophy { padding-top: 94px; }
      .philosophy-grid { grid-template-columns: 1fr; }
      .philosophy-copy { order: 1; }
      .glass-art { order: 2; margin-top: 32px; }
      .cards { grid-template-columns: 1fr; }
      .card { min-height: 448px; }
      .process,
      .closing-cta { width: calc(100% - 34px); }
      .process { padding: 105px 0 90px; }
      .process-inner { width: 100%; }
      .process-heading { margin-bottom: 40px; }
      .process-grid { display: block; border-bottom: 0; }
      .process-step {
        min-height: 0;
        padding: 32px 0 36px 24px;
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        column-gap: 18px;
        border-top: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(6, 36, 92, .14);
        border-left: 4px solid var(--step-color);
      }
      .process-no { grid-column: 1; grid-row: 1 / 4; margin: 2px 0 0; font-size: 42px; }
      .process-label,
      .process-step h3,
      .process-step p:last-child { grid-column: 2; }
      .closing-cta { margin-bottom: 80px; padding: 42px 30px; }
      .cta-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 560px) {
      .header-inner { width: calc(100% - 28px); }
      .site-header { height: 58px; }
      .hero,
      .hero-inner {
        height: calc(100vh - 58px);
        height: calc(100svh - 58px);
        min-height: calc(100vh - 58px);
        min-height: calc(100svh - 58px);
      }
      .logo img { width: 72px; }
      .nav .contact-link { padding: 10px 16px; font-size: 11px; }
      .hero-inner, .section, .site-footer { width: calc(100% - 34px); }
      .hero-inner { padding: 28px 0 12px; }
      .hero h1 { font-size: clamp(34px, 10.5vw, 54px); }
      .lead { font-size: 13px; }
      .actions { flex-direction: column; align-items: flex-start; }
      .hero-art { width: 530px; margin: 3px 0 0 50%; transform: translateX(-50%) scale(.55); height: 255px; }
      .philosophy { padding-top: 130px; }
      .eyebrow { margin-bottom: 58px; font-size: 18px; }
      .section-title { font-size: clamp(34px, 10.5vw, 54px); }
      .philosophy-grid { margin-top: 0; gap: 30px; }
      .glass-art { height: 255px; }
      .philosophy-copy p { font-size: 16px; line-height: 2; }
      .services-title { font-size: 42px; }
      .card { min-height: 448px; }
      .card h3, .card p { width: 100%; }
      .cards { gap: 18px; }
      .process-title { font-size: 42px; }
      .process-lead { font-size: 15px; }
      .closing-cta { padding: 36px 22px; border-radius: 22px; }
      .cta-heading { margin-bottom: 32px; }
      .cta-option { min-height: 220px; padding: 25px; }
      .site-footer { grid-template-columns: 1fr; gap: 25px; }
      .site-footer .logo { justify-self: center; text-align: center; }
      .footer-service-nav { grid-template-columns: 1fr; gap: 18px; }
      .footer-service-nav__heading { justify-content: center; gap: 15px; }
      .footer-service-nav > div { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: center; }
      .footer-nav { flex-wrap: wrap; gap: 18px 25px; }
    }
    @media (max-width: 390px) {
      .footer-service-nav > div { grid-template-columns: 1fr; }
      .footer-nav { justify-content: center; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ai-kicker::before,
      .hero-art::before,
      .scroll-cue i::after { animation: none; }
      .feature-banner,
      .feature-slider__control,
      .feature-slider__dot { transition: none; }
    }

    /* Brand cursor: enabled only for precise pointing devices. */
    .iroha-cursor-dot,
    .iroha-cursor-ring {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      pointer-events: none;
      opacity: 0;
      transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
      transition: width .22s ease, height .22s ease, opacity .2s ease,
                  background-color .22s ease, border-color .22s ease;
    }
    .iroha-cursor-dot {
      z-index: 10000;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: linear-gradient(135deg, #ef1821, #eb2d79 42%, #08bea9 72%, #1689f5);
      box-shadow: 0 0 12px rgba(22, 137, 245, .32);
    }
    .iroha-cursor-ring {
      width: 34px;
      height: 34px;
      border: 1px solid #fff;
      border-radius: 50%;
      background: #fff;
      box-shadow: none;
      mix-blend-mode: difference;
    }
    .iroha-cursor-dot.is-visible,
    .iroha-cursor-ring.is-visible { opacity: 1; }
    .iroha-cursor-ring.is-active {
      width: 52px;
      height: 52px;
      border-color: #fff;
      background: #fff;
    }
    .iroha-cursor-ring.is-pressed {
      width: 27px;
      height: 27px;
      background: #fff;
    }
    @media (hover: hover) and (pointer: fine) {
      .has-iroha-cursor body,
      .has-iroha-cursor a,
      .has-iroha-cursor button { cursor: none; }
    }

    /* v8 motion system */
    .motion-char {
      display: inline-block;
      opacity: 0;
      transform-origin: 50% 70%;
      will-change: transform, opacity, filter;
    }
    .color-word .motion-char {
      background: linear-gradient(90deg, #ed0d25, #f0348c 32%, #17c69e 68%, #11a3cf);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }
    .char-motion-visible .motion-char {
      animation-name: var(--char-motion);
      animation-duration: var(--char-duration, .8s);
      animation-delay: var(--char-delay, 0s);
      animation-timing-function: cubic-bezier(.18, .72, .2, 1);
      animation-fill-mode: both;
    }
    @keyframes charRise {
      from { opacity: 0; transform: translateY(1.05em) scale(.82); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes charSlideLeft {
      from { opacity: 0; transform: translateX(-.8em) skewX(-12deg); }
      to { opacity: 1; transform: translateX(0) skewX(0); }
    }
    @keyframes charSlideRight {
      from { opacity: 0; transform: translateX(.85em) rotate(8deg); }
      to { opacity: 1; transform: translateX(0) rotate(0); }
    }
    @keyframes charSpin {
      from { opacity: 0; transform: translateY(-.45em) rotate(-26deg) scale(.7); }
      to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
    }
    @keyframes charFocus {
      from { opacity: 0; filter: blur(11px); transform: scale(1.42); }
      to { opacity: 1; filter: blur(0); transform: scale(1); }
    }
    @keyframes charFlip {
      from { opacity: 0; transform: perspective(420px) rotateX(88deg) translateY(.35em); }
      to { opacity: 1; transform: perspective(420px) rotateX(0) translateY(0); }
    }
    .motion-reveal {
      opacity: 0;
      transform: translate3d(var(--reveal-x, 0), var(--reveal-y, 48px), 0) rotate(var(--reveal-rotate, 0deg));
      transition: opacity .85s ease, transform 1s cubic-bezier(.18,.72,.2,1);
      transition-delay: var(--reveal-delay, 0s);
      will-change: transform, opacity;
    }
    .motion-reveal.motion-visible { opacity: 1; transform: translate3d(0,0,0) rotate(0); }
    .m-tile { animation: tileFloat 5.8s ease-in-out infinite; animation-delay: var(--tile-delay, 0s); }
    .m-tile:nth-child(2n) { --tile-delay: -.9s; animation-duration: 6.7s; }
    .m-tile:nth-child(3n) { --tile-delay: -2.1s; animation-duration: 7.4s; }
    .m-tile:nth-child(5n) { --tile-delay: -3.2s; animation-duration: 6.1s; }
    @keyframes tileFloat {
      0%, 100% { translate: 0 0; }
      45% { translate: 0 -7px; }
      70% { translate: 3px -3px; }
    }
    .site-header .logo { animation: headerDrop .8s cubic-bezier(.18,.72,.2,1) both; }
    .nav a { animation: headerDrop .7s cubic-bezier(.18,.72,.2,1) both; }
    .nav a:nth-child(1) { animation-delay: .06s; }
    .nav a:nth-child(2) { animation-delay: .10s; }
    .nav a:nth-child(3) { animation-delay: .14s; }
    .nav a:nth-child(4) { animation-delay: .18s; }
    .nav a:nth-child(5) { animation-delay: .22s; }
    .nav a:nth-child(6) { animation-delay: .26s; }
    .hero .ai-kicker,
    .hero .lead,
    .hero .actions { opacity: 0; animation: heroCopyIn .85s cubic-bezier(.18,.72,.2,1) both; }
    .hero .ai-kicker { animation-delay: .18s; }
    .hero .lead { animation-delay: .9s; }
    .hero .actions { animation-delay: 1.05s; }
    @keyframes headerDrop {
      from { opacity: 0; transform: translateY(-16px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes heroCopyIn {
      from { opacity: 0; transform: translateY(24px); filter: blur(5px); }
      to { opacity: 1; transform: translateY(0); filter: blur(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .motion-char,
      .motion-reveal,
      .hero .ai-kicker,
      .hero .lead,
      .hero .actions { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; animation: none !important; }
      .m-tile,
      .site-header .logo,
      .nav a { animation: none !important; translate: none !important; }
    }