:root {
    --c-purple: #4C328B;
    --c-mint: #6BE3BD;
    --c-blue: #58ACF2;
    --c-ink: #17151c;
    --c-cream: #F6F2E8;
    --c-white: #FFFFFF;
    --c-line: rgba(23, 21, 28, .16);

    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-body: "Poppins", system-ui, sans-serif;

    --container: min(92vw, 1440px);
    --header-h: 84px;
    --radius: 999px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--c-ink);
    background: var(--c-cream);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

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

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}

::selection {
    background: var(--c-mint);
    color: var(--c-purple);
}

.skip-link {
    position: fixed;
    left: 1rem;
    top: 1rem;
    z-index: 9999;
    transform: translateY(-200%);
    background: var(--c-white);
    color: var(--c-ink);
    padding: .75rem 1rem;
    border-radius: .5rem;
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: fixed;
    z-index: 1000;
    inset: 0 0 auto;
    height: var(--header-h);
    transition: transform .35s ease, background-color .35s ease, box-shadow .35s ease;
}

.site-header.is-scrolled {
    background: rgba(246, 242, 232, .84);
    backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 rgba(23, 21, 28, .08);
}

.site-header.is-hidden {
    transform: translateY(-100%);
}

.site-header__inner {
    width: var(--container);
    height: 100%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
}

.brand {
    width: clamp(150px, 13vw, 210px);
    justify-self: start;
}

.brand__logo {
    width: 100%;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.4vw, 2.5rem);
    font-size: .85rem;
    font-weight: 500;
}

.desktop-nav a,
.text-link {
    text-decoration: none;
    position: relative;
}

.desktop-nav a::after,
.text-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.3rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s ease;
}

.desktop-nav a:hover::after,
.text-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.desktop-cta {
    justify-self: end;
}

.menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--c-line);
    border-radius: 50%;
    background: transparent;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.menu-toggle span {
    width: 18px;
    height: 1.5px;
    background: currentColor;
    transition: transform .25s ease;
}

.menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(3.25px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-3.25px) rotate(-45deg);
}

.mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--c-purple);
    color: var(--c-white);
    z-index: -1;
}

.mobile-menu__inner {
    width: var(--container);
    height: 100%;
    margin-inline: auto;
    padding-top: calc(var(--header-h) + 5vh);
    display: flex;
    flex-direction: column;
}

.mobile-menu a {
    font-family: var(--font-display);
    font-weight: 600;
    text-decoration: none;
    font-size: clamp(2.8rem, 12vw, 5.6rem);
    line-height: 1;
    padding: .15em 0;
    border-bottom: 1px solid rgba(255,255,255,.18);
}

.mobile-menu__note {
    margin-top: auto;
    padding-bottom: 2rem;
    font-size: .8rem;
    opacity: .7;
}

.hero {
    min-height: 100svh;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(to right, transparent calc(50% - .5px), rgba(23,21,28,.07) 50%, transparent calc(50% + .5px)),
        var(--c-cream);
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: var(--c-line);
}

.hero__inner {
    width: var(--container);
    min-height: 100svh;
    margin-inline: auto;
    padding-top: calc(var(--header-h) + 8vh);
    padding-bottom: 5vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.hero__topline,
.hero__bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.eyebrow,
.hero__index {
    margin: 0;
    font-size: .72rem;
    line-height: 1.3;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
}

.eyebrow--light {
    color: rgba(255,255,255,.7);
}

.hero__title {
    margin: auto 0;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.065em;
    font-size: clamp(4rem, 10.2vw, 10.8rem);
    line-height: .79;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

.hero__line {
    display: block;
    overflow: hidden;
}

.hero__line > span {
    display: block;
    transform: translateY(115%);
}

.hero__line--two {
    color: var(--c-purple);
    text-align: right;
}

.hero__lead {
    max-width: 540px;
    margin: 0;
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    line-height: 1.55;
}

.hero__actions {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    flex-wrap: wrap;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    min-height: 50px;
    padding: .9rem 1.25rem;
    border: 1px solid var(--c-ink);
    border-radius: var(--radius);
    background: var(--c-ink);
    color: var(--c-white);
    text-decoration: none;
    font-size: .8rem;
    font-weight: 600;
    transition: transform .25s ease, background-color .25s ease, color .25s ease;
}

.button:hover {
    transform: translateY(-2px);
    background: var(--c-purple);
    border-color: var(--c-purple);
}

.button--small {
    min-height: 42px;
    padding: .6rem 1rem;
}

.button--mint {
    background: var(--c-mint);
    border-color: var(--c-mint);
    color: var(--c-purple);
}

.button--mint:hover {
    background: var(--c-white);
    border-color: var(--c-white);
}

.text-link {
    font-size: .8rem;
    font-weight: 600;
}

.hero__bg-mark {
    position: absolute;
    width: min(53vw, 780px);
    right: -11vw;
    top: 50%;
    transform: translateY(-50%) rotate(-7deg);
    opacity: .065;
    pointer-events: none;
}

.hero__bg-mark img {
    width: 100%;
}

.section-wrap {
    width: var(--container);
    margin-inline: auto;
}

.manifesto {
    background: var(--c-white);
    padding: clamp(6rem, 12vw, 12rem) 0;
}

.manifesto__grid {
    margin-top: clamp(3rem, 7vw, 7rem);
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: clamp(3rem, 8vw, 9rem);
    align-items: end;
}

.manifesto h2,
.next-phase h2,
.site-footer h2,
.content-page h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.06em;
}

.manifesto h2 {
    font-size: clamp(3.6rem, 7.6vw, 8rem);
    line-height: .88;
}

.manifesto h2 span {
    color: var(--c-blue);
}

.manifesto__copy {
    max-width: 540px;
}

.manifesto__copy p {
    line-height: 1.7;
}

.manifesto__big {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.5vw, 2.6rem);
    line-height: 1.08 !important;
    letter-spacing: -.035em;
    margin-top: 0;
}

.next-phase {
    background: var(--c-blue);
    color: var(--c-ink);
    padding: clamp(5rem, 10vw, 10rem) 0;
}

.next-phase__inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 8vw;
}

.next-phase h2 {
    font-size: clamp(3rem, 7vw, 7.6rem);
    line-height: .9;
    grid-column: 1 / -1;
}

.next-phase p:last-child {
    max-width: 680px;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.7;
    grid-column: 2;
}

.site-footer {
    background: var(--c-purple);
    color: var(--c-white);
    padding: clamp(5rem, 9vw, 8rem) 0 2rem;
}

.site-footer__inner,
.site-footer__bottom {
    width: var(--container);
    margin-inline: auto;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1.5fr .5fr;
    gap: 4rem;
    align-items: end;
}

.site-footer h2 {
    margin-top: 1.5rem;
    font-size: clamp(3.3rem, 7.4vw, 8rem);
    line-height: .9;
}

.site-footer__actions {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.footer-note {
    font-size: .72rem;
    line-height: 1.5;
    opacity: .6;
}

.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.2);
    margin-top: clamp(4rem, 8vw, 8rem);
    padding-top: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 2rem;
    align-items: center;
    font-size: .72rem;
    opacity: .8;
}

.site-footer__bottom img {
    width: 150px;
}

.content-page {
    min-height: 70vh;
    padding: calc(var(--header-h) + 5rem) 0 7rem;
    background: var(--c-white);
}

.content-page h1 {
    font-size: clamp(3.5rem, 8vw, 8rem);
}

.projects-grid {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}

.project-card a {
    text-decoration: none;
}

.project-card img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

.project-card__title {
    display: block;
    margin-top: 1rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
}

.project-single__hero {
    margin-top: 3rem;
}

.project-single__content {
    max-width: 780px;
    margin-top: 3rem;
    line-height: 1.75;
}

@keyframes lineReveal {
    to { transform: translateY(0); }
}

@media (max-width: 900px) {
    :root {
        --header-h: 72px;
        --container: min(90vw, 720px);
    }

    .site-header__inner {
        grid-template-columns: 1fr auto;
    }

    .desktop-nav,
    .desktop-cta {
        display: none;
    }

    .menu-toggle {
        display: flex;
        justify-self: end;
    }

    .hero {
        background: var(--c-cream);
    }

    .hero__inner {
        padding-top: calc(var(--header-h) + 4vh);
        padding-bottom: 3rem;
    }

    .hero__topline {
        padding-top: 1rem;
    }

    .hero__index {
        display: none;
    }

    .hero__title {
        font-size: clamp(4rem, 17.2vw, 7rem);
        line-height: .82;
        margin: auto 0;
    }

    .hero__line--two {
        text-align: left;
    }

    .hero__bottom {
        flex-direction: column;
    }

    .hero__bg-mark {
        width: 95vw;
        right: -45vw;
        top: 40%;
        opacity: .055;
    }

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

    .manifesto__copy {
        margin-left: 14vw;
    }

    .next-phase__inner,
    .site-footer__inner {
        grid-template-columns: 1fr;
    }

    .next-phase p:last-child {
        grid-column: 1;
    }

    .site-footer__bottom {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 520px) {
    .hero__title {
        font-size: clamp(3.45rem, 17vw, 5rem);
    }

    .hero__actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .button {
        width: 100%;
    }

    .manifesto__copy {
        margin-left: 0;
    }

    .site-footer__actions .button {
        width: auto;
        align-self: flex-start;
    }
}

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

    .hero__line > span {
        transform: none;
    }
}


