:root {
    --g: #00A651;
    --y: #FACC15;
    --o: #F26522;
    --m: #ED145B;
    --lb: #00AEEF;
    --p: #92278F;
    --db: #2E3192;
    --r: #D91A2A;
    --black: #080808;
    --white: #fff;
    --off: #f9f9f7;
    --text: #0e1d52;
    --muted: #5d6483;
    --serif: 'Instrument Serif', 'DM Serif Display', serif;
    --sans: 'Plus Jakarta Sans', 'Bricolage Grotesque', sans-serif;
    --body: 'Plus Jakarta Sans', 'Inter', sans-serif;
    /* Restrained two-tone neutrals — beans-style rhythm */
    --bg-cream: #f3ece1;     /* warm cream — primary neutral */
    --bg-white: #ffffff;     /* clean white — calm pause */
    --bg-feature: #f1dfd5;   /* dusty rose — reserved for ONE feature section */
}

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

html {
    scroll-behavior: auto;
}

body {
    font-family: var(--body);
    background: var(--off);
    color: var(--text);
    overflow-x: hidden;
    cursor: none;
}

body.is-loading {
    overflow: hidden;
}

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

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

button {
    border: none;
    background: none;
    font-family: inherit;
    cursor: none;
}

/* Form fields still need a real text cursor so users can see where they're typing */
input, textarea, select { cursor: text; }
select, input[type="submit"], input[type="button"] { cursor: pointer; }
@media (hover: none) and (pointer: coarse) {
    body, button { cursor: auto; }
    #cursor, #cursor-ring { display: none; }
}

ul {
    list-style: none;
}

/* GRAIN */
.grain {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px;
    animation: grain-move 1s steps(2) infinite;
}

@keyframes grain-move {
    0% {
        transform: translate(0, 0)
    }

    25% {
        transform: translate(-2%, -3%)
    }

    50% {
        transform: translate(1%, 2%)
    }

    75% {
        transform: translate(-1%, 1%)
    }

    100% {
        transform: translate(2%, -1%)
    }
}

/* CURSOR */
#cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
    mix-blend-mode: difference;
}

.c-dot {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
}

#cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 44px;
    height: 44px;
    border: 1.5px solid rgba(237, 20, 91, .6);
    border-radius: 50%;
    z-index: 9998;
    pointer-events: none;
    transition: width .3s, height .3s, border-color .3s, opacity .3s;
}

body.ch #cursor-ring {
    width: 80px;
    height: 80px;
    border-color: var(--m);
    opacity: .7;
}

body.ch .c-dot {
    transform: scale(2.5);
}

/* PRELOADER */
#loader {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2rem;
}

.loader-bg {
    position: absolute;
    inset: 0;
    background: var(--black);
}

.loader-content {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.loader-logo {
    height: 55px;
    filter: brightness(0) invert(1);
    opacity: 0;
    animation: fi .5s .2s forwards;
}

@keyframes fi {
    to {
        opacity: 1;
    }
}

.loader-line {
    width: 280px;
    height: 1px;
    background: rgba(255, 255, 255, .1);
}

.loader-prog {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--m), var(--lb));
    transition: width .05s linear;
}

.loader-pct {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, .35);
}

/* NAV */
#nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 78px;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 500;
    transition: background .4s, backdrop-filter .4s, border-bottom .4s;
    color: var(--white);
}

#nav.solid {
    background: rgba(249, 249, 247, .92);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    color: var(--text);
}

.n-logo img {
    height: 42px;
    transition: filter .4s;
    filter: brightness(0) invert(1);
}

#nav.solid .n-logo img {
    filter: none;
}

.n-links {
    display: flex;
    gap: 2.5rem;
}

.n-link {
    font-family: var(--sans);
    font-size: 0;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    flex-direction: column;
    height: .825rem;
}

.n-link::before,
.n-link::after {
    content: attr(data-text);
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    transition: transform .4s cubic-bezier(.76, 0, .24, 1);
    line-height: 1.1;
}

.n-link::after {
    position: absolute;
    top: 100%;
    color: var(--m);
}

.n-link:hover::before {
    transform: translateY(-100%);
}

.n-link:hover::after {
    transform: translateY(-100%);
}

.n-cta {
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--white);
    color: var(--text);
    padding: .7rem 1.6rem;
    border-radius: 100px;
    transition: background .3s, color .3s;
}

.n-cta:hover {
    background: var(--m);
    color: var(--white);
}

#nav.solid .n-cta {
    background: var(--text);
    color: var(--white);
}

#nav.solid .n-cta:hover {
    background: var(--m);
}

.n-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 26px;
}

.n-burger span {
    display: block;
    height: 1.5px;
    background: currentColor;
    width: 100%;
    transition: all .35s;
}

@media(max-width:900px) {
    .n-links {
        display: none;
    }

    .n-cta {
        display: none;
    }

    .n-burger {
        display: flex;
    }
}

/* MOBILE MENU */
#mob-menu {
    position: fixed;
    inset: 0;
    background: var(--black);
    z-index: 490;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: circle(0% at 95% 5%);
    transition: clip-path .8s cubic-bezier(.77, 0, .18, 1);
}

#mob-menu.open {
    clip-path: circle(150% at 95% 5%);
}

.mm-nav {
    text-align: center;
}

