:root {
    --red: #ee3b3b;
    --red-ink: #d42e2e;
    --red-dark: #b32222;
    --blush: #fdeeed;
    --ink: #272b33;
    --ink-2: #313640;
    --white: #fff;
    --paper: #f8f5f3;
    --line: #e9e4e0;
    --text: #3b4049;
    --muted: #6b707a;
    --head: 'Oswald', 'Arial Narrow', sans-serif;
    --body: 'Outfit', system-ui, sans-serif;
    --wrap: 1200px;
    --nav-h: 76px
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-h)
}

body {
    font-family: var(--body);
    line-height: 1.7;
    color: var(--text);
    background: var(--white);
    -webkit-font-smoothing: antialiased
}

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

a {
    color: inherit
}

ul {
    list-style: none
}

:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px
}

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

.section {
    padding: 104px 0
}

.section.paper {
    background: var(--paper)
}

.section.dark {
    background-color: var(--ink);
    color: #d6d6d6;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 56px 56px
}

h1,
h2,
h3,
h4 {
    font-family: var(--head);
    font-weight: 600;
    line-height: 1.15;
    color: var(--ink);
    letter-spacing: .3px
}

h1,
h2 {
    text-transform: uppercase
}

.dark h2,
.dark h3,
.dark h4 {
    color: var(--white)
}

h2 {
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.1
}

h3 {
    font-size: 1.3rem
}

.sec-head {
    margin-bottom: 56px
}

.sec-head .mark {
    display: block;
    width: 56px;
    height: 6px;
    background: var(--red);
    margin-bottom: 22px
}

.sec-head p {
    max-width: 60ch;
    margin-top: 16px;
    color: var(--muted)
}

.dark .sec-head p {
    color: #b4b9c2
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font: 600 .95rem var(--body);
    text-decoration: none;
    padding: 14px 28px;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: background .2s, color .2s
}

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

.btn-red:hover {
    background: var(--red-dark)
}

.btn-line {
    border-color: var(--ink);
    color: var(--ink)
}

.btn-line:hover {
    background: var(--ink);
    color: #fff
}

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

.btn-white:hover {
    background: var(--paper)
}

.btn-ghost {
    border-color: #fff;
    color: #fff
}

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

/* nav */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--line)
}

.nav::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--red)
}

.nav-in {
    height: calc(var(--nav-h) - 4px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none
}

.brand svg {
    height: 44px;
    width: auto
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1
}

.brand-name {
    font: 700 1.3rem var(--head);
    letter-spacing: .6px;
    color: var(--red-ink);
    white-space: nowrap
}

.brand-sub {
    font-size: .78rem;
    font-weight: 500;
    color: var(--ink);
    margin-top: 3px
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 28px
}

.menu {
    display: flex;
    align-items: center;
    gap: 2px
}

.menu a {
    white-space: nowrap;
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 12px;
    color: var(--ink);
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s
}

.menu a:hover,
.menu a.active {
    color: var(--red-ink);
    border-bottom-color: var(--red)
}

.nav .btn {
    padding: 11px 22px;
    font-size: .9rem;
    white-space: nowrap
}

.burger {
    display: none;
    background: none;
    border: 2px solid var(--ink);
    border-radius: 4px;
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
    color: var(--ink);
    cursor: pointer
}

@media(max-width:1100px) {
    .menu a {
        padding: 8px 8px;
        font-size: .9rem
    }

    .nav-right {
        gap: 14px
    }
}

@media(max-width:1199px) {
    .burger {
        display: inline-flex;
        align-items: center;
        justify-content: center
    }

    .nav-right {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--line);
        padding: 12px 24px 24px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 12px
    }

    .nav-right.open {
        display: flex
    }

    .menu {
        flex-direction: column;
        align-items: stretch
    }

    .menu a {
        padding: 12px 0;
        border-bottom: 1px solid var(--line)
    }

    .nav .btn {
        width: 100%
    }
}



/* hero */
.hero {
    position: relative;
    background-color: #fcf9f7;
    padding: 44px 0 156px;
    overflow: hidden;
    background-image: linear-gradient(rgba(39, 43, 51, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 43, 51, .055) 1px, transparent 1px);
    background-size: 56px 56px
}

.hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: var(--red)
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 40px;
    align-items: center
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--ink);
    border: 1px solid var(--line);
    background: #fff;
    padding: 8px 18px;
    border-radius: 999px;
    margin-bottom: 28px
}

.hero-badge i,
.hero-points i {
    color: var(--red-ink)
}

.hero h1 {
    font-size: clamp(2.5rem, 5vw, 4.4rem);
    font-weight: 700;
    line-height: 1.04;
    margin-bottom: 26px
}

.hero h1 span {
    display: block
}

.hero h1 .r {
    color: var(--red-ink)
}

.hero-sub {
    font-size: 1.1rem;
    max-width: 50ch;
    color: var(--muted);
    margin-bottom: 34px
}

.hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 38px
}

.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
    font-size: .95rem
}

.hero-points li {
    display: flex;
    align-items: center;
    gap: 8px
}

.hero-art {
    width: 100%;
    max-width: 520px;
    margin-inline: auto
}

.hero-art svg {
    width: 100%;
    height: auto;
    display: block
}

.stats-wrap {
    position: relative;
    z-index: 2;
    margin-top: -76px
}

.stats-card {
    background: #fff;
    border-top: 5px solid var(--red);
    box-shadow: 0 22px 56px rgba(39, 43, 51, .12);
    display: grid;
    grid-template-columns: repeat(4, 1fr)
}

.stat {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 32px 28px
}

.stat+.stat {
    border-left: 1px solid var(--line)
}

.stat .ico {
    width: 54px;
    height: 54px;
    margin: 0;
    flex: none
}

.stat b {
    display: block;
    font: 700 2.4rem/1 var(--head);
    color: var(--ink)
}

.stat b i {
    font-style: normal;
    color: var(--red-ink)
}

.stat small {
    font-size: .9rem;
    color: var(--muted)
}

@media(prefers-reduced-motion:no-preference) {
    .hero-copy {
        animation: rise .8s cubic-bezier(.2, .7, .2, 1) both
    }

    @keyframes rise {
        from {
            opacity: 0;
            transform: translateY(24px)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    .draw {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: draw 1.8s .25s cubic-bezier(.5, 0, .2, 1) forwards
    }

    @keyframes draw {
        to {
            stroke-dashoffset: 0
        }
    }

    .fade {
        opacity: 0;
        animation: fadein .6s forwards
    }

    @keyframes fadein {
        to {
            opacity: 1
        }
    }
}

@media(max-width:991px) {
    .hero {
        padding: 36px 0 140px
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 48px
    }

    .hero-art {
        max-width: 420px
    }

    .stats-card {
        grid-template-columns: 1fr 1fr
    }

    .stat:nth-child(3) {
        border-left: none
    }

    .stat:nth-child(n+3) {
        border-top: 1px solid var(--line)
    }
}

@media(max-width:480px) {
    .stat {
        padding: 22px 14px;
        gap: 10px
    }

    .stat .ico {
        width: 42px;
        height: 42px;
        font-size: 1.1rem
    }

    .stat b {
        font-size: 1.8rem
    }
}

/* marquee */
.strip {
    background: var(--blush);
    color: var(--red-dark);
    border-block: 1px solid #f6d3d1;
    overflow: hidden;
    white-space: nowrap;
    padding: 12px 0;
    margin-top: 72px
}

.strip-track {
    display: inline-flex;
    animation: slide 36s linear infinite
}

.strip span {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    padding-right: 28px;
    font: 600 .7rem var(--head);
    letter-spacing: 1.5px;
    text-transform: uppercase
}

.strip span::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--red)
}

@keyframes slide {
    to {
        transform: translateX(-50%)
    }
}

@media(prefers-reduced-motion:reduce) {
    .strip-track {
        animation: none
    }
}

/* icons & cards */
.ico {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    background: var(--blush);
    color: var(--red-ink);
    font-size: 1.5rem;
    border-radius: 8px;
    margin-bottom: 26px;
    transition: background .3s, color .3s
}

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

.svc {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    padding: 38px 32px 36px;
    transition: transform .3s, box-shadow .3s, border-color .3s
}

.svc::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s
}

.svc:hover {
    border-color: #f0b9b7;
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(39, 43, 51, .1)
}

.svc:hover .ico {
    background: var(--red-ink);
    color: #fff
}

