/* LIYAN CONSTRUCTION — SHARED RESPONSIVE STYLESHEET

   Edit colors in :root; page sections are grouped by comments below.

*/

:root {

    --gold: #ffd600;

    --blue: #102b63;

    --red: #ed1c24;

    --ink: #102b63;

    --muted: #626b79;

    --paper: #f4f7fc;

    --max: 1200px
}

* {

    box-sizing: border-box
}

html {

    scroll-behavior: smooth;

    scroll-padding-top: 90px
}

body {

    margin: 0;

    color: var(--ink);

    font-family: Arial, Helvetica, sans-serif;

    line-height: 1.7
}

img {

    max-width: 100%;

    display: block;

    object-fit: cover
}

a {

    color: inherit;

    text-decoration: none
}

button,

input,

select,

textarea {

    font: inherit
}

.wrap {

    width: min(var(--max), 92%);

    margin: auto
}

.heading {

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -.6px
}

.eyebrow {

    color: var(--blue);

    text-transform: uppercase;

    font-size: 12px;

    letter-spacing: 2px;

    font-weight: 800
}
.eyebrow-last {

    color: var(--la-white);

    text-transform: uppercase;

    font-size: 12px;

    letter-spacing: 2px;

    font-weight: 800
}

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 14px 22px;

    background: var(--gold);

    border: 1px solid var(--gold);

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

    transition: .25s
}

.btn:hover {

    background: #fff;

    border-color: #fff
}

.btn-dark {

    background: var(--blue);

    color: #fff;

    border-color: var(--blue)
}

.btn-dark:hover {

    background: var(--red);

    border-color: var(--red);

    color: #fff
}

.btn-outline {

    background: transparent;

    color: #fff;

    border-color: #fff
}

.section {

    padding: 82px 0
}

.section-head {

    margin-bottom: 34px
}

.section-head h2 {

    font-size: clamp(30px, 4vw, 44px);

    margin: 10px 0
}

.section-head p,

.muted {

    max-width: 680px;

    color: var(--muted);

    font-size: 14px
}

.topbar {

    background: #ffd600;

    color: black;

    font-size: 12px
}

.topbar-inner {

    min-height: 38px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px
}

.top-info {

    display: flex;

    flex-wrap: wrap;

    gap: 18px
}

.topbar i,

.footer-links i {

    color: #071a3d;

    margin-right: 7px
}

.top-social {

    display: flex;

    gap: 14px
}

.site-header {

    background: #fff;

    position: relative;

    z-index: 20;

    border-bottom: 1px solid #eee
}

.nav {

    min-height: 84px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px
}

.brand {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0
}

.brand-symbol {

    width: 45px;

    height: 45px;

    background: var(--ink);

    color: var(--gold);

    display: grid;

    place-items: center;

    font-size: 22px
}

.brand-title {

    font-weight: 900;

    font-size: 22px;

    line-height: 1.1
}

.brand-title small {

    display: block;

    font-size: 9px;

    letter-spacing: 1.5px;

    margin-top: 5px
}

.nav-links {

    display: flex;

    align-items: center;

    gap: 20px
}

.nav-links a {

    font-size: 11px;

    font-weight: 800
}

.nav-links a:hover,

.nav-links a.active {

    color: var(--red)
}

.menu-toggle {

    display: none;

    border: 0;

    background: transparent;

    font-size: 24px;

    padding: 8px
}

.hero {

    position: relative;

    min-height: 570px;

    display: flex;

    align-items: center;

    color: #fff;

    background: #242824;

    overflow: hidden
}

.hero:before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg, #111e 0%, #111a 48%, #1114 100%), url('img/hero-building.jpg') center/cover
}

.hero-copy {

    position: relative;

    max-width: 760px;

    padding: 85px 0
}

.hero .eyebrow {

    color: var(--gold)
}

.hero h1 {

    font-size: clamp(39px, 5.4vw, 68px);

    margin: 18px 0
}

.hero h1 span {

    color: var(--gold)
}

.hero p {

    max-width: 600px;

    color: #e4e4e0;

    font-size: 15px;

    margin: 0 0 28px
}

.hero-actions {

    display: flex;

    gap: 12px;

    flex-wrap: wrap
}

.hero-note {

    display: flex;

    gap: 12px;

    align-items: center;

    font-size: 12px;

    margin-top: 34px
}

.hero-note i {

    color: var(--gold);

    font-size: 24px
}

.stats {

    background: var(--gold)
}

.stats-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr)
}

.stat {

    padding: 22px 17px;

    border-right: 1px solid #d4b500
}

.stat:last-child {

    border: 0
}

.stat strong {

    display: block;

    font-size: 27px;

    font-weight: 900
}

.stat span {

    font-size: 12px;

    font-weight: 800
}

.about-grid,

.two-col {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 55px;

    align-items: center
}

.about-visual {

    position: relative;

    padding: 0 25px 25px 0
}

.about-visual img {

    width: 100%;

    height: 440px;

    background: #ddd
}

.about-badge {

    position: absolute;

    right: 0;

    bottom: 0;

    background: var(--gold);

    padding: 18px 23px;

    max-width: 230px
}

.about-badge strong {

    display: block;

    font-size: 27px
}

.about-badge span {

    font-size: 12px;

    font-weight: 700
}

.copy h2 {

    font-size: clamp(30px, 4vw, 43px);

    margin: 10px 0 18px
}

.copy p {

    font-size: 14px;

    color: var(--muted)
}

.checks {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin: 22px 0
}

.checks span {

    font-size: 13px;

    font-weight: 700
}

.checks i {

    color: var(--blue);

    margin-right: 7px
}

.soft {

    background: var(--paper)
}

.cards {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px
}

.card {

    background: #fff;

    overflow: hidden;

    transition: .25s
}

.card:hover {

    transform: translateY(-5px);

    box-shadow: 0 14px 30px #1111
}

.card-img {

    height: 190px;

    background: #ddd
}

.card-img img {

    height: 100%;

    width: 100%
}

.card-body {

    padding: 20px
}

.card-icon {

    width: 43px;

    height: 43px;

    background: var(--gold);

    display: grid;

    place-items: center;

    margin-top: -42px;

    position: relative;

    font-size: 20px;

    margin-bottom: 14px
}

.card h3 {

    font-size: 18px;

    line-height: 1.3;

    margin: 0 0 9px
}

.card p {

    font-size: 13px;

    color: var(--muted);

    margin: 0 0 15px
}

.text-link {

    color: var(--blue);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .4px
}

.cta {

    background: var(--blue);

    color: #fff;

    padding: 62px 0
}

.cta-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px
}

.cta h2 {

    font-size: clamp(28px, 4vw, 42px);

    margin: 7px 0
}

.cta p {

    color: #c6c8c4;

    font-size: 14px;

    margin: 0
}

.project-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 17px
}

.project-card {

    position: relative;

    height: 310px;

    overflow: hidden;

    background: #333
}

.project-card img {

    width: 100%;

    height: 100%;

    transition: .4s
}

.project-card:hover img {

    transform: scale(1.06)
}

.project-card:after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(0deg, #111d, transparent 70%)
}

.project-caption {

    position: absolute;

    z-index: 1;

    left: 20px;

    bottom: 18px;

    color: #fff
}

.project-caption span {

    font-size: 11px;

    color: var(--gold);

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px
}

.project-caption h3 {

    margin: 4px 0;

    font-size: 21px
}

.reason-list {

    display: grid;

    gap: 15px
}

.reason {

    display: flex;

    gap: 16px;

    padding: 18px;

    background: #fff
}

.reason>i {

    font-size: 23px;

    color: var(--blue);

    min-width: 28px
}

.reason h3 {

    font-size: 17px;

    margin: 0 0 4px
}

.reason p {

    font-size: 13px;

    color: var(--muted);

    margin: 0
}

.page-banner {
    background:
        linear-gradient(90deg, #111e, #1119),
        url('../img/subbanner.png') center center / cover no-repeat;
    color: #fff;
    padding: 68px 0;
    background-position: center center;
}

.breadcrumb {

    font-size: 12px;

    color: #ddd
}

.breadcrumb a {

    color: var(--gold)
}

.page-banner h1 {

    font-size: clamp(35px, 5vw, 55px);

    margin: 10px 0
}

.page-banner p {

    color: #eee;

    max-width: 700px;

    margin: 0
}

.service-detail {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 36px;

    align-items: center;

    margin-bottom: 45px
}

.service-detail:nth-child(even) .detail-image {

    order: 2
}

.detail-image {

    height: 330px;

    width: 100%;

    background: #ddd
}

.detail-copy h2 {

    font-size: 30px;

    margin: 8px 0
}

.detail-copy p {

    font-size: 14px;

    color: var(--muted)
}

.contact-grid {

    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 55px;

    align-items: start
}

.contact-item {

    display: flex;

    gap: 13px;

    margin-top: 22px
}

.contact-icon {

    width: 44px;

    height: 44px;

    background: var(--gold);

    display: grid;

    place-items: center;

    flex-shrink: 0
}

.contact-item strong {

    display: block;

    font-size: 14px
}

.contact-item span {

    font-size: 13px;

    color: var(--muted);

    overflow-wrap: anywhere
}

.contact-form {

    background: var(--paper);

    padding: 28px
}

.contact-form h2 {

    font-size: 25px;

    margin: 0 0 20px
}

.form-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px
}

.field {

    display: flex;

    flex-direction: column;

    gap: 5px
}

.field.full {

    grid-column: 1/-1
}

.field label {

    font-size: 12px;

    font-weight: 800
}

.field input,

.field select,

.field textarea {

    padding: 12px;

    border: 1px solid #dcdad3;

    background: #fff;

    width: 100%;

    font-size: 13px;

    outline-color: var(--gold)
}

.field textarea {

    min-height: 115px;

    resize: vertical
}

.contact-form button {

    width: 100%;

    margin-top: 18px
}

.footer {

    background: var(--ink);

    color: #ddd;

    padding: 48px 0 0
}

.footer-grid {

    display: grid;

    grid-template-columns: 1.4fr 1fr 1fr;

    gap: 38px;

    padding-bottom: 32px
}

.footer .brand-title {

    color: #fff
}

.footer p {

    font-size: 13px;

    color: #bfc1bd
}

.footer h3 {

    font-size: 18px;

    color: #fff;

    margin: 0 0 15px
}

.footer-links {

    display: grid;

    gap: 9px;

    font-size: 13px
}

.footer-links a:hover {

    color: var(--gold)
}

.copyright {

    border-top: 1px solid #363936;

    padding: 16px 0;

    font-size: 12px
}

.copyright-inner {

    display: flex;

    justify-content: space-between;

    gap: 12px;

    flex-wrap: wrap
}

.whatsapp {

    position: fixed;

    right: 20px;

    bottom: 20px;

    z-index: 30;

    width: 52px;

    height: 52px;

    border-radius: 50%;

    background: #20b85a;

    color: #fff;

    display: grid;

    place-items: center;

    font-size: 27px;

    box-shadow: 0 5px 18px #0003
}

@media(max-width:1100px) {

    .nav-links {

        gap: 12px
    }

    .nav-links a {

        font-size: 10px
    }

    .nav>.btn {

        display: none
    }

    .cards {

        grid-template-columns: repeat(2, 1fr)
    }

}

@media(max-width:760px) {

    .top-inner {

        justify-content: center;

        padding: 8px 0
    }

    .top-info {

        justify-content: center;

        gap: 5px 13px
    }

    .top-social {

        display: none
    }

    .nav {

        min-height: 72px
    }

    .brand-title {

        font-size: 20px
    }

    .brand-symbol {

        width: 41px;

        height: 41px
    }

    .menu-toggle {

        display: block
    }

    .nav-links {

        display: none;

        position: absolute;

        top: 100%;

        left: 0;

        right: 0;

        background: #fff;

        padding: 12px 4% 18px;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        box-shadow: 0 10px 20px #0001
    }

    .nav-links.open {

        display: flex
    }

    .nav-links a {

        padding: 11px 0;

        border-bottom: 1px solid #eee;

        font-size: 13px
    }

    .hero {

        min-height: 540px
    }

    .hero-copy {

        padding: 65px 0
    }

    .stats-grid {

        grid-template-columns: repeat(2, 1fr)
    }

    .stat {

        padding: 17px 12px;

        border-bottom: 1px solid #b78d3e
    }

    .stat:nth-child(2) {

        border-right: 0
    }

    .stat:nth-child(3),

    .stat:nth-child(4) {

        border-bottom: 0
    }

    .section {

        padding: 60px 0
    }

    .about-grid,

    .two-col,

    .contact-grid {

        grid-template-columns: 1fr;

        gap: 30px
    }

    .about-visual img {

        height: 330px
    }

    .cards {

        gap: 12px
    }

    .card-img {

        height: 155px
    }

    .card-body {

        padding: 16px 13px
    }

    .cta-inner {

        align-items: flex-start;

        flex-direction: column
    }

    .project-grid {

        grid-template-columns: 1fr 1fr;

        gap: 12px
    }

    .project-card {

        height: 245px
    }

    .project-card:first-child {

        grid-column: 1/-1
    }

    .service-detail {

        grid-template-columns: 1fr;

        gap: 20px
    }

    .service-detail:nth-child(even) .detail-image {

        order: 0
    }

    .detail-image {

        height: 280px
    }

    .footer-grid {

        grid-template-columns: 1fr 1fr;

        gap: 25px 18px
    }

    .footer-grid>:first-child {

        grid-column: 1/-1
    }

}

@media(max-width:440px) {

    .hero h1 {

        font-size: 37px
    }

    .hero-actions .btn {

        width: 100%
    }

    .cards,

    .project-grid,

    .form-grid,

    .footer-grid {

        grid-template-columns: 1fr
    }

    .project-card:first-child {

        grid-column: auto
    }

    .project-card {

        height: 280px
    }

    .checks {

        grid-template-columns: 1fr
    }

    .field.full {

        grid-column: auto
    }

    .footer-grid>:first-child {

        grid-column: auto
    }

}

/* HOMEPAGE: project gallery button spacing */

.gallery-button-row {

    margin-top: 25px;

}

/* ============================================================

   EDITABLE PAGE SECTIONS: PROCESS, FAQ AND GALLERY

   Adjust these rules to change the added homepage/page sections.

\============================================================ */

/* SECTION: WORK PROCESS */

.process-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;

}

.process-step {

    position: relative;

    background: #fff;

    padding: 28px 22px;

    border-bottom: 3px solid var(--gold);

}

.process-step>span {

    position: absolute;

    top: 14px;

    right: 16px;

    color: #d7a84d;

    font-size: 28px;

    font-weight: 900;

    opacity: .55;

}

.process-step>i {

    display: grid;

    place-items: center;

    width: 48px;

    height: 48px;

    margin-bottom: 20px;

    background: var(--gold);

    font-size: 21px;

}

.process-step h3 {

    margin: 0 0 8px;

    font-size: 19px;

}

.process-step p {

    margin: 0;

    color: var(--muted);

    font-size: 13px;

}

/* SECTION: FAQ */

.faq-list {

    display: grid;

    gap: 12px;

    max-width: 900px;

}

.faq-item {

    padding: 19px 22px;

    background: #fff;

    border: 1px solid #e8e5dd;

}

.faq-item summary {

    cursor: pointer;

    font-weight: 800;

    font-size: 15px;

}

.faq-item summary::marker {

    color: #99702b;

}

.faq-item p {

    margin: 12px 0 0;

    color: var(--muted);

    font-size: 14px;

}

/* SECTION: FULL GALLERY */

.gallery-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

}

.gallery-item {

    margin: 0;

    background: var(--paper);

    overflow: hidden;

}

.gallery-item img {

    width: 100%;

    height: 260px;

    transition: transform .35s;

}

.gallery-item:hover img {

    transform: scale(1.035);

}

.gallery-item figcaption {

    display: flex;

    flex-direction: column;

    gap: 2px;

    padding: 15px 17px;

}

.gallery-item figcaption strong {

    font-size: 15px;

}

.gallery-item figcaption span {

    color: var(--muted);

    font-size: 12px;

}

/* SECTION: PROJECT GRID */

.project-grid-large {

    row-gap: 18px;

}

.detail-image-wrap {

    min-width: 0;

}

.detail-image-wrap .detail-image {

    display: block;

}

/* HOMEPAGE: PROJECT GALLERY BUTTON */

.gallery-button-row {

    margin-top: 25px;

}

/* RESPONSIVE LAYOUT FOR ADDED SECTIONS */

@media (max-width: 900px) {

    .process-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .gallery-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media (max-width: 760px) {

    .process-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 12px;

    }

    .gallery-grid {

        grid-template-columns: 1fr;

    }

    .gallery-item img {

        height: 260px;

    }

}

@media (max-width: 440px) {

    .process-grid {

        grid-template-columns: 1fr;

    }

}

/* ============================================================

   LIYAN PREMIUM STYLE UPDATE

   Original premium styles retained for compatibility; final blue, yellow and red overrides are below.

   All new hero styles use the unique liyan-hero- prefix.

\============================================================ */

:root {

    --liyan-wine: #651923;

    --liyan-wine-dark: #3b0b12;

    --liyan-gold: #c6a15b;

    --liyan-ivory: #fffdf8;

    --liyan-blush: #f8f0e9;

    --liyan-text: #292321;

    --liyan-muted: #766c66;

}

/* Premium section rhythm and restrained warm backgrounds */

.section {

    padding-top: clamp(58px, 7vw, 100px);

    padding-bottom: clamp(58px, 7vw, 100px);

}

.section.soft {

    background: linear-gradient(135deg, #fffdf9 0%, #f8f1eb 55%, #fffdf9 100%);

}

.section-head {

    max-width: 760px;

    margin: 0 auto 38px;

}

.eyebrow {

    color: var(--liyan-wine);

    letter-spacing: 2px;

    font-weight: 800;

}

.heading {

    letter-spacing: -.035em;

}

.btn,

.btn-dark {

    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;

}

.btn:hover,

.btn-dark:hover {

    transform: translateY(-2px);

    box-shadow: 0 12px 26px rgba(59, 11, 18, .16);

}

/* ============================================================

   HERO SLIDER — 3 AUTO-PLAYING SLIDES

\============================================================ */

.liyan-hero-slider {

    position: relative;

    min-height: clamp(560px, 49vw, 720px);

    color: #fff;

    background: var(--liyan-wine-dark);

    overflow: hidden;

    isolation: isolate;

}

.liyan-hero-slides {

    position: absolute;

    inset: 0;

}

.liyan-hero-slide {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    opacity: 0;

    visibility: hidden;

    transform: scale(1.025);

    transition: opacity .8s ease, visibility .8s ease, transform 5.8s ease;

    pointer-events: none;

}

.liyan-hero-slide.is-active {

    opacity: 1;

    visibility: visible;

    transform: scale(1);

    pointer-events: auto;

    z-index: 1;

}

.liyan-hero-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center 48%;

}

.liyan-hero-shade {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(90deg, rgba(28, 7, 10, .91) 0%, rgba(42, 9, 14, .78) 39%, rgba(44, 11, 16, .35) 72%, rgba(30, 7, 10, .18) 100%),

        linear-gradient(0deg, rgba(30, 7, 10, .35), transparent 48%);

}

.liyan-hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    padding-top: 64px;

    padding-bottom: 108px;

}

.liyan-hero-kicker {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

    color: #f1d7a1;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.4px;

    text-transform: uppercase;

}

.liyan-hero-kicker::before {

    content: "";

    width: 34px;

    height: 1px;

    background: var(--liyan-gold);

}

.liyan-hero-title {

    max-width: 780px;

    margin: 0 0 20px;

    color: #fffaf2;

    font-family: "Playfair Display", Georgia, serif;

    font-size: clamp(42px, 5.8vw, 78px);

    font-weight: 600;

    line-height: 1.07;

    letter-spacing: -.035em;

    text-wrap: balance;

}

.liyan-hero-title span {

    color: #e5c17b;

    font-style: italic;

}

.liyan-hero-description {

    max-width: 590px;

    margin: 0;

    color: rgba(255, 250, 242, .86);

    font-size: clamp(15px, 1.2vw, 18px);

    line-height: 1.85;

}

.liyan-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 30px;

}

.liyan-hero-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 52px;

    padding: 0 22px;

    background: var(--liyan-gold);

    border: 1px solid var(--liyan-gold);

    color: #2e1112;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1.1px;

    text-decoration: none;

    transition: background .25s ease, color .25s ease, transform .25s ease;

}

.liyan-hero-btn:hover {

    background: #f2d9a5;

    border-color: #f2d9a5;

    color: #2e1112;

    transform: translateY(-2px);

}

.liyan-hero-btn-outline {

    color: #fff;

    background: transparent;

    border-color: rgba(255, 255, 255, .58);

}

.liyan-hero-btn-outline:hover {

    color: var(--liyan-wine-dark);

    background: #fffaf2;

    border-color: #fffaf2;

}