.mm-a {
    display: block;
    font-family: var(--serif);
    font-size: clamp(2.5rem, 9vw, 5.5rem);
    color: var(--white);
    line-height: 1.4;
    transition: color .3s;
    font-style: italic;
}

.mm-a:hover {
    color: var(--m);
}

/* HERO */
#hero {
    position: relative;
    height: 100vh;
    min-height: 720px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background: var(--black);
}

.hero-vid-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-vid-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .7;
}

.hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(8, 8, 8, .55) 0%, rgba(8, 8, 8, .25) 45%, rgba(8, 8, 8, .65) 100%);
}

.hero-body {
    position: relative;
    z-index: 2;
    padding: 0 6%;
    padding-top: 78px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-tag {
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--m);
    display: block;
    margin-bottom: 2.5rem;
    opacity: 0;
}

.hero-h1 {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(3.5rem, 9vw, 6rem);
    line-height: .95;
    letter-spacing: -.03em;
    color: var(--white);
    margin-bottom: 2rem;
}

.hero-sub {
    font-family: var(--sans);
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
    max-width: 640px;
    margin-bottom: 3rem;
}

.hero-sec-link {
    color: rgba(255, 255, 255, .85);
}

.word-row {
    display: block;
    overflow: hidden;
    line-height: 1.05;
}

.split-word,
.word-row em {
    display: inline-block;
    transform: translateY(110%);
    will-change: transform;
}

.italic-row em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .75);
    font-size: 1.12em;
    line-height: 1;
    padding: 0 .04em;
}

.hero-foot {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    opacity: 0;
}

.scroll-cue {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.sc-bar {
    display: block;
    width: 50px;
    height: 1px;
    background: rgba(255, 255, 255, .3);
    position: relative;
    overflow: hidden;
}

.sc-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--m);
    transform: translateX(-100%);
    animation: scan 2.5s 2s infinite;
}

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

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

.sc-txt {
    font-family: var(--sans);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
}

.hero-float {
    position: absolute;
    z-index: 3;
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    border: 1px solid rgba(255, 255, 255, .15);
    padding: .4rem 1rem;
    border-radius: 100px;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, .05);
    pointer-events: none;
}

.f1 {
    top: 25%;
    right: 8%
}

.f2 {
    top: 60%;
    right: 15%
}

.f3 {
    bottom: 25%;
    left: 5%
}

.ticker-band {
    position: relative;
    z-index: 2;
    background: #112356;
    padding: 9px 0;
    overflow: hidden;
}

.ticker-inner {
    display: flex;
    white-space: nowrap;
    animation: tick 20s linear infinite;
    align-items: center;
}

.ticker-inner span {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--white);
    padding: 0 1.25rem;
    line-height: 1;
}

.ticker-inner .sep {
    color: rgba(255, 255, 255, .5);
    padding: 0 .25rem;
}

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

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

@media(max-width:1100px) {
    .hero-float {
        display: none;
    }
}

@media(max-width:768px) {
    .hero-h1 {
        font-size: clamp(2.75rem, 12vw, 4.5rem);
        margin-bottom: 2.5rem;
    }
    .hero-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    .ticker-inner span {
        font-size: .95rem;
    }
}

/* STATS — warm cream */
#stats {
    background: var(--bg-cream);
    padding: 40px 5%;
    color: var(--text);
}

.stats-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    max-width: 1280px;
    margin: 0 auto;
}

.stat-item {
    flex: 1;
    min-width: 140px;
    text-align: center;
    padding: 1rem 1.25rem;
}

.stat-item .s-num {
    font-family: var(--sans);
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: clamp(2rem, 3.6vw, 3rem);
    display: inline-block;
    color: var(--text);
    line-height: 1;
}

.stat-item .s-suf {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    color: var(--m);
    margin-left: .12em;
    letter-spacing: -.01em;
}

/* Static (non-counting) stat value — e.g. "Live" */
.stat-item .s-num-txt {
    font-family: var(--sans);
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: clamp(2rem, 3.6vw, 3rem);
    display: inline-block;
    color: var(--m);
    line-height: 1;
}

.stat-item p {
    font-family: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: .65rem;
}

.stat-div {
    width: 1px;
    height: 56px;
    background: rgba(14, 29, 82, .15);
}

/* SECTION COUNTER (auto-numbers each section) */
body {
    counter-reset: section;
}

/* EYEBROW — now primary section title (editorial, proper-case, restrained) */
.eyebrow {
    font-family: var(--sans);
    font-size: clamp(2.25rem, 5vw, 4.25rem);
    font-weight: 800;
    letter-spacing: -.025em;
    text-transform: none;
    color: var(--text);
    display: block;
    margin-bottom: 1.5rem;
    line-height: .98;
    position: relative;
    counter-increment: section;
}

.eyebrow::before {
    content: "— " counter(section, decimal-leading-zero);
    display: block;
    font-family: var(--body);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: 3px;
    color: var(--m);
    text-transform: uppercase;
    margin-bottom: 1.1rem;
    line-height: 1;
}

.eyebrow.light {
    color: var(--white);
}

.eyebrow.light::before {
    color: var(--m);
    opacity: .9;
}

/* SECTION SUB-TITLE (was the big serif headline — now bold subtitle) */
.sec-title {
    font-family: var(--sans);
    font-size: clamp(1.2rem, 1.9vw, 1.65rem);
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 2rem;
    letter-spacing: -.005em;
    max-width: 720px;
    color: var(--text);
}

