#c1 {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ee0377;
    pointer-events: none;
    z-index: 9999;
    top: 0;
    left: 0;
}

#c2 {
    position: fixed;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(238, 3, 119, .55);
    pointer-events: none;
    z-index: 9998;
    top: 0;
    left: 0;
    transition: width .2s, height .2s;
}

body.hov #c2 {
    width: 54px;
    height: 54px;
    border-color: #ee0377;
}


/* ----- HERO PARTICLE STORM ----- */
#hero {
    position: relative;
    min-height: 100vh;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 210px;
}

#pc {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
}

.hv {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 55% at 50% 45%, rgba(255, 255, 255, .72) 0%, transparent 100%);
}

.hero-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1300px;
    padding: 0 60px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.hero-eyebrow {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #ee0377;
    text-align: center;
    margin-bottom: 28px;
    opacity: 0;
    animation: fadeup .6s .1s forwards
}

.hero-headline {
    font-family: 'Teko', sans-serif;
    font-weight: 700;
    font-size: clamp(3.5rem, 8vw, 7rem);
    line-height: .9;
    letter-spacing: .06em;
    color: #1a0a2e;
    text-align: center;
    max-width: 1100px;
    margin-bottom: 28px;
    opacity: 0;
    animation: fadeup .75s .25s forwards;
    text-transform: uppercase
}

.hero-headline .outline {
    background: linear-gradient(135deg, #c0157f, #70268a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block
}

.hero-sub-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 60px;
    opacity: 0;
    animation: fadeup .75s .35s forwards
}

.hero-sub-rule {
    display: none
}

.hero-sub {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(26, 10, 46, .5);
    text-align: center;
    max-width: 560px;
    letter-spacing: .01em
}

.hero-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    opacity: 0;
    animation: fadeup .7s .45s forwards
}

/*  3D tilt wrapper  */
.hcard-scene {
    perspective: 900px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
}

.hcard-scene .hcard {
    flex: 1;
}

.hcard {
    border-radius: 20px;
    padding: 44px 48px 60px;
    position: relative;
    overflow: hidden;
    cursor: none;
    min-height: 420px;
    transform-style: preserve-3d;
    transition: transform .08s linear, box-shadow .3s ease;
    will-change: transform;
}

.hcard:nth-child(1) {
    background: linear-gradient(145deg, #2a0d3e, #70268a 50%, #9b1aff);
    box-shadow: 0 40px 90px rgba(112, 38, 138, .32), 0 8px 28px rgba(0, 0, 0, .1);
}

.hcard:nth-child(2) {
    background: linear-gradient(145deg, #70268a, #c0286a 45%, #ee0377);
    box-shadow: 0 40px 90px rgba(238, 3, 119, .28), 0 8px 28px rgba(0, 0, 0, .1);
}

.hcard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: translateZ(1px);
    transition: opacity .3s;
}

.hcard-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    transform: translateZ(28px);
    transition: transform .08s linear;
    pointer-events: none;
}

.hcard:nth-child(1) .hcard-shape {
    width: 200px;
    height: 200px;
    bottom: -40px;
    right: 40px;
    animation: shapeBreath 6s ease-in-out infinite alternate;
}

.hcard:nth-child(2) .hcard-shape {
    width: 220px;
    height: 220px;
    top: 30px;
    right: -40px;
    animation: shapeBreath 8s ease-in-out infinite alternate-reverse;
}

.hcard-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .18);
    transform: translateZ(18px);
    pointer-events: none;
    animation: ringPulse 5s ease-in-out infinite alternate;
}

.hcard:nth-child(1) .hcard-ring {
    width: 140px;
    height: 140px;
    top: 30px;
    right: 30px;
}

.hcard:nth-child(2) .hcard-ring {
    width: 110px;
    height: 110px;
    bottom: 60px;
    left: 30px;
    animation-delay: 1s;
}

.hcard-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 44px 44px;
    transform: translateZ(8px);
    pointer-events: none;
}

.hcard-eyebrow,
.hcard-title,
.hcard-text,
.hcard-link {
    position: relative;
    transform: translateZ(40px);
    display: block;
}

@keyframes shapeBreath {
    0% {
        transform: translateZ(28px) scale(1) translate(0, 0);
    }

    100% {
        transform: translateZ(40px) scale(1.15) translate(-12px, 12px);
    }
}

@keyframes ringPulse {
    0% {
        transform: translateZ(18px) scale(1);
        opacity: .5;
    }

    100% {
        transform: translateZ(30px) scale(1.12);
        opacity: .9;
    }
}

.hcard-eyebrow {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    margin-bottom: 28px
}

.hcard-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    line-height: .95;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 28px
}

.hcard-text {
    font-size: .88rem;
    font-weight: 400;
    line-height: 1.65;
    color: rgba(255, 255, 255, .85);
    max-width: 380px;
    margin-bottom: 32px
}

.hcard-text u {
    text-underline-offset: 3px
}

.hcard-link {
    display: inline-flex;
    align-items: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    border: 1.5px solid rgba(255, 255, 255, .5);
    padding: 12px 24px;
    border-radius: 40px;
    transition: background .25s, border-color .25s, gap .25s;
    gap: 8px
}

.hcard-link:hover {
    background: rgba(255, 255, 255, .15);
    border-color: #fff;
    gap: 14px
}

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

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* TICKER */
.ticker {
    background: linear-gradient(90deg, #c0157f, #70268a);
    padding: 12px 0;
    overflow: hidden
}

.ticker-track {
    display: flex;
    white-space: nowrap;
    animation: tickanim 22s linear infinite
}

.tick-item {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #fff;
    padding: 0 32px;
    display: flex;
    align-items: center;
    gap: 12px
}

.tick-item::after {
    content: '\2022';
    opacity: .45;
    font-size: .6rem
}

@keyframes tickanim {
    from {
        transform: translateX(0)
    }

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

/* ----- PROJECT ROWS ActiveColor STICKY STACK effect Each panel is position:sticky and stacks on scroll. The NEXT panel slides up from below over the previous. This is exactly what ActiveColor does. ----- */

/* Wrapper */
#projects {
    background: #f5f0f8;
    padding: 60px 48px;
}

.proj-stack {
    position: relative;
}

/* Each row sticks to top while next slides up over it */
.proj-row {
    position: sticky;
    top: 17.5vh;
    display: grid;
    grid-template-columns: 1fr 55%;
    height: 65vh;
    min-height: 420px;
    overflow: hidden;
    border-radius: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(192, 21, 127, .1);
    box-shadow: 0 6px 32px rgba(112, 38, 138, .1);
}

.proj-row:nth-child(1) {
    z-index: 1;
}

.proj-row:nth-child(2) {
    z-index: 2;
}

.proj-row:nth-child(3) {
    z-index: 3;
}

.proj-row:nth-child(4) {
    z-index: 4;
}

.proj-row:nth-child(5) {
    z-index: 5;
}

.proj-row:nth-child(6) {
    z-index: 6;
}

/* LEFT: light info panel */
.proj-left {
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 52px 56px;
    overflow: hidden;
    position: relative;
    border-radius: 20px 0 0 20px;
}

/* horizontal eyebrow above title */
.proj-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #c0157f;
    margin-bottom: 18px;
}

.proj-eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    background: linear-gradient(90deg, #c0157f, #70268a);
    flex-shrink: 0;
}