.liyan-hero-note {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 35px;

    color: rgba(255, 250, 242, .84);

    font-size: 12px;

    line-height: 1.6;

}

.liyan-hero-note>i {

    display: grid;

    place-items: center;

    width: 43px;

    height: 43px;

    border: 1px solid rgba(229, 193, 123, .6);

    border-radius: 50%;

    color: #e5c17b;

    font-size: 17px;

}

.liyan-hero-controls {

    position: absolute;

    z-index: 5;

    left: 50%;

    bottom: 25px;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 22px;

}

.liyan-hero-pagination {

    display: flex;

    align-items: center;

    gap: 8px;

}

.liyan-hero-dot {

    width: 22px;

    height: 3px;

    padding: 0;

    border: 0;

    background: rgba(255, 255, 255, .45);

    cursor: pointer;

    transition: width .25s ease, background .25s ease;

}

.liyan-hero-dot.is-active {

    width: 42px;

    background: var(--liyan-gold);

}

.liyan-hero-arrows {

    display: flex;

    gap: 7px;

    margin-left: auto;

}

.liyan-hero-arrow {

    display: grid;

    place-items: center;

    width: 39px;

    height: 39px;

    border: 1px solid rgba(255, 255, 255, .42);

    border-radius: 50%;

    background: rgba(45, 9, 14, .32);

    color: #fff;

    cursor: pointer;

    transition: color .25s ease, background .25s ease, border-color .25s ease;

}

.liyan-hero-arrow:hover {

    color: #2e1112;

    background: var(--liyan-gold);

    border-color: var(--liyan-gold);

}

.liyan-hero-counter {

    color: rgba(255, 255, 255, .66);

    font-size: 12px;

    letter-spacing: 1px;

    white-space: nowrap;

}

.liyan-hero-counter strong {

    color: #f1d7a1;

    font-size: 16px;

}

.liyan-hero-counter span {

    padding: 0 4px;

}

.liyan-hero-side-label {

    position: absolute;

    z-index: 4;

    right: 24px;

    top: 50%;

    color: rgba(255, 255, 255, .65);

    font-size: 9px;

    letter-spacing: 2.5px;

    writing-mode: vertical-rl;

    transform: translateY(-50%) rotate(180deg);

}

/* Top navigation and footer harmonize with the premium palette */

.topbar {

    background: #ffd600;

}

.site-header {

    border-bottom-color: rgba(198, 161, 91, .35);

}

.brand-symbol {

    background: var(--liyan-wine);

    color: #f0d59a;

}

.nav-links a.active,

.nav-links a:hover {

    color: var(--liyan-wine);

}

.card {

    border: 1px solid rgba(101, 25, 35, .09);

    box-shadow: 0 10px 35px rgba(55, 23, 20, .045);

    transition: transform .3s ease, box-shadow .3s ease;

}

.card:hover {

    transform: translateY(-5px);

    box-shadow: 0 18px 42px rgba(55, 23, 20, .11);

}

.card-icon {

    background: #f5e8d8;

    color: var(--liyan-wine);

}

.text-link {

    color: var(--liyan-wine);

}

.cta {

    background: linear-gradient(115deg, #3b0b12, #681923 55%, #3b0b12);

}

.footer {

    background: #25090d;

}

.footer .brand-symbol {

    background: var(--liyan-gold);

    color: #2e1112;

}

/* Responsive hero */

@media (max-width: 760px) {

    .liyan-hero-slider {

        min-height: 630px;

    }

    .liyan-hero-shade {

        background: linear-gradient(90deg, rgba(28, 7, 10, .88), rgba(42, 9, 14, .55)),

            linear-gradient(0deg, rgba(30, 7, 10, .42), transparent 70%);

    }

    .liyan-hero-content {

        padding-top: 66px;

        padding-bottom: 118px;

    }

    .liyan-hero-title {

        max-width: 610px;

        font-size: clamp(39px, 9vw, 60px);

    }

    .liyan-hero-description {

        max-width: 510px;

    }

    .liyan-hero-side-label {

        display: none;

    }

    .liyan-hero-controls {

        gap: 13px;

        bottom: 20px;

    }

}

@media (max-width: 480px) {

    .liyan-hero-slider {

        min-height: 650px;

    }

    .liyan-hero-content {

        padding-top: 58px;

        padding-bottom: 128px;

    }

    .liyan-hero-kicker {

        font-size: 9px;

        letter-spacing: 1.5px;

    }

    .liyan-hero-title {

        font-size: clamp(36px, 10vw, 48px);

    }

    .liyan-hero-description {

        font-size: 14px;

        line-height: 1.75;

    }

    .liyan-hero-actions {

        align-items: stretch;

        flex-direction: column;

        max-width: 290px;

    }

    .liyan-hero-btn {

        width: 100%;

        padding: 0 13px;

    }

    .liyan-hero-note {

        margin-top: 25px;

    }

    .liyan-hero-controls {

        width: calc(100% - 32px);

    }

    .liyan-hero-counter {

        margin-left: auto;

    }

    .liyan-hero-arrows {

        margin-left: 0;

    }

}

@media (prefers-reduced-motion: reduce) {

    .liyan-hero-slide {

        transition: none;

        transform: none;

    }

    .liyan-hero-image,

    .card,

    .btn,

    .btn-dark {

        transition: none;

    }

}

/* LIYAN LOGO: actual company artwork */

.brand-logo {

    width: 64px;

    height: 76px;

    object-fit: contain;

    display: block;

    flex: 0 0 auto;

    /* background: #000 */
}

.footer .brand-logo {

    width: 72px;

    height: 88px
}

.brand-title {

    color: var(--blue)
}

.brand-title small {

    color: var(--red)
}

.btn {

    color: var(--blue)
}

.btn-dark {

    color: #fff
}

.hero h1 span,

.project-caption span {

    color: var(--gold)
}

.nav-links a:hover,

.nav-links a.active {

    color: var(--red)
}

.topbar i,

.footer-links i {

    color: #071a3d;
}

@media(max-width:600px) {

    .brand-logo {

        width: 48px;

        height: 62px
    }

    .footer .brand-logo {

        width: 58px;

        height: 72px
    }

}

/* FINAL RESPONSIVE HEADER FIX — keep the supplied portrait logo compact */

.site-header {

    width: 100%;

}

.site-header .nav {

    width: min(var(--max), 92%);

    min-width: 0;

    display: flex;

    flex-wrap: nowrap;

}

.site-header .brand {

    min-width: 0;

    flex: 0 0 auto;

}

.site-header .brand-logo {

    width: 74px !important;

    height: 74px !important;

    max-width: 74px !important;

    max-height: 85px !important;

    object-fit: contain !important;

    flex: 0 0 74px !important;

}

.site-header .nav-links {

    flex: 0 1 auto;

    min-width: 0;

}

.site-header .nav-links a {

    white-space: nowrap;

}

.footer .brand-logo {

    width: 84px !important;

    height: 84px !important;

    max-width: 84px !important;

    max-height: 84px !important;

    object-fit: contain !important;

}

@media (max-width: 900px) {

    .site-header .nav {

        gap: 12px;

    }

    .site-header .nav-links {

        gap: 12px;

    }

}

@media (max-width: 760px) {

    .site-header .nav {

        min-height: 72px;

        justify-content: space-between;

    }

    .site-header .brand-logo {

        width: 54px !important;

        height: 58px !important;

        max-width: 54px !important;

        max-height: 58px !important;

        flex-basis: 54px !important;

    }

    .site-header .nav-links {

        flex: initial;

    }

    .footer .brand-logo {

        width: 68px !important;

        height: 72px !important;

        max-width: 68px !important;

        max-height: 72px !important;

    }

}

/* ============================================================

   FINAL BRAND + ALIGNMENT PASS

   Brand palette: blue, yellow and red. No burgundy/wine colors.

\============================================================ */

:root {

    --blue: #102b63;

    --ink: #102b63;

    --gold: #ffd600;

    --red: #ed1c24;

    --paper: #f4f7fc;

    --liyan-wine: #102b63;

    --liyan-wine-dark: #071a3d;

    --liyan-gold: #ffd600;

    --liyan-ivory: #ffffff;

    --liyan-blush: #f3f6fc;

    --liyan-text: #17233b;

    --liyan-muted: #626b79;

}

html,

body {

    max-width: 100%;

    overflow-x: clip;

}

body {

    color: #17233b;

}

.section.soft {

    background: linear-gradient(135deg, #fff 0%, #f3f6fc 55%, #fff 100%);

}

.eyebrow,

.text-link {

    color: var(--blue);

}

.btn {

    background: var(--gold);

    border-color: var(--gold);

    color: var(--blue);

}

.btn:hover {

    background: var(--red);

    border-color: var(--red);

    color: #fff;

}

.btn-dark {

    background: var(--blue);

    border-color: var(--blue);

    color: #fff;

}

.btn-dark:hover {

    background: var(--red);

    border-color: var(--red);

}

.topbar {

    background: #ffd600;

}

.cta {

    background: linear-gradient(115deg, #071a3d, #102b63 58%, #163b7c);

}

.footer {

    background: #071a3d;

    color: #eaf0ff;

}

.footer .brand-title {

    color: #fff;

}

.footer .brand-logo {

    background: #000;

}

.footer h3 {

    color: #fff;

}

.copyright {

    border-color: rgba(255, 255, 255, .16);

}

.faq-item {

    border-color: #e1e7f1;

}

.faq-item summary::marker {

    color: var(--red);

}

.process-step {

    border-bottom-color: var(--gold);

    box-shadow: 0 8px 24px rgba(16, 43, 99, .05);

}

.process-step>i,

.contact-icon,

.about-badge {

    background: var(--gold);

    color: var(--blue);

}

.card {

    border: 1px solid #e8edf5;

    box-shadow: 0 8px 22px rgba(16, 43, 99, .045);

}

.card:hover {

    box-shadow: 0 16px 34px rgba(16, 43, 99, .12);

}

.card-icon {

    background: var(--gold);

    color: var(--blue);

}

.site-header {

    background: #fff;

    box-shadow: 0 5px 22px rgba(16, 43, 99, .06);

}

.site-header .nav {

    min-height: 78px;

}

.site-header .brand-logo {

    width: 58px !important;

    height: 58px !important;

    max-width: 58px !important;

    max-height: 58px !important;

    flex: 0 0 58px !important;

    object-fit: contain !important;

}

.site-header .nav-links {

    margin-left: auto;

    gap: clamp(12px, 2vw, 25px);

}

.site-header .nav-links a {

    font-size: 12px;

    letter-spacing: .35px;

}

.site-header .nav-links a:hover,

.site-header .nav-links a.active {

    color: var(--red);

}

.liyan-hero-slider {

    background: #071a3d;

}

.liyan-hero-shade {

    background: linear-gradient(90deg, rgba(5, 17, 41, .82) 0%, rgba(5, 17, 41, .62) 48%, rgba(5, 17, 41, .20) 100%);

}

.liyan-hero-content {

    width: min(var(--max), 90%);

    margin-inline: auto;

    padding-left: clamp(16px, 4vw, 64px);

    padding-right: 20px;

}

.liyan-hero-title {

    max-width: 850px;

    text-wrap: balance;

}

.liyan-hero-description {

    max-width: 590px;

}

.liyan-hero-btn {

    background: var(--gold);

    color: var(--blue);

}

.liyan-hero-btn:hover {

    background: var(--red);

    color: #fff;

}

.liyan-hero-btn-outline {

    background: transparent;

    border-color: rgba(255, 255, 255, .8);

    color: #fff;

}

.liyan-hero-btn-outline:hover {

    background: #fff;

    color: var(--blue);

}

.liyan-hero-kicker {

    color: var(--gold);

}

.liyan-hero-controls {

    padding-left: clamp(18px, 4vw, 60px);

    padding-right: clamp(18px, 4vw, 60px);

}

.liyan-hero-dot.is-active {

    background: var(--gold);

}

.liyan-hero-arrow {

    border-color: rgba(255, 255, 255, .65);

    color: #fff;

}

.liyan-hero-arrow:hover {

    background: var(--gold);

    border-color: var(--gold);

    color: var(--blue);

}

.liyan-hero-counter strong {

    color: var(--gold);

}

.stats {

    background: var(--gold);

    color: var(--blue);

}

.stat {

    border-color: rgba(16, 43, 99, .16);

}

.project-card:after {

    background: linear-gradient(0deg, rgba(5, 17, 41, .88), transparent 72%);

}

.project-caption span {

    color: var(--gold);

}

.whatsapp {

    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);

}

.section-head {

    width: 100%;

}

.section-head h2 {

    max-width: 760px;

}

.about-grid,

.two-col,

.contact-grid,

.service-detail {

    min-width: 0;

}

.cards>*,

.project-grid>*,

.process-grid>*,

.gallery-grid>* {

    min-width: 0;

}

@media (min-width:761px) {

    .section-head {

        margin-left: auto;

        margin-right: auto;

    }

    .liyan-hero-content {

        padding-top: 92px;

        padding-bottom: 120px;

    }

}

@media (max-width:760px) {

    .site-header .nav {

        min-height: 70px;

    }

    .site-header .brand-logo {

        width: 48px !important;

        height: 52px !important;

        max-width: 48px !important;

        max-height: 52px !important;

        flex-basis: 48px !important;

    }

    .site-header .nav-links {

        margin-left: 0;

    }

    .liyan-hero-content {

        width: 100%;

        padding-left: 24px;

        padding-right: 24px;

    }

    .liyan-hero-shade {

        background: linear-gradient(90deg, rgba(5, 17, 41, .84), rgba(5, 17, 41, .54)), linear-gradient(0deg, rgba(5, 17, 41, .3), transparent 70%);

    }

    .section {

        padding-top: 52px;

        padding-bottom: 52px;

    }

    .section-head {

        margin-bottom: 26px;

    }

    .section-head h2 {

        font-size: clamp(27px, 7vw, 36px);

    }

    .card-img {

        height: 165px;

    }

    .card-body {

        padding: 15px;

    }

    .footer-grid {

        align-items: start;

    }

}

@media (max-width:440px) {

    .liyan-hero-content {

        padding-left: 20px;

        padding-right: 20px;

    }

    .liyan-hero-title {

        font-size: clamp(34px, 9.5vw, 43px);

    }

    .cards {

        grid-template-columns: 1fr 1fr;

    }

    .card-img {

        height: 125px;

    }

    .card h3 {

        font-size: 14px;

    }

    .card p {

        font-size: 12px;

    }

}

/* FINAL OVERRIDES — LIYAN BRAND AND LAYOUT */
:root {
    --blue: #102b63;
    --ink: #102b63;
    --gold: #ffd600;
    --red: #ed1c24;
    --paper: #f4f7fc;
    --liyan-wine: #102b63;
    --liyan-wine-dark: #071a3d;
    --liyan-gold: #ffd600;
    --liyan-ivory: #ffffff;
    --liyan-blush: #f3f6fc;
    --liyan-text: #17233b;
    --liyan-muted: #626b79;
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

body {
    color: #17233b;
}

.section.soft {
    background: linear-gradient(135deg, #fff 0%, #f3f6fc 55%, #fff 100%);
}

.topbar {
    background: #ffd600;
}

.site-header {
    background: #fff;
    box-shadow: 0 5px 22px rgba(16, 43, 99, .08);
}

.site-header .nav {
    width: min(var(--max), 92%);
    min-width: 0;
    min-height: 78px;
}

.site-header .brand {
    flex: 0 0 auto;
    min-width: 0;
}

.site-header .brand-logo {
    width: 58px !important;
    height: 58px !important;
    max-width: 58px !important;
    max-height: 85px !important;
    flex: 0 0 58px !important;
    object-fit: contain !important;
}

.site-header .nav-links {
    margin-left: auto;
    gap: clamp(12px, 2vw, 25px);
    min-width: 0;
}

.site-header .nav-links a {
    font-size: 12px;
    letter-spacing: .25px;
    white-space: nowrap;
}

.site-header .nav-links a:hover,
.site-header .nav-links a.active {
    color: var(--red);
}

.brand-title {
    color: var(--blue);
}

.brand-title small {
    color: var(--red);
}

.footer {
    background: #071a3d;
    color: #eaf0ff;
}

.footer .brand-title,
.footer h3 {
    color: #fff;
}

.footer .brand-logo {
    background: #000;
}

.copyright {
    border-color: rgba(255, 255, 255, .16);
}

.cta {
    background: linear-gradient(115deg, #071a3d, #102b63 58%, #163b7c);
}

.eyebrow,
.text-link {
    color: var(--blue);
}

.btn {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--blue);
}

.btn:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.btn-dark {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.btn-dark:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.liyan-hero-slider {
    background: #071a3d;
}

.liyan-hero-shade {
    background: linear-gradient(90deg, rgba(5, 17, 41, .84) 0%, rgba(5, 17, 41, .62) 48%, rgba(5, 17, 41, .20) 100%);
}

.liyan-hero-content {
    width: min(var(--max), 92%);
    margin-inline: auto;
    padding-left: clamp(24px, 5vw, 76px);
    padding-right: clamp(20px, 3vw, 40px);
}

.liyan-hero-title {
    max-width: 850px;
    text-wrap: balance;
}

.liyan-hero-description {
    max-width: 590px;
}

.liyan-hero-kicker,
.liyan-hero-counter strong {
    color: var(--gold);
}

.liyan-hero-btn {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--blue);
}

.liyan-hero-btn:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.liyan-hero-btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .8);
    color: #fff;
}

.liyan-hero-btn-outline:hover {
    background: #fff;
    color: var(--blue);
}

.liyan-hero-dot.is-active {
    background: var(--gold);
}

.liyan-hero-arrow:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--blue);
}

.stats {
    background: var(--gold);
    color: var(--blue);
}

.stat {
    border-color: rgba(16, 43, 99, .16);
}

.card {
    border: 1px solid #e8edf5;
    box-shadow: 0 8px 22px rgba(16, 43, 99, .045);
}

.card:hover {
    box-shadow: 0 16px 34px rgba(16, 43, 99, .12);
}

.card-icon,
.process-step>i,
.contact-icon,
.about-badge {
    background: var(--gold);
    color: var(--blue);
}

.process-step {
    border-bottom-color: var(--gold);
    box-shadow: 0 8px 24px rgba(16, 43, 99, .05);
}

.faq-item {
    border-color: #e1e7f1;
}

.faq-item summary::marker {
    color: var(--red);
}

.project-card:after {
    background: linear-gradient(0deg, rgba(5, 17, 41, .88), transparent 72%);
}

.project-caption span {
    color: var(--gold);
}

.whatsapp {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

@media (min-width: 761px) {
    .liyan-hero-content {
        padding-top: 92px;
        padding-bottom: 120px;
    }
}

@media (max-width: 900px) {
    .site-header .nav {
        gap: 12px;
    }

    .site-header .nav-links {
        gap: 12px;
    }
}

@media (max-width: 760px) {
    .site-header .nav {
        min-height: 70px;
        justify-content: space-between;
    }

    .site-header .brand-logo {
        width: 48px !important;
        height: 52px !important;
        max-width: 48px !important;
        max-height: 52px !important;
        flex-basis: 48px !important;
    }

    .site-header .nav-links {
        margin-left: 0;
    }

    .liyan-hero-content {
        width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }

    .liyan-hero-shade {
        background: linear-gradient(90deg, rgba(5, 17, 41, .86), rgba(5, 17, 41, .55)),
            linear-gradient(0deg, rgba(5, 17, 41, .30), transparent 70%);
    }

    .section {
        padding-top: 52px;
        padding-bottom: 52px;
    }

    .section-head {
        margin-bottom: 26px;
    }

    .section-head h2 {
        font-size: clamp(27px, 7vw, 36px);
    }

    .card-img {
        height: 165px;
    }

    .card-body {
        padding: 15px;
    }

    .footer-grid {
        align-items: start;
    }
}

@media (max-width: 440px) {
    .liyan-hero-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .liyan-hero-title {
        font-size: clamp(34px, 9.5vw, 43px);
    }

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

    .card-img {
        height: 125px;
    }

    .card h3 {
        font-size: 14px;
    }

    .card p {
        font-size: 12px;
    }
}




/* Center the Services section heading and description */
#services .section-head {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 40px;
    text-align: center;
}

#services .section-head .eyebrow {
    display: block;
    text-align: center;
    margin-bottom: 12px;
}

#services .section-head h2 {
    max-width: 100%;
    margin: 0 auto 16px;
    text-align: center;
}

#services .section-head p {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

/* Keep service cards in a clean, aligned grid */
#services .cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

#services .card {
    min-width: 0;
    height: 100%;
}

/* Responsive layout */
@media (max-width: 1000px) {
    #services .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    #services .cards {
        grid-template-columns: 1fr;
    }

    #services .section-head h2 {
        font-size: 30px;
    }
}




/* Center the How We Work heading */
.section.soft .section-head {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 40px;
    text-align: center;
}

.section.soft .section-head .eyebrow {
    display: block;
    margin-bottom: 12px;
    text-align: center;
}

