/* ============ TOKENS ============ */
:root {
    --ink: #1b1712;
    --ink-soft: #2a231b;
    --paper: #f5f0e6;
    --paper-dim: #ece2cd;
    --maroon: #7a2e2a;
    --maroon-deep: #54201d;
    --gold: #b8933c;
    --gold-light: #dcc07f;
    --indigo: #212f45;
    --indigo-deep: #171f30;
    --line: rgba(184, 147, 60, .35);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.display-serif {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.label-mono {
    font-family: 'Work Sans', sans-serif;
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

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

::selection {
    background: var(--gold-light);
    color: var(--ink);
}

.btn-secondary {
    background: transparent;
    border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============ PLACARD / SIGNATURE LABEL ============ */
.placard {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--maroon);
}

    .placard::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--gold);
        display: inline-block;
        flex: none;
    }

    .placard.on-dark {
        color: var(--gold-light);
    }

        .placard.on-dark::before {
            background: var(--gold-light);
        }

hr.thread {
    border: 0;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 11px);
    opacity: .6;
    margin: 1.1rem 0 1.6rem;
}

/* ============ NAV ============ */
.navbar-habiart {
    background: rgba(245, 240, 230, .92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
    padding-top: .9rem;
    padding-bottom: .9rem;
}

    .navbar-habiart .brand-mark {
        font-family: 'Work Sans', sans-serif;
        font-weight: 600;
        font-size: 1.35rem;
        letter-spacing: .01em;
    }

        .navbar-habiart .brand-mark span {
            color: var(--maroon);
            font-style: italic;
            font-weight: 500;
        }

    .navbar-habiart .nav-link {
        font-family: 'Work Sans', sans-serif;
        font-size: .76rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--ink) !important;
        margin: 0 .6rem;
        position: relative;
        padding-bottom: .2rem !important;
    }

        .navbar-habiart .nav-link:not(.dropdown-toggle)::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 0;
            height: 1.5px;
            background: var(--gold);
            transition: width .25s ease;
        }

        .navbar-habiart .nav-link:not(.dropdown-toggle):hover::after {
            width: 100%;
        }

        .navbar-habiart .nav-link.dropdown-toggle::after {
            display: inline-block;
            margin-left: .255em;
            vertical-align: .255em;
            content: "";
            border-top: .3em solid;
            border-right: .3em solid transparent;
            border-bottom: 0;
            border-left: .3em solid transparent;
        }

.btn-habiart {
    font-family: 'Work Sans', sans-serif;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--maroon);
    color: var(--paper);
    border: 1px solid var(--maroon);
    padding: .55rem 1.2rem;
    border-radius: 2px;
    transition: all .2s ease;
}

    .btn-habiart:hover {
        background: var(--maroon-deep);
        color: var(--paper);
    }

.btn-habiart-outline {
    font-family: 'Work Sans', sans-serif;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
    padding: .55rem 1.2rem;
    border-radius: 2px;
    transition: all .2s ease;
}

    .btn-habiart-outline:hover {
        background: var(--ink);
        color: var(--paper);
    }

/* ============ HERO ============ */
.heroHome {
    padding: 8.5rem 0 3.5rem;
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, rgba(27, 23, 18, .92), rgba(27, 23, 18, .7)), radial-gradient(circle at top right, rgba(184, 147, 60, .22), transparent 30%);
}

    .heroHome h1 {
        font-size: clamp(2.4rem, 4.4vw, 3.9rem);
        line-height: 1.08;
        color: var(--paper);
        max-width: 40rem;
    }

        .heroHome h1 em {
            font-style: italic;
            color: var(--gold-light);
            font-weight: 500;
        }

    .heroHome p.lede {
        font-size: 1.08rem;
        max-width: 34rem;
        color: rgba(245, 240, 230, .85);
        line-height: 1.7;
    }

.hero-intro {
    position: relative;
    z-index: 2;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.4rem;
}

    .hero-actions .btn-habiart,
    .hero-actions .btn-habiart-outline {
        border-radius: 999px;
    }

    .hero-actions .btn-habiart-outline {
        border-color: rgba(245, 240, 230, .5);
        color: var(--paper);
    }

        .hero-actions .btn-habiart-outline:hover {
            background: rgba(245, 240, 230, .95);
            color: var(--ink);
        }

