/* JLC homepage styles extracted from the approved homepage design. */
:root {
        --ink: #11161b;
        --ink-2: #2a3036;
        --steel: #7d8a92;
        --steel-deep: #303942;
        --copper: #b9c6cd;
        --moss: #6f7c84;
        --paper: #eceff0;
        --cloud: #d8dde0;
        --metal: #c9d0d4;
        --metal-bright: #f9fbfc;
        --navy: #1d252c;
        --white: #ffffff;
        --muted: #5d666d;
        --line: rgba(17, 22, 27, 0.14);
        --line-light: rgba(255, 255, 255, 0.2);
        --shadow: 0 24px 60px rgba(17, 22, 27, 0.18);
        --brushed: linear-gradient(105deg, #f7f9fa 0%, #bac4ca 28%, #eef2f4 48%, #7f8c94 76%, #dce2e5 100%);
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        font-family: "IBM Plex Sans", Arial, sans-serif;
        line-height: 1.55;
        color: var(--ink);
        background:
          linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(171, 181, 188, 0.22), rgba(255, 255, 255, 0.52)),
          linear-gradient(180deg, var(--paper), #f8fafb);
        overflow-x: hidden;
      }

      body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background-image:
          linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 32%, rgba(68, 77, 84, 0.07) 48%, transparent 64%),
          repeating-linear-gradient(90deg, rgba(17, 22, 27, 0.035) 0, rgba(17, 22, 27, 0.035) 1px, transparent 1px, transparent 12px);
        background-size: 100% 100%, 24px 24px;
        pointer-events: none;
      }

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

      img {
        display: block;
        max-width: 100%;
      }

      button,
input,
select,
textarea {
        font: inherit;
      }

      .container {
        width: min(1180px, calc(100% - 40px));
        margin: 0 auto;
      }

      .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid transparent;
        padding: 11px 18px;
        font-weight: 700;
        cursor: pointer;
        transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
      }

      .btn:hover {
        transform: translateY(-2px);
      }

      .btn-primary {
        border-color: rgba(255, 255, 255, 0.34);
        background: var(--brushed);
        color: var(--navy);
        box-shadow: 0 18px 36px rgba(35, 41, 45, 0.28);
      }

      .btn-secondary {
        border-color: rgba(255, 255, 255, 0.48);
        color: var(--white);
        background: rgba(255, 255, 255, 0.08);
      }

      .btn-dark {
        background: linear-gradient(135deg, #151a1f, #343d44);
        color: var(--white);
      }

      .hero {
        position: relative;
        min-height: 0;
        aspect-ratio: 1942 / 809;
        display: flex;
        align-items: center;
        color: #0d1b2f;
        overflow: hidden;
        background: #eef4f9;
      }

      .hero-slider,
.hero-slide,
.hero-slide img {
        position: absolute;
        inset: 0;
      }

      .hero-slider {
        z-index: 1;
      }

      .hero-slide {
        opacity: 0;
        transition: opacity 900ms ease;
      }

      .hero-slide.is-active {
        opacity: 1;
      }

      .hero-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center;
        filter: saturate(0.98) contrast(1.01);
      }

      .hero-slide::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.46) 38%, rgba(255, 255, 255, 0.04) 68%),
          linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(17, 32, 53, 0.06));
      }

      .hero > .container {
        width: min(1500px, calc(100% - 56px));
      }

      .hero-content {
        position: relative;
        z-index: 3;
        width: min(680px, 100%);
        padding: 118px 0 82px;
      }

      .hero h1 {
        margin: 0 0 18px;
        font-family: "Archivo", sans-serif;
        font-size: 58px;
        line-height: 0.98;
        font-weight: 800;
      }

      .hero-copy {
        max-width: 650px;
        margin: 0;
        color: rgba(13, 27, 47, 0.76);
        font-size: 19px;
      }

      .finish-tone::before {
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        border: 1px solid rgba(255, 255, 255, 0.48);
        border-radius: 50%;
        background: var(--chip);
      }

      .hero-control {
        position: absolute;
        top: 50%;
        z-index: 4;
        width: 46px;
        height: 46px;
        border: 1px solid rgba(255, 255, 255, 0.36);
        background: rgba(20, 25, 30, 0.64);
        color: var(--white);
        cursor: pointer;
        transform: translateY(-50%);
      }

      .hero-control.prev {
        left: 22px;
      }

      .hero-control.next {
        right: 22px;
      }

      .hero-control::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
      }

      .hero-control.prev::before {
        transform: rotate(-135deg);
      }

      .hero-control.next::before {
        transform: rotate(45deg);
      }

      .hero-dots {
        position: absolute;
        z-index: 4;
        right: 26px;
        bottom: 26px;
        display: flex;
        gap: 8px;
      }

      .hero-dots button {
        width: 28px;
        height: 4px;
        border: 0;
        border-radius: 0;
        padding: 0;
        background: rgba(255, 255, 255, 0.4);
        cursor: pointer;
      }

      .hero-dots button.is-active {
        background: var(--copper);
      }

      .facts-band {
        background:
          linear-gradient(120deg, #151a1f, #3b444b 48%, #11161b),
          var(--ink);
        color: var(--white);
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
      }

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

      .fact-card {
        position: relative;
        min-height: 148px;
        padding: 28px 24px;
        border-left: 0;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
          linear-gradient(160deg, rgba(23, 29, 35, 0.92), rgba(61, 70, 77, 0.78));
        overflow: hidden;
      }

      .fact-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(90deg, transparent 0, transparent 8px, rgba(255, 255, 255, 0.045) 9px);
        pointer-events: none;
      }

      .fact-card strong {
        position: relative;
        display: block;
        margin-bottom: 10px;
        font-family: "Archivo", sans-serif;
        font-size: 28px;
      }

      .fact-card span {
        position: relative;
        color: rgba(255, 255, 255, 0.68);
      }

      .section {
        padding: 88px 0;
      }

      .section.image-bg > .container {
        position: relative;
        z-index: 1;
      }

      .section.image-bg {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        background: var(--image-bg-base, var(--paper));
      }

      .section.image-bg::before,