.section.soft .section-head h2 {
    max-width: 100%;
    margin: 0 auto 16px;
    text-align: center;
}

.section.soft .section-head p {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

/* Align the four process cards */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.process-step {
    height: 100%;
    min-width: 0;
}

/* Tablet */
@media (max-width: 900px) {
    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 560px) {
    .process-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .section.soft .section-head h2 {
        font-size: 30px;
    }
}



/* Project Gallery — centered heading */
.project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.project-grid .project-card {
    min-width: 0;
    height: 310px;
    position: relative;
    overflow: hidden;
}

.project-grid .project-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.section:has(.project-grid) > .wrap > .section-head {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 40px;
    text-align: center;
}

.section:has(.project-grid) .section-head .eyebrow {
    display: block;
    margin-bottom: 12px;
}

.section:has(.project-grid) .section-head h2 {
    max-width: 100%;
    margin: 0 auto 16px;
    text-align: center;
}

.section:has(.project-grid) .section-head p {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

/* Gallery button alignment */
.gallery-button-row {
    margin-top: 25px;
    text-align: center;
}

/* Tablet */
@media (max-width: 900px) {
    .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-grid .project-card {
        height: 260px;
    }
}

/* Mobile */
@media (max-width: 560px) {
    .project-grid {
        grid-template-columns: 1fr;
    }

    .project-grid .project-card {
        height: 280px;
    }

    .section:has(.project-grid) .section-head h2 {
        font-size: 30px;
    }
}

/* ========================================
   FAQ SECTION — PREMIUM RESPONSIVE DESIGN
======================================== */

.faq-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* Center FAQ title and label */
.section.soft:has(.faq-list) .section-head {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 38px;
    text-align: center;
}

.section.soft:has(.faq-list) .section-head .eyebrow {
    display: block;
    margin-bottom: 12px;
    text-align: center;
}

.section.soft:has(.faq-list) .section-head h2 {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    color: var(--blue, #102b63);
}

/* FAQ accordion card */
.faq-item {
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #dfe6f1;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(16, 43, 99, 0.04);
    overflow: hidden;
    transition: border-color 0.25s ease,
                box-shadow 0.25s ease;
}

.faq-item:hover,
.faq-item[open] {
    border-color: var(--blue, #102b63);
    box-shadow: 0 8px 22px rgba(16, 43, 99, 0.08);
}

/* Question row */
.faq-item summary {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 76px;
    padding: 22px 58px 22px 24px;
    color: var(--blue, #102b63);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    list-style: none;
    cursor: pointer;
}

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

/* Custom expand/collapse icon */
.faq-item summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 22px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gold, #ffd600);
    color: var(--blue, #102b63);
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    transform: translateY(-50%);
    transition: transform 0.25s ease;
}

.faq-item[open] summary::after {
    content: "−";
    background: var(--blue, #102b63);
    color: #fff;
}

.faq-item summary:focus-visible {
    outline: 3px solid var(--red, #ed1c24);
    outline-offset: -4px;
}

/* Answer */
.faq-item p {
    margin: 0;
    padding: 0 24px 24px;
    color: #626b79;
    font-size: 15px;
    line-height: 1.8;
}

/* Tablet */
@media (max-width: 760px) {
    .section.soft:has(.faq-list) .section-head {
        margin-bottom: 28px;
    }

    .faq-list {
        gap: 12px;
    }

    .faq-item summary {
        min-height: 68px;
        padding: 18px 52px 18px 18px;
        font-size: 16px;
    }

    .faq-item summary::after {
        right: 15px;
    }

    .faq-item p {
        padding: 0 18px 20px;
        font-size: 14px;
    }
}

/* Small mobile */
@media (max-width: 440px) {
    .section.soft:has(.faq-list) .section-head h2 {
        font-size: 28px;
    }

    .faq-item summary {
        font-size: 15px;
    }
}













/* =========================================================
   LIYAN CONSTRUCTION — PREMIUM ABOUT PAGE
   Brand palette: Blue, Yellow and Red
========================================================= */

.liyan-about-page {
    --la-blue: #102b63;
    --la-blue-dark: #071a3d;
    --la-blue-light: #eaf0fa;
    --la-yellow: #ffd600;
    --la-red: #ed1c24;
    --la-white: #ffffff;
    --la-text: #18243a;
    --la-muted: #687386;
    --la-border: #e2e8f1;
    --la-soft: #f5f7fb;

    width: 100%;
    overflow: hidden;
    background: var(--la-white);
    color: var(--la-text);
}

.liyan-about-page *,
.liyan-about-page *::before,
.liyan-about-page *::after {
    box-sizing: border-box;
}

.liyan-about-page img {
    max-width: 100%;
}

.liyan-about-page .la-container {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
}

.liyan-about-page h1,
.liyan-about-page h2,
.liyan-about-page h3,
.liyan-about-page p {
    overflow-wrap: anywhere;
}

.liyan-about-page h1,
.liyan-about-page h2,
.liyan-about-page h3 {
    font-family: inherit;
}

.liyan-about-page p {
    color: var(--la-muted);
}

.liyan-about-page a {
    text-decoration: none;
}

/* EYEBROW */

.liyan-about-page .la-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--la-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.6;
}

.liyan-about-page .la-eyebrow > span {
    width: 27px;
    height: 3px;
    flex: 0 0 27px;
    background: var(--la-red);
}

/* BUTTON */

.liyan-about-page .la-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--la-yellow);
    background: var(--la-yellow);
    color: var(--la-blue-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.liyan-about-page .la-button:hover {
    background: var(--la-red);
    border-color: var(--la-red);
    color: #fff;
    transform: translateY(-2px);
}

.liyan-about-page .la-button i {
    transition: transform .25s ease;
}

.liyan-about-page .la-button:hover i {
    transform: translateX(4px);
}

/* =========================================================
   01. HERO
========================================================= */

.liyan-about-page .la-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 430px;
    isolation: isolate;
    background: var(--la-blue-dark);
    color: #fff;
}

.liyan-about-page .la-hero-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        url('../img/hero-building.jpg')
        center 48% / cover no-repeat;
}

.liyan-about-page .la-hero::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background:
        linear-gradient(
            90deg,
            rgba(5, 19, 45, .94) 0%,
            rgba(5, 19, 45, .82) 45%,
            rgba(5, 19, 45, .35) 100%
        );
}

.liyan-about-page .la-hero-content {
    padding-top: 40px;
    padding-bottom: 15px;
}

.liyan-about-page .la-hero .la-eyebrow {
    color: var(--la-yellow);
}

.liyan-about-page .la-hero h1 {
    max-width: 780px;
    margin: 24px 0 20px;
    color: #fff;
    font-size: clamp(42px, 5.8vw, 76px);
    font-weight: 850;
    letter-spacing: -2.5px;
    line-height: 1.06;
}

.liyan-about-page .la-hero h1 span {
    color: var(--la-yellow);
}

.liyan-about-page .la-hero-content > p {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
    line-height: 1.85;
}

.liyan-about-page .la-breadcrumb {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 30px;
    color: var(--la-yellow);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.liyan-about-page .la-breadcrumb a {
    color: #fff;
}

.liyan-about-page .la-breadcrumb a:hover {
    color: var(--la-yellow);
}

.liyan-about-page .la-hero-index {
    position: absolute;
    right: max(24px, calc((100% - 1180px) / 2));
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px 24px;
    background: var(--la-yellow);
    color: var(--la-blue-dark);
}

.liyan-about-page .la-hero-index strong {
    font-size: 25px;
    line-height: 1;
}

.liyan-about-page .la-hero-index span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

/* =========================================================
   02. INTRODUCTION
========================================================= */

.liyan-about-page .la-introduction {
    padding: 100px 0;
    background: #fff;
}

.liyan-about-page .la-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 76px;
}

.liyan-about-page .la-intro-visual {
    position: relative;
    min-width: 0;
    padding: 0 24px 24px 0;
}

.liyan-about-page .la-intro-image {
    position: relative;
    z-index: 1;
    height: 470px;
    overflow: hidden;
    background: var(--la-soft);
}

.liyan-about-page .la-intro-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.liyan-about-page .la-intro-visual:hover .la-intro-image img {
    transform: scale(1.035);
}

.liyan-about-page .la-image-accent {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 68%;
    height: 58%;
    background: var(--la-yellow);
}

.liyan-about-page .la-experience-card {
    position: absolute;
    right: -10px;
    bottom: 48px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 265px;
    padding: 19px;
    background: #fff;
    box-shadow: 0 14px 40px rgba(7, 26, 61, .13);
}

.liyan-about-page .la-experience-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    background: var(--la-yellow);
    color: var(--la-blue);
    font-size: 20px;
}

.liyan-about-page .la-experience-card strong {
    display: block;
    color: var(--la-blue);
    font-size: 15px;
}

.liyan-about-page .la-experience-card p {
    margin: 5px 0 0;
    font-size: 11px;
    line-height: 1.6;
}

.liyan-about-page .la-intro-copy {
    min-width: 0;
}

.liyan-about-page .la-intro-copy h2 {
    margin: 20px 0;
    color: var(--la-blue);
    font-size: clamp(32px, 3.6vw, 47px);
    font-weight: 850;
    letter-spacing: -1.4px;
    line-height: 1.12;
}

.liyan-about-page .la-intro-copy h2 span {
    display: block;
    color: var(--la-red);
}

.liyan-about-page .la-intro-copy > p {
    margin: 0 0 15px;
    font-size: 14px;
    line-height: 1.9;
}

.liyan-about-page .la-feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 18px;
    margin: 25px 0 30px;
}

.liyan-about-page .la-feature-list > div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--la-blue);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}

.liyan-about-page .la-feature-list i {
    margin-top: 2px;
    color: var(--la-red);
}

/* =========================================================
   03. VISION, MISSION AND VALUES
========================================================= */

.liyan-about-page .la-principles {
    padding: 88px 0 96px;
    background: var(--la-soft);
}

.liyan-about-page .la-section-heading {
    max-width: 720px;
    margin: 0 auto 45px;
    text-align: center;
}

.liyan-about-page .la-section-heading .la-eyebrow {
    justify-content: center;
}

.liyan-about-page .la-section-heading h2 {
    margin: 17px 0 14px;
    color: var(--la-blue);
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 850;
    letter-spacing: -1.3px;
    line-height: 1.15;
}

.liyan-about-page .la-section-heading h2 span {
    color: var(--la-red);
}

.liyan-about-page .la-section-heading > p {
    max-width: 590px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.8;
}

.liyan-about-page .la-principle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.liyan-about-page .la-principle-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 32px 29px 28px;
    border: 1px solid var(--la-border);
    background: #fff;
    box-shadow: 0 9px 28px rgba(16, 43, 99, .035);
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.liyan-about-page .la-principle-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(16, 43, 99, .09);
}

.liyan-about-page .la-principle-featured {
    border-top: 4px solid var(--la-yellow);
}

.liyan-about-page .la-principle-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
}

.liyan-about-page .la-principle-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    background: var(--la-yellow);
    color: var(--la-blue);
    font-size: 22px;
}

.liyan-about-page .la-principle-number {
    color: #d8dfeb;
    font-size: 34px;
    font-weight: 850;
    line-height: 1;
}

.liyan-about-page .la-principle-card h3 {
    margin: 0 0 13px;
    color: var(--la-blue);
    font-size: 23px;
}

.liyan-about-page .la-principle-card > p {
    margin: 0 0 24px;
    font-size: 13px;
    line-height: 1.9;
}

.liyan-about-page .la-values-list {
    margin: 0 0 24px;
    padding-left: 18px;
    color: var(--la-muted);
    font-size: 13px;
    line-height: 2;
}

.liyan-about-page .la-principle-line {
    width: 45px;
    height: 3px;
    margin-top: auto;
    background: var(--la-red);
}

/* =========================================================
   04. MANAGEMENT TEAM
========================================================= */

.liyan-about-page .la-management {
    padding: 100px 0;
    background: #fff;
}

.liyan-about-page .la-management-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 42px;
}

.liyan-about-page .la-management-heading h2 {
    margin: 17px 0 12px;
    color: var(--la-blue);
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 850;
    letter-spacing: -1.3px;
    line-height: 1.15;
}

.liyan-about-page .la-management-heading h2 span {
    color: var(--la-red);
}

.liyan-about-page .la-management-heading p {
    max-width: 620px;
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
}

.liyan-about-page .la-team-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 105px;
    padding: 16px;
    background: var(--la-blue);
    color: #fff;
}

.liyan-about-page .la-team-count strong {
    color: var(--la-yellow);
    font-size: 38px;
    line-height: 1;
}

.liyan-about-page .la-team-count span {
    margin-top: 9px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.liyan-about-page .la-team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.liyan-about-page .la-team-card {
    min-width: 0;
    border: 1px solid var(--la-border);
    background: #fff;
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.liyan-about-page .la-team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 36px rgba(16, 43, 99, .10);
}

.liyan-about-page .la-team-photo {
    position: relative;
    /* height: 330px; */
    overflow: hidden;
    background: #e9eef6;
}

.liyan-about-page .la-team-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    transition: transform .55s ease;
}

.liyan-about-page .la-team-card:hover .la-team-photo img {
    transform: scale(1.045);
}

.liyan-about-page .la-team-number {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    background: var(--la-yellow);
    color: var(--la-blue);
    font-size: 14px;
    font-weight: 850;
}

.liyan-about-page .la-team-details {
    padding: 22px 21px 24px;
}

.liyan-about-page .la-team-role {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--la-red);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1px;
    line-height: 1.6;
}

.liyan-about-page .la-team-details h3 {
    margin: 0;
    color: var(--la-blue);
    font-size: 20px;
    line-height: 1.4;
}

.liyan-about-page .la-team-details p {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.75;
}

.liyan-about-page .la-team-divider {
    width: 40px;
    height: 3px;
    margin-top: 20px;
    background: var(--la-yellow);
}

/* =========================================================
   05. TEAMWORK AND CAPABILITIES
========================================================= */

.liyan-about-page .la-teamwork {
    padding: 85px 0;
    background: var(--la-soft);
}

.liyan-about-page .la-teamwork-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    gap: 70px;
    align-items: center;
}

.liyan-about-page .la-teamwork-visual {
    position: relative;
    min-width: 0;
    min-height: 430px;
    background: var(--la-blue);
}

.liyan-about-page .la-teamwork-visual > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.liyan-about-page .la-teamwork-caption {
    position: absolute;
    right: -18px;
    bottom: 25px;
    left: 25px;
    padding: 23px 25px;
    background: var(--la-blue);
    border-left: 4px solid var(--la-yellow);
}

.liyan-about-page .la-teamwork-caption > span {
    color: var(--la-yellow);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.liyan-about-page .la-teamwork-caption h3 {
    margin: 9px 0 0;
    color: #fff;
    font-size: 25px;
}

.liyan-about-page .la-teamwork-content h2 {
    margin: 18px 0;
    color: var(--la-blue);
    font-size: clamp(34px, 4vw, 45px);
    font-weight: 850;
    letter-spacing: -1.3px;
    line-height: 1.12;
}

.liyan-about-page .la-teamwork-content h2 span {
    color: var(--la-red);
}

.liyan-about-page .la-teamwork-content > p {
    margin: 0 0 28px;
    font-size: 14px;
    line-height: 1.9;
}

.liyan-about-page .la-capability-list {
    display: grid;
    gap: 23px;
    margin-bottom: 30px;
}

.liyan-about-page .la-capability-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    color: var(--la-blue);
    font-size: 12px;
    font-weight: 750;
}

.liyan-about-page .la-capability-info strong {
    flex: 0 0 auto;
    color: var(--la-red);
    font-size: 12px;
}

.liyan-about-page .la-capability-track {
    height: 8px;
    overflow: hidden;
    border-radius: 10px;
    background: #e1e7f0;
}

.liyan-about-page .la-capability-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--la-yellow);
}

/* =========================================================
   06. CALL TO ACTION
========================================================= */

.liyan-about-page .la-cta {
    position: relative;
    padding: 65px 0;
    overflow: hidden;
    background: var(--la-blue);
}

.liyan-about-page .la-cta::after {
    position: absolute;
    top: -110px;
    right: -70px;
    width: 300px;
    height: 300px;
    border: 45px solid rgba(255, 255, 255, .045);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.liyan-about-page .la-cta-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.liyan-about-page .la-cta .la-eyebrow {
    color: var(--la-yellow);
}

.liyan-about-page .la-cta h2 {
    max-width: 700px;
    margin: 16px 0 12px;
    color: #fff;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 850;
    letter-spacing: -1px;
    line-height: 1.15;
}

.liyan-about-page .la-cta h2 span {
    color: var(--la-yellow);
}

.liyan-about-page .la-cta p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
    line-height: 1.8;
}

.liyan-about-page .la-button-light {
    flex: 0 0 auto;
}

/* =========================================================
   RESPONSIVE TABLET
========================================================= */

@media (max-width: 1000px) {
    .liyan-about-page .la-intro-grid {
        gap: 42px;
    }

    .liyan-about-page .la-intro-image {
        height: 420px;
    }

    .liyan-about-page .la-principle-grid {
        gap: 15px;
    }

    .liyan-about-page .la-principle-card {
        padding: 25px 21px;
    }

    .liyan-about-page .la-team-grid {
        gap: 20px;
    }

    .liyan-about-page .la-team-photo {
        height: 285px;
    }

    .liyan-about-page .la-teamwork-grid {
        gap: 42px;
    }
}

/* =========================================================
   RESPONSIVE MOBILE AND SMALL TABLETS
========================================================= */

@media (max-width: 760px) {
    .liyan-about-page .la-container {
        width: min(100% - 36px, 600px);
    }

    .liyan-about-page .la-hero {
        min-height: 380px;
    }

    .liyan-about-page .la-hero::before {
        background: linear-gradient(
            90deg,
            rgba(5, 19, 45, .91),
            rgba(5, 19, 45, .60)
        );
    }

    .liyan-about-page .la-hero-content {
        padding-top: 65px;
        padding-bottom: 80px;
    }

    .liyan-about-page .la-hero h1 {
        font-size: clamp(39px, 8vw, 58px);
        letter-spacing: -1.5px;
    }

    .liyan-about-page .la-hero-content > p {
        font-size: 14px;
    }

    .liyan-about-page .la-introduction,
    .liyan-about-page .la-management {
        padding: 65px 0;
    }

    .liyan-about-page .la-intro-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .liyan-about-page .la-intro-visual {
        max-width: 540px;
        width: 100%;
        margin-inline: auto;
    }

    .liyan-about-page .la-intro-image {
        height: 390px;
    }

    .liyan-about-page .la-intro-copy h2 {
        font-size: 38px;
    }

    .liyan-about-page .la-principles {
        padding: 65px 0;
    }

    .liyan-about-page .la-principle-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .liyan-about-page .la-principle-card {
        padding: 26px;
    }

    .liyan-about-page .la-principle-card > p {
        margin-bottom: 20px;
    }

    .liyan-about-page .la-management-heading {
        align-items: flex-start;
    }

    .liyan-about-page .la-team-count {
        min-width: 90px;
        min-height: 85px;
    }

    .liyan-about-page .la-team-count strong {
        font-size: 30px;
    }

    .liyan-about-page .la-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .liyan-about-page .la-team-photo {
        height: 250px;
    }

    .liyan-about-page .la-team-details {
        padding: 17px 15px 20px;
    }

    .liyan-about-page .la-team-details h3 {
        font-size: 17px;
    }

    .liyan-about-page .la-teamwork {
        padding: 65px 0;
    }

    .liyan-about-page .la-teamwork-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .liyan-about-page .la-teamwork-visual {
        min-height: 350px;
    }

    .liyan-about-page .la-teamwork-caption {
        right: 12px;
        left: 15px;
        bottom: 15px;
    }

    .liyan-about-page .la-cta {
        padding: 50px 0;
    }

    .liyan-about-page .la-cta-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 440px) {
    .liyan-about-page .la-container {
        width: calc(100% - 30px);
    }

    .liyan-about-page .la-hero {
        min-height: 350px;
    }

    .liyan-about-page .la-hero h1 {
        font-size: 38px;
    }

    .liyan-about-page .la-hero-index {
        right: 15px;
        padding: 13px 16px;
    }

    .liyan-about-page .la-intro-image {
        height: 310px;
    }

    .liyan-about-page .la-experience-card {
        right: -3px;
        bottom: 35px;
        max-width: 230px;
        padding: 13px;
    }

    .liyan-about-page .la-intro-copy h2,
    .liyan-about-page .la-teamwork-content h2 {
        font-size: 32px;
    }

    .liyan-about-page .la-feature-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .liyan-about-page .la-section-heading h2,
    .liyan-about-page .la-management-heading h2 {
        font-size: 32px;
    }

    .liyan-about-page .la-management-heading {
        flex-direction: column;
    }

    .liyan-about-page .la-team-count {
        flex-direction: row;
        gap: 12px;
        min-height: 65px;
    }

    .liyan-about-page .la-team-count span {
        margin-top: 0;
    }

    .liyan-about-page .la-team-photo {
        height: 205px;
    }

    .liyan-about-page .la-team-details {
        padding: 15px 12px 17px;
    }

    .liyan-about-page .la-team-details h3 {
        font-size: 15px;
    }

    .liyan-about-page .la-team-role {
        font-size: 9px;
        letter-spacing: .5px;
    }

    .liyan-about-page .la-teamwork-visual {
        min-height: 290px;
    }

    .liyan-about-page .la-teamwork-caption h3 {
        font-size: 21px;
    }

    .liyan-about-page .la-capability-info {
        font-size: 11px;
    }
}

