:root {
    --ink: #222;
    --blue: #143b5a;
    --gold: #d4a24c;
    --muted: #6c7480;
    --line: #e8ebef;
    --max: 1200px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: var(--ink);
    
    background: #fff;
    line-height: 1.7
}

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

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

.site-head {
    height: 78px;
    background: #050505;
    color: #fff;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5
}

.head-inner {
    width: min(var(--max), calc(100% - 48px));
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between
}
.footer-logo{
    display: inline-block;
}
.footer-logo img{
    max-height: 60px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    letter-spacing: 2px
}
.head-inner .brand img{
    max-height: 60px;
}
.brand-mark {
    width: 34px;
    height: 34px;
    border: 3px solid var(--gold);
    border-radius: 5px;
    position: relative
}

.brand-mark:before,
.brand-mark:after {
    content: "";
    position: absolute;
    background: #3c9b63
}

.brand-mark:before {
    width: 4px;
    height: 25px;
    left: 12px;
    top: 2px
}

.brand-mark:after {
    height: 4px;
    width: 25px;
    left: 2px;
    top: 12px
}

.nav {
    display: flex;
    gap: 34px;
    font-size: 15px
}

.nav a {
    opacity: .9;
    padding: 28px 0;
    border-bottom: 2px solid transparent
}

.nav a:hover,
.nav a.active {
    color: var(--gold);
    border-color: var(--gold)
}

.hamb {
    display: none;
    font-size: 27px
}

.hero {
    min-height: 680px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 120px 0 80px;
    color: #fff
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(4, 17, 30, .68), rgba(4, 17, 30, .12));
    z-index: 2;
    pointer-events: none
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center calc(50% + var(--hero-shift, 0px));
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 1.6s ease;
    will-change: opacity, transform
}

.hero-bg.is-active {
    opacity: 1;
    animation: kenburns 6s ease-out forwards
}

.hero-copy {
    position: relative;
    z-index: 3
}

@keyframes kenburns {
    from {
        transform: scale(1.05)
    }

    to {
        transform: scale(1.15)
    }
}

.hero-copy {
    width: min(var(--max), calc(100% - 48px));
    margin: auto
}

.hero h1 {
    
    font-size: 62px;
    line-height: 1.15;
    letter-spacing: 2px;
    margin: 0 0 24px
}

.hero h1 span {
    display: block
}

.hero p {
    font-size: 22px;
    margin: 12px 0
}

.rule {
    width: 120px;
    height: 5px;
    background: #fff;
    margin-top: 38px
}

.section {
    padding: 74px 0
}

.wrap {
    width: min(var(--max), calc(100% - 48px));
    margin: auto
}

.section-title {
    text-align: center;
    margin: 0 0 12px;
    font-size: 32px
}

.section-sub {
    text-align: center;
    color: #777;
    margin: 0 0 42px
}

.grid {
    display: grid;
    gap: 28px
}

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

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

.grid-6 {
    grid-template-columns: repeat(6, 1fr)
}

.card {
    border: 1px solid #e5e8ec;
    background: #fff;
    transition: .3s;
    overflow: hidden
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px #12223518
}

.card img {
    width: 100%;
    height: 190px;
    object-fit: cover
}

.card-body {
    padding: 18px 20px
}

.card h3 {
    font-size: 19px;
    margin: 0px
}

.muted {
    color: var(--muted);
    font-size: 14px;
    margin: 3px 0px;
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center
}

.split img {
    height: 420px;
    width: 100%;
    object-fit: cover
}

.eyebrow {
    color: var(--gold);
    letter-spacing: 4px;
    font-size: 13px;
    text-transform: uppercase
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 38px
}

.stat {
    padding: 35px 20px;
    text-align: center;
    box-shadow: 0 8px 25px #22354b12
}

.stat strong {
    display: block;
    font-size: 48px;
    color: var(--blue)
}

.stat small {
    color: #666
}

.banner {
    padding-top: 78px;
    background: linear-gradient(90deg, #071b2bce, #071b2b80), url('../images/residence_05_balcony.png') center/cover;
    min-height: 320px;
    color: #fff;
    display: flex;
    align-items: center
}

.banner h1 {
    font-size: 44px;
    margin: 0
}

.crumb {
    color: #ced7e1;
    margin-top: 8px
}

.tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 35px
}