.proj-label {
    display: none;
}

.proj-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: #1a0a2e;
    margin-bottom: 20px;
}

.proj-desc {
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.8;
    color: #666;
    max-width: 380px;
    margin-bottom: 36px;
}

.proj-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #c0157f, #70268a);
    padding: 13px 28px;
    width: fit-content;
    border-radius: 40px;
    transition: opacity .25s, transform .2s;
}

.proj-btn:hover {
    opacity: .85;
    transform: translateY(-2px);
}

/* RIGHT: image panel */
.proj-right {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 20px 20px 0;
}

.proj-right.col-blue {
    background: linear-gradient(155deg, #dce8ff 0%, #b0c8f8 50%, #7aaaff 100%);
}

.proj-right.col-pink {
    background: linear-gradient(155deg, #fce8f5 0%, #e8b0d8 50%, #d070b8 100%);
}

.proj-right.col-purple {
    background: linear-gradient(155deg, #f0e8ff 0%, #d0b0f0 50%, #a870d8 100%);
}

.proj-right.col-teal {
    background: linear-gradient(155deg, #d8f5ef 0%, #90dac8 50%, #40b89a 100%);
}

.proj-right.col-orange {
    background: linear-gradient(155deg, #fce8f5 0%, #e8b0d8 50%, #c870a8 100%);
}

.proj-right.col-indigo {
    background: linear-gradient(155deg, #e4e8ff 0%, #b0b8f8 50%, #7080e8 100%);
}

/* Soft decorative rings */
.proj-right::before,
.proj-right::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(112, 38, 138, .12);
    pointer-events: none;
}

.proj-right::before {
    width: 360px;
    height: 360px;
    top: -80px;
    right: -80px;
}

.proj-right::after {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
}

/* Floating screen mockup */
.proj-mockup {
    width: 80%;
    max-width: 480px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 20px 60px rgba(112, 38, 138, .18), 0 4px 16px rgba(0, 0, 0, .08);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.proj-mockup img {
    width: 100%;
    display: block;
    height: 320px;
    object-fit: cover;
    object-position: top;
}

/* spacer */
.proj-spacer {
    height: 65vh;
}

/*  SHARED  */
.section {
    padding: 110px 60px
}

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

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

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

.section.light {
    background: var(--offwhite)
}

.lbl {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--pink);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px
}

.lbl::before {
    content: '';
    width: 22px;
    height: 2px;
    background: var(--pink)
}

h2.sh {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: -.025em;
    color: var(--white)
}

h2.sh.dk {
    color: var(--dark)
}

h2.sh em {
    font-style: normal;
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.sdesc {
    font-size: .92rem;
    font-weight: 300;
    line-height: 1.82;
    color: rgba(255, 255, 255, .42);
    max-width: 480px;
    margin-top: 14px
}

.sdesc.dk {
    color: var(--gray)
}

.rv {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .7s ease, transform .7s ease
}

.rv.on {
    opacity: 1;
    transform: translateY(0)
}

.rv.d1 {
    transition-delay: .1s
}

.rv.d2 {
    transition-delay: .2s
}

.rv.d3 {
    transition-delay: .3s
}

.rv.d4 {
    transition-delay: .4s
}

.btn-grad {
    background: var(--grad);
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 14px 32px;
    text-decoration: none;
    display: inline-block;
    border-radius: 40px;
    transition: opacity .25s, transform .2s
}

.btn-grad:hover {
    opacity: .82;
    transform: translateY(-2px)
}

/* SERVICES */
.srv-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 64px;
    align-items: start;
    margin-top: 56px
}

.srv-tabs {
    position: sticky;
    top: 100px
}

.stab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    cursor: none;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: .88rem;
    color: rgba(255, 255, 255, .35);
    transition: color .25s
}

.stab-num {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--pink);
    width: 18px;
    flex-shrink: 0
}

.stab-bar {
    width: 0;
    height: 2px;
    background: var(--grad);
    transition: width .3s;
    flex-shrink: 0
}

.stab.on,
.stab:hover {
    color: #fff
}

.stab.on .stab-bar,
.stab:hover .stab-bar {
    width: 24px
}

.srv-panel {
    display: none
}

.srv-panel.on {
    display: block;
    animation: pin .4s ease forwards
}

@keyframes pin {
    from {
        opacity: 0;
        transform: translateX(12px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.srv-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    margin-bottom: 24px
}

.sp-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.1
}

.sp-body {
    font-size: .88rem;
    font-weight: 300;
    line-height: 1.85;
    color: rgba(255, 255, 255, .46);
    margin-bottom: 22px
}

.sp-link {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap .25s, color .25s
}

.sp-link:hover {
    gap: 16px;
    color: #fff
}

/* PORTFOLIO SCROLLER */
#work {
    padding: 110px 0;
    overflow: hidden;
    background: linear-gradient(145deg, #f8f5ff 0%, #f2ecff 60%, #ede4fd 100%);
    position: relative;
}

#work .mesh-layer {
    display: none;
}

#work-grid-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(112, 38, 138, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(112, 38, 138, 0.055) 1px, transparent 1px);
    background-size: 28px 28px;
    animation: workGridScroll 14s linear infinite;
    z-index: 0;
}

#work-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(192, 21, 127, 0.12), transparent 70%);
    top: -60px;
    right: 6%;
    pointer-events: none;
    animation: workGlowPulse 5s ease-in-out infinite alternate;
    z-index: 0;
}

@keyframes workGridScroll {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 28px 28px;
    }
}

@keyframes workGlowPulse {
    from {
        opacity: .45;
        transform: scale(1);
    }

    to {
        opacity: 1;
        transform: scale(1.22);
    }
}

#work .work-head {
    padding: 0 60px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 72px;
    position: relative;
    z-index: 2;
}

#work h2.sh {
    color: #1a0a2e;
}

#work .sdesc {
    color: rgba(26, 10, 46, .5);
}

#work .port-track-wrap {
    position: relative;
    z-index: 2;
}

#work .port-controls {
    position: relative;
    z-index: 2;
}

.port-track-wrap {
    position: relative;
}

.port-track-wrap::before,
.port-track-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 10;
    pointer-events: none;
}

.port-track-wrap::before,
.port-track-wrap::after {
    display: none;
}

.port-track {
    display: flex;
    gap: 0;
    padding: 30px 0 60px;
    overflow: hidden;
    cursor: grab;
    user-select: none;
}

.port-track.dragging {
    cursor: grabbing;
}

.port-inner {
    display: flex;
    gap: 24px;
    padding: 0 40px;
}

.port-track:hover .port-inner {}

.port-track.dragging .port-inner {}

@keyframes portScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/*  Card shell  fully transparent, no bg, no border */
.pcard {
    flex-shrink: 0;
    width: 500px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    position: relative;
    transition: transform .4s cubic-bezier(.25, .46, .45, .94);
    padding-bottom: 4px;
    overflow: visible;
}

.pcard:hover {
    transform: translateY(-10px);
}

/*  Stage: transparent, just sets sizing for absolute children */
.pcard-stage {
    position: relative;
    height: 250px;
    flex-shrink: 0;
    background: transparent;
    overflow: visible;
}