.hero-carousel-shell {
    position: relative;
    z-index: 2;
    border: 1px solid rgba(184, 147, 60, .35);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .5);
    background: #1a1612;
}

.hero-slide {
    display: grid;
    grid-template-columns: 1.4fr .9fr;
    gap: .75rem;
    padding: .8rem;
    min-height: 420px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .2));
}

.hero-slide-card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    min-height: 180px;
}

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

.hero-slide-card--wide {
    grid-row: span 2;
}

.hero-slide-card--tall {
    min-height: 100%;
}

.hero-slide-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 20%, rgba(11, 10, 8, .4));
    pointer-events: none;
}

.hero-card-caption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 2;
    background: rgba(27, 23, 18, .68);
    color: var(--paper);
    padding: .45rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hero-carousel-shell .carousel-control-prev,
.hero-carousel-shell .carousel-control-next {
    width: 2.7rem;
    height: 2.7rem;
    top: auto;
    bottom: 1rem;
    opacity: 1;
    background: rgba(245, 240, 230, .16);
    border: 1px solid rgba(245, 240, 230, .2);
    border-radius: 50%;
    backdrop-filter: blur(6px);
}

.hero-carousel-shell .carousel-control-prev {
    left: auto;
    right: 3.6rem;
}

.hero-carousel-shell .carousel-control-next {
    right: 1rem;
}

.hero-carousel-shell .carousel-indicators {
    bottom: .9rem;
    left: 1rem;
    justify-content: flex-start;
    margin: 0;
}

    .hero-carousel-shell .carousel-indicators [data-bs-target] {
        width: .7rem;
        height: .7rem;
        border-radius: 50%;
        background-color: rgba(245, 240, 230, .7);
        margin: 0 .3rem;
    }

    .hero-carousel-shell .carousel-indicators .active {
        background-color: var(--gold-light);
    }

/* ============ HERO OTHER PAGES ============ */
.hero {
    padding-top: 9.5rem;
    padding-bottom: 3rem;
    position: relative;
    overflow: hidden;
}

    .hero h1 {
        font-size: clamp(2.4rem, 4.4vw, 3.9rem);
        line-height: 1.08;
    }

        .hero h1 em {
            font-style: italic;
            color: var(--maroon);
            font-weight: 500;
        }

    .hero p.lede {
        font-size: 1.08rem;
        max-width: 34rem;
        color: var(--ink-soft);
        line-height: 1.7;
    }

.project-hero-visual {
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    background: var(--paper-dim);
    box-shadow: 0 18px 40px -24px rgba(27, 23, 18, .35);
}

    .project-hero-visual img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        min-height: 400px;
    }

.quote-block {
    background: linear-gradient(135deg, rgba(184, 147, 60, .16), rgba(122, 46, 42, .08));
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1.5rem 1.6rem;
    color: var(--ink-soft);
}

    .quote-block blockquote {
        font-family: 'Work Sans', sans-serif;
        font-size: 1.1rem;
        line-height: 1.8;
        margin: 0;
        font-style: italic;
        color: var(--maroon-deep);
    }

.detail-list {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0 0;
}

    .detail-list li {
        padding: .6rem 0;
        border-bottom: 1px dashed var(--line);
        color: rgba(245, 240, 230, .82);
        line-height: 1.65;
    }

        .detail-list li:last-child {
            border-bottom: none;
        }

    .detail-list strong {
        color: var(--gold-light);
        font-weight: 600;
    }

/* mosaic */
.mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 68px);
    gap: .6rem;
    height: 100%;
}

.tile {
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .4s ease;
}

    .tile:hover {
        transform: translateY(-4px);
    }

    .tile::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .12), transparent 60%);
        mix-blend-mode: overlay;
    }

.tile-tag {
    position: absolute;
    bottom: 6px;
    left: 8px;
    font-family: 'Work Sans', sans-serif;
    font-size: 1.38rem;
    letter-spacing: .06em;
    color: rgba(245, 240, 230, .85);
    z-index: 2;
}

.t1 {
    grid-column: 1/3;
    grid-row: 1/3;
    background: linear-gradient(135deg, var(--maroon), var(--maroon-deep));
}