/* Accessibility: respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
    .liyan-about-page *,
    .liyan-about-page *::before,
    .liyan-about-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}














/* =========================================================
   LIYAN CONSTRUCTION — FOOTER STYLES
========================================================= */

footer.liyan-footer {
    --lf-blue: #102b63;
    --lf-dark: #071a3d;
    --lf-yellow: #ffd600;
    --lf-red: #ed1c24;
    --lf-muted: #c4cee0;
    --lf-border: rgba(255,255,255,.14);

    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--lf-dark) !important;
    color: #fff;
    font-family: inherit;
}

footer.liyan-footer,
footer.liyan-footer * {
    box-sizing: border-box;
}

footer.liyan-footer a {
    text-decoration: none;
}

footer.liyan-footer .wrap {
    width: calc(100% - 48px);
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

/* CTA */

footer.liyan-footer .liyan-footer-cta {
    padding: 42px 0;
    background: var(--lf-blue) !important;
    border-bottom: 1px solid var(--lf-border);
}

footer.liyan-footer .liyan-footer-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

footer.liyan-footer .liyan-footer-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--lf-yellow) !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

footer.liyan-footer .liyan-footer-cta h2 {
    margin: 0 0 10px;
    color: #fff !important;
    font-size: clamp(25px, 3vw, 36px);
    line-height: 1.25;
}

footer.liyan-footer .liyan-footer-cta p {
    margin: 0;
    color: var(--lf-muted) !important;
    font-size: 13px;
    line-height: 1.8;
}

footer.liyan-footer .liyan-footer-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
    min-height: 48px;
    padding: 0 22px;
    background: var(--lf-yellow) !important;
    border: 1px solid var(--lf-yellow);
    color: var(--lf-dark) !important;
    font-size: 11px;
    font-weight: 800;
    transition: .25s ease;
}

footer.liyan-footer .liyan-footer-cta-btn:hover {
    background: var(--lf-red) !important;
    border-color: var(--lf-red);
    color: #fff !important;
}

/* FOUR-COLUMN LAYOUT */

footer.liyan-footer .liyan-footer-main {
    padding: 60px 0 50px;
    background: var(--lf-dark) !important;
}

footer.liyan-footer .liyan-footer-grid {
    display: grid !important;
    grid-template-columns: 1.25fr .75fr 1.1fr 1.15fr;
    align-items: start;
    gap: 35px;
}

footer.liyan-footer .liyan-footer-grid > div {
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* LOGO AND COMPANY */

footer.liyan-footer .liyan-footer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 95px;
    height: 95px;
    margin-bottom: 18px;
    padding: 5px;
    /* background: #000; */
}

footer.liyan-footer .liyan-footer-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

footer.liyan-footer .liyan-footer-company h3 {
    margin: 0 0 12px;
    color: #fff !important;
    font-size: 16px;
    line-height: 1.55;
}

footer.liyan-footer .liyan-footer-description {
    max-width: 330px;
    margin: 0;
    color: var(--lf-muted) !important;
    font-size: 12px;
    line-height: 1.9;
}

/* SOCIAL LINKS */

footer.liyan-footer .liyan-footer-social {
    margin-top: 24px;
}

footer.liyan-footer .liyan-footer-social-label {
    display: block;
    margin-bottom: 12px;
    color: #fff !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

footer.liyan-footer .liyan-footer-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

footer.liyan-footer .liyan-footer-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid var(--lf-border);
    color: #fff !important;
    font-size: 14px;
    transition: .25s ease;
}

footer.liyan-footer .liyan-footer-social-links a:hover {
    background: var(--lf-yellow) !important;
    border-color: var(--lf-yellow);
    color: var(--lf-dark) !important;
    transform: translateY(-3px);
}

/* COLUMN TITLES */

footer.liyan-footer .liyan-footer-title {
    position: relative;
    margin: 7px 0 25px;
    padding-bottom: 14px;
    color: #fff !important;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.4;
}

footer.liyan-footer .liyan-footer-title::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 38px;
    height: 3px;
    background: var(--lf-yellow);
    content: "";
}

/* LINKS AND ARROWS */

footer.liyan-footer .liyan-footer-links {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 13px;
}

footer.liyan-footer .liyan-footer-links a {
    display: flex !important;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 0;
    background: transparent !important;
    color: var(--lf-muted) !important;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.65;
    transition: .2s ease;
}

footer.liyan-footer .liyan-footer-links a i {
    flex: 0 0 11px;
    margin-top: 5px;
    color: var(--lf-yellow) !important;
    font-size: 10px;
}

footer.liyan-footer .liyan-footer-links a:hover {
    color: #fff !important;
    transform: translateX(3px);
}

footer.liyan-footer .liyan-footer-links a:hover i {
    color: var(--lf-red) !important;
}

/* CONTACT */

footer.liyan-footer .liyan-footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 15px;
}

footer.liyan-footer .liyan-footer-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    background: rgba(255,214,0,.12) !important;
    color: var(--lf-yellow) !important;
    font-size: 12px;
}

footer.liyan-footer .liyan-footer-contact-item p,
footer.liyan-footer .liyan-footer-contact-item a {
    min-width: 0;
    margin: 3px 0 0;
    padding: 0;
    color: var(--lf-muted) !important;
    font-size: 12px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

footer.liyan-footer .liyan-footer-contact-item a:hover {
    color: var(--lf-yellow) !important;
}

/* MAP */

footer.liyan-footer .liyan-footer-map {
    width: 100%;
    height: 165px;
    margin-top: 22px;
    overflow: hidden;
    border: 1px solid var(--lf-border);
    background: #fff;
}

footer.liyan-footer .liyan-footer-map iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    padding: 0;
    border: 0;
}

footer.liyan-footer .liyan-footer-map-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: var(--lf-yellow) !important;
    font-size: 11px;
    font-weight: 700;
}

footer.liyan-footer .liyan-footer-map-link:hover {
    color: #fff !important;
}

/* COPYRIGHT */

footer.liyan-footer .liyan-footer-bottom {
    border-top: 1px solid var(--lf-border);
    background: rgb(248 228 8) !important;;
}

footer.liyan-footer .liyan-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 70px;
    padding-top: 15px;
    padding-bottom: 15px;
}

footer.liyan-footer .liyan-footer-bottom p {
    margin: 0;
    color: black;
    font-size: 15px;
    line-height: 1.8;
}

footer.liyan-footer .liyan-footer-back-top {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: #fff !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
}

footer.liyan-footer .liyan-footer-back-top span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--lf-yellow) !important;
    color: var(--lf-dark) !important;
    transition: .25s ease;
}

footer.liyan-footer .liyan-footer-back-top:hover span {
    background: var(--lf-red) !important;
    color: #fff !important;
}

/* TABLET */

@media (max-width: 1050px) {
    footer.liyan-footer .liyan-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 30px;
    }
}

/* MOBILE */

@media (max-width: 600px) {
    footer.liyan-footer .wrap {
        width: calc(100% - 32px);
    }

    footer.liyan-footer .liyan-footer-cta {
        padding: 35px 0;
    }

    footer.liyan-footer .liyan-footer-cta-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
    }

    footer.liyan-footer .liyan-footer-cta-btn {
        width: 100%;
    }

    footer.liyan-footer .liyan-footer-main {
        padding: 42px 0 35px;
    }

    footer.liyan-footer .liyan-footer-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
    }

    footer.liyan-footer .liyan-footer-description {
        max-width: 100%;
    }

    footer.liyan-footer .liyan-footer-map {
        height: 200px;
    }

    footer.liyan-footer .liyan-footer-bottom-inner {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}











/* =========================================================
   LIYAN CONSTRUCTION — PREMIUM PROJECTS PAGE
   Brand palette: Blue, Yellow, Red
========================================================= */

.liyan-projects-page {
    --lp-blue: #102b63;
    --lp-dark: #071a3d;
    --lp-yellow: #ffd600;
    --lp-red: #ed1c24;
    --lp-muted: #687386;
    --lp-border: #e2e8f1;
    --lp-soft: #f5f7fb;

    width: 100%;
    overflow: hidden;
    background: #fff;
    color: var(--lp-dark);
}

.liyan-projects-page *,
.liyan-projects-page *::before,
.liyan-projects-page *::after {
    box-sizing: border-box;
}

.liyan-projects-page img {
    max-width: 100%;
}

.liyan-projects-page a {
    text-decoration: none;
}

.liyan-projects-page h1,
.liyan-projects-page h2,
.liyan-projects-page h3,
.liyan-projects-page p {
    overflow-wrap: anywhere;
}

.liyan-projects-page .lp-container {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
}

.liyan-projects-page [hidden] {
    display: none !important;
}

/* EYEBROW */

.liyan-projects-page .lp-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--lp-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
    line-height: 1.6;
}

.liyan-projects-page .lp-eyebrow > span {
    width: 27px;
    height: 3px;
    flex: 0 0 27px;
    background: var(--lp-red);
}

/* =========================================================
   HERO
========================================================= */

.liyan-projects-page .lp-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 430px;
    isolation: isolate;
    background: var(--lp-dark);
    color: #fff;
}

.liyan-projects-page .lp-hero-background {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('../img/hero-building.jpg') center 48% / cover no-repeat;
}

.liyan-projects-page .lp-hero::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: linear-gradient(
        90deg,
        rgba(5, 19, 45, .94) 0%,
        rgba(5, 19, 45, .82) 45%,
        rgba(5, 19, 45, .30) 100%
    );
}

.liyan-projects-page .lp-hero-content {
    padding-top: 70px;
    padding-bottom: 85px;
}

.liyan-projects-page .lp-hero .lp-eyebrow {
    color: var(--lp-yellow);
}

.liyan-projects-page .lp-hero h1 {
    max-width: 800px;
    margin: 23px 0 19px;
    color: #fff;
    font-size: clamp(42px, 5.8vw, 74px);
    font-weight: 850;
    letter-spacing: -2.4px;
    line-height: 1.06;
}

.liyan-projects-page .lp-hero h1 span {
    color: var(--lp-yellow);
}

.liyan-projects-page .lp-hero-content > p {
    max-width: 560px;
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 14px;
    line-height: 1.9;
}

.liyan-projects-page .lp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 27px;
    color: var(--lp-yellow);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.liyan-projects-page .lp-breadcrumb a {
    color: #fff;
}

.liyan-projects-page .lp-breadcrumb a:hover {
    color: var(--lp-yellow);
}

.liyan-projects-page .lp-hero-index {
    position: absolute;
    right: max(24px, calc((100% - 1180px) / 2));
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px 24px;
    background: var(--lp-yellow);
    color: var(--lp-dark);
}

.liyan-projects-page .lp-hero-index strong {
    font-size: 25px;
    line-height: 1;
}

.liyan-projects-page .lp-hero-index span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

/* =========================================================
   SECTION HEADINGS
========================================================= */

.liyan-projects-page .lp-section-heading {
    max-width: 760px;
    margin: 0 auto 38px;
    text-align: center;
}

.liyan-projects-page .lp-section-heading .lp-eyebrow {
    justify-content: center;
}

.liyan-projects-page .lp-section-heading h2 {
    margin: 17px 0 13px;
    color: var(--lp-blue);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 850;
    letter-spacing: -1.2px;
    line-height: 1.16;
}

.liyan-projects-page .lp-section-heading h2 span {
    color: var(--lp-red);
}

.liyan-projects-page .lp-section-heading > p {
    max-width: 630px;
    margin: 0 auto;
    color: var(--lp-muted);
    font-size: 14px;
    line-height: 1.85;
}

/* =========================================================
   COMPLETED PROJECTS
========================================================= */

.liyan-projects-page .lp-completed-section {
    padding: 85px 0 90px;
    background: #fff;
}

.liyan-projects-page .lp-completed-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 225px;
    gap: 14px;
}

.liyan-projects-page .lp-completed-card {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    background: #e9eef6;
}

.liyan-projects-page .lp-completed-card:nth-child(1),
.liyan-projects-page .lp-completed-card:nth-child(2),
.liyan-projects-page .lp-completed-card:nth-child(4) {
    grid-column: span 1;
}

.liyan-projects-page .lp-completed-card:nth-child(3),
.liyan-projects-page .lp-completed-card:nth-child(5) {
    grid-column: span 2;
}

.liyan-projects-page .lp-completed-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.liyan-projects-page .lp-completed-card:hover img {
    transform: scale(1.07);
}

.liyan-projects-page .lp-completed-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 22px;
    opacity: 0;
    background: linear-gradient(
        0deg,
        rgba(7, 26, 61, .95),
        rgba(7, 26, 61, .05) 85%
    );
    transition: opacity .3s ease;
}

.liyan-projects-page .lp-completed-card:hover .lp-completed-overlay,
.liyan-projects-page .lp-completed-card:focus-visible .lp-completed-overlay {
    opacity: 1;
}

.liyan-projects-page .lp-completed-overlay > span:first-child {
    color: var(--lp-yellow);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.liyan-projects-page .lp-completed-overlay h3 {
    margin: 9px 0 0;
    color: #fff;
    font-size: 19px;
    line-height: 1.35;
}

.liyan-projects-page .lp-view-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    background: var(--lp-yellow);
    color: var(--lp-blue);
}

/* =========================================================
   ONGOING PROJECTS
========================================================= */

.liyan-projects-page .lp-ongoing-section {
    padding: 85px 0 95px;
    background: var(--lp-soft);
}

.liyan-projects-page .lp-filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 35px;
}

.liyan-projects-page .lp-filter-btn {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--lp-border);
    background: #fff;
    color: var(--lp-blue);
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: .25s ease;
}

.liyan-projects-page .lp-filter-btn:hover,
.liyan-projects-page .lp-filter-btn.active {
    border-color: var(--lp-blue);
    background: var(--lp-blue);
    color: #fff;
}

.liyan-projects-page .lp-ongoing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 250px;
    gap: 18px;
}

.liyan-projects-page .lp-project-card {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    background: #dce4ef;
}

.liyan-projects-page .lp-project-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease;
}

.liyan-projects-page .lp-project-card:hover img {
    transform: scale(1.06);
}

.liyan-projects-page .lp-project-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 23px;
    background: linear-gradient(
        0deg,
        rgba(7, 26, 61, .92),
        rgba(7, 26, 61, .20) 55%,
        transparent 100%
    );
    transition: background .3s ease;
}

.liyan-projects-page .lp-project-overlay > span {
    margin-bottom: 9px;
    color: var(--lp-yellow);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.liyan-projects-page .lp-project-overlay h3 {
    max-width: calc(100% - 25px);
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.35;
}

.liyan-projects-page .lp-project-overlay > i {
    position: absolute;
    right: 19px;
    bottom: 23px;
    color: var(--lp-yellow);
    font-size: 15px;
    transition: transform .25s ease;
}

.liyan-projects-page .lp-project-card:hover .lp-project-overlay > i {
    transform: translate(3px, -3px);
}

/* Feature some photographs with a varied grid */

.liyan-projects-page .lp-project-card-large {
    grid-column: span 2;
}

.liyan-projects-page .lp-project-card-wide {
    grid-column: span 1;
}

.liyan-projects-page .lp-gallery-note {
    margin: 26px 0 0;
    color: var(--lp-muted);
    font-size: 12px;
    line-height: 1.8;
    text-align: center;
}

/* =========================================================
   PROJECT PROCESS
========================================================= */

.liyan-projects-page .lp-process-section {
    padding: 85px 0;
    background: #fff;
}

.liyan-projects-page .lp-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.liyan-projects-page .lp-process-card {
    position: relative;
    min-width: 0;
    padding: 27px 23px;
    border: 1px solid var(--lp-border);
    background: #fff;
    transition: transform .3s ease, box-shadow .3s ease;
}

.liyan-projects-page .lp-process-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 32px rgba(16,43,99,.09);
}

.liyan-projects-page .lp-process-number {
    position: absolute;
    top: 23px;
    right: 20px;
    color: #dce3ef;
    font-size: 30px;
    font-weight: 850;
}

.liyan-projects-page .lp-process-icon {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    margin-bottom: 23px;
    background: var(--lp-yellow);
    color: var(--lp-blue);
    font-size: 19px;
}

.liyan-projects-page .lp-process-card h3 {
    margin: 0 0 11px;
    color: var(--lp-blue);
    font-size: 20px;
}

.liyan-projects-page .lp-process-card p {
    margin: 0;
    color: var(--lp-muted);
    font-size: 12px;
    line-height: 1.85;
}

/* =========================================================
   CTA
========================================================= */

.liyan-projects-page .lp-cta-section {
    padding: 65px 0;
    background: var(--lp-blue);
}

.liyan-projects-page .lp-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.liyan-projects-page .lp-cta-section .lp-eyebrow {
    color: var(--lp-yellow);
}

.liyan-projects-page .lp-cta-section h2 {
    max-width: 700px;
    margin: 16px 0 12px;
    color: #fff;
    font-size: clamp(30px, 4vw, 43px);
    font-weight: 850;
    letter-spacing: -1px;
    line-height: 1.15;
}

.liyan-projects-page .lp-cta-section h2 span {
    color: var(--lp-yellow);
}

.liyan-projects-page .lp-cta-section p {
    max-width: 600px;
    margin: 0;
    color: rgba(255,255,255,.8);
    font-size: 13px;
    line-height: 1.9;
}

.liyan-projects-page .lp-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 22px;
    background: var(--lp-yellow);
    border: 1px solid var(--lp-yellow);
    color: var(--lp-dark);
    font-size: 10px;
    font-weight: 800;
    transition: .25s ease;
}

.liyan-projects-page .lp-cta-button:hover {
    background: var(--lp-red);
    border-color: var(--lp-red);
    color: #fff;
}

/* =========================================================
   LIGHTBOX
========================================================= */

body.lp-lightbox-open {
    overflow: hidden;
}

.liyan-projects-page .lp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 65px 35px;
    background: rgba(3, 11, 26, .95);
}

.liyan-projects-page .lp-lightbox.is-open {
    display: flex;
}

.liyan-projects-page .lp-lightbox-image {
    display: block;
    max-width: min(100%, 1150px);
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 20px 70px rgba(0,0,0,.4);
}

.liyan-projects-page .lp-lightbox-close,
.liyan-projects-page .lp-lightbox-prev,
.liyan-projects-page .lp-lightbox-next {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid rgba(255,255,255,.3);
    background: var(--lp-yellow);
    color: var(--lp-blue);
    font-size: 17px;
    cursor: pointer;
    transition: .2s ease;
}

.liyan-projects-page .lp-lightbox-close:hover,
.liyan-projects-page .lp-lightbox-prev:hover,
.liyan-projects-page .lp-lightbox-next:hover {
    background: var(--lp-red);
    border-color: var(--lp-red);
    color: #fff;
}