.section.image-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
      }

      .section.image-bg::before {
        background: var(--image-bg) center / cover no-repeat;
        opacity: var(--image-opacity, 0.24);
        filter: saturate(0.82) contrast(1.04);
        transform: scale(1.03);
      }

      .section.image-bg::after {
        background: var(--image-overlay);
      }

      .section.about-bg {
        --image-bg-base: #eef2f4;
        --image-bg: url("/skin/static/images/jlc/about-factory-exterior.png");
        --image-opacity: 0.2;
        --image-overlay:
          linear-gradient(90deg, rgba(238, 242, 244, 0.96) 0%, rgba(238, 242, 244, 0.86) 46%, rgba(238, 242, 244, 0.5) 100%),
          linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(120, 133, 142, 0.18));
      }

      .section.quality-bg {
        --image-bg-base: #10151a;
        --image-bg: url("/skin/static/images/jlc/hero-precision-metal.png");
        --image-opacity: 0.34;
        --image-overlay:
          linear-gradient(90deg, rgba(10, 14, 18, 0.94), rgba(36, 45, 53, 0.72) 52%, rgba(10, 14, 18, 0.92)),
          linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.36));
      }

      .section.engineering-bg {
        --image-bg-base: #0d1217;
        --image-bg: url("/skin/static/images/jlc/hero-tooling.png");
        --image-opacity: 0.46;
        --image-overlay:
          linear-gradient(90deg, rgba(8, 12, 16, 0.95), rgba(22, 30, 38, 0.72) 48%, rgba(8, 12, 16, 0.9)),
          linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.42));
        background: var(--image-bg-base);
        color: var(--white);
      }

      .section.engineering-bg .section-label {
        color: #dce5e9;
      }

      .section.engineering-bg .section-head p {
        color: rgba(255, 255, 255, 0.72);
      }

      .section.alt {
        background:
          linear-gradient(135deg, rgba(249, 251, 252, 0.78), rgba(216, 221, 224, 0.94)),
          var(--cloud);
      }

      .section.dark {
        background: linear-gradient(135deg, #12171c, #3b444b 56%, #101419);
        color: var(--white);
      }

      .section.deep {
        background:
          linear-gradient(135deg, rgba(7, 10, 13, 0.92), rgba(44, 52, 58, 0.72) 58%, rgba(7, 10, 13, 0.94)),
          url("/skin/static/images/jlc/welding-assembly.png") center / cover no-repeat;
        color: var(--white);
      }

      .section-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 28px;
        margin-bottom: 34px;
      }

      .section-head.compact {
        max-width: 780px;
        display: block;
      }

      .section-label {
        margin-bottom: 10px;
        color: var(--copper);
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0;
      }

      .section.dark .section-label,
