@media (min-width: 769px) {
  html.loong-home-page {
    --loong-navy: #003b7a;
    --loong-navy-dark: #031a36;
    --loong-navy-deep: #020f21;
    --loong-red: #f20d18;
    --loong-blue: #0878df;
    --loong-ink: #101828;
    --loong-muted: #667085;
    --loong-line: #dce3ec;
    --loong-surface: #f4f7fb;
    scroll-behavior: smooth;
  }

  html.loong-home-page body {
    background: #f4f7fb;
    color: #101828;
  }

  .loong-home,
  .loong-home * {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  .loong-home {
    overflow: hidden;
    background: #fff;
    color: var(--loong-ink);
    font-family: Arial, Helvetica, sans-serif;
  }

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

  .loong-home a {
    color: inherit;
    text-decoration: none;
  }

  .loong-shell {
    width: min(calc(100% - 80px), 1500px);
    margin: 0 auto;
  }

  .loong-section {
    padding: 112px 0;
  }

  .loong-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    color: var(--loong-navy);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .loong-kicker i {
    display: inline-grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: var(--loong-red);
    font-size: 16px;
  }

  .loong-kicker--light {
    color: rgba(255, 255, 255, 0.82);
  }

  .loong-kicker--light i {
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
  }

  .loong-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 500px);
    gap: 80px;
    align-items: end;
    margin-bottom: 54px;
  }

  .loong-section-heading h2 {
    max-width: 820px;
    margin: 0;
    color: var(--loong-ink);
    font-size: 48px;
    font-weight: 750;
    line-height: 1.08;
  }

  .loong-section-heading > p {
    margin: 0 0 5px;
    color: var(--loong-muted);
    font-size: 17px;
    line-height: 1.75;
  }

  .loong-section-heading--dark h2 {
    color: #fff;
  }

  .loong-section-heading--dark > p {
    color: rgba(255, 255, 255, 0.68);
  }

  .loong-button {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0 24px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
  }

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

  .loong-button--primary {
    background: var(--loong-red);
    color: #fff !important;
  }

  .loong-button--primary:hover {
    background: #cc0913;
  }

  .loong-button--ghost {
    border-color: rgba(255, 255, 255, 0.52);
    background: rgba(2, 15, 33, 0.32);
    color: #fff !important;
  }

  .loong-button--ghost:hover {
    border-color: #fff;
    background: rgba(2, 15, 33, 0.62);
  }

  .loong-button--dark {
    background: var(--loong-navy-deep);
    color: #fff !important;
  }

  .loong-button--dark:hover {
    background: var(--loong-navy);
  }

  .loong-hero {
    position: relative;
    min-height: 760px;
    height: 100vh;
    max-height: 1040px;
    isolation: isolate;
    background: var(--loong-navy-deep);
    color: #fff;
  }

  .loong-hero__image,
  .loong-hero__shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .loong-hero__image {
    z-index: -3;
    object-fit: cover;
    object-position: center center;
  }

  .loong-hero__shade {
    z-index: -2;
    background: rgba(1, 12, 28, 0.33);
  }

  .loong-hero__inner {
    display: flex;
    height: 100%;
    align-items: center;
    padding-top: 104px;
  }

  .loong-hero__content {
    width: min(650px, 52%);
    padding-bottom: 18px;
  }

  .loong-hero h1 {
    margin: 0;
    color: #fff;
    font-size: 68px;
    font-weight: 780;
    line-height: 1.02;
    text-shadow: 0 3px 24px rgba(0, 0, 0, 0.28);
  }

  .loong-hero__lead {
    max-width: 610px;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, 0.83);
    font-size: 18px;
    line-height: 1.72;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.36);
  }

  .loong-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
  }

  .loong-hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 42px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
    list-style: none;
  }

  .loong-hero__proof li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 22px;
    border-right: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
  }

  .loong-hero__proof li:first-child {
    padding-left: 0;
  }

  .loong-hero__proof li:last-child {
    border-right: 0;
  }

  .loong-hero__proof i {
    color: #fff;
    font-size: 19px;
  }

  .loong-hero__scroll {
    position: absolute;
    right: 42px;
    bottom: 36px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.74) !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .loong-hero__scroll i {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    font-size: 18px;
  }

  .loong-categories {
    background: #fff;
  }

  .loong-category-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid var(--loong-line);
    border-left: 1px solid var(--loong-line);
  }

  .loong-category {
    min-width: 0;
    overflow: hidden;
    border-right: 1px solid var(--loong-line);
    border-bottom: 1px solid var(--loong-line);
    background: #fff;
    transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
  }

  .loong-category:hover {
    z-index: 2;
    background: #f8fbff;
    box-shadow: 0 18px 45px rgba(0, 38, 82, 0.12);
    transform: translateY(-4px);
  }

  .loong-category__media {
    position: relative;
    aspect-ratio: 4 / 2.65;
    overflow: hidden;
    background: #e9eef5;
  }

  .loong-category__media::after {
    position: absolute;
    inset: 0;
    background: rgba(0, 24, 52, 0.08);
    content: '';
    transition: background 220ms ease;
  }

  .loong-category:hover .loong-category__media::after {
    background: rgba(0, 24, 52, 0.02);
  }

  .loong-category__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
  }

  .loong-category:hover .loong-category__media img {
    transform: scale(1.045);
  }

  .loong-category__count {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    border-radius: 3px;
    background: rgba(2, 20, 43, 0.78);
    padding: 7px 9px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
  }

  .loong-category__body {
    display: grid;
    min-height: 96px;
    grid-template-columns: 36px minmax(0, 1fr) 24px;
    gap: 12px;
    align-items: center;
    padding: 18px;
  }

  .loong-category__icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 4px;
    background: #e8f1fb;
    color: var(--loong-navy);
    font-size: 20px;
  }

  .loong-category h3 {
    margin: 0;
    color: #172033;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
  }

  .loong-category__arrow {
    color: #98a2b3;
    font-size: 18px;
    transition: color 180ms ease, transform 180ms ease;
  }

  .loong-category:hover .loong-category__arrow {
    color: var(--loong-red);
    transform: translate(2px, -2px);
  }

  .loong-manufacturing {
    background: var(--loong-navy-deep);
    color: #fff;
  }

  .loong-manufacturing__intro {
    margin-bottom: 52px;
  }

  .loong-capability-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }

  .loong-capability-strip > div {
    display: flex;
    min-height: 98px;
    flex-direction: column;
    justify-content: center;
    padding: 18px 28px;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
  }

  .loong-capability-strip > div:first-child {
    padding-left: 0;
  }

  .loong-capability-strip > div:last-child {
    border-right: 0;
  }

  .loong-capability-strip strong {
    color: #fff;
    font-size: 22px;
    line-height: 1.2;
  }

  .loong-capability-strip span {
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
  }

  .loong-factory-gallery {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 22px;
  }

  .loong-factory-shot {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
    background: #0a2443;
  }

  .loong-factory-shot--1 {
    grid-column: span 6;
    height: 430px;
  }

  .loong-factory-shot--2,
  .loong-factory-shot--3 {
    grid-column: span 3;
    height: 430px;
  }

  .loong-factory-shot--4,
  .loong-factory-shot--5,
  .loong-factory-shot--6 {
    grid-column: span 4;
    height: 350px;
  }

  .loong-factory-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 650ms ease;
  }

  .loong-factory-shot:hover img {
    transform: scale(1.025);
  }

  .loong-factory-shot figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 15px;
    align-items: start;
    background: rgba(2, 15, 33, 0.84);
    padding: 20px 22px;
    color: #fff;
  }

  .loong-factory-shot figcaption > span {
    color: var(--loong-red);
    font-size: 13px;
    font-weight: 800;
  }

  .loong-factory-shot h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.3;
  }

  .loong-factory-shot p {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, 0.67);
    font-size: 13px;
    line-height: 1.5;
  }

  .loong-products {
    background: #f4f7fb;
  }

  .loong-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }

  .loong-product {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dce3ec;
    border-radius: 6px;
    background: #fff;
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  }

  .loong-product:hover {
    border-color: rgba(0, 59, 122, 0.34);
    box-shadow: 0 18px 40px rgba(0, 37, 80, 0.1);
    transform: translateY(-5px);
  }

  .loong-product__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e9eef5;
  }

  .loong-product__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
  }

  .loong-product:hover .loong-product__media img {
    transform: scale(1.045);
  }

  .loong-product__media > span {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 7px;
    border-radius: 3px;
    background: rgba(2, 15, 33, 0.86);
    padding: 0 13px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
  }

  .loong-product__body {
    padding: 22px;
  }

  .loong-product__category {
    margin: 0 0 10px;
    color: var(--loong-red);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .loong-product h3 {
    min-height: 48px;
    margin: 0;
    color: #172033;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.42;
  }

  .loong-product h3 a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .loong-product__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e5eaf0;
    font-size: 12px;
    line-height: 1.3;
  }

  .loong-product__meta > span {
    overflow: hidden;
    color: #7b8493;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .loong-product__meta > a {
    flex: 0 0 auto;
    color: var(--loong-navy);
    font-weight: 800;
  }

  .loong-product__meta > a:hover {
    color: var(--loong-red);
  }

  .loong-section-action {
    display: flex;
    justify-content: flex-end;
    margin-top: 34px;
  }

  .loong-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--loong-red);
    color: var(--loong-navy) !important;
    font-size: 15px;
    font-weight: 800;
  }

  .loong-application {
    position: relative;
    height: 760px;
    overflow: hidden;
    background: var(--loong-navy-deep);
  }

  .loong-application > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .loong-application__panel {
    position: absolute;
    top: 0;
    right: max(0px, calc((100% - 1500px) / 2));
    display: flex;
    width: min(580px, 43%);
    height: 100%;
    flex-direction: column;
    justify-content: center;
    border-left: 4px solid var(--loong-red);
    background: rgba(2, 20, 43, 0.92);
    padding: 64px;
    color: #fff;
  }

  .loong-application h2 {
    margin: 0;
    color: #fff;
    font-size: 48px;
    font-weight: 750;
    line-height: 1.08;
  }

  .loong-application__panel > p {
    margin: 25px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    line-height: 1.72;
  }

  .loong-application ul {
    display: grid;
    gap: 13px;
    margin: 28px 0 34px;
    padding: 0;
    list-style: none;
  }

  .loong-application li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    line-height: 1.5;
  }

  .loong-application li i {
    color: var(--loong-red);
    font-size: 19px;
  }

  .loong-application .loong-button {
    align-self: flex-start;
  }

  .loong-process {
    background: #fff;
  }

  .loong-process-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--loong-line);
    border-bottom: 1px solid var(--loong-line);
    list-style: none;
  }

  .loong-process-step {
    position: relative;
    min-height: 290px;
    padding: 30px 24px 28px;
    border-right: 1px solid var(--loong-line);
    background: #fff;
    transition: background 200ms ease;
  }

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

  .loong-process-step:hover {
    background: #f5f9fd;
  }

  .loong-process-step__number {
    display: block;
    color: #98a2b3;
    font-size: 12px;
    font-weight: 800;
  }

  .loong-process-step__icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    margin: 30px 0 26px;
    border-radius: 6px;
    background: var(--loong-navy);
    color: #fff;
    font-size: 25px;
  }

  .loong-process-step:nth-child(even) .loong-process-step__icon {
    background: var(--loong-red);
  }

  .loong-process-step h3 {
    margin: 0;
    color: #172033;
    font-size: 18px;
    line-height: 1.3;
  }

  .loong-process-step p {
    margin: 13px 0 0;
    color: var(--loong-muted);
    font-size: 13px;
    line-height: 1.65;
  }

  .loong-process__cta {
    display: flex;
    min-height: 122px;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 48px;
    border-left: 4px solid var(--loong-red);
    background: #edf3f9;
    padding: 24px 30px;
  }

  .loong-process__cta span,
  .loong-process__cta strong {
    display: block;
  }

  .loong-process__cta span {
    color: #667085;
    font-size: 13px;
  }

  .loong-process__cta strong {
    margin-top: 7px;
    color: #172033;
    font-size: 20px;
    line-height: 1.35;
  }

  html.loong-js .loong-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 650ms ease, transform 650ms ease;
  }

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

  .loong-home-page .garment-header {
    border-bottom-color: rgba(255, 255, 255, 0.16);
    background: rgba(2, 15, 33, 0.18);
    backdrop-filter: blur(10px);
  }

  .loong-home-page .garment-header.is-scrolled {
    border-bottom-color: rgba(0, 37, 80, 0.1);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 10px 34px rgba(0, 29, 63, 0.1);
  }

  .loong-home-page .garment-header-inner {
    width: min(calc(100% - 64px), 1540px);
    height: 108px;
    grid-template-columns: 320px minmax(0, 1fr) auto;
    gap: 26px;
  }

  .loong-home-page .garment-header.is-scrolled .garment-header-inner {
    height: 94px;
  }

  .loong-home-page .garment-logo {
    width: 320px;
    height: 88px;
  }

  .loong-home-page .garment-logo img {
    object-position: left center;
  }

  .loong-home-page .garment-nav > a,
  .loong-home-page .dropdown-trigger {
    font-weight: 700;
  }

  .loong-home-page .garment-nav > a.current,
  .loong-home-page .dropdown-trigger.current {
    color: #fff;
  }

  .loong-home-page .garment-header.is-scrolled .garment-nav > a.current,
  .loong-home-page .garment-header.is-scrolled .dropdown-trigger.current {
    color: var(--loong-red);
  }

  .loong-home-page #kf.cs-section {
    padding: 108px 40px 120px;
    background: #f4f7fb;
  }

  .loong-home-page #kf .cs-container {
    width: min(1500px, 100%);
  }

  .loong-home-page #kf .cs-eyebrow {
    color: var(--loong-navy);
    letter-spacing: 0;
  }

  .loong-home-page #kf .cs-title {
    color: #101828;
    font-size: 48px;
    letter-spacing: 0;
  }

  .loong-home-page #kf .cs-card {
    border-color: #dce3ec;
    border-radius: 6px;
  }

  .loong-home-page #kf .cs-card::before {
    background: var(--loong-red);
  }

  .loong-home-page #kf .cs-photo {
    height: 280px;
  }

  .loong-home-page #kf .cs-status-dot,
  .loong-home-page #kf .cs-quick-contact {
    background: var(--loong-navy);
  }

  .loong-home-page .zw,
  .loong-home-page .bls {
    display: none;
  }

  .loong-home-page .dibu {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #020f21;
    background-image: url('./footer-fleet.webp');
    background-position: center;
    background-size: cover;
  }

  .loong-home-page .dibu::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(1, 12, 28, 0.05);
    content: '';
  }

  .loong-home-page .dibu .footer,
  .loong-home-page .dibu .footer2 {
    position: relative;
    z-index: 1;
  }

  .loong-home-page .dibu .footer {
    padding-top: 92px;
  }

  .loong-home-page .dibu .footer-l .logo {
    width: 280px;
    height: 94px;
  }

  .loong-home-page .dibu .footer-l .logo img {
    object-fit: contain;
    object-position: left center;
  }

  .loong-home-page .dibu h3,
  .loong-home-page .dibu p,
  .loong-home-page .dibu a,
  .loong-home-page .dibu span {
    color: rgba(255, 255, 255, 0.78);
  }

  .loong-home-page .dibu h3 {
    color: #fff;
  }

  .loong-home-page .dibu a:hover {
    color: #fff;
  }

  @media (max-width: 1400px) {
    .loong-shell {
      width: min(calc(100% - 64px), 1320px);
    }

    .loong-section-heading h2,
    .loong-application h2,
    .loong-home-page #kf .cs-title {
      font-size: 42px;
    }

    .loong-hero h1 {
      font-size: 58px;
    }

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

    .loong-home-page .garment-header-inner {
      width: min(calc(100% - 46px), 1320px);
      grid-template-columns: 265px minmax(0, 1fr) auto;
      gap: 20px;
    }

    .loong-home-page .garment-logo {
      width: 265px;
      height: 78px;
    }

    .loong-application__panel {
      right: 32px;
      width: 520px;
      padding: 50px;
    }

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

    .loong-process-step:nth-child(3) {
      border-right: 0;
    }

    .loong-process-step:nth-child(-n + 3) {
      border-bottom: 1px solid var(--loong-line);
    }
  }

  @media (max-width: 1120px) {
    .loong-shell {
      width: min(calc(100% - 48px), 1040px);
    }

    .loong-section {
      padding: 88px 0;
    }

    .loong-section-heading {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .loong-section-heading > p {
      max-width: 700px;
    }

    .loong-hero__content {
      width: 62%;
    }

    .loong-hero h1 {
      font-size: 50px;
    }

    .loong-hero__proof li {
      padding: 0 12px;
      font-size: 11px;
    }

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

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

    .loong-factory-shot--1,
    .loong-factory-shot--2,
    .loong-factory-shot--3,
    .loong-factory-shot--4,
    .loong-factory-shot--5,
    .loong-factory-shot--6 {
      grid-column: span 4;
      grid-row: auto;
      height: 330px;
    }

    .loong-application__panel {
      right: 24px;
      width: 480px;
      padding: 42px;
    }

    .loong-home-page .garment-header-inner {
      grid-template-columns: 220px minmax(0, 1fr) auto;
      gap: 12px;
    }

    .loong-home-page .garment-logo {
      width: 220px;
      height: 68px;
    }
  }

  @media (max-width: 920px) {
    .loong-factory-shot--1,
    .loong-factory-shot--2,
    .loong-factory-shot--3,
    .loong-factory-shot--4,
    .loong-factory-shot--5,
    .loong-factory-shot--6 {
      grid-column: span 6;
      height: 340px;
    }
  }
}

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

  html.loong-js .loong-reveal,
  html.loong-js .loong-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}