.svc:hover::after {
    transform: scaleX(1)
}

.svc h3 {
    margin-bottom: 12px
}

.svc p {
    font-size: .96rem;
    color: var(--muted)
}

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

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

/* tentang */
.about-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 80px;
    align-items: center
}

.about-img {
    position: relative;
    background: #151515
}

.about-img img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover
}

.about-img::before {
    content: '';
    position: absolute;
    top: -16px;
    left: -16px;
    width: 55%;
    height: 55%;
    border-top: 6px solid var(--red);
    border-left: 6px solid var(--red);
    pointer-events: none
}

.about-badge {
    position: absolute;
    right: -24px;
    bottom: 32px;
    background: var(--red-ink);
    color: #fff;
    padding: 20px 28px;
    border-radius: 4px
}

.about-badge b {
    display: block;
    font: 700 2.8rem/1 var(--head)
}

.about-badge span {
    font-size: .9rem;
    font-weight: 600
}

.about-copy p+p {
    margin-top: 16px
}

.vm {
    display: grid;
    gap: 20px;
    margin-top: 32px
}

.vm-card {
    border-left: 4px solid var(--red);
    background: var(--paper);
    padding: 22px 24px;
    border-radius: 0 8px 8px 0
}

.vm-card h3 {
    margin-bottom: 8px
}

.vm-card ol {
    padding-left: 20px;
    font-size: .96rem
}

.vm-card li+li {
    margin-top: 6px
}

@media(max-width:991px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 56px
    }

    .about-img {
        max-width: 480px
    }

    .about-badge {
        right: 16px
    }
}

/* legalitas */
.legal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px
}

.legal-card {
    border: 1px solid #3a404a;
    padding: 32px 28px
}

.legal-card .ico {
    background: var(--red-ink);
    color: #fff
}

.legal-card h3 {
    margin-bottom: 8px
}

.legal-card p {
    font-size: .94rem;
    color: #b4b9c2
}

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

/* material */
.mat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

.mat {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--line);
    padding: 22px 20px
}

.mat i {
    color: var(--red-ink);
    font-size: 1.3rem;
    line-height: 1.4
}

.mat span {
    font-weight: 500;
    color: var(--ink);
    line-height: 1.45
}

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

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

/* mengapa */
.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px
}

.why {
    padding: 28px 24px;
    border-top: 4px solid var(--red);
    background: var(--paper)
}

.why i {
    font-size: 1.6rem;
    color: var(--red-ink);
    display: block;
    margin-bottom: 14px
}

.why h3 {
    font-size: 1.15rem;
    margin-bottom: 8px
}

.why p {
    font-size: .93rem;
    color: var(--muted)
}

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

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

/* proses */
.proc {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    position: relative
}

.proc::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: #eadfdb
}

.step {
    position: relative;
    text-align: center;
    padding: 0 8px
}

.step-n {
    width: 58px;
    height: 58px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 3px solid var(--red-ink);
    border-radius: 50%;
    font: 700 1.4rem var(--head);
    color: var(--red-ink)
}

.step h3 {
    font-size: 1.15rem;
    margin-bottom: 8px
}

.step p {
    font-size: .9rem;
    color: var(--muted)
}

@media(max-width:991px) {
    .proc {
        grid-template-columns: 1fr;
        gap: 0
    }

    .proc::before {
        top: 0;
        bottom: 0;
        left: 28px;
        right: auto;
        width: 3px;
        height: auto
    }

    .step {
        display: grid;
        grid-template-columns: 58px 1fr;
        gap: 0 22px;
        text-align: left;
        padding: 0 0 32px
    }

    .step:last-child {
        padding-bottom: 0
    }

    .step-n {
        grid-row: span 2;
        margin: 0
    }
}

/* cta */
.cta {
    background: #c92f2f;
    color: #fff;
    padding: 104px 0;
    position: relative;
    overflow: hidden
}

.cta::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 12px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .4) 0 2px, transparent 2px 24px)
}

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

.cta h2 {
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    line-height: 1.05;
    font-weight: 700;
    margin-bottom: 20px
}

.cta-lead {
    font-size: 1.15rem;
    max-width: 54ch;
    margin-bottom: 36px;
    color: rgba(255, 255, 255, .92)
}

.cta-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px
}