.liyan-projects-page .lp-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .liyan-projects-page .lp-completed-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 220px;
    }

    .liyan-projects-page .lp-completed-card,
    .liyan-projects-page .lp-completed-card:nth-child(n) {
        grid-column: span 1;
    }

    .liyan-projects-page .lp-ongoing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 230px;
    }

    .liyan-projects-page .lp-project-card-large,
    .liyan-projects-page .lp-project-card-wide {
        grid-column: span 1;
    }

    .liyan-projects-page .lp-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .liyan-projects-page .lp-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .liyan-projects-page .lp-container {
        width: calc(100% - 32px);
    }

    .liyan-projects-page .lp-hero {
        min-height: 365px;
    }

    .liyan-projects-page .lp-hero::before {
        background: linear-gradient(
            90deg,
            rgba(5,19,45,.93),
            rgba(5,19,45,.65)
        );
    }

    .liyan-projects-page .lp-hero-content {
        padding-top: 60px;
        padding-bottom: 80px;
    }

    .liyan-projects-page .lp-hero h1 {
        font-size: clamp(38px, 9vw, 54px);
        letter-spacing: -1.4px;
    }

    .liyan-projects-page .lp-hero-content > p {
        font-size: 13px;
    }

    .liyan-projects-page .lp-hero-index {
        right: 16px;
        padding: 13px 17px;
    }

    .liyan-projects-page .lp-completed-section,
    .liyan-projects-page .lp-ongoing-section,
    .liyan-projects-page .lp-process-section {
        padding: 60px 0;
    }

    .liyan-projects-page .lp-section-heading {
        margin-bottom: 28px;
    }

    .liyan-projects-page .lp-section-heading h2 {
        font-size: 31px;
    }

    .liyan-projects-page .lp-completed-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 185px;
        gap: 10px;
    }

    .liyan-projects-page .lp-completed-card,
    .liyan-projects-page .lp-completed-card:nth-child(n) {
        grid-column: span 1;
    }

    .liyan-projects-page .lp-completed-overlay {
        padding: 12px;
        opacity: 1;
        background: linear-gradient(
            0deg,
            rgba(7,26,61,.88),
            rgba(7,26,61,0) 70%
        );
    }

    .liyan-projects-page .lp-completed-overlay h3 {
        font-size: 14px;
    }

    .liyan-projects-page .lp-completed-overlay > span:first-child {
        font-size: 8px;
    }

    .liyan-projects-page .lp-view-icon {
        top: 8px;
        right: 8px;
        width: 29px;
        height: 29px;
        font-size: 11px;
    }

    .liyan-projects-page .lp-filter-bar {
        justify-content: flex-start;
        gap: 8px;
        margin-bottom: 25px;
    }

    .liyan-projects-page .lp-filter-btn {
        min-height: 38px;
        padding: 0 12px;
        font-size: 10px;
    }

    .liyan-projects-page .lp-ongoing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 190px;
        gap: 10px;
    }

    .liyan-projects-page .lp-project-card-large,
    .liyan-projects-page .lp-project-card-wide {
        grid-column: span 1;
    }

    .liyan-projects-page .lp-project-overlay {
        padding: 13px;
    }

    .liyan-projects-page .lp-project-overlay > span {
        font-size: 8px;
        letter-spacing: .7px;
    }

    .liyan-projects-page .lp-project-overlay h3 {
        font-size: 14px;
    }

    .liyan-projects-page .lp-project-overlay > i {
        right: 12px;
        bottom: 15px;
        font-size: 12px;
    }

    .liyan-projects-page .lp-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
    }

    .liyan-projects-page .lp-process-card {
        padding: 20px 15px;
    }

    .liyan-projects-page .lp-process-card h3 {
        font-size: 17px;
    }

    .liyan-projects-page .lp-process-card p {
        font-size: 11px;
    }

    .liyan-projects-page .lp-process-number {
        top: 16px;
        right: 13px;
        font-size: 23px;
    }

    .liyan-projects-page .lp-process-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 18px;
        font-size: 16px;
    }

    .liyan-projects-page .lp-cta-section {
        padding: 48px 0;
    }

    .liyan-projects-page .lp-cta-section h2 {
        font-size: 31px;
    }

    .liyan-projects-page .lp-cta-button {
        width: 100%;
    }

    .liyan-projects-page .lp-lightbox {
        gap: 8px;
        padding: 65px 10px 25px;
    }

    .liyan-projects-page .lp-lightbox-prev,
    .liyan-projects-page .lp-lightbox-next {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
        font-size: 13px;
    }

    .liyan-projects-page .lp-lightbox-image {
        max-width: calc(100% - 86px);
        max-height: 75vh;
    }
}

/* SMALL MOBILE */

@media (max-width: 380px) {

    .liyan-projects-page .lp-completed-grid {
        grid-auto-rows: 155px;
    }

    .liyan-projects-page .lp-ongoing-grid {
        grid-auto-rows: 165px;
    }

    .liyan-projects-page .lp-filter-btn {
        padding: 0 9px;
        font-size: 9px;
    }

    .liyan-projects-page .lp-process-card {
        padding: 16px 12px;
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    .liyan-projects-page *,
    .liyan-projects-page *::before,
    .liyan-projects-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}




/* ==========================================================
   LIYAN CONSTRUCTION — OUR APPROACH
   Unique classes to avoid conflicts with other website sections
========================================================== */

.liyan-approach-section {
    --la-blue: #102b63;
    --la-dark: #071a3d;
    --la-yellow: #ffd600;
    --la-red: #ed1c24;
    --la-text: #26344b;
    --la-muted: #6c7789;
    --la-border: #e5eaf2;

    position: relative;
    width: 100%;
    padding: 85px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255, 214, 0, .09),
            transparent 30%
        ),
        #f7f9fc;
    font-family: inherit;
}

.liyan-approach-section *,
.liyan-approach-section *::before,
.liyan-approach-section *::after {
    box-sizing: border-box;
}

.liyan-approach-section img {
    display: block;
    max-width: 100%;
}

.liyan-approach-section a {
    text-decoration: none;
}

.liyan-approach-container {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(35px, 5vw, 75px);
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
}

/* LEFT IMAGE */

.liyan-approach-visual {
    position: relative;
    min-width: 0;
    min-height: 590px;
    overflow: hidden;
    background: #dce4ef;
    border-radius: 4px;
    box-shadow: 0 20px 50px rgba(7, 26, 61, .13);
}

.liyan-approach-visual > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .7s ease;
}

.liyan-approach-visual:hover > img {
    transform: scale(1.035);
}

.liyan-approach-visual::after {
    position: absolute;
    inset: 45% 0 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(7, 26, 61, .42)
    );
}

/* IMAGE LABEL */

.liyan-approach-image-label {
    position: absolute;
    right: 0;
    bottom: 35px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100% - 25px);
    padding: 18px 23px;
    background: var(--la-yellow);
    color: var(--la-dark);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.liyan-approach-label-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    background: var(--la-blue);
    color: #fff;
    font-size: 18px;
}

.liyan-approach-image-label strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 800;
}

.liyan-approach-image-label p {
    margin: 0;
    font-size: 11px;
    line-height: 1.6;
}

.liyan-approach-image-number {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    border: 1px solid rgba(255, 255, 255, .65);
    background: rgba(7, 26, 61, .65);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    backdrop-filter: blur(6px);
}

/* RIGHT CONTENT */

.liyan-approach-content {
    min-width: 0;
}

.liyan-approach-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 17px;
    color: black;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.2px;
    line-height: 1.6;
}

.liyan-approach-eyebrow > span {
    display: inline-block;
    width: 30px;
    height: 3px;
    flex: 0 0 30px;
    background: var(--la-yellow);
}

.liyan-approach-content h2 {
    margin: 0 0 18px;
    color: var(--la-blue);
    font-size: clamp(31px, 3.2vw, 25px);
    font-weight: 850;
    letter-spacing: -1.3px;
    line-height: 1.15;
}

.liyan-approach-content h2 span {
    display: block;
    color: #ffd600;
}

.liyan-approach-intro {
    margin: 0 0 26px;
    color: var(--la-muted);
    font-size: 14px;
 }

.liyan-approach-focus-title {
    margin: 0 0 17px;
    color: var(--la-dark);
    font-size: 17px;
    font-weight: 800;
}

/* FOCUS LIST */

.liyan-approach-list {
    display: grid;
    gap: 17px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.liyan-approach-list li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-width: 0;
}

.liyan-approach-check {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    margin-top: 2px;
    background: var(--la-yellow);
    color: var(--la-blue);
    font-size: 12px;
}

.liyan-approach-list li strong {
    display: block;
    margin: 0 0 5px;
    color: var(--la-blue);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

.liyan-approach-list li p {
    margin: 0;
    color: var(--la-muted);
    font-size: 12px;
    line-height: 1.8;
}

/* HIGHLIGHT BOX */

.liyan-approach-highlight {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 27px;
    padding: 20px 22px;
    border-left: 4px solid var(--la-yellow);
    background: var(--la-blue);
    box-shadow: 0 9px 22px rgba(16, 43, 99, .12);
}

.liyan-approach-highlight-icon {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    background: var(--la-yellow);
    color: var(--la-blue);
    font-size: 15px;
}

.liyan-approach-highlight p {
    margin: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.9;
}

/* BUTTONS */

.liyan-approach-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 23px;
    margin-top: 27px;
}

.liyan-approach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 48px;
    padding: 0 22px;
    background: var(--la-yellow);
    border: 1px solid var(--la-yellow);
    color: var(--la-dark);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .6px;
    transition: background .25s ease, color .25s ease;
}

.liyan-approach-btn:hover {
    background: var(--la-red);
    border-color: var(--la-red);
    color: #fff;
}

.liyan-approach-secondary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--la-blue);
    font-size: 12px;
    font-weight: 800;
    transition: color .25s ease;
}

.liyan-approach-secondary:hover {
    color: var(--la-red);
}

/* TABLET */

@media (max-width: 950px) {
    .liyan-approach-section {
        padding: 65px 0;
    }

    .liyan-approach-container {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 30px;
    }

    .liyan-approach-visual {
        min-height: 560px;
    }

    .liyan-approach-content h2 {
        font-size: clamp(29px, 3.5vw, 37px);
    }

    .liyan-approach-highlight {
        padding: 17px;
    }
}

/* MOBILE */

@media (max-width: 700px) {
    .liyan-approach-section {
        padding: 48px 0;
    }

    .liyan-approach-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
        width: calc(100% - 32px);
    }

    .liyan-approach-visual {
        min-height: 0;
        aspect-ratio: 4 / 4.2;
    }

    .liyan-approach-content h2 {
        font-size: clamp(30px, 7vw, 40px);
        letter-spacing: -.8px;
    }

    .liyan-approach-intro {
        font-size: 13px;
    }

    .liyan-approach-list {
        gap: 19px;
    }

    .liyan-approach-list li strong {
        font-size: 13px;
    }

    .liyan-approach-list li p {
        font-size: 12px;
    }

    .liyan-approach-image-label {
        right: 0;
        bottom: 22px;
        padding: 14px;
    }

    .liyan-approach-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
    }

    .liyan-approach-btn {
        width: 100%;
    }

    .liyan-approach-secondary {
        justify-content: center;
    }
}

/* SMALL MOBILE */

@media (max-width: 380px) {
    .liyan-approach-container {
        width: calc(100% - 26px);
    }

    .liyan-approach-image-label {
        gap: 9px;
        padding: 11px;
    }

    .liyan-approach-label-icon {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
    }

    .liyan-approach-highlight {
        gap: 10px;
        padding: 14px;
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    .liyan-approach-section *,
    .liyan-approach-section *::before,
    .liyan-approach-section *::after {
        transition-duration: .01ms !important;
    }
}




/* ==========================================================
   LIYAN CONSTRUCTION — WHY CHOOSE US
   Palette: Navy Blue, Yellow, Black and White
========================================================== */

.liyan-why-section {
    --lwy-blue: #102b63;
    --lwy-deep: #071a3d;
    --lwy-yellow: #ffd600;
    --lwy-black: #101828;
    --lwy-muted: #68758a;
    --lwy-border: #e4eaf3;
    --lwy-light: #f5f7fb;

    position: relative;
    width: 100%;
    padding: 85px 0;
    overflow: hidden;
    background: #fff;
    color: var(--lwy-black);
    font-family: inherit;
}

.liyan-why-section *,
.liyan-why-section *::before,
.liyan-why-section *::after {
    box-sizing: border-box;
}

.liyan-why-section img {
    display: block;
    max-width: 100%;
}

.liyan-why-section a {
    text-decoration: none;
}

.liyan-why-container {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
}

/* SECTION HEADING */

.liyan-why-heading {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.liyan-why-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--lwy-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.2px;
}

.liyan-why-eyebrow > span {
    width: 25px;
    height: 3px;
    background: var(--lwy-yellow);
}

.liyan-why-heading h2 {
    margin: 17px 0 13px;
    color: var(--lwy-blue);
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 850;
    letter-spacing: -1.3px;
    line-height: 1.15;
}

.liyan-why-heading h2 span {
    color: #b28b00;
}

.liyan-why-heading > p {
    max-width: 620px;
    margin: 0 auto;
    color: var(--lwy-muted);
    font-size: 14px;
    line-height: 1.85;
}

/* MAIN LAYOUT */

.liyan-why-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 22px;
}

/* IMAGE PANEL */

.liyan-why-visual {
    position: relative;
    min-width: 0;
    min-height: 465px;
    overflow: hidden;
    background: var(--lwy-deep);
    border-radius: 7px;
    box-shadow: 0 15px 40px rgba(7, 26, 61, .13);
}

.liyan-why-visual > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .65s ease;
}

.liyan-why-visual:hover > img {
    transform: scale(1.04);
}

.liyan-why-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(7, 26, 61, .02) 20%,
        rgba(7, 26, 61, .15) 45%,
        rgba(7, 26, 61, .90) 100%
    );
}

/* IMAGE CAPTION */

.liyan-why-image-caption {
    position: absolute;
    right: 24px;
    bottom: 26px;
    left: 24px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border-left: 4px solid var(--lwy-yellow);
    background: rgba(7, 26, 61, .88);
    color: #fff;
    backdrop-filter: blur(7px);
}

.liyan-why-caption-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    background: var(--lwy-yellow);
    color: var(--lwy-blue);
    font-size: 20px;
}

.liyan-why-image-caption span {
    display: block;
    margin-bottom: 6px;
    color: var(--lwy-yellow);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.liyan-why-image-caption h3 {
    margin: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.35;
}

/* IMAGE BADGE */

.liyan-why-image-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: calc(100% - 40px);
    padding: 12px 15px;
    background: var(--lwy-yellow);
    color: var(--lwy-deep);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
}

.liyan-why-image-badge i {
    font-size: 13px;
}

/* BENEFIT CARDS */

.liyan-why-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
    min-width: 0;
}

.liyan-why-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    min-height: 224px;
    padding: 24px 22px 23px;
    overflow: hidden;
    border: 1px solid var(--lwy-border);
    border-radius: 5px;
    background: var(--lwy-light);
    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.liyan-why-card:hover {
    transform: translateY(-5px);
    border-color: var(--lwy-blue);
    background: var(--lwy-blue);
    box-shadow: 0 15px 28px rgba(16, 43, 99, .16);
}

/* CARD NUMBER AND ICON */

.liyan-why-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px;
}

.liyan-why-card-number {
    color: #b3bfd1;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 1px;
}

.liyan-why-icon {
    display: grid;
    place-items: center;
    width: 55px;
    height: 55px;
    border: 1px solid rgba(16, 43, 99, .14);
    background: var(--lwy-yellow);
    color: var(--lwy-blue);
    font-size: 23px;
    transition: transform .3s ease;
}

.liyan-why-card:hover .liyan-why-icon {
    transform: rotate(-5deg);
}

.liyan-why-card h3 {
    margin: 0 0 11px;
    color: var(--lwy-blue);
    font-size: 17px;
    font-weight: 850;
    line-height: 1.4;
    transition: color .3s ease;
}

.liyan-why-card p {
    margin: 0;
    color: var(--lwy-muted);
    font-size: 12px;
    line-height: 1.85;
    transition: color .3s ease;
}

.liyan-why-card:hover h3,
.liyan-why-card:hover p {
    color: #fff;
}

.liyan-why-card:hover .liyan-why-card-number {
    color: var(--lwy-yellow);
}

/* CARD BOTTOM ACCENT */

.liyan-why-card-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: var(--lwy-yellow);
    transition: width .35s ease;
}

.liyan-why-card:hover .liyan-why-card-line {
    width: 100%;
}

/* BOTTOM BRAND STRIP */

.liyan-why-bottom {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 25px;
    padding: 22px 25px;
    border: 1px solid var(--lwy-border);
    background: #fff;
}

.liyan-why-bottom-brand {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    padding: 4px;
    background: #000;
}

.liyan-why-bottom-brand img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.liyan-why-bottom > p {
    flex: 1;
    margin: 0;
    color: var(--lwy-muted);
    font-size: 12px;
    line-height: 1.9;
}

.liyan-why-bottom > p strong {
    display: block;
    margin-bottom: 4px;
    color: var(--lwy-blue);
    font-size: 14px;
}

.liyan-why-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 45px;
    flex: 0 0 auto;
    padding: 0 17px;
    background: var(--lwy-yellow);
    color: var(--lwy-deep);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .5px;
    transition: background .25s ease, color .25s ease;
}

.liyan-why-contact:hover {
    background: var(--lwy-blue);
    color: #fff;
}

/* TABLET */

@media (max-width: 1000px) {
    .liyan-why-section {
        padding: 70px 0;
    }

    .liyan-why-container {
        width: calc(100% - 36px);
    }

    .liyan-why-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .liyan-why-visual {
        min-height: 420px;
    }

    .liyan-why-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .liyan-why-card {
        min-height: 195px;
    }
}

/* MOBILE */

@media (max-width: 600px) {
    .liyan-why-section {
        padding: 50px 0;
    }

    .liyan-why-container {
        width: calc(100% - 30px);
    }

    .liyan-why-heading {
        margin-bottom: 28px;
    }

    .liyan-why-heading h2 {
        font-size: 32px;
        letter-spacing: -.7px;
    }

    .liyan-why-heading > p {
        font-size: 12px;
    }

    .liyan-why-layout {
        gap: 15px;
    }

    .liyan-why-visual {
        min-height: 0;
        aspect-ratio: 4 / 3.7;
    }

    .liyan-why-image-caption {
        right: 12px;
        bottom: 12px;
        left: 12px;
        gap: 10px;
        padding: 13px;
    }

    .liyan-why-caption-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        font-size: 16px;
    }

    .liyan-why-image-caption h3 {
        font-size: 16px;
    }

    .liyan-why-image-caption span {
        font-size: 8px;
    }

    .liyan-why-image-badge {
        top: 12px;
        left: 12px;
        padding: 9px 10px;
        font-size: 9px;
    }

    .liyan-why-cards {
        gap: 10px;
    }

    .liyan-why-card {
        min-height: 0;
        padding: 16px 13px 19px;
    }

    .liyan-why-card-top {
        margin-bottom: 14px;
    }

    .liyan-why-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .liyan-why-card h3 {
        font-size: 14px;
    }

    .liyan-why-card p {
        font-size: 11px;
        line-height: 1.75;
    }

    .liyan-why-bottom {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 14px;
        padding: 17px;
    }

    .liyan-why-bottom-brand {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }

    .liyan-why-bottom > p {
        flex-basis: calc(100% - 75px);
        font-size: 11px;
    }

    .liyan-why-bottom > p strong {
        font-size: 12px;
    }

    .liyan-why-contact {
        width: 100%;
        min-height: 44px;
    }
}

/* SMALL PHONES */

@media (max-width: 360px) {
    .liyan-why-container {
        width: calc(100% - 24px);
    }

    .liyan-why-heading h2 {
        font-size: 28px;
    }

    .liyan-why-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .liyan-why-card {
        padding: 19px;
    }

    .liyan-why-card h3 {
        font-size: 16px;
    }

    .liyan-why-card p {
        font-size: 12px;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .liyan-why-section *,
    .liyan-why-section *::before,
    .liyan-why-section *::after {
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   LIYAN CONSTRUCTION — PREMIUM PROJECT CTA
   Colors: Navy Blue, Yellow, Black, White
   All classes are unique to this section.
========================================================= */

.liyan-project-cta {
    --lpcta-blue: #102b63;
    --lpcta-dark: #071a3d;
    --lpcta-yellow: #ffd600;
    --lpcta-white: #ffffff;
    --lpcta-muted: #c5cede;

    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--lpcta-dark);
    color: var(--lpcta-white);
    font-family: inherit;
}

.liyan-project-cta *,
.liyan-project-cta *::before,
.liyan-project-cta *::after {
    box-sizing: border-box;
}

.liyan-project-cta a {
    text-decoration: none;
}

.liyan-project-cta__background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(255, 214, 0, .10),
            transparent 32%
        ),
        linear-gradient(
            115deg,
            #071a3d 0%,
            #102b63 60%,
            #071a3d 100%
        );
}

.liyan-project-cta__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr);
    align-items: center;
    gap: clamp(35px, 6vw, 85px);
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
    padding: 85px 0;
}

/* CONTENT */

.liyan-project-cta__content {
    min-width: 0;
}

.liyan-project-cta__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    color: var(--lpcta-yellow);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.7;
}

.liyan-project-cta__eyebrow-line {
    display: inline-block;
    width: 34px;
    height: 3px;
    flex: 0 0 34px;
    background: var(--lpcta-yellow);
}

.liyan-project-cta__content h2 {
    margin: 0 0 20px;
    color: var(--lpcta-white);
    font-size: clamp(38px, 5vw, 42px);
    font-weight: 850;
    letter-spacing: -1.8px;
    line-height: 1.08;
}

.liyan-project-cta__content h2 span {
    display: block;
    color: var(--lpcta-yellow);
}

.liyan-project-cta__description {
    max-width: 520px;
    margin: 0;
    color: var(--lpcta-muted);
    font-size: 14px;
    line-height: 1.95;
}

/* FEATURE LIST */

.liyan-project-cta__features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 25px;
}

.liyan-project-cta__feature {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #edf1f8;
    font-size: 11px;
    font-weight: 600;
}

.liyan-project-cta__feature i {
    color: var(--lpcta-yellow);
    font-size: 13px;
}

/* BUTTONS */