/* =========================================================
   CONEXIA v1.1
   ========================================================= */

body.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

.site-header {
    border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
    border-bottom-color: rgba(23, 21, 28, .07);
}

.hero__actions .button {
    min-height: 56px;
    padding-inline: 1.45rem;
}

.hero__bg-mark {
    will-change: transform;
}

.anchor-spacer {
    scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* Services */
.services {
    --service-accent: var(--c-purple);
    position: relative;
    overflow: hidden;
    background: var(--c-cream);
    padding: clamp(6rem, 11vw, 11rem) 0;
    isolation: isolate;
}

.services__wash {
    position: absolute;
    width: 44vw;
    aspect-ratio: 1;
    right: -15vw;
    top: 3vw;
    border-radius: 50%;
    background: var(--service-accent);
    opacity: .08;
    filter: blur(2px);
    transition: background-color .45s ease;
    z-index: -1;
}

.services__inner {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    column-gap: clamp(4rem, 9vw, 10rem);
    row-gap: clamp(4rem, 8vw, 8rem);
}

.services__intro {
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 4rem);
}

.services__intro h2 {
    margin: 1.5rem 0 1.8rem;
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 6.4vw, 7rem);
    line-height: .9;
    letter-spacing: -.06em;
    font-weight: 600;
}

.services__intro h2 span {
    color: var(--service-accent);
    transition: color .45s ease;
}

.services__intro > p:last-child {
    max-width: 460px;
    margin: 0;
    line-height: 1.75;
}

.services__list {
    border-top: 1px solid var(--c-line);
}

.service-row {
    width: 100%;
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1.2rem 0 1.4rem;
    border: 0;
    border-bottom: 1px solid var(--c-line);
    background: transparent;
    color: var(--c-ink);
    text-align: left;
    cursor: pointer;
    transition: color .25s ease, padding-left .3s ease, background-color .3s ease;
}

.service-row__number {
    font-size: .72rem;
    letter-spacing: .08em;
    opacity: .5;
}

.service-row__name {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5.6vw, 5.8rem);
    line-height: .95;
    letter-spacing: -.055em;
    font-weight: 600;
}

.service-row__arrow {
    font-size: 1.3rem;
    transform: rotate(0deg);
    transition: transform .28s ease;
}

.service-row:hover,
.service-row:focus-visible,
.service-row.is-active {
    color: var(--service-accent);
    padding-left: .6rem;
}

.service-row.is-active .service-row__arrow,
.service-row:hover .service-row__arrow {
    transform: rotate(45deg);
}

.service-row:focus-visible {
    outline: 2px solid var(--service-accent);
    outline-offset: 6px;
}

.services__detail {
    grid-column: 2;
    min-height: 210px;
    padding: clamp(2rem, 4vw, 3.4rem);
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 2rem;
    background: var(--service-accent);
    color: var(--c-white);
    transition: background-color .45s ease;
}

.services__detail-index {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 1;
    opacity: .4;
}

.services__detail-title {
    margin: 0 0 .75rem;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 3.4rem);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -.04em;
}

.services__detail-copy {
    max-width: 680px;
    margin: 0 0 2rem;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.55;
}

.services__detail-tags {
    margin: 0;
    font-size: .78rem;
    line-height: 1.6;
    letter-spacing: .02em;
    opacity: .8;
}

/* Footer gets a little more breathing room after services */
.site-footer {
    position: relative;
}

@media (max-width: 900px) {
    .services__inner {
        grid-template-columns: 1fr;
    }

    .services__intro {
        position: static;
    }

    .services__detail {
        grid-column: 1;
    }

    .service-row {
        grid-template-columns: 52px 1fr auto;
    }

    .services__wash {
        width: 90vw;
        right: -50vw;
        top: 8rem;
    }
}

@media (max-width: 520px) {
    .services {
        padding-top: 5.5rem;
    }

    .services__intro h2 {
        font-size: clamp(3.2rem, 15vw, 4.6rem);
    }

    .service-row {
        grid-template-columns: 42px 1fr auto;
        padding-block: 1.05rem 1.15rem;
    }

    .service-row__name {
        font-size: clamp(2.4rem, 12vw, 3.5rem);
    }

    .services__detail {
        grid-template-columns: 1fr;
        gap: 1rem;
        min-height: 0;
    }

    .services__detail-index {
        font-size: 2.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .services__wash,
    .service-row,
    .service-row__arrow,
    .services__intro h2 span,
    .services__detail {
        transition: none !important;
    }
}


/* =========================================================
   CONEXIA v1.2 — MORE PERSONALITY
   Visual language inspired by the current Conexia feed:
   bold color blocks, editorial contrast, graphic accents.
   ========================================================= */

.hero {
    background:
        linear-gradient(to right, transparent calc(50% - .5px), rgba(23,21,28,.06) 50%, transparent calc(50% + .5px)),
        var(--c-cream);
}

.hero__accent {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.hero__accent--blue {
    width: clamp(260px, 28vw, 520px);
    height: clamp(110px, 15vw, 250px);
    right: -4vw;
    top: 9vh;
    background: var(--c-blue);
    transform: rotate(-4deg);
    opacity: .97;
}

.hero__accent--mint {
    width: clamp(150px, 16vw, 290px);
    aspect-ratio: 1;
    border-radius: 50%;
    right: 18vw;
    bottom: 6vh;
    background: var(--c-mint);
    opacity: .7;
    mix-blend-mode: multiply;
}

.hero__spark {
    position: absolute;
    z-index: 3;
    color: var(--c-purple);
    font-size: clamp(1.4rem, 2.6vw, 3rem);
    pointer-events: none;
}

.hero__spark--one {
    top: 20%;
    left: 3vw;
    transform: rotate(13deg);
}

.hero__spark--two {
    right: 3vw;
    bottom: 24%;
    color: var(--c-white);
    transform: rotate(-18deg);
}

.hero__title {
    text-shadow: 0 0 0 transparent;
}

.hero__line--one span {
    position: relative;
    display: inline-block;
}

.hero__line--one span::after {
    content: "";
    position: absolute;
    left: .02em;
    right: 0;
    bottom: -.08em;
    height: .055em;
    background: var(--c-mint);
    transform: scaleX(.28);
    transform-origin: left;
}

.hero__line--two {
    position: relative;
    z-index: 4;
}

.hero__line--two span {
    display: inline-block;
    padding: .03em .08em .07em;
    margin-right: -.08em;
    background: var(--c-purple);
    color: var(--c-white);
    box-shadow: .09em .09em 0 var(--c-blue);
}

.hero__statement-chip {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    margin: 0 0 1.2rem auto;
    width: fit-content;
    position: relative;
    z-index: 3;
}

.hero__statement-chip span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .4rem .7rem;
    border-radius: 999px;
    border: 1px solid rgba(23,21,28,.15);
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(8px);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .08em;
}

.hero__statement-chip span:nth-child(2) {
    background: var(--c-mint);
}

.hero__statement-chip span:nth-child(3) {
    background: var(--c-blue);
}

/* Brand rail */
.brand-rail {
    overflow: hidden;
    background: var(--c-purple);
    color: var(--c-white);
    border-top: 1px solid rgba(255,255,255,.18);
    border-bottom: 1px solid rgba(255,255,255,.18);
}

.brand-rail__track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 1.5rem;
    padding: 1rem 0;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.55vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -.02em;
    animation: conexiaRail 30s linear infinite;
}

.brand-rail__dot {
    color: var(--c-mint);
}

@keyframes conexiaRail {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Manifesto has more editorial impact */
.manifesto {
    position: relative;
    overflow: hidden;
}

.manifesto::before {
    content: "CONEXIA";
    position: absolute;
    right: -0.08em;
    bottom: -0.17em;
    font-family: var(--font-display);
    font-size: clamp(7rem, 20vw, 22rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.08em;
    color: rgba(76,50,139,.035);
    pointer-events: none;
}

.manifesto h2 span {
    display: inline-block;
    background: var(--c-blue);
    color: var(--c-white);
    padding: .02em .08em .08em;
    margin-left: -.08em;
    box-shadow: .08em .08em 0 var(--c-mint);
}

/* Services more graphic */
.services {
    border-top: 1px solid var(--c-line);
}

.services__intro h2 span {
    position: relative;
    display: inline-block;
}

.services__intro h2 span::after {
    content: "✦";
    position: absolute;
    right: -.8em;
    top: -.15em;
    font-size: .32em;
    color: var(--c-purple);
}

.services__detail {
    box-shadow: 12px 12px 0 rgba(23,21,28,.11);
}

/* Point of view */
.pov {
    background: var(--c-ink);
    color: var(--c-white);
    padding: clamp(6rem, 11vw, 11rem) 0;
    overflow: hidden;
}

.pov__header {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 5vw;
    align-items: start;
    margin-bottom: clamp(4rem, 8vw, 8rem);
}

.pov__header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 7vw, 7.8rem);
    line-height: .86;
    letter-spacing: -.06em;
    font-weight: 600;
}