.tabs a {
    padding: 10px 22px;
    border: 1px solid var(--line);
    border-radius: 3px
}

.tabs a.active,
.tabs a:hover {
    background: var(--blue);
    color: #fff
}

.news-item {
    padding: 22px 0;
    border-bottom: 1px solid var(--line)
}

.news-item h3 {
    margin: 0 0 7px;
    font-size: 20px
}

.news-item time {
    font-size: 13px;
    color: #9a9fa6
}

.article {
    max-width: 850px;
    margin: auto
}

.article h1 {
    font-size: 36px;
    line-height: 1.3;
    margin: 0 0 10px
}

.article-meta {
    color: #888;
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px;
    margin-bottom: 28px
}

.article p {
    font-size: 17px;
    color: #40464e;
    margin: 0 0 18px
}

.contact-box {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px
}

.contact-box img {
    height: 360px;
    width: 100%;
    object-fit: cover
}
.contact-form h2{
        margin: 20px 0px 44px;
}
.contact-form {
        display: flex;
    gap: 14px;
    flex-direction: column;
        justify-content: space-between;
}

.contact-form input,
.contact-form textarea {
    padding: 13px;
    border: 1px solid #d9dfe5;
    font: inherit
}
.contact-form textarea{
  min-height: 150px;  
}

.contact-form button {
    padding: 13px;
    background: var(--blue);
    color: #fff;
    border: 0;
    cursor: pointer;
        margin: 30px 0px 0px;
}

.site-foot {
    background: #101820;
    color: #cbd3dc;
    padding: 45px 0 25px;
    margin-top: 0
}

.foot-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 30px
}

.site-foot h3 {
    color: #fff;
    margin-top: 0
}

.copyright {
    border-top: 1px solid #293541;
    margin-top: 28px;
    padding-top: 18px;
    font-size: 13px;
    color: #8c98a4
}

.to-top {
    position: fixed;
    right: 24px;
    bottom: 84px;
    background: #111;
    color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    z-index: 10
}

.mobile-bar {
    display: none
}