.liyan-project-cta__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 32px;
}

.liyan-project-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 52px;
    padding: 0 23px;
    border: 1px solid var(--lpcta-yellow);
    background: var(--lpcta-yellow);
    color: var(--lpcta-dark);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .65px;
    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.liyan-project-cta__button:hover {
    transform: translateY(-2px);
    background: transparent;
    color: var(--lpcta-yellow);
}

.liyan-project-cta__button i {
    transition: transform .25s ease;
}

.liyan-project-cta__button:hover i {
    transform: translateX(4px);
}

.liyan-project-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--lpcta-white);
}

.liyan-project-cta__phone-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    color: var(--lpcta-yellow);
    transition:
        background .25s ease,
        color .25s ease;
}

.liyan-project-cta__phone:hover .liyan-project-cta__phone-icon {
    background: var(--lpcta-yellow);
    color: var(--lpcta-dark);
}

.liyan-project-cta__phone small {
    display: block;
    margin-bottom: 4px;
    color: var(--lpcta-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.liyan-project-cta__phone strong {
    display: block;
    color: var(--lpcta-white);
    font-size: 13px;
    font-weight: 750;
}

/* IMAGE PANEL */

.liyan-project-cta__visual {
    position: relative;
    min-width: 0;
    padding: 0 13px 13px 0;
}

.liyan-project-cta__image-frame {
    position: relative;
    min-height: 390px;
    overflow: hidden;
    background: #172b4c;
    border-radius: 5px;
}

.liyan-project-cta__image-frame > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .65s ease;
}

.liyan-project-cta__image-frame:hover > img {
    transform: scale(1.04);
}

.liyan-project-cta__image-overlay {
    position: absolute;
    inset: 30% 0 0;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(7, 26, 61, .9)
    );
}

.liyan-project-cta__image-label {
    position: absolute;
    right: 0;
    bottom: 24px;
    left: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px;
    border-left: 4px solid var(--lpcta-yellow);
    background: rgba(7, 26, 61, .88);
    backdrop-filter: blur(7px);
}

.liyan-project-cta__label-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    background: var(--lpcta-yellow);
    color: var(--lpcta-dark);
    font-size: 17px;
}

.liyan-project-cta__image-label strong {
    display: block;
    margin-bottom: 5px;
    color: var(--lpcta-white);
    font-size: 13px;
    line-height: 1.5;
}

.liyan-project-cta__image-label p {
    margin: 0;
    color: var(--lpcta-muted);
    font-size: 11px;
    line-height: 1.7;
}

.liyan-project-cta__corner-mark {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 110px;
    height: 110px;
    background: var(--lpcta-yellow);
}

/* BOTTOM STRIP */

.liyan-project-cta__bottom {
    position: relative;
    z-index: 1;
    background: var(--lpcta-yellow);
    color: var(--lpcta-dark);
}

.liyan-project-cta__bottom-inner {
    display: flex;
    align-items: center;
    gap: 15px;
    width: min(1200px, calc(100% - 48px));
    min-height: 78px;
    margin: 0 auto;
}

.liyan-project-cta__bottom-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: var(--lpcta-blue);
}

.liyan-project-cta__bottom-inner p {
    flex: 1;
    margin: 0;
    color: var(--lpcta-blue);
    font-size: 12px;
    line-height: 1.7;
}

.liyan-project-cta__bottom-inner p strong {
    margin-left: 4px;
    font-weight: 850;
}

.liyan-project-cta__bottom-inner > a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--lpcta-blue);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .7px;
    transition: color .25s ease;
}

.liyan-project-cta__bottom-inner > a:hover {
    color: #000;
}

/* TABLET */

@media (max-width: 950px) {
    .liyan-project-cta__container {
        grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
        gap: 28px;
        padding: 65px 0;
    }

    .liyan-project-cta__content h2 {
        font-size: clamp(36px, 5vw, 48px);
    }

    .liyan-project-cta__image-frame {
        min-height: 360px;
    }

    .liyan-project-cta__actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;
    }
}

/* MOBILE */

@media (max-width: 700px) {
    .liyan-project-cta__container {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
        width: calc(100% - 32px);
        padding: 52px 0;
    }

    .liyan-project-cta__content h2 {
        font-size: clamp(38px, 9vw, 52px);
        letter-spacing: -1px;
    }

    .liyan-project-cta__description {
        font-size: 13px;
    }

    .liyan-project-cta__features {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .liyan-project-cta__actions {
        align-items: stretch;
        gap: 20px;
    }

    .liyan-project-cta__button {
        width: 100%;
    }

    .liyan-project-cta__phone {
        align-self: flex-start;
    }

    .liyan-project-cta__visual {
        padding: 0 9px 9px 0;
    }

    .liyan-project-cta__image-frame {
        min-height: 0;
        aspect-ratio: 4 / 3.5;
    }

    .liyan-project-cta__image-label {
        bottom: 15px;
        padding: 13px;
    }

    .liyan-project-cta__bottom-inner {
        flex-wrap: wrap;
        gap: 10px;
        width: calc(100% - 32px);
        padding: 18px 0;
    }

    .liyan-project-cta__bottom-inner p {
        flex-basis: calc(100% - 25px);
    }

    .liyan-project-cta__bottom-inner > a {
        margin-left: 20px;
        padding-top: 5px;
    }
}

/* SMALL PHONES */

@media (max-width: 380px) {
    .liyan-project-cta__container {
        width: calc(100% - 26px);
    }

    .liyan-project-cta__content h2 {
        font-size: 35px;
    }

    .liyan-project-cta__button {
        gap: 9px;
        padding: 0 12px;
        font-size: 9px;
    }

    .liyan-project-cta__image-label {
        gap: 9px;
        padding: 10px;
    }

    .liyan-project-cta__label-icon {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .liyan-project-cta *,
    .liyan-project-cta *::before,
    .liyan-project-cta *::after {
        transition-duration: .01ms !important;
    }
}





/* =====================================================
   LIYAN CONSTRUCTION — PREMIUM STATS STRIP
   Unique class prefix: liyan-stats-premium
   Colors: Navy Blue, Yellow, White, Black
===================================================== */

.liyan-stats-premium {
    --lsp-blue: #102b63;
    --lsp-dark: #071a3d;
    --lsp-yellow: #ffd600;
    --lsp-white: #ffffff;
    --lsp-muted: #d1d9e8;

    position: relative;
    width: 100%;
    padding: 0;
    overflow: hidden;
    background: var(--lsp-blue);
    font-family: inherit;
}

.liyan-stats-premium *,
.liyan-stats-premium *::before,
.liyan-stats-premium *::after {
    box-sizing: border-box;
}

.liyan-stats-premium__container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
}

/* STAT ITEM */

.liyan-stats-premium__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 17px;
    min-width: 0;
    min-height: 125px;
    padding: 24px 22px;
    border-right: 1px solid rgba(255, 255, 255, .15);
    transition: background .3s ease;
}

.liyan-stats-premium__item:first-child {
    border-left: 1px solid rgba(255, 255, 255, .15);
}

.liyan-stats-premium__item:hover {
    background: rgba(255, 255, 255, .07);
}

/* ICON */

.liyan-stats-premium__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border: 1px solid rgba(255, 214, 0, .55);
    background: var(--lsp-yellow);
    color: var(--lsp-dark);
    font-size: 22px;
    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}

.liyan-stats-premium__item:hover .liyan-stats-premium__icon {
    transform: translateY(-3px);
    background: var(--lsp-white);
    color: var(--lsp-blue);
}

/* TEXT */

.liyan-stats-premium__content {
    position: relative;
    min-width: 0;
}

.liyan-stats-premium__content h3 {
    margin: 0 0 6px;
    color: var(--lsp-yellow);
    font-size: clamp(20px, 2vw, 27px);
    font-weight: 850;
    letter-spacing: -.5px;
    line-height: 1.2;
}

.liyan-stats-premium__content p {
    margin: 0;
    color: var(--lsp-white);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.7;
}

/* DECORATIVE NUMBER */

.liyan-stats-premium__number {
    display: block;
    margin-top: 8px;
    color: var(--lsp-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    opacity: .7;
}

/* TABLET */

@media (max-width: 950px) {
    .liyan-stats-premium__container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: calc(100% - 36px);
    }

    .liyan-stats-premium__item {
        min-height: 112px;
        padding: 22px;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
    }

    .liyan-stats-premium__item:nth-child(odd) {
        border-left: 1px solid rgba(255, 255, 255, .15);
    }

    .liyan-stats-premium__item:nth-child(even) {
        border-right: 1px solid rgba(255, 255, 255, .15);
    }

    .liyan-stats-premium__content h3 {
        font-size: 24px;
    }
}

/* MOBILE */

@media (max-width: 520px) {
    .liyan-stats-premium__container {
        width: 100%;
    }

    .liyan-stats-premium__item {
        align-items: flex-start;
        gap: 12px;
        min-height: 105px;
        padding: 19px 13px;
    }

    .liyan-stats-premium__icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 17px;
    }

    .liyan-stats-premium__content h3 {
        font-size: 19px;
    }

    .liyan-stats-premium__content p {
        font-size: 10px;
    }

    .liyan-stats-premium__number {
        margin-top: 5px;
        font-size: 8px;
    }
}

/* EXTRA SMALL PHONES */

@media (max-width: 350px) {
    .liyan-stats-premium__item {
        flex-direction: column;
        gap: 9px;
        padding: 16px 12px;
    }

    .liyan-stats-premium__content h3 {
        font-size: 18px;
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    .liyan-stats-premium *,
    .liyan-stats-premium *::before,
    .liyan-stats-premium *::after {
        transition-duration: .01ms !important;
    }
}




/* =========================================================
   LIYAN CONSTRUCTION — HOW WE WORK
   Unique prefix: liyan-workflow
   Colors: Navy Blue, Yellow, White, Black
========================================================= */

.liyan-workflow-section {
    --lwf-blue: #102b63;
    --lwf-dark: #071a3d;
    --lwf-yellow: #ffd600;
    --lwf-text: #18243a;
    --lwf-muted: #68758a;
    --lwf-border: #e3e9f2;
    --lwf-light: #f5f7fb;

    position: relative;
    width: 100%;
    padding: 85px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(16, 43, 99, .055),
            transparent 35%
        ),
        #fff;
    font-family: inherit;
}

.liyan-workflow-section *,
.liyan-workflow-section *::before,
.liyan-workflow-section *::after {
    box-sizing: border-box;
}

.liyan-workflow-section a {
    text-decoration: none;
}

.liyan-workflow-container {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
}

/* HEADER */

.liyan-workflow-header {
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
}

.liyan-workflow-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--lwf-blue);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 2.2px;
    line-height: 1.6;
}

.liyan-workflow-eyebrow-line {
    width: 27px;
    height: 3px;
    flex: 0 0 27px;
    background: var(--lwf-yellow);
}

.liyan-workflow-header h2 {
    margin: 0 0 17px;
    color: var(--lwf-blue);
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 850;
    letter-spacing: -1.2px;
    line-height: 1.2;
}

.liyan-workflow-header h2 span {
    display: block;
    color: #b28b00;
}

.liyan-workflow-header > p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--lwf-muted);
    font-size: 14px;
    line-height: 1.9;
}

/* PROCESS GRID */

.liyan-workflow-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    position: relative;
}

/* INDIVIDUAL CARD */

.liyan-workflow-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 325px;
    padding: 25px 22px 19px;
    overflow: hidden;
    border: 1px solid var(--lwf-border);
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(7, 26, 61, .045);
    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.liyan-workflow-card:hover {
    transform: translateY(-7px);
    border-color: var(--lwf-blue);
    background: var(--lwf-blue);
    box-shadow: 0 17px 35px rgba(7, 26, 61, .16);
}

/* CARD TOP */

.liyan-workflow-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 26px;
}

.liyan-workflow-step {
    color: #c5cedd;
    font-size: 35px;
    font-weight: 850;
    letter-spacing: -1px;
    line-height: 1;
    transition: color .3s ease;
}

.liyan-workflow-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    background: var(--lwf-yellow);
    color: var(--lwf-blue);
    font-size: 23px;
    transition:
        transform .3s ease,
        background .3s ease;
}

.liyan-workflow-card:hover .liyan-workflow-icon {
    transform: rotate(-5deg);
    background: #fff;
}

.liyan-workflow-card:hover .liyan-workflow-step {
    color: var(--lwf-yellow);
}

/* CARD CONTENT */

.liyan-workflow-stage {
    display: block;
    margin-bottom: 10px;
    color: #9b7900;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 1.6px;
    transition: color .3s ease;
}

.liyan-workflow-card h3 {
    margin: 0 0 13px;
    color: var(--lwf-blue);
    font-size: 18px;
    font-weight: 850;
    line-height: 1.4;
    transition: color .3s ease;
}

.liyan-workflow-card > p {
    flex: 1;
    margin: 0;
    color: var(--lwf-muted);
    font-size: 12px;
    line-height: 1.9;
    transition: color .3s ease;
}

.liyan-workflow-card:hover .liyan-workflow-stage {
    color: var(--lwf-yellow);
}

.liyan-workflow-card:hover h3,
.liyan-workflow-card:hover > p {
    color: #fff;
}

/* CARD FOOTER */

.liyan-workflow-card-footer {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--lwf-border);
    color: var(--lwf-blue);
    font-size: 10px;
    font-weight: 850;
    transition: color .3s ease;
}

.liyan-workflow-footer-line {
    flex: 1;
    height: 2px;
    background: var(--lwf-yellow);
    transition: background .3s ease;
}

.liyan-workflow-card-footer > i {
    font-size: 13px;
    transition: transform .3s ease;
}

.liyan-workflow-card:hover .liyan-workflow-card-footer {
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
}

.liyan-workflow-card:hover .liyan-workflow-footer-line {
    background: #fff;
}

.liyan-workflow-card:hover .liyan-workflow-card-footer > i {
    transform: translateX(4px);
}

/* BOTTOM CTA */

.liyan-workflow-bottom {
    display: flex;
    align-items: center;
    gap: 19px;
    margin-top: 27px;
    padding: 23px 25px;
    border: 1px solid var(--lwf-border);
    border-left: 4px solid var(--lwf-yellow);
    background: var(--lwf-light);
}

.liyan-workflow-bottom-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    background: var(--lwf-blue);
    color: var(--lwf-yellow);
    font-size: 21px;
}

.liyan-workflow-bottom-content {
    flex: 1;
    min-width: 0;
}

.liyan-workflow-bottom-content h3 {
    margin: 0 0 6px;
    color: var(--lwf-blue);
    font-size: 16px;
    font-weight: 850;
    line-height: 1.5;
}

.liyan-workflow-bottom-content p {
    margin: 0;
    color: var(--lwf-muted);
    font-size: 12px;
    line-height: 1.8;
}

.liyan-workflow-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 47px;
    flex: 0 0 auto;
    padding: 0 19px;
    background: var(--lwf-yellow);
    color: var(--lwf-dark);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .5px;
    transition:
        background .25s ease,
        color .25s ease;
}

.liyan-workflow-button:hover {
    background: var(--lwf-blue);
    color: #fff;
}

/* TABLET */

@media (max-width: 1000px) {
    .liyan-workflow-section {
        padding: 70px 0;
    }

    .liyan-workflow-container {
        width: calc(100% - 36px);
    }

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

    .liyan-workflow-card {
        min-height: 290px;
    }
}

/* MOBILE */

@media (max-width: 600px) {
    .liyan-workflow-section {
        padding: 50px 0;
    }

    .liyan-workflow-container {
        width: calc(100% - 30px);
    }

    .liyan-workflow-header {
        margin-bottom: 30px;
    }

    .liyan-workflow-header h2 {
        font-size: 31px;
        letter-spacing: -.6px;
    }

    .liyan-workflow-header > p {
        font-size: 12px;
    }

    .liyan-workflow-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .liyan-workflow-card {
        min-height: 0;
        padding: 21px 20px 17px;
    }

    .liyan-workflow-card-top {
        margin-bottom: 19px;
    }

    .liyan-workflow-step {
        font-size: 30px;
    }

    .liyan-workflow-icon {
        width: 49px;
        height: 49px;
        flex-basis: 49px;
        font-size: 20px;
    }

    .liyan-workflow-card h3 {
        font-size: 17px;
    }

    .liyan-workflow-card > p {
        font-size: 12px;
    }

    .liyan-workflow-card-footer {
        margin-top: 19px;
    }

    .liyan-workflow-bottom {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 14px;
        padding: 19px;
    }

    .liyan-workflow-bottom-icon {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
        font-size: 18px;
    }

    .liyan-workflow-bottom-content {
        flex-basis: calc(100% - 60px);
    }

    .liyan-workflow-bottom-content h3 {
        font-size: 14px;
    }

    .liyan-workflow-bottom-content p {
        font-size: 11px;
    }

    .liyan-workflow-button {
        width: 100%;
        min-height: 46px;
    }
}

/* SMALL PHONES */

@media (max-width: 360px) {
    .liyan-workflow-container {
        width: calc(100% - 24px);
    }

    .liyan-workflow-header h2 {
        font-size: 27px;
    }

    .liyan-workflow-card {
        padding: 18px 15px;
    }

    .liyan-workflow-bottom {
        padding: 15px;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .liyan-workflow-section *,
    .liyan-workflow-section *::before,
    .liyan-workflow-section *::after {
        transition-duration: .01ms !important;
    }
}













    .liyan-contact-float {
        position: fixed !important;
        right: 20px !important;
        bottom: 25px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        z-index: 2147483647 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .liyan-contact-float a {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        color: #fff !important;
        text-decoration: none !important;
        font-size: 23px !important;
        line-height: 1 !important;
        box-shadow: 0 4px 14px rgba(0,0,0,.25) !important;
        visibility: visible !important;
        opacity: 1 !important;
        transition: transform .3s ease !important;
    }

    .liyan-contact-float a:hover {
        transform: scale(1.1) !important;
        color: #fff !important;
    }

    .liyan-contact-float .liyan-wa {
        background: #25D366 !important;
    }

    .liyan-contact-float .liyan-phone {
        background: #081B4B !important;
    }

    .liyan-contact-float .liyan-mail {
        background: #F4A623 !important;
    }

    @media (max-width: 767px) {
        .liyan-contact-float {
            right: 12px !important;
            bottom: 18px !important;
            gap: 10px !important;
        }

        .liyan-contact-float a {
            width: 46px !important;
            height: 46px !important;
            min-width: 46px !important;
            font-size: 20px !important;
        }
    }


    
.site-header-compact {
    --liyan-blue: #102b63;
    --liyan-dark: #071a3d;
    --liyan-yellow: #ffd600;
    --liyan-red: #ed1c24;

    position: relative;
    z-index: 9999;
    width: 100%;
    background: var(--liyan-dark);
    border-bottom: 3px solid var(--liyan-yellow);
}

.site-header-compact .wrap.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 82px;
}

.site-header-compact .brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.site-header-compact .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-left: auto;
}

.site-header-compact .nav-links > a:not(.liyan-mobile-quote),
.site-header-compact .liyan-services-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 82px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .4px;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease;
}

.site-header-compact .nav-links > a:hover,
.site-header-compact .liyan-services-toggle:hover,
.site-header-compact .nav-links > a.active,
.site-header-compact .liyan-services-toggle.active {
    color: var(--liyan-yellow);
}

/* DROPDOWN */
.site-header-compact .liyan-services-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.site-header-compact .liyan-services-toggle i {
    font-size: 10px;
    transition: transform .2s ease;
}

.site-header-compact .liyan-services-submenu {
    position: absolute;
    top: 100%;
    left: -18px;
    z-index: 10000;
    display: none;
    width: 315px;
    padding: 9px;
    background: #fff;
    border-top: 4px solid var(--liyan-yellow);
    box-shadow: 0 16px 40px rgba(0,0,0,.2);
}

.site-header-compact .liyan-services-dropdown.is-open .liyan-services-submenu {
    display: block;
}

.site-header-compact .liyan-services-dropdown.is-open .liyan-services-toggle i {
    transform: rotate(180deg);
}

.site-header-compact .liyan-services-submenu a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid #e9edf3;
    color: var(--liyan-dark);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
    text-decoration: none;
    white-space: normal;
}

.site-header-compact .liyan-services-submenu a:last-child {
    border-bottom: 0;
}

.site-header-compact .liyan-services-submenu a i {
    margin-top: 4px;
    color: var(--liyan-red);
    font-size: 10px;
}

.site-header-compact .liyan-services-submenu a:hover {
    background: #f2f5fa;
    color: var(--liyan-blue);
}

/* DESKTOP HOVER */
@media (min-width: 901px) {
    .site-header-compact .liyan-services-dropdown:hover .liyan-services-submenu,
    .site-header-compact .liyan-services-dropdown:focus-within .liyan-services-submenu {
        display: block;
    }

    .site-header-compact .liyan-services-dropdown:hover .liyan-services-toggle i {
        transform: rotate(180deg);
    }
}