.sec-title em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--m);
    font-size: 1.22em;
    letter-spacing: 0;
    line-height: 1;
}

/* INTRO — white pause */
#intro {
    padding: 120px 0;
    background: var(--bg-white);
}

.intro-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 1100px;
}

.intro-wrap.has-image {
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: 4rem;
    max-width: none;
}

.intro-img-col img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

@media (max-width: 900px) {
    .intro-wrap.has-image {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

.intro-tag-col {
    margin-bottom: .75rem;
}

.intro-tag-col .eyebrow {
    margin-bottom: 0;
}

.intro-line {
    display: none;
}

.big-statement {
    font-family: var(--sans);
    font-size: clamp(1.3rem, 2.1vw, 1.8rem);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 1.75rem;
    letter-spacing: -.005em;
    max-width: 780px;
    color: var(--text);
}

.big-statement em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--m);
    font-size: 1.2em;
    line-height: 1;
}

.intro-body {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--muted);
    margin-bottom: 2rem;
    /*max-width: 680px;*/
}

.text-arrow {
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 3px;
    transition: color .3s;
}

.text-arrow svg {
    width: 40px;
    height: 12px;
    overflow: visible;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    transition: transform .3s;
}

.text-arrow:hover {
    color: var(--m);
}

.text-arrow:hover svg {
    transform: translateX(6px);
}

@media(max-width:768px) {
    .intro-wrap {
        gap: 0;
    }

    .intro-tag-col {
        margin-bottom: 1rem;
    }

    .intro-line {
        display: none;
    }
}

/* SERVICES — warm cream */
#services {
    padding: 120px 0;
    background: var(--bg-cream);
}

.sec-head {
    margin-bottom: 60px;
}

.svc-list {
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.svc-item {
    display: grid;
    grid-template-columns: 70px 1fr 180px 60px;
    align-items: center;
    gap: 3rem;
    padding: 40px 5%;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    transition: background .35s;
    position: relative;
}

.svc-item:hover {
    background: rgba(0, 0, 0, .015);
}

.si-num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    color: rgba(0, 0, 0, .2);
}

.si-body h3 {
    font-family: var(--sans);
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    font-weight: 800;
    margin-bottom: .5rem;
    transition: color .35s;
}

.si-body p {
    font-size: .9rem;
    color: var(--muted);
    line-height: 1.6;
    max-width: 480px;
}

.svc-item:hover .si-body h3 {
    color: var(--m);
}

.si-img {
    width: 160px;
    height: 105px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    background: var(--black);
}

.si-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.165, .84, .44, 1);
    position: relative;
    z-index: 1;
}

.svc-item:hover .si-img img {
    transform: scale(1.08);
}

.si-img .si-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: siOrb var(--d, 6s) ease-in-out infinite;
    animation-delay: var(--dl, 0s);
}

@keyframes siOrb {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(var(--tx, 10px), var(--ty, -8px)) scale(1.15);
    }
}

.si-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .15);
    pointer-events: none;
    z-index: 0;
    animation: siRing 4s linear infinite;
}

@keyframes siRing {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.si-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .35s;
}

.si-arrow svg {
    width: 36px;
    height: 36px;
    overflow: visible;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

.svc-item:hover .si-arrow {
    background: var(--m);
    border-color: var(--m);
    color: #fff;
}

@media(max-width:900px) {
    .svc-item {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .si-img,
    .si-arrow {
        display: none;
    }
}

/* ─── CAPABILITIES · BRAND-COLOR TILE GRID (LIGHT) ──────────────────────── */
#capabilities {
    padding: 120px 0 140px;
    background: var(--bg-cream);
    color: var(--text);
    position: relative;
    overflow: hidden;
}
#capabilities::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 10%, rgba(237, 20, 91, .06), transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(0, 174, 239, .06), transparent 50%);
    pointer-events: none;
}
.cap-head { position: relative; z-index: 1; margin-bottom: 64px; }
.cap-head .sec-title em { color: var(--m); }

.cap-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 0 5%;
}
.cap-tile {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 18px;
    overflow: hidden;
    display: block;
    isolation: isolate;
    background: #1a1a1a;
    transition: transform .5s cubic-bezier(.165,.84,.44,1), box-shadow .5s;
    box-shadow: 0 4px 18px rgba(14, 29, 82, .06);
}
.cap-tile video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.78) saturate(1.05);
    transition: filter .6s, transform .8s cubic-bezier(.165,.84,.44,1);
    z-index: 0;
}
.cap-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--tile) 18%, transparent) 0%,
        rgba(0,0,0,0) 45%,
        rgba(0,0,0,.15) 70%,
        color-mix(in srgb, var(--tile) 85%, #000 15%) 100%);
    opacity: .9;
    transition: opacity .5s;
}
.cap-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: inherit;
    pointer-events: none;
    transition: border-color .4s;
}
.cap-meta {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
}
.cap-num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    opacity: .9;
    letter-spacing: .04em;
    color: #fff;
}
.cap-meta h3 {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.05;
    letter-spacing: -.01em;
    color: #fff;
    text-shadow: 0 2px 22px rgba(0,0,0,.45);
}
.cap-arrow {
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .35s, transform .35s, border-color .35s;
}
.cap-arrow svg {
    width: 22px;
    height: 8px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.6;
    transition: transform .35s;
}
.cap-tile:hover { transform: translateY(-6px); box-shadow: 0 18px 42px rgba(14, 29, 82, .14); }
.cap-tile:hover video { filter: brightness(1) saturate(1.1); transform: scale(1.06); }
.cap-tile:hover .cap-overlay { opacity: .65; }
.cap-tile:hover::after { border-color: color-mix(in srgb, var(--tile) 60%, transparent); }
.cap-tile:hover .cap-arrow {
    background: var(--tile);
    border-color: var(--tile);
    transform: rotate(-12deg);
}
.cap-tile:hover .cap-arrow svg { transform: translateX(3px); }