.detail-hero {
    height: 420px;
    background: linear-gradient(90deg, #061a2ccc, #061a2c50), url('../images/residence_06_entrance.png') center/cover;
    display: flex;
    align-items: end;
    color: #fff;
    padding-bottom: 54px
}

.detail-hero h1 {
    font-size: 40px;
    margin: 0
}

.pager {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    margin-top: 40px;
    padding-top: 18px;
    color: #667
}

.cta {
    background: #f4f7fa;
    text-align: center;
    padding: 60px 20px
}

.btn {
    display: inline-block;
    padding: 12px 28px;
    background: var(--blue);
    color: #fff;
    border-radius: 2px;
    margin: 8px
}

.btn.gold {
    background: var(--gold)
}

@media(max-width:768px) {
    .site-head {
        height: 58px;
        position: fixed
    }

    .head-inner {
        width: calc(100% - 30px)
    }

    .brand {
        font-size: 13px;
        letter-spacing: 0
    }

    .brand-mark {
        width: 28px;
        height: 28px
    }

    .nav {
        display: none
    }

    .nav.show {
        display: flex;
        position: absolute;
        top: 58px;
        left: 0;
        right: 0;
        background: #050505;
        flex-direction: column;
        gap: 0;
        padding: 8px 15px
    }

    .nav.show a {
        padding: 10px 0;
        border: 0
    }

    .hamb {
        display: block
    }

    .hero {
        min-height: 443px;
        padding: 75px 0 40px
    }

    .hero-copy {
        width: calc(100% - 30px)
    }

    .hero h1 {
        font-size: 38px
    }

    .hero p {
        font-size: 17px
    }

    .section {
        padding: 46px 0
    }

    .wrap {
        width: calc(100% - 30px)
    }

    .section-title {
        font-size: 17px
    }

    .grid-4,
    .grid-3 {
        grid-template-columns: repeat(1, 1fr);
        gap: 16px
    }

    .card img {
        height: 180px
    }

    .split,
    .contact-box {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .split img {
        height: 280px
    }

    .stats {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .banner {
        min-height: 265px;
        padding-top: 58px
    }

    .banner h1 {
        font-size: 32px
    }

    .detail-hero {
        height: 320px;
        padding-bottom: 30px
    }

    .detail-hero h1 {
        font-size: 30px
    }

    .article h1 {
        font-size: 28px
    }

    .article p {
        font-size: 16px
    }

    .foot-grid {
        grid-template-columns:  1fr;
        gap: 18px
    }

    .site-foot {
        padding-bottom: 24px;
       
    }

    .mobile-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 48px;
        background: #fff;
        border-top: 1px solid #ddd;
        z-index: 20;
        justify-content: space-around;
        align-items: center;
        font-size: 12px
    }

    .mobile-bar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.1
    }

    .to-top {
        bottom: 62px;
        right: 15px
    }

    .tabs {
        justify-content: flex-start
    }

    .tabs a {
        padding: 7px 12px;
        font-size: 14px
    }
}

.service-section {
    position: relative;
    background: linear-gradient(90deg, rgba(8, 28, 43, .9), rgba(8, 28, 43, .63)), url('../images/residence_05_balcony.png') center/cover;
    overflow: hidden
}

.service-section .wrap {
    position: relative;
    z-index: 1
}

.service-section .section-title {
    color: #fff
}

.service-section .section-sub {
    color: #d9e1e7
}

.service-heading {
    max-width: 720px;
    margin: 0 auto 38px;
    text-align: center
}

.service-heading .section-title {
    margin-bottom: 8px
}

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

.service-card {
    position: relative;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    min-height: 150px;
    padding: 28px 25px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid #e6ebef;
    overflow: hidden;
    transition: transform .45s cubic-bezier(.2, .75, .25, 1), box-shadow .45s ease, border-color .45s ease
}

.service-card:after {
    content: "";
    position: absolute;
    left: -110%;
    bottom: 0;
    width: 85%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transition: left .6s ease
}

.service-card:hover {
    transform: translateY(-8px) rotate(.35deg);
    box-shadow: 0 18px 35px #1536521c;
    border-color: #d8bd7b
}

.service-card:hover:after {
    left: 120%
}

.service-icon {
    flex: 0 0 47px;
    height: 47px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--gold);
    font-size: 12px;
    letter-spacing: 1px;
    transition: background .35s ease, color .35s ease, transform .35s ease
}

.service-card:hover .service-icon {
    background: var(--gold);
    color: #fff;
    transform: rotate(12deg) scale(1.08)
}

.service-card h3 {
    margin: 0 0 7px;
    font-size: 19px
}

.service-card p {
    margin: 0;
    color: #6c7480;
    font-size: 14px;
    line-height: 1.8
}

.hero {
    background-position: center calc(50% + var(--hero-shift, 0px))
}

.hero-copy {
    animation: heroCopyIn 1.05s .12s both cubic-bezier(.2, .8, .2, 1)
}

.hero h1 span:first-child {
    animation: titleClip .9s .24s both
}

.hero h1 span:last-child {
    animation: titleClip .9s .4s both
}

.hero p {
    animation: heroTextIn .8s .7s both
}

.rule {
    transform-origin: left center;
    animation: ruleGrow .9s .95s both
}

.reveal-heading,
.reveal-item,
.reveal-left,
.reveal-up,
.reveal-right,
.reveal-soft {
    opacity: 0;
    filter: blur(8px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .72, .25, 1), filter .8s ease;
    transition-delay: var(--motion-delay, 0ms)
}

.reveal-heading {
    transform: scale(.94)
}

.reveal-item {
    transform: translate3d(0, 28px, 0) scale(.98)
}

.reveal-left {
    transform: translate3d(-42px, 12px, 0)
}

.reveal-up {
    transform: translate3d(0, 38px, 0)
}

.reveal-right {
    transform: translate3d(42px, 12px, 0)
}

.reveal-soft {
    transform: scale(.9) rotate(-1deg)
}

.service-card:nth-child(4n+2) {
    transform: translate3d(0, 35px, 0) scale(.98)
}

.service-card:nth-child(4n+3) {
    transform: translate3d(35px, 12px, 0) scale(.98)
}

.service-card:nth-child(4n+4) {
    transform: translate3d(-35px, 12px, 0) scale(.98)
}