.section.deep .section-label {
        color: #dce5e9;
      }

      .section-title {
        margin: 0;
        font-family: "Archivo", sans-serif;
        font-size: 42px;
        line-height: 1.08;
      }

      .section-head p,
.lead {
        max-width: 620px;
        margin: 0;
        color: var(--muted);
        font-size: 18px;
      }

      .section.dark .section-head p,
.section.deep .section-head p,
.section.dark .lead,
.section.deep .lead {
        color: rgba(255, 255, 255, 0.7);
      }

      .split {
        display: grid;
        grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
        gap: 48px;
        align-items: center;
      }

      .snapshot-list {
        display: grid;
        gap: 12px;
        margin-top: 24px;
      }

      .snapshot-list p {
        margin: 0;
        padding: 14px 0;
        border-top: 1px solid var(--line);
        color: var(--ink-2);
      }

      .snapshot-media {
        position: relative;
      }

      .snapshot-media img,
.wide-media img,
.media-card img,
.application-card img,
.workflow-media img,
.quality-item img,
.flow-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .snapshot-media img {
        aspect-ratio: 4 / 3;
        border-radius: 8px;
        box-shadow: var(--shadow);
      }

      .grid-4,
.grid-3,
.application-grid,
.quality-grid {
        display: grid;
        gap: 18px;
      }

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

      .value-rail {
        position: relative;
        gap: 0;
        border: 1px solid var(--line);
        border-radius: 8px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.44);
        box-shadow: var(--shadow);
      }

      .value-rail .card {
        min-height: 270px;
        border: 0;
        border-right: 1px solid rgba(17, 22, 27, 0.12);
        border-radius: 0;
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(199, 207, 212, 0.72)),
          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.2) 1px, transparent 1px, transparent 10px);
        box-shadow: none;
      }

      .value-rail .card:last-child {
        border-right: 0;
      }

      .value-rail .card::after {
        content: "";
        position: absolute;
        top: 24px;
        right: 18px;
        width: 54px;
        height: 4px;
        background: linear-gradient(90deg, transparent, rgba(17, 22, 27, 0.38));
      }

      .section.engineering-bg .value-rail {
        border-color: rgba(255, 255, 255, 0.16);
        background: rgba(8, 12, 16, 0.48);
        box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
        backdrop-filter: blur(14px);
      }

      .section.engineering-bg .value-rail .card {
        border-right-color: rgba(255, 255, 255, 0.14);
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(106, 122, 132, 0.12)),
          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.07) 1px, transparent 1px, transparent 12px);
        color: var(--white);
      }

      .section.engineering-bg .value-rail .card::after {
        background: linear-gradient(90deg, transparent, rgba(220, 229, 233, 0.48));
      }

      .section.engineering-bg .card-number {
        color: #dce5e9;
      }

      .section.engineering-bg .card p {
        color: rgba(255, 255, 255, 0.68);
      }

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

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

      .card {
        min-height: 220px;
        padding: 24px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(203, 211, 215, 0.66)),
          repeating-linear-gradient(90deg, transparent 0, transparent 10px, rgba(255, 255, 255, 0.18) 11px);
        transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
      }

      .section.dark .card,
.section.deep .card {
        border-color: rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.07);
      }

      .card:hover,
.media-card:hover,
.application-card:hover {
        transform: translateY(-4px);
        border-color: rgba(129, 142, 150, 0.7);
        box-shadow: var(--shadow);
      }

      .card-number {
        display: block;
        margin-bottom: 34px;
        color: #6c7880;
        font-weight: 800;
      }

      .section.dark .card-number {
        color: #dce5e9;
      }

      .card h3,
.media-card h3,
.application-card h3,
.quality-item h3 {
        margin: 0 0 10px;
        font-family: "Archivo", sans-serif;
        font-size: 22px;
        line-height: 1.18;
      }

      .card p,
.media-card p,
.application-card p,
.quality-item p {
        margin: 0;
        color: var(--muted);
      }

      .section.dark .card p,
.section.dark .media-card p,
.section.dark .application-card p,
.section.deep .card p,
.section.deep .media-card p,
.section.deep .application-card p {
        color: rgba(255, 255, 255, 0.68);
      }

      .media-card,
