/* Stefan Davchev portfolio refinements - built on the original Rayo template */
.sd-logo {
    display: inline-flex;
    text-decoration: none;
    position: relative;
    z-index: 2;
}

.sd-logo:hover {
    opacity: .72;
}

.sd-menu-links {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-top: 2rem;
}

.sd-menu-links a {
    color: var(--t-medium);
    font-size: 1.6rem;
    text-decoration: none;
}

.sd-menu-links a:hover {
    color: var(--t-bright);
}

.sd-footer-wordmark {
    font-size: clamp(5.6rem,8vw,15rem);
    white-space: nowrap;
}

.sd-footer-location {
    margin-top: 8rem;
    color: var(--t-medium);
    font-size: 1.5rem;
    line-height: 1.5;
}

.sd-footer-cta {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sd-footer-cta .btn {
    align-self: flex-start;
}

.sd-page {
    overflow: hidden;
}

.sd-shell {
    width: min(100% - 4rem,144rem);
    margin-inline: auto;
}

.sd-page-hero {
    padding: 18rem 0 8rem;
}

.sd-page-title {
    font-size: clamp(5.2rem,9.4vw,14rem);
    line-height: .9;
    letter-spacing: -.055em;
    max-width: 125rem;
    margin: 3rem 0 4rem;
}

.sd-page-intro {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: end;
    gap: 4rem;
    max-width: 110rem;
}

.sd-page-intro>p {
    font-size: clamp(2rem,2.3vw,3.4rem);
    line-height: 1.25;
    color: var(--t-medium);
    max-width: 82rem;
}

.sd-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.sd-section {
    padding: 8rem 0;
}

.sd-section--tight {
    padding: 4rem 0;
}

.sd-section--tint {
    background: var(--base-tint);
}

.sd-section--opposite {
    background: var(--base-opp);
    color: var(--t-opp-bright);
}

.sd-section-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: end;
    margin-bottom: 5rem;
}

.sd-section-head h2 {
    font-size: clamp(4rem,6vw,8rem);
    line-height: .95;
    letter-spacing: -.04em;
}

.sd-section-head p {
    font-size: 1.8rem;
    color: var(--t-medium);
    max-width: 60rem;
    justify-self: end;
}

.sd-eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--t-medium);
}

.sd-stat-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
}

.sd-stat {
    border: 1px solid var(--st-muted);
    border-radius: 2.4rem;
    padding: 3rem;
    min-height: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sd-stat strong {
    font-size: clamp(5rem,7vw,9rem);
    line-height: 1;
}

.sd-stat span {
    font-size: 1.6rem;
    color: var(--t-medium);
}

.sd-card-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
}

.sd-card {
    border: 1px solid var(--st-muted);
    border-radius: 2.4rem;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-height: 30rem;
}

.sd-card__num {
    font-size: 1.3rem;
    color: var(--t-medium);
}

.sd-card h3 {
    font-size: clamp(2.8rem,3.5vw,4.8rem);
    line-height: 1;
}

.sd-card p {
    font-size: 1.6rem;
    line-height: 1.55;
    color: var(--t-medium);
}

.sd-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: auto;
}

.sd-project-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 2rem;
}

.sd-project-card {
    border: 1px solid var(--st-muted);
    border-radius: 2.6rem;
    overflow: hidden;
    background: var(--base);
}

.sd-project-card__media {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #171717;
}

.sd-project-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}

.sd-project-card:hover .sd-project-card__media img {
    transform: scale(1.025);
}

.sd-project-card__body {
    padding: 2.8rem;
}

.sd-project-card__tags {
    display: flex;
    gap: .7rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.sd-project-card h2 {
    font-size: clamp(3.2rem,4.2vw,5.8rem);
    line-height: 1;
    margin-bottom: 1rem;
}

.sd-project-card h2 a {
    text-decoration: none;
    color: inherit;
}

.sd-project-card p {
    font-size: 1.6rem;
    color: var(--t-medium);
}

.sd-project-card__links {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    margin-top: 2.5rem;
}

.sd-project-card__links a {
    font-size: 1.4rem;
    color: var(--t-bright);
    text-decoration: none;
}

.sd-project-grid--masonry .sd-project-card:nth-child(2n) {
    transform: translateY(8rem);
    margin-bottom: 8rem;
}

.sd-service-list {
    display: flex;
    flex-direction: column;
}

.sd-service {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
    gap: 4rem;
    align-items: center;
    padding: 4rem 0;
    border-top: 1px solid var(--st-muted);
}

.sd-service:last-child {
    border-bottom: 1px solid var(--st-muted);
}

.sd-service h2 {
    font-size: clamp(3.6rem,5vw,7rem);
    line-height: .95;
}

.sd-service p {
    font-size: 1.7rem;
    line-height: 1.55;
    color: var(--t-medium);
}

.sd-service ul {
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 20rem;
}

.sd-service li {
    font-size: 1.4rem;
    color: var(--t-medium);
    margin: .5rem 0;
}

.sd-process {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.5rem;
}

.sd-process-card {
    border-radius: 2.4rem;
    overflow: hidden;
    border: 1px solid var(--st-muted);
}

.sd-process-card img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}

.sd-process-card div {
    padding: 2.4rem;
}

.sd-process-card h3 {
    font-size: 2.6rem;
    margin-bottom: 1rem;
}

.sd-process-card p {
    font-size: 1.5rem;
    color: var(--t-medium);
    line-height: 1.5;
}

.sd-cta {
    border-radius: 3rem;
    background: var(--base-opp);
    color: var(--t-opp-bright);
    padding: clamp(3rem,6vw,8rem);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4rem;
}

.sd-cta h2 {
    font-size: clamp(4rem,6vw,8rem);
    line-height: .95;
    max-width: 95rem;
}

.sd-cta p {
    font-size: 1.7rem;
    color: var(--t-opp-medium);
    margin-top: 2rem;
    max-width: 65rem;
}

.sd-cta .sd-eyebrow {
    color: var(--t-opp-medium);
}

.sd-project-hero-image {
    margin-top: 5rem;
    border-radius: 3rem;
    overflow: hidden;
    border: 1px solid var(--st-muted);
}

.sd-project-hero-image img {
    display: block;
    width: 100%;
    height: auto;
}

.sd-project-hero-image--brand {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background: #191919;
}

.sd-project-hero-image--brand img {
    width: auto;
    max-width: 78%;
    max-height: 78%;
    object-fit: contain;
}

.sd-project-meta {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
    margin-top: 2rem;
}

.sd-project-meta div {
    border: 1px solid var(--st-muted);
    border-radius: 1.6rem;
    padding: 2rem;
}