.cta-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 72px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
    overflow: hidden
}

.cta-cell {
    padding: 28px 26px;
    border-right: 1px solid var(--line)
}

.cta-cell:last-child {
    border-right: none
}

.cta-cell i {
    font-size: 1.4rem;
    color: var(--red-ink);
    display: block;
    margin-bottom: 10px
}

.cta-cell small {
    display: block;
    font-size: .85rem;
    color: var(--muted)
}

.cta-cell strong {
    font-weight: 600;
    color: var(--ink);
    word-break: break-word
}

.cta-cell a {
    text-decoration: none
}

@media(max-width:991px) {
    .cta-info {
        grid-template-columns: 1fr 1fr
    }

    .cta-cell:nth-child(2) {
        border-right: none
    }

    .cta-cell:nth-child(n+3) {
        border-top: 1px solid var(--line)
    }
}

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

    .cta-cell {
        border-right: none
    }

    .cta-cell+.cta-cell {
        border-top: 1px solid var(--line)
    }
}

/* footer */
footer {
    background: #20242b;
    color: #b0b5be;
    padding: 72px 0 28px
}

.foot-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
    gap: 48px
}

.logo-plate {
    background: #fff;
    padding: 12px 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    border-bottom: 4px solid var(--red);
    margin-bottom: 22px
}

.logo-plate svg {
    height: 40px;
    width: auto
}

.logo-plate b {
    font: 700 1.05rem var(--head);
    color: var(--red-ink);
    line-height: 1.1
}

footer p {
    font-size: .94rem;
    max-width: 36ch
}

footer h4 {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 18px;
    letter-spacing: 1px
}

footer li {
    margin-bottom: 10px;
    font-size: .94rem
}

footer li a {
    text-decoration: none
}

footer li a:hover {
    color: var(--red)
}

footer li i {
    color: var(--red);
    margin-right: 10px
}

.foot-bottom {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid #3a404a;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .85rem;
    color: #7a7a7a
}

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

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

.wa {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 90;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    background: var(--red-ink);
    color: #fff;
    font-size: 1.6rem;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
    text-decoration: none;
    transition: background .2s
}

.wa:hover {
    background: var(--ink)
}

@media(max-width:767px) {

    .section,
    .cta {
        padding: 72px 0
    }

    .sec-head {
        margin-bottom: 40px
    }
}

/* proyek */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px
}

.filters button {
    font: 600 .9rem var(--body);
    padding: 10px 22px;
    border: 2px solid #d9d2cd;
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s
}

.filters button:hover {
    border-color: var(--red-ink);
    color: var(--red-ink)
}

.filters button[aria-pressed="true"] {
    background: var(--red-ink);
    color: #fff;
    border-color: var(--red-ink)
}

.proj-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px
}

.proj,
.post {
    background: #fff;
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    transition: transform .3s, box-shadow .3s, border-color .3s
}

.proj:hover,
.post:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(39, 43, 51, .1);
    border-color: #f0b9b7
}

.proj[hidden] {
    display: none
}

.proj-img,
.post-img,
.gal figure {
    position: relative;
    overflow: hidden;
    background-color: #151515
}

.proj-img {
    aspect-ratio: 4/3
}

.post-img {
    aspect-ratio: 16/10
}

.proj-img img,
.post-img img,
.gal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s
}

.proj:hover img,
.post:hover img,
.gal figure:hover img {
    transform: scale(1.05)
}

.proj-year {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--red-ink);
    color: #fff;
    font: 600 1rem var(--head);
    padding: 4px 14px
}

.proj-body {
    padding: 22px 22px 26px;
    border-top: 1px solid var(--line);
    flex: 1
}

.proj-cat {
    font-size: .85rem;
    font-weight: 600;
    color: var(--red-ink);
    margin-bottom: 6px
}

.proj-body h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
    line-height: 1.25
}

.proj-body p:nth-of-type(2) {
    font-size: .9rem;
    color: var(--muted)
}

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

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

/* tentang gelap */
.why2-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 80px;
    align-items: center
}

.why2-img {
    position: relative;
    background: #151515
}

.why2-img img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover
}

.why2-img::before {
    content: '';
    position: absolute;
    top: -16px;
    left: -16px;
    width: 55%;
    height: 55%;
    border-top: 6px solid var(--red);
    border-left: 6px solid var(--red);
    pointer-events: none
}