.application-card {
        position: relative;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--line);
        border-radius: 8px;
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(205, 213, 217, 0.76)),
          var(--white);
        overflow: hidden;
        transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
      }

      .media-card img {
        height: 230px;
        flex: 0 0 auto;
      }

      .capability-mosaic {
        align-items: stretch;
      }

      .capability-mosaic .media-card:nth-child(3) {
        background:
          linear-gradient(145deg, rgba(21, 26, 31, 0.92), rgba(68, 78, 86, 0.86)),
          var(--ink);
        color: var(--white);
      }

      .capability-mosaic .media-card:nth-child(3) p {
        color: rgba(255, 255, 255, 0.72);
      }

      .media-content {
        flex: 1;
        padding: 22px;
      }

      .badge {
        display: inline-flex;
        margin-bottom: 12px;
        padding: 5px 8px;
        border-radius: 3px;
        background: linear-gradient(135deg, rgba(249, 251, 252, 0.88), rgba(186, 196, 202, 0.72));
        color: #2a3036;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
      }

      .product-cats {
        background: var(--white);
        overflow: hidden;
      }

      .product-cats.engineering-bg {
        --image-bg-base: #eef2f4;
        --image-opacity: 0.22;
        --image-overlay:
          linear-gradient(90deg, rgba(249, 251, 252, 0.94) 0%, rgba(238, 242, 244, 0.88) 50%, rgba(249, 251, 252, 0.72) 100%),
          linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(120, 133, 142, 0.22));
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
        color: var(--ink);
      }

      .product-cats-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 28px;
        margin-bottom: 42px;
      }

      .product-cats-intro {
        max-width: 760px;
      }

      .product-cats-eyebrow {
        display: inline-flex;
        margin-bottom: 14px;
        padding: 6px 12px;
        border-radius: 999px;
        background: rgba(17, 22, 27, 0.08);
        color: var(--ink);
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
      }

      .product-cats.engineering-bg .product-cats-eyebrow {
        background: rgba(17, 22, 27, 0.08);
        color: var(--ink);
      }

      .product-cats-title {
        margin: 0;
        font-family: "Archivo", sans-serif;
        font-size: 58px;
        line-height: 1.02;
      }

      .product-cats-lead {
        max-width: 540px;
        margin: 14px 0 0;
        color: var(--muted);
        font-size: 16px;
      }

      .product-cats.engineering-bg .product-cats-lead {
        color: var(--muted);
      }

      .product-cats-actions {
        display: flex;
        gap: 10px;
      }

      .product-cats-nav {
        width: 52px;
        height: 52px;
        border: 1px solid var(--ink);
        border-radius: 50%;
        background: var(--white);
        color: var(--ink);
        cursor: pointer;
        transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
      }

      .product-cats.engineering-bg .product-cats-nav {
        border-color: rgba(17, 22, 27, 0.48);
        background: rgba(255, 255, 255, 0.72);
        color: var(--ink);
      }

      .product-cats-nav:hover {
        background: var(--ink);
        color: var(--white);
        transform: translateY(-2px);
      }

      .product-cats.engineering-bg .product-cats-nav:hover {
        background: var(--ink);
        color: var(--white);
      }

      .product-cats-rail {
        overflow-x: auto;
        padding: 8px 0 26px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
      }

      .product-cats-rail::-webkit-scrollbar {
        display: none;
      }

      .product-cats-track {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 320px;
        gap: 18px;
      }

      .product-cat-card {
        min-height: 430px;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--line);
        border-radius: 8px;
        color: inherit;
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(205, 213, 217, 0.76)),
          var(--white);
        overflow: hidden;
        scroll-snap-align: start;
        transition: transform 0.28s ease, box-shadow 0.28s ease;
      }

      .product-cats.engineering-bg .product-cat-card {
        border-color: rgba(17, 22, 27, 0.16);
        color: var(--ink);
      }

      .product-cat-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow);
      }

      .product-cat-media {
        height: 240px;
        border-bottom: 1px solid var(--line);
        background: var(--metal);
        overflow: hidden;
      }

      .product-cat-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(0.82) contrast(1.04);
        transition: transform 0.45s ease;
      }

      .product-cat-card:hover .product-cat-media img {
        transform: scale(1.05);
      }

      .product-cat-caption {
        flex: 1;
        display: grid;
        align-content: space-between;
        gap: 18px;
        padding: 22px;
      }

      .product-cat-caption h3 {
        margin: 0;
        font-family: "Archivo", sans-serif;
        font-size: 24px;
        line-height: 1.16;
      }

      .product-cat-hint {
        display: inline-flex;
        width: fit-content;
        color: var(--ink);
        font-weight: 800;
      }

      .product-cats-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 18px;
        margin-top: 18px;
      }

      .product-cats-progress {
        width: min(180px, 42vw);
        height: 4px;
        border-radius: 999px;
        background: rgba(17, 22, 27, 0.18);
        overflow: hidden;
      }

      .product-cats.engineering-bg .product-cats-progress {
        background: rgba(17, 22, 27, 0.18);
      }

      .product-cats-progress span {
        display: block;
        width: 24%;
        height: 100%;
        border-radius: inherit;
        background: var(--ink);
        transform-origin: left center;
        transition: width 0.22s ease;
      }

      .product-cats.engineering-bg .product-cats-progress span {
        background: var(--ink);
      }

      .product-cats-cta {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 18px;
        border: 1px solid var(--ink);
        background: var(--ink);
        color: var(--white);
        font-weight: 800;
      }

      .product-cats.engineering-bg .product-cats-cta {
        border-color: var(--ink);
        background: var(--ink);
        color: var(--white);
      }

      .finish-lab {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 28px;
        align-items: stretch;
      }

      .finish-copy {
        display: grid;
        align-content: stretch;
        gap: 22px;
      }

      .finish-copy .lead {
        max-width: none;
        margin: 0;
      }

      .finish-showcase {
        min-height: 430px;
        position: relative;
        overflow: hidden;
        border: 1px solid var(--line);
        background: var(--ink);
        box-shadow: var(--shadow);
      }

      .finish-showcase img,