.reveal-heading.is-visible,
.reveal-item.is-visible,
.reveal-left.is-visible,
.reveal-up.is-visible,
.reveal-right.is-visible,
.reveal-soft.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1) rotate(0)
}

.card img {
    transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .8s ease
}

.card:hover img {
    transform: scale(1.08);
    filter: saturate(1.12)
}

.news-item a {
    transition: color .25s ease, letter-spacing .25s ease
}

.news-item:hover a {
    color: var(--gold);
    letter-spacing: .5px
}

.news-card {
    padding: 0;
    border: 1px solid #e4e8ec;
    background: #fff;
    overflow: hidden
}

.news-thumb {
    width: 100%;
    height: 175px;
    object-fit: cover;
    transition: transform .75s cubic-bezier(.2, .7, .2, 1), filter .75s ease
}

.news-card:hover .news-thumb {
    transform: scale(1.07);
    filter: saturate(1.12)
}

.news-card-body {
    padding: 18px 20px 20px
}

.news-card-body h3 {
    margin: 0 0 3px;
    font-size: 20px;
    transition: color .25s ease
}

.news-card:hover .news-card-body h3 {
    color: var(--gold)
}

.news-card-body time {
    font-size: 13px;
    color: #9a9fa6
}

.news-card-body p {
    margin: 4px 0 0;
        min-height: 50px;
         overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
}

.news-section {
    background: #fbfcfd;
}

.news-section+.site-foot {
    margin-top: 0
}

@keyframes heroCopyIn {
    from {
        opacity: 0;
        transform: translateX(-34px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes titleClip {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0)
    }

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0)
    }
}

@keyframes heroTextIn {
    from {
        opacity: 0;
        transform: translateY(16px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes ruleGrow {
    from {
        transform: scaleX(0);
        opacity: 0
    }

    to {
        transform: scaleX(1);
        opacity: 1
    }
}

@media(max-width:768px) {
    .service-grid {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .service-card {
        min-height: 126px;
        padding: 22px 18px
    }

    .service-card:nth-child(n) {
        transform: translate3d(0, 28px, 0) scale(.98)
    }

    .service-card.is-visible:nth-child(n) {
        transform: none
    }

    .service-card p {
        font-size: 13px
    }

    .hero {
        background-position: center calc(50% + var(--hero-shift, 0px))
    }
}

.service-card.is-visible:hover {
    transform: translateY(-8px) rotate(.35deg)
}

.news-card>a {
    display: block
}

.hero .rule {
    display: none
}

main#top>.section:nth-of-type(3) {
    background: #fff !important;
    padding-top: 92px;
    padding-bottom: 92px
}

main#top>.section:nth-of-type(3) .split {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 84px
}

main#top>.section:nth-of-type(3) .split>img {
    height: 455px;
    box-shadow: 18px 18px 0 #edf1f3;
    transition: transform .65s ease, box-shadow .65s ease
}

main#top>.section:nth-of-type(3) .split>img:hover {
    transform: translate(-6px, -6px);
    box-shadow: 24px 24px 0 #dfe7eb
}

main#top>.section:nth-of-type(3) .split>div {
    position: relative;
    padding: 22px 0 22px 34px;
    border-left: 3px solid var(--gold)
}

main#top>.section:nth-of-type(3) .split h2 {
    font-size: 36px;
    line-height: 1.3;
    margin: 0 0 20px;
    color: #111
}

main#top>.section:nth-of-type(3) .split p {
    max-width: 490px;
    color: #5f6872;
    font-size: 16px;
    line-height: 2;
    margin: 0 0 24px
}

main#top>.section:nth-of-type(3) .split .btn {
    margin: 0;
    padding: 12px 30px;
    transition: transform .3s ease, box-shadow .3s ease
}

main#top>.section:nth-of-type(3) .split .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 18px #143b5a2b
}