.why-item {
    display: flex;
    gap: 18px;
    padding: 22px 0;
    border-top: 1px solid #3a404a
}

.why-item:last-child {
    border-bottom: 1px solid #3a404a
}

.why-ico {
    flex: none;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: var(--red-ink);
    color: #fff;
    font-size: 1.25rem;
    border-radius: 8px
}

.why-item h4 {
    font-size: 1.1rem;
    margin-bottom: 4px
}

.why-item p {
    font-size: .94rem;
    color: #b4b9c2
}

.why-cta {
    margin-top: 36px
}

.sub-head {
    margin: 56px 0 28px;
    font-size: 1.6rem
}

@media(max-width:991px) {
    .why2-grid {
        grid-template-columns: 1fr;
        gap: 56px
    }

    .why2-img {
        max-width: 480px
    }
}

/* galeri */
.gal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.gal figure {
    aspect-ratio: 4/3
}

.gal figcaption {
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--ink);
    color: #fff;
    font-size: .85rem;
    font-weight: 500;
    padding: 8px 16px;
    border-top: 3px solid var(--red)
}

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

@media(max-width:560px) {
    .gal {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .gal figcaption {
        font-size: .72rem;
        padding: 5px 10px;
        border-top-width: 2px
    }
}

/* testimoni */
.testi-grid,
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.testi {
    position: relative;
    overflow: hidden;
    background: var(--paper);
    border-left: 4px solid var(--red);
    padding: 32px 30px;
    border-radius: 0 8px 8px 0;
    display: flex;
    flex-direction: column
}

.testi::before {
    content: '\201C';
    position: absolute;
    top: -18px;
    right: 22px;
    font: 8rem/1 var(--head);
    color: var(--red);
    opacity: .22
}

.stars {
    color: var(--red-ink);
    letter-spacing: 3px;
    margin-bottom: 14px
}

.testi p {
    margin-bottom: 26px;
    flex: 1
}

.who {
    display: flex;
    align-items: center;
    gap: 14px
}

.who img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: #1c1c1c
}

.who b {
    display: block;
    font: 600 1.05rem var(--head);
    color: var(--ink);
    line-height: 1.2
}

.who span {
    font-size: .85rem;
    color: var(--muted)
}

/* blog */
.post-tag {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--ink);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    padding: 5px 14px;
    border-bottom: 3px solid var(--red)
}

.post-body {
    padding: 26px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.post-meta {
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: 8px
}

.post-body h3 {
    font-size: 1.2rem;
    line-height: 1.3;
    margin-bottom: 12px
}

.post-body p:not(.post-meta) {
    font-size: .93rem;
    color: var(--muted);
    flex: 1;
    margin-bottom: 20px
}

.more {
    font-weight: 600;
    font-size: .93rem;
    color: var(--red-ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.more:hover {
    text-decoration: underline
}

@media(max-width:991px) {

    .testi-grid,
    .blog-grid {
        grid-template-columns: 1fr
    }
}

.head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    flex-wrap: wrap
}

.soc {
    display: flex;
    gap: 8px;
    margin-top: 24px
}

.soc a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid #444a55;
    color: #fff;
    text-decoration: none;
    border-radius: 4px
}

.soc a:hover {
    background: var(--red-ink);
    border-color: var(--red-ink)
}

.legal {
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid #3a404a;
    font-size: .82rem;
    color: #8a8a8a
}

/* tombol tambahan */
.btn-black {
    background: var(--ink);
    color: #fff
}

.btn-black:hover {
    background: var(--ink-2)
}

.dark .btn-line {
    border-color: #fff;
    color: #fff
}

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

.btn-sm {
    padding: 10px 20px;
    font-size: .88rem
}

.proj-body {
    display: flex;
    flex-direction: column
}

.proj-body .btn {
    margin-top: 18px;
    align-self: flex-start
}

/* placeholder grid gambar */
.proj-img,
.post-img,
.about-img,
.why2-img {
    background-color: #151515;
    background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 28px 28px
}

.cta-deco {
    position: absolute;
    right: -50px;
    bottom: -40px;
    width: min(560px, 62vw);
    opacity: .16;
    pointer-events: none
}

.testi:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .08)
}