.pov__header h2 span {
    color: var(--c-mint);
}

.pov__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.pov-card {
    min-height: clamp(390px, 42vw, 560px);
    padding: clamp(1.4rem, 2.5vw, 2.4rem);
    color: var(--c-ink);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transform: translateY(0) rotate(0);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
}

.pov-card:hover {
    transform: translateY(-10px) rotate(-1deg);
}

.pov-card--blue {
    background: var(--c-blue);
}

.pov-card--mint {
    background: var(--c-mint);
    margin-top: 4vw;
}

.pov-card--purple {
    background: var(--c-purple);
    color: var(--c-white);
    margin-top: 8vw;
}

.pov-card::after {
    content: "✦";
    position: absolute;
    right: .4rem;
    top: -.6rem;
    font-size: clamp(5rem, 9vw, 9rem);
    opacity: .15;
}

.pov-card__index {
    font-size: .72rem;
    letter-spacing: .1em;
    opacity: .55;
}

.pov-card__bad {
    margin: auto 0 .7rem;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.4vw, 2.4rem);
    line-height: 1.02;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    opacity: .55;
}

.pov-card__good {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4vw, 4rem);
    line-height: .93;
    letter-spacing: -.05em;
    font-weight: 600;
}

.pov-card__tag {
    margin-top: 2rem;
    align-self: flex-start;
    padding: .45rem .7rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .1em;
}

@media (max-width: 900px) {
    .hero__accent--blue {
        right: -18vw;
        top: 10vh;
        width: 60vw;
    }

    .hero__accent--mint {
        right: -5vw;
        bottom: 14vh;
        width: 30vw;
    }

    .hero__statement-chip {
        margin-left: 0;
    }

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

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

    .pov-card,
    .pov-card--mint,
    .pov-card--purple {
        margin-top: 0;
        min-height: 360px;
    }
}