/* QUOTE BUTTONS */
.site-header-compact .liyan-desktop-quote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex-shrink: 0;
    white-space: nowrap;
}

.site-header-compact .liyan-mobile-quote {
    display: none !important;
}

/* MOBILE TOGGLE */
.site-header-compact .menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.3);
    background: transparent;
    color: var(--liyan-yellow);
    font-size: 22px;
    cursor: pointer;
}

/* TABLET AND MOBILE */
@media (max-width: 900px) {
    .site-header-compact .wrap.nav {
        position: relative;
        min-height: 72px;
        gap: 14px;
    }

    .site-header-compact .menu-toggle {
        display: inline-flex;
        margin-left: auto;
    }

    .site-header-compact .liyan-desktop-quote {
        display: none;
    }

    .site-header-compact .nav-links {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        max-height: calc(100vh - 75px);
        margin: 0;
        padding: 12px 20px 20px;
        overflow-y: auto;
        background: var(--liyan-dark);
        border-top: 2px solid var(--liyan-yellow);
        box-shadow: 0 18px 35px rgba(0,0,0,.22);
    }

    .site-header-compact .nav-links.is-open {
        display: flex;
    }

    .site-header-compact .nav-links > a:not(.liyan-mobile-quote),
    .site-header-compact .liyan-services-toggle {
        display: flex;
        justify-content: space-between;
        width: 100%;
        min-height: 46px;
        padding: 12px 4px;
        border-bottom: 1px solid rgba(255,255,255,.14);
        color: #fff;
        font-size: 12px;
        text-align: left;
    }

    .site-header-compact .liyan-services-dropdown {
        display: block;
        width: 100%;
    }

    .site-header-compact .liyan-services-submenu {
        position: static;
        display: none;
        width: 100%;
        padding: 5px 8px;
        border-top: 2px solid var(--liyan-yellow);
        background: #0d244d;
        box-shadow: none;
    }

    .site-header-compact .liyan-services-dropdown.is-open .liyan-services-submenu {
        display: block;
    }

    .site-header-compact .liyan-services-submenu a {
        padding: 12px 8px;
        border-bottom-color: rgba(255,255,255,.12);
        color: #eef3ff;
    }

    .site-header-compact .liyan-services-submenu a:hover {
        background: rgba(255,255,255,.06);
        color: var(--liyan-yellow);
    }

    .site-header-compact .liyan-mobile-quote {
        display: inline-flex !important;
        align-items: center;
        align-self: flex-start;
        gap: 9px;
        margin-top: 15px;
        padding: 13px 17px;
        background: var(--liyan-yellow);
        color: var(--liyan-dark);
        font-size: 11px;
        font-weight: 800;
        text-decoration: none;
    }
}



/* =========================================================
   LIYAN COMMERCIAL ABOUT SECTION
   Unique prefix: liyan-commercial-about-
========================================================= */

.liyan-commercial-about-section {
    width: 100%;
    padding: 65px 20px;
    background: #ffffff;
    overflow: hidden;
}

.liyan-commercial-about-section,
.liyan-commercial-about-section * {
    box-sizing: border-box;
}

.liyan-commercial-about-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.95fr 1.35fr;
    align-items: center;
    gap: 42px;
}

/* LEFT IMAGE */

.liyan-commercial-about-visual {
    position: relative;
    min-width: 0;
    padding: 0 12px 12px 0;
}

.liyan-commercial-about-image-frame {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 310px;
    overflow: hidden;
    background: #e9eef5;
    border-radius: 8px 8px 8px 38px;
}

.liyan-commercial-about-image-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.55s ease;
}

.liyan-commercial-about-image-frame:hover img {
    transform: scale(1.04);
}

/* Yellow image accent */

.liyan-commercial-about-image-accent {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    width: 72%;
    height: 72%;
    border-right: 7px solid #ffd600;
    border-bottom: 7px solid #ffd600;
    border-radius: 0 0 10px 0;
    pointer-events: none;
}

/* RIGHT CONTENT */

.liyan-commercial-about-content {
    position: relative;
    z-index: 3;
    min-width: 0;
}

.liyan-commercial-about-label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 13px;
    padding: 7px 13px;
    background: #ffd600;
    color: #102b63;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.45px;
    line-height: 1.5;
}

.liyan-commercial-about-heading {
    margin: 0 0 13px;
    color: #102b63;
    font-size: clamp(26px, 2.7vw, 38px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.8px;
    overflow-wrap: break-word;
}

.liyan-commercial-about-heading span {
    display: block;
    color: #102b63;
}

.liyan-commercial-about-title-line {
    display: block;
    width: 54px;
    height: 4px;
    margin: 0 0 15px;
    background: #ffd600;
    border-radius: 3px;
}

.liyan-commercial-about-content p {
    margin: 0 0 12px;
    color: #45546a;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
}

.liyan-commercial-about-content p:last-child {
    margin-bottom: 0;
}

/* TABLET */

@media (max-width: 1024px) {
    .liyan-commercial-about-section {
        padding: 50px 22px;
    }

    .liyan-commercial-about-container {
        grid-template-columns: 0.9fr 1.1fr;
        gap: 28px;
    }

    .liyan-commercial-about-image-frame {
        height: 280px;
    }

    .liyan-commercial-about-heading {
        font-size: clamp(25px, 3.2vw, 33px);
    }

    .liyan-commercial-about-content p {
        font-size: 13px;
        line-height: 1.75;
    }
}

/* MOBILE */

@media (max-width: 767px) {
    .liyan-commercial-about-section {
        padding: 38px 18px;
    }

    .liyan-commercial-about-container {
        grid-template-columns: 1fr;
        gap: 27px;
    }

    .liyan-commercial-about-visual {
        width: 100%;
        padding: 0 9px 9px 0;
    }

    .liyan-commercial-about-image-frame {
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 7px 7px 7px 25px;
    }

    .liyan-commercial-about-image-accent {
        border-right-width: 5px;
        border-bottom-width: 5px;
    }

    .liyan-commercial-about-label {
        margin-bottom: 11px;
        font-size: 10px;
    }

    .liyan-commercial-about-heading {
        font-size: clamp(27px, 7vw, 35px);
        line-height: 1.17;
        letter-spacing: -0.5px;
    }

    .liyan-commercial-about-title-line {
        margin-bottom: 13px;
    }

    .liyan-commercial-about-content p {
        font-size: 14px;
        line-height: 1.75;
        margin-bottom: 12px;
    }
}

/* SMALL MOBILE */

@media (max-width: 380px) {
    .liyan-commercial-about-section {
        padding: 30px 14px;
    }

    .liyan-commercial-about-heading {
        font-size: 26px;
    }

    .liyan-commercial-about-label {
        font-size: 9px;
        padding: 6px 8px;
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    .liyan-commercial-about-image-frame img {
        transition: none;
    }
}

/* =========================================================
   LIYAN COMMERCIAL SERVICES
   Unique prefix: liyan-commercial-services-
   Container maximum width: 1200px
========================================================= */

.liyan-commercial-services-section {
    width: 100%;
    padding: 65px 20px 70px;
    background: #f4f7fc;
    overflow: hidden;
}

.liyan-commercial-services-section *,
.liyan-commercial-services-section *::before,
.liyan-commercial-services-section *::after {
    box-sizing: border-box;
}

.liyan-commercial-services-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* SECTION HEADING */

.liyan-commercial-services-heading {
    max-width: 760px;
    margin: 0 auto 32px;
    text-align: center;
}

.liyan-commercial-services-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #d71920;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.liyan-commercial-services-heading h2 {
    margin: 0;
    color: #102b63;
    font-size: clamp(25px, 3vw, 35px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.5px;
}

.liyan-commercial-services-heading-line {
    display: block;
    width: 55px;
    height: 4px;
    margin: 12px auto 12px;
    border-radius: 4px;
    background: #ffd600;
}

.liyan-commercial-services-heading p {
    margin: 0;
    color: #66748a;
    font-size: 14px;
    line-height: 1.7;
}

/* FOUR-COLUMN GRID */

.liyan-commercial-services-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

/* SERVICE CARD */

.liyan-commercial-service-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5eaf2;
    border-radius: 7px;
    box-shadow: 0 5px 18px rgba(16, 43, 99, .07);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.liyan-commercial-service-card:hover {
    transform: translateY(-5px);
    border-color: #ffd600;
    box-shadow: 0 13px 28px rgba(16, 43, 99, .13);
}

/* CARD IMAGE */

.liyan-commercial-service-image {
    position: relative;
    width: 100%;
    height: 180px;
    flex-shrink: 0;
    background: #dce5f0;
}

.liyan-commercial-service-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .5s ease;
}

.liyan-commercial-service-card:hover
.liyan-commercial-service-image img {
    transform: scale(1.055);
}

/* ROUND ICON */

.liyan-commercial-service-icon {
    position: absolute;
    bottom: -20px;
    left: 17px;
    z-index: 2;
    display: flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #102b63;
    color: #ffd600;
    font-size: 17px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}

/* CARD CONTENT */

.liyan-commercial-service-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 29px 15px 18px;
}

.liyan-commercial-service-content h3 {
    width: 100%;
    margin: 0 0 10px;
    color: #102b63;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: break-word;
}

.liyan-commercial-service-content p {
    margin: 0 0 18px;
    color: #56647a;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.75;
}

/* CARD LINK */

.liyan-commercial-service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    color: #d71920;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.5;
    letter-spacing: .35px;
    text-decoration: none;
}

.liyan-commercial-service-link i {
    font-size: 10px;
    transition: transform .2s ease;
}

.liyan-commercial-service-link:hover {
    color: #102b63;
}

.liyan-commercial-service-link:hover i {
    transform: translateX(4px);
}

/* LAPTOP */

@media (max-width: 1050px) {
    .liyan-commercial-services-section {
        padding: 55px 22px;
    }

    .liyan-commercial-services-grid {
        gap: 16px;
    }

    .liyan-commercial-service-image {
        height: 155px;
    }

    .liyan-commercial-service-content {
        padding: 28px 12px 16px;
    }

    .liyan-commercial-service-content h3 {
        font-size: 15px;
    }

    .liyan-commercial-service-content p {
        font-size: 12px;
    }
}

/* TABLET: TWO CARDS PER ROW */

@media (max-width: 767px) {
    .liyan-commercial-services-section {
        padding: 45px 18px;
    }

    .liyan-commercial-services-heading {
        margin-bottom: 26px;
    }

    .liyan-commercial-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .liyan-commercial-service-image {
        height: 175px;
    }

    .liyan-commercial-service-content {
        padding: 30px 14px 17px;
    }

    .liyan-commercial-service-content h3 {
        font-size: 16px;
    }

    .liyan-commercial-service-content p {
        font-size: 12.5px;
    }
}

/* SMALL MOBILE: ONE CARD PER ROW */

@media (max-width: 480px) {
    .liyan-commercial-services-section {
        padding: 36px 15px;
    }

    .liyan-commercial-services-heading h2 {
        font-size: 25px;
    }

    .liyan-commercial-services-heading p {
        font-size: 13px;
    }

    .liyan-commercial-services-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .liyan-commercial-service-image {
        height: 215px;
    }

    .liyan-commercial-service-content {
        padding: 30px 17px 19px;
    }

    .liyan-commercial-service-content h3 {
        font-size: 18px;
    }

    .liyan-commercial-service-content p {
        font-size: 13px;
        line-height: 1.75;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .liyan-commercial-service-card,
    .liyan-commercial-service-image img,
    .liyan-commercial-service-link i {
        transition: none;
    }
}



/* ============================================
   LIYAN PREMIUM APPROACH SECTION
   Unique class prefix: liyan-premium-approach__
============================================ */

.liyan-premium-approach {
    --lpa-navy: #081d40;
    --lpa-blue: #12366d;
    --lpa-yellow: #ffd600;
    --lpa-red: #ed1c24;
    --lpa-white: #ffffff;
    --lpa-muted: #bdcbe0;

    position: relative;
    isolation: isolate;
    width: 100%;
    padding: 76px 22px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(34, 78, 139, .4), transparent 42%),
        linear-gradient(125deg, #07172f 0%, #0b2854 55%, #081b39 100%);
    color: var(--lpa-white);
}

.liyan-premium-approach::before {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--lpa-yellow) 0%,
        var(--lpa-yellow) 72%,
        var(--lpa-red) 72%,
        var(--lpa-red) 100%
    );
    content: "";
}

.liyan-premium-approach,
.liyan-premium-approach * {
    box-sizing: border-box;
}

.liyan-premium-approach__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 48px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.liyan-premium-approach__left,
.liyan-premium-approach__right {
    min-width: 0;
}

.liyan-premium-approach__left {
    padding-right: 40px;
    border-right: 1px solid rgba(255, 255, 255, .16);
}

/* Headings */

.liyan-premium-approach__intro {
    margin-bottom: 32px;
}

.liyan-premium-approach__kicker {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--lpa-yellow);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.5;
}

.liyan-premium-approach__intro h2 {
    max-width: 540px;
    margin: 0 0 12px;
    color: var(--lpa-white);
    font-size: clamp(27px, 2.6vw, 36px);
    font-weight: 800;
    letter-spacing: -.8px;
    line-height: 1.16;
}

.liyan-premium-approach__intro h2 span {
    color: var(--lpa-yellow);
}

.liyan-premium-approach__intro > p {
    max-width: 460px;
    margin: 0;
    color: var(--lpa-muted);
    font-size: 14px;
    line-height: 1.8;
}

/* Benefits: refined two-column cards */

.liyan-premium-approach__benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.liyan-premium-approach__benefit {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-width: 0;
    padding: 16px 12px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 7px;
    background: rgba(255, 255, 255, .045);
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.liyan-premium-approach__benefit:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 214, 0, .48);
    background: rgba(255, 255, 255, .085);
}

.liyan-premium-approach__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: var(--lpa-yellow);
    color: var(--lpa-navy);
    font-size: 16px;
}

.liyan-premium-approach__benefit h3 {
    margin: 1px 0 7px;
    color: var(--lpa-white);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
}

.liyan-premium-approach__benefit p {
    margin: 0;
    color: var(--lpa-muted);
    font-size: 11.5px;
    line-height: 1.75;
}

/* Timeline */

.liyan-premium-approach__right .liyan-premium-approach__intro {
    margin-bottom: 27px;
}

.liyan-premium-approach__timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.liyan-premium-approach__timeline::before {
    position: absolute;
    top: 25px;
    bottom: 26px;
    left: 21px;
    width: 2px;
    background: linear-gradient(
        to bottom,
        var(--lpa-yellow),
        rgba(255, 214, 0, .16)
    );
    content: "";
}

.liyan-premium-approach__step {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 15px;
    padding: 0 0 23px;
}

.liyan-premium-approach__step:last-child {
    padding-bottom: 0;
}

.liyan-premium-approach__step-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(255, 214, 0, .6);
    border-radius: 7px;
    background: var(--lpa-yellow);
    color: var(--lpa-navy);
    font-size: 16px;
}

.liyan-premium-approach__step-body {
    min-width: 0;
    padding-top: 1px;
}

.liyan-premium-approach__step-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
}

.liyan-premium-approach__step-top h3 {
    margin: 0;
    color: var(--lpa-white);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.5;
}

.liyan-premium-approach__step-top > span {
    flex-shrink: 0;
    color: var(--lpa-yellow);
    font-size: 12px;
    font-weight: 800;
}

.liyan-premium-approach__step-body p {
    margin: 0;
    color: var(--lpa-muted);
    font-size: 12px;
    line-height: 1.75;
}

/* CTA */

.liyan-premium-approach__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
    padding: 15px 19px;
    border: 1px solid var(--lpa-yellow);
    border-radius: 3px;
    background: var(--lpa-yellow);
    color: var(--lpa-navy);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .7px;
    text-decoration: none;
    transition: background .25s ease, color .25s ease;
}

.liyan-premium-approach__button:hover {
    border-color: var(--lpa-red);
    background: var(--lpa-red);
    color: var(--lpa-white);
}

.liyan-premium-approach__button i {
    transition: transform .25s ease;
}

.liyan-premium-approach__button:hover i {
    transform: translateX(4px);
}

/* Tablet */

@media (max-width: 1000px) {
    .liyan-premium-approach {
        padding: 58px 24px;
    }

    .liyan-premium-approach__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    .liyan-premium-approach__left {
        padding-right: 0;
        padding-bottom: 40px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .16);
    }

    .liyan-premium-approach__benefits {
        gap: 15px;
    }

    .liyan-premium-approach__benefit {
        padding: 17px 15px;
    }

    .liyan-premium-approach__intro h2 {
        font-size: 32px;
    }
}

/* Mobile */

@media (max-width: 600px) {
    .liyan-premium-approach {
        padding: 42px 17px;
    }

    .liyan-premium-approach__inner {
        gap: 34px;
    }

    .liyan-premium-approach__left {
        padding-bottom: 32px;
    }

    .liyan-premium-approach__intro {
        margin-bottom: 23px;
    }

    .liyan-premium-approach__intro h2 {
        font-size: 27px;
        line-height: 1.22;
    }

    .liyan-premium-approach__intro > p {
        font-size: 13px;
    }

    .liyan-premium-approach__benefits {
        grid-template-columns: minmax(0, 1fr);
        gap: 11px;
    }

    .liyan-premium-approach__benefit {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 15px 13px;
    }

    .liyan-premium-approach__benefit h3 {
        font-size: 13px;
    }

    .liyan-premium-approach__benefit p {
        font-size: 12px;
    }

    .liyan-premium-approach__step {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 13px;
        padding-bottom: 23px;
    }

    .liyan-premium-approach__step-icon {
        width: 41px;
        height: 41px;
    }

    .liyan-premium-approach__timeline::before {
        left: 20px;
    }

    .liyan-premium-approach__step-top h3 {
        font-size: 13px;
    }

    .liyan-premium-approach__step-body p {
        font-size: 12px;
    }

    .liyan-premium-approach__button {
        display: flex;
        width: 100%;
        padding: 15px 12px;
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .liyan-premium-approach *,
    .liyan-premium-approach *::before,
    .liyan-premium-approach *::after {
        transition: none !important;
    }
}



/* =====================================================
   LIYAN COMMERCIAL BUSINESS NEEDS SECTION
   Unique prefix: liyan-business-needs-
   Maximum content width: 1200px
===================================================== */

.liyan-business-needs-section {
    --lbn-navy: #102b63;
    --lbn-dark: #081d40;
    --lbn-yellow: #ffd600;
    --lbn-red: #ed1c24;
    --lbn-text: #4f5f75;
    --lbn-border: #e4eaf2;

    width: 100%;
    padding: 75px 22px;
    background: #ffffff;
    overflow: hidden;
}

.liyan-business-needs-section,
.liyan-business-needs-section * {
    box-sizing: border-box;
}

.liyan-business-needs-container {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: center;
    gap: 60px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* LEFT CONTENT */

.liyan-business-needs-content {
    min-width: 0;
}

.liyan-business-needs-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--lbn-navy);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.8px;
    line-height: 1.5;
}

.liyan-business-needs-content h2 {
    max-width: 600px;
    margin: 0;
    color: var(--lbn-navy);
    font-size: clamp(28px, 3vw, 39px);
    font-weight: 850;
    letter-spacing: -.8px;
    line-height: 1.18;
}

.liyan-business-needs-accent {
    display: block;
    width: 62px;
    height: 5px;
    margin: 17px 0 21px;
    border-radius: 4px;
    background: var(--lbn-yellow);
}

.liyan-business-needs-content h3 {
    margin: 0 0 10px;
    color: var(--lbn-dark);
    font-size: 19px;
    font-weight: 750;
    line-height: 1.45;
}

.liyan-business-needs-intro {
    margin: 0 0 23px;
    color: var(--lbn-text);
    font-size: 14px;
    line-height: 1.8;
}

/* CHECKLIST */

.liyan-business-needs-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.liyan-business-needs-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 0;
    color: var(--lbn-dark);
    font-size: 14px;
    font-weight: 550;
    line-height: 1.6;
}

.liyan-business-needs-check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--lbn-navy);
    color: #ffffff;
    font-size: 10px;
    transition: background .2s ease, color .2s ease;
}

.liyan-business-needs-list li:hover
.liyan-business-needs-check {
    background: var(--lbn-yellow);
    color: var(--lbn-dark);
}

/* PROJECT NOTE */

.liyan-business-needs-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 23px 0 0;
    padding: 14px 15px;
    border-left: 3px solid var(--lbn-yellow);
    background: #f4f7fc;
    color: var(--lbn-text);
    font-size: 12px;
    line-height: 1.75;
}

.liyan-business-needs-note i {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--lbn-navy);
}

/* CTA */

.liyan-business-needs-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 25px;
    padding: 15px 19px;
    border: 1px solid var(--lbn-navy);
    border-radius: 3px;
    background: var(--lbn-navy);
    color: #ffffff;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .5px;
    line-height: 1.5;
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease;
}