.sd-project-meta strong {
    display: block;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--t-medium);
    margin-bottom: .8rem;
}

.sd-project-meta span {
    font-size: 1.6rem;
}

.sd-prose {
    max-width: 92rem;
    margin-inline: auto;
}

.sd-prose h2 {
    font-size: clamp(3.8rem,5vw,6.8rem);
    line-height: 1;
    margin: 7rem 0 2rem;
}

.sd-prose h3 {
    font-size: 3rem;
    margin: 4rem 0 1.5rem;
}

.sd-prose p,
.sd-prose li {
    font-size: 1.8rem;
    line-height: 1.7;
    color: var(--t-medium);
}

.sd-prose ul {
    padding-left: 2.2rem;
}

.sd-prose blockquote {
    font-size: clamp(2.8rem,4vw,5rem);
    line-height: 1.15;
    border-left: 4px solid var(--accent);
    padding-left: 3rem;
    margin: 6rem 0;
    color: var(--t-bright);
}

.sd-faq {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 5rem;
}

.sd-faq-list details {
    border-top: 1px solid var(--st-muted);
    padding: 2.4rem 0;
}

.sd-faq-list details:last-child {
    border-bottom: 1px solid var(--st-muted);
}

.sd-faq-list summary {
    font-size: 2.2rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

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

.sd-faq-list summary:after {
    content: '+';
}

.sd-faq-list details[open] summary:after {
    content: '−';
}

.sd-faq-list details p {
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--t-medium);
    max-width: 72rem;
    padding-top: 1.5rem;
}

.sd-contact-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 2rem;
}

.sd-contact-panel {
    border: 1px solid var(--st-muted);
    border-radius: 2.6rem;
    padding: 3rem;
}

.sd-contact-panel h2 {
    font-size: clamp(3.5rem,5vw,6rem);
    line-height: 1;
}

.sd-contact-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 4rem;
}

.sd-contact-details a,
.sd-contact-details p {
    font-size: 1.7rem;
    color: var(--t-medium);
    text-decoration: none;
}

.sd-contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.sd-field {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.sd-field--full {
    grid-column: 1/-1;
}

.sd-field label {
    font-size: 1.3rem;
    color: var(--t-medium);
}

.sd-field input,
.sd-field select,
.sd-field textarea {
    width: 100%;
    border: 1px solid var(--st-muted);
    border-radius: 1.4rem;
    background: transparent;
    color: var(--t-bright);
    padding: 1.6rem;
    font: inherit;
    font-size: 1.6rem;
}

.sd-field textarea {
    min-height: 19rem;
    resize: vertical;
}

.sd-form-note {
    font-size: 1.3rem;
    color: var(--t-medium);
    grid-column: 1/-1;
}

.sd-form-success {
    display: none;
    border: 1px solid #48bb78;
    border-radius: 1.4rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.sd-form-success.is-visible {
    display: block;
}

.sd-scope-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
}

.sd-scope {
    border: 1px solid var(--st-muted);
    border-radius: 2.4rem;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    min-height: 52rem;
}

.sd-scope--featured {
    background: var(--accent);
    color: #171717;
}

.sd-scope h2 {
    font-size: 4.2rem;
    line-height: 1;
}

.sd-scope>p {
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--t-medium);
    margin: 2rem 0;
}

.sd-scope--featured>p,
.sd-scope--featured li {
    color: #282828;
}

.sd-scope ul {
    list-style: none;
    padding: 0;
    margin: 2rem 0 4rem;
}

.sd-scope li {
    padding: 1rem 0;
    border-top: 1px solid currentColor;
    font-size: 1.5rem;
    opacity: .78;
}

.sd-scope .btn {
    margin-top: auto;
}

.sd-404 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 14rem 0 8rem;
}

.sd-404__layout {
    display: grid;
    grid-template-columns: minmax(0,1.08fr) minmax(36rem,.92fr);
    align-items: center;
    gap: clamp(4rem,7vw,10rem);
}

.sd-404__content {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.sd-404__num {
    font-size: clamp(12rem,19vw,28rem);
    line-height: .7;
    letter-spacing: -.08em;
}

.sd-404 h1 {
    max-width: 76rem;
    font-size: clamp(4rem,5.3vw,7.4rem);
    line-height: .95;
    margin: 4rem 0 2rem;
}

.sd-404 p {
    font-size: 1.8rem;
    color: var(--t-medium);
    max-width: 65rem;
    margin-bottom: 3rem;
}

.sd-404__visual {
    position: relative;
    width: 100%;
    min-width: 0;
}

.sd-404__visual img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 3rem 4rem rgba(22,22,22,.18));
}