@media (max-width: 520px) {
    .hero__accent--blue {
        top: 12vh;
        right: -26vw;
        width: 82vw;
        height: 120px;
        opacity: .9;
    }

    .hero__accent--mint {
        width: 42vw;
        right: -13vw;
        bottom: 22vh;
    }

    .hero__spark--one {
        top: 24%;
    }

    .hero__line--two span {
        box-shadow: .05em .07em 0 var(--c-blue);
    }

    .hero__statement-chip {
        display: none;
    }

    .brand-rail__track {
        font-size: .95rem;
        animation-duration: 24s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-rail__track {
        animation: none !important;
    }

    .pov-card {
        transition: none !important;
    }
}


/* =========================================================
   CONEXIA v1.2.1 — HERO REFINED
   Less "random decoration", more campaign-like composition.
   ========================================================= */

.hero--refined {
    min-height: 100svh;
    background:
        linear-gradient(to right, transparent calc(50% - .5px), rgba(23,21,28,.055) 50%, transparent calc(50% + .5px)),
        var(--c-cream);
}

.hero--refined .hero__inner {
    padding-top: calc(var(--header-h) + 7vh);
    padding-bottom: 4.5vh;
}

.hero--refined .hero__topline {
    position: relative;
    z-index: 5;
}

.hero--refined .hero__title-stage {
    position: relative;
    z-index: 4;
    margin: auto 0;
    padding: clamp(2rem, 5vw, 5rem) 0;
}

.hero--refined .hero__ribbon {
    width: fit-content;
    display: flex;
    gap: .4rem;
    margin: 0 0 clamp(1.1rem, 2vw, 1.8rem) clamp(0rem, 3vw, 3rem);
    position: relative;
    z-index: 7;
}

.hero--refined .hero__ribbon span {
    padding: .42rem .72rem;
    font-size: .62rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .09em;
    border: 1px solid var(--c-ink);
    border-radius: 999px;
    background: var(--c-cream);
}

.hero--refined .hero__ribbon span:nth-child(2) {
    background: var(--c-mint);
    border-color: var(--c-mint);
}

.hero--refined .hero__ribbon span:nth-child(3) {
    background: var(--c-blue);
    border-color: var(--c-blue);
}

.hero--refined .hero__title {
    margin: 0;
    width: 100%;
    font-size: clamp(4.8rem, 10.8vw, 11.5rem);
    line-height: .78;
    letter-spacing: -.072em;
    position: relative;
    z-index: 5;
}

.hero--refined .hero__line {
    overflow: hidden;
    padding-bottom: .09em;
}

.hero--refined .hero__line > span {
    transform: none; /* visible even if GSAP/CDN fails */
}

.hero--refined .hero__line--one {
    text-align: left;
    color: var(--c-ink);
}

.hero--refined .hero__line--one span {
    display: inline-block;
    position: relative;
}

.hero--refined .hero__line--one span::after {
    content: "";
    position: absolute;
    left: .04em;
    width: 23%;
    bottom: -.02em;
    height: .055em;
    background: var(--c-mint);
    transform: rotate(-1deg);
}

.hero--refined .hero__line--two {
    text-align: right;
    margin-top: .08em;
    overflow: visible;
}

.hero--refined .hero__line--two span {
    display: inline-block;
    position: relative;
    padding: .035em .09em .075em;
    margin-right: .055em;
    background: var(--c-purple);
    color: var(--c-white);
    box-shadow: .075em .075em 0 var(--c-blue);
    transform: rotate(-.7deg);
}

.hero--refined .hero__micro-manifesto {
    display: flex;
    justify-content: flex-end;
    gap: .8rem;
    margin: clamp(1.4rem, 2.5vw, 2.3rem) .8rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(.8rem, 1vw, 1rem);
    font-weight: 600;
    letter-spacing: .04em;
}

.hero--refined .hero__micro-manifesto span:first-child {
    opacity: .45;
    text-decoration: line-through;
}

.hero--refined .hero__micro-manifesto span:last-child {
    color: var(--c-purple);
}

.hero--refined .hero__bottom {
    position: relative;
    z-index: 5;
    border-top: 1px solid var(--c-line);
    padding-top: clamp(1.3rem, 2vw, 2rem);
}

.hero--refined .hero__lead {
    max-width: 610px;
    font-size: clamp(1rem, 1.45vw, 1.28rem);
}

.hero--refined .hero__actions {
    justify-content: flex-end;
}

.hero--refined .hero__bg-mark {
    width: min(43vw, 690px);
    right: -8vw;
    top: 55%;
    opacity: .045;
    z-index: 1;
}

.hero--refined .hero__mint-orb {
    position: absolute;
    z-index: 2;
    width: clamp(180px, 20vw, 350px);
    aspect-ratio: 1;
    border-radius: 50%;
    right: 7vw;
    top: 38%;
    background: var(--c-mint);
    opacity: .2;
    pointer-events: none;
}

.hero--refined .hero__spark--one {
    left: auto;
    right: 3.5vw;
    top: 34%;
    z-index: 6;
    color: var(--c-blue);
    font-size: clamp(2rem, 3.2vw, 4rem);
}

.hero--refined .hero__index {
    color: var(--c-purple);
}

/* Disable obsolete decorative blocks from v1.2 inside refined hero */
.hero--refined > .hero__accent,
.hero--refined > .hero__statement-chip,
.hero--refined > .hero__spark--two {
    display: none !important;
}

@media (max-width: 900px) {
    .hero--refined .hero__inner {
        padding-top: calc(var(--header-h) + 4vh);
    }

    .hero--refined .hero__title-stage {
        padding: 2rem 0;
    }

    .hero--refined .hero__title {
        font-size: clamp(4rem, 16.4vw, 7.2rem);
        line-height: .8;
    }

    .hero--refined .hero__line--two {
        text-align: left;
        margin-top: .13em;
    }

    .hero--refined .hero__line--two span {
        margin-left: 0;
        margin-right: 0;
    }

    .hero--refined .hero__micro-manifesto {
        justify-content: flex-start;
        margin-left: .1rem;
    }

    .hero--refined .hero__bottom {
        flex-direction: column;
    }

    .hero--refined .hero__actions {
        justify-content: flex-start;
    }

    .hero--refined .hero__mint-orb {
        width: 40vw;
        right: -12vw;
        top: 41%;
    }

    .hero--refined .hero__bg-mark {
        width: 90vw;
        right: -46vw;
        top: 54%;
    }

    .hero--refined .hero__spark--one {
        top: 35%;
        right: 3vw;
    }
}

@media (max-width: 520px) {
    .hero--refined {
        min-height: 100svh;
    }

    .hero--refined .hero__ribbon {
        gap: .3rem;
        margin-left: 0;
        flex-wrap: wrap;
    }

    .hero--refined .hero__ribbon span {
        font-size: .54rem;
        padding: .38rem .55rem;
    }

    .hero--refined .hero__title {
        font-size: clamp(3.35rem, 17vw, 5rem);
        letter-spacing: -.065em;
    }

    .hero--refined .hero__micro-manifesto {
        gap: .55rem;
        font-size: .7rem;
        flex-wrap: wrap;
    }

    .hero--refined .hero__actions {
        width: 100%;
    }

    .hero--refined .hero__actions .button {
        width: 100%;
    }

    .hero--refined .hero__spark--one {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero--refined .hero__line > span {
        transform: none !important;
    }
}


/* =========================================================
   CONEXIA v1.3 — PROCESS + SELECTED WORK
   ========================================================= */

/* Process */
.process {
    --process-accent: var(--c-mint);
    position: relative;
    background: var(--c-purple);
    color: var(--c-white);
    padding: clamp(7rem, 12vw, 13rem) 0;
    overflow: clip;
}

.process::after {
    content: "";
    position: absolute;
    width: 34vw;
    aspect-ratio: 1;
    border-radius: 50%;
    right: -19vw;
    top: 8vw;
    background: var(--process-accent);
    opacity: .11;
    transition: background-color .35s ease;
}

.process__layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(4rem, 9vw, 10rem);
    align-items: start;
}

.process__sticky {
    position: sticky;
    top: calc(var(--header-h) + 8vh);
    min-height: 64vh;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.process__sticky h2 {
    margin: 1.6rem 0 1.7rem;
    font-family: var(--font-display);
    font-size: clamp(3.8rem, 6.8vw, 7.4rem);
    line-height: .86;
    letter-spacing: -.065em;
    font-weight: 600;
}

.process__sticky h2 span {
    color: var(--process-accent);
    transition: color .35s ease;
}

.process__intro {
    max-width: 480px;
    line-height: 1.7;
    color: rgba(255,255,255,.72);
}

.process__word {
    margin-top: auto;
    font-family: var(--font-display);
    font-size: clamp(3rem, 8.5vw, 9rem);
    line-height: .78;
    letter-spacing: -.075em;
    font-weight: 700;
    color: var(--process-accent);
    opacity: .22;
    word-break: break-word;
    transition: color .35s ease;
}

.process__steps {
    position: relative;
    z-index: 2;
}

.process-step {
    min-height: 44vh;
    padding: clamp(2.5rem, 5vw, 5rem) 0;
    display: grid;
    grid-template-columns: 76px 1fr auto;
    gap: 1.5rem;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.46);
    transition: color .35s ease, transform .35s ease;
}

.process-step:last-child {
    border-bottom: 1px solid rgba(255,255,255,.2);
}

.process-step.is-active {
    color: var(--c-white);
    transform: translateX(-.6rem);
}

.process-step__number {
    font-size: .75rem;
    letter-spacing: .1em;
}

.process-step h3 {
    margin: 0 0 .7rem;
    font-family: var(--font-display);
    font-size: clamp(3rem, 6.2vw, 6.7rem);
    line-height: .9;
    letter-spacing: -.06em;
    font-weight: 600;
}

.process-step p {
    margin: 0;
    font-size: clamp(.9rem, 1.15vw, 1.05rem);
    line-height: 1.6;
}

.process-step__mark {
    font-size: clamp(1.4rem, 2vw, 2rem);
    transform: rotate(0);
    transition: transform .35s ease;
}

.process-step.is-active .process-step__mark {
    transform: rotate(45deg);
    color: var(--process-accent);
}

/* Selected Work */
.selected-work {
    background: var(--c-white);
    color: var(--c-ink);
    padding: clamp(7rem, 12vw, 13rem) 0;
}

.selected-work__header {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(3rem, 8vw, 9rem);
    align-items: end;
    margin-bottom: clamp(4rem, 7vw, 7rem);
}

.selected-work__header h2 {
    margin: 1.4rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(4rem, 7.6vw, 8.2rem);
    line-height: .86;
    letter-spacing: -.065em;
    font-weight: 600;
}

.selected-work__header h2 span {
    color: var(--c-purple);
}

.selected-work__intro {
    max-width: 560px;
    line-height: 1.75;
    margin: 0;
}

.selected-work__grid {
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
}

.work-card {
    position: relative;
}

.work-card__link {
    display: grid;
    grid-template-columns: 1.55fr .45fr;
    min-height: clamp(520px, 62vw, 820px);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

.work-card__media {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    background: var(--c-blue);
}

.work-card--purple .work-card__media {
    background:
        radial-gradient(circle at 76% 22%, rgba(107,227,189,.9) 0 11%, transparent 11.4%),
        linear-gradient(135deg, #58ACF2 0 42%, #4C328B 42% 100%);
}

.work-card--mint .work-card__media {
    background:
        radial-gradient(circle at 24% 72%, rgba(88,172,242,.85) 0 13%, transparent 13.4%),
        linear-gradient(135deg, #6BE3BD 0 52%, #F6F2E8 52% 100%);
}

.work-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .75s cubic-bezier(.16,1,.3,1);
}

.work-card:hover .work-card__image {
    transform: scale(1.035);
}

.work-card__ghost {
    position: absolute;
    left: -.05em;
    bottom: -.15em;
    font-family: var(--font-display);
    font-size: clamp(9rem, 24vw, 27rem);
    line-height: .72;
    letter-spacing: -.09em;
    font-weight: 700;
    color: rgba(255,255,255,.22);
    white-space: nowrap;
    pointer-events: none;
}

.work-card--mint .work-card__ghost {
    color: rgba(76,50,139,.18);
}

.work-card__sticker {
    position: absolute;
    right: 5%;
    top: 8%;
    padding: .62rem .85rem;
    border-radius: 999px;
    background: var(--c-white);
    color: var(--c-ink);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    transform: rotate(4deg);
}

.work-card__sticker--two {
    top: auto;
    right: auto;
    left: 7%;
    bottom: 10%;
    background: var(--c-mint);
    transform: rotate(-4deg);
}

.work-card--mint .work-card__sticker {
    background: var(--c-purple);
    color: var(--c-white);
}

.work-card--mint .work-card__sticker--two {
    background: var(--c-blue);
    color: var(--c-ink);
}

.work-card__meta {
    padding: clamp(1.8rem, 3.2vw, 3.5rem);
    display: flex;
    flex-direction: column;
    background: var(--c-cream);
    border-left: 1px solid rgba(23,21,28,.08);
}

.work-card--mint .work-card__meta {
    background: var(--c-purple);
    color: var(--c-white);
}

.work-card__number {
    font-size: .72rem;
    letter-spacing: .1em;
    opacity: .55;
}

.work-card__meta > div {
    margin-top: auto;
}

.work-card__meta h3 {
    margin: 0 0 1.2rem;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.3vw, 4.8rem);
    line-height: .92;
    letter-spacing: -.055em;
    font-weight: 600;
}

.work-card__meta p {
    margin: 0;
    line-height: 1.65;
    font-size: .9rem;
}

.work-card__view {
    margin-top: auto;
    padding-top: 2rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.selected-work__footer {
    margin-top: clamp(2rem, 4vw, 4rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--c-line);
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: center;
}

.selected-work__footer p {
    max-width: 600px;
    margin: 0;
    font-size: .85rem;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .process__layout {
        grid-template-columns: 1fr;
    }

    .process__sticky {
        position: relative;
        top: 0;
        min-height: auto;
    }

    .process__word {
        margin-top: 3rem;
        font-size: clamp(4rem, 18vw, 8rem);
    }

    .process-step {
        min-height: 32vh;
        grid-template-columns: 52px 1fr auto;
    }

    .selected-work__header {
        grid-template-columns: 1fr;
    }

    .work-card__link {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .work-card__media {
        min-height: 62vw;
    }

    .work-card__meta {
        min-height: 340px;
        border-left: 0;
        border-top: 1px solid rgba(23,21,28,.08);
    }
}

@media (max-width: 520px) {
    .process-step {
        min-height: 28vh;
        grid-template-columns: 38px 1fr auto;
        gap: .8rem;
    }

    .process-step h3 {
        font-size: clamp(2.5rem, 13vw, 4rem);
    }

    .process__intro {
        font-size: .9rem;
    }

    .selected-work__header h2 {
        font-size: clamp(3.4rem, 15vw, 5rem);
    }

    .work-card__media {
        min-height: 86vw;
    }

    .work-card__meta {
        min-height: 310px;
        padding: 1.5rem;
    }

    .selected-work__footer {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* =========================================================
   CONEXIA v1.4 — ABOUT + CONTACT
   ========================================================= */

/* About */
.about-conexia {
    background: var(--c-cream);
    color: var(--c-ink);
    padding: clamp(7rem, 12vw, 13rem) 0;
    overflow: hidden;
}

.about-conexia__top {
    display: grid;
    grid-template-columns: .45fr 1.55fr;
    gap: 5vw;
    align-items: start;
    margin-bottom: clamp(4rem, 8vw, 8rem);
}

.about-conexia__top h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(4rem, 7.8vw, 8.4rem);
    line-height: .86;
    letter-spacing: -.065em;
    font-weight: 600;
}

.about-conexia__top h2 span {
    color: var(--c-purple);
}

.about-conexia__grid {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: clamp(3rem, 8vw, 9rem);
    align-items: stretch;
}

.about-conexia__lead {
    margin: 0 0 1rem;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 600;
}

.about-conexia__question {
    margin: 0;
    max-width: 580px;
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4vw, 4.4rem);
    line-height: .96;
    letter-spacing: -.045em;
    font-weight: 600;
}

.about-conexia__copy {
    margin-top: clamp(2rem, 4vw, 4rem);
    max-width: 590px;
}

.about-conexia__copy p {
    line-height: 1.75;
}

.about-conexia__visual {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    grid-template-rows: 1fr .8fr;
    gap: 1rem;
    min-height: 620px;
}

.about-tile {
    position: relative;
    overflow: hidden;
    padding: clamp(1.4rem, 2.4vw, 2.3rem);
    display: flex;
    flex-direction: column;
}

.about-tile--purple {
    grid-row: 1 / 3;
    background: var(--c-purple);
    color: var(--c-white);
}

.about-tile--blue {
    background: var(--c-blue);
    color: var(--c-ink);
}

.about-tile--mint {
    background: var(--c-mint);
    color: var(--c-purple);
}

.about-tile__small {
    font-size: .7rem;
    letter-spacing: .1em;
    opacity: .65;
}

.about-tile__word {
    margin-top: auto;
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 5vw, 5.8rem);
    line-height: .82;
    letter-spacing: -.065em;
    font-weight: 700;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.about-tile--blue .about-tile__word,
.about-tile--mint .about-tile__word {
    writing-mode: initial;
    transform: none;
}

.about-tile--blue img {
    position: absolute;
    width: 78%;
    right: -24%;
    bottom: -14%;
    opacity: .16;
    transform: rotate(-12deg);
}

.about-tile__spark {
    position: absolute;
    right: 8%;
    top: 7%;
    font-size: clamp(3rem, 7vw, 7rem);
    color: var(--c-mint);
    opacity: .8;
}

.about-tile__note {
    margin-top: auto;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 2rem);
    line-height: 1;
}

.about-conexia__principles {
    margin-top: clamp(5rem, 9vw, 9rem);
    border-top: 1px solid var(--c-line);
}

.about-principle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 1.1rem 0 1.3rem;
    border-bottom: 1px solid var(--c-line);
    align-items: center;
}

.about-principle span {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 3rem);
    letter-spacing: -.035em;
    font-weight: 600;
}

.about-principle p {
    margin: 0;
    font-size: clamp(.95rem, 1.2vw, 1.1rem);
}

/* Contact experience */
.contact-experience {
    position: relative;
    background: var(--c-purple);
    color: var(--c-white);
    overflow: hidden;
}

.contact-experience__marquee {
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.2);
    background: var(--c-mint);
    color: var(--c-purple);
}