.finish-route-card img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .finish-showcase img {
        opacity: 0.9;
        filter: saturate(0.82) contrast(1.04);
      }

      .finish-showcase::after,
.finish-route-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, rgba(17, 22, 27, 0.04), rgba(17, 22, 27, 0.78)),
          linear-gradient(95deg, rgba(255, 255, 255, 0.08), transparent 48%);
      }

      .finish-showcase-caption {
        position: absolute;
        inset: auto 18px 18px 18px;
        z-index: 1;
        display: grid;
        gap: 12px;
        padding: 18px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(17, 22, 27, 0.72);
        color: var(--white);
        backdrop-filter: blur(12px);
      }

      .finish-showcase-caption span,
.finish-route-kicker {
        color: rgba(255, 255, 255, 0.7);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0;
        text-transform: uppercase;
      }

      .finish-showcase-caption strong {
        font-family: "Archivo", sans-serif;
        font-size: 40px;
        line-height: 0.98;
      }

      .finish-showcase-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .finish-showcase-meta b {
        padding: 7px 10px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.08);
        font-size: 12px;
      }

      .finish-visual {
        display: grid;
        gap: 14px;
      }

      .finish-route-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      .finish-route-card {
        min-height: 232px;
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(17, 22, 27, 0.14);
        background: var(--ink);
        color: var(--white);
      }

      .finish-route-card.is-wide {
        grid-column: span 2;
        min-height: 270px;
      }

      .finish-route-card img {
        opacity: 0.84;
        filter: saturate(0.86) contrast(1.04);
        transition: transform 0.48s ease;
      }

      .finish-route-card:hover img {
        transform: scale(1.05);
      }

      .finish-route-content {
        position: absolute;
        inset: auto 0 0 0;
        z-index: 1;
        display: grid;
        gap: 8px;
        padding: 18px;
      }

      .finish-route-card h3 {
        margin: 0;
        font-family: "Archivo", sans-serif;
        font-size: 24px;
        line-height: 1.05;
      }

      .finish-route-card p {
        margin: 0;
        color: rgba(255, 255, 255, 0.78);
      }

      .finish-tone-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 4px;
      }

      .finish-tone {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 28px;
        padding: 5px 8px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.86);
        font-size: 12px;
        font-weight: 800;
      }

      .finish-tone::before {
        width: 14px;
        height: 14px;
        border-color: rgba(255, 255, 255, 0.42);
        box-shadow: inset 0 2px 7px rgba(255, 255, 255, 0.4), inset 0 -6px 12px rgba(0, 0, 0, 0.18);
      }

      .finish-process-strip {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: hidden;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.74);
      }

      .finish-process-step {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 12px;
        padding: 16px;
        border-right: 1px solid var(--line);
      }

      .finish-process-step:last-child {
        border-right: 0;
      }

      .finish-process-step strong {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 2px;
        background: var(--steel-deep);
        color: var(--white);
        font-family: "Archivo", sans-serif;
        font-size: 13px;
      }

      .finish-process-step span {
        display: block;
        color: var(--ink);
        font-weight: 800;
      }

      .finish-process-step p {
        margin: 3px 0 0;
        color: var(--muted);
        font-size: 13px;
      }

      .application-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
      }

      .application-card {
        min-height: 330px;
        color: var(--white);
        background: var(--ink);
      }

      .application-card img {
        position: absolute;
        inset: 0;
        opacity: 0.74;
        filter: saturate(0.88);
        transition: transform 0.45s ease;
      }

      .application-card:hover img {
        transform: scale(1.06);
      }

      .application-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(16, 21, 25, 0.82)),
          linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 40%);
      }

      .application-content {
        position: absolute;
        inset: auto 0 0 0;
        z-index: 1;
        padding: 20px;
      }

      .application-card p {
        color: rgba(255, 255, 255, 0.76);
      }

      .wide-media {
        margin-top: 34px;
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 18px;
      }

      .wide-media figure {
        position: relative;
        min-height: 320px;
        margin: 0;
        border-radius: 8px;
        overflow: hidden;
      }

      .wide-media figcaption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 20px;
        color: var(--white);
        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.76));
        font-weight: 700;
      }

      .alloy-flow {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
      }

      .flow-node {
        position: relative;
        min-height: 340px;
        padding: 0 0 24px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(197, 207, 212, 0.76)),
          var(--white);
        overflow: visible;
        box-shadow: 0 16px 34px rgba(18, 24, 26, 0.08);
      }

      .flow-node::after {
        content: "";
        position: absolute;
        top: 48%;
        right: -23px;
        z-index: 2;
        width: 22px;
        height: 22px;
        border-top: 3px solid #9aa8af;
        border-right: 3px solid #9aa8af;
        transform: rotate(45deg);
      }

      .flow-node:last-child::after {
        display: none;
      }

      .flow-node:nth-child(3n)::after {
        display: none;
      }

      .flow-image {
        height: 190px;
        border-radius: 8px 8px 0 0;
        overflow: hidden;
      }

      .flow-body {
        padding: 20px;
      }

      .flow-node h3 {
        margin: 0 0 10px;
        font-family: "Archivo", sans-serif;
        font-size: 22px;
      }

      .flow-node p {
        margin: 0;
        color: var(--muted);
      }

      .workflow {
        display: grid;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: 36px;
        align-items: stretch;
      }

      .workflow-media {
        min-height: 540px;
        border-radius: 8px;
        overflow: hidden;
      }

      .process-stack {
        position: relative;
        display: grid;
        gap: 14px;
      }

      .process-stack::before {
        content: "";
        position: absolute;
        top: 28px;
        bottom: 28px;
        left: 50px;
        width: 2px;
        background: linear-gradient(180deg, transparent, rgba(125, 138, 146, 0.9), transparent);
      }

      .process-step {
        position: relative;
        display: grid;
        grid-template-columns: 76px 1fr;
        gap: 18px;
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(199, 207, 212, 0.66)),
          repeating-linear-gradient(90deg, transparent 0, transparent 11px, rgba(255, 255, 255, 0.22) 12px);
      }

      .process-step strong {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 56px;
        height: 56px;
        background: linear-gradient(135deg, #1b2025, #56616a);
        color: var(--white);
        font-family: "Archivo", sans-serif;
      }

      .process-step h3 {
        margin: 0 0 6px;
        font-family: "Archivo", sans-serif;
        font-size: 21px;
      }

      .process-step p {
        margin: 0;
        color: var(--muted);
      }

      .quality-item {
        position: relative;
        min-height: 320px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 8px;
        background: #0d1217;
        overflow: hidden;
        box-shadow: 0 24px 58px rgba(0, 0, 0, 0.26);
      }

      .quality-item img {
        position: absolute;
        inset: 0;
        transform: scale(1.01);
        transition: transform 0.28s ease;
      }

      .quality-item::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
          linear-gradient(180deg, rgba(8, 12, 16, 0.08) 0%, rgba(8, 12, 16, 0.2) 36%, rgba(8, 12, 16, 0.86) 100%),
          linear-gradient(90deg, rgba(8, 12, 16, 0.52), rgba(8, 12, 16, 0.08));
      }

      .quality-item:hover img {
        transform: scale(1.06);
      }

      .quality-content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        padding: 24px;
        color: var(--white);
      }

      .quality-mark {
        display: inline-flex;
        margin-bottom: 16px;
        color: #dce5e9;
        font-family: "Archivo", sans-serif;
        font-size: 13px;
        font-weight: 800;
      }

      .quality-item p {
        color: rgba(255, 255, 255, 0.68);
      }

      .home-news-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
      }

      .home-news-card {
        display: grid;
        grid-template-rows: auto 1fr;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 18px 40px rgba(17, 22, 27, 0.08);
        overflow: hidden;
        transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
      }

      .home-news-card:hover {
        transform: translateY(-5px);
        border-color: rgba(17, 22, 27, 0.28);
        box-shadow: var(--shadow);
      }

      .home-news-card img {
        width: 100%;
        aspect-ratio: 1.55;
        display: block;
        object-fit: cover;
        filter: saturate(0.96) contrast(1.02);
        transition: transform 0.34s ease;
      }

      .home-news-card:hover img {
        transform: scale(1.04);
      }

      .home-news-body {
        display: grid;
        gap: 12px;
        padding: 22px;
      }

      .home-news-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
      }

      .home-news-date,