/*  Desktop browser window */
.pcard-desktop {
    position: absolute;
    left: 0;
    top: 0;
    width: 395px;
    height: 235px;
    background: #fff;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 4px 16px rgba(0, 0, 0, .3);
    overflow: hidden;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.pcard-desktop-bar {
    background: #e2e2e2;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    border-bottom: 1px solid #ccc;
}

.pcard-desktop-dots {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.pcard-desktop-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.pcard-desktop-dot:nth-child(1) {
    background: #ff5f57
}

.pcard-desktop-dot:nth-child(2) {
    background: #febc2e
}

.pcard-desktop-dot:nth-child(3) {
    background: #28c840
}

.pcard-desktop-urlbar {
    flex: 1;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: .52rem;
    color: #999;
    font-family: 'Space Grotesk', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pcard-desktop-screen {
    width: 100%;
    height: 195px;
    object-fit: cover;
    object-position: top;
    display: block;
    flex-shrink: 0;
}

.pcard:hover .pcard-visit {
    color: #fff;
    border-color: var(--pink);
    background: var(--pink);
}

/*  Phone  bottom-right corner, overlapping desktop */
.pcard-mobile {
    position: absolute;
    right: 0;
    bottom: -20px;
    width: 100px;
    height: 165px;
    z-index: 4;
    background: #1a1a1e;
    border-radius: 14px;
    border: 2px solid #3a3a3e;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, .7),
        0 4px 16px rgba(0, 0, 0, .4),
        inset 0 1px 0 rgba(255, 255, 255, .1);
    padding: 8px 5px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Left side buttons */
.pcard-mobile::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 28px;
    width: 3px;
    height: 20px;
    background: #2c2c30;
    border-radius: 3px 0 0 3px;
    box-shadow: 0 26px 0 #2c2c30;
}

/* Right side power button */
.pcard-mobile::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 38px;
    width: 3px;
    height: 28px;
    background: #2c2c30;
    border-radius: 0 3px 3px 0;
}

.pcard-mobile-notch {
    width: 28px;
    height: 5px;
    background: #2e2e32;
    border-radius: 10px;
    flex-shrink: 0;
}

/* Screen area */
.pcard-mobile-bezel {
    flex: 1;
    width: 100%;
    min-height: 0;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pcard-mobile-screen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    min-height: 0;
}


/*  Card footer  sits below the devices, no box */
.pcard-foot {
    padding: 20px 4px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pcard-tag {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pink);
}

.pcard-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: #1a0a2e;
    line-height: 1.2;
}

.pcard-url-label {
    font-size: .6rem;
    color: rgba(26, 10, 46, .38);
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: .04em;
}

.pcard-visit {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(26, 10, 46, .4);
    text-decoration: none;
    border: 1px solid rgba(26, 10, 46, .15);
    padding: 9px 18px;
    transition: color .25s, border-color .25s, background .25s, gap .25s;
}

.pcard-visit svg {
    width: 11px;
    height: 11px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    transition: transform .25s;
}

.pcard:hover .pcard-visit {
    color: #fff;
    border-color: var(--pink);
    background: var(--pink);
}

.pcard:hover .pcard-visit svg {
    transform: translate(2px, -2px);
}

/* Scroll controls  bottom bar (progress only) */
.port-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
    padding: 0 60px;
}

.port-progress {
    flex: 1;
    max-width: 100%;
    height: 2px;
    background: rgba(26, 10, 46, .1);
    border-radius: 2px;
    overflow: hidden;
}

.port-progress-bar {
    height: 100%;
    background: var(--grad);
    border-radius: 2px;
    width: 0%;
    transition: width .1s;
}

/* Side hover arrow buttons */
.port-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 24px rgba(112, 38, 138, .18), 0 2px 8px rgba(0, 0, 0, .1);
    color: #1a0a2e;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s, background .2s;
    z-index: 20;
}

.port-arrow svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
}

.port-arrow-prev {
    left: 16px;
}

.port-arrow-next {
    right: 16px;
}

.port-arrow:hover {
    background: var(--pink);
    color: #fff;
}

.port-track-wrap:hover .port-arrow {
    opacity: 1;
    pointer-events: auto;
}

.port-track-wrap:hover .port-arrow-prev {
    transform: translateY(-50%) translateX(0);
}

.port-track-wrap:hover .port-arrow-next {
    transform: translateY(-50%) translateX(0);
}

/*  BLOB FILTER  */
.blob-filter-wrap {
    padding: 0 60px;
    margin-bottom: 0;
    position: relative;
    z-index: 3;
}

.blob-filter-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(26, 10, 46, .4);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blob-filter-label svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* Scrollable blob track */
.blob-track-outer {
    position: relative;
    overflow: hidden;
}

.blob-track-outer::before,
.blob-track-outer::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 4;
    pointer-events: none;
}

.blob-track-outer::before {
    display: none;
}

.blob-track-outer::after {
    right: 0;
    background: linear-gradient(to left, #f2ecff, transparent);
}

.blob-track {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 36px 60px 36px;
    justify-content: center;
    cursor: grab;
    user-select: none;
    align-items: center;
}

.blob-track::-webkit-scrollbar {
    display: none;
}

.blob-track.dragging {
    cursor: grabbing;
}


/* Individual blobs  Frosted Glass Orbs */
.ind-blob {
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(192, 21, 127, .18);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: border-color .3s, box-shadow .3s, background .3s, transform .3s;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-right: -8px;
    /* inner specular highlight */
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .75), 0 4px 20px rgba(112, 38, 138, .09);
}

/* specular shine arc  top-left gleam */
.ind-blob::before {
    content: '';
    position: absolute;
    top: 13%;
    left: 18%;
    width: 32%;
    height: 20%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .52);
    pointer-events: none;
    transition: opacity .3s;
}

.ind-blob:hover {
    border-color: rgba(192, 21, 127, .45);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .8), 0 10px 36px rgba(192, 21, 127, .18);
    z-index: 2;
}

.ind-blob.active {
    background: linear-gradient(135deg, #c0157f, #70268a);
    border-color: rgba(255, 255, 255, .25);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .3), 0 14px 44px rgba(192, 21, 127, .42);
    z-index: 3;
}

.ind-blob.active::before {
    background: rgba(255, 255, 255, .22);
}

/* Blob sizing  alternating wave via translateY */
.ind-blob:nth-child(odd) {
    transform: translateY(-14px);
}

.ind-blob:nth-child(even) {
    transform: translateY(14px);
}

.ind-blob.active:nth-child(odd) {
    transform: translateY(-18px) scale(1.06);
}

.ind-blob.active:nth-child(even) {
    transform: translateY(10px) scale(1.06);
}

.ind-blob-icon {
    line-height: 1;
    margin-bottom: 8px;
    display: block;
    color: #70268a;
    transition: color .25s;
    position: relative;
    z-index: 1;
}

.ind-blob-icon svg {
    width: 28px;
    height: 28px;
    display: block;
}

.ind-blob-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #1a0a2e;
    text-align: center;
    padding: 0 10px;
    transition: color .25s;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

.ind-blob-count {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .52rem;
    font-weight: 700;
    color: #70268a;
    margin-top: 3px;
    transition: color .25s;
    position: relative;
    z-index: 1;
}

.ind-blob.active .ind-blob-icon {
    color: #fff;
}

.ind-blob.active .ind-blob-name,
.ind-blob.active .ind-blob-count {
    color: rgba(255, 255, 255, .95);
}