.contact-experience__marquee > div {
    width: max-content;
    display: flex;
    gap: 2rem;
    padding: .85rem 0;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.6vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -.02em;
    animation: contactRail 24s linear infinite;
}

@keyframes contactRail {
    from { transform: translateX(0); }
    to { transform: translateX(-25%); }
}

.contact-experience__inner {
    min-height: 88vh;
    padding-top: clamp(6rem, 10vw, 10rem);
    padding-bottom: clamp(6rem, 10vw, 10rem);
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(4rem, 9vw, 10rem);
    align-items: start;
}

.contact-experience__intro {
    position: sticky;
    top: calc(var(--header-h) + 7vh);
}

.contact-experience__intro h2 {
    margin: 1.5rem 0 2rem;
    font-family: var(--font-display);
    font-size: clamp(4rem, 7.4vw, 8rem);
    line-height: .86;
    letter-spacing: -.065em;
    font-weight: 600;
}

.contact-experience__intro h2 span {
    color: var(--c-mint);
}

.contact-experience__intro > p {
    max-width: 510px;
    line-height: 1.7;
    color: rgba(255,255,255,.75);
}

.contact-experience__socials {
    margin-top: 3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
}

.contact-experience__socials a {
    color: var(--c-white);
    text-decoration: none;
    font-size: .8rem;
    border-bottom: 1px solid rgba(255,255,255,.4);
    padding-bottom: .2rem;
}

.contact-experience__form-wrap {
    position: relative;
    z-index: 2;
}

.contact-form {
    border-top: 1px solid rgba(255,255,255,.24);
}

.contact-form__hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-field {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.5rem;
    align-items: start;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,.24);
}

.contact-field > span {
    padding-top: .7rem;
    font-size: .7rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255,255,255,.58);
}

.contact-field input,
.contact-field textarea,
.contact-field select {
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--c-white);
    outline: 0;
    padding: .5rem 0;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.5vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -.035em;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: rgba(255,255,255,.32);
}

.contact-field select {
    appearance: none;
    cursor: pointer;
}

.contact-field select option {
    color: var(--c-ink);
    background: var(--c-white);
}

.contact-field textarea {
    resize: vertical;
    min-height: 145px;
}

.contact-field:focus-within {
    border-bottom-color: var(--c-mint);
}

.contact-form__submit {
    width: 100%;
    margin-top: 2rem;
    border: 0;
    border-radius: 0;
    padding: clamp(1.2rem, 2.2vw, 2rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--c-mint);
    color: var(--c-purple);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 2.8rem);
    font-weight: 600;
    transition: transform .3s ease, background-color .3s ease;
}

.contact-form__submit:hover {
    transform: translateY(-4px);
    background: var(--c-white);
}

.contact-success {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 5rem);
    background: var(--c-mint);
    color: var(--c-purple);
}

.contact-success > span {
    font-size: 4rem;
}

.contact-success h3 {
    margin: auto 0 1rem;
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: .9;
    letter-spacing: -.05em;
}

.contact-success p {
    margin: 0;
}

/* Compact footer */
.site-footer--compact {
    padding: 0;
    background: var(--c-ink);
}

.site-footer__bottom--compact {
    margin-top: 0;
    padding: 1.5rem 0;
    border-top: 0;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 2rem;
    align-items: center;
}

.site-footer__links {
    display: flex;
    gap: 1rem;
}

.site-footer__links a {
    color: inherit;
    text-decoration: none;
}

@media (max-width: 900px) {
    .about-conexia__top,
    .about-conexia__grid {
        grid-template-columns: 1fr;
    }

    .about-conexia__visual {
        min-height: 540px;
    }

    .contact-experience__inner {
        grid-template-columns: 1fr;
    }

    .contact-experience__intro {
        position: static;
    }

    .site-footer__bottom--compact {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .about-conexia__visual {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, minmax(220px, auto));
        min-height: 0;
    }

    .about-tile--purple {
        grid-row: auto;
    }

    .about-tile__word {
        writing-mode: initial;
        transform: none;
    }

    .about-principle {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .contact-field {
        grid-template-columns: 1fr;
        gap: .2rem;
    }

    .contact-field > span {
        padding-top: 0;
    }

    .contact-experience__intro h2 {
        font-size: clamp(3.6rem, 15vw, 5.2rem);
    }

    .site-footer__bottom--compact {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-experience__marquee > div {
        animation: none !important;
    }

    .contact-form__submit {
        transition: none !important;
    }
}


/* =========================================================
   CONEXIA v1.5 — PROJECT CMS + CASE STUDIES + SEO/POLISH
   ========================================================= */

.contact-error {
    margin-bottom: 1rem;
    padding: 1rem 1.2rem;
    background: var(--c-white);
    color: var(--c-purple);
    font-size: .85rem;
}

/* Project archive */
.projects-archive {
    background: var(--c-white);
}

.projects-archive__hero {
    padding: calc(var(--header-h) + clamp(5rem, 9vw, 9rem)) 0 clamp(5rem, 8vw, 8rem);
    background: var(--c-cream);
}

.projects-archive__hero h1 {
    margin: 1.4rem 0 2rem;
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 9.5vw, 10rem);
    line-height: .8;
    letter-spacing: -.075em;
    font-weight: 650;
}

.projects-archive__hero h1 span {
    display: inline-block;
    color: var(--c-white);
    background: var(--c-purple);
    padding: .04em .1em .08em;
    box-shadow: .07em .07em 0 var(--c-blue);
}

.projects-archive__intro {
    margin: 0 0 0 auto;
    max-width: 600px;
    font-size: clamp(1rem, 1.45vw, 1.25rem);
    line-height: 1.7;
}

.projects-archive__list {
    padding: clamp(5rem, 9vw, 9rem) 0;
}

.projects-archive__grid {
    display: grid;
    gap: clamp(2rem, 5vw, 5rem);
}

.archive-project a {
    display: grid;
    grid-template-columns: 1.45fr .55fr;
    color: inherit;
    text-decoration: none;
}

.archive-project__media {
    min-height: clamp(420px, 52vw, 720px);
    background: var(--c-blue);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.archive-project:nth-child(even) .archive-project__media {
    background: var(--c-mint);
}

.archive-project__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.16,1,.3,1);
}