@media (max-width: 1024px) {
    .cap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    #capabilities { padding: 80px 0 90px; }
    .cap-grid { grid-template-columns: 1fr; gap: 14px; padding: 0 6%; }
    .cap-tile { aspect-ratio: 3 / 4; }
    .cap-meta { padding: 22px; }
}

/* ─── FEATURED EVENTS · VIDEO GRID ──────────────────────── */
#featured-events {
    padding: 130px 0 120px;
    background: #060608;
    color: #fff;
    position: relative;
    overflow: hidden;
}
#featured-events::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 0%, rgba(146, 39, 143, .18), transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(0, 166, 81, .14), transparent 50%);
    pointer-events: none;
}
.fe-head {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin-bottom: 64px;
}
.fe-head .eyebrow.light { color: rgba(255,255,255,.55); }
.fe-head .sec-title { color: #fff; }
.fe-head .sec-title em { color: var(--m); }
.fe-sub {
    margin-top: 18px;
    color: rgba(255,255,255,.7);
    font-size: 1.02rem;
    line-height: 1.6;
    max-width: 560px;
    font-style: italic;
    font-family: var(--serif);
    font-weight: 400;
}

.fe-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px;
    gap: 14px;
    padding: 0 5%;
}
.fe-cell {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #111;
    grid-column: span 1;
    grid-row: span 1;
}
.fe-cell.fe-tall { grid-row: span 2; }
.fe-cell.fe-wide { grid-column: span 2; }
.fe-cell video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.165,.84,.44,1), filter .5s;
    filter: saturate(1.05) contrast(1.02);
}
.fe-cell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.85) 100%);
    pointer-events: none;
    opacity: .85;
    transition: opacity .4s;
}
.fe-cell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    box-shadow: inset 0 0 0 0 var(--accent, transparent);
    transition: box-shadow .4s;
    pointer-events: none;
    border-radius: inherit;
}
.fe-cell figcaption {
    position: absolute;
    z-index: 3;
    left: 22px;
    bottom: 18px;
    right: 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateY(8px);
    opacity: 0;
    transition: transform .5s, opacity .4s;
}
.fe-tag {
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    font-weight: 600;
}
.fe-name {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.1;
    color: #fff;
}
.fe-cell:hover video { transform: scale(1.06); }
.fe-cell:hover::after { opacity: 1; }
.fe-cell:hover figcaption { transform: translateY(0); opacity: 1; }
.fe-cell[data-accent]:hover { /* placeholder */ }
.fe-cell:hover::before { box-shadow: inset 0 0 0 2px var(--accent, #fff); }

/* per-tile accent ring via data-accent */
.fe-cell[data-accent="#ED145B"] { --accent: #ED145B; }
.fe-cell[data-accent="#F26522"] { --accent: #F26522; }
.fe-cell[data-accent="#FACC15"] { --accent: #FACC15; }
.fe-cell[data-accent="#00AEEF"] { --accent: #00AEEF; }
.fe-cell[data-accent="#00A651"] { --accent: #00A651; }
.fe-cell[data-accent="#92278F"] { --accent: #92278F; }

.fe-foot {
    margin-top: 56px;
    position: relative;
    z-index: 1;
}
.text-arrow.light {
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .02em;
}
.text-arrow.light svg {
    width: 42px;
    height: 12px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.4;
    transition: transform .35s;
}
.text-arrow.light:hover svg { transform: translateX(8px); }

@media (max-width: 1024px) {
    .fe-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
    .fe-cell.fe-wide { grid-column: span 2; }
    .fe-cell.fe-tall { grid-row: span 2; }
}
@media (max-width: 700px) {
    #featured-events { padding: 80px 0 80px; }
    .fe-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; gap: 10px; padding: 0 6%; }
    .fe-cell.fe-wide { grid-column: span 2; }
    .fe-cell.fe-tall { grid-row: span 1; }
    .fe-cell figcaption { left: 14px; right: 14px; bottom: 12px; opacity: 1; transform: none; }
    .fe-name { font-size: 1rem; }
}


/* ─── WORK · SCROLL-PINNED STEP SECTION ──────────────────────── */
.work-pin-sec{position:relative;background:var(--bg-white);color:var(--text);--wp-line:6.2rem;}
@media(min-width:1280px){.work-pin-sec{--wp-line:7rem;}}
.wp-stage{position:sticky;top:0;height:100vh;width:100%;display:grid;grid-template-columns:42% 58%;overflow:hidden;}

/* LEFT 42% */
.wp-left{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:8rem 4rem 3rem;border-right:1px solid rgba(14,29,82,.08);background:var(--bg-white);}
.wp-left-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.wp-left-mid{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2rem;padding:2.5rem 0;}
.wp-left-foot{display:flex;align-items:center;justify-content:space-between;gap:2rem;}

/* small mono label (overrides the global .eyebrow scaling — this is NOT the title) */
.wp-label{font-family:'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace;font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:1px;color:var(--text);text-transform:uppercase;display:inline-flex;align-items:center;gap:.7rem;font-weight:500;line-height:1;}
.wp-label-line{display:inline-block;width:28px;height:1px;background:var(--m);}

/* counter — mono muted */
.wp-counter{font-family:'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace;font-size:.72rem;letter-spacing:3px;color:var(--muted);text-transform:uppercase;display:flex;gap:.45rem;align-items:baseline;font-weight:500;line-height:1;}
.wp-counter .wp-cur{color:var(--text);font-weight:600;}
.wp-counter .wp-sep{opacity:.4;}

/* HEADLINE — 2-line slot, wraps if needed, never clips; track translated by JS every frame */
.wp-heading-mask{position:relative;overflow:hidden;height:var(--wp-line);width:100%;}
.wp-heading-track{display:flex;flex-direction:column;will-change:transform;}
.wp-heading{margin:0;font-family:var(--sans);font-weight:800;font-size:clamp(.95rem,1.1vw,1.15rem);line-height:1;letter-spacing:-.025em;color:var(--text);height:var(--wp-line);display:flex;align-items:center;white-space:normal;word-break:normal;overflow-wrap:break-word;}

/* DESCRIPTOR — JS-driven opacity + tiny y-offset based on proximity */
.wp-desc-mask{position:relative;min-height:5.2rem;max-width:440px;}
.wp-desc{position:absolute;inset:0;margin:0;font-family:var(--body);font-size:.975rem;line-height:1.65;color:var(--muted);opacity:0;will-change:opacity,transform;}

/* progress 1px bar */
.wp-prog{flex:1;height:1px;background:rgba(0,0,0,.12);position:relative;overflow:hidden;}
.wp-prog-fill{position:absolute;inset:0;background:var(--text);transform-origin:left center;transform:scaleX(0);transition:transform .15s linear;}

/* RIGHT — full-bleed image stage */
.wp-right{position:relative;background:var(--bg-cream);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;}
.wp-right::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 22%,rgba(237,20,91,.07),transparent 55%),radial-gradient(circle at 22% 78%,rgba(0,174,239,.05),transparent 55%);pointer-events:none;z-index:99;}
.wp-stack{position:relative;width:100%;height:100%;}

/* image card — fills the whole stack; JS drives transform/opacity every frame */
.wp-img{position:absolute;inset:0;margin:0;border-radius:0;overflow:hidden;background:#222;will-change:transform,opacity;transform-origin:center;}
.wp-img img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform,filter;}

/* on-image caption overlay — makes each image read as the case study itself */
.wp-img-cap{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 2.4rem 2rem;color:#fff;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.08) 35%,rgba(0,0,0,.7) 100%);display:flex;flex-direction:column;gap:0;pointer-events:none;z-index:2;}
.wp-img-tag{font-family:'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace;font-size:.68rem;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.85);font-weight:500;margin-bottom:.65rem;}
.wp-img-name{font-family:var(--sans);font-weight:700;font-size:clamp(1.15rem,1.6vw,1.65rem);letter-spacing:-.015em;line-height:1.15;color:#fff;}
.wp-img-loc{font-family:'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace;font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:500;margin-top:.55rem;}

/* nav dots */
.wp-dots{position:absolute;bottom:2.25rem;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:5;}
.wp-dot{width:8px;height:8px;padding:0;border-radius:50%;background:rgba(0,0,0,.18);border:none;cursor:pointer;transition:background .45s ease,width .45s cubic-bezier(.16,1,.3,1),border-radius .45s;}
.wp-dot.is-active{background:var(--text);width:30px;border-radius:100px;}
.wp-dot:hover{background:rgba(0,0,0,.45);}

/* responsive */
@media(max-width:900px){
  .work-pin-sec{--wp-line:3rem;}
  .wp-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto;min-height:100vh;position:relative;top:auto;}
  .wp-left{padding:6rem 1.5rem 2rem;border-right:none;border-bottom:1px solid rgba(0,0,0,.08);}
  .wp-right{padding:0;min-height:60vh;}
  .wp-heading{font-size:clamp(.95rem,3vw,1.15rem);}
  .wp-label{font-size:clamp(1.3rem,6vw,1.9rem);}
  .wp-dots{bottom:1rem;}
}
/* PILL BTN */
.pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.25rem;
    background: var(--white);
    color: var(--text);
    border-radius: 100px;
    font-family: var(--sans);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 1.5px solid rgba(255, 255, 255, .15);
    transition: background .3s, color .3s, border-color .3s, transform .3s;
}

.pill-btn:hover {
    background: var(--m);
    color: #fff;
    border-color: var(--m);
    transform: translateY(-2px);
}

.pill-btn.sm {
    padding: .65rem 1.5rem;
    font-size: .7rem;
}

.pill-btn.full {
    width: 100%;
    margin-top: .5rem;
    background: var(--m);
    color: #fff;
    border-color: var(--m);
}

.pill-btn.full:hover {
    background: var(--o);
    border-color: var(--o);
}

/* ABOUT */
#about {
    overflow: hidden;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 80vh;
}

.ag-left {
    position: relative;
    overflow: hidden;
}

.ag-img-main {
    height: 100%;
    min-height: 600px;
}

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

.ag-badge {
    position: absolute;
    bottom: 3rem;
    left: 3rem;
    background: var(--white);
    padding: 1.5rem 2rem;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .15);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ab-num {
    font-family: var(--serif);
    font-size: 3.5rem;
    line-height: 1;
    color: var(--m);
}

.ab-txt {
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.4;
    color: var(--muted);
}

.ag-right {
    padding: 6rem 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg-feature);
}

.ag-right .sec-title {
    font-size: clamp(1.3rem, 2vw, 1.75rem);
}

.ag-right p {
    font-size: 1.0625rem;
    color: var(--muted);
    line-height: 1.85;
    margin-bottom: 1.5rem;
}

.team-row {
    display: flex;
    gap: 1.5rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.tm img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--white);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
    margin-bottom: .5rem;
}

.tm span {
    display: block;
    font-family: var(--sans);
    font-size: .8rem;
    font-weight: 700;
}

.tm small {
    color: var(--muted);
    font-size: .7rem;
}

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

    .ag-img-main {
        min-height: 400px;
    }

    .ag-right {
        padding: 3rem 2rem;
    }

    .ag-badge {
        display: none;
    }
}

/* OUR TEAM — homepage */
#team {
    padding: 120px 0;
    background: var(--bg-white);
}

.team-head {
    max-width: 720px;
}

.team-head .intro-body {
    margin-top: 1.25rem;
}

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

.htm-card {
    background: var(--bg-cream);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(14, 29, 82, .07);
    transition: transform .45s cubic-bezier(.165, .84, .44, 1), border-color .35s, box-shadow .45s;
}

.htm-card:hover {
    transform: translateY(-6px);
    border-color: rgba(237, 20, 91, .3);
    box-shadow: 0 18px 40px rgba(14, 29, 82, .08);
}

.htm-portrait {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.htm-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(.5) brightness(.96);
    transition: filter .5s, transform .8s cubic-bezier(.165, .84, .44, 1);
}

.htm-card:hover .htm-portrait img {
    filter: grayscale(0) brightness(1);
    transform: scale(1.04);
}

.htm-card figcaption {
    padding: 18px 20px 20px;
}

.htm-card figcaption strong {
    display: block;
    font-family: var(--sans);
    font-weight: 800;
    color: var(--text);
    font-size: 1.05rem;
    letter-spacing: -.01em;
    margin-bottom: 4px;
}

.htm-card figcaption small {
    font-family: var(--sans);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    display: block;
}

.team-foot {
    margin-top: 3rem;
}

@media (max-width: 900px) {
    #team {
        padding: 90px 0;
    }

    .htm-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* RAINBOW BAR — slim brand strip */
.rainbow-bar {
    display: flex;
    height: 3px;
}

.rainbow-bar div {
    flex: 1;
}

/* NEWS — white pause */
#news {
    padding: 120px 0;
    background: var(--bg-white);
}

.news-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3.5rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.news-top>div:first-child {
    max-width: 780px;
}

.nf-bar {
    display: flex;
    gap: .5rem;
}

.nfb {
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: .55rem 1.2rem;
    border-radius: 100px;
    border: 1.5px solid rgba(0, 0, 0, .12);
    transition: all .3s;
}

.nfb.active,
.nfb:hover {
    background: var(--text);
    color: #fff;
    border-color: var(--text);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    align-items: stretch;
}

/* Card — equal heights via flex column + flex:1 on body */
.nc {
    background: var(--bg-cream);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .4s cubic-bezier(.165, .84, .44, 1), box-shadow .4s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.nc:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 70px rgba(14, 29, 82, .08);
}

.nc-img {
    aspect-ratio: 16/10;
    overflow: hidden;
    flex-shrink: 0;
}

.nc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.165, .84, .44, 1);
}

.nc:hover .nc-img img {
    transform: scale(1.05);
}

.nc-body {
    padding: 1.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.nc-cat {
    font-family: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--m);
    display: block;
    margin-bottom: .35rem;
}

.nc-dt {
    font-family: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: .68rem;
    color: var(--muted);
    display: block;
    margin-bottom: 1.1rem;
    letter-spacing: 1px;
}

.nc-body h3 {
    font-family: var(--sans);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    margin-bottom: .65rem;
}

.nc-body p {
    font-size: .9rem;
    color: var(--muted);
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

.nc-body .text-arrow {
    margin-top: auto;
    align-self: flex-start;
}

/* FEATURED — horizontal split so it matches the small card's row height */
.nc.featured-nc {
    grid-column: span 2;
    flex-direction: row;
}
.nc.featured-nc .nc-img {
    width: 50%;
    aspect-ratio: auto;
    align-self: stretch;
}
.nc.featured-nc .nc-body {
    width: 50%;
    padding: 2.5rem;
    justify-content: center;
}
.nc.featured-nc .nc-body h3 {
    font-size: 1.65rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}
.nc.featured-nc .nc-body p {
    font-size: .95rem;
    margin-bottom: 1.5rem;
}

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

    .nc.featured-nc {
        grid-column: 1;
        flex-direction: column;
    }
    .nc.featured-nc .nc-img,
    .nc.featured-nc .nc-body {
        width: 100%;
    }
    .nc.featured-nc .nc-img {
        aspect-ratio: 16/10;
    }
    .nc.featured-nc .nc-body {
        padding: 1.75rem;
    }
}

/* CONTACT */
#contact {
    background: var(--black);
    color: #fff;
}