/* Float animations */
.ind-blob:nth-child(1) {
    animation: blobFloat0 3.4s ease-in-out infinite;
}

.ind-blob:nth-child(2) {
    animation: blobFloat1 3.9s ease-in-out infinite .3s;
}

.ind-blob:nth-child(3) {
    animation: blobFloat2 3.2s ease-in-out infinite .6s;
}

.ind-blob:nth-child(4) {
    animation: blobFloat3 4.1s ease-in-out infinite .2s;
}

.ind-blob:nth-child(5) {
    animation: blobFloat4 3.6s ease-in-out infinite .5s;
}

.ind-blob:nth-child(6) {
    animation: blobFloat5 3.8s ease-in-out infinite .1s;
}

.ind-blob:nth-child(7) {
    animation: blobFloat6 3.3s ease-in-out infinite .4s;
}

.ind-blob:nth-child(8) {
    animation: blobFloat7 4.0s ease-in-out infinite .7s;
}

.ind-blob:nth-child(9) {
    animation: blobFloat8 3.5s ease-in-out infinite .2s;
}

.ind-blob:nth-child(10) {
    animation: blobFloat9 3.7s ease-in-out infinite .5s;
}

.ind-blob:nth-child(11) {
    animation: blobFloat10 4.2s ease-in-out infinite .3s;
}

@keyframes blobFloat0 {

    0%,
    100% {
        transform: translateY(-14px)
    }

    50% {
        transform: translateY(-24px)
    }
}

@keyframes blobFloat1 {

    0%,
    100% {
        transform: translateY(14px)
    }

    50% {
        transform: translateY(4px)
    }
}

@keyframes blobFloat2 {

    0%,
    100% {
        transform: translateY(-14px)
    }

    50% {
        transform: translateY(-22px)
    }
}

@keyframes blobFloat3 {

    0%,
    100% {
        transform: translateY(14px)
    }

    50% {
        transform: translateY(5px)
    }
}

@keyframes blobFloat4 {

    0%,
    100% {
        transform: translateY(-14px)
    }

    50% {
        transform: translateY(-25px)
    }
}

@keyframes blobFloat5 {

    0%,
    100% {
        transform: translateY(14px)
    }

    50% {
        transform: translateY(3px)
    }
}

@keyframes blobFloat6 {

    0%,
    100% {
        transform: translateY(-14px)
    }

    50% {
        transform: translateY(-23px)
    }
}

@keyframes blobFloat7 {

    0%,
    100% {
        transform: translateY(14px)
    }

    50% {
        transform: translateY(6px)
    }
}

@keyframes blobFloat8 {

    0%,
    100% {
        transform: translateY(-14px)
    }

    50% {
        transform: translateY(-21px)
    }
}

@keyframes blobFloat9 {

    0%,
    100% {
        transform: translateY(14px)
    }

    50% {
        transform: translateY(4px)
    }
}

@keyframes blobFloat10 {

    0%,
    100% {
        transform: translateY(-14px)
    }

    50% {
        transform: translateY(-23px)
    }
}

.ind-blob.active:nth-child(odd) {
    animation: none;
    transform: translateY(-18px) scale(1.07);
}

.ind-blob.active:nth-child(even) {
    animation: none;
    transform: translateY(10px) scale(1.07);
}


/* Filter transition on cards */
.pcard {
    transition: opacity .35s ease, transform .35s ease !important;
}

.pcard.ind-hidden {
    opacity: 0;
    transform: scale(.94);
    pointer-events: none;
    position: absolute;
    left: -9999px;
}

.port-inner {
    transition: none;
}

/* No results state */
.ind-empty {
    display: none;
    padding: 60px 60px 20px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    color: rgba(26, 10, 46, .35);
    font-weight: 500;
    letter-spacing: -.01em;
    position: relative;
    z-index: 2;
}

.ind-empty.show {
    display: block;
}

/* ABOUT */


/* TESTI  Google Review Marquee */
#testimonials {
    padding-bottom: 72px;
    background: var(--offwhite);
    overflow: hidden;
}

#testimonials h2.sh {
    color: var(--dark);
}

#testimonials .sdesc {
    color: var(--gray);
}

#testimonials .lbl {
    color: var(--pink);
}

.grev-track-wrap {
    position: relative;
    margin-top: 56px;
    overflow: hidden;
}

.grev-track {
    display: flex;
    gap: 24px;
    flex-shrink: 0;
    width: max-content;
    will-change: transform;
    padding: 12px 24px 20px;
}

.grev-card {
    flex-shrink: 0;
    width: 320px;
    background: #fff;
    border-radius: 16px;
    padding: 24px 26px 22px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .04);
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid rgba(0, 0, 0, .06);
    transition: transform .3s, box-shadow .3s;
    align-self: flex-start;
    height: 220px;
    overflow: hidden;
}

.grev-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
}

.grev-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.grev-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: .85rem;
    color: #fff;
}

.grev-info {
    flex: 1;
    min-width: 0;
}

.grev-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    color: #1a0a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grev-date {
    font-size: .72rem;
    color: #999;
    margin-top: 1px;
}

.grev-logo {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.grev-logo svg {
    width: 18px;
    height: 18px;
}

.grev-stars {
    display: flex;
    gap: 2px;
}

.grev-star {
    font-size: .82rem;
    color: #fbbc04;
}

.grev-text {
    font-size: .85rem;
    line-height: 1.7;
    color: rgba(0, 0, 0, .62);
}

.grev-card.rita-expanded {
    height: auto;
}

/*  Testimonial arrows & controls (mirrors portfolio)  */
.grev-outer {
    position: relative;
}

.grev-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 24px rgba(112, 38, 138, .18), 0 2px 8px rgba(0, 0, 0, .1);
    color: #1a0a2e;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, background .2s;
    z-index: 20;
}

.grev-arrow svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
}

.grev-arrow-prev {
    left: 16px;
}

.grev-arrow-next {
    right: 16px;
}

.grev-arrow:hover {
    background: var(--pink);
    color: #fff;
}

.grev-outer:hover .grev-arrow {
    opacity: 1;
    pointer-events: auto;
}

.grev-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding: 0 60px;
}

.grev-progress {
    flex: 1;
    max-width: 100%;
    height: 2px;
    background: rgba(26, 10, 46, .1);
    border-radius: 2px;
    overflow: hidden;
}

.grev-progress-bar {
    height: 100%;
    background: var(--grad);
    border-radius: 2px;
    width: 0%;
    transition: width .1s;
}

/* "Powered by Google Reviews" caption under the testimonials carousel */
.grev-powered {
    text-align: center;
    margin-top: 36px;
    font-size: .82rem;
    font-weight: 600;
    color: #444;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* BLOG */
.blog-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 48px
}

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

.bcard {
    background: #fff;
    border: 1px solid rgba(192, 21, 127, .1);
    border-radius: 16px;
    overflow: hidden;
    cursor: none;
    transition: transform .3s, box-shadow .3s
}

.bcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(192, 21, 127, .12)
}

.bthumb {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    transition: transform .45s
}

.bcard:hover .bthumb {
    transform: scale(1.04)
}

.bthumb-wrap {
    overflow: hidden
}

.bc {
    padding: 22px 22px 26px
}

.bdate {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pink);
    margin-bottom: 8px
}

.btitle {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: .98rem;
    line-height: 1.28;
    color: #1a0a2e;
    margin-bottom: 10px;
    transition: color .25s
}