@media (max-width:991px){
    .sd-404__layout {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .sd-404__visual {
        width: min(100%,68rem);
    }
}

@media (max-width:991px){
    .sd-page-hero {
        padding-top: 14rem;
    }

    .sd-page-intro,
    .sd-section-head,
    .sd-contact-layout,
    .sd-faq {
        grid-template-columns: 1fr;
    }

    .sd-section-head p {
        justify-self: start;
    }

    .sd-card-grid,
    .sd-stat-grid,
    .sd-scope-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sd-process {
        grid-template-columns: 1fr 1fr;
    }

    .sd-service {
        grid-template-columns: 1fr;
    }

    .sd-project-meta {
        grid-template-columns: 1fr 1fr;
    }

    .sd-project-grid--masonry .sd-project-card:nth-child(2n) {
        transform: none;
        margin-bottom: 0;
    }
}

@media (max-width:767px){
    .sd-shell {
        width: min(100% - 2.4rem,144rem);
    }

    .sd-page-hero {
        padding-top: 12rem;
        padding-bottom: 5rem;
    }

    .sd-page-title {
        font-size: clamp(4.8rem,16vw,8rem);
    }

    .sd-section {
        padding: 5rem 0;
    }

    .sd-project-grid,
    .sd-card-grid,
    .sd-stat-grid,
    .sd-scope-grid,
    .sd-process {
        grid-template-columns: 1fr;
    }

    .sd-project-card__links {
        flex-direction: column;
        gap: 1rem;
    }

    .sd-project-meta {
        grid-template-columns: 1fr;
    }

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

    .sd-field--full {
        grid-column: auto;
    }

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

    .sd-footer-location {
        margin-top: 4rem;
    }
}

/* Progressive enhancement: never leave the portfolio hidden behind the template loader. */
@keyframes sdLoaderFailsafe{
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

.loader {
    /* JavaScript controls the exit so content is revealed before the panel moves. */
    animation: none;
}

.loader.loaded {
    pointer-events: none;
}

@media (prefers-reduced-motion:reduce){
    .loader {
        animation-delay: 1s;
    }
}

/* Featured-project previews: responsive 16:9 cards with video. */
.mxd-pinned-projects .mxd-project-item__media {
    height: auto;
    margin-bottom: 2.2rem;
}

.mxd-pinned-projects .mxd-project-item__preview {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    justify-content: stretch;
}

.mxd-pinned-projects .mxd-project-item__tags {
    position: static;
    width: 100%;
    padding: 1.4rem 0 0;
}

.sd-live-project-preview {
    padding: 1rem;
    background: linear-gradient(145deg,#101010,#292929);
    overflow: hidden;
}

.sd-browser-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 2rem;
    background: #111;
    box-shadow: 0 2.2rem 5rem rgba(0,0,0,.32);
}

.sd-browser-bar {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    height: 4.2rem;
    display: flex;
    align-items: center;
    gap: 1.3rem;
    padding: 0 1.4rem;
    border-bottom: 1px solid rgba(0,0,0,.12);
    background: rgba(232,232,232,.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.sd-browser-dots,
.sd-browser-dots::before,
.sd-browser-dots::after {
    display: block;
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    background: #ff5f57;
}

.sd-browser-dots {
    position: relative;
    flex: 0 0 auto;
    margin-right: 2.4rem;
}

.sd-browser-dots::before,
.sd-browser-dots::after {
    content: '';
    position: absolute;
    top: 0;
}

.sd-browser-dots::before {
    left: 1.5rem;
    background: #febc2e;
}

.sd-browser-dots::after {
    left: 3rem;
    background: #28c840;
}

.sd-browser-address {
    min-width: 0;
    flex: 1;
    padding: .7rem 1.4rem;
    overflow: hidden;
    border-radius: 1rem;
    background: #fff;
    color: #656565;
    font-size: 1.2rem;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sd-browser-screen {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #111;
}

.sd-browser-screen img,
.sd-browser-screen video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    background: #111;
}

.sd-project-video {
    pointer-events: none;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.sd-project-static {
    filter: saturate(.94) contrast(1.02);
}

/* Services keeps the template's animated structure; these images must fill hover and promo frames cleanly. */
.mxd-services-list .hover-reveal__image {
    object-fit: cover;
}

.mxd-promo__images img {
    object-fit: cover;
}

/* Service stack artwork - custom PNG visuals, while keeping the original pinned stack animation. */
.services-stack__image {
    pointer-events: none;
}

.services-stack__image .service-img.sd-service-visual {
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 2.4rem 3.8rem rgba(0,0,0,.24));
    transform-origin: 52% 56%;
    will-change: transform;
}

@media only screen and (max-width:991px){
    .services-stack__image {
        min-height: 28rem;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 1rem 0 0;
    }

    .services-stack__image .service-img.sd-service-visual {
        display: block;
        position: relative;
        width: min(74vw,34rem);
        height: auto;
        max-height: 31rem;
        margin-left: auto;
        right: auto;
        bottom: auto;
    }

    .services-stack__image .service-img-m.sd-service-visual {
        display: none;
    }
}

@media only screen and (min-width:992px){
    .services-stack__image .service-img.sd-service-visual {
        right: 1.5%;
        bottom: 3%;
        height: 91%;
        max-width: 46%;
        width: auto;
    }

    .stack-item:nth-child(2) .services-stack__image .service-img.sd-service-visual {
        right: 3%;
        height: 88%;
    }

    .stack-item:nth-child(3) .services-stack__image .service-img.sd-service-visual {
        right: 1%;
        bottom: 1%;
        height: 94%;
    }

    .stack-item:nth-child(4) .services-stack__image .service-img.sd-service-visual {
        right: 4%;
        bottom: 4%;
        height: 88%;
    }
}

@media only screen and (min-width:1500px){
    .services-stack__image .service-img.sd-service-visual {
        right: 3%;
        height: 94%;
        max-width: 44%;
    }

    .stack-item:nth-child(2) .services-stack__image .service-img.sd-service-visual {
        right: 5%;
        height: 91%;
    }

    .stack-item:nth-child(3) .services-stack__image .service-img.sd-service-visual {
        right: 3%;
        height: 96%;
    }

    .stack-item:nth-child(4) .services-stack__image .service-img.sd-service-visual {
        right: 6%;
        height: 91%;
    }
}

@media (prefers-reduced-motion:no-preference){
    .sd-service-visual--wordpress {
        animation: sdServiceFloatA 5.8s ease-in-out infinite;
    }

    .sd-service-visual--visual {
        animation: sdServiceFloatB 6.4s ease-in-out infinite;
    }

    .sd-service-visual--improvement {
        animation: sdServiceFloatA 6.8s ease-in-out -.9s infinite;
    }

    .sd-service-visual--creative {
        animation: sdServiceFloatB 5.9s ease-in-out -.5s infinite;
    }
}

@keyframes sdServiceFloatA{
    0%,
    100% {
        transform: translate3d(0,0,0) rotate(-.4deg);
    }

    50% {
        transform: translate3d(0,-1.4rem,0) rotate(.7deg);
    }
}

@keyframes sdServiceFloatB{
    0%,
    100% {
        transform: translate3d(0,-.3rem,0) rotate(.6deg);
    }

    50% {
        transform: translate3d(0,1.1rem,0) rotate(-.6deg);
    }
}

/* Services page - use the same visual language instead of unrelated demo artwork. */
.mxd-services-list .hover-reveal__image {
    background: #151515;
}

.mxd-stats-cards__image .sd-stats-service-art {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2rem 3rem rgba(0,0,0,.18));
}

.mxd-promo__images .sd-promo-service-art {
    object-fit: contain;
    filter: drop-shadow(0 2rem 3rem rgba(0,0,0,.2));
}

@media only screen and (min-width:1200px){
    .mxd-promo__images .promo-image-1.sd-promo-service-art {
        width: 360px;
        right: 5rem;
        bottom: 2rem;
    }

    .mxd-promo__images .promo-image-2.sd-promo-service-art {
        width: 170px;
        left: 0;
        bottom: 9rem;
    }
}

@media only screen and (min-width:1600px){
    .mxd-promo__images .promo-image-1.sd-promo-service-art {
        width: 430px;
        right: 7rem;
        bottom: 2rem;
    }

    .mxd-promo__images .promo-image-2.sd-promo-service-art {
        width: 200px;
        left: 4rem;
        bottom: 12rem;
    }
}

.hero-09-headline__caption {
    width: 100%;
    max-width: none;
}

.hero-09-headline__caption p {
    white-space: nowrap;
}

.hero-09-headline__caption p span {
    display: block;
}

.sd-cta h2 {
    color: #929292;
}

.sd-cta > div > p:not(.sd-eyebrow) {
    color: #929292;
}

.sd-cta .sd-eyebrow {
    color: #777777;
}

/* Homepage mobile review and responsive refinements. */
.sd-menu-links a,
.footer-blocks__card a,
.footer-blocks__card p,
.mxd-project-item__name a {
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .hero-09-headline__caption p {
        white-space: nowrap;
        font-size: clamp(1.25rem, 3.85vw, 1.8rem);
        line-height: 1.35;
    }

    .mxd-hero-09__headline,
    .mxd-hero-09__objects {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .hero-09-headline__caption {
        margin-bottom: 3rem;
    }

    .hero-09-headline__tags {
        gap: .65rem;
        margin-top: 2.8rem;
    }

    .mxd-pinned-projects__scroll-inner {
        gap: 5.2rem;
    }

    .mxd-pinned-projects .mxd-project-item__media {
        margin-bottom: 1.4rem;
    }

    .mxd-pinned-projects .mxd-project-item__tags {
        gap: .65rem;
        padding-top: 1rem;
    }

    .mxd-project-item__promo {
        padding-left: .2rem;
        padding-right: .2rem;
    }

    .mxd-project-item__name a {
        font-size: 2rem;
        line-height: 1.35;
    }

    .sd-live-project-preview {
        padding: .55rem;
        border-radius: 1.8rem;
    }

    .sd-browser-frame {
        border-radius: 1.35rem;
        box-shadow: 0 1.4rem 3rem rgba(0,0,0,.25);
    }

    .sd-browser-bar {
        height: 3rem;
        gap: .8rem;
        padding: 0 .8rem;
    }

    .sd-browser-dots,
    .sd-browser-dots::before,
    .sd-browser-dots::after {
        width: .65rem;
        height: .65rem;
    }

    .sd-browser-dots {
        margin-right: 1.7rem;
    }

    .sd-browser-dots::before {
        left: 1.05rem;
    }

    .sd-browser-dots::after {
        left: 2.1rem;
    }

    .sd-browser-address {
        padding: .35rem .7rem;
        border-radius: .65rem;
        font-size: .9rem;
    }

    .sd-footer-wordmark {
        max-width: 100%;
        font-size: clamp(3.2rem,11vw,5rem);
        line-height: .92;
        letter-spacing: -.04em;
        white-space: nowrap;
    }

    .sd-footer-location {
        margin-top: 3rem;
    }

    .footer-blocks__card .mxd-point-subtitle {
        width: 100%;
        align-items: flex-start;
    }

    .footer-blocks__card .mxd-point-subtitle svg {
        flex: 0 0 auto;
        margin-top: .15rem;
    }

    .footer-blocks__card .mxd-point-subtitle a[href^="mailto:"] {
        font-size: 1.85rem;
        line-height: 1.3;
        letter-spacing: -.02em;
        overflow-wrap: normal;
    }

    .mxd-promo__caption {
        overflow-wrap: anywhere;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .mxd-pinned-projects__scroll-inner {
        gap: 6.5rem;
    }

    .sd-browser-bar {
        height: 3.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sd-project-video {
        animation: none !important;
    }
}



/* Video preview stability: keep a sharp still visible until a playable frame exists. */
.sd-video-shell {
    position: relative;
    overflow: hidden;
    background: #111;
}

.sd-video-shell .sd-project-video,
.sd-video-shell .sd-video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.sd-video-shell .sd-project-video {
    z-index: 1;
}

.sd-video-shell .sd-video-poster {
    z-index: 2;
    display: block;
    opacity: 1;
    visibility: visible;
    transition: opacity .28s ease, visibility 0s linear .28s;
    pointer-events: none;
}

.sd-video-shell.is-video-ready .sd-video-poster {
    opacity: 0;
    visibility: hidden;
}

.sd-project-hero-image.sd-case-study-media {
    position: relative;
    aspect-ratio: 16 / 9;
    min-height: 0;
    background: #111;
}

.sd-case-study-media .sd-case-study-video,
.sd-case-study-media .sd-video-poster {
    border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .sd-video-shell .sd-video-poster {
        transition: none;
    }
}


/* ================================================================
   Mobile layout repair — homepage
   Keeps the desktop experience unchanged and replaces the mobile
   pinned-card behaviour with a clean, readable vertical layout.
   ================================================================ */
@media (max-width: 767px) {
    html,
    body,
    .mxd-page-content,
    .mxd-section,
    .mxd-container,
    .mxd-block {
        min-width: 0 !important;
        max-width: 100%;
    }

    html,
    body {
        overflow-x: clip !important;
    }

    /* The large moving sentence was visually colliding with the cards. */
    .mxd-section.padding-mtext-pre-stack {
        padding-top: 3.5rem;
        padding-bottom: 3rem;
        overflow: hidden;
    }

    .padding-mtext-pre-stack .marquee__text {
        font-size: 3.8rem;
        line-height: 1;
        letter-spacing: -.04em;
    }

    .padding-mtext-pre-stack .marquee__image {
        width: 3.8rem;
        height: 3.8rem;
    }

    /* Service cards: normal document flow on phones, no overlap/pinning. */
    .mxd-section.padding-stacked-section {
        padding-bottom: 8rem;
    }

    .stack-wrapper,
    .services-stack {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        transform: none !important;
    }

    .stack-offset {
        display: none !important;
        height: 0 !important;
    }

    .services-stack {
        display: flex !important;
        flex-direction: column;
        gap: 1.6rem;
    }

    .services-stack .stack-item {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        z-index: auto !important;
    }

    .mxd-services-stack__inner,
    .mxd-services-stack__inner.radius-dark {
        height: auto !important;
        min-height: 0 !important;
        padding: 2.6rem 2.4rem 0 !important;
        border-radius: 3rem !important;
        justify-content: flex-start !important;
    }

    .mxd-services-stack__controls {
        top: 1.5rem;
        right: 1.5rem;
    }

    .mxd-services-stack__controls .btn-round-large {
        width: 5.8rem;
        height: 5.8rem;
        min-width: 5.8rem;
    }

    .mxd-services-stack__title,
    .mxd-services-stack__title.width-60,
    .mxd-services-stack__title.width-70 {
        width: calc(100% - 6.8rem) !important;
        max-width: none !important;
        margin: 0 0 2.2rem !important;
        padding: 0 !important;
    }

    .mxd-services-stack__title h3 {
        font-size: clamp(4.1rem, 12vw, 5rem) !important;
        line-height: .95;
        letter-spacing: -.04em;
    }

    .mxd-services-stack__info,
    .mxd-services-stack__info.width-60,
    .mxd-services-stack__info.width-70 {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .mxd-services-cards__tags {
        gap: .7rem;
        margin-bottom: 2rem;
    }

    .mxd-services-cards__tags .tag {
        font-size: 1.35rem;
    }

    .mxd-services-stack__info p {
        font-size: 1.7rem;
        line-height: 1.5;
    }

    .services-stack__image {
        position: relative !important;
        inset: auto !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        width: 100% !important;
        height: 19rem !important;
        min-height: 0 !important;
        margin-top: 1.6rem;
        padding: 0 !important;
        overflow: hidden;
    }

    .services-stack__image .service-img.sd-service-visual,
    .services-stack__image .service-img-s.sd-service-visual {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 19rem !important;
        margin: 0 auto !important;
        object-fit: contain !important;
        object-position: center bottom !important;
        transform: none !important;
        animation: none !important;
        filter: drop-shadow(0 1.4rem 2.2rem rgba(0,0,0,.18));
    }

    .services-stack__image .service-img-m.sd-service-visual {
        display: none !important;
    }

    /* Portrait divider: keep the badge away from the face. */
    .mxd-section.padding-pre-title {
        padding-bottom: 8rem;
    }

    .mxd-container__circle {
        margin-bottom: -4.5rem;
        padding-right: 1.2rem;
        text-align: right;
    }

    .btn-rotating-blur-outline {
        width: 12rem;
        height: 12rem;
    }

    .btn-rotating-blur-outline .btn-rotating__image {
        width: 4.8rem;
    }

    .mxd-divider,
    .mxd-divider__image {
        height: 42rem;
    }

    .divider-image-6 {
        background-position: center top;
    }

    /* CTA: remove the decorative panel that covered the mobile copy. */
    .mxd-promo {
        overflow: hidden;
        border-radius: 3rem;
    }

    .mxd-promo__inner {
        min-height: 0;
        padding: 0 2.4rem;
        border-radius: 3rem;
    }

    .mxd-promo__bg,
    .mxd-promo__images {
        display: none !important;
    }

    .mxd-promo__content {
        width: 100%;
        gap: 3rem;
        margin: 6rem 0;
    }

    .mxd-promo__title {
        width: 100%;
        max-width: none;
    }

    .mxd-promo__caption {
        display: block;
        max-width: 9ch;
        font-size: clamp(4.2rem, 12.5vw, 5.4rem);
        line-height: .98;
        letter-spacing: -.045em;
        overflow-wrap: normal;
        word-break: normal;
    }

    .mxd-promo__controls,
    .mxd-promo__controls .btn {
        max-width: 100%;
    }

    .mxd-promo__controls .btn {
        font-size: 1.9rem;
    }

    /* Footer: prevent long details and the CTA button from clipping. */
    .mxd-footer__fullwidth-text {
        padding: 8rem 2rem 0;
        margin-bottom: 2rem;
    }

    .sd-footer-wordmark {
        max-width: 100%;
        font-size: clamp(3.3rem, 12.5vw, 5rem);
        line-height: 1;
        letter-spacing: -.045em;
        white-space: nowrap;
    }

    .mxd-footer__footer-blocks {
        gap: 1.6rem;
        padding: 0 2rem;
    }

    .footer-blocks__column {
        gap: 1.6rem;
        min-width: 0;
    }

    .footer-blocks__card {
        min-width: 0;
        gap: 2.2rem;
        padding: 2.4rem;
        border-radius: 2.4rem;
    }

    .footer-blocks__card .mxd-point-subtitle {
        min-width: 0;
        gap: .8rem;
        font-size: 1.8rem;
        line-height: 1.35;
    }

    .footer-blocks__card .mxd-point-subtitle a[href^="mailto:"] {
        min-width: 0;
        font-size: 1.65rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .sd-footer-cta .footer-blocks__title-m {
        font-size: 3rem;
        line-height: 1.12;
    }

    .sd-footer-cta > p {
        font-size: 1.6rem;
        line-height: 1.5;
    }

    .sd-footer-cta .btn {
        width: 100%;
        min-width: 0;
        height: 5.4rem;
        gap: .7rem;
        padding: 0 1.5rem;
        justify-content: space-between;
        font-size: 1.72rem;
        white-space: nowrap;
    }

    .sd-footer-cta .btn-caption {
        min-width: 0;
        white-space: nowrap;
    }

    .footer-blocks__title-l {
        font-size: 3.6rem;
        line-height: 1.1;
    }

    .footer-socials__link {
        font-size: 2.4rem;
    }

    .sd-footer-location {
        margin-top: 3rem;
        font-size: 1.45rem;
        line-height: 1.5;
    }

    .sd-footer-location p {
        max-width: 100%;
        overflow-wrap: normal;
    }
}

@media (max-width: 767px) {
    .btn-rotating-blur-outline .btn-rotating__text {
        width: 10.8rem;
        height: 10.8rem;
        top: .6rem;
        left: .6rem;
    }

    .sd-footer-location {
        padding-right: 5.5rem;
    }
}

/* ================================================================
   Mobile motion restoration + full divider artwork
   - Keeps the cards in a safe vertical layout on phones.
   - Restores a scroll-triggered entrance instead of the desktop pinning.
   - Shows the complete 16:9 divider artwork without mobile zoom/cropping.
   ================================================================ */
@media (max-width: 767px) {
    .mxd-divider {
        height: auto !important;
        min-height: 0 !important;
        background: #151515;
    }

    .mxd-divider__image.divider-image-6 {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9;
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-color: #151515;
        transform: none !important;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    .services-stack .stack-item.sd-mobile-reveal {
        opacity: 0 !important;
        visibility: visible !important;
        transform: translate3d(0, 4.2rem, 0) scale(.985) !important;
        transition:
            opacity .62s ease var(--sd-reveal-delay, 0ms),
            transform .82s cubic-bezier(.2, .72, .2, 1) var(--sd-reveal-delay, 0ms) !important;
        will-change: opacity, transform;
    }

    .services-stack .stack-item.sd-mobile-reveal.is-in-view {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
    }

    .services-stack .stack-item.sd-mobile-reveal .mxd-services-stack__title,
    .services-stack .stack-item.sd-mobile-reveal .mxd-services-stack__info,
    .services-stack .stack-item.sd-mobile-reveal .services-stack__image,
    .services-stack .stack-item.sd-mobile-reveal .mxd-services-stack__controls {
        opacity: 0;
        transform: translate3d(0, 1.4rem, 0);
        transition: opacity .55s ease, transform .72s cubic-bezier(.2, .72, .2, 1);
    }

    .services-stack .stack-item.sd-mobile-reveal.is-in-view .mxd-services-stack__title,
    .services-stack .stack-item.sd-mobile-reveal.is-in-view .mxd-services-stack__controls {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: .08s;
    }

    .services-stack .stack-item.sd-mobile-reveal.is-in-view .mxd-services-stack__info {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: .16s;
    }

    .services-stack .stack-item.sd-mobile-reveal.is-in-view .services-stack__image {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: .24s;
    }

    /* Restore subtle movement to the artwork after each card appears. */
    .services-stack .stack-item.is-in-view .service-img.sd-service-visual--wordpress {
        animation: sdServiceFloatA 5.8s ease-in-out .7s infinite !important;
    }

    .services-stack .stack-item.is-in-view .service-img.sd-service-visual--visual {
        animation: sdServiceFloatB 6.4s ease-in-out .7s infinite !important;
    }

    .services-stack .stack-item.is-in-view .service-img.sd-service-visual--improvement {
        animation: sdServiceFloatA 6.8s ease-in-out .7s infinite !important;
    }

    .services-stack .stack-item.is-in-view .service-img.sd-service-visual--creative {
        animation: sdServiceFloatB 5.9s ease-in-out .7s infinite !important;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .services-stack .stack-item,
    .services-stack .stack-item * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ================================================================
   Mobile service-card stack + animated artwork + rotating monogram
   ================================================================ */
.btn-rotating__monogram {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    color: var(--t-bright);
    font-size: 5.2rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.09em;
    text-transform: lowercase;
    transform: translate(-52%, -52%);
    transition: transform var(--_animspeed-medium) var(--_animbezier), color var(--_animspeed-medium) var(--_animbezier);
}

.btn-rotating__monogram > span {
    color: var(--accent);
    margin-left: .04em;
}

.no-touch .btn-rotating:hover .btn-rotating__monogram {
    transform: translate(-52%, -52%) scale(.92);
}

/* The added article makes the circular copy slightly longer. */
.btn-rotating-blur-outline.ver-02 .btn-rotating__text text {
    font-size: 1.12rem;
    letter-spacing: .05rem;
}

@keyframes sdMobileArtworkFloatA {
    0%, 100% { transform: translate3d(0, .2rem, 0) rotate(-.8deg) scale(1); }
    35% { transform: translate3d(-.7rem, -1.2rem, 0) rotate(.7deg) scale(1.025); }
    70% { transform: translate3d(.7rem, -.5rem, 0) rotate(-.2deg) scale(1.012); }
}

@keyframes sdMobileArtworkFloatB {
    0%, 100% { transform: translate3d(0, -.2rem, 0) rotate(.7deg) scale(1.01); }
    38% { transform: translate3d(.8rem, -1.1rem, 0) rotate(-.8deg) scale(1.03); }
    72% { transform: translate3d(-.6rem, .3rem, 0) rotate(.3deg) scale(1); }
}

@media (max-width: 767px) {
    /* Center the rotating project badge exactly like desktop. */
    .mxd-container__circle {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: -4.5rem;
        padding-right: 0 !important;
        text-align: center !important;
    }

    .btn-rotating-blur-outline .btn-rotating__monogram {
        font-size: 3.6rem;
    }

    .btn-rotating-blur-outline.ver-02 .btn-rotating__text text {
        font-size: .92rem;
        letter-spacing: .025rem;
    }

    /* Real sticky stack on phones. Each following card covers the previous one. */
    .mxd-section.padding-stacked-section {
        overflow: visible !important;
        padding-bottom: 10rem !important;
    }

    .stack-wrapper,
    .services-stack {
        overflow: visible !important;
    }

    .services-stack {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: 3rem;
    }

    .services-stack .stack-item {
        --sd-stack-index: 0;
        --sd-stack-scale: 1;
        --sd-stack-y: 0rem;
        --sd-stack-brightness: 1;
        position: sticky !important;
        top: calc(7.2rem + (var(--sd-stack-index) * .85rem)) !important;
        z-index: calc(20 + var(--sd-stack-index)) !important;
        width: 100% !important;
        height: clamp(58rem, calc(100svh - 8.2rem), 72rem) !important;
        min-height: 0 !important;
        margin: 0 0 4.5rem !important;
        padding: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        will-change: auto;
    }

    .services-stack .stack-item:last-child {
        margin-bottom: 0 !important;
    }

    .services-stack .stack-item .mxd-services-stack__inner,
    .services-stack .stack-item .mxd-services-stack__inner.radius-dark {
        height: 100% !important;
        min-height: 0 !important;
        padding: 2.6rem 2.4rem 0 !important;
        transform: translate3d(0, var(--sd-stack-y), 0) scale(var(--sd-stack-scale));
        transform-origin: center top;
        filter: brightness(var(--sd-stack-brightness));
        box-shadow: 0 2.2rem 5rem rgba(0,0,0,.22);
        transition: transform .18s linear, filter .18s linear, opacity .6s ease;
        will-change: transform, filter;
    }

    .services-stack__image {
        height: clamp(16rem, 25svh, 21rem) !important;
        margin-top: auto !important;
        flex: 0 0 auto;
    }

    .services-stack__image .service-img.sd-service-visual,
    .services-stack__image .service-img-s.sd-service-visual {
        height: 100% !important;
        max-height: none !important;
        transform-origin: center bottom;
        will-change: transform;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    /* Reveal the card content without moving the sticky item itself. */
    .services-stack .stack-item.sd-mobile-reveal .mxd-services-stack__inner {
        opacity: 0;
        --sd-stack-y: 3.2rem;
        --sd-stack-scale: .975;
        transition:
            opacity .58s ease var(--sd-reveal-delay, 0ms),
            transform .78s cubic-bezier(.2,.72,.2,1) var(--sd-reveal-delay, 0ms),
            filter .18s linear !important;
    }

    .services-stack .stack-item.sd-mobile-reveal.is-in-view .mxd-services-stack__inner {
        opacity: 1;
        --sd-stack-y: 0rem;
    }

    .services-stack .stack-item.is-in-view .service-img.sd-service-visual--wordpress,
    .services-stack .stack-item.is-in-view .service-img.sd-service-visual--improvement {
        animation: sdMobileArtworkFloatA 5.4s cubic-bezier(.45,.05,.55,.95) .55s infinite !important;
    }

    .services-stack .stack-item.is-in-view .service-img.sd-service-visual--visual,
    .services-stack .stack-item.is-in-view .service-img.sd-service-visual--creative {
        animation: sdMobileArtworkFloatB 5.9s cubic-bezier(.45,.05,.55,.95) .55s infinite !important;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    .services-stack .stack-item.sd-mobile-reveal,
    .services-stack .stack-item.sd-mobile-reveal.is-in-view {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}


/* ---------------------------------------------------------------
   Contact CTA: floating orbital sculpture
   --------------------------------------------------------------- */
#contact-cta .mxd-promo__bg {
    background-image: none !important;
    background:
        radial-gradient(circle at 52% 48%, rgba(132, 91, 255, .17), transparent 42%),
        linear-gradient(145deg, #111210 0%, #080908 100%);
}

#contact-cta .mxd-promo__images.sd-orbit-promo-art {
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 48%, rgba(126, 88, 255, .14), transparent 46%),
        #090a09;
}

#contact-cta .sd-orbit-sculpture {
    display: block;
    position: relative;
    width: min(78%, 54rem);
    height: auto;
    object-fit: contain !important;
    filter:
        drop-shadow(0 0 .9rem rgba(121, 83, 255, .10))
        drop-shadow(0 0 2rem rgba(121, 83, 255, .08));
    transform-origin: 50% 52%;
    will-change: transform;
    
}

@media only screen and (min-width: 1200px) {
    #contact-cta .mxd-promo__images.sd-orbit-promo-art {
        display: flex;
        position: absolute;
        inset: 0 0 0 auto;
        width: 50%;
        height: 100%;
    }

    #contact-cta .sd-orbit-sculpture {
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
    }
}

/* Tablet and mobile: keep the CTA copy clean, then show the artwork below it. */
@media only screen and (max-width: 1199px) {
    #contact-cta .mxd-promo__bg {
        display: none !important;
    }

    #contact-cta .mxd-promo__inner {
        padding-bottom: 0;
    }

    #contact-cta .mxd-promo__content {
        margin-bottom: 4rem;
    }

    #contact-cta .mxd-promo__images.sd-orbit-promo-art {
        display: flex !important;
        position: relative;
        inset: auto;
        flex: 0 0 auto;
        width: calc(100% + 10rem);
        height: 40rem;
        margin: 0 -5rem;
        border-radius: 0 0 3rem 3rem;
    }

    #contact-cta .sd-orbit-sculpture {
        width: min(72vw, 40rem);
    }
}

@media only screen and (max-width: 767px) {
    #contact-cta .mxd-promo__content {
        margin-bottom: 3rem;
    }

    #contact-cta .mxd-promo__images.sd-orbit-promo-art {
        width: calc(100% + 4.8rem);
        height: 29rem;
        margin: 0 -2.4rem;
    }

    #contact-cta .sd-orbit-sculpture {
        width: min(82vw, 31rem);
    }
}

/* ---------------------------------------------------------------
   2026 portfolio refinement: desktop navigation, clearer hero,
   keyboard focus and future-ready work groupings
   --------------------------------------------------------------- */
.sd-desktop-nav {
    display: none;
}

@media only screen and (min-width: 1200px) {
    .mxd-header {
        align-items: center;
    }

    .mxd-nav__contain {
        display: none;
    }

    .sd-desktop-nav {
        position: absolute;
        left: 50%;
        top: 3.35rem;
        display: flex;
        align-items: center;
        gap: .35rem;
        padding: .55rem;
        border: 1px solid var(--st-muted);
        border-radius: 999px;
        background: rgba(var(--base-rgb), .78);
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, .06);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        transform: translateX(-50%);
    }

    .sd-desktop-nav a {
        position: relative;
        display: inline-flex;
        align-items: center;
        min-height: 4.6rem;
        padding: 0 1.7rem;
        border-radius: 999px;
        color: var(--t-bright);
        font: normal var(--fw-medium) 1.35rem/1 var(--_font-accent);
        text-decoration: none;
        transition: color .25s ease, background-color .25s ease, transform .25s ease;
    }

    .sd-desktop-nav a:hover {
        background: var(--base-tint);
        transform: translateY(-1px);
    }

    .sd-desktop-nav a[aria-current="page"] {
        color: var(--base);
        background: var(--t-bright);
    }

    .mxd-hero-09__headline > .hero-09-headline__caption {
        max-width: 92rem;
        margin-bottom: 2.2rem;
    }

    .mxd-hero-09__headline > .hero-09-headline__caption p {
        font-size: clamp(2.8rem, 2.25vw, 3.6rem);
        line-height: 1.13;
        letter-spacing: -.025em;
        white-space: nowrap;
    }

    .mxd-hero-09__headline > .hero-09-headline__title {
        width: 84%;
    }

    .mxd-hero-09__headline > .hero-09-headline__title .hero-09-headline__title {
        width: 100%;
    }
}