.contact-wrap {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    min-height: 90vh;
}

.ct-left {
    padding: 8rem 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid rgba(255, 255, 255, .07);
}

.ct-title {
    font-family: var(--sans);
    font-size: clamp(1.3rem, 2.1vw, 1.8rem);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 2.5rem;
    letter-spacing: -.005em;
    color: #fff;
    max-width: 520px;
}

.ct-title em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--m);
    font-size: 1.22em;
    line-height: 1;
}

.ct-info div {
    margin-bottom: 2rem;
}

.ct-info h4 {
    font-family: var(--sans);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .3);
    margin-bottom: .6rem;
}

.ct-info p,
.ct-info a {
    font-size: .9375rem;
    color: rgba(255, 255, 255, .6);
    line-height: 1.7;
}

.ct-info a:hover {
    color: var(--m);
}

.ct-social {
    display: flex;
    gap: 1.5rem;
    margin-top: 3rem;
}

.cs {
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
    transition: color .3s;
    padding: .5rem 0;
}

.cs:hover {
    color: var(--m);
}

.ct-right {
    padding: 8rem 5%;
    display: flex;
    align-items: center;
}

.contact-form {
    width: 100%;
}

.cf-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.cf-f {
    margin-bottom: 2.25rem;
    position: relative;
}