.bcard:hover .btitle {
    color: var(--pink)
}

.bexc {
    font-size: .82rem;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(26, 10, 46, .5);
    margin-bottom: 14px
}

.blink {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(26, 10, 46, .35);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: gap .25s, color .25s
}

.blink:hover {
    gap: 13px;
    color: var(--pink)
}

/* CTA */
#cta {
    padding: 96px 60px;
    background: var(--dark2)
}

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

.ci {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .88rem;
    font-weight: 300;
    padding: 14px 18px;
    outline: none;
    transition: border-color .25s;
    width: 100%;
    display: block;
    margin-bottom: 10px
}

.ci::placeholder {
    color: rgba(255, 255, 255, .25)
}

.ci:focus {
    border-color: var(--pink)
}

.ck {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 4px 0 12px
}

.ck input {
    accent-color: var(--pink);
    margin-top: 3px;
    flex-shrink: 0
}

.ck label {
    font-size: .76rem;
    color: rgba(255, 255, 255, .35);
    line-height: 1.5
}

.csub {
    background: var(--grad);
    color: #fff;
    border: none;
    cursor: none;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 15px 34px;
    transition: opacity .25s, transform .2s
}

.csub:hover {
    opacity: .82;
    transform: translateY(-2px)
}

/* FOOTER */
footer {
    background: #fefcff;
    padding: 0 0 0;
    border-top: 1px solid rgba(192, 21, 127, .12)
}

.f-header {
    padding: 22px 60px;
    border-bottom: 1px solid rgba(192, 21, 127, .1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.f-header-logo img {
    height: 80px;
    width: auto;
    display: block;
    object-fit: unset;
    max-width: none
}

.f-header-tag {
    font-size: .78rem;
    font-weight: 400;
    color: #111;
    font-style: italic;
}

.fg {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.3fr;
    gap: 0;
    margin-bottom: 0;
}

.fc {
    padding: 44px 40px;
    position: relative;
}

.fc::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(192, 21, 127, .2), transparent);
}

.fc:last-child::after {
    display: none;
}

.fc h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #c0157f;
    margin-bottom: 18px;
}

.fc ul {
    list-style: none
}

.fc ul li {
    margin-bottom: 10px
}

.fc ul li a {
    font-size: .82rem;
    font-weight: 400;
    color: #111;
    text-decoration: none;
    transition: color .25s
}

.fc ul li a:hover {
    color: var(--pink)
}

.fcontact {
    list-style: none
}

.fcontact li {
    display: flex;
    gap: 9px;
    margin-bottom: 12px;
    align-items: flex-start
}

.fcontact li svg {
    flex-shrink: 0;
    color: var(--pink);
    margin-top: 2px
}

.fcontact li span {
    font-size: .8rem;
    font-weight: 400;
    color: #111;
    line-height: 1.6
}

.fcontact li a {
    font-size: .8rem;
    font-weight: 400;
    color: #111;
    text-decoration: none;
    transition: color .25s;
}

.fcontact li a:hover {
    color: var(--pink);
}

.fsocs {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.fsoc {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(192, 21, 127, .2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    text-decoration: none;
    font-size: .72rem;
    transition: border-color .25s, color .25s, background .25s
}

.fsoc:hover {
    border-color: var(--pink);
    color: #fff;
    background: var(--pink)
}

.fbot {
    background: linear-gradient(90deg, rgba(192, 21, 127, .06), rgba(112, 38, 138, .06));
    padding: 16px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px
}

.fcopy {
    font-size: .72rem;
    color: #111
}

.fbot-right {
    font-size: .72rem;
    color: #c0157f;
    font-weight: 600;
}

/* ----- FREE ANALYSIS KINETIC ----- */
#free-analysis {
    position: relative;
    overflow: hidden;
    background: #09061a;
}

/*  Ticker strip  */
.fa-ticker {
    background: linear-gradient(90deg, #c0157f, #70268a);
    padding: 11px 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.fa-ticker-track {
    display: flex;
    white-space: nowrap;
    animation: fatick 18s linear infinite;
}

.fa-tick-item {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fa-tick-item::after {
    content: '';
    font-size: .5rem;
    opacity: .6
}

@keyframes fatick {
    from {
        transform: translateX(0)
    }

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

/*  Bubbles  */
.fa-bubble {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    animation: fapulse var(--dur, 6s) ease-in-out infinite alternate;
}

@keyframes fapulse {
    from {
        transform: translate(0, 0) scale(1)
    }

    to {
        transform: translate(var(--tx, 20px), var(--ty, -30px)) scale(var(--sc, 1.15))
    }
}

/*  Main body  */
.fa-body {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 60px 90px;
}

/*  Left: big headline  */
.fa-left {
    position: relative;
    will-change: transform
}

.fa-eyebrow {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #c0157f;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.fa-eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    background: #c0157f
}

.fa-headline {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: .95;
    letter-spacing: -.03em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 32px;
}

.fa-headline em {
    font-style: normal;
    background: linear-gradient(135deg, #c0157f, #70268a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fa-sub {
    font-size: .95rem;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(255, 255, 255, .5);
    max-width: 440px;
    margin-bottom: 36px;
}

.fa-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px
}

.fa-pill {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .18);
    padding: 9px 20px;
    transition: border-color .25s, background .25s;
}

.fa-pill:hover {
    border-color: #c0157f;
    background: rgba(192, 21, 127, .12)
}

.fa-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.fa-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font-size: .875rem;
    font-weight: 300;
    line-height: 1.65;
    color: rgba(255, 255, 255, .65);
}

.fa-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c0157f, #70268a);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.fa-check svg {
    width: 11px;
    height: 11px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.5
}

/*  Right: floating form card  */
.fa-card {
    position: relative;
    will-change: transform;
    background: linear-gradient(160deg, #70268a 0%, #c0286a 55%, #c0157f 100%);
    padding: 36px 30px 40px;
    box-shadow: 0 30px 80px rgba(192, 21, 127, .35), 0 8px 24px rgba(0, 0, 0, .5);
}

/* glint line at top */
.fa-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
}

.fa-card-eyebrow {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
    margin-bottom: 6px;
}

.fa-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    color: #fff;
    margin-bottom: 24px;
    line-height: 1;
    letter-spacing: -.02em;
}

.fa-inp {
    width: 100%;
    display: block;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 0;
    padding: 13px 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .84rem;
    color: #fff;
    outline: none;
    margin-bottom: 10px;
    transition: background .2s, border-color .2s;
}

.fa-inp::placeholder {
    color: rgba(255, 255, 255, .45)
}

.fa-inp:focus {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .5)
}

.fa-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 6px 0 16px
}

.fa-consent input {
    flex-shrink: 0;
    margin-top: 3px;
    width: 15px;
    height: 15px;
    accent-color: #fff
}

.fa-consent label {
    font-size: .76rem;
    color: rgba(255, 255, 255, .7);
    line-height: 1.5
}

.fa-btn {
    width: 100%;
    background: #111;
    color: #fff;
    border: none;
    cursor: none;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 17px;
    transition: background .2s, transform .2s, box-shadow .2s;
    position: relative;
    overflow: hidden;
}

.fa-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .08), transparent);
    opacity: 0;
    transition: opacity .2s;
}

.fa-btn:hover {
    background: #000;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5)
}