@media only screen and (min-width: 1600px) {
    .sd-desktop-nav {
        top: 3.35rem;
    }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
}

.footer-blocks__card a[href^="mailto:"] {
    overflow-wrap: normal;
    word-break: normal;
    font-size: clamp(1.45rem, 1.25vw, 2rem);
}

.sd-work-cluster + .sd-work-cluster {
    margin-top: 8rem;
}

.sd-work-cluster__head {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(26rem, .8fr);
    gap: 3rem;
    align-items: end;
    margin-bottom: 3rem;
}

.sd-work-cluster__head h2 {
    max-width: 76rem;
    font-size: clamp(4.2rem, 6.2vw, 8.6rem);
    line-height: .96;
    letter-spacing: -.045em;
}

.sd-work-cluster__head > p {
    max-width: 52rem;
    color: var(--t-medium);
    font-size: 1.7rem;
    line-height: 1.55;
}

.sd-project-card--wide {
    grid-column: 1 / -1;
}

.sd-project-card--wide .sd-project-card__media {
    aspect-ratio: 21 / 9;
}

.sd-project-card__media--contain img {
    object-fit: contain;
}

.sd-design-collection {
    margin-top: 7rem;
}

.sd-design-collection__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 3rem;
    margin-bottom: 2.4rem;
}