.cf-f input,
.cf-f select,
.cf-f textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    padding: .75rem 0;
    font-family: var(--body);
    font-size: 1rem;
    color: #fff;
    outline: none;
    transition: border-color .3s;
    resize: none;
}

.cf-f input::placeholder,
.cf-f textarea::placeholder {
    color: rgba(255, 255, 255, .25);
}

.cf-f select option {
    background: var(--black);
}

.cf-f input:focus,
.cf-f select:focus,
.cf-f textarea:focus {
    border-bottom-color: var(--m);
}

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

    .ct-left {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
        padding: 5rem 6%;
    }

    .ct-right {
        padding: 4rem 6%;
    }

    .cf-duo {
        grid-template-columns: 1fr;
    }
}

/* FOOTER */
#footer {
    background: var(--black);
    border-top: 1px solid rgba(255, 255, 255, .05);
    padding: 2.5rem 5%;
}

.ft-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.ft-logo {
    height: 34px;
    filter: brightness(0) invert(1);
    opacity: .4;
}

#footer p {
    font-size: .8rem;
    color: rgba(255, 255, 255, .25);
}

.ft-links {
    display: flex;
    gap: 1.5rem;
}

.ft-links a {
    font-family: var(--sans);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .25);
    transition: color .3s;
}

.ft-links a:hover {
    color: var(--m);
}