@media(max-width:768px) {
    main#top>.section:nth-of-type(3) {
        padding-top: 56px;
        padding-bottom: 58px
    }

    main#top>.section:nth-of-type(3) .split {
        grid-template-columns: 1fr;
        gap: 34px
    }

    main#top>.section:nth-of-type(3) .split>img {
        height: 280px;
        box-shadow: 10px 10px 0 #edf1f3
    }

    main#top>.section:nth-of-type(3) .split>div {
        padding: 8px 0 0 20px;
        border-left-width: 2px
    }

    main#top>.section:nth-of-type(3) .split h2 {
        font-size: 29px;
        margin-bottom: 14px
    }

    main#top>.section:nth-of-type(3) .split p {
        font-size: 15px;
        line-height: 1.85;
        margin-bottom: 18px
    }
}

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

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

    .reveal-heading,
    .reveal-item,
    .reveal-left,
    .reveal-up,
    .reveal-right,
    .reveal-soft {
        opacity: 1;
        filter: none;
        transform: none
    }
}

.case-section {
    background: #fff;
    padding: 88px 0 96px
}

.case-section .wrap {
    width: min(1400px, calc(100% - 48px))
}

.case-heading {
    margin-bottom: 30px
}

.case-heading .section-title,
.case-heading .section-sub {
    text-align: left
}

.case-heading .section-title {
    font-size: 34px;
    line-height: 1.2;
    margin-bottom: 6px
}

.case-heading .section-sub {
    font-size: 13px;
    margin-bottom: 0
}

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

.case-tile {
    position: relative;
    aspect-ratio: 1.62;
    overflow: hidden;
    border-radius: 9px;
    background: #cad5d9
}

.case-tile a,
.case-tile img,
.case-tint {
    position: absolute;
    inset: 0
}

.case-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s cubic-bezier(.2, .7, .2, 1), filter .65s ease
}

.case-tint {
    z-index: 1;
    background: linear-gradient(90deg, rgba(40, 177, 139, .62), rgba(123, 220, 194, .5));
    transition: opacity .35s ease
}

.case-tile-2 .case-tint {
    background: linear-gradient(90deg, rgba(48, 57, 66, .68), rgba(109, 119, 127, .52))
}

.case-tile-3 .case-tint {
    background: linear-gradient(90deg, rgba(255, 126, 44, .62), rgba(255, 181, 92, .5))
}

.case-tile-4 .case-tint {
    background: linear-gradient(90deg, rgba(59, 188, 211, .55), rgba(123, 212, 232, .43))
}

.case-tile-5 .case-tint {
    background: linear-gradient(90deg, rgba(229, 93, 91, .58), rgba(248, 145, 154, .47))
}

.case-tile-6 .case-tint {
    background: linear-gradient(90deg, rgba(84, 99, 213, .57), rgba(139, 166, 239, .45))
}

.case-copy {
    position: absolute;
    z-index: 2;
    inset: 0;
    padding: 19px 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.case-kind {
    font-size: 10px;
    line-height: 1;
    letter-spacing: 1.5px;
    font-weight: 700;
    opacity: .84
}

.case-copy h3 {
    margin: 8px 0 0;
    font-size: 20px;
    line-height: 1.25;
    text-shadow: 0 1px 8px #0002
}

.case-link {
    margin-top: auto;
    padding: 5px 11px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .2);
    font-size: 10px;
    font-weight: 700;
    backdrop-filter: blur(3px)
}

.case-tile:hover img {
    transform: scale(1.08);
    filter: saturate(1.08)
}

.case-tile:hover .case-tint {
    opacity: .82
}

.case-tile:hover .case-link {
    background: #fff;
    color: #263542
}

main#top>.section:nth-of-type(3) .split>div {
    padding-left: 0;
    border-left: 0
}

@media(max-width:900px) {
    .contact-form h2 {
    margin: 20px 0px 18px;
        gap: 9px;
}
    .case-showcase {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:560px) {
    .case-section {
        padding: 54px 0 60px
    }

    .case-heading {
        margin-bottom: 22px
    }

    .case-heading .section-title {
        font-size: 28px
    }

    .case-showcase {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .case-tile {
        aspect-ratio: 1.75
    }

    .case-copy {
        padding: 16px
    }

    .case-copy h3 {
        font-size: 18px
    }

    main#top>.section:nth-of-type(3) .split>div {
        padding-left: 0
    }
}

.case-copy p {
    max-width: 85%;
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .88);
    text-shadow: 0 1px 6px #0002
}

.nav a {
    position: relative;
    padding: 9px 14px;
    border: 0;
    border-radius: 4px;
    opacity: .82;
    transition: color .25s ease, background .25s ease, opacity .25s ease
}