.sd-design-collection__head .sd-eyebrow {
    margin-bottom: .9rem;
}

.sd-design-collection__head h3 {
    max-width: 72rem;
    font-size: clamp(3.2rem, 4.5vw, 6rem);
    line-height: 1;
    letter-spacing: -.035em;
}

.sd-design-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.8rem;
}

.sd-design-gallery--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sd-design-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--st-muted);
    border-radius: 2.2rem;
    background: var(--base);
    color: var(--t-bright);
    text-decoration: none;
}

.sd-design-card > img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    background: #171717;
    transition: transform .55s cubic-bezier(.2, .7, .2, 1), opacity .35s ease;
}

.sd-design-card:hover > img {
    transform: scale(1.025);
    opacity: .94;
}

.sd-design-card > span {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: 1.8rem 2rem 2rem;
}

.sd-design-card strong {
    font-size: 1.7rem;
    font-weight: 600;
}

.sd-design-card small {
    color: var(--t-medium);
    font-size: 1.35rem;
    line-height: 1.35;
}

.sd-project-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}

.sd-project-gallery figure {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--st-muted);
    border-radius: 2.4rem;
    background: #171717;
}

.sd-project-gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
}

.sd-project-gallery figcaption {
    padding: 1.6rem 1.9rem;
    background: var(--base);
    color: var(--t-medium);
    font-size: 1.4rem;
}