/* TILT 3D */
.tilt-card {
    transform-style: preserve-3d;
    transform: perspective(1000px);
}

/* REVEAL ANIMATIONS */
.chars-anim .word {
    display: inline-block;
    white-space: nowrap;
}

.chars-anim .char {
    display: inline-block;
    transform: translateY(80%) rotate(5deg);
    opacity: 0;
    transition: transform .7s cubic-bezier(.16, 1, .3, 1), opacity .7s;
}

.chars-anim.in .char {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
}

.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
}

.fade-up.in {
    opacity: 1;
    transform: translateY(0);
}

.mag-btn {
    position: relative;
}

/* HIDDEN for filter */
[hidden] {
    display: none !important;
}

/* ═══════════════════════════════════════════════
   DOC-ALIGNED SECTIONS (Work CTA, Services desc,
   Industries, How We Work, FAQ, Footer Nav)
   ═══════════════════════════════════════════════ */

/* WORK SHOWCASE — result stat + in-section CTA */
.fe-stat {
    font-family: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--y);
    margin-top: 2px;
}

.work-cta {
    margin-top: 70px;
    padding: 56px clamp(1.5rem, 5vw, 4rem);
    border-radius: 14px;
    background: linear-gradient(135deg, #0e1d52 0%, #1a2a6b 100%);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.work-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(237, 20, 91, .35), transparent 55%);
    pointer-events: none;
}

.work-cta-h {
    position: relative;
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    letter-spacing: -.02em;
    line-height: 1.08;
    margin-bottom: 1rem;
}

.work-cta-h em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--y);
}

.work-cta-sub {
    position: relative;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .8);
    max-width: 540px;
    margin: 0 auto 2rem;
}

.work-cta-row {
    position: relative;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Ghost pill button variant */
.pill-btn.ghost {
    background: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45);
}

.pill-btn.ghost:hover {
    background: #fff;
    color: var(--text);
    box-shadow: inset 0 0 0 1.5px #fff;
}

/* SERVICES (6) — one-line description on hover + footer */
.cap-meta {
    justify-content: flex-start;
}

.cap-meta h3 {
    margin-top: auto;
}

.cap-desc {
    font-family: var(--sans);
    font-size: .82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .88);
    margin-top: .55rem;
    max-width: calc(100% - 54px);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(6px);
    transition: max-height .5s ease, opacity .4s ease, transform .5s ease;
}

.cap-tile:hover .cap-desc {
    max-height: 90px;
    opacity: 1;
    transform: none;
}