.fa-btn:hover::after {
    opacity: 1
}

@media(max-width:900px) {
    .fa-body {
        grid-template-columns: 1fr;
        padding: 50px 24px 60px;
        gap: 40px
    }

    .fa-headline {
        font-size: clamp(2.4rem, 8vw, 4rem)
    }
}

/* ========================================================================
   2. PARTNERS — Logo pill / marquee
   ======================================================================== */

/* Section shells (white band between the ticker and Our Story) */
#partners {
    background: #fff;
    padding: 48px 60px 32px;
}

#trusted {
    background: #fff;
    padding: 32px 60px 48px;
}

.logo-pill {
    position: relative;
    background: linear-gradient(135deg, rgba(192, 21, 127, .08), rgba(112, 38, 138, .08));
    border-radius: 24px;
    padding: 32px 0;
    overflow: hidden;
    box-shadow: 0 8px 48px rgba(112, 38, 138, .10);
    border: 1px solid rgba(192, 21, 127, .18);
}

.logo-fade-l,
.logo-fade-r {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 110px;
    z-index: 3;
    pointer-events: none;
}

.logo-fade-l {
    left: 0;
    background: linear-gradient(90deg, rgba(192, 21, 127, .12) 0%, transparent 100%);
}

.logo-fade-r {
    right: 0;
    background: linear-gradient(270deg, rgba(112, 38, 138, .12) 0%, transparent 100%);
}

.logo-card {
    flex-shrink: 0;
    width: 220px;
    height: 110px;
    background: #fff;
    border-radius: 18px;
    margin: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    cursor: default;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .10);
    position: relative;
    overflow: hidden;
}

.logo-card::before {
    display: none;
}

.logo-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, .10),
        0 0 0 1.5px rgba(192, 21, 127, .45);
    background: #fff;
}

.logo-card:hover::before {
    display: none;
}

.lcard-svg {
    width: 100%;
    height: 100%;
    max-height: 82px;
    object-fit: contain;
}

.shopify-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    display: block;
}

#partner-track,
#trust-track {
    display: flex;
    width: max-content;
    padding: 10px 0;
}

#partner-track {
    animation: logoScroll 32s linear infinite;
}

#trust-track {
    animation: logoScroll 38s linear infinite;
}

#partner-track:hover,
#trust-track:hover {
    animation-play-state: paused;
}

@keyframes logoScroll {
    from {
        transform: translateX(0);
    }

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

@keyframes partnerScroll {
    from {
        transform: translateX(0);
    }

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

.partner-badge {
    display: none !important;
}

@media(max-width:900px) {

    #partners,
    #trusted {
        padding: 60px 20px;
    }

    .logo-card {
        width: 170px;
        height: 90px;
    }
}

/* ========================================================================
   3. OUR STORY — Two-column intro + SVG timeline
   ======================================================================== */

/*  OUR STORY  */
#our-story {
    background: #fff;
    padding: 100px 60px 120px;
    overflow: hidden;
    position: relative;
}

/* Two-column layout: left text | right timeline */
.story-layout {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0;
    position: relative;
}

/* LEFT: headline block  vertically centered */
.story-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 60px;
}

.story-headline {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -.025em;
    text-transform: uppercase;
    color: #111;
    margin: 0 0 40px;
}

.story-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pink);
    text-decoration: none;
    transition: gap .2s;
}

.story-cta-link:hover {
    gap: 12px;
}

.story-eyebrow {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--pink);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.story-eyebrow::before {
    content: '';
    width: 22px;
    height: 1.5px;
    background: var(--pink);
}

.story-headline-new {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #111;
    margin: 0 0 20px;
}

.story-headline-new em {
    font-style: normal;
    color: var(--pink);
}

.story-body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .95rem;
    font-weight: 400;
    line-height: 1.75;
    color: #555;
    margin: 0 0 14px;
    max-width: 400px;
}

/* RIGHT: the SVG timeline canvas */
.story-right {
    position: relative;
    height: 480px;
    overflow: visible;
}

.story-right svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/*  Stem grow animation  */
@keyframes stemGrow {
    from {
        stroke-dashoffset: var(--sh);
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Axis draw-on */
@keyframes axisGrow {
    from {
        stroke-dashoffset: 2000;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* Glowing orb travelling along the axis */
@keyframes orbTravel {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(var(--orb-travel));
    }
}

@keyframes orbPulse {

    0%,
    100% {
        opacity: .9;
        r: 5;
    }

    50% {
        opacity: .5;
        r: 8;
    }
}

/* Triggered state  added by JS when section enters viewport */
#our-story.tl-on .tl-axis-path {
    stroke-dashoffset: 0 !important;
    transition: stroke-dashoffset 1.3s cubic-bezier(.22, 1, .36, 1) .1s;
}

#our-story.tl-on .tl-label {
    animation: slideUp .5s ease both;
}

#our-story.tl-on .tl-dot-circle {
    animation: fadeIn .3s ease both;
}

#our-story.tl-on .tl-orb {
    animation: orbTravel 4s linear 1.4s infinite alternate, orbPulse 2s ease-in-out 1.4s infinite;
}

/* Hover on each milestone group */
.tl-milestone {
    cursor: default;
}

.tl-milestone:hover .tl-dot-circle {
    r: 7;
    transition: r .2s ease;
}

/* ========================================================================
   4. WHAT WE DO — Services grid
   ======================================================================== */

#what-we-do {
    background: linear-gradient(135deg, #eddaf5 0%, #f0e8f5 35%, #f8f0ff 50%, #f0e8f5 65%, #e2cff0 100%);
    padding: 96px 60px;
    position: relative;
    overflow: hidden;
}

#what-we-do::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: svc-shimmer 3s linear infinite;
    pointer-events: none;
    z-index: 0;
}

#what-we-do::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 40% at 50% 50%, rgba(238, 3, 119, 0.1) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

@keyframes svc-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

#what-we-do .svc-header,
#what-we-do .svc-grid {
    position: relative;
    z-index: 1;
}

.svc-header {
    max-width: 1300px;
    margin: 0 auto 40px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.svc-heading {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: #1a0a2e;
    margin: 0;
    letter-spacing: -.025em;
}

.svc-subtext {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .88rem;
    color: #555;
    max-width: 260px;
    text-align: right;
    line-height: 1.7;
}

.svc-grid {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/*  Lesse Studio card style  */
.svc-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    /* On-brand gradient fallback shows behind the photo while it loads
     (and stays visible if an image is ever missing) so every card
     looks intentional and consistent. */
    background: linear-gradient(145deg, #70268a 0%, #9b1aff 55%, #c0157f 100%);
    cursor: pointer;
    height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 20px 20px;
    border: none;
    text-decoration: none;
    will-change: transform;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .06);
    isolation: isolate;
}

/* VanillaTilt injects .js-tilt-glare  keep it rounded */
.svc-card .js-tilt-glare {
    border-radius: 18px !important;
}

/* Background image layer */
.svc-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    border-radius: 18px;
    transition: transform 0.65s cubic-bezier(0.23, 1, 0.32, 1), filter 0.65s ease;
    transform: scale(1.0);
    filter: brightness(0.92);
}

.svc-card:hover .svc-card-img {
    transform: scale(1.06);
    filter: brightness(0.75) blur(2px);
}