.liyan-business-needs-button:hover {
    border-color: var(--lbn-red);
    background: var(--lbn-red);
    color: #ffffff;
}

.liyan-business-needs-button i {
    transition: transform .25s ease;
}

.liyan-business-needs-button:hover i {
    transform: translateX(4px);
}

/* RIGHT IMAGE */

.liyan-business-needs-visual {
    position: relative;
    min-width: 0;
    padding: 0 13px 13px 0;
}

.liyan-business-needs-image-frame {
    position: relative;
    z-index: 2;
    width: 100%;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border-radius: 7px 7px 7px 35px;
    background: #e7edf5;
    box-shadow: 0 15px 38px rgba(8, 29, 64, .12);
}

.liyan-business-needs-image-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .6s ease;
}

.liyan-business-needs-visual:hover
.liyan-business-needs-image-frame img {
    transform: scale(1.045);
}

/* YELLOW IMAGE CORNER */

.liyan-business-needs-corner {
    position: absolute;
    z-index: 1;
    right: 0;
    top: -12px;
    width: 100px;
    height: 100px;
    border-top: 6px solid var(--lbn-yellow);
    border-right: 6px solid var(--lbn-yellow);
    border-radius: 0 8px 0 0;
}

/* FLOATING IMAGE CAPTION */

.liyan-business-needs-image-caption {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 13px;
    width: calc(100% - 35px);
    max-width: 330px;
    margin: -35px 0 0 20px;
    padding: 16px 18px;
    border-left: 4px solid var(--lbn-yellow);
    background: var(--lbn-navy);
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(8, 29, 64, .2);
}

.liyan-business-needs-caption-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--lbn-yellow);
    color: var(--lbn-dark);
    font-size: 16px;
}

.liyan-business-needs-image-caption strong,
.liyan-business-needs-image-caption span {
    display: block;
}

.liyan-business-needs-image-caption strong {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.5;
}

.liyan-business-needs-image-caption div > span {
    color: #d5deec;
    font-size: 11px;
    line-height: 1.6;
}

/* TABLET */

@media (max-width: 950px) {
    .liyan-business-needs-section {
        padding: 55px 24px;
    }

    .liyan-business-needs-container {
        grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
        gap: 32px;
    }

    .liyan-business-needs-content h2 {
        font-size: clamp(27px, 3.3vw, 34px);
    }

    .liyan-business-needs-content h3 {
        font-size: 17px;
    }

    .liyan-business-needs-list {
        gap: 12px;
    }

    .liyan-business-needs-list li {
        font-size: 13px;
    }

    .liyan-business-needs-image-caption {
        width: calc(100% - 18px);
        margin-left: 10px;
        padding: 13px;
    }
}

/* MOBILE */

@media (max-width: 700px) {
    .liyan-business-needs-section {
        padding: 42px 18px;
    }

    .liyan-business-needs-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;
    }

    .liyan-business-needs-content h2 {
        font-size: clamp(27px, 7vw, 35px);
        line-height: 1.2;
    }

    .liyan-business-needs-content h3 {
        font-size: 18px;
    }

    .liyan-business-needs-intro {
        font-size: 13px;
    }

    .liyan-business-needs-list {
        gap: 13px;
    }

    .liyan-business-needs-list li {
        font-size: 13px;
    }

    .liyan-business-needs-visual {
        width: 100%;
        padding-right: 9px;
        padding-bottom: 9px;
    }

    .liyan-business-needs-image-frame {
        aspect-ratio: 4 / 3;
        border-radius: 6px 6px 6px 25px;
    }

    .liyan-business-needs-corner {
        top: -8px;
        width: 70px;
        height: 70px;
        border-width: 4px;
    }

    .liyan-business-needs-image-caption {
        width: calc(100% - 20px);
        max-width: 340px;
        margin-top: -27px;
        margin-left: 10px;
    }

    .liyan-business-needs-button {
        width: 100%;
    }
}

/* SMALL MOBILE */

@media (max-width: 380px) {
    .liyan-business-needs-section {
        padding: 34px 14px;
    }

    .liyan-business-needs-content h2 {
        font-size: 26px;
    }

    .liyan-business-needs-list li {
        font-size: 12px;
    }

    .liyan-business-needs-note {
        font-size: 11px;
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    .liyan-business-needs-section *,
    .liyan-business-needs-section *::before,
    .liyan-business-needs-section *::after {
        transition: none !important;
    }
}



/* ======================================================
   LIYAN COMMERCIAL FAQ SECTION
   Unique prefix: liyan-commercial-faq-
====================================================== */

.liyan-commercial-faq-section {
    --lcf-navy: #102b63;
    --lcf-dark: #081d40;
    --lcf-yellow: #ffd600;
    --lcf-red: #ed1c24;
    --lcf-text: #536176;
    --lcf-border: #e4eaf2;

    width: 100%;
    padding: 25px 22px;
    background:
        radial-gradient(ellipse at top left, #f0f5fc 0%, transparent 48%),
        #ffffff;
    overflow: hidden;
}

.liyan-commercial-faq-section,
.liyan-commercial-faq-section * {
    box-sizing: border-box;
}

.liyan-commercial-faq-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* HEADER */

.liyan-commercial-faq-header {
    max-width: 700px;
    margin: 0 auto 38px;
    text-align: center;
}

.liyan-commercial-faq-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--lcf-red);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 2px;
}

.liyan-commercial-faq-header h2 {
    margin: 0;
    color: var(--lcf-navy);
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 850;
    letter-spacing: -.7px;
    line-height: 1.2;
}

.liyan-commercial-faq-heading-line {
    display: block;
    width: 58px;
    height: 4px;
    margin: 15px auto;
    border-radius: 4px;
    background: var(--lcf-yellow);
}

.liyan-commercial-faq-header > p {
    max-width: 560px;
    margin: 0 auto;
    color: var(--lcf-text);
    font-size: 14px;
    line-height: 1.8;
}

/* FAQ LIST */

.liyan-commercial-faq-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.liyan-commercial-faq-item {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--lcf-border);
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(16, 43, 99, .045);
    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.liyan-commercial-faq-item:hover {
    border-color: #c8d5e9;
    box-shadow: 0 7px 22px rgba(16, 43, 99, .08);
}

.liyan-commercial-faq-item[open] {
    border-color: rgba(255, 214, 0, .9);
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(16, 43, 99, .08);
}

/* QUESTION ROW */

.liyan-commercial-faq-item summary {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 15px;
    min-height: 76px;
    margin: 0;
    padding: 17px 22px;
    color: var(--lcf-dark);
    list-style: none;
    cursor: pointer;
}

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

.liyan-commercial-faq-item summary::marker {
    content: "";
}

/* RED QUESTION ICON */

.liyan-commercial-faq-question-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--lcf-red);
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.liyan-commercial-faq-item[open]
.liyan-commercial-faq-question-icon {
    background: var(--lcf-yellow);
    color: var(--lcf-dark);
    transform: scale(1.04);
}

/* QUESTION TEXT */

.liyan-commercial-faq-question {
    color: var(--lcf-navy);
    font-size: 15px;
    font-weight: 750;
    line-height: 1.6;
}

/* EXPAND ICON */

.liyan-commercial-faq-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--lcf-border);
    border-radius: 50%;
    background: #f6f8fc;
    color: var(--lcf-navy);
    font-size: 12px;
    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.liyan-commercial-faq-item[open]
.liyan-commercial-faq-chevron {
    transform: rotate(45deg);
    border-color: var(--lcf-yellow);
    background: var(--lcf-yellow);
    color: var(--lcf-dark);
}

/* ANSWER */

.liyan-commercial-faq-answer {
    margin: 0 22px 0 75px;
    padding: 0 0 21px;
    border-top: 1px solid #edf0f5;
    animation: liyanCommercialFaqReveal .25s ease both;
}

.liyan-commercial-faq-answer p {
    margin: 14px 0 0;
    color: var(--lcf-text);
    font-size: 13px;
    line-height: 1.85;
}

/* BOTTOM CTA */

.liyan-commercial-faq-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 38px;
    padding: 27px 30px;
    border-left: 5px solid var(--lcf-yellow);
    border-radius: 5px;
    background: linear-gradient(115deg, #081d40, #14366b);
    box-shadow: 0 12px 30px rgba(8, 29, 64, .12);
}

.liyan-commercial-faq-cta-content {
    min-width: 0;
}

.liyan-commercial-faq-cta-content > span {
    display: block;
    margin-bottom: 7px;
    color: var(--lcf-yellow);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 1.8px;
}

.liyan-commercial-faq-cta-content h3 {
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.45;
}

.liyan-commercial-faq-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 15px 18px;
    border: 1px solid var(--lcf-yellow);
    border-radius: 3px;
    background: var(--lcf-yellow);
    color: var(--lcf-dark);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .4px;
    text-decoration: none;
    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}

.liyan-commercial-faq-cta-button:hover {
    border-color: var(--lcf-red);
    background: var(--lcf-red);
    color: #ffffff;
}

.liyan-commercial-faq-cta-button i {
    transition: transform .2s ease;
}

.liyan-commercial-faq-cta-button:hover i {
    transform: translateX(4px);
}

/* FAQ REVEAL */

@keyframes liyanCommercialFaqReveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* TABLET */

@media (max-width: 768px) {
    .liyan-commercial-faq-section {
        padding: 55px 20px;
    }

    .liyan-commercial-faq-header {
        margin-bottom: 29px;
    }

    .liyan-commercial-faq-item summary {
        grid-template-columns: 34px minmax(0, 1fr) 30px;
        gap: 12px;
        min-height: 70px;
        padding: 15px 16px;
    }

    .liyan-commercial-faq-question-icon {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .liyan-commercial-faq-question {
        font-size: 14px;
    }

    .liyan-commercial-faq-answer {
        margin-left: 62px;
        margin-right: 16px;
    }

    .liyan-commercial-faq-cta {
        padding: 23px;
    }

    .liyan-commercial-faq-cta-content h3 {
        font-size: 18px;
    }
}

/* MOBILE */

@media (max-width: 520px) {
    .liyan-commercial-faq-section {
        padding: 42px 15px;
    }

    .liyan-commercial-faq-header {
        margin-bottom: 25px;
    }

    .liyan-commercial-faq-header h2 {
        font-size: 28px;
    }

    .liyan-commercial-faq-header > p {
        font-size: 13px;
    }

    .liyan-commercial-faq-list {
        gap: 11px;
    }

    .liyan-commercial-faq-item summary {
        grid-template-columns: 30px minmax(0, 1fr) 27px;
        gap: 10px;
        min-height: 68px;
        padding: 14px 12px;
    }

    .liyan-commercial-faq-question-icon {
        width: 29px;
        height: 29px;
        font-size: 17px;
    }

    .liyan-commercial-faq-question {
        font-size: 13px;
        line-height: 1.6;
    }

    .liyan-commercial-faq-chevron {
        width: 27px;
        height: 27px;
        font-size: 10px;
    }

    .liyan-commercial-faq-answer {
        margin: 0 13px 0 52px;
        padding-bottom: 16px;
    }

    .liyan-commercial-faq-answer p {
        margin-top: 12px;
        font-size: 12px;
        line-height: 1.8;
    }

    .liyan-commercial-faq-cta {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
        margin-top: 27px;
        padding: 22px 18px;
    }

    .liyan-commercial-faq-cta-content h3 {
        font-size: 19px;
    }

    .liyan-commercial-faq-cta-button {
        width: 100%;
        padding: 14px 12px;
    }
}

/* ACCESSIBILITY */

.liyan-commercial-faq-item summary:focus-visible,
.liyan-commercial-faq-cta-button:focus-visible {
    outline: 3px solid var(--lcf-yellow);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .liyan-commercial-faq-section *,
    .liyan-commercial-faq-section *::before,
    .liyan-commercial-faq-section *::after {
        animation: none !important;
        transition: none !important;
    }
}



/* GALLERY PAGE BANNER - CENTER ALIGNMENT */
.page-banner.gallery-page-banner {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-page-banner .gallery-banner-content {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.gallery-page-banner .breadcrumb {
    width: 100%;
    text-align: center;
    margin-bottom: 18px;
}

.gallery-page-banner h1.heading {
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.gallery-page-banner p {
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* GALLERY SECTION HEADING */
.gallery-page-banner + .section .section-head {
    text-align: center;
}

.gallery-page-banner + .section .section-head .heading {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.gallery-page-banner + .section .section-head p {
    margin-left: auto;
    margin-right: auto;
}


/* =========================================
   LIYAN PROJECT STATUS — RESPONSIVE SECTION
========================================= */

.liyan-project-status,
.liyan-project-status * {
  box-sizing: border-box;
}

.liyan-project-status {
  --lps-navy: #10264a;
  --lps-gold: #f6c500;
  --lps-text: #192a43;
  --lps-muted: #64748b;
  width: 100%;
  padding: 90px 24px;
  background: #f5f7fb;
  font-family: inherit;
  overflow: hidden;
}

.liyan-project-status__container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.liyan-project-status__header {
  max-width: 760px;
  margin: 0 auto 46px;
  text-align: center;
}

.liyan-project-status__eyebrow {
  display: inline-block;
  margin-bottom: 15px;
  color: #9b7800;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
}

.liyan-project-status__header h2 {
  margin: 0 0 16px;
  color: var(--lps-navy);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -1.4px;
}

.liyan-project-status__header h2 span {
  color: #b28a00;
}

.liyan-project-status__header p {
  max-width: 650px;
  margin: 0 auto;
  color: var(--lps-muted);
  font-size: 16px;
  line-height: 1.8;
}

.liyan-project-status__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.liyan-project-status__card {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e7ebf2;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(16, 38, 74, 0.055);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.liyan-project-status__card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 42px rgba(16, 38, 74, 0.13);
}

.liyan-project-status__image {
  position: relative;
  height: 250px;
  overflow: hidden;
  background: #dce4ee;
}

.liyan-project-status__image::after {
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(7, 22, 45, 0.55)
  );
  content: "";
  pointer-events: none;
}

.liyan-project-status__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s ease;
}

.liyan-project-status__card:hover .liyan-project-status__image img {
  transform: scale(1.06);
}

.liyan-project-status__badge {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 5px;
  background: rgba(255,255,255,0.96);
  color: var(--lps-navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.liyan-project-status__badge > span {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #16834a;
}

.liyan-project-status__badge--ongoing > span {
  background: #e79a13;
}

.liyan-project-status__badge--upcoming > span {
  background: #3576d3;
}

.liyan-project-status__number {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 13px;
  color: rgba(255,255,255,0.9);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
}

.liyan-project-status__content {
  display: flex;
  min-height: 255px;
  flex-direction: column;
  align-items: flex-start;
  padding: 27px 25px 25px;
}

.liyan-project-status__meta {
  margin-bottom: 12px;
  color: #9b7800;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.3px;
  line-height: 1.6;
}

.liyan-project-status__content h3 {
  margin: 0 0 12px;
  color: var(--lps-navy);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.3;
}

.liyan-project-status__content p {
  margin: 0 0 24px;
  color: var(--lps-muted);
  font-size: 14px;
  line-height: 1.85;
}

.liyan-project-status__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  color: var(--lps-navy);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: color 0.25s ease, gap 0.25s ease;
}

.liyan-project-status__link span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff3b8;
  color: var(--lps-navy);
  font-size: 17px;
  transition: background 0.25s ease, color 0.25s ease;
}

.liyan-project-status__link:hover {
  gap: 17px;
  color: #a27c00;
}

.liyan-project-status__link:hover span {
  background: var(--lps-navy);
  color: #fff;
}

/* TABLET */
@media (max-width: 1024px) {
  .liyan-project-status {
    padding: 70px 22px;
  }

  .liyan-project-status__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .liyan-project-status__image {
    height: 230px;
  }

  .liyan-project-status__content {
    min-height: 245px;
    padding: 24px 22px;
  }
}

/* MOBILE */
@media (max-width: 600px) {
  .liyan-project-status {
    padding: 52px 16px;
  }

  .liyan-project-status__header {
    margin-bottom: 30px;
  }

  .liyan-project-status__header h2 {
    font-size: 30px;
    letter-spacing: -0.7px;
  }

  .liyan-project-status__header p {
    font-size: 14px;
    line-height: 1.7;
  }

  .liyan-project-status__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .liyan-project-status__image {
    height: 230px;
  }

  .liyan-project-status__content {
    min-height: auto;
    padding: 23px 21px 24px;
  }

  .liyan-project-status__content h3 {
    font-size: 21px;
  }

  .liyan-project-status__content p {
    margin-bottom: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .liyan-project-status__card,
  .liyan-project-status__image img,
  .liyan-project-status__link,
  .liyan-project-status__link span {
    transition: none;
  }
}



/* ONGOING PROJECTS - RESPONSIVE STYLES */

.liyan-ongoing-simple .los-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.liyan-ongoing-simple .los-projects {
    padding: 70px 24px;
    background: #f7f8fb;
}

.liyan-ongoing-simple .los-heading {
    text-align: center;
    margin: 0 auto 38px;
}

.liyan-ongoing-simple .los-heading > span {
    display: block;
    margin-bottom: 10px;
    color: #a78300;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.liyan-ongoing-simple .los-heading h2 {
    margin: 0 0 12px;
    color: #10264a;
    font-size: clamp(27px, 3.5vw, 38px);
    line-height: 1.3;
}

.liyan-ongoing-simple .los-heading p {
    max-width: 720px;
    margin: 0 auto;
    color: #68758a;
    font-size: 15px;
    line-height: 1.7;
}

.liyan-ongoing-simple .los-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

.liyan-ongoing-simple .los-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8ebf1;
    border-radius: 6px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.liyan-ongoing-simple .los-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(16, 38, 74, .10);
}

.liyan-ongoing-simple .los-card > img {
    display: block;
    width: 100%;
    height: 235px;
    object-fit: cover;
}

.liyan-ongoing-simple .los-card-content {
    padding: 22px;
}

.liyan-ongoing-simple .los-card-content h3 {
    margin: 0 0 10px;
    color: #10264a;
    font-size: 21px;
    line-height: 1.4;
}

.liyan-ongoing-simple .los-card-content p {
    margin: 0;
    color: #68758a;
    font-size: 14px;
    line-height: 1.8;
}

/* TABLET */
@media (max-width: 900px) {
    .liyan-ongoing-simple .los-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

/* MOBILE */
@media (max-width: 600px) {
    .liyan-ongoing-simple .los-projects {
        padding: 45px 16px;
    }

    .liyan-ongoing-simple .los-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .liyan-ongoing-simple .los-card > img {
        height: 230px;
    }

    .liyan-ongoing-simple .los-card-content {
        padding: 19px;
    }

    .liyan-ongoing-simple .los-heading p {
        font-size: 14px;
    }
}


/* UPCOMING PROJECTS - RESPONSIVE CSS */

.liyan-upcoming-simple .lup-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.liyan-upcoming-simple .lup-projects {
    padding: 70px 24px;
    background: #f7f8fb;
}

.liyan-upcoming-simple .lup-heading {
    text-align: center;
    margin: 0 auto 38px;
}

.liyan-upcoming-simple .lup-heading > span {
    display: block;
    margin-bottom: 10px;
    color: #a78300;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.liyan-upcoming-simple .lup-heading h2 {
    margin: 0 0 12px;
    color: #10264a;
    font-size: clamp(27px, 3.5vw, 38px);
    line-height: 1.3;
}

.liyan-upcoming-simple .lup-heading p {
    max-width: 720px;
    margin: 0 auto;
    color: #68758a;
    font-size: 15px;
    line-height: 1.7;
}

.liyan-upcoming-simple .lup-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

.liyan-upcoming-simple .lup-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8ebf1;
    border-radius: 6px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.liyan-upcoming-simple .lup-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(16, 38, 74, .10);
}

.liyan-upcoming-simple .lup-card > img {
    display: block;
    width: 100%;
    height: 235px;
    object-fit: cover;
}

.liyan-upcoming-simple .lup-card-content {
    padding: 22px;
}

.liyan-upcoming-simple .lup-card-content h3 {
    margin: 0 0 10px;
    color: #10264a;
    font-size: 21px;
    line-height: 1.4;
}

.liyan-upcoming-simple .lup-card-content p {
    margin: 0;
    color: #68758a;
    font-size: 14px;
    line-height: 1.8;
}

/* TABLET */
@media (max-width: 900px) {
    .liyan-upcoming-simple .lup-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

/* MOBILE */
@media (max-width: 600px) {
    .liyan-upcoming-simple .lup-projects {
        padding: 45px 16px;
    }

    .liyan-upcoming-simple .lup-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .liyan-upcoming-simple .lup-card > img {
        height: 230px;
    }

    .liyan-upcoming-simple .lup-card-content {
        padding: 19px;
    }

    .liyan-upcoming-simple .lup-heading p {
        font-size: 14px;
    }
}


.upcoming{
    text-align: center;
    margin-top: 80px;
    margin-bottom: 80px;
}