.nav a:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--gold);
    transform: translateX(-50%);
    transition: width .25s ease
}

.nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
    opacity: 1
}

.nav a:hover:after {
    width: 18px
}

.nav a.active {
    color: var(--gold);
    background: rgba(212, 162, 76, .12);
    opacity: 1
}

.nav a.active:after {
    width: 24px
}

@media(max-width:768px) {
    .nav.show {
        padding: 10px 15px 14px
    }

    .nav.show a {
        padding: 11px 14px;
        border-radius: 4px
    }

    .nav.show a:after {
        display: none
    }

    .nav.show a.active {
        background: rgba(212, 162, 76, .16);
        box-shadow: inset 3px 0 0 var(--gold)
    }

    .case-copy p {
        font-size: 11px
    }
}

.case-tile .case-tint {
    opacity: .64
}

.case-tile:hover .case-tint {
    opacity: .76
}

.about-heading {
    margin-bottom: 42px
}

.about-heading span {
    display: block;
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    margin-bottom: 5px
}

.about-heading h2 {
    margin: 0;
    color: var(--blue);
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: 2px
}

.about-section .split>div h2 {
    font-size: 34px
}

.service-icon {
    position: relative;
    z-index: 0;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    display: grid;
    place-items: center;
    align-self: flex-start;
    overflow: visible;
    background: rgba(212, 162, 76, .04)
}

.service-number {
    display: block;
    position: relative;
    z-index: 2;
    visibility: visible;
    opacity: 1;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1px;
    color: inherit;
    font-variant-numeric: tabular-nums
}

.service-icon:before {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(212, 162, 76, .28);
    border-radius: 50%;
    transform: rotate(-22deg);
    pointer-events: none
}

.service-icon:after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(212, 162, 76, .48);
    border-radius: 50%;
    pointer-events: none
}

.service-card:hover .service-icon:before {
    transform: rotate(22deg) scale(1.06)
}

@media(max-width:768px) {
    .about-heading {
        margin-bottom: 28px
    }

    .about-heading h2 {
        font-size: 34px
    }

    .about-heading span {
        font-size: 10px;
        letter-spacing: 3px
    }

    .about-section .split>div h2 {
        font-size: 29px
    }
}

/* Keep default copy monochrome; accent colors are reserved for interaction and decoration. */
:root {
    --ink: #111;
    --muted: #222
}

body {
    color: #111
}

.section-title,
.card h3,
.news-card-body h3,
.split h2,
.about-heading h2,
.article h1,
.article h2,
.service-card h3 {
    color: #111;
     overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
}

.section-sub,
.muted,
.article p,
.article-meta,
.pager,
.stat small,
.news-card-body time,
.news-item time,
.service-card p {
    color: #222
}

.hero,
.banner,
.detail-hero,
.site-foot,
.service-section .section-title,
.service-section .section-sub {
    color: #fff
}

.crumb,
.copyright,
.site-foot p {
    color: #fff
}

.nav a.active {
    color: #fff;
    border-color: #fff
}

.service-icon {
    color: #111;
    border-color: #111;
    background: transparent
}

.service-icon svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.service-icon:before {
    border-color: rgba(17, 17, 17, .25)
}

.service-icon:after {
    border-color: rgba(17, 17, 17, .4)
}

.service-card:hover .service-icon {
    color: #fff;
    border-color: var(--gold);
    background: var(--gold)
}

.service-card:hover .service-icon:before,
.service-card:hover .service-icon:after {
    border-color: rgba(255, 255, 255, .62)
}

.stat strong,
.eyebrow,
.about-heading span {
    color: #111
}

.service-number {
    display: none
}

.about-heading h2,
.about-section .split>div h2 {
    color: #111
}

.side-toolbar {
    position: fixed;
    right: 26px;
    top: 50%;
    z-index: 15;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: translateY(-50%)
}

.side-toolbar a {
    width: 54px;
    height: 54px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #111;
    font-size: 19px;
    line-height: 1;
    border: 1px solid #111;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
    transition: background .28s ease, color .28s ease, border-color .28s ease, transform .28s ease, box-shadow .28s ease
}
.side-toolbar a span{
        display: flex;
    align-items: center;
    justify-content: center;
}
.side-toolbar a span img{
    width: 50%;
}
.side-toolbar a:last-child {
    border-radius: 50%
}