/* Dark gradient overlay always present at top for text readability */
.svc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, .38) 0%,
            rgba(0, 0, 0, .0) 40%,
            rgba(0, 0, 0, .0) 55%,
            rgba(0, 0, 0, .45) 100%);
    z-index: 1;
    pointer-events: none;
    transition: background 0.45s ease;
}

.svc-card:hover::before {
    background: linear-gradient(180deg,
            rgba(0, 0, 0, .45) 0%,
            rgba(0, 0, 0, .12) 38%,
            rgba(0, 0, 0, .12) 55%,
            rgba(0, 0, 0, .55) 100%);
}

/* Hover glow */
.svc-card:hover {
    box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
}

/*  Top row: title + count  */
.svc-card-top {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.svc-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1.18rem;
    color: #fff;
    line-height: 1.25;
    margin: 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

.svc-count {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .68rem;
    color: rgba(255, 255, 255, .75);
    font-weight: 500;
    letter-spacing: .04em;
    white-space: nowrap;
    padding-top: 3px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

/*  Hidden watermark number (keep in DOM, just invisible)  */
.svc-num {
    display: none;
}

/*  Glowing dot  hidden  */
.svc-dot {
    display: none;
}

/*  Bottom: tags + arrow  */
.svc-card-bottom {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Tags: frosted glass pills, staggered slide-up */
.svc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 2px;
}

.svc-tag {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .72rem;
    font-weight: 500;
    color: #1a0a2e;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    border: none;
    border-radius: 100px;
    padding: 6px 14px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), background 0.2s ease;
}

.svc-tag:hover {
    background: rgba(255, 255, 255, 0.97);
}

/* Stagger each tag */
.svc-tag:nth-child(1) {
    transition-delay: 0.00s;
}

.svc-tag:nth-child(2) {
    transition-delay: 0.05s;
}

.svc-tag:nth-child(3) {
    transition-delay: 0.10s;
}

.svc-tag:nth-child(4) {
    transition-delay: 0.15s;
}

.svc-tag:nth-child(5) {
    transition-delay: 0.20s;
}

.svc-tag:nth-child(6) {
    transition-delay: 0.25s;
}

.svc-card:hover .svc-tag {
    opacity: 1;
    transform: translateY(0);
}

/* "See More" link */
.svc-arrow {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .9);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease 0.22s, transform 0.35s cubic-bezier(0.23, 1, 0.32, 1) 0.22s, gap 0.2s ease;
    align-self: flex-end;
}

.svc-arrow::after {
    content: '’';
    display: inline-block;
    transition: transform 0.25s ease;
}

.svc-card:hover .svc-arrow {
    opacity: 1;
    transform: translateY(0);
}

.svc-card:hover .svc-arrow:hover {
    gap: 12px;
}

.svc-card:hover .svc-arrow:hover::after {
    transform: translateX(4px);
}

/* (Responsive rules for #what-we-do are consolidated in section 7 at the
   end of this file.) */

/* ========================================================================
   5. STATS — Animated counters
   ======================================================================== */

#stats {
    background: #18102a;
    border-top: 1px solid rgba(192, 21, 127, .15);
    border-bottom: 1px solid rgba(192, 21, 127, .15);
}

.stats-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.stat-item {
    padding: 56px 60px;
    border-right: 1px solid rgba(255, 255, 255, .06);
    text-align: center;
}

.stat-item:last-child {
    border-right: none
}

.stat-top {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(2.8rem, 4vw, 4.2rem);
    line-height: 1;
    letter-spacing: -.03em;
    color: #fff;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 0;
}

.stat-plus {
    font-size: 50%;
    margin-top: 6px;
    margin-left: 2px;
    color: #c0157f;
}

.stat-bar {
    height: 3px;
    background: linear-gradient(90deg, #c0157f, #70268a);
    border-radius: 2px;
    width: 32px;
    margin: 12px auto 10px;
}

.stat-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .38);
}

/* ========================================================================
   6. MAP & SOCIAL + FOOTER
   ======================================================================== */

#map-social {
    position: relative;
    padding: 80px 0 0;
    overflow: hidden;
}

.ms-bg-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #c0157f 0%, #70268a 100%);
    z-index: 0;
}

.ms-dot-pattern {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #d0207f, #8030a0);
    animation: msGlitch 5s ease-in-out infinite;
}

.ms-glitch2 {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #b0106f, #60208a);
    opacity: 0;
    animation: msGlitch2 7s ease-in-out infinite;
}

.ms-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .18) 50%, transparent 60%);
    animation: msShimmer 3s ease-in-out infinite;
}

@keyframes msGlitch {

    0%,
    94% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: translateX(0);
    }

    95% {
        clip-path: polygon(0 18%, 100% 18%, 100% 36%, 0 36%);
        transform: translateX(-5px);
    }

    96% {
        clip-path: polygon(0 55%, 100% 55%, 100% 72%, 0 72%);
        transform: translateX(5px);
    }

    97% {
        clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
        transform: translateX(-3px);
    }

    98%,
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: translateX(0);
    }
}

@keyframes msGlitch2 {

    0%,
    88% {
        opacity: 0;
        transform: translate(0, 0);
    }

    89% {
        opacity: .55;
        transform: translate(4px, -3px);
    }

    91% {
        opacity: .35;
        transform: translate(-4px, 3px);
    }

    93% {
        opacity: .6;
        transform: translate(3px, 2px);
    }

    95%,
    100% {
        opacity: 0;
        transform: translate(0, 0);
    }
}

@keyframes msShimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(200%);
    }
}

.ms-head {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 52px;
    padding: 0 60px;
}

.ms-head .sh em {
    font-style: italic;
    background: none;
    -webkit-text-fill-color: rgba(255, 255, 255, .5);
}

.ms-stage {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px 80px;
    gap: 32px;
    align-items: stretch;
}

/* Facebook card  left column, full height */
.ms-card-fb {
    position: relative;
    transition: transform .4s cubic-bezier(.25, .46, .45, .94), box-shadow .4s;
}

.ms-card-fb:hover {
    transform: translateY(-8px);
}

.ms-card {
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .28), 0 4px 16px rgba(0, 0, 0, .12);
    overflow: hidden;
    border-radius: 16px;
}

.ms-card:hover {
    box-shadow: 0 36px 80px rgba(0, 0, 0, .36);
}

.ms-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ms-card-head {
    padding: 24px 28px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.ms-card-head h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #111;
    margin: 10px 0 4px;
}

.ms-card-head p {
    font-size: .75rem;
    color: rgba(0, 0, 0, .4);
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.ms-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 11px;
    background: linear-gradient(135deg, #c0157f, #70268a);
    color: #fff;
    border-radius: 4px;
}

.ms-tag-fb {
    background: #1877f2;
}

.ms-embed {
    flex: 1;
    min-height: 380px;
    line-height: 0;
    position: relative;
}

.ms-embed iframe {
    width: 100%;
    height: 100%;
}

.ms-embed-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: none;
}

.ms-btn {
    display: block;
    text-align: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 16px;
    background: linear-gradient(135deg, #c0157f, #70268a);
    color: #fff;
    text-decoration: none;
    transition: opacity .2s;
}

.ms-btn:hover {
    opacity: .82;
}

.ms-btn-fb {
    background: #1877f2;
}

/*  Right column  */
.ms-right-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ms-right-col .ms-loc-card {
    flex: 1;
}

/* Location cards */
.ms-loc-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 14px;
    padding: 22px 26px;
    transition: background .25s, border-color .25s, transform .25s;
}