.t2 {
    grid-column: 3/5;
    grid-row: 1/2;
    background: linear-gradient(135deg, var(--gold), #8a6a24);
}

.t3 {
    grid-column: 3/4;
    grid-row: 2/4;
    background: linear-gradient(160deg, var(--indigo), var(--indigo-deep));
}

.t4 {
    grid-column: 4/5;
    grid-row: 2/3;
    background: linear-gradient(135deg, #3f2620, var(--maroon));
}

.t5 {
    grid-column: 1/2;
    grid-row: 3/4;
    background: linear-gradient(135deg, var(--indigo-deep), #0f1420);
}

.t6 {
    grid-column: 2/3;
    grid-row: 3/4;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
}

.t7 {
    grid-column: 4/5;
    grid-row: 3/4;
    background: linear-gradient(135deg, var(--maroon-deep), #2c130f);
}

/* artist marquee */
.marquee-strip {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--paper-dim);
    overflow: hidden;
    padding: .85rem 0;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: scroll-left 32s linear infinite;
}

    .marquee-track span {
        font-family: 'Work Sans', sans-serif;
        font-size: .78rem;
        letter-spacing: .05em;
        color: var(--ink-soft);
        white-space: nowrap;
        padding: 0 1.6rem;
        border-right: 1px solid var(--line);
    }

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ============ MISSION / VISION (dark) ============ */
.section-dark {
    background: var(--ink);
    color: var(--paper);
    padding: 1.5rem 0;
}

    .section-dark h2 {
        color: var(--paper);
    }

.mv-card {
    border-left: 1px solid var(--line);
    padding-left: 2rem;
    height: 100%;
}

    .mv-card:first-child {
        border-left: none;
        padding-left: 0;
    }

    .mv-card p {
        color: rgba(245, 240, 230, .8);
        line-height: 1.8;
        font-size: 1rem;
    }

.mv-num {
    font-family: 'Work Sans', sans-serif;
    font-style: italic;
    font-size: 2.6rem;
    color: var(--gold);
    line-height: 1;
    display: block;
    margin-bottom: .6rem;
}

/* ============ STRENGTHS STRIP ============ */
.strengths {
    background: var(--paper);
    padding: 3.2rem 0;
    border-bottom: 1px solid var(--line);
}

    .strengths ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .strengths li {
        padding: .45rem 0;
        border-bottom: 1px dotted var(--line);
        font-size: .94rem;
    }

        .strengths li:last-child {
            border-bottom: none;
        }

/* ============ PROJECTS ============ */
.section-light {
    padding: 1.5rem 0;
}

.plate {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: hidden;
    height: 100%;
    transition: box-shadow .25s ease, transform .25s ease;
}

    .plate:hover {
        transform: translateY(-5px);
        box-shadow: 0 14px 30px -18px rgba(27, 23, 18, .35);
    }

.plate-art {
    /*height: 180px;*/
    position: relative;
    overflow: hidden;
}

    .plate-art::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 75% 25%, rgba(255, 255, 255, .16), transparent 55%);
    }

    .plate-art img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.plate-body {
    padding: 1.1rem 1.25rem 1.35rem;
}

.plate-no {
    font-family: 'Work Sans', sans-serif;
    font-size: .99rem;
    letter-spacing: .1em;
    color: var(--maroon);
}

.plate-title {
    font-family: 'Work Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
    margin: .25rem 0 .4rem;
}

.plate-desc {
    font-size: .87rem;
    color: var(--ink-soft);
    line-height: 1.55;
}

.p1 {
    background: linear-gradient(120deg, #3f2027, var(--maroon));
}

.p2 {
    background: linear-gradient(120deg, var(--gold), #7a5c22);
}

.p3 {
    background: linear-gradient(120deg, var(--indigo-deep), var(--indigo));
}

.p4 {
    background: linear-gradient(120deg, #8a3a2d, var(--gold));
}

.p5 {
    background: linear-gradient(120deg, var(--indigo), #3a2b45);
}

.p6 {
    background: linear-gradient(120deg, #54201d, #211712);
}

.p7 {
    background: linear-gradient(120deg, var(--gold-light), var(--maroon));
}

.p8 {
    background: linear-gradient(120deg, #2a3145, #182030);
}

.p9 {
    background: linear-gradient(120deg, #6a4a20, #3a2314);
}

/* ============ FOUNDERS ============ */
.founders {
    background: var(--paper-dim);
    padding: 2.0rem 0;
}

.founder-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1.9rem 1.6rem;
    height: 100%;
}

.monogram {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ink);
    border: 2px solid var(--gold);
    color: var(--gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Work Sans', sans-serif;
    font-style: italic;
    font-size: 1.35rem;
    flex: none;
}

.founder-role {
    font-family: 'Work Sans', sans-serif;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--maroon);
}

.founder-card h4 {
    font-size: 1.15rem;
    margin-bottom: .1rem;
}

.founder-card p {
    font-size: .9rem;
    color: var(--ink-soft);
    line-height: 1.65;
    margin-top: .7rem;
    margin-bottom: 0;
}

/* ============ CONTACT ============ */
.contact-section {
    background: var(--indigo-deep);
    color: var(--paper);
    padding: 2.0rem 0;
}

    .contact-section h2 {
        color: var(--paper);
    }

.office-card {
    border: 1px solid rgba(184, 147, 60, .3);
    border-radius: 3px;
    padding: 1.6rem 1.7rem;
    height: 100%;
    background: rgba(245, 240, 230, .03);
}

    .office-card .label-mono {
        color: var(--gold-light);
    }

    .office-card p {
        color: rgba(245, 240, 230, .82);
        margin: .4rem 0 0;
        line-height: 1.6;
    }

    .office-card a.email-link {
        color: var(--gold-light);
        text-decoration: none;
        border-bottom: 1px solid var(--gold-light);
    }

.form-control-habiart {
    background: transparent;
    border: 1px solid rgba(184, 147, 60, .35);
    color: var(--paper);
    border-radius: 2px;
    padding: .7rem .9rem;
}

    .form-control-habiart:focus {
        background: transparent;
        color: var(--paper);
        border-color: var(--gold);
        box-shadow: 0 0 0 .18rem rgba(184, 147, 60, .25);
    }

    .form-control-habiart::placeholder {
        color: rgba(245, 240, 230, .4);
    }

label.form-label-habiart {
    font-family: 'Work Sans', sans-serif;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(245, 240, 230, .65);
    margin-bottom: .35rem;
}

.artist-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

    .artist-list li {
        background: rgba(184, 147, 60, .1);
        border: 1px solid rgba(184, 147, 60, .25);
        border-radius: 4px;
        padding: .8rem .9rem;
        color: var(--ink-soft);
    }

/* ============ CONTACT ============ */
.contact-grid {
    /* display: grid;
      gap: 1.5rem;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      align-items: stretch; */
}

.contact-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1.8rem;
    min-height: 100%;
}

    .contact-card h3 {
        margin-top: 0;
        font-size: 1.25rem;
        margin-bottom: .75rem;
    }

    .contact-card p {
        color: var(--ink-soft);
        line-height: 1.8;
        margin-bottom: 1rem;
    }

    .contact-card .contact-detail {
        display: grid;
        gap: .45rem;
        font-size: .95rem;
        color: var(--ink-soft);
    }

        .contact-card .contact-detail strong {
            color: var(--maroon);
            font-weight: 500;
        }

.contact-map {
    min-height: 280px;
    border-radius: 4px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(33, 47, 69, .95), rgba(122, 46, 42, .9));
    color: rgba(245, 240, 230, .9);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

    .contact-map h3 {
        color: #fff;
    }

    .contact-map span {
        display: inline-block;
        opacity: .9;
        margin-top: 1rem;
    }

.contact-action {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--maroon);
    text-decoration: none;
    font-weight: 500;
}

    .contact-action:hover {
        color: var(--maroon-deep);
    }

/* ============ FOOTER ============ */
.footer-habiart {
    background: var(--ink);
    color: rgba(245, 240, 230, .55);
    padding: 2.2rem 0;
    font-size: .82rem;
    border-top: 1px solid var(--line);
}

    .footer-habiart a {
        color: rgba(245, 240, 230, .8);
        text-decoration: none;
    }

        .footer-habiart a:hover {
            color: var(--gold-light);
        }

/* focus visibility */
a:focus-visible,
button:focus-visible,
.btn-habiart:focus-visible,
.btn-habiart-outline:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

@media (max-width: 991px) {
    .mosaic {
        grid-template-rows: repeat(3, 60px);
        margin-top: 2.2rem;
    }

    .mv-card {
        border-left: none;
        padding-left: 0;
        margin-bottom: 2.2rem;
    }

        .mv-card:not(:last-child) {
            border-bottom: 1px solid var(--line);
            padding-bottom: 2.2rem;
        }

    .artist-list {
        grid-template-columns: 1fr;
    }
}