.sd-project-gallery figcaption a {
    color: var(--t-bright);
    text-underline-offset: .25em;
}

.sd-form-note a {
    color: var(--t-bright);
    text-underline-offset: .25em;
}

@media only screen and (max-width: 1199px) {
    .sd-work-cluster__head {
        grid-template-columns: 1fr;
    }

    .sd-design-gallery--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 767px) {
    .sd-work-cluster + .sd-work-cluster {
        margin-top: 5rem;
    }

    .sd-project-card--wide {
        grid-column: auto;
    }

    .sd-project-card--wide .sd-project-card__media {
        aspect-ratio: 16 / 9;
    }

    .sd-design-collection {
        margin-top: 5rem;
    }

    .sd-design-collection__head {
        display: block;
    }

    .sd-design-gallery,
    .sd-design-gallery--four,
    .sd-project-gallery {
        grid-template-columns: 1fr;
    }
}



/* Stronger, conflict-proof motion: animate a dedicated wrapper rather than
   the image itself, because the template also manipulates image transforms. */
#contact-cta .sd-orbit-motion {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transform-origin: 50% 52%;
    will-change: transform;
    animation: sdOrbitWrapperFloat 6.2s cubic-bezier(.45, 0, .55, 1) infinite !important;
}

#contact-cta .sd-orbit-sculpture {
    animation: sdOrbitInnerDrift 8.8s ease-in-out infinite alternate !important;
}