.testi {
    transition: transform .3s, box-shadow .3s
}

/* visi & misi */
.vm2 {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 24px
}

.vm2-card {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 5px solid var(--red);
    padding: 40px 36px
}

.vm2-card.visi {
    background: var(--ink);
    border-color: var(--ink);
    border-top-color: var(--red);
    color: #d6d6d6
}

.vm2-card.visi h3 {
    color: #fff
}

.vm2-card .ico {
    margin-bottom: 20px
}

.vm2-card.visi .ico {
    background: var(--red-ink);
    color: #fff
}

.vm2-card h3 {
    font-size: 1.6rem;
    margin-bottom: 16px;
    text-transform: uppercase
}

.misi {
    counter-reset: m;
    display: grid;
    gap: 18px
}

.misi li {
    counter-increment: m;
    display: flex;
    gap: 16px;
    align-items: flex-start
}

.misi li::before {
    content: counter(m);
    flex: none;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 3px solid var(--red-ink);
    border-radius: 50%;
    font: 700 1rem var(--head);
    color: var(--red-ink)
}

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

/* galeri fslightbox */
.gal a {
    display: block;
    height: 100%;
    cursor: zoom-in
}

.gal figcaption {
    pointer-events: none
}

.gal figure::after {
    content: '\F52A';
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: rgba(39, 43, 51, .8);
    color: #fff;
    border-radius: 4px;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none
}

.gal figure:hover::after,
.gal a:focus-visible+figcaption {
    opacity: 1
}

/* slick */
.testi-slider,
.blog-slider {
    margin: 0 -12px
}

.slick-track {
    display: flex
}

.slick-track .sl {
    height: auto;
    padding: 0 12px
}

.sl>.testi,
.sl>.post {
    height: 100%
}

.slick-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
    list-style: none
}

.slick-dots button {
    font-size: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--red-ink);
    background: transparent;
    cursor: pointer;
    padding: 0
}

.slick-dots .slick-active button {
    background: var(--red-ink)
}

.sl-ctrl {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap
}

.sl-arrows {
    display: flex;
    gap: 8px
}

.sl-arrow {
    width: 48px;
    height: 48px;
    border: 2px solid var(--ink);
    background: #fff;
    color: var(--ink);
    border-radius: 4px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s
}

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

/* navbar dirapikan */
.nav .wrap {
    width: min(1320px, 100% - 48px)
}

.nav-in {
    gap: 20px
}

.brand {
    flex: none
}

.brand-name {
    font-size: 1.25rem
}

.brand-sub {
    font-size: .72rem;
    letter-spacing: .2px
}

.nav-right {
    gap: 20px;
    margin-left: auto
}

.menu {
    gap: 0
}

.menu a {
    font-size: .92rem;
    padding: 8px 11px
}

.nav .btn {
    padding: 10px 20px;
    font-size: .88rem
}

@media(max-width:1199px) {
    .nav-right {
        margin-left: 0;
        max-height: calc(100vh - var(--nav-h));
        overflow-y: auto
    }

    .menu a {
        font-size: 1rem;
        padding: 12px 0
    }
}

@media(max-width:1199px) {
    .nav .wrap {
        width: min(var(--wrap), 100% - 48px)
    }
}

/* gambar tentang kami diperkecil */
@media(min-width:992px) {
    .about-grid {
        grid-template-columns: 340px 1fr;
        gap: 64px;
        align-items: start
    }
}

.about-img {
    max-width: 340px
}

.about-img img {
    aspect-ratio: 1/1
}

.about-badge {
    right: -18px;
    bottom: 20px;
    padding: 14px 20px
}

.about-badge b {
    font-size: 2.2rem
}

@media(max-width:991px) {
    .about-img {
        max-width: 300px
    }
}

/* tentang kami: gambar mengikuti tinggi teks */
.about-img {
    max-width: none;
    position: relative;
    min-height: 320px;
    height: 100%
}

.about-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover
}

@media(min-width:992px) {
    .about-grid {
        grid-template-columns: 5fr 7fr;
        gap: 64px;
        align-items: stretch
    }
}

