:root {
      --navy: #003f73;
      --navy-deep: #06233f;
      --silver: #a7b0b8;
      --green: #005b8f;
      --green-deep: #003f73;
      --green-soft: #e8f1f7;
      --accent: #ff4a3d;
      --white: #ffffff;
      --mist: #f5f7f8;
      --line: rgba(255, 255, 255, 0.22);
      --glass: rgba(255, 255, 255, 0.08);
      font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, Arial, sans-serif;
    }


    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 88px;
    }

    body {
      margin: 0;
      color: var(--white);
      background: var(--navy-deep);
      word-break: auto-phrase;
      line-break: strict;
    }

    .page {
      min-height: 100vh;
      background: linear-gradient(180deg, #07111c 0%, #0f2438 56%, #f5f7f8 56%, #f5f7f8 100%);
    }

    .site-header {
      position: fixed;
      z-index: 20;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 22px clamp(20px, 4vw, 64px);
      background: rgba(232, 238, 243, 0.48);
      backdrop-filter: blur(16px);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      min-height: 54px;
    }

    .brand img {
      display: block;
      width: clamp(112px, 10vw, 152px);
      height: auto;
    }

    .global-nav {
      display: flex;
      align-items: center;
      gap: clamp(14px, 2.3vw, 32px);
    }

    .global-nav a {
      position: relative;
      color: var(--navy);
      text-decoration: none;
      font-size: 14px;
      font-weight: 800;
      transition: color 0.2s ease;
    }

    .global-nav a::after {
      content: none;
    }

    .global-nav a:hover::after {
      transform: none;
    }

    .global-nav a.is-current {
      color: var(--navy);
    }

    .global-nav a.is-current::after {
      transform: none;
    }

    .nav-dropdown { position: relative; }
    .nav-dropdown > button { padding: 10px 0; border: 0; color: var(--navy); background: none; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
    .nav-dropdown-menu { position: absolute; top: calc(100% + 12px); left: 50%; width: 270px; padding: 10px 0; background: #fff; box-shadow: 0 18px 38px rgba(4,35,60,.17); transform: translate(-50%,8px); opacity: 0; visibility: hidden; transition: .22s ease; }
    .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translate(-50%,0); }
    .nav-dropdown-menu a { display: block; padding: 13px 20px; font-size: 13px; line-height: 1.5; }
    .nav-dropdown-menu a:hover { background: #eef3f6; }
    .mobile-menu { display: none; }

    .label {
      display: none;
      padding: 8px 12px;
      border: 1px solid rgba(255, 255, 255, 0.24);
      color: rgba(255, 255, 255, 0.82);
      font-size: 12px;
      background: rgba(8, 21, 33, 0.32);
    }

    .hero {
      position: relative;
      min-height: 100vh;
      overflow: hidden;
      display: grid;
      align-items: center;
      padding: 110px clamp(20px, 5vw, 82px) clamp(34px, 5vw, 72px);
      isolation: isolate;
    }

    .hero-video {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 42%;
      filter: brightness(1.36) saturate(1.08) contrast(0.94);
      transform: none;
      transform-origin: 62% 42%;
    }

    .final-preview::after {
      background:
        linear-gradient(90deg, rgba(247, 250, 249, 0.86) 0%, rgba(247, 250, 249, 0.62) 38%, rgba(247, 250, 249, 0.08) 64%, rgba(8, 21, 33, 0.1) 100%),
        linear-gradient(180deg, rgba(224, 247, 243, 0.22) 0%, rgba(162, 212, 232, 0.12) 42%, rgba(8, 21, 33, 0.28) 100%);
    }

    .final-preview::before {
      content: "";
      position: absolute;
      z-index: 1;
      inset: 0 auto 0 0;
      width: min(50vw, 790px);
      background: rgba(247, 250, 249, 0.92);
      clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
      pointer-events: none;
    }

    .hero-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 30px;
    }

    .hero-button {
      position: relative;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 20px;
      border: 1px solid rgba(15, 36, 56, 0.18);
      color: var(--navy);
      background: rgba(255, 255, 255, 0.72);
      text-decoration: none;
      font-weight: 700;
      backdrop-filter: blur(14px);
      transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
    }

    .hero-button.primary {
      border-color: rgba(31, 138, 131, 0.86);
      color: #ffffff;
      background: rgba(31, 138, 131, 0.88);
    }

    .hero-button:hover,
    .contact-button:hover {
      transform: translateY(-2px);
    }

    .tap-ripple {
      position: absolute;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.42);
      transform: translate(-50%, -50%) scale(0);
      animation: tapRipple 0.58s ease-out forwards;
      pointer-events: none;
    }

    .hero-proof {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-top: 32px;
      max-width: 440px;
    }

    .hero-proof div {
      padding: 11px 14px;
      border-left: 3px solid var(--accent);
      background: rgba(0, 42, 78, 0.38);
    }

    .hero-proof dt {
      margin: 0 0 5px;
      color: rgba(255, 255, 255, 0.62);
      font-size: 11px;
      font-weight: 800;
    }

    .hero-proof dd {
      margin: 0;
      color: #ffffff;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.45;
    }

    .home-preview {
      color: #142638;
      background: #ffffff;
    }

    .info-strip {
      display: grid;
      grid-template-columns: 220px 1fr;
      min-height: 96px;
      margin: 0;
      border-top: 1px solid rgba(15, 36, 56, 0.08);
      border-bottom: 1px solid rgba(15, 36, 56, 0.08);
      background: #ffffff;
      overflow: hidden;
    }

    .strip-title {
      display: grid;
      place-items: center;
      padding: 22px;
      color: #ffffff;
      background: var(--navy);
      font-weight: 800;
    }

    .strip-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .strip-list.is-single {
      grid-template-columns: 1fr;
    }

    .strip-item {
      display: grid;
      grid-template-columns: 112px 1fr;
      gap: 18px;
      align-items: center;
      padding: 22px clamp(20px, 4vw, 42px);
      border-right: 1px solid rgba(15, 36, 56, 0.08);
      font-size: 14px;
      line-height: 1.7;
    }

    .strip-item:last-child {
      border-right: 0;
    }

    .strip-item time {
      color: var(--accent);
      font-weight: 800;
    }

    .strip-item span {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .material-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1px;
      width: min(calc(100% - 40px), 1280px);
      margin: clamp(28px, 4vw, 52px) auto 0;
      background: #ffffff;
    }

    .material-strip figure {
      position: relative;
      min-height: clamp(180px, 17vw, 260px);
      margin: 0;
      overflow: hidden;
      background: var(--navy);
    }

    .material-strip figure > a { position: absolute; inset: 0; color: inherit; text-decoration: none; }

    .material-strip img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(0.92) contrast(1.02);
      transition: transform 0.45s ease, filter 0.45s ease;
    }

    .material-strip figure:nth-child(3) img {
      object-position: center 44%;
    }

    .material-strip figure::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(3, 38, 68, 0.04), rgba(3, 38, 68, 0.42));
      pointer-events: none;
    }

    .material-strip figure:hover img {
      transform: scale(1.035);
      filter: saturate(1) contrast(1.05);
    }

    .material-strip figcaption {
      position: absolute;
      left: clamp(18px, 2vw, 28px);
      bottom: clamp(18px, 2vw, 26px);
      z-index: 1;
      display: grid;
      gap: 6px;
      color: #ffffff;
      font-weight: 800;
      line-height: 1.35;
      text-shadow: 0 2px 18px rgba(0, 26, 46, 0.4);
    }

    .material-strip figcaption span {
      color: rgba(255, 255, 255, 0.72);
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 11px;
      font-weight: 300;
      letter-spacing: 0.14em;
    }

    .statement {
      display: grid;
      grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.35fr);
      gap: clamp(28px, 6vw, 92px);
      padding: clamp(64px, 10vw, 130px) clamp(20px, 6vw, 96px);
      background:
        radial-gradient(circle at 88% 20%, rgba(31, 138, 131, 0.11), transparent 28%),
        linear-gradient(90deg, #f7faf9 0%, #f7faf9 58%, #ffffff 58%, #ffffff 100%);
    }

    .section-label {
      margin: 0 0 18px;
      color: var(--green-deep);
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 12px;
      font-weight: 300;
      letter-spacing: 0.16em;
    }

    .statement h2,
    .business-lineup h2,
    .products-section h2,
    .consult-section h2,
    .flow-section h2,
    .message-section h2,
    .company-section h2,
    .faq-section h2,
    .contact-section h2 {
      margin: 0;
      color: var(--navy);
      font-size: clamp(30px, 3.2vw, 48px);
      line-height: 1.28;
      font-weight: 800;
      text-wrap: balance;
    }

    .statement-text {
      margin: 0;
      color: #34485a;
      font-size: clamp(15px, 1.25vw, 17px);
      line-height: 2.15;
    }

    .issue-table {
      margin-top: 36px;
      border-top: 1px solid rgba(15, 36, 56, 0.16);
    }

    .issue-row {
      display: grid;
      grid-template-columns: 84px 1fr;
      gap: 22px;
      padding: 22px 0;
      border-bottom: 1px solid rgba(15, 36, 56, 0.1);
    }

    .issue-row span {
      display: inline-grid;
      place-items: center;
      min-width: 86px;
      min-height: 38px;
      color: var(--green-deep);
      border-left: 4px solid var(--accent);
      background: rgba(0, 91, 143, 0.08);
      font-weight: 800;
    }

    .issue-row strong {
      color: var(--navy);
      font-size: 18px;
      line-height: 1.7;
    }

    .strength-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      margin-top: 36px;
      background: rgba(0, 63, 115, 0.16);
      border-top: 2px solid var(--navy);
    }

    .strength-card {
      padding: 26px;
      background: #ffffff;
      min-height: 190px;
      transition: transform 0.24s ease, box-shadow 0.24s ease;
    }

    .strength-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 38px rgba(15, 36, 56, 0.08);
    }

    .strength-card span {
      display: inline-block;
      margin-bottom: 18px;
      color: var(--accent);
      font-size: 12px;
      font-weight: 800;
    }

    .strength-card h3 {
      margin: 0 0 14px;
      color: var(--navy);
      font-size: 21px;
      line-height: 1.45;
    }

    .strength-card p {
      margin: 0;
      color: #506070;
      font-size: 14px;
      line-height: 1.9;
    }

    .strength-detail {
      display: grid;
      grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
      gap: clamp(24px, 4vw, 56px);
      margin-top: 36px;
      padding: clamp(28px, 4vw, 44px);
      color: #ffffff;
      background: linear-gradient(135deg, var(--navy) 0%, var(--green-deep) 100%);
    }

    .strength-detail h3 {
      margin: 0;
      font-size: clamp(24px, 2.4vw, 34px);
      line-height: 1.38;
    }

    .strength-detail p {
      margin: 16px 0 0;
      color: rgba(255, 255, 255, 0.76);
      font-size: 14px;
      line-height: 1.9;
    }

    .strength-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      margin: 0;
      padding: 0;
      list-style: none;
      background: rgba(255, 255, 255, 0.14);
    }

    .strength-list li {
      padding: 18px 20px;
      background: rgba(255, 255, 255, 0.055);
    }

    .strength-list em {
      display: block;
      margin-bottom: 8px;
      color: var(--accent);
      font-style: normal;
      font-size: 12px;
      font-weight: 800;
    }

    .strength-list strong {
      display: block;
      color: #ffffff;
      font-size: 16px;
      line-height: 1.55;
    }

    .strength-list span {
      display: block;
      margin-top: 8px;
      color: rgba(255, 255, 255, 0.68);
      font-size: 13px;
      line-height: 1.75;
    }

    .business-lineup {
      padding: clamp(58px, 8vw, 112px) clamp(20px, 6vw, 96px);
      background: #ffffff;
    }

    .business-lineup > .section-label,
    .business-lineup > h2,
    .business-lead {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .business-lead,
    .flow-lead {
      text-wrap: balance;
    }

    .business-line {
      display: grid;
      grid-template-columns: 92px minmax(220px, 0.5fr) minmax(220px, 0.6fr) 1fr;
      gap: clamp(18px, 4vw, 58px);
      align-items: center;
      padding: clamp(24px, 4vw, 42px) 0;
      border-bottom: 1px solid rgba(15, 36, 56, 0.1);
      position: relative;
    }

    .business-line::before {
      content: "";
      position: absolute;
      left: 26px;
      top: 42px;
      bottom: 42px;
      width: 1px;
      background: rgba(31, 138, 131, 0.24);
    }

    .business-line:first-of-type {
      margin-top: 34px;
      border-top: 2px solid var(--navy);
    }

    .business-line:last-of-type {
      border-bottom: 0;
    }

    .business-line .num {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      color: var(--green-deep);
      background: var(--green-soft);
      font-size: 16px;
      font-weight: 800;
    }

    .business-line h3 {
      margin: 0;
      color: var(--navy);
      font-size: clamp(21px, 2vw, 30px);
      line-height: 1.42;
    }

    .business-heading {
      display: grid;
      gap: 16px;
    }

    .business-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .business-tags li {
      padding: 6px 9px;
      color: var(--green-deep);
      background: rgba(0, 91, 143, 0.08);
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
    }

    .business-photo {
      position: relative;
      min-height: 180px;
      background-position: center;
      background-size: cover;
      box-shadow: 18px 18px 0 rgba(0, 91, 143, 0.08);
      overflow: hidden;
      transition: transform 0.62s cubic-bezier(0.16, 1, 0.3, 1), filter 0.62s ease, box-shadow 0.62s ease;
    }

    .business-line:hover .business-photo {
      transform: translateY(-4px);
      filter: saturate(1.05) contrast(1.03);
      box-shadow: 20px 22px 0 rgba(0, 91, 143, 0.1);
    }

    .business-photo.metal {
      background-image: linear-gradient(90deg, rgba(15, 36, 56, 0.1), rgba(15, 36, 56, 0.02)), url("business/metal-pipes.jpg");
    }

    .business-photo.recycle {
      background-image: linear-gradient(90deg, rgba(15, 36, 56, 0.08), rgba(15, 36, 56, 0)), url("business/white-resin-pellets.jpg");
    }

    .business-photo.carbon {
      background-image: linear-gradient(90deg, rgba(15, 36, 56, 0.1), rgba(15, 36, 56, 0)), url("business/business-meeting-hands.jpg");
    }

    .business-line p {
      margin: 0;
      color: #506070;
      font-size: 14px;
      line-height: 2;
    }

    .business-lead {
      max-width: 680px;
      margin: 22px auto 0;
      color: #506070;
      font-size: 15px;
      line-height: 2;
    }

    .business-copy {
      display: grid;
      gap: 18px;
    }

    .business-points {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .business-points li {
      position: relative;
      padding-left: 18px;
      color: #34485a;
      font-size: 14px;
      line-height: 1.75;
      font-weight: 700;
    }

    .business-points li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.78em;
      width: 7px;
      height: 7px;
      background: var(--accent);
    }

    .business-gateway-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      max-width: 1180px;
      margin: 42px auto 0;
      background: rgba(0, 63, 115, 0.14);
    }

    .business-gateway {
      position: relative;
      min-height: 430px;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      padding: clamp(26px, 4vw, 48px);
      color: #ffffff;
      background: #0b2f50 center / cover no-repeat;
      text-decoration: none;
      isolation: isolate;
    }

    .business-gateway::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(180deg, rgba(3, 30, 53, 0.08), rgba(3, 30, 53, 0.94));
    }

    .business-gateway.metal {
      background-image: url("business/metal-pipes.jpg");
    }

    .business-gateway.plastics {
      background-image: url("business/white-resin-pellets.jpg");
    }

    .business-gateway.ai {
      background-image: url("featured/ai-data-center.jpg");
    }

    .business-gateway.decarbonization {
      background-image: url("featured/decarbonization-factory.jpg");
    }

    .business-gateway-content {
      max-width: 520px;
    }

    .business-gateway .num {
      display: block;
      margin-bottom: 22px;
      color: #ff6a5f;
      font-size: 13px;
      font-weight: 800;
    }

    .business-gateway h3 {
      margin: 0;
      font-size: clamp(24px, 2.3vw, 34px);
      line-height: 1.4;
    }

    .business-gateway p {
      margin: 18px 0 0;
      color: rgba(255, 255, 255, 0.8);
      font-size: 14px;
      line-height: 1.9;
    }

    .business-gateway-link {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      margin-top: 24px;
      color: #ffffff;
      font-size: 13px;
      font-weight: 800;
    }

    .business-gateway-link::after {
      content: "→";
      color: #ff6a5f;
      font-size: 18px;
    }

    .revenue-list {
      display: grid;
      gap: 6px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .products-section {
      padding: clamp(54px, 7vw, 92px) clamp(20px, 6vw, 96px);
      background: #f6f9fb;
      color: var(--navy);
    }

    .products-section > div:first-child {
      max-width: 720px;
      margin: 0 auto;
      text-align: center;
    }

    .products-section h2 {
      line-height: 1.3;
    }

    .products-section p:not(.section-label) {
      margin: 22px 0 0;
      color: #506070;
      font-size: 15px;
      line-height: 2;
    }

    .product-table {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      max-width: 1280px;
      margin: clamp(34px, 5vw, 56px) auto 0;
      background: rgba(0, 63, 115, 0.12);
    }

    .product-row {
      display: grid;
      grid-template-columns: 164px 1fr;
      gap: 26px;
      align-items: stretch;
      min-height: 218px;
      padding: 0;
      background: #ffffff;
      cursor: pointer;
      transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
    }

    .product-row:hover,
    .product-row.is-active {
      background: #f8fcff;
      box-shadow: inset 0 0 0 3px rgba(0, 91, 143, 0.11);
    }

    .product-row:focus-visible,
    .consult-card:focus-visible,
    .trade-node:focus-visible,
    .hero-button:focus-visible,
    .contact-button:focus-visible {
      outline: 3px solid rgba(0, 91, 143, 0.28);
      outline-offset: 4px;
    }

    .product-row.is-active {
      transform: translateY(-2px);
    }

    .product-row dt {
      margin: 0;
      padding: 28px 0 28px 26px;
      color: var(--navy);
      font-weight: 800;
      line-height: 1.7;
    }

    .product-row dd {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 168px;
      gap: 22px;
      align-items: stretch;
      margin: 0;
      padding: 26px 26px 26px 0;
      color: #506070;
      line-height: 1.9;
    }

    .product-row em {
      display: inline-block;
      margin-right: 10px;
      color: var(--accent);
      font-style: normal;
      font-weight: 800;
    }

    .product-row strong {
      display: block;
      margin-bottom: 10px;
      color: var(--navy);
      font-size: 18px;
      line-height: 1.55;
    }

    .product-row span {
      display: block;
      font-size: 14px;
      line-height: 1.9;
    }

    .product-photo {
      min-height: 154px;
      background-position: center;
      background-size: cover;
      transition: transform 0.62s cubic-bezier(0.16, 1, 0.3, 1), filter 0.62s ease;
    }

    .product-row:hover .product-photo,
    .product-row.is-active .product-photo {
      transform: scale(1.035);
      filter: saturate(1.05) contrast(1.04);
    }

    .product-photo.metal {
      background-image: linear-gradient(90deg, rgba(15, 36, 56, 0.04), rgba(15, 36, 56, 0.04)), url("business/nonferrous-metal.png");
    }

    .product-photo.resin {
      background-image: linear-gradient(90deg, rgba(15, 36, 56, 0.04), rgba(15, 36, 56, 0.04)), url("business/white-pet-pellets.jpg");
    }

    .product-photo.recycling {
      background-image: linear-gradient(90deg, rgba(15, 36, 56, 0.04), rgba(15, 36, 56, 0.04)), url("business/recycled-plastic-bottles.jpeg");
    }

    .product-photo.carbon {
      background-image: linear-gradient(90deg, rgba(15, 36, 56, 0.04), rgba(15, 36, 56, 0.04)), url("business/business-meeting-hands.jpg");
    }

    .material-catalog {
      max-width: 1280px;
      margin: clamp(30px, 5vw, 54px) auto 0;
      padding: clamp(28px, 4vw, 44px);
      background: #ffffff;
      box-shadow: 0 18px 44px rgba(15, 36, 56, 0.06);
    }

    .material-catalog-head {
      display: grid;
      grid-template-columns: minmax(220px, 0.58fr) minmax(0, 1.42fr);
      gap: clamp(24px, 4vw, 56px);
      align-items: start;
      padding-bottom: 26px;
      box-shadow: inset 0 -1px 0 rgba(15, 36, 56, 0.1);
    }

    .material-catalog-head h3 {
      margin: 0;
      color: var(--navy);
      font-size: clamp(24px, 2.4vw, 34px);
      line-height: 1.35;
    }

    .material-catalog-head p {
      margin: 0;
      color: #506070;
      font-size: 14px;
      line-height: 2;
    }

    .catalog-list {
      display: grid;
      gap: 0;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .catalog-list li {
      display: grid;
      grid-template-columns: 170px 1fr;
      gap: 28px;
      padding: 22px 0;
      box-shadow: inset 0 -1px 0 rgba(15, 36, 56, 0.09);
    }

    .catalog-list li:last-child {
      box-shadow: none;
      padding-bottom: 0;
    }

    .catalog-list strong {
      color: var(--navy);
      font-size: 16px;
      line-height: 1.7;
    }

    .catalog-list span {
      color: #506070;
      font-size: 14px;
      line-height: 1.85;
    }

    .catalog-note {
      margin-top: 24px;
      padding: 16px 18px;
      color: #34485a;
      background: var(--green-soft);
      font-size: 13px;
      line-height: 1.85;
      text-align: center;
    }

    .consult-section {
      padding: clamp(58px, 8vw, 104px) clamp(20px, 6vw, 96px);
      background:
        linear-gradient(90deg, #ffffff 0%, #ffffff 54%, #f6f9fb 54%, #f6f9fb 100%);
      color: var(--navy);
    }

    .consult-section > .section-label,
    .consult-section > h2,
    .consult-lead {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .consult-section h2 {
      line-height: 1.3;
    }

    .consult-lead {
      max-width: 720px;
      margin-top: 22px;
      color: #506070;
      font-size: 15px;
      line-height: 2;
      text-wrap: balance;
    }

    .consult-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(18px, 2.5vw, 32px);
      max-width: 1280px;
      margin: clamp(34px, 5vw, 56px) auto 0;
    }

    .consult-card {
      position: relative;
      min-height: 280px;
      padding: 32px 30px;
      background: #ffffff;
      box-shadow: 0 18px 44px rgba(15, 36, 56, 0.08);
      cursor: pointer;
      transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
    }

    .consult-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 6px;
      height: 72px;
      background: var(--accent);
      transition: height 0.24s ease;
    }

    .consult-card:hover,
    .consult-card.is-active {
      transform: translateY(-5px);
      background: #fbfdff;
      box-shadow: 0 24px 56px rgba(15, 36, 56, 0.12);
    }

    .consult-card:hover::before,
    .consult-card.is-active::before {
      height: 100%;
    }

    .consult-card span {
      display: block;
      margin-bottom: 22px;
      color: var(--green-deep);
      font-size: 12px;
      font-weight: 800;
    }

    .consult-card h3 {
      margin: 0 0 18px;
      color: var(--navy);
      font-size: clamp(22px, 2vw, 30px);
      line-height: 1.45;
    }

    .consult-card p {
      margin: 0;
      color: #506070;
      font-size: 14px;
      line-height: 1.95;
    }

    .consult-list {
      display: grid;
      grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
      gap: clamp(28px, 5vw, 72px);
      max-width: 1280px;
      margin: clamp(32px, 5vw, 58px) auto 0;
      padding: clamp(30px, 4vw, 48px);
      background: var(--navy);
      color: #ffffff;
    }

    .consult-list h3 {
      margin: 0;
      font-size: clamp(24px, 2.3vw, 36px);
      line-height: 1.35;
    }

    .consult-list p {
      margin: 18px 0 0;
      color: rgba(255, 255, 255, 0.74);
      font-size: 14px;
      line-height: 1.9;
    }

    .consult-items {
      display: grid;
      gap: 1px;
      margin: 0;
      padding: 0;
      list-style: none;
      background: rgba(255, 255, 255, 0.12);
    }

    .consult-items li {
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 18px;
      align-items: start;
      padding: 18px 0;
      background: var(--navy);
    }

    .consult-items em {
      color: var(--accent);
      font-style: normal;
      font-size: 13px;
      font-weight: 800;
    }

    .consult-items strong {
      display: block;
      color: #ffffff;
      font-size: 16px;
      line-height: 1.7;
    }

    .consult-items small {
      display: block;
      margin-top: 5px;
      color: rgba(255, 255, 255, 0.68);
      font-size: 13px;
      line-height: 1.8;
    }

    .flow-section {
      padding: clamp(58px, 8vw, 112px) clamp(20px, 6vw, 96px);
      background:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 9px),
        #005b8f;
      color: #ffffff;
    }

    .flow-section > .section-label,
    .flow-section > h2,
    .flow-lead {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .flow-section h2 {
      color: #ffffff;
    }

    .contact-section h2 {
      color: #ffffff;
    }

    .flow-section .section-label,
    .contact-section .section-label {
      color: rgba(255, 255, 255, 0.72);
    }

    .flow-steps {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 0;
      margin-top: 48px;
      position: relative;
    }

    .trade-map {
      width: min(100%, 1320px);
      margin: 46px auto 0;
      display: grid;
      gap: 26px;
    }

    .trade-map-main {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) 54px minmax(0, 1fr);
      align-items: center;
    }

    .trade-node {
      min-height: 178px;
      padding: 26px 28px;
      background: rgba(255, 255, 255, 0.13);
      cursor: pointer;
      transition: transform 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
    }

    .trade-node.center {
      background: rgba(255, 255, 255, 0.18);
      box-shadow: inset 4px 0 0 var(--accent);
    }

    .trade-node:hover,
    .trade-node.is-active {
      transform: translateY(-4px);
      background: rgba(255, 255, 255, 0.22);
      box-shadow: inset 4px 0 0 var(--accent), 0 18px 44px rgba(0, 0, 0, 0.16);
    }

    .trade-node small {
      display: block;
      margin-bottom: 16px;
      color: rgba(255, 255, 255, 0.7);
      font-size: 12px;
      font-weight: 800;
    }

    .trade-node strong {
      display: block;
      color: #ffffff;
      font-size: clamp(20px, 1.9vw, 28px);
      line-height: 1.45;
    }

    .trade-node p {
      margin: 14px 0 0;
      color: rgba(255, 255, 255, 0.78);
      font-size: 14px;
      line-height: 1.8;
    }

    .trade-arrow {
      position: relative;
      min-height: 178px;
      display: grid;
      place-items: center;
    }

    .trade-arrow::after {
      content: "";
      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-bottom: 14px solid transparent;
      border-left: 20px solid rgba(255, 255, 255, 0.72);
    }

    .process-list {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1px;
      background: rgba(255, 255, 255, 0.18);
    }

    .process-item {
      min-height: 150px;
      padding: 22px;
      background: rgba(255, 255, 255, 0.09);
    }

    .process-item span {
      display: block;
      margin-bottom: 16px;
      color: var(--accent);
      font-size: 13px;
      font-weight: 800;
    }

    .process-item strong {
      display: block;
      color: #ffffff;
      font-size: 18px;
      line-height: 1.5;
    }

    .process-item p {
      margin: 10px 0 0;
      color: rgba(255, 255, 255, 0.76);
      font-size: 13px;
      line-height: 1.75;
    }

    .deal-flow {
      position: relative;
      width: min(100%, 1320px);
      margin: clamp(34px, 5vw, 58px) auto 0;
      padding: clamp(28px, 4vw, 46px);
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.055));
    }

    .deal-flow::before {
      content: none;
    }

    .deal-flow::after {
      content: none;
    }

    .deal-flow-head {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
      gap: clamp(24px, 4vw, 58px);
      align-items: start;
      margin-bottom: 28px;
    }

    .deal-flow-head h3 {
      margin: 0;
      color: #ffffff;
      font-size: clamp(34px, 3.1vw, 46px);
      line-height: 1.26;
      font-weight: 800;
    }

    .deal-flow-head h3::before {
      content: none;
    }

    .deal-flow-head p {
      margin: 0;
      color: rgba(255, 255, 255, 0.72);
      font-size: 13px;
      line-height: 2;
      letter-spacing: 0.1em;
    }

    .deal-steps {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 clamp(28px, 5vw, 70px);
      margin: 0;
      padding: 0;
      list-style: none;
      grid-auto-flow: column;
      grid-template-rows: repeat(3, minmax(0, auto));
    }

    .deal-steps li {
      position: relative;
      display: grid;
      grid-template-columns: 64px 1fr;
      gap: 20px;
      min-height: 118px;
      padding: 0 0 30px;
    }

    .deal-steps li::before {
      content: "";
      position: absolute;
      left: 21px;
      top: 54px;
      bottom: 0;
      width: 1px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08));
    }

    .deal-steps li:nth-child(3)::before,
    .deal-steps li:nth-child(6)::before {
      display: none;
    }

    .deal-steps em {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      color: #ffffff;
      background: var(--accent);
      border-radius: 50%;
      box-shadow: none;
      font-style: normal;
      font-family: "Roboto Mono", "SFMono-Regular", Consolas, monospace;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.1em;
    }

    .deal-steps li > div {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 64px;
      grid-template-areas:
        "title icon"
        "body icon";
      column-gap: 24px;
      align-items: start;
      min-height: 150px;
      padding: 30px 32px;
      background: rgba(255, 255, 255, 0.085);
      transition: background 0.42s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @media (hover: hover) and (pointer: fine) {
      .deal-steps li:hover > div {
        background: rgba(255, 255, 255, 0.11);
        transform: translateY(-3px);
      }
    }

    .deal-steps li > div::after {
      content: none;
    }

    .step-icon {
      position: relative;
      z-index: 1;
      display: inline-grid;
      grid-area: icon;
      justify-self: end;
      align-self: center;
      place-items: center;
      width: 58px;
      height: 58px;
      margin: 0;
      color: #ffffff;
      opacity: 1;
    }

    .step-icon img {
      display: block;
      width: 48px;
      height: 48px;
      object-fit: contain;
      object-position: center;
    }

    .deal-steps strong {
      position: relative;
      z-index: 1;
      display: block;
      grid-area: title;
      color: #ffffff;
      font-size: 21px;
      line-height: 1.5;
      font-weight: 800;
    }

    .deal-steps li > div > span:not(.step-icon) {
      position: relative;
      z-index: 1;
      display: block;
      grid-area: body;
      max-width: 25em;
      margin-top: 14px;
      color: rgba(255, 255, 255, 0.7);
      font-size: 11px;
      line-height: 1.9;
    }

    .flow-lead {
      max-width: 680px;
      margin: 22px auto 0;
      color: rgba(255, 255, 255, 0.78);
      font-size: 15px;
      line-height: 2;
    }

    .flow-steps::before {
      content: "";
      position: absolute;
      left: 8%;
      right: 8%;
      top: 42px;
      height: 2px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.76), rgba(255, 74, 61, 0.72));
    }

    .flow-step {
      position: relative;
      min-height: 210px;
      padding: 82px 18px 22px;
    }

    .flow-step::before {
      content: "";
      position: absolute;
      top: 22px;
      left: 18px;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      background: rgba(255, 255, 255, 0.08);
      transform: rotate(45deg);
    }

    .flow-step span {
      position: absolute;
      z-index: 1;
      top: 34px;
      left: 22px;
      color: #ffffff;
      font-size: 12px;
      font-weight: 800;
    }

    .flow-step strong {
      display: block;
      font-size: 22px;
      line-height: 1.55;
    }

    .flow-step p {
      margin: 14px 0 0;
      color: rgba(255, 255, 255, 0.72);
      font-size: 14px;
      line-height: 1.8;
    }

    .flow-step.final::before {
      border-color: rgba(255, 74, 61, 0.74);
      background: rgba(255, 74, 61, 0.18);
    }

    .flow-caption {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      margin-top: 22px;
      background: rgba(255, 255, 255, 0.18);
      border: 1px solid rgba(255, 255, 255, 0.16);
    }

    .flow-caption div {
      padding: 18px 20px;
      background: rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.82);
      font-size: 14px;
      line-height: 1.8;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(90deg, rgba(8, 21, 33, 0.88) 0%, rgba(8, 21, 33, 0.56) 42%, rgba(8, 21, 33, 0.18) 100%),
        linear-gradient(180deg, rgba(8, 21, 33, 0.1) 0%, rgba(8, 21, 33, 0.88) 100%);
      pointer-events: none;
    }

    .motion {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: var(--navy);
    }

    .photo-bg {
      position: absolute;
      inset: -10%;
      background-position: center;
      background-size: cover;
      filter: saturate(1.08) contrast(1.06);
      animation: photoDrift 8s ease-in-out infinite alternate;
      will-change: transform, filter;
    }

    .photo-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 75% 44%, rgba(31, 138, 131, 0.22), transparent 34%),
        linear-gradient(90deg, rgba(8, 21, 33, 0.7) 0%, rgba(8, 21, 33, 0.36) 50%, rgba(8, 21, 33, 0.18) 100%);
      mix-blend-mode: multiply;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 920px;
    }

    .eyebrow {
      margin: 0 0 22px;
      color: rgba(255, 255, 255, 0.72);
      font-size: clamp(12px, 1.5vw, 15px);
      font-weight: 500;
      letter-spacing: 0.12em;
    }

    h1 {
      margin: 0;
      font-size: clamp(42px, 7vw, 104px);
      line-height: 1.08;
      letter-spacing: 0;
      font-weight: 800;
      text-wrap: balance;
    }

    .lead {
      max-width: 720px;
      margin: 26px 0 0;
      color: rgba(255, 255, 255, 0.84);
      font-size: clamp(16px, 2vw, 24px);
      line-height: 1.8;
    }

    .hero.final-preview {
      align-items: center;
    }

    .hero.final-preview::after {
      background:
        linear-gradient(90deg, rgba(3, 27, 47, 0.93) 0%, rgba(3, 27, 47, 0.72) 42%, rgba(3, 27, 47, 0.14) 78%, rgba(3, 27, 47, 0.06) 100%),
        linear-gradient(180deg, rgba(8, 21, 33, 0.02) 54%, rgba(8, 21, 33, 0.2) 100%);
    }

    .hero.final-preview::before {
      content: none;
    }

    .final-preview .hero-texture {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      opacity: 0.18;
      background-image:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.08) 0 1px, rgba(5, 19, 30, 0.2) 1px 2px, transparent 2px 5px),
        linear-gradient(90deg, rgba(15, 36, 56, 0.1), transparent 48%);
      mix-blend-mode: normal;
    }

    .final-preview .hero-content {
      z-index: 4;
      max-width: 660px;
      color: #ffffff;
      align-self: center;
      padding-top: 24px;
    }

    .final-preview .eyebrow {
      display: none;
    }

    .final-preview .lead {
      max-width: 520px;
      color: rgba(255, 255, 255, 0.88);
      font-size: clamp(15px, 1.25vw, 18px);
      line-height: 1.95;
    }

    .final-preview h1 {
      max-width: 700px;
      font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Times New Roman", serif;
      font-size: clamp(44px, 4vw, 68px);
      line-height: 1.22;
      font-weight: 700;
      text-shadow: 0 2px 18px rgba(0, 25, 48, 0.42);
      text-wrap: balance;
      animation: heroCopyIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    .final-preview h1 .line {
      display: block;
      white-space: nowrap;
    }

    .final-preview .lead,
    .final-preview .hero-proof {
      animation: heroCopyIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    .final-preview .lead {
      animation-delay: 0.16s;
    }

    .final-preview .hero-proof {
      animation-delay: 0.28s;
      gap: 16px;
      max-width: 480px;
    }

    .message-section,
    .company-section,
    .faq-section,
    .contact-section {
      padding: clamp(58px, 8vw, 112px) clamp(20px, 6vw, 96px);
    }

    .message-section {
      position: relative;
      overflow: hidden;
      display: grid;
      justify-items: center;
      align-content: center;
      min-height: clamp(420px, 44vw, 620px);
      padding-top: clamp(88px, 10vw, 150px);
      padding-bottom: clamp(88px, 10vw, 150px);
      text-align: center;
      background: url("message-earth.jpg") center / cover no-repeat;
      color: var(--navy);
    }

    .message-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(245, 249, 250, 0.42), rgba(207, 224, 229, 0.54)),
        rgba(9, 72, 105, 0.12);
      pointer-events: none;
    }

    .message-section::after {
      content: "";
      position: absolute;
      inset: clamp(34px, 5vw, 72px) clamp(20px, 6vw, 96px);
      max-width: 1280px;
      margin: auto;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(238, 246, 248, 0.88));
      box-shadow: 0 24px 70px rgba(5, 30, 47, 0.08);
      pointer-events: none;
    }

    .message-section > div,
    .message-section > p {
      position: relative;
      z-index: 1;
    }

    .message-section > div {
      display: grid;
      justify-items: center;
    }

    .message-section p {
      margin: 0;
      color: #3e5365;
      font-size: clamp(15px, 1.25vw, 17px);
      line-height: 2.1;
    }

    .message-section > p:not(.section-label) {
      max-width: 940px;
      margin-top: clamp(28px, 4vw, 42px);
      color: rgba(33, 54, 71, 0.82);
      line-height: 2.2;
      text-align: center;
    }

    .message-section .section-label {
      color: rgba(0, 73, 120, 0.72);
    }

    .message-section h2 {
      max-width: 980px;
      text-align: center;
      text-wrap: balance;
    }

    .message-section h2,
    .company-section h2,
    .contact-section h2 {
      line-height: 1.3;
    }

    .company-section {
      background: #ffffff;
      color: var(--navy);
    }

    .faq-section {
      background:
        linear-gradient(180deg, #f5f8fa 0%, #ffffff 100%);
      color: var(--navy);
    }

    .faq-inner {
      display: grid;
      grid-template-columns: minmax(260px, 0.68fr) minmax(0, 1.32fr);
      gap: clamp(34px, 6vw, 92px);
      align-items: start;
    }

    .faq-intro {
      margin: 28px 0 0;
      color: #516475;
      font-size: 15px;
      line-height: 2.05;
    }

    .faq-list {
      display: grid;
      gap: 2px;
      margin: 0;
      background: rgba(0, 63, 115, 0.1);
    }

    .faq-item {
      background: rgba(255, 255, 255, 0.92);
    }

    .faq-item summary {
      position: relative;
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 18px;
      align-items: center;
      min-height: 82px;
      padding: 22px clamp(20px, 3vw, 34px);
      list-style: none;
      cursor: pointer;
      color: var(--navy);
      font-size: clamp(16px, 1.2vw, 18px);
      font-weight: 800;
      line-height: 1.65;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary::before {
      content: "Q";
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      color: #ffffff;
      background: var(--accent);
      border-radius: 50%;
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.08em;
    }

    .faq-item summary::after {
      content: "";
      width: 10px;
      height: 10px;
      border-right: 2px solid rgba(0, 63, 115, 0.72);
      border-bottom: 2px solid rgba(0, 63, 115, 0.72);
      transform: rotate(45deg) translateY(-2px);
      transition: transform 0.22s ease;
    }

    .faq-item[open] summary::after {
      transform: rotate(-135deg) translateY(-2px);
    }

    .faq-answer {
      margin: 0;
      padding: 0 clamp(20px, 3vw, 34px) 28px calc(clamp(20px, 3vw, 34px) + 52px);
      color: #4f6375;
      font-size: 15px;
      line-height: 2;
    }

    .company-table {
      width: 100%;
      margin-top: 34px;
      border-collapse: collapse;
      border-top: 2px solid var(--navy);
    }

    .company-layout {
      display: grid;
      grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
      gap: clamp(28px, 6vw, 82px);
      align-items: start;
    }

    .company-intro {
      margin: 28px 0 0;
      color: #3e5365;
      font-size: 15px;
      line-height: 2;
    }

    .company-fields {
      display: grid;
      gap: 10px;
      margin-top: 28px;
      padding: 0;
      list-style: none;
    }

    .company-fields li {
      padding: 12px 14px;
      color: var(--navy);
      background: var(--green-soft);
      border-left: 4px solid var(--accent);
      font-size: 14px;
      font-weight: 800;
    }

    .company-table th,
    .company-table td {
      padding: 22px 0;
      border-bottom: 1px solid rgba(15, 36, 56, 0.14);
      text-align: left;
      vertical-align: top;
      line-height: 1.8;
    }

    .company-table th {
      width: 220px;
      color: var(--green-deep);
      font-weight: 800;
    }

    .contact-section {
      background: linear-gradient(135deg, #06233f 0%, #003f73 72%, #005b8f 130%);
      color: #ffffff;
    }

    .contact-inner {
      display: grid;
      grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.1fr);
      gap: clamp(28px, 6vw, 84px);
      align-items: center;
    }

    .contact-section p {
      margin: 0;
      color: rgba(255, 255, 255, 0.82);
      font-size: clamp(15px, 1.25vw, 17px);
      line-height: 2;
    }

    .contact-section .contact-description {
      margin-top: 24px;
    }

    .page p.section-label {
      margin: 0 0 14px;
      color: var(--green-deep);
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: 12px;
      font-weight: 300;
      line-height: 1;
      letter-spacing: 0.16em;
    }

    .page .flow-section p.section-label,
    .page .contact-section p.section-label {
      color: rgba(255, 255, 255, 0.72);
    }

    .contact-button {
      position: relative;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: min(100%, 540px);
      min-height: 116px;
      margin-top: 28px;
      padding: 0 36px;
      border: 1px solid #879cab;
      color: #ffffff;
      text-decoration: none;
      font-size: 22px;
      font-weight: 800;
      background: #29465f;
      transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
    }

    .contact-button:hover {
      transform: translateY(-4px);
      background: #314f69;
      border-color: #a8b8c3;
    }

    .final-preview .hero-actions {
      display: none;
    }

    .option-note {
      margin-top: 32px;
      display: inline-flex;
      align-items: center;
      min-height: 42px;
      padding: 0 18px;
      color: rgba(255, 255, 255, 0.86);
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(14px);
      font-size: 14px;
    }

    .options {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      padding: 28px clamp(20px, 5vw, 82px) 64px;
      color: #162638;
    }

    .card {
      display: block;
      min-height: 156px;
      padding: 22px;
      border: 1px solid rgba(15, 36, 56, 0.12);
      background: #ffffff;
      color: inherit;
      text-decoration: none;
      box-shadow: 0 18px 46px rgba(15, 36, 56, 0.08);
    }

    .card strong {
      display: block;
      margin-bottom: 10px;
      font-size: 18px;
      color: var(--navy);
    }

    .card span {
      display: block;
      color: #506070;
      font-size: 14px;
      line-height: 1.75;
    }

    .variant-a .motion {
      background: #081521;
    }

    .variant-a .photo-bg {
      background-image: url("copper-materials.png");
      animation-name: copperCameraA;
    }

    .variant-b .photo-bg {
      background-image: url("copper-recycling.png");
      animation-name: copperCameraB;
    }

    .variant-c .photo-bg {
      background-image: url("copper-logistics.png");
      animation-name: copperCameraC;
    }

    .variant-b .motion {
      background: #081521;
    }

    .eco-glow {
      position: absolute;
      right: 10vw;
      top: 18vh;
      width: 44vw;
      height: 44vw;
      border-radius: 50%;
      border: 1px solid rgba(113, 211, 155, 0.48);
      box-shadow: 0 0 86px rgba(31, 138, 131, 0.28), inset 0 0 68px rgba(31, 138, 131, 0.14);
      animation: ecoPulse 7s ease-in-out infinite alternate;
      opacity: 0.72;
    }

    .copper-shine {
      position: absolute;
      top: 0;
      bottom: 0;
      left: -30vw;
      width: 34vw;
      background: linear-gradient(90deg, transparent, rgba(255, 220, 170, 0.36), rgba(255, 255, 255, 0.2), transparent);
      transform: skewX(-16deg);
      animation: shineSweep 4.6s ease-in-out infinite;
      mix-blend-mode: screen;
    }

    .video-sweep {
      position: absolute;
      inset: 0;
      overflow: hidden;
      opacity: 0.72;
      mix-blend-mode: screen;
    }

    .video-sweep span {
      position: absolute;
      left: -28vw;
      width: 38vw;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(255, 226, 186, 0.42), rgba(31, 138, 131, 0.28), transparent);
      animation: lineSweep 3.8s linear infinite;
    }

    .video-sweep span:nth-child(1) { top: 24%; animation-delay: -0.4s; }
    .video-sweep span:nth-child(2) { top: 47%; animation-delay: -1.8s; opacity: 0.72; }
    .video-sweep span:nth-child(3) { top: 71%; animation-delay: -2.7s; opacity: 0.54; }

    .heat-haze {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.04) 42%, transparent 58%),
        repeating-linear-gradient(90deg, transparent 0 80px, rgba(255, 255, 255, 0.025) 80px 82px);
      animation: hazeMove 5.2s ease-in-out infinite alternate;
      opacity: 0.55;
    }

    .variant-c .motion {
      background: #081521;
    }

    .material-tags {
      position: absolute;
      z-index: 1;
      right: clamp(18px, 5vw, 82px);
      bottom: clamp(26px, 7vw, 92px);
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
      max-width: 560px;
      opacity: 0.86;
    }

    .material-tags span {
      padding: 10px 14px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(8, 21, 33, 0.42);
      backdrop-filter: blur(12px);
      color: rgba(255, 255, 255, 0.82);
      font-size: 13px;
      font-weight: 700;
    }

    @keyframes photoDrift {
      from { transform: scale(1.04) translate3d(0, 0, 0); filter: saturate(1.06) contrast(1.05); }
      to { transform: scale(1.18) translate3d(-7vw, -3vh, 0); filter: saturate(1.16) contrast(1.1); }
    }

    @keyframes copperCameraA {
      from { transform: scale(1.04) translate3d(0, 0, 0); filter: saturate(1.08) contrast(1.05); }
      to { transform: scale(1.2) translate3d(-8vw, -4vh, 0); filter: saturate(1.18) contrast(1.12); }
    }

    @keyframes copperCameraB {
      from { transform: scale(1.05) translate3d(-3vw, 0, 0); filter: saturate(1.08) contrast(1.04); }
      to { transform: scale(1.19) translate3d(5vw, -3vh, 0); filter: saturate(1.2) contrast(1.09); }
    }

    @keyframes copperCameraC {
      from { transform: scale(1.04) translate3d(2vw, -1vh, 0); filter: saturate(1.06) contrast(1.05); }
      to { transform: scale(1.17) translate3d(-6vw, 2vh, 0); filter: saturate(1.15) contrast(1.1); }
    }

    @keyframes ecoPulse {
      from { transform: scale(0.95); opacity: 0.44; }
      to { transform: scale(1.08); opacity: 0.86; }
    }

    @keyframes shineSweep {
      from { transform: translateX(0) skewX(-16deg); opacity: 0; }
      28% { opacity: 0.72; }
      72% { opacity: 0.36; }
      to { transform: translateX(132vw) skewX(-16deg); opacity: 0; }
    }

    @keyframes lineSweep {
      from { transform: translateX(0); opacity: 0; }
      16% { opacity: 1; }
      72% { opacity: 0.56; }
      to { transform: translateX(150vw); opacity: 0; }
    }

    @keyframes hazeMove {
      from { transform: translate3d(-4vw, 0, 0) skewX(-2deg); }
      to { transform: translate3d(5vw, 0, 0) skewX(2deg); }
    }

    @keyframes tapRipple {
      to {
        transform: translate(-50%, -50%) scale(16);
        opacity: 0;
      }
    }

    @keyframes heroCopyIn {
      from {
        opacity: 0;
        transform: translateY(18px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.68s ease, transform 0.68s ease;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal:nth-child(2) {
      transition-delay: 0.08s;
    }

    .reveal:nth-child(3) {
      transition-delay: 0.16s;
    }

    @keyframes photoSettleIn {
      from {
        opacity: 0.88;
        transform: translateY(18px) scale(1.015);
        filter: saturate(0.94) contrast(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: saturate(1) contrast(1);
      }
    }

    @keyframes stepNumberIn {
      0% {
        opacity: 0;
        transform: scale(0.78);
      }
      70% {
        opacity: 1;
        transform: scale(1.06);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes stepLineIn {
      from {
        opacity: 0;
        transform: scaleY(0);
      }
      to {
        opacity: 1;
        transform: scaleY(1);
      }
    }

    @keyframes stepCardIn {
      from {
        opacity: 0;
        transform: translateY(16px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .business-line.reveal.is-visible .business-photo,
    .product-row.reveal.is-visible .product-photo {
      animation: photoSettleIn 0.92s cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-delay: 0.12s;
    }

    .product-row {
      overflow: hidden;
    }

    @media (hover: hover) and (pointer: fine) {
      .product-row:hover {
        transform: translateY(-3px);
      }

      .material-catalog:hover {
        box-shadow: 0 22px 52px rgba(15, 36, 56, 0.08);
      }
    }

    .deal-flow.reveal {
      transform: translateY(18px);
    }

    .deal-flow.reveal .deal-steps li {
      --step-delay: 0s;
    }

    .deal-flow.reveal .deal-steps li::before {
      opacity: 0;
      transform: scaleY(0);
      transform-origin: top;
    }

    .deal-flow.reveal .deal-steps em {
      opacity: 0;
      transform: scale(0.78);
    }

    .deal-flow.reveal .deal-steps li > div {
      opacity: 0;
      transform: translateY(16px);
    }

    .deal-flow.reveal.is-visible .deal-steps li:nth-child(1) {
      --step-delay: 0.04s;
    }

    .deal-flow.reveal.is-visible .deal-steps li:nth-child(2) {
      --step-delay: 0.22s;
    }

    .deal-flow.reveal.is-visible .deal-steps li:nth-child(3) {
      --step-delay: 0.4s;
    }

    .deal-flow.reveal.is-visible .deal-steps li:nth-child(4) {
      --step-delay: 0.58s;
    }

    .deal-flow.reveal.is-visible .deal-steps li:nth-child(5) {
      --step-delay: 0.76s;
    }

    .deal-flow.reveal.is-visible .deal-steps li:nth-child(6) {
      --step-delay: 0.94s;
    }

    .deal-flow.reveal.is-visible .deal-steps em {
      animation: stepNumberIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-delay: var(--step-delay);
    }

    .deal-flow.reveal.is-visible .deal-steps li::before {
      animation: stepLineIn 0.64s cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-delay: calc(var(--step-delay) + 0.1s);
    }

    .deal-flow.reveal.is-visible .deal-steps li > div {
      animation: stepCardIn 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-delay: calc(var(--step-delay) + 0.14s);
    }

    .deal-flow.reveal.is-visible .deal-steps li:nth-child(3)::before,
    .deal-flow.reveal.is-visible .deal-steps li:nth-child(6)::before {
      animation: none;
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }

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

    }

    @media (max-width: 760px) {
      .hero.final-preview::after {
        background:
          linear-gradient(180deg, rgba(3, 27, 47, 0.18) 0%, rgba(3, 27, 47, 0.72) 42%, rgba(3, 27, 47, 0.92) 72%, rgba(3, 27, 47, 0.86) 100%),
          linear-gradient(90deg, rgba(3, 27, 47, 0.48), rgba(3, 27, 47, 0.04) 88%);
      }

      .site-header {
        padding: 14px 16px;
        gap: 12px;
      }

      .brand {
        min-height: 46px;
      }

      .brand img {
        width: 108px;
      }

      .label {
        display: none;
      }

      .global-nav {
        flex: 0 0 auto;
        gap: 0;
        max-width: none;
        overflow: visible;
        padding-bottom: 0;
      }

      .global-nav a {
        white-space: nowrap;
        font-size: 12px;
      }

      .global-nav a:not(:last-child) {
        display: none;
      }

      .global-nav a:last-child {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 0 14px;
        color: #ffffff;
        background: rgba(0, 63, 115, 0.86);
        letter-spacing: 0.02em;
      }

      .global-nav a:last-child::after {
        display: none;
      }

      .nav-dropdown { display: none; }
      .mobile-menu { position: relative; display: block; }
      .mobile-menu summary { display: grid; place-items: center; width: 38px; height: 38px; color: var(--navy); background: rgba(255,255,255,.65); cursor: pointer; font-size: 0; list-style: none; }
      .mobile-menu summary::before { content: "☰"; font-size: 20px; }
      .mobile-menu[open] summary::before { content: "×"; }
      .mobile-menu-panel { position: absolute; top: 48px; right: -82px; width: min(330px, calc(100vw - 24px)); padding: 12px; background: #fff; box-shadow: 0 18px 38px rgba(4,35,60,.22); }
      .mobile-menu-panel strong { display: block; padding: 10px 12px 6px; color: var(--navy); font-size: 12px; }
      .mobile-menu-panel a, .global-nav .mobile-menu-panel a:last-child { display: block; min-height: 0; padding: 12px; color: var(--navy); background: none; font-size: 13px; }
      .global-nav .mobile-menu-panel a { display: block !important; }

      .final-preview h1 {
        max-width: min(100%, 11em);
        font-size: clamp(26px, 8.4vw, 44px);
        line-height: 1.28;
      }

      .final-preview h1 .line {
        white-space: nowrap;
      }

      @media (max-width: 360px) {
        .final-preview h1 {
          font-size: 25px;
        }
      }

      .hero {
        min-height: 92vh;
        padding-top: 96px;
      }

      .info-strip,
      .material-strip,
      .statement,
      .strength-grid,
      .strength-detail,
      .strength-list,
      .products-section,
      .product-table,
      .material-catalog-head,
      .catalog-list li,
      .consult-grid,
      .consult-list,
      .business-line,
      .business-gateway-grid,
      .flow-steps,
      .trade-map-main,
      .process-list,
      .deal-flow-head,
      .deal-steps,
      .flow-caption,
      .message-section,
      .company-layout,
      .faq-inner,
      .contact-inner {
        grid-template-columns: 1fr;
      }

      .business-gateway {
        min-height: 360px;
        padding: 28px;
      }

      .business-gateway h3 {
        font-size: 22px;
      }

      .hero-proof {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 340px;
        gap: 10px;
      }

      .strip-list {
        grid-template-columns: 1fr;
      }

      .strip-item,
      .business-line {
        gap: 12px;
      }

      .business-line::before {
        display: none;
      }

      .business-photo {
        min-height: 220px;
      }

      .product-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 18px 0;
      }

      .product-row dt,
      .product-row dd {
        padding-left: 18px;
        padding-right: 18px;
      }

      .product-row dd {
        grid-template-columns: 1fr;
        padding-top: 0;
      }

      .faq-item summary {
        grid-template-columns: auto 1fr;
        gap: 14px;
        padding-right: 48px;
      }

      .faq-item summary::after {
        position: absolute;
        right: 22px;
      }

      .faq-answer {
        padding-left: 22px;
      }

      .product-photo {
        min-height: 210px;
      }

      .consult-section {
        background: #ffffff;
      }

      .consult-card {
        min-height: auto;
      }

      .consult-items li {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .deal-steps li {
        grid-template-columns: 56px 1fr;
      }

      .deal-steps li > div {
        grid-template-columns: minmax(0, 1fr) 52px;
        column-gap: 16px;
        min-height: auto;
        padding: 24px 22px;
      }

      .step-icon {
        width: 48px;
        height: 48px;
      }

      .step-icon img {
        width: 38px;
        height: 38px;
      }

      .deal-steps {
        grid-auto-flow: row;
        grid-template-rows: none;
      }

      .deal-steps li::before {
        left: 21px;
      }

      .deal-steps li:nth-child(3)::before,
      .deal-steps li:nth-child(6)::before {
        display: block;
      }

      .deal-steps li:last-child::before {
        display: none;
      }

      .flow-step {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
      }

      .trade-arrow {
        min-height: 42px;
      }

      .trade-arrow::before {
        content: none;
      }

      .trade-arrow::after {
        border-left: 14px solid transparent;
        border-right: 14px solid transparent;
        border-top: 20px solid rgba(255, 255, 255, 0.72);
        border-bottom: 0;
      }

      .options {
        grid-template-columns: 1fr;
      }

      .material-tags {
        display: none;
      }
    }
    /* v25: varied editorial rhythm for the corporate top page. */
    .home-preview .strength-detail[hidden] {
      display: none !important;
    }

    .home-preview .statement {
      position: relative;
      grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
      gap: clamp(48px, 9vw, 150px);
      padding-top: clamp(92px, 11vw, 154px);
      padding-bottom: clamp(92px, 11vw, 154px);
      background: #f4f6f7;
    }

    .home-preview .statement::before {
      content: none;
    }

    .home-preview .statement > div:first-child {
      align-self: start;
      padding-top: 4px;
    }

    .home-preview .statement h2 {
      max-width: 11em;
      font-size: clamp(30px, 3vw, 44px);
      line-height: 1.45;
      letter-spacing: 0;
    }

    .home-preview .statement-text {
      max-width: 720px;
      font-size: clamp(15px, 1.15vw, 17px);
      line-height: 2.2;
    }

    .home-preview .strength-grid {
      gap: clamp(18px, 2.6vw, 38px);
      margin-top: 52px;
      border: 0;
      background: transparent;
    }

    .home-preview .strength-card {
      min-height: 0;
      padding: 28px 0 0;
      border-top: 1px solid rgba(8, 47, 78, .24);
      background: transparent;
    }

    .home-preview .strength-card span {
      color: var(--accent);
    }

    .home-preview .message-section {
      justify-items: start;
      align-content: center;
      min-height: clamp(520px, 52vw, 720px);
      padding-left: max(clamp(24px, 8vw, 120px), calc((100vw - 1440px) / 2 + 72px));
      padding-right: clamp(24px, 8vw, 120px);
      text-align: left;
      background-position: center 38%;
    }

    .home-preview .message-section::before {
      background: linear-gradient(90deg, rgba(3, 31, 54, .9) 0%, rgba(3, 31, 54, .72) 42%, rgba(3, 31, 54, .18) 76%, rgba(3, 31, 54, .04) 100%);
    }

    .home-preview .message-section::after {
      display: none;
    }

    .home-preview .message-section > div {
      justify-items: start;
    }

    .home-preview .message-section .section-label {
      color: rgba(255, 255, 255, .64);
    }

    .home-preview .message-section h2 {
      max-width: 640px;
      color: #fff;
      font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
      font-size: clamp(34px, 4vw, 56px);
      line-height: 1.45;
      text-align: left;
    }

    .home-preview .message-section > p:not(.section-label) {
      max-width: 700px;
      margin-top: 34px;
      color: rgba(255, 255, 255, .82);
      line-height: 2.15;
      text-align: left;
    }

    .home-preview .company-section {
      padding-top: clamp(82px, 9vw, 128px);
      padding-bottom: clamp(82px, 9vw, 128px);
    }

    .home-preview .company-layout {
      grid-template-columns: minmax(220px, .5fr) minmax(0, 1.5fr);
      gap: clamp(52px, 9vw, 140px);
    }

    .home-preview .company-section h2,
    .home-preview .contact-section h2 {
      font-size: clamp(28px, 2.6vw, 40px);
    }

    .home-preview .company-fields li {
      padding: 10px 0 10px 28px;
      border-left: 0;
      background: transparent;
      font-size: 13px;
      line-height: 1.65;
    }

    .home-preview .company-fields {
      position: relative;
      gap: 12px;
      border-left: 0;
    }

    .home-preview .company-fields::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 2px;
      height: 54px;
      background: var(--accent);
    }

.home-preview .company-table {
  margin-top: 0;
  border-top: 0;
}

    .home-preview .contact-section {
      padding-top: clamp(72px, 8vw, 108px);
      padding-bottom: clamp(72px, 8vw, 108px);
      background: #062b49;
    }

    .home-preview .contact-inner {
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      max-width: 980px;
      margin-inline: auto;
      text-align: center;
    }

    .home-preview .contact-description {
      max-width: 760px;
      margin-inline: auto;
    }

    .home-preview .contact-button {
      width: min(100%, 640px);
      margin-top: 22px;
    }

    .home-preview .contact-section h2 {
      color: #fff;
      line-height: 1.5;
    }

    /* Corporate typography rhythm shared with the specialist pages. */
    .home-preview {
      font-feature-settings: "palt" 1;
      text-rendering: optimizeLegibility;
    }

    .home-preview .section-label,
    .home-preview p.section-label {
      margin-bottom: 14px;
      color: #6f8ea2;
      font-size: 11px;
      font-weight: 300;
      line-height: 1.35;
      letter-spacing: .12em;
    }

    .home-preview :is(.statement,.company-section,.contact-section) h2 {
      font-size: clamp(30px, 3vw, 44px);
      font-weight: 700;
      line-height: 1.45;
      letter-spacing: 0;
      text-wrap: balance;
    }

    .home-preview :is(.statement-text,.company-intro,.faq-intro,.contact-section p) {
      font-size: 15px;
      line-height: 1.95;
      letter-spacing: 0;
    }

    .home-preview .statement-text {
      max-width: 720px;
    }

    .home-preview .company-layout {
      align-items: start;
    }

    @media (max-width: 760px) {
      .home-preview .statement {
        grid-template-columns: 1fr;
        gap: 34px;
        padding-top: 82px;
        padding-bottom: 82px;
      }

      .home-preview .strength-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 42px;
      }

      .home-preview .message-section {
        min-height: 620px;
        padding: 86px 24px;
        background-position: 62% center;
      }

      .home-preview .message-section::before {
        background: rgba(3, 31, 54, .74);
      }

      .home-preview .company-layout,
      .home-preview .contact-inner {
        grid-template-columns: 1fr;
        gap: 44px;
      }
    }