@keyframes sdOrbitWrapperFloat {
    0%, 100% {
        transform: translate3d(0, 1.2rem, 0) rotate(-1.4deg) scale(.985);
    }
    50% {
        transform: translate3d(0, -2.4rem, 0) rotate(1.4deg) scale(1.025);
    }
}

@keyframes sdOrbitInnerDrift {
    0% {
        filter:
            drop-shadow(0 0 .9rem rgba(121, 83, 255, .10))
            drop-shadow(0 0 1.9rem rgba(121, 83, 255, .08));
    }
    100% {
        filter:
            drop-shadow(0 0 1.2rem rgba(121, 83, 255, .18))
            drop-shadow(0 0 3rem rgba(121, 83, 255, .14));
    }
}

/* Keep the motion present on mobile too, but slightly softer. */
@media only screen and (max-width: 767px) {
    #contact-cta .sd-orbit-motion {
        animation-duration: 5.6s !important;
    }

    @keyframes sdOrbitWrapperFloat {
        0%, 100% {
            transform: translate3d(0, .8rem, 0) rotate(-1deg) scale(.99);
        }
        50% {
            transform: translate3d(0, -1.5rem, 0) rotate(1deg) scale(1.018);
        }
    }
}

/* Services page visual refresh. */
.sd-selected-work-visual {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 3rem;
    background:
        radial-gradient(circle at 14% 18%, rgba(126,82,255,.98) 0, rgba(126,82,255,.46) 18%, transparent 42%),
        radial-gradient(circle at 84% 76%, rgba(0,174,255,.86) 0, rgba(0,174,255,.3) 22%, transparent 46%),
        radial-gradient(circle at 68% 16%, rgba(255,45,132,.54) 0, transparent 34%),
        linear-gradient(135deg,#050509 0%,#101329 42%,#080811 68%,#030306 100%);
}

.sd-selected-work-visual::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 7%;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 35%,rgba(255,255,255,.18),transparent 34%),
        linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.015));
    box-shadow:
        0 0 9rem rgba(111,68,255,.34),
        inset 0 0 7rem rgba(255,255,255,.035);
    filter: blur(.1px);
    transform: rotate(-8deg) scale(1.08);
}