.side-toolbar b {
    position: absolute;
    top: 50%;
    right: calc(100% + 12px);
    transform: translateY(-50%) scale(.92);
    padding: 8px 14px;
    background: #111;
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
    border-radius: 7px;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease
}
.xqnr{
    
}
.xqnr video,
.xqnr img{
    max-width: 100%;
}
.service-icon img{
       width: 50%; 
}
/* 分页容器整体布局 */

.page1{
    margin: 40px 0px 20px;
}
.pagination.page {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	/* 按钮之间的间距 */
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: sans-serif;
}

/* 所有按钮/页码通用样式 */
.pagination.page>* {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 2px 10px;
	border: 2px solid #ddd;
	border-radius: 8px;
	background-color: #fff;
	color: #333;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
	box-sizing: border-box;
}

/* 数字页码单独调整宽度 */
.pagination.page .page-number {
	padding: 2px 10px;
}

/* 当前激活页（蓝色背景、白色文字） */
.pagination.page .active.page-number {
	background-color:#143b5a;
	border-color: #143b5a;
	color: #fff;
}

/* 隐藏 SVG 箭头图标，替换为文字 */
.pagination.page .prev-page svg,
.pagination.page .next-page svg {
	display: none;
}

/* 给上一页/下一页加上文字 */
.pagination.page .prev-page::before {
	content: "上一页";
}

.pagination.page .next-page::after {
	content: "下一页";
}

/* 省略号样式（如果后续要加） */
.pagination.page .ellipsis {
	border: none;
	background: transparent;
	cursor: default;
}

/*  hover 交互效果 */
.pagination.page>*:hover:not(.active.page-number):not(.ellipsis) {
	border-color: #143b5a;
	color: #143b5a;
}
.side-toolbar b:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #111
}

.side-toolbar a:hover {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(212, 162, 76, .3)
}

.side-toolbar a:hover:before {
    transform: rotate(22deg) scale(1.06);
    border-color: rgba(212, 162, 76, .5)
}

.side-toolbar a:hover:after {
    border-color: rgba(255, 255, 255, .6)
}

.side-toolbar a:hover b {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
    background: var(--gold)
}

.side-toolbar a:hover b:after {
    border-left-color: var(--gold)
}

.side-toolbar a:before {
    content: '';
    position: absolute;
    inset: -6px;
    border: 1px solid rgba(17, 17, 17, .2);
    border-radius: 50%;
    transform: rotate(-22deg);
    pointer-events: none;
    transition: transform .35s ease
}

.side-toolbar a:after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(17, 17, 17, .36);
    border-radius: 50%;
    pointer-events: none;
    transition: border-color .28s ease, transform .28s ease
}

.side-toolbar a svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .28s ease
}

.side-toolbar a:hover svg {
    transform: scale(1.15)
}

@media(max-width:768px) {
    .side-toolbar {
        display: none
    }
}

.case-grid {
    gap: 26px
}

.case-grid .card {
    position: relative;
    border: 1px solid #e7eaee;
    background: #161b21;
    overflow: hidden;
    transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease
}

.case-grid .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
    border-color: #d8bd7b
}

.case-grid .card img {
    width: 100%;
    height: 262px;
    object-fit: cover;
    display: block;
    filter: saturate(.92);
    transition: transform .6s ease, filter .6s ease
}

.case-grid .card:hover img {
    transform: scale(1.07);
    filter: saturate(1.08)
}

.case-grid .card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 52px 22px 18px;
    background: linear-gradient(0deg, rgba(8, 12, 16, .88), rgba(8, 12, 16, .28) 58%, transparent);
    color: #fff
}

.case-grid .card h3 {
    font-size: 20px;
    margin: 0 0 5px;
    color: #fff;
    letter-spacing: .5px
}

.case-grid .card .muted {
    font-size: 13px;
    color: #c2c9d0
}

@media(max-width:900px) {
    .case-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:560px) {
    .case-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:900px) {
    .grid-6 {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:560px) {
    .grid-6 {
        grid-template-columns: 1fr
    }
}