.ms-loc-card:hover {
    background: rgba(0, 0, 0, .32);
    border-color: rgba(255, 255, 255, .38);
    transform: translateX(6px);
}

.ms-loc-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.ms-loc-nj {
    background: rgba(238, 3, 119, .28);
}

.ms-loc-ca {
    background: rgba(192, 21, 127, .28);
}

.ms-loc-in {
    background: rgba(112, 38, 138, .36);
}

.ms-loc-text {
    flex: 1;
}

.ms-loc-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff;
    margin: 0 0 5px;
    line-height: 1.2;
}

.ms-loc-sub {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .88rem;
    color: rgba(255, 255, 255, .55);
    font-style: italic;
}

.ms-loc-addr {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .82rem;
    color: rgba(255, 255, 255, .4);
    font-style: normal;
    margin-top: 6px;
    display: block;
    line-height: 1.5;
}

.ms-loc-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ms-dot-nj {
    background: #ee0377;
    box-shadow: 0 0 8px rgba(238, 3, 119, .6);
}

.ms-dot-ca {
    background: #c0157f;
    box-shadow: 0 0 8px rgba(192, 21, 127, .6);
}

.ms-dot-in {
    background: #9b4dca;
    box-shadow: 0 0 8px rgba(112, 38, 138, .6);
}


/* ========================================================================
   7. RESPONSIVE — consolidated breakpoints
   ------------------------------------------------------------------------
   Strategy:
     • A hard overflow-x clamp on <html> kills any sideways scroll caused
       by the wide decorative marquees.
     • ≤980px  — tablet & mobile: nav collapses to a slide-in menu, the big
                 60px section gutters shrink, multi-column grids stack.
     • ≤600px  — phones: single-column everything, tighter type & padding.
   ======================================================================== */

/* Kill horizontal scroll globally (marquees are clipped, not scrollable) */
html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    max-width: 100%;
}

/* ---------- Tablet & mobile : ≤ 980px ---------- */
@media (max-width: 980px) {

    /* --- NAVIGATION : collapse to hamburger + slide-in panel --- */
    nav,
    nav.stuck {
        padding-left: 24px;
        padding-right: 24px;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-panel {
        position: fixed;
        top: 0;
        right: 0;
        width: min(82vw, 340px);
        height: 100vh;
        height: 100dvh;
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
        padding: 100px 30px 40px;
        box-shadow: -8px 0 40px rgba(112, 38, 138, .18);
        transform: translateX(100%);
        transition: transform .35s cubic-bezier(.4, 0, .2, 1);
        overflow-y: auto;
        z-index: 110;
    }

    nav.nav-open .nav-panel {
        transform: translateX(0);
    }

    .nav-backdrop {
        display: block;
    }

    .nav-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
    }

    .nav-links>li {
        width: 100%;
    }

    .nav-links a {
        display: block;
        font-size: .82rem;
        color: #1a0a2e;
        padding: 13px 0;
        width: 100%;
    }

    .nav-links>li>a::after {
        display: none;
    }

    /* Services becomes a tap-to-open accordion on mobile */
    .nav-dropdown-menu {
        position: static;
        transform: none;
        display: none;
        min-width: 0;
        padding-top: 0;
        margin: 0 0 6px 14px;
    }

    .nav-dropdown-menu::before,
    .nav-dropdown-menu::after {
        display: none;
    }

    .nav-dropdown.open .nav-dropdown-menu {
        display: block;
    }

    .nav-dropdown:hover .nav-dropdown-menu {
        display: none;
    }

    /* disable hover-open on touch */
    .nav-dropdown.open .nav-dropdown-menu {
        display: block;
    }

    .nav-dropdown-menu li a {
        padding: 10px 0;
        font-size: .72rem;
    }

    .nav-dropdown.open .nav-dropdown-toggle svg {
        transform: rotate(180deg);
    }

    .nav-cta {
        margin-top: 20px;
        text-align: center;
        width: 100%;
        padding: 14px 26px;
    }

    .logo img {
        height: 56px;
    }

    /* --- SECTION GUTTERS : shrink the 60px desktop padding --- */
    .section {
        padding: 72px 24px;
    }

    #our-story {
        padding: 72px 24px 80px;
    }

    #what-we-do {
        padding: 72px 24px;
    }

    #work {
        padding: 72px 0;
    }

    #work .work-head {
        padding: 0 24px;
        margin-bottom: 48px;
    }

    #cta {
        padding: 72px 24px;
    }

    #partners {
        padding: 40px 24px 28px;
    }

    #trusted {
        padding: 28px 24px 40px;
    }

    /* --- HERO --- */
    #hero {
        padding-top: 150px;
        min-height: auto;
        padding-bottom: 60px;
    }

    /* --- OUR STORY : timeline SVG stacks under the intro text --- */
    .story-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Let the wide timeline scroll sideways instead of shrinking to an
     illegible size; the inner SVG keeps a comfortable minimum width. */
    .story-right {
        height: 420px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .story-right svg {
        min-width: 640px;
    }

    /* --- WHAT WE DO --- */
    .svc-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .svc-card {
        height: 360px;
    }

    .svc-header {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 12px;
    }

    .svc-subtext {
        text-align: left;
        max-width: 100%;
    }

    /* --- FREE ANALYSIS : form drops below the headline --- */
    .fa-body {
        grid-template-columns: 1fr;
        padding: 60px 24px 70px;
        gap: 40px;
    }

    .fa-card {
        max-width: 480px;
        width: 100%;
    }

    /* --- STATS : 2 x 2 grid --- */
    .stats-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-item {
        padding: 40px 20px;
    }

    .stat-item:nth-child(2) {
        border-right: none;
    }

    .stat-item:nth-child(1),
    .stat-item:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    /* --- MAP & SOCIAL : feed over locations --- */
    .ms-stage {
        grid-template-columns: 1fr;
        padding: 0 24px 60px;
        gap: 24px;
    }
}

/* ---------- Phones : ≤ 600px ---------- */
@media (max-width: 600px) {

    nav,
    nav.stuck {
        padding-left: 18px;
        padding-right: 18px;
    }

    .section {
        padding: 56px 18px;
    }

    #our-story {
        padding: 56px 18px 64px;
    }

    #what-we-do {
        padding: 56px 18px;
    }

    #work .work-head {
        padding: 0 18px;
    }

    #cta {
        padding: 56px 18px;
    }

    #hero {
        padding-top: 130px;
    }

    /* Single-column service cards */
    .svc-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .svc-card {
        height: 300px;
    }

    /* Hero cards stack to one column */
    .hero-cards {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 0 4px;
    }

    .hcard {
        padding: 32px 28px 44px;
        min-height: 340px;
    }

    /* Stats stack to a single column */
    .stats-inner {
        grid-template-columns: 1fr;
    }

    .stat-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
        padding: 34px 18px;
    }

    .stat-item:last-child {
        border-bottom: none;
    }

    /* Partners / trusted gutters */
    #partners {
        padding: 32px 16px 24px;
    }

    #trusted {
        padding: 24px 16px 36px;
    }

    .logo-card {
        width: 150px;
        height: 80px;
    }

    /* Map & social */
    .ms-stage {
        padding: 0 16px 48px;
    }
}