.archive-project:hover .archive-project__media img {
    transform: scale(1.035);
}

.archive-project__media > span {
    font-family: var(--font-display);
    font-size: clamp(7rem, 18vw, 18rem);
    font-weight: 700;
    letter-spacing: -.08em;
    color: rgba(76,50,139,.2);
}

.archive-project__meta {
    padding: clamp(1.5rem, 3vw, 3rem);
    display: flex;
    flex-direction: column;
    background: var(--c-purple);
    color: var(--c-white);
}

.archive-project:nth-child(even) .archive-project__meta {
    background: var(--c-cream);
    color: var(--c-ink);
}

.archive-project__index {
    font-size: .7rem;
    letter-spacing: .1em;
    opacity: .6;
}

.archive-project__meta > div {
    margin-top: auto;
}

.archive-project__meta h2 {
    margin: 0 0 .7rem;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 4.4rem);
    line-height: .9;
    letter-spacing: -.055em;
}

.archive-project__meta p,
.archive-project__meta small {
    display: block;
    margin: .3rem 0 0;
}

.archive-project__meta small {
    opacity: .65;
    line-height: 1.5;
}

.archive-project__arrow {
    margin-top: auto;
    align-self: flex-end;
    font-size: 1.5rem;
}

.projects-empty {
    padding: 5rem 0;
}

.projects-empty h2 {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 6vw, 6rem);
    letter-spacing: -.05em;
    line-height: .9;
}

/* Case study */
.case-study {
    background: var(--c-white);
}

.case-hero {
    padding: calc(var(--header-h) + clamp(4rem, 8vw, 8rem)) 0 clamp(4rem, 7vw, 7rem);
    background: var(--c-cream);
}

.case-back {
    display: inline-block;
    margin-bottom: clamp(3rem, 6vw, 6rem);
    text-decoration: none;
    font-size: .8rem;
}

.case-hero__grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: clamp(3rem, 8vw, 9rem);
    align-items: end;
}

.case-hero h1 {
    margin: 1.2rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 10vw, 11rem);
    line-height: .8;
    letter-spacing: -.075em;
    font-weight: 650;
}

.case-meta {
    margin: 0;
    border-top: 1px solid var(--c-line);
}

.case-meta > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--c-line);
}

.case-meta dt {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    opacity: .55;
}

.case-meta dd {
    margin: 0;
    font-size: .86rem;
    line-height: 1.5;
}

.case-cover {
    width: 100%;
    background: var(--c-purple);
}

.case-cover__image {
    width: 100%;
    max-height: 90vh;
    object-fit: cover;
}

.case-story {
    padding: clamp(6rem, 11vw, 11rem) 0;
    background: var(--c-white);
}

.case-story__grid {
    display: grid;
    gap: 1px;
    background: var(--c-line);
}

.case-story__block {
    position: relative;
    padding: clamp(2rem, 5vw, 5rem);
    background: var(--c-cream);
}

.case-story__block--accent {
    background: var(--c-blue);
}

.case-story__number {
    position: absolute;
    right: 2rem;
    top: 1.5rem;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 1;
    opacity: .13;
}

.case-story__block h2 {
    max-width: 1100px;
    margin: clamp(2rem, 5vw, 5rem) 0 0;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5.3vw, 5.6rem);
    line-height: .96;
    letter-spacing: -.05em;
    font-weight: 550;
}

.case-content {
    padding: clamp(2rem, 5vw, 5rem) 0 clamp(7rem, 12vw, 12rem);
    background: var(--c-white);
}

.case-content__inner {
    max-width: 1200px;
}

.case-content__inner > * {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.case-content__inner p {
    max-width: 760px;
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    line-height: 1.8;
}

.case-content__inner figure {
    margin-left: 0;
    margin-right: 0;
}

.case-content__inner img,
.case-content__inner video {
    width: 100%;
    height: auto;
}

.case-content__inner .wp-block-gallery {
    gap: 1rem;
}

.case-next {
    padding: clamp(6rem, 10vw, 10rem) 0;
    background: var(--c-purple);
    color: var(--c-white);
}

.case-next__inner {
    display: grid;
    grid-template-columns: .5fr 1.2fr auto;
    gap: 3rem;
    align-items: end;
}

.case-next h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3.8rem, 7vw, 7.5rem);
    line-height: .86;
    letter-spacing: -.06em;
}

/* pagination */
.navigation.pagination {
    margin-top: 4rem;
}

.nav-links {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.nav-links .page-numbers {
    min-width: 42px;
    min-height: 42px;
    display: inline-grid;
    place-items: center;
    padding: .5rem;
    border: 1px solid var(--c-line);
    text-decoration: none;
}

.nav-links .current {
    background: var(--c-purple);
    border-color: var(--c-purple);
    color: var(--c-white);
}

@media (max-width: 900px) {
    .archive-project a,
    .case-hero__grid,
    .case-next__inner {
        grid-template-columns: 1fr;
    }

    .archive-project__media {
        min-height: 62vw;
    }

    .archive-project__meta {
        min-height: 330px;
    }

    .case-meta {
        margin-top: 1rem;
    }
}

@media (max-width: 520px) {
    .projects-archive__hero h1,
    .case-hero h1 {
        font-size: clamp(3.8rem, 17vw, 5.5rem);
    }

    .archive-project__media {
        min-height: 85vw;
    }

    .archive-project__meta {
        min-height: 290px;
    }

    .case-story__block {
        padding: 1.5rem;
    }

    .case-story__number {
        right: 1.2rem;
        top: 1.2rem;
    }
}


/* =========================================================
   CONEXIA v1.6 — CASE EXPERIENCE
   Gallery + animated metrics + video + editorial closing
   ========================================================= */

.case-hero--v16 {
    position: relative;
    overflow: hidden;
}

.case-hero__orb {
    position: absolute;
    width: clamp(240px, 32vw, 560px);
    aspect-ratio: 1;
    border-radius: 50%;
    right: -10vw;
    top: 18%;
    background: var(--c-mint);
    opacity: .22;
    pointer-events: none;
}

.case-cover--editorial {
    background: var(--c-purple);
    padding: clamp(1rem, 2vw, 2rem);
}

.case-cover__frame {
    overflow: hidden;
    background: var(--c-cream);
}

.case-cover--editorial .case-cover__image {
    min-height: min(86vh, 880px);
    object-fit: cover;
}

.case-story--v16 .case-story__grid {
    grid-template-columns: 1fr 1fr;
}

.case-story--v16 .case-story__block {
    min-height: 68vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.case-story--v16 .case-story__block h2 {
    font-size: clamp(2.2rem, 4.7vw, 5rem);
}

.case-metrics {
    padding: clamp(7rem, 12vw, 12rem) 0;
    background: var(--c-ink);
    color: var(--c-white);
    overflow: hidden;
}

.case-metrics__header {
    display: grid;
    grid-template-columns: .35fr 1fr .65fr;
    gap: clamp(2rem, 6vw, 7rem);
    align-items: end;
    margin-bottom: clamp(4rem, 8vw, 8rem);
}

.case-metrics__header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(4rem, 8vw, 8.5rem);
    line-height: .82;
    letter-spacing: -.07em;
    font-weight: 650;
}

.case-metrics__header h2 span {
    color: var(--c-mint);
}

.case-metrics__header > p:last-child {
    margin: 0;
    line-height: 1.7;
    color: rgba(255,255,255,.68);
}

.case-metrics__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255,255,255,.16);
}

.case-metric {
    min-height: 330px;
    padding: clamp(1.6rem, 3vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--c-purple);
}

.case-metric:nth-child(2) {
    background: var(--c-blue);
    color: var(--c-ink);
}

.case-metric:nth-child(3) {
    background: var(--c-mint);
    color: var(--c-purple);
}

.case-metric:nth-child(4) {
    background: var(--c-cream);
    color: var(--c-ink);
}