.home-news-tag {
        font-size: 12px;
        font-weight: 800;
      }

      .home-news-date {
        color: var(--muted);
      }

      .home-news-tag {
        padding: 6px 9px;
        background: rgba(17, 22, 27, 0.08);
        color: var(--ink);
        text-transform: uppercase;
      }

      .home-news-card h3 {
        margin: 0;
        font-family: "Archivo", sans-serif;
        font-size: 25px;
        line-height: 1.08;
      }

      .home-news-card p {
        margin: 0;
        color: var(--muted);
      }

      .faq-list {
        display: grid;
        gap: 10px;
      }

      .faq-item {
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.76);
        overflow: hidden;
      }

      .faq-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        border: 0;
        padding: 20px 22px;
        background: transparent;
        color: var(--ink);
        font-weight: 800;
        text-align: left;
        cursor: pointer;
      }

      .faq-toggle span {
        position: relative;
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
      }

      .faq-toggle span::before,
.faq-toggle span::after {
        content: "";
        position: absolute;
        top: 8px;
        left: 2px;
        width: 14px;
        height: 2px;
        background: #7d8a92;
      }

      .faq-toggle span::after {
        transform: rotate(90deg);
        transition: transform 0.2s ease;
      }

      .faq-item.open .faq-toggle span::after {
        transform: rotate(0deg);
      }

      .faq-answer {
        display: none;
        padding: 0 22px 20px;
        color: var(--muted);
      }

      .faq-item.open .faq-answer {
        display: block;
      }

      .contact-grid {
        display: flex;
        justify-content: center;
      }

      .contact-form {
        position: relative;
        width: min(820px, 100%);
        display: grid;
        gap: 16px;
        padding: 34px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 8px;
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
          repeating-linear-gradient(90deg, transparent 0, transparent 12px, rgba(255, 255, 255, 0.05) 13px);
        box-shadow: 0 28px 74px rgba(0, 0, 0, 0.34);
        backdrop-filter: blur(14px);
        overflow: hidden;
        isolation: isolate;
      }

      .contact-form::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 5px;
        background: var(--brushed);
        z-index: -1;
      }

      .contact-form::after {
        content: "";
        position: absolute;
        inset: 5px 0 auto;
        height: 1px;
        background: rgba(255, 255, 255, 0.22);
        z-index: -1;
      }

      .form-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }

      .form-field {
        width: 100%;
        min-height: 54px;
        border: 1px solid rgba(255, 255, 255, 0.34);
        border-radius: 6px;
        padding: 14px 16px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(232, 237, 240, 0.94));
        color: var(--ink);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
      }

      .form-field::placeholder {
        color: rgba(42, 48, 54, 0.58);
      }

      .form-field:focus {
        border-color: rgba(220, 229, 233, 0.9);
        outline: 2px solid rgba(185, 198, 205, 0.36);
        outline-offset: 0;
        background: var(--white);
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
      }

      textarea.form-field {
        min-height: 150px;
        resize: vertical;
      }

      .contact-form .btn {
        width: 100%;
        min-height: 54px;
        margin-top: 4px;
        border-radius: 6px;
      }

      .form-success {
        display: none;
        color: #b8e3bd;
        font-weight: 700;
      }

      .form-success.show {
        display: block;
      }

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

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

      @media (max-width: 1100px) {
        .grid-4,
.application-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .alloy-flow {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .flow-node:nth-child(3n)::after {
          display: block;
        }

        .flow-node:nth-child(2n)::after {
          display: none;
        }
      }

      @media (max-width: 900px) {

        .hero {
          display: block;
          position: relative;
          min-height: 0;
          aspect-ratio: auto;
          padding-top: 74px;
          overflow: hidden;
        }

        .hero-slider {
          position: relative;
          inset: auto;
          width: 100%;
          aspect-ratio: 1942 / 809;
          background: #eef4f9;
          overflow: hidden;
        }

        .hero-slide,
.hero-slide img {
          width: 100%;
          height: 100%;
        }

        .hero-slide img {
          object-fit: contain;
          object-position: center center;
        }

        .hero-slide::after {
          display: none;
        }

        .hero > .container {
          position: absolute;
          top: 74px;
          left: 0;
          right: 0;
          z-index: 3;
          width: min(100% - 40px, 1180px);
          pointer-events: none;
        }

        .hero-dots {
          position: absolute;
          z-index: 4;
          right: auto;
          bottom: 12px;
          left: 20px;
          width: fit-content;
          margin: 0;
          padding-bottom: 0;
        }

        .hero-content {
          width: min(330px, 52vw);
          padding: 34px 0 0;
        }

        .hero h1 {
          margin-bottom: 10px;
          font-size: 32px;
          line-height: 1.04;
        }

        .hero-copy {
          max-width: 300px;
          font-size: 14px;
          line-height: 1.45;
        }

        .hero-control {
          display: none;
        }

        .fact-grid,
.grid-3,
.quality-grid,
.split,
.finish-lab,
.home-news-grid,
.workflow,
.wide-media {
          grid-template-columns: 1fr;
        }

        .fact-card {
          border-right: 1px solid rgba(255, 255, 255, 0.16);
        }

        .value-rail .card {
          border-right: 0;
          border-bottom: 1px solid rgba(17, 22, 27, 0.12);
        }

        .section.engineering-bg .value-rail .card {
          border-bottom-color: rgba(255, 255, 255, 0.14);
        }

        .section {
          padding: 66px 0;
        }

        .section-head {
          display: block;
        }

        .section-head p {
          margin-top: 14px;
        }

        .product-cats-head {
          display: block;
        }

        .product-cats-actions {
          margin-top: 20px;
        }

        .workflow-media {
          min-height: 360px;
        }

      }

      @media (max-width: 680px) {
        .container {
          width: min(100% - 28px, 1180px);
        }

        .hero > .container {
          width: min(100% - 28px, 1180px);
        }

        .hero-content {
          width: min(252px, 64vw);
          padding: 18px 0 0;
        }

        .hero h1 {
          margin-bottom: 6px;
          font-size: 22px;
          line-height: 1.08;
        }

        .hero-copy {
          max-width: 250px;
          font-size: 12px;
          line-height: 1.38;
        }

        .hero-dots {
          left: 14px;
          bottom: 10px;
        }

        .product-cats-title {
          font-size: 42px;
        }

        .product-cats-track {
          grid-auto-columns: minmax(274px, 82%);
        }

        .product-cat-card {
          min-height: 405px;
        }

        .grid-4,
.application-grid,
.alloy-flow,
.finish-route-grid,
.finish-process-strip,
.form-row {
          grid-template-columns: 1fr;
        }

        .finish-route-card.is-wide {
          grid-column: span 1;
        }

        .value-rail .card:last-child {
          border-bottom: 0;
        }

        .flow-node::after,
.flow-node:nth-child(2n)::after,
.flow-node:nth-child(3n)::after {
          display: block;
          top: auto;
          right: auto;
          bottom: -21px;
          left: 50%;
          transform: translateX(-50%) rotate(135deg);
        }

        .flow-node:last-child::after {
          display: none;
        }

        .application-card {
          min-height: 270px;
        }

        .process-step {
          grid-template-columns: 1fr;
        }

        .contact-form {
          padding: 20px;
        }
      }

      @media (max-width: 420px) {
        .hero-content {
          width: min(224px, 66vw);
          padding-top: 14px;
        }

        .hero h1 {
          margin-bottom: 5px;
          font-size: 19px;
          line-height: 1.06;
        }

        .hero-copy {
          max-width: 220px;
          font-size: 10.5px;
          line-height: 1.32;
        }

        .hero-dots {
          bottom: 8px;
        }
      }
      /* End unified homepage navigation */