.sd-selected-work-visual::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    opacity: .22;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
    background-size: clamp(5rem,7vw,10rem) clamp(5rem,7vw,10rem);
    -webkit-mask-image: radial-gradient(circle at center,#000 0%,rgba(0,0,0,.68) 45%,transparent 84%);
    mask-image: radial-gradient(circle at center,#000 0%,rgba(0,0,0,.68) 45%,transparent 84%);
}

.sd-selected-work-visual + .mxd-divider__trigger {
    z-index: 3;
}

.mxd-services-list .hover-reveal__content {
    overflow: hidden;
    border-radius: 2rem;
    box-shadow: 0 2rem 5rem rgba(22,22,22,.16);
}

.mxd-services-list .hover-reveal__image {
    object-fit: cover;
}

.sd-services-cta {
    display: grid;
    grid-template-columns: minmax(0,1.12fr) minmax(28rem,.88fr);
    align-items: center;
    gap: clamp(3rem,6vw,9rem);
    overflow: hidden;
    padding: clamp(3rem,6vw,9rem);
    border-radius: clamp(2.4rem,4vw,5rem);
    background: var(--base-opp);
    color: var(--t-opp-bright);
}

.sd-services-cta__content {
    position: relative;
    z-index: 1;
}

.sd-services-cta h2 {
    max-width: 90rem;
    margin: 2rem 0;
    color: var(--t-opp-bright);
    font-size: clamp(4.4rem,6.4vw,9rem);
    line-height: .95;
}

.sd-services-cta__content > p:not(.sd-eyebrow) {
    max-width: 64rem;
    margin: 0 0 4rem;
    color: var(--t-opp-medium);
    font-size: clamp(1.7rem,2vw,2.2rem);
}

.sd-services-cta .sd-eyebrow {
    color: var(--t-opp-muted);
}

.sd-services-cta__image {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 2.6rem;
}

/* Keep the About CTA readable in both colour schemes without harsh pure black. */
.sd-start-project .sd-cta h2 {
    color: var(--t-opp-medium) !important;
}

.sd-start-project .sd-cta > div > p:not(.sd-eyebrow),
.sd-start-project .sd-cta .sd-eyebrow {
    color: var(--t-opp-muted) !important;
}

@media only screen and (max-width: 991px) {
    .sd-services-cta {
        grid-template-columns: 1fr;
    }

    .sd-services-cta__image {
        max-height: 48rem;
    }
}