@media(max-width:991px) {
    .about-grid {
        gap: 40px
    }

    .about-img {
        max-width: none;
        height: auto;
        min-height: 0;
        aspect-ratio: 16/10
    }

    .about-badge {
        right: 16px;
        bottom: 16px
    }
}

/* halaman detail */
.page-hero {
    background-color: #fcf9f7;
    padding: 36px 0 48px;
    border-bottom: 5px solid var(--red);
    background-image: linear-gradient(rgba(39, 43, 51, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 43, 51, .055) 1px, transparent 1px);
    background-size: 56px 56px
}

.crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .9rem;
    color: var(--muted);
    margin-bottom: 20px
}

.crumb a {
    text-decoration: none;
    color: var(--ink);
    font-weight: 500
}

.crumb a:hover {
    color: var(--red-ink)
}

.crumb i {
    font-size: .7rem;
    align-self: center
}

.tag {
    display: inline-block;
    background: var(--red-ink);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    padding: 4px 14px;
    margin-bottom: 16px
}

.page-hero h1 {
    font-size: clamp(1.7rem, 4.4vw, 3rem);
    font-weight: 700;
    max-width: 22ch;
    line-height: 1.08
}

.page-hero .meta {
    margin-top: 16px;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    font-size: .95rem
}

.page-hero .meta i {
    color: var(--red-ink);
    margin-right: 6px
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 56px;
    align-items: start
}

.cover {
    aspect-ratio: 16/9;
    background: #151515;
    margin-bottom: 36px;
    overflow: hidden
}

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

.prose {
    max-width: 72ch
}

.prose h2 {
    font-size: 1.6rem;
    margin: 40px 0 14px;
    text-transform: none
}

.prose p {
    margin-bottom: 16px
}

.prose ul {
    margin: 0 0 18px;
    display: grid;
    gap: 10px
}

.prose li {
    display: flex;
    gap: 12px
}

.prose li::before {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--red);
    margin-top: 11px
}

.prose .lead {
    font-size: 1.15rem;
    color: var(--ink)
}

.prose .note {
    border-left: 4px solid var(--red);
    background: var(--paper);
    padding: 18px 22px;
    margin: 24px 0
}

.side {
    position: sticky;
    top: calc(var(--nav-h) + 20px);
    display: grid;
    gap: 20px
}

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 5px solid var(--red);
    padding: 28px 26px
}

.card h3 {
    font-size: 1.2rem;
    margin-bottom: 16px
}

.spec div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-top: 1px solid var(--line);
    font-size: .95rem
}

.spec dt {
    color: var(--muted)
}

.spec dd {
    font-weight: 600;
    color: var(--ink);
    text-align: right
}

.card .btn {
    width: 100%;
    margin-top: 18px
}

.card.dark {
    background: var(--ink);
    border-color: var(--ink);
    border-top-color: var(--red);
    color: #d6d6d6
}

.card.dark h3 {
    color: #fff
}

.mini {
    display: grid;
    gap: 14px
}

.mini a {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 14px;
    text-decoration: none;
    align-items: center
}

.mini img {
    width: 76px;
    height: 60px;
    object-fit: cover;
    background: #151515
}

.mini b {
    font: 600 1rem/1.25 var(--head);
    color: var(--ink)
}

.mini a:hover b {
    color: var(--red-ink)
}

.mini small {
    color: var(--muted);
    font-size: .82rem
}

.pn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--line)
}

.pn a {
    display: block;
    text-decoration: none;
    border: 1px solid var(--line);
    padding: 18px 22px;
    transition: border-color .2s
}

.pn a:hover {
    border-color: var(--red)
}

.pn small {
    display: block;
    color: var(--muted);
    font-size: .82rem
}

.pn b {
    font: 600 1.05rem/1.3 var(--head);
    color: var(--ink)
}

.pn a:last-child {
    text-align: right
}

.pn .empty {
    visibility: hidden
}

.share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 36px;
    font-weight: 600;
    color: var(--ink)
}

.share a,
.share button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    background: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    font: 500 .9rem var(--body);
    color: var(--ink);
    text-decoration: none;
    cursor: pointer
}

.share a:hover,
.share button:hover {
    border-color: var(--red-ink);
    color: var(--red-ink)
}

@media(max-width:991px) {
    .detail-grid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .side {
        position: static
    }
}

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

    .pn a:last-child {
        text-align: left
    }
}