@media (min-width: 701px) {
  body {
    --c1: #0c5caa;
    --c2: #efa51b;
    --c3: #eef5fa;
    --c4: #263744;
    --red: #0c5caa;
    --red-dark: #094a89;
    --red-soft: #e9f3fb;
    --red-glow: rgb(12 92 170 / 25%);
    --accent: #efa51b;
    --accent-soft: #fff5df;
    --accent-glow: rgb(239 165 27 / 30%);
  }

  body .garment-header .garment-logo img {
    object-fit: contain;
  }

  body .page-hero {
    background-image: url("../img/loong-hero-2026.webp") !important;
    background-position: center 51% !important;
  }

  body .az-about-intro.az-profile::before {
    background-image: url("/wp-content/uploads/2026/09/loong-factory-aerial-20260929.webp") !important;
  }

  body .dibu {
    background-image: linear-gradient(90deg, rgb(5 21 36 / 94%), rgb(5 21 36 / 75%)), url("../img/loong-footer-2026.webp");
    background-position: center 57%;
  }

  body:has(.solar-home) #kf {
    background: #edf4f8;
    padding-block: 68px;
  }

  body:has(.solar-home) #kf .cs-eyebrow {
    color: #0c5caa;
  }

  body:has(.solar-home) #kf .cs-title {
    color: #172d3e;
  }

  .solar-home {
    color: #203342;
    background: #fff;
    overflow: clip;
  }

  .solar-home h1,
  .solar-home h2,
  .solar-home h3,
  .solar-home p {
    margin: 0;
    letter-spacing: 0;
  }

  .solar-home a {
    text-decoration: none;
  }

  .solar-shell {
    width: min(100% - 80px, 1320px);
    margin-inline: auto;
  }

  .solar-hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 650px;
    color: #fff;
    isolation: isolate;
    background: #173854;
  }

  .solar-hero__image,
  .solar-hero::after {
    position: absolute;
    inset: 0;
  }

  .solar-hero__image {
    z-index: -2;
    background: url("../img/loong-hero-2026.webp") 58% center / cover no-repeat;
  }

  .solar-hero::after {
    content: "";
    z-index: -1;
    background: linear-gradient(90deg, rgb(8 26 46 / 82%) 0%, rgb(8 26 46 / 58%) 34%, rgb(8 26 46 / 3%) 75%);
  }

  .solar-hero__content {
    position: relative;
    padding-top: clamp(188px, 25svh, 280px);
  }

  .solar-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0c5caa;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    text-transform: uppercase;
  }

  .solar-eyebrow i {
    font-size: 18px;
    font-weight: 400;
    color: #e69b12;
  }

  .solar-eyebrow span {
    width: 20px;
    height: 2px;
    background: #f2ac2c;
  }

  .solar-eyebrow--light {
    color: #ffd177;
  }

  .solar-hero h1 {
    max-width: 730px;
    margin-top: 24px;
    color: #fff;
    font-size: clamp(54px, 5.7vw, 88px);
    line-height: 1.03;
    font-weight: 750;
  }

  .solar-hero__lead {
    max-width: 570px;
    margin-top: 25px !important;
    color: #eaf2f8;
    font-size: 17px;
    line-height: 1.7;
  }

  .solar-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 35px;
  }

  .solar-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    min-width: 186px;
    min-height: 52px;
    padding: 13px 20px;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 750;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
  }

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

  .solar-button i {
    font-size: 19px;
  }

  .solar-button--sun {
    background: #f2ac2c;
    color: #142a3c !important;
  }

  .solar-button--sun:hover {
    background: #ffd06a;
  }

  .solar-button--outline {
    border: 1px solid rgb(255 255 255 / 75%);
    color: #fff !important;
  }

  .solar-button--outline:hover {
    background: rgb(255 255 255 / 14%);
  }

  .solar-button--blue {
    background: #0c5caa;
    color: #fff !important;
  }

  .solar-button--blue:hover {
    background: #094a89;
  }

  .solar-hero__foot {
    position: absolute;
    right: 0;
    bottom: 27px;
    left: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    color: #eaf3f9;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .solar-hero__foot span + span::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 18px;
    vertical-align: middle;
    border-radius: 50%;
    background: #f2ac2c;
  }

  .solar-hero__foot a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-left: auto;
    border: 1px solid rgb(255 255 255 / 65%);
    color: #fff;
    font-size: 18px;
  }

  .solar-section {
    padding: 82px 0 86px;
  }

  .solar-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 48px;
    margin-bottom: 30px;
  }

  .solar-heading h2 {
    max-width: 770px;
    margin-top: 15px;
    color: #172d3e;
    font-size: clamp(32px, 3vw, 47px);
    line-height: 1.14;
    font-weight: 730;
  }

  .solar-heading > p {
    max-width: 360px;
    padding-bottom: 3px;
    color: #637785;
    font-size: 14px;
    line-height: 1.7;
  }

  .solar-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .solar-category {
    position: relative;
    min-width: 0;
    aspect-ratio: 1.45;
    overflow: hidden;
    background: #dce8ef;
    color: #fff !important;
  }

  .solar-category::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgb(3 23 42 / 76%) 100%);
    transition: background-color .2s ease;
  }

  .solar-category:hover::after {
    background-color: rgb(7 46 80 / 15%);
  }

  .solar-category img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
    transition: transform .3s ease;
  }

  .solar-category:hover img {
    transform: scale(1.04);
  }

  .solar-category__name,
  .solar-category > i {
    position: absolute;
    z-index: 1;
    bottom: 17px;
  }

  .solar-category__name {
    left: 18px;
    right: 47px;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 750;
  }

  .solar-category > i {
    right: 17px;
    font-size: 19px;
  }

  .solar-text-link {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    color: #0c5caa !important;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .solar-text-link i {
    font-size: 19px;
    transition: transform .2s ease;
  }

  .solar-text-link:hover i {
    transform: translateX(4px);
  }

  .solar-factory {
    background: #142b3b;
  }

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

  .solar-heading--dark > p {
    color: #bccbd4;
  }

  .solar-heading--dark .solar-eyebrow {
    color: #f6ba48;
  }

  .solar-factory-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 430px 220px;
    gap: 10px;
  }

  .solar-factory-photo {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: #274252;
  }

  .solar-factory-photo--0,
  .solar-factory-photo--1 {
    grid-column: span 2;
  }

  .solar-factory-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .solar-factory-photo--0 img {
    object-position: center center;
  }

  .solar-factory-photo::after {
    content: "";
    position: absolute;
    inset: 50% 0 0;
    background: linear-gradient(transparent, rgb(0 14 25 / 68%));
  }

  .solar-factory-photo figcaption {
    position: absolute;
    z-index: 1;
    bottom: 18px;
    left: 20px;
    color: #fff;
    font-size: 14px;
    font-weight: 750;
  }

  .solar-text-link--light {
    color: #f7bd52 !important;
  }

  .solar-products {
    background: #f4f8fa;
  }

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

  .solar-product {
    min-width: 0;
    background: #fff;
    border: 1px solid #e3ebf0;
  }

  .solar-product__image {
    display: block;
    aspect-ratio: 1.28;
    overflow: hidden;
    background: #eaf1f5;
  }

  .solar-product__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
  }

  .solar-product:hover .solar-product__image img {
    transform: scale(1.04);
  }

  .solar-product__body {
    position: relative;
    min-height: 130px;
    padding: 17px 42px 20px 18px;
  }

  .solar-product__body > span {
    display: block;
    margin-bottom: 8px;
    color: #e39a16;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .solar-product h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #213746;
    font-size: 15px;
    line-height: 1.42;
    font-weight: 700;
  }

  .solar-product h3 a {
    color: inherit;
  }

  .solar-product__link {
    position: absolute;
    right: 17px;
    bottom: 18px;
    color: #0c5caa;
    font-size: 22px;
  }

  .solar-overseas {
    position: relative;
    min-height: 530px;
    display: flex;
    align-items: center;
    color: #fff;
    isolation: isolate;
    background: #224058;
  }

  .solar-overseas > img {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .solar-overseas::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg, rgb(7 31 52 / 83%) 0%, rgb(7 31 52 / 57%) 38%, transparent 78%);
  }

  .solar-overseas__content {
    padding-block: 80px;
  }

  .solar-overseas h2 {
    max-width: 640px;
    margin-top: 20px;
    color: #fff;
    font-size: clamp(42px, 4.3vw, 66px);
    line-height: 1.08;
    font-weight: 740;
  }

  .solar-overseas__content > p:not(.solar-eyebrow) {
    max-width: 470px;
    margin: 22px 0 29px;
    color: #eaf2f8;
    font-size: 16px;
    line-height: 1.7;
  }

  .solar-process {
    background: #fff;
  }

  .solar-process-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid #c7d9e3;
  }

  .solar-step {
    min-width: 0;
    padding: 27px 25px 16px 0;
    border-right: 1px solid #dce6eb;
  }

  .solar-step + .solar-step {
    padding-left: 25px;
  }

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

  .solar-step > i {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 25px;
    background: #eaf3f9;
    color: #0c5caa;
    font-size: 25px;
  }

  .solar-step h3 {
    color: #1d3342;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 750;
  }

  .solar-step p {
    margin-top: 10px;
    color: #687b87;
    font-size: 13px;
    line-height: 1.65;
  }

  .solar-process__close {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 45px;
    padding: 23px 28px;
    background: #eaf3f8;
  }

  .solar-process__close p {
    color: #1c3b50;
    font-size: 20px;
    font-weight: 700;
  }

  @media (max-width: 1100px) {
    .solar-shell {
      width: min(100% - 48px, 1320px);
    }

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

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

    .solar-factory-grid {
      grid-template-rows: 320px 170px;
    }

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

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

  @media (max-width: 820px) {
    .solar-hero {
      min-height: 610px;
    }

    .solar-hero__image {
      background-position: 63% center;
    }

    .solar-hero__content {
      padding-top: 175px;
    }

    .solar-hero h1 {
      max-width: 520px;
      font-size: 49px;
    }

    .solar-hero__lead {
      max-width: 480px;
      font-size: 15px;
    }

    .solar-heading {
      display: block;
    }

    .solar-heading > p {
      max-width: 670px;
      margin-top: 14px;
    }

    .solar-factory-grid {
      grid-template-rows: 280px 150px;
    }

    .solar-factory-photo figcaption {
      left: 10px;
      bottom: 10px;
      font-size: 11px;
    }
  }
}