.case-metric strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 10vw, 10rem);
    line-height: .75;
    letter-spacing: -.075em;
    font-weight: 700;
}

.case-metric span {
    max-width: 320px;
    font-size: .78rem;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.case-content--editorial {
    padding-top: clamp(7rem, 12vw, 12rem);
}

.case-content__intro {
    display: grid;
    grid-template-columns: .35fr 1.65fr;
    gap: 4vw;
    align-items: start;
    margin-bottom: clamp(4rem, 7vw, 7rem);
}

.case-content__intro h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3.6rem, 7vw, 7.4rem);
    line-height: .86;
    letter-spacing: -.06em;
    font-weight: 600;
}

.case-content__intro h2 span {
    color: var(--c-purple);
}

.case-content--editorial .case-content__inner {
    max-width: none;
}

.case-content--editorial .case-content__inner > .wp-block-gallery {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(.75rem, 1.3vw, 1.3rem);
    align-items: start;
}

.case-content--editorial .wp-block-gallery .wp-block-image {
    width: auto !important;
    margin: 0 !important;
    grid-column: span 6;
}

.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(3n+1) {
    grid-column: span 7;
}

.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(3n+2) {
    grid-column: span 5;
    margin-top: clamp(2rem, 7vw, 7rem) !important;
}

.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(3n+3) {
    grid-column: 3 / span 8;
    margin-top: clamp(2rem, 5vw, 5rem) !important;
}

.case-content--editorial .wp-block-gallery img {
    width: 100%;
    height: auto;
    transition: transform .75s cubic-bezier(.16,1,.3,1);
}

.case-content--editorial .wp-block-gallery .wp-block-image:hover img {
    transform: scale(.985);
}

.case-content--editorial .wp-block-video,
.case-content--editorial > .section-wrap > .case-content__inner > video {
    margin-top: clamp(3rem, 7vw, 7rem);
}

.case-video {
    padding: clamp(7rem, 12vw, 12rem) 0;
    background: var(--c-blue);
    color: var(--c-ink);
}

.case-video__header {
    display: grid;
    grid-template-columns: .4fr 1.6fr;
    gap: 4vw;
    margin-bottom: clamp(3rem, 6vw, 6rem);
}

.case-video__header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(4rem, 7.5vw, 8rem);
    line-height: .84;
    letter-spacing: -.065em;
}

.case-video__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--c-ink);
    overflow: hidden;
}

.case-video__frame iframe,
.case-video__frame video,
.case-video__frame .wp-video,
.case-video__frame .mejs-container {
    width: 100% !important;
    height: 100% !important;
}

.case-closing {
    padding: clamp(8rem, 14vw, 15rem) 0;
    background: var(--c-cream);
}

.case-closing h2 {
    max-width: 1250px;
    margin: 2rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(4rem, 8.5vw, 9rem);
    line-height: .86;
    letter-spacing: -.07em;
    font-weight: 620;
}

@media (max-width: 900px) {
    .case-story--v16 .case-story__grid,
    .case-metrics__header,
    .case-content__intro,
    .case-video__header {
        grid-template-columns: 1fr;
    }

    .case-story--v16 .case-story__block {
        min-height: auto;
    }

    .case-metrics__grid {
        grid-template-columns: 1fr 1fr;
    }

    .case-content--editorial .case-content__inner > .wp-block-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .case-content--editorial .wp-block-gallery .wp-block-image,
    .case-content--editorial .wp-block-gallery .wp-block-image:nth-child(3n+1),
    .case-content--editorial .wp-block-gallery .wp-block-image:nth-child(3n+2),
    .case-content--editorial .wp-block-gallery .wp-block-image:nth-child(3n+3) {
        grid-column: auto;
        margin-top: 0 !important;
    }
}

@media (max-width: 520px) {
    .case-cover--editorial {
        padding: .6rem;
    }

    .case-cover--editorial .case-cover__image {
        min-height: 70vh;
    }

    .case-metrics__grid {
        grid-template-columns: 1fr;
    }

    .case-metric {
        min-height: 240px;
    }

    .case-content--editorial .case-content__inner > .wp-block-gallery {
        grid-template-columns: 1fr;
    }

    .case-video__frame {
        aspect-ratio: 9 / 16;
        max-height: 80vh;
    }
}


/* =========================================================
   CONEXIA v1.6.1 — NOVA GALLERY REFINEMENT
   More hierarchy, less zig-zag, more breathing room.
   ========================================================= */

.case-story--v16 .case-story__block h2 {
    max-width: 92%;
    font-size: clamp(2rem, 4.1vw, 4.4rem);
    line-height: 1;
}

.case-content__intro {
    margin-bottom: clamp(5rem, 9vw, 9rem);
}

.case-content__intro h2 {
    max-width: 1100px;
}

/* Reset the more random v1.6 gallery offsets */
.case-content--editorial .case-content__inner > .wp-block-gallery {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 1.6vw, 1.6rem);
    row-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
}

.case-content--editorial .wp-block-gallery .wp-block-image,
.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(3n+1),
.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(3n+2),
.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(3n+3) {
    margin: 0 !important;
    grid-column: auto;
}

/* Group 1 — two protagonists */
.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(1) {
    grid-column: 1 / span 7;
}

.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(2) {
    grid-column: 8 / span 5;
    align-self: end;
}

/* Group 2 — one strong full-width pause */
.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(3) {
    grid-column: 3 / span 8;
}

/* Group 3 — territory / institutional pair */
.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(4) {
    grid-column: 1 / span 6;
}

.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(5) {
    grid-column: 7 / span 6;
}

/* Group 4 — lighter visual ending */
.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(6) {
    grid-column: 2 / span 5;
}

.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(7) {
    grid-column: 7 / span 5;
}

/* If there are more images, they become a clean two-column rhythm */
.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(n+8) {
    grid-column: span 6;
}

/* Give every piece a deliberate "art board" instead of floating randomly */
.case-content--editorial .wp-block-gallery .wp-block-image {
    position: relative;
    padding: clamp(.45rem, .8vw, .8rem);
    background: var(--c-cream);
    overflow: hidden;
}

.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(odd) {
    background: rgba(88,172,242,.08);
}

.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(even) {
    background: rgba(107,227,189,.10);
}

.case-content--editorial .wp-block-gallery img {
    display: block;
    width: 100%;
    height: auto;
}

/* Visual separators between content families */
.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(3),
.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(4),
.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(6) {
    margin-top: clamp(1rem, 2vw, 2rem) !important;
}

/* Optional captions look editorial and quiet */
.case-content--editorial .wp-block-gallery figcaption {
    position: static !important;
    background: none !important;
    color: var(--c-ink) !important;
    padding: .7rem .1rem 0 !important;
    font-size: .68rem !important;
    line-height: 1.4 !important;
    text-align: left !important;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Keep the final piece from overpowering the main campaign work */
.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(7) {
    opacity: .96;
}

/* Mobile: clean single column, no forced asymmetry */
@media (max-width: 900px) {
    .case-content--editorial .case-content__inner > .wp-block-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 1.5rem;
    }

    .case-content--editorial .wp-block-gallery .wp-block-image:nth-child(1),
    .case-content--editorial .wp-block-gallery .wp-block-image:nth-child(2),
    .case-content--editorial .wp-block-gallery .wp-block-image:nth-child(3),
    .case-content--editorial .wp-block-gallery .wp-block-image:nth-child(4),
    .case-content--editorial .wp-block-gallery .wp-block-image:nth-child(5),
    .case-content--editorial .wp-block-gallery .wp-block-image:nth-child(6),
    .case-content--editorial .wp-block-gallery .wp-block-image:nth-child(7),
    .case-content--editorial .wp-block-gallery .wp-block-image:nth-child(n+8) {
        grid-column: span 1;
        margin-top: 0 !important;
    }

    .case-content--editorial .wp-block-gallery .wp-block-image:nth-child(3) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .case-content--editorial .case-content__inner > .wp-block-gallery {
        grid-template-columns: 1fr;
        row-gap: 1.25rem;
    }

    .case-content--editorial .wp-block-gallery .wp-block-image:nth-child(1),
    .case-content--editorial .wp-block-gallery .wp-block-image:nth-child(2),
    .case-content--editorial .wp-block-gallery .wp-block-image:nth-child(3),
    .case-content--editorial .wp-block-gallery .wp-block-image:nth-child(4),
    .case-content--editorial .wp-block-gallery .wp-block-image:nth-child(5),
    .case-content--editorial .wp-block-gallery .wp-block-image:nth-child(6),
    .case-content--editorial .wp-block-gallery .wp-block-image:nth-child(7),
    .case-content--editorial .wp-block-gallery .wp-block-image:nth-child(n+8) {
        grid-column: 1;
    }
}


/* =========================================================
   CONEXIA v1.6.2 — CASE TEXT + GALLERY SYSTEM
   Cleaner story blocks and a more intentional gallery.
   ========================================================= */