.cap-foot {
    margin-top: 2.5rem;
}

/* INDUSTRIES WE SERVE */
#industries {
    padding: 120px 0;
    background: var(--bg-cream);
    overflow: hidden;
}

.ind-head {
    max-width: 860px;
}

.ind-head .intro-body {
    margin-top: 1.25rem;
}

.ind-marquee {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 50px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ind-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: indScroll 42s linear infinite;
}

.ind-track-rev {
    animation-direction: reverse;
    animation-duration: 48s;
}

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

.ind-pill {
    flex: none;
    font-family: var(--sans);
    font-size: clamp(.95rem, 1.4vw, 1.15rem);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text);
    padding: .85rem 1.6rem;
    border-radius: 100px;
    border: 1.5px solid rgba(14, 29, 82, .14);
    background: var(--bg-white);
    white-space: nowrap;
    transition: background .35s, color .35s, border-color .35s, transform .35s;
}

.ind-pill:hover {
    background: var(--black);
    color: #fff;
    border-color: var(--black);
    transform: translateY(-3px);
}

.ind-marquee:hover .ind-track {
    animation-play-state: paused;
}

.ind-note {
    max-width: 640px;
    font-family: var(--sans);
    font-size: .95rem;
    color: var(--muted);
    line-height: 1.7;
    padding-left: 1.25rem;
    border-left: 2px solid var(--m);
}

/* HOW WE WORK — homepage process flow */
#process {
    padding: 120px 0;
    background: var(--bg-white);
}

.hw-flow {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
    position: relative;
    margin-top: 10px;
}

.hw-line {
    position: absolute;
    top: 24px;
    left: 6%;
    right: 6%;
    height: 1.5px;
    background: linear-gradient(90deg, var(--g), var(--y), var(--o), var(--m), var(--lb), var(--p));
    opacity: .35;
    z-index: 0;
}

.hw-step {
    position: relative;
    z-index: 1;
    padding-top: 60px;
}

.hw-num {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-white);
    border: 1.5px solid rgba(14, 29, 82, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-weight: 800;
    font-size: .95rem;
    color: var(--text);
    transition: background .35s, color .35s, border-color .35s, transform .35s;
}

.hw-step:hover .hw-num {
    background: var(--m);
    color: #fff;
    border-color: var(--m);
    transform: scale(1.08);
}

.hw-step h4 {
    font-family: var(--sans);
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: -.01em;
    color: var(--text);
    margin-bottom: .6rem;
    line-height: 1.2;
}

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

.hw-foot {
    margin-top: 3rem;
}

/* FAQ — native accordion */
#faq {
    padding: 120px 0;
    background: var(--bg-cream);
}

.faq-list {
    max-width: 900px;
    border-top: 1px solid rgba(14, 29, 82, .12);
    margin:auto;
}

.faq-item {
    border-bottom: 1px solid rgba(14, 29, 82, .12);
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 0;
}

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

.faq-q {
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    letter-spacing: -.01em;
    color: var(--text);
    transition: color .3s;
}

.faq-item:hover .faq-q,
.faq-item[open] .faq-q {
    color: var(--m);
}

.faq-ic {
    position: relative;
    flex: none;
    width: 22px;
    height: 22px;
}

.faq-ic::before,
.faq-ic::after {
    content: "";
    position: absolute;
    background: var(--text);
    transition: transform .35s, background .35s;
}

.faq-ic::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
}

.faq-ic::after {
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
}

.faq-item[open] .faq-ic::after {
    transform: translateX(-50%) scaleY(0);
}

.faq-item[open] .faq-ic::before {
    background: var(--m);
}

.faq-a {
    overflow: hidden;
    padding: 0 0 1.75rem;
    max-width: 760px;
}

.faq-a p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--muted);
}

.faq-item[open] .faq-a {
    animation: faqReveal .45s ease;
}

@keyframes faqReveal {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* FOOTER — Navigation & Contact */
#footer {
    padding: 80px 5% 2.5rem;
}

.ft-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
    gap: 2.5rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ft-brand .ft-logo {
    height: 40px;
    margin-bottom: 1.25rem;
}

.ft-desc {
    max-width: 320px;
    line-height: 1.7;
}

#footer .ft-desc {
    color: rgba(255, 255, 255, .45);
    font-size: .92rem;
}

.ft-col h5 {
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
    margin-bottom: 1.1rem;
}

.ft-col p,
.ft-col a {
    display: block;
    font-family: var(--sans);
    font-size: .92rem;
    color: rgba(255, 255, 255, .55);
    margin-bottom: .65rem;
    transition: color .3s;
}

.ft-col a:hover {
    color: var(--m);
}

.ft-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 2rem;
}

@media (max-width: 1024px) {
    .hw-flow { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.25rem; }
    .hw-line { display: none; }
    .ft-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 768px) {
    #industries, #process, #faq { padding: 90px 0; }
    .hw-flow { grid-template-columns: 1fr 1fr; }
    .ind-pill { font-size: .9rem; padding: .7rem 1.25rem; }
    .work-cta { margin-top: 50px; padding: 44px 1.5rem; }
}

@media (max-width: 560px) {
    .hw-flow { grid-template-columns: 1fr; }
    .ft-top { grid-template-columns: 1fr; gap: 2rem; }
    .ft-bottom { flex-direction: column; align-items: flex-start; }
}