/* Story blocks: smaller type, shorter blocks, more readable */
.case-story--v16 .case-story__block {
    min-height: 52vh;
    padding: clamp(2rem, 4vw, 4rem);
}

.case-story--v16 .case-story__block h2 {
    max-width: 94%;
    font-size: clamp(1.55rem, 2.75vw, 2.85rem);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 540;
}

.case-story--v16 .case-story__number {
    font-size: clamp(2rem, 4vw, 4rem);
    opacity: .10;
}

/* Gallery: reset all previous asymmetric experiments */
.case-content--editorial .case-content__inner > .wp-block-gallery {
    width: min(100%, 1180px);
    margin-inline: auto;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1.2rem, 2vw, 2rem);
    align-items: stretch;
}

.case-content--editorial .wp-block-gallery .wp-block-image,
.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(1),
.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(2),
.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(3),
.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(4),
.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(5),
.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(6),
.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(7),
.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(n+8) {
    grid-column: span 6;
    margin: 0 !important;
    padding: clamp(.9rem, 1.6vw, 1.5rem);
    background: var(--c-cream);
    border: 1px solid rgba(23,21,28,.08);
    display: grid;
    place-items: center;
    min-width: 0;
    overflow: hidden;
}

.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(odd) {
    background: rgba(88,172,242,.065);
}

.case-content--editorial .wp-block-gallery .wp-block-image:nth-child(even) {
    background: rgba(107,227,189,.085);
}

.case-content--editorial .wp-block-gallery .wp-block-image img {
    width: 100%;
    height: auto;
    max-height: 720px;
    object-fit: contain;
    display: block;
}

/* First item becomes the visual anchor, but stays orderly */
.case-content--editorial .wp-block-gallery .wp-block-image:first-child {
    grid-column: 1 / -1;
    padding: clamp(1.2rem, 2.5vw, 2.4rem);
    background: var(--c-white);
}

.case-content--editorial .wp-block-gallery .wp-block-image:first-child img {
    width: min(100%, 760px);
    max-height: 820px;
}

/* Last item can breathe as a closing piece */
.case-content--editorial .wp-block-gallery .wp-block-image:last-child {
    grid-column: 4 / span 6;
    margin-top: clamp(1rem, 2vw, 2rem) !important;
}

/* Nova-specific curation:
   Current editor order is:
   1 Crédito Escolar
   2 Halloween
   3 Crédito Express
   4 Kits
   5 Cuenta Ahorros
   6 Otavalo
   7 Ibarra
   We move Halloween to the end so the narrative reads better. */
.case-study--cooperativa-nova-indigena .wp-block-gallery .wp-block-image:nth-child(1) { order: 1; }
.case-study--cooperativa-nova-indigena .wp-block-gallery .wp-block-image:nth-child(3) { order: 2; }
.case-study--cooperativa-nova-indigena .wp-block-gallery .wp-block-image:nth-child(4) { order: 3; }
.case-study--cooperativa-nova-indigena .wp-block-gallery .wp-block-image:nth-child(5) { order: 4; }
.case-study--cooperativa-nova-indigena .wp-block-gallery .wp-block-image:nth-child(6) { order: 5; }
.case-study--cooperativa-nova-indigena .wp-block-gallery .wp-block-image:nth-child(7) { order: 6; }
.case-study--cooperativa-nova-indigena .wp-block-gallery .wp-block-image:nth-child(2) {
    order: 7;
    grid-column: 4 / span 6;
    margin-top: clamp(1rem, 2vw, 2rem) !important;
}

/* Nova: remove the generic "last item centered" rule from Ibarra;
   Halloween is now the actual visual ending. */
.case-study--cooperativa-nova-indigena .wp-block-gallery .wp-block-image:nth-child(7) {
    grid-column: span 6;
    margin-top: 0 !important;
}

/* Captions, if used */
.case-content--editorial .wp-block-gallery figcaption {
    position: static !important;
    width: 100%;
    margin-top: .75rem;
    padding: 0 !important;
    background: none !important;
    color: var(--c-ink) !important;
    text-align: left !important;
    font-size: .65rem !important;
    line-height: 1.45 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Tablet */
@media (max-width: 900px) {
    .case-story--v16 .case-story__block {
        min-height: auto;
    }

    .case-story--v16 .case-story__block h2 {
        font-size: clamp(1.45rem, 4vw, 2.1rem);
        max-width: 100%;
    }

    .case-content--editorial .case-content__inner > .wp-block-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .case-content--editorial .wp-block-gallery .wp-block-image,
    .case-content--editorial .wp-block-gallery .wp-block-image:first-child,
    .case-content--editorial .wp-block-gallery .wp-block-image:last-child,
    .case-study--cooperativa-nova-indigena .wp-block-gallery .wp-block-image:nth-child(2),
    .case-study--cooperativa-nova-indigena .wp-block-gallery .wp-block-image:nth-child(7) {
        grid-column: span 1;
        margin-top: 0 !important;
    }

    .case-content--editorial .wp-block-gallery .wp-block-image:first-child {
        grid-column: 1 / -1;
    }
}

/* Mobile */
@media (max-width: 520px) {
    .case-story--v16 .case-story__block {
        padding: 1.4rem;
    }

    .case-story--v16 .case-story__block h2 {
        font-size: 1.35rem;
        line-height: 1.12;
    }

    .case-content--editorial .case-content__inner > .wp-block-gallery {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .case-content--editorial .wp-block-gallery .wp-block-image,
    .case-content--editorial .wp-block-gallery .wp-block-image:first-child,
    .case-content--editorial .wp-block-gallery .wp-block-image:last-child,
    .case-study--cooperativa-nova-indigena .wp-block-gallery .wp-block-image:nth-child(2),
    .case-study--cooperativa-nova-indigena .wp-block-gallery .wp-block-image:nth-child(7) {
        grid-column: 1;
    }

    .case-content--editorial .wp-block-gallery .wp-block-image {
        padding: .75rem;
    }
}


/* =========================================================
   CONEXIA v1.6.3 — ROQUE POLISH + EDITABLE GALLERY TITLE
   ========================================================= */

/* Metrics respond to the actual number of cards */
.case-metrics__grid--1 {
    grid-template-columns: 1fr;
}

.case-metrics__grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.case-metrics__grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* With 3 cards, keep a unified visual rhythm */
.case-metrics__grid--3 .case-metric {
    min-height: 300px;
}

.case-metrics__grid--3 .case-metric:nth-child(1) {
    background: var(--c-purple);
    color: var(--c-white);
}

.case-metrics__grid--3 .case-metric:nth-child(2) {
    background: var(--c-blue);
    color: var(--c-ink);
}

.case-metrics__grid--3 .case-metric:nth-child(3) {
    background: var(--c-mint);
    color: var(--c-purple);
}

/* Roque case: slightly more sober than Nova */
.case-study--roque-vera .case-content--editorial {
    background: #fff;
}

.case-study--roque-vera .case-content__intro h2 span {
    color: var(--c-purple);
}

/* Roque gallery:
   one strong opener, then balanced pairs, then a human closing image.
   This assumes the case-pack order recommended in README. */
.case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(1) {
    grid-column: 1 / -1;
    background: var(--c-white);
}

.case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(1) img {
    width: min(100%, 820px);
}

.case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(2),
.case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(3),
.case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(4),
.case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(5),
.case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(6) {
    grid-column: span 6;
}

.case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(7) {
    grid-column: 3 / span 8;
    background: var(--c-cream);
    margin-top: clamp(1rem, 2vw, 2rem) !important;
}

/* If the user added one extra portrait, use it as a quiet final human beat. */
.case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(8) {
    grid-column: 4 / span 6;
    background: rgba(76, 50, 139, .045);
    margin-top: clamp(1rem, 2vw, 2rem) !important;
}

.case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(7) img,
.case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(8) img {
    max-height: 640px;
}

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

    .case-metrics__grid--3 .case-metric:last-child {
        grid-column: 1 / -1;
    }

    .case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(1),
    .case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(2),
    .case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(3),
    .case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(4),
    .case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(5),
    .case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(6),
    .case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(7),
    .case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(8) {
        grid-column: span 1;
        margin-top: 0 !important;
    }

    .case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(1) {
        grid-column: 1 / -1;
    }
}

/* Mobile */
@media (max-width: 520px) {
    .case-metrics__grid--1,
    .case-metrics__grid--2,
    .case-metrics__grid--3,
    .case-metrics__grid--4 {
        grid-template-columns: 1fr;
    }

    .case-metrics__grid--3 .case-metric:last-child {
        grid-column: 1;
    }

    .case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(1),
    .case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(2),
    .case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(3),
    .case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(4),
    .case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(5),
    .case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(6),
    .case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(7),
    .case-study--roque-vera .wp-block-gallery .wp-block-image:nth-child(8) {
        grid-column: 1;
    }
}