/* ==========================================================
   DigiRavan home — layout built on the triangle mark.
   Loaded after style.css (which provides tokens, top bar, menu, loader, links).
   ========================================================== */
.home {
    --r: 28px;
}
.home main {
    position: relative;
    z-index: 2;
}
.h2 {
    font-weight: 400;
    font-size: clamp(40px, 5.4vw, 92px);
    line-height: 0.98;
    letter-spacing: -0.035em;
}
/* every section heading: label · title · short intro — stacked, left-aligned, same gaps; same gap to the content below */
.home {
    --head-gap: 64px;
}
.st__head,
.cs__head,
.cp__aside,
.md__head,
.qw__head,
.fit__head,
.tl2__head,
.pr__head,
.bn__head {
    display: grid;
    gap: 22px;
    justify-items: start;
    align-content: start;
    text-align: left;
}
.st__head .h2,
.cs__head .h2,
.cp__aside .h2,
.md__head .h2,
.qw__head .h2 {
    max-width: 12ch;
}
.fit__head .h2 {
    max-width: 16ch;
}
.cs__head,
.qw__head,
.fit__head,
.tl2__head,
.pr__head,
.bn__head {
    margin-bottom: var(--head-gap);
}
.tl2__head .h2,
.pr__head .h2 {
    max-width: 14ch;
}
.lede {
    max-width: 400px;
    font-size: 16.5px;
    line-height: 1.5;
    color: #6f5a62;
}
html.bg-dark .lede {
    color: rgba(244, 214, 223, 0.74);
}
.kick {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rose);
}
.kick--dark {
    color: var(--wine);
}

/* split-line reveal: words rise out of a mask */
.wm {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}
.wi {
    display: inline-block;
    will-change: transform;
}
.js [data-up] {
    opacity: 0;
    transform: translateY(40px);
}

/* buttons */
.btn-g,
.btn-o,
.btn-w {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 26px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 15.5px;
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        color 0.4s var(--ease),
        box-shadow 0.4s var(--ease),
        transform 0.4s var(--ease);
}
.btn-g {
    background: var(--brand-grad);
    color: #fff;
    box-shadow: 0 14px 40px -14px rgba(188, 4, 68, 0.8);
}
.btn-g::before,
.btn-w::before,
.btn-o::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: translateY(101%);
    transition: transform 0.5s var(--ease);
}
.btn-g::before {
    background: #fff;
}
.btn-g:hover {
    color: var(--wine);
    transform: translateY(-2px);
}
.btn-g:hover::before,
.btn-w:hover::before,
.btn-o:hover::before {
    transform: none;
}
.btn-g span,
.btn-w span {
    transition: transform 0.4s var(--ease);
}
.btn-g:hover span,
.btn-w:hover span {
    transform: translate(3px, -3px);
}
.btn-o {
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(244, 214, 223, 0.35);
}
.btn-o::before {
    background: rgba(244, 214, 223, 0.12);
}
.btn-w {
    background: #fff;
    color: var(--wine);
}
.btn-w::before {
    background: var(--dark);
}
.btn-w:hover {
    color: #fff;
}

/* top bar: inline section links on desktop */
.top__nav {
    display: none !important;
    gap: 2px;
    margin-left: auto;
    margin-right: 14px;
    pointer-events: auto;
}
.top__nav a {
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(244, 214, 223, 0.85);
    transition:
        background 0.3s,
        color 0.3s;
}
.top__nav a:hover {
    background: rgba(244, 214, 223, 0.1);
    color: #fff;
}

/* ---------- HERO ---------- */
/* one page background: a fixed full-screen layer that blends (scroll-linked, in site.js) to the tone of the section
   in view; it carries the hero's pattern (flowing lines + drifting dots), plum on light, light on dark */
.bgfx {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: rgba(13, 6, 9, 0);
}
.bgfx canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
}
.bgfx.has-pattern canvas {
    opacity: 1;
}
#hero3d {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    display: block;
    opacity: 0;
    transition: opacity 1.4s var(--ease);
    cursor: grab;
}
.hero-ready #hero3d {
    opacity: 1;
}
.hx {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 108px var(--gutter) 28px;
    color: #fff;
    user-select: none;
}
.hx__chip {
    justify-self: center;
    margin-top: 34px;
} /* same kicker style as "▲ The studio" */
.hx__tri {
    width: 10px;
    height: 9px;
    background: var(--brand-grad);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    animation: triPulse 2.4s ease-in-out infinite;
}
@keyframes triPulse {
    50% {
        transform: rotate(120deg) scale(0.8);
    }
}
.hx__title {
    align-self: center;
    display: grid;
    justify-items: center;
    text-align: center;
    text-transform: uppercase;
    font-weight: 300;
    font-size: clamp(46px, 7.6vw, 140px);
    line-height: 0.92;
    letter-spacing: -0.045em;
    pointer-events: none;
}
.hx__l1 {
    justify-self: center;
}
.hx__l2 {
    justify-self: center;
    margin-top: clamp(36px, 6vh, 80px);
}
.hx__title .mask {
    display: block;
    overflow: hidden;
    padding-bottom: 0.08em;
}
.hx__title .mask > span {
    display: inline-block;
}
.hx__title .swap {
    font-weight: 500;
    background: linear-gradient(100deg, #f0a0bb 0%, #e04f80 50%, #c4105a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 18px rgba(13, 6, 9, 0.7));
    padding-right: 0.04em;
} /* the button's gradient, kept bright enough to read on dark */
.hx__base {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
}
.hx__lede {
    max-width: 360px;
    font-size: 16.5px;
    line-height: 1.45;
    color: rgba(244, 214, 223, 0.78);
}
.hx__hold {
    font-size: 13px;
    color: rgba(244, 214, 223, 0.6);
    text-align: center;
}
.hx__hold kbd {
    display: inline-block;
    margin-right: 6px;
    padding: 3px 9px;
    border-radius: 6px;
    font: 500 12px var(--display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(188, 4, 68, 0.35);
    box-shadow:
        inset 0 -2px 0 rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(209, 125, 152, 0.4);
}
.blasting .hx__hold kbd {
    background: var(--wine);
}
.hx__ctas {
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.hx__scroll {
    position: absolute;
    right: calc(var(--gutter) - 2px);
    top: 50%;
    width: 2px;
    height: 90px;
    margin-top: -45px;
    background: rgba(244, 214, 223, 0.14);
    border-radius: 2px;
    overflow: hidden;
}
.hx__scroll i {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 40%;
    background: var(--brand-grad);
    animation: scrollRun 2s var(--ease) infinite;
}
@keyframes scrollRun {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(250%);
    }
}
.js .hx__title .mask > span {
    transform: translateY(110%);
}
.js .hx__chip,
.js .hx__base {
    opacity: 0;
}

/* ---------- MANIFESTO ---------- */
.mf {
    position: relative;
    padding: var(--sec-y) 0 0;
    color: #fff;
}
.mf__text {
    margin-top: 20px;
    max-width: 1180px;
    font-weight: 300;
    font-size: clamp(34px, 4.4vw, 74px);
    line-height: 1.12;
    letter-spacing: -0.03em;
}
/* studio sentence: typed over a faint ghost of itself */
[data-type] .tw {
    opacity: 0.14;
    transition: opacity 0.25s linear;
}
[data-type] .tw.on {
    opacity: 1;
}
.tw-caret {
    display: inline-block;
    width: 3px;
    height: 0.9em;
    margin: 0 2px -0.08em;
    border-radius: 2px;
    background: var(--brand-grad);
    animation: caretBlink 1s steps(2) infinite;
}
.tw-caret.done {
    animation-duration: 1.4s;
}
@keyframes caretBlink {
    50% {
        opacity: 0;
    }
}
.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.02em 0.38em 0.06em 0.28em;
    margin: 0 0.04em;
    border-radius: 0.32em;
    background:
        linear-gradient(rgba(26, 12, 17, 0.55), rgba(26, 12, 17, 0.55))
            padding-box,
        var(--brand-grad) border-box;
    border: 1.5px solid transparent;
    font-weight: 400;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.tag b {
    font-size: 0.5em;
    font-weight: 400;
    color: var(--rose);
}
.mf__trio {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 11vh;
}
.mf__trio li {
    padding: 28px 26px 30px;
    border-radius: 20px;
    background: rgba(26, 12, 17, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px rgba(209, 125, 152, 0.14);
}
.mf__trio span {
    font-size: 13px;
    color: var(--rose);
    letter-spacing: 0.1em;
}
.mf__trio h3 {
    margin: 40px 0 8px;
    font-weight: 400;
    font-size: clamp(22px, 1.9vw, 30px);
    letter-spacing: -0.02em;
}
.mf__trio p {
    font-size: 15px;
    line-height: 1.45;
    color: rgba(244, 214, 223, 0.65);
}
.mf__more {
    margin-top: 44px;
    color: #fff;
}

/* ---------- TAPES ---------- */
.tapes {
    position: relative;
    z-index: 2;
    height: clamp(200px, 30vw, 380px);
    overflow: hidden;
    display: grid;
    place-items: center;
}
.tape {
    position: absolute;
    left: -10%;
    width: 120%;
    padding: clamp(12px, 1.4vw, 22px) 0;
    overflow: hidden;
    white-space: nowrap;
}
.tape--a {
    background: var(--brand-grad);
    transform: rotate(-4deg);
    z-index: 2;
    box-shadow: 0 20px 50px -20px rgba(188, 4, 68, 0.7);
}
.tape--b {
    background: #f4d6df;
    transform: rotate(3deg);
}
.tape__run {
    display: inline-flex;
    gap: 0;
    will-change: transform;
    font-weight: 500;
    font-size: clamp(28px, 4.4vw, 72px);
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}
.tape--a .tape__run {
    color: #fff;
}
.tape--b .tape__run {
    color: var(--plum);
}
.tape__run span {
    padding: 0 0.45em;
}
.tape__run i {
    font-style: normal;
    font-size: 0.45em;
    align-self: center;
    opacity: 0.8;
}

/* ---------- NUMBERS (blush) ---------- */
.st {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
    color: var(--ink);
}
.st__in {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: clamp(30px, 6vw, 110px);
    align-items: start;
}
.st__head {
    position: sticky;
    top: 130px;
    align-self: start;
}
.st__head .h2 {
    max-width: 10ch;
}
.stat {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.stat li {
    display: flex;
    flex-direction: column;
    min-height: 250px;
    padding: 26px 26px 28px;
    border-radius: 20px;
    background: #fff;
    box-shadow:
        0 1px 0 rgba(74, 0, 24, 0.05),
        0 24px 50px -30px rgba(74, 0, 24, 0.3);
    transition:
        transform 0.6s var(--ease),
        box-shadow 0.6s var(--ease);
}
.stat li:nth-child(even) {
    transform: translateY(40px);
}
.stat li:hover {
    box-shadow:
        0 1px 0 rgba(74, 0, 24, 0.05),
        0 34px 60px -30px rgba(74, 0, 24, 0.45);
}
.stat__k {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wine);
}
.stat__k::before {
    content: "";
    width: 9px;
    height: 8px;
    background: var(--brand-grad);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.stat__n {
    display: inline-flex;
    align-items: flex-start;
    margin: auto 0 10px;
    padding-top: 30px;
    font-weight: 300;
    font-size: clamp(56px, 5vw, 86px);
    line-height: 1;
    letter-spacing: -0.045em;
}
.stat__n sup {
    font-size: 0.42em;
    line-height: 1;
    margin-left: 3px;
    color: var(--wine);
}
.stat__t {
    max-width: 240px;
    font-size: 15px;
    line-height: 1.45;
    color: #6f5a62;
}
.names {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px 30px;
    margin-top: 8vh;
    padding-top: 30px;
    border-top: 1px solid rgba(74, 0, 24, 0.12);
}
.names li {
    font-weight: 500;
    font-size: clamp(16px, 1.4vw, 21px);
    letter-spacing: -0.015em;
    color: #8f7880;
    transition: color 0.3s;
}
.names li:hover {
    color: var(--ink);
}

/* ---------- SELECTED WORK (blush): centred 3D carousel ---------- */
.cs {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
    color: var(--ink);
    overflow: clip;
}
.car {
    position: relative;
    width: min(100% - 2 * var(--gutter), 1320px);
    margin: 0 auto;
    height: min(30vw, 46vh, 500px);
    perspective: 1600px;
    perspective-origin: 50% 50%;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 14%,
        #000 86%,
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 14%,
        #000 86%,
        transparent 100%
    );
}
.car.is-drag {
    cursor: grabbing;
}
.car__card {
    position: absolute;
    left: 50%;
    top: 0;
    width: min(48vw, 780px);
    height: 100%;
    margin-left: calc(min(48vw, 780px) / -2);
    border-radius: 22px;
    overflow: hidden;
    background: #eadce1;
    box-shadow: 0 40px 80px -46px rgba(74, 0, 24, 0.6);
    transform-style: preserve-3d;
    transition:
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.9s ease;
    will-change: transform, opacity;
    backface-visibility: hidden;
}
.car__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(40, 14, 24, 0.14);
    opacity: 0;
    transition: opacity 0.9s ease;
    pointer-events: none;
}
.car__card:not(.is-on)::after {
    opacity: 1;
}
.car__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    pointer-events: none;
    -webkit-user-drag: none;
}
.car.is-drag .car__card {
    transition-duration: 0.25s;
}
.car__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 52px;
}
.car__info h3 {
    font-weight: 400;
    font-size: clamp(28px, 2.6vw, 42px);
    letter-spacing: -0.035em;
    line-height: 1;
}
.car__info p#carTags {
    margin-top: 10px;
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wine);
}
.car__info p#carTxt {
    max-width: 560px;
    min-height: 3em;
    margin-top: 16px;
    font-size: 17.5px;
    line-height: 1.5;
    color: #6f5a62;
} /* always two lines tall, so the buttons never jump when a one-line caption swaps in */
@keyframes carIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}
.car__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px 28px;
    margin-top: 36px;
}
.car__nav {
    display: flex;
    align-items: center;
    gap: 12px;
}
.car__btn {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    font-size: 17px;
    color: var(--ink);
    box-shadow: inset 0 0 0 1px rgba(74, 0, 24, 0.2);
    transition:
        background 0.3s,
        color 0.3s,
        box-shadow 0.3s;
}
.car__btn:hover {
    background: var(--wine);
    color: #fff;
    box-shadow: none;
}
.car__count {
    min-width: 64px;
    text-align: center;
    font-size: 14px;
    color: #6f5a62;
    font-variant-numeric: tabular-nums;
}
.car__count b {
    color: var(--ink);
    font-weight: 600;
}
.btn-d {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    padding: 0 24px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 15px;
    color: var(--ink);
    box-shadow: inset 0 0 0 1px rgba(74, 0, 24, 0.2);
    transition:
        background 0.4s,
        color 0.4s,
        box-shadow 0.4s;
    white-space: nowrap;
}
.btn-d:hover {
    background: var(--ink);
    color: #fff;
    box-shadow: none;
}

/* ---------- CAPABILITIES (dark) ---------- */
.cp {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
    color: #fff;
}
.cp__in {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(30px, 6vw, 110px);
    align-items: start;
}
.cp__aside {
    position: sticky;
    top: var(--stage-top);
}
.cp__aside .h2 {
    max-width: 10ch;
}
.prism {
    position: relative;
    width: min(300px, 70%);
}
.prism {
    aspect-ratio: 200 / 180;
} /* an anchor: the page's 3D triangle settles here */
.prism__n {
    position: absolute;
    left: 0;
    right: 0;
    top: 58%;
    text-align: center;
    transform: translateY(-50%);
    font-weight: 300;
    font-size: clamp(28px, 2.6vw, 40px);
    letter-spacing: -0.03em;
}
.cp__list {
    list-style: none;
    counter-reset: c;
}
.cp__list li {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 10px;
    padding: 64px 0;
    border-top: 1px solid rgba(244, 214, 223, 0.12);
    opacity: 0.38;
    transition: opacity 1.1s var(--ease);
}
.cp__list li:last-child {
    border-bottom: 1px solid rgba(244, 214, 223, 0.12);
}
.cp__list li.is-on {
    opacity: 1;
}
.cp__list span {
    padding-top: 12px;
    font-size: 13px;
    letter-spacing: 0.12em;
    color: var(--rose);
}
.cp__list h3 {
    font-weight: 300;
    font-size: clamp(30px, 3.2vw, 54px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    transition: transform 1.1s var(--ease);
}
.cp__list li.is-on h3 {
    transform: translateX(10px);
}
.cp__list p {
    max-width: 460px;
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.45;
    color: rgba(244, 214, 223, 0.7);
}

/* ---------- METHOD (blush, pinned triangle) ---------- */
.md {
    position: relative;
    z-index: 3;
    color: var(--ink);
    padding-bottom: 0;
}
.md__in {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 40px;
    align-items: start;
    width: 100%;
} /* heading top-aligned, like every section */
.loopTri {
    position: relative;
    width: min(100%, 640px);
    justify-self: center;
    aspect-ratio: 600 / 530;
}
.loopTri svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.loopTri__bg {
    fill: none;
    stroke: rgba(74, 0, 24, 0.12);
    stroke-width: 2;
    stroke-dasharray: 2 8;
    stroke-linecap: round;
}
.loopTri__fg {
    fill: none;
    stroke: var(--wine);
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
.loopTri__dot {
    fill: var(--wine);
    filter: drop-shadow(0 0 10px rgba(188, 4, 68, 0.8));
}
.node {
    position: absolute;
    width: 220px;
    padding: 16px 18px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 40px -24px rgba(74, 0, 24, 0.4);
    opacity: 0.45;
    transform: scale(0.94);
    transition:
        opacity 0.5s var(--ease),
        transform 0.5s var(--ease),
        background 0.5s,
        color 0.5s;
}
.node.is-on {
    opacity: 1;
    transform: none;
}
.node b {
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--wine);
}
.node h3 {
    margin: 6px 0 4px;
    font-weight: 500;
    font-size: 19px;
    letter-spacing: -0.02em;
}
.node p {
    font-size: 13.5px;
    line-height: 1.4;
    color: #6f5a62;
}
.node--1 {
    left: calc(50% + 34px);
    top: -2%;
}
.node--2 {
    right: -8%;
    bottom: -6%;
}
.node--3 {
    left: -8%;
    bottom: -6%;
}
.node--c {
    left: 50%;
    top: 58%;
    margin-left: -110px;
    translate: 0 -50%;
    text-align: center;
}
.node--c.is-on {
    background: var(--brand-grad);
    color: #fff;
}
.node--c.is-on b,
.node--c.is-on p {
    color: rgba(255, 255, 255, 0.85);
}
.whys {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    padding-top: 40px;
    border-top: 1px solid rgba(74, 0, 24, 0.1);
}
.whys h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 16px;
}
.whys h4::before {
    content: "";
    width: 9px;
    height: 8px;
    background: var(--brand-grad);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.whys p {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.4;
    color: #6f5a62;
}

/* ---------- VOICES (light): moving quote wall ---------- */
.vc {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
    color: var(--ink);
    overflow: clip;
}
.qw {
    display: grid;
    gap: 22px;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent,
        #000 10%,
        #000 90%,
        transparent
    );
    mask-image: linear-gradient(
        90deg,
        transparent,
        #000 10%,
        #000 90%,
        transparent
    );
}
.qw__row {
    overflow: hidden;
}
.qw__track {
    display: flex;
    gap: 22px;
    width: max-content;
    animation: qwMove 70s linear infinite;
}
.qw__row--b .qw__track {
    animation-direction: reverse;
    animation-duration: 80s;
}
.qw:hover .qw__track {
    animation-play-state: paused;
}
@keyframes qwMove {
    to {
        transform: translateX(-50%);
    }
}
.qw__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 26px;
    width: clamp(300px, 30vw, 440px);
    padding: 28px 28px 26px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow:
        0 24px 50px -34px rgba(74, 0, 24, 0.45),
        inset 0 0 0 1px rgba(74, 0, 24, 0.06);
    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s;
}
.qw__card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 34px 60px -34px rgba(74, 0, 24, 0.55),
        inset 0 0 0 1px rgba(188, 4, 68, 0.2);
}
.qw__card blockquote {
    font-weight: 300;
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.qw__card em {
    font-style: normal;
    font-weight: 500;
    color: var(--wine);
}
.qw__card figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
}
.qw__card figcaption b {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
}
.qw__card figcaption small {
    font-size: 13px;
    color: #8f7880;
}
.av {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-grad);
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    flex: 0 0 auto;
}
@media (prefers-reduced-motion: reduce) {
    .qw__track {
        animation: none;
    }
}

/* ---------- text that follows the page background (.tf sections): ink on light tones, light on dark —
   re-colouring with the scroll-linked background blend, so a section reads correctly whichever tone it's shown on ---------- */
html {
    --fg: #fff;
    --fg-2: rgba(244, 214, 223, 0.74);
    --fg-k: var(--rose);
    --fg-line: rgba(244, 214, 223, 0.14);
}
html.bg-light {
    --fg: var(--ink);
    --fg-2: #6f5a62;
    --fg-k: var(--wine);
    --fg-line: rgba(74, 0, 24, 0.12);
}
.tf,
.tf .kick,
.tf .lede,
.tf .hx__lede,
.orb__it b,
.orb__it p,
.orb__n,
.fd__role,
.wt__labels,
.wt__labels span,
.wt__vs,
.wt__no,
.wt__row,
.ctx__line,
.ctx__line small,
.ctx__line svg,
.ctx__studios small,
.ctx__next small,
.ctx__next li,
.ws__count,
.ws__count b,
.ws__sector,
.ws__k,
.ws__chips li,
.ws__tab,
.ws__tab small,
.tf .btn-o {
    transition: none; /* colours follow the scroll-linked --fg variables frame by frame */
}
.tf .hx__lede {
    color: var(--fg-2);
}
.tf .btn-o {
    color: var(--fg);
    box-shadow: inset 0 0 0 1px
        color-mix(in srgb, currentColor 35%, transparent);
}
.mf__trio li {
    color: #fff;
}
.tf {
    color: var(--fg) !important;
}
.tf .kick {
    color: var(--fg-k);
}
.tf .lede {
    color: var(--fg-2);
}

/* ---------- ABOUT: editorial hero ---------- */
.ab-hx {
    position: relative;
    z-index: 3;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: var(--stage-top) 0 80px;
}
.ab-hx__in {
    width: 100%;
}
.ab-hx__in > * {
    max-width: 58%;
}
.ab-hx__t {
    margin-top: 20px;
    font-weight: 300;
    font-size: clamp(42px, 5.8vw, 104px);
    line-height: 1.02;
    letter-spacing: -0.045em;
}
.ab-hx__t em {
    font-style: normal;
    font-weight: 500;
    /* the gradient fills the word's box, so the box reaches below the baseline for g / y tails —
       without changing the line spacing (a taller line-height made those lines sit further apart) */
    padding-bottom: 0.18em;
    margin-bottom: -0.18em;
    background: linear-gradient(100deg, #f0a0bb 0%, #e04f80 50%, #c4105a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ab-hx .lede {
    margin-top: 22px;
}
.ab-hx__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 38px;
}
/* ---------- ABOUT: story timeline — chapters slide sideways while the section holds ---------- */
.tl2 {
    position: relative;
    z-index: 3;
    color: #fff;
}
.tl2__rail {
    position: relative;
}
.tl2__line {
    position: relative;
    height: 2px;
    margin-bottom: 28px;
    border-radius: 2px;
    background: rgba(244, 214, 223, 0.14);
}
.tl2__line i {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--p, 0) * 100%);
    border-radius: inherit;
    background: var(--brand-grad);
}
.tl2__track {
    list-style: none;
    display: flex;
    gap: 20px;
    will-change: transform;
}
.tl2__card {
    position: relative;
    flex: 0 0 clamp(280px, 30vw, 430px);
    display: flex;
    flex-direction: column;
    min-height: 300px;
    padding: 30px 28px 32px;
    border-radius: 20px;
    background: rgba(26, 12, 17, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px rgba(209, 125, 152, 0.16);
}
.tl2__card::before {
    content: "";
    position: absolute;
    left: 28px;
    top: -35px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--brand-grad);
    box-shadow: 0 0 0 5px rgba(188, 4, 68, 0.18);
}
.tl2__n {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rose);
}
.tl2__card h3 {
    margin-top: auto;
    padding-top: 50px;
    font-weight: 400;
    font-size: clamp(26px, 2.2vw, 36px);
    line-height: 1.05;
    letter-spacing: -0.03em;
}
.tl2__card p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(244, 214, 223, 0.74);
}
.tl2__card .u-link {
    margin-top: 20px;
    color: #fff;
}
/* ---------- ABOUT: vertical story — centre line fills as you read, chapters alternate sides ---------- */
.tlv {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
    color: #fff;
}
.tlv__list {
    position: relative;
    list-style: none;
    display: grid;
    gap: 36px;
    padding: 10px 0;
}
.tlv__list::before,
.tlv__list::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    margin-left: -1px;
    border-radius: 2px;
}
.tlv__list::before {
    bottom: 0;
    background: var(--fg-line);
}
.tlv__list::after {
    height: calc(var(--vp, 0) * 100%);
    background: var(--brand-grad);
}
.tlv__item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 80px;
}
.tlv__item::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 34px;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 50%;
    background: #0d0609;
    box-shadow: inset 0 0 0 2px rgba(244, 214, 223, 0.3);
    transition:
        background 0.5s,
        box-shadow 0.5s;
    z-index: 1;
}
.tlv__item.is-on::before {
    background: #e04f80;
    box-shadow: 0 0 0 6px rgba(188, 4, 68, 0.22);
}
.tlv__card {
    grid-column: 1;
    color: #fff;
    padding: 28px 30px 30px;
    border-radius: 20px;
    background: rgba(26, 12, 17, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px rgba(209, 125, 152, 0.16);
}
.tlv__item:nth-child(even) .tlv__card {
    grid-column: 2;
}
.tlv__card .tl2__n {
    display: block;
}
.tlv__card h3 {
    margin-top: 14px;
    font-weight: 400;
    font-size: clamp(26px, 2.2vw, 36px);
    line-height: 1.05;
    letter-spacing: -0.03em;
}
.tlv__card p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(244, 214, 223, 0.74);
}
.tlv__card .u-link {
    margin-top: 18px;
    color: #fff;
}
@media (max-width: 860px) {
    .tlv__list::before,
    .tlv__list::after {
        left: 7px;
    }
    .tlv__item {
        grid-template-columns: 1fr;
        padding-left: 36px;
    }
    .tlv__item::before {
        left: 7px;
    }
    .tlv__item:nth-child(even) .tlv__card {
        grid-column: 1;
    }
}

/* ---------- ABOUT: principles grid ---------- */
.pr {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
    color: var(--ink);
}
.pr__grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.pr__card {
    display: flex;
    flex-direction: column;
    min-height: 270px;
    padding: 30px 30px 32px;
    border-radius: 20px;
    background: #fff;
    box-shadow:
        0 1px 0 rgba(74, 0, 24, 0.05),
        0 24px 50px -30px rgba(74, 0, 24, 0.3);
}
.pr__card b {
    font-weight: 300;
    font-size: clamp(44px, 4vw, 64px);
    line-height: 1;
    letter-spacing: -0.04em;
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pr__card h3 {
    margin-top: auto;
    padding-top: 40px;
    font-weight: 500;
    font-size: clamp(20px, 1.6vw, 24px);
    letter-spacing: -0.02em;
}
.pr__card p {
    margin-top: 10px;
    font-size: 15.5px;
    line-height: 1.5;
    color: #6f5a62;
}
/* ---------- ABOUT: principles as flip cards (hover on desktop, tap on touch, focus on keyboard) ---------- */
.pf {
    perspective: 1400px;
}
.pf__in {
    position: relative;
    height: 340px;
    border-radius: 20px;
    transform-style: preserve-3d;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
    outline: none;
}
@media (hover: hover) {
    .pf:hover .pf__in {
        transform: rotateY(180deg);
    }
}
.pf__in.is-flipped,
.pf__in:focus-visible {
    transform: rotateY(180deg);
}
.pf__face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 30px 30px 32px;
    border-radius: inherit;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.pf__front {
    background: #fff;
    color: var(--ink);
    box-shadow:
        0 1px 0 rgba(74, 0, 24, 0.05),
        0 24px 50px -30px rgba(74, 0, 24, 0.3);
}
.pf__front svg {
    color: var(--wine);
}
.pf__front b,
.pf__back b {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--wine);
}
.pf__front b {
    margin-top: auto;
}
.pf__front h3,
.pf__back h3 {
    margin-top: 10px;
    font-weight: 400;
    font-size: clamp(24px, 2vw, 32px);
    line-height: 1.08;
    letter-spacing: -0.03em;
}
.pf__hint {
    position: absolute;
    top: 26px;
    right: 28px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 16px;
    color: var(--wine);
    box-shadow: inset 0 0 0 1px rgba(74, 0, 24, 0.18);
}
.pf__back {
    transform: rotateY(180deg);
    background: var(--brand-grad);
    color: #fff;
    box-shadow: 0 30px 60px -30px rgba(188, 4, 68, 0.7);
}
.pf__back b {
    color: rgba(255, 255, 255, 0.8);
}
.pf__back p {
    margin-top: auto;
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.45;
}
@media (prefers-reduced-motion: reduce) {
    .pf__in {
        transition: none;
    }
}

/* ---------- ABOUT: closing manifesto ---------- */
.mani {
    position: relative;
    z-index: 3;
}
.mani__in {
    display: grid;
    justify-items: center;
    text-align: center;
}
.mani__t {
    max-width: 22ch;
    margin-top: 20px;
    font-weight: 300;
    font-size: clamp(34px, 4.4vw, 76px);
    line-height: 1.1;
    letter-spacing: -0.035em;
}
.mani__note {
    margin-top: 22px;
    max-width: 520px;
}

/* ---------- HOME v2: uppercase statement hero ---------- */
.ab-hx--home .ab-hx__t {
    text-transform: uppercase;
    font-size: clamp(46px, 7vw, 128px);
    line-height: 0.96;
}
.swapbox {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding: 0 0.04em 0.06em 0;
}
.ab-hx__t .swap {
    display: inline-block;
    font-weight: 500;
    background: linear-gradient(100deg, #f0a0bb 0%, #e04f80 50%, #c4105a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* ---------- HOME v2: bento grid ---------- */
.bn {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
}
.bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(200px, auto);
    gap: 16px;
}
.bt {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 26px 26px 28px;
    border-radius: 22px;
    overflow: hidden;
    color: #fff !important;
    background: rgba(26, 12, 17, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px rgba(209, 125, 152, 0.14);
    transition:
        transform 0.5s var(--ease),
        box-shadow 0.5s var(--ease);
}
a.bt:hover,
.bt:hover {
    transform: translateY(-4px);
    box-shadow:
        inset 0 0 0 1px rgba(209, 125, 152, 0.36),
        0 30px 60px -36px rgba(0, 0, 0, 0.8);
}
.bt__k {
    position: relative;
    z-index: 2;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rose);
}
.bt p {
    position: relative;
    z-index: 2;
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(244, 214, 223, 0.7);
}
.bt__n {
    margin-top: auto;
    display: inline-flex;
    align-items: flex-start;
    font-weight: 300;
    font-size: clamp(60px, 5.6vw, 100px);
    line-height: 1;
    letter-spacing: -0.045em;
}
.bt__n sup {
    font-size: 0.4em;
    margin-left: 4px;
    color: var(--rose);
}
.bt--light {
    background: #f6eef1;
    color: var(--ink) !important;
    box-shadow: none;
}
.bt--light .bt__k,
.bt--light .bt__n sup {
    color: var(--wine);
}
.bt--light p {
    color: #6f5a62;
}
/* placement */
.bt--work {
    grid-column: span 6;
    grid-row: span 2;
    min-height: 440px;
    justify-content: space-between;
    padding: 0;
}
.bt--n1,
.bt--n2 {
    grid-column: span 3;
}
.bt--quote {
    grid-column: span 6;
}
.bt--svc,
.bt--method,
.bt--cta {
    grid-column: span 4;
    grid-row: span 2;
}
.bt--studios,
.bt--roi {
    grid-column: span 3;
}
.bt--clients {
    grid-column: span 6;
}
/* work tile: projects crossfade under a caption */
.bt__imgs,
.bt__imgs img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.bt__imgs img {
    object-fit: cover;
    object-position: top;
    opacity: 0;
    transform: scale(1.06);
    transition:
        opacity 1.2s var(--ease),
        transform 4s linear;
}
.bt__imgs img.is-on {
    opacity: 1;
    transform: scale(1);
}
.bt--work::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(13, 6, 9, 0.55) 0%,
        rgba(13, 6, 9, 0) 30%,
        rgba(13, 6, 9, 0) 55%,
        rgba(13, 6, 9, 0.85) 100%
    );
    pointer-events: none;
}
.bt--work .bt__k {
    margin: 24px 26px 0;
}
.bt__go {
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(13, 6, 9, 0.5);
    box-shadow: inset 0 0 0 1px rgba(244, 214, 223, 0.3);
    transition: background 0.4s;
}
.bt--work:hover .bt__go {
    background: var(--brand-grad);
    box-shadow: none;
}
.bt__cap {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 6px;
    padding: 0 26px 26px;
}
.bt__cap b {
    font-weight: 400;
    font-size: clamp(28px, 2.6vw, 42px);
    letter-spacing: -0.03em;
}
.bt__cap small {
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 214, 223, 0.75);
}
.bt__dots {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}
.bt__dots i {
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: rgba(244, 214, 223, 0.3);
    transition:
        background 0.4s,
        width 0.4s;
}
.bt__dots i.is-on {
    width: 36px;
    background: var(--brand-grad);
}
/* quote tile */
.bt__qs {
    position: relative;
    flex: 1;
    margin-top: 18px;
    min-height: 150px;
}
.bt__q {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 0.8s var(--ease),
        transform 0.8s var(--ease);
}
.bt__q.is-on {
    opacity: 1;
    transform: none;
}
.bt__q blockquote {
    font-weight: 300;
    font-size: clamp(22px, 1.9vw, 30px);
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.bt__q em {
    font-style: normal;
    font-weight: 500;
    color: #ffc2d4;
}
.bt__q figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}
.bt__q figcaption b {
    display: block;
    font-weight: 600;
    font-size: 15px;
}
.bt__q figcaption small {
    font-size: 13px;
    color: rgba(244, 214, 223, 0.6);
}
/* services tile */
.bt--svc ol {
    list-style: none;
    margin-top: auto;
}
.bt--svc li a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-top: 1px solid rgba(244, 214, 223, 0.12);
    font-size: clamp(17px, 1.3vw, 20px);
    letter-spacing: -0.01em;
    transition:
        color 0.3s,
        padding 0.4s var(--ease);
}
.bt--svc li a span {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--rose);
}
.bt--svc li a i {
    margin-left: auto;
    font-style: normal;
    opacity: 0.4;
    transition:
        opacity 0.3s,
        transform 0.4s var(--ease);
}
.bt--svc li a:hover {
    padding-left: 8px;
}
.bt--svc li a:hover i {
    opacity: 1;
    transform: translate(2px, -2px);
}
/* method tile: the page's 3D triangle settles into .bt__tri */
.bt--method {
    background: rgba(26, 12, 17, 0.18);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
} /* clear glass, so the 3D mark behind reads crisp */
.bt__tri {
    flex: 1;
    min-height: 220px;
    margin: 10px auto;
    width: 70%;
}
.bt__steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.bt__steps li {
    display: grid;
    gap: 4px;
    padding-top: 12px;
    border-top: 2px solid rgba(244, 214, 223, 0.14);
    font-size: 14px;
    color: rgba(244, 214, 223, 0.55);
    transition:
        color 0.4s,
        border-color 0.4s;
}
.bt__steps li b {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--rose);
}
.bt__steps li.is-on {
    color: #fff;
    border-color: #e04f80;
}
/* call-to-action tile */
.bt--cta {
    background: var(--brand-grad);
    box-shadow: 0 30px 60px -30px rgba(188, 4, 68, 0.7);
}
.bt--cta .bt__k {
    color: rgba(255, 255, 255, 0.8);
}
.bt--cta b {
    margin-top: auto;
    font-weight: 400;
    font-size: clamp(30px, 2.6vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.03em;
}
.bt__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 15.5px;
    font-weight: 500;
}
.bt__cta i {
    font-style: normal;
    transition: transform 0.4s var(--ease);
}
.bt--cta:hover .bt__cta i {
    transform: translate(3px, -3px);
}
/* studios + clients */
.bt--studios ul {
    list-style: none;
    margin-top: auto;
}
.bt--studios li {
    font-weight: 300;
    font-size: clamp(24px, 2vw, 32px);
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.bt__marq {
    margin: auto -26px 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent,
        #000 10%,
        #000 90%,
        transparent
    );
    mask-image: linear-gradient(
        90deg,
        transparent,
        #000 10%,
        #000 90%,
        transparent
    );
}
.bt__marq > div {
    display: flex;
    align-items: center;
    gap: 22px;
    width: max-content;
    padding: 0 26px;
    animation: btMarq 26s linear infinite;
}
.bt__marq span {
    font-weight: 300;
    font-size: clamp(24px, 2.2vw, 36px);
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.bt__marq i {
    font-style: normal;
    font-size: 12px;
    color: var(--rose);
}
@keyframes btMarq {
    to {
        transform: translateX(-50%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .bt__marq > div {
        animation: none;
    }
}
@media (max-width: 1100px) {
    .bento {
        grid-template-columns: repeat(6, 1fr);
    }
    .bt--work,
    .bt--quote,
    .bt--clients {
        grid-column: span 6;
    }
    .bt--svc,
    .bt--method {
        grid-column: span 3;
    }
    .bt--cta {
        grid-column: span 6;
        grid-row: span 1;
    }
}
@media (max-width: 640px) {
    .bento {
        grid-template-columns: 1fr;
    }
    .bt {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
    .bt--work {
        min-height: 360px;
    }
}

/* ---------- ABOUT: founder — a leadership profile ---------- */
.fd {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
    color: var(--ink);
}
.fd__in {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(36px, 6vw, 110px);
    align-items: center;
}
.fd__text {
    display: grid;
    gap: 22px;
    justify-items: start;
}
.fd__name {
    font-weight: 400;
    font-size: clamp(40px, 5.4vw, 92px);
    line-height: 0.98;
    letter-spacing: -0.035em;
} /* same size as every section title */
.fd__role {
    margin-top: -6px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-k);
}
.fd__facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.fd__facts li {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--ink);
    background: #fff;
    box-shadow:
        0 1px 0 rgba(74, 0, 24, 0.05),
        0 12px 24px -18px rgba(74, 0, 24, 0.35);
}
.fd__quote {
    position: relative;
    margin: 10px 0 0;
    padding-left: 26px;
    font-weight: 300;
    font-size: clamp(22px, 1.9vw, 30px);
    line-height: 1.3;
    letter-spacing: -0.02em;
}
.fd__quote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 3px;
    background: var(--brand-grad);
}
.fd__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
}
.fd__photo {
    position: relative;
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: #eadce1;
    box-shadow: 0 50px 90px -50px rgba(74, 0, 24, 0.7);
}
.fd__photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    padding: 2px;
    background: var(--brand-grad);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.fd__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% 20%;
}
.fd__photo figcaption {
    position: absolute;
    z-index: 2;
    left: 18px;
    top: 18px;
}
.fd__badge {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(13, 6, 9, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
/* ---------- ABOUT: principles orbit the 3D mark ---------- */
.orb {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
}
.orb__head {
    display: grid;
    gap: 22px;
    justify-items: start;
    margin-bottom: var(--head-gap);
}
.orb__head .h2 {
    max-width: 14ch;
}
.orb__ring {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    height: calc(100vh - var(--stage-top) - var(--stage-bottom));
    min-height: 520px;
}
.orb__core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(26%, 36vh);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}
.orb__n {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-weight: 600;
    font-size: clamp(30px, 2.8vw, 44px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--fg);
}
.orb__list {
    list-style: none;
}
.orb__it {
    position: absolute;
    width: min(300px, 26%);
    opacity: 0.32;
    transform: scale(0.97);
    transition:
        opacity 0.6s var(--ease),
        transform 0.6s var(--ease);
}
.orb__it.is-on {
    opacity: 1;
    transform: none;
}
.orb__it b {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--fg-k);
}
.orb__it h3 {
    margin-top: 8px;
    font-weight: 400;
    font-size: clamp(22px, 1.8vw, 28px);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.orb__it p {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--fg-2);
}
.orb__it:nth-child(1) {
    left: 6%;
    top: 0;
}
.orb__it:nth-child(2) {
    right: 6%;
    top: 0;
    text-align: right;
}
.orb__it:nth-child(3) {
    right: 0;
    top: 50%;
    transform: translateY(-50%) scale(0.97);
    text-align: right;
}
.orb__it:nth-child(3).is-on {
    transform: translateY(-50%);
}
.orb__it:nth-child(4) {
    right: 6%;
    bottom: 0;
    text-align: right;
}
.orb__it:nth-child(5) {
    left: 6%;
    bottom: 0;
}
.orb__it:nth-child(6) {
    left: 0;
    top: 50%;
    transform: translateY(-50%) scale(0.97);
}
.orb__it:nth-child(6).is-on {
    transform: translateY(-50%);
}
/* not pinned (tablets, phones, short screens): the mark on top, principles listed */
@media not all and (min-width: 1101px) and (min-height: 680px) {
    .orb__ring {
        height: auto;
        min-height: 0;
    }
    .orb__core {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 180px;
        margin: 0 auto 30px;
    }
    .orb__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px 24px;
    }
    .orb__it,
    .orb__it:nth-child(n) {
        position: static;
        width: auto;
        opacity: 1;
        transform: none !important; /* the desktop orbit offsets (e.g. translateY(-50%) on 3 and 6) must not move a stacked list */
        text-align: left;
    }
}
@media (max-width: 560px) {
    .orb__list {
        grid-template-columns: 1fr;
    }
}
/* ---------- ABOUT: working together — "this vs that" rows ---------- */
.wt {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
}
.wt__labels,
.wt__row {
    display: grid;
    grid-template-columns: 1fr 64px 1fr;
    align-items: center;
}
.wt__labels {
    padding-bottom: 14px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-k);
}
.wt__labels span:last-child {
    color: var(--fg-2);
}
.wt__rows {
    list-style: none;
}
.wt__row {
    padding: 24px 0;
    border-top: 1px solid var(--fg-line);
    font-size: clamp(19px, 1.7vw, 28px);
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.wt__row:last-child {
    border-bottom: 1px solid var(--fg-line);
}
.wt__yes {
    position: relative;
    padding-left: 40px;
}
.wt__yes::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")
            center / 13px no-repeat,
        var(--brand-grad);
}
.wt__vs {
    justify-self: center;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-2);
    opacity: 0.7;
}
.wt__no {
    color: var(--fg-2);
    opacity: 0.8;
    text-decoration: line-through;
    text-decoration-color: rgba(188, 4, 68, 0.35);
    text-decoration-thickness: 1.5px;
}
/* ---------- inner pages: a short get-in-touch band above the footer links ---------- */
.ft__short {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px 40px;
    padding-top: calc(var(--sec-y) * 0.7);
    padding-bottom: calc(var(--sec-y) * 0.55);
}
.ft__shortT {
    margin-top: 20px;
    font-weight: 300;
    font-size: clamp(36px, 4vw, 64px);
    line-height: 1;
    letter-spacing: -0.035em;
}
.ft__shortBtns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---------- CONTACT: brief — direct contacts + next steps · the form ---------- */
.ctx {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
}
.ctx__in {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(36px, 5vw, 90px);
    align-items: start;
}
.ctx__info {
    display: grid;
    gap: 34px;
}
.ctx__head {
    margin-bottom: 30px;
} /* + the column's 34px gap = the standard 64px heading → content */
.ctx__direct {
    display: grid;
}
.ctx__line {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid var(--fg-line);
    transition: padding 0.4s var(--ease);
}
.ctx__line:last-child {
    border-bottom: 1px solid var(--fg-line);
}
.ctx__line svg {
    flex: 0 0 auto;
    color: var(--fg-k);
}
.ctx__line small,
.ctx__studios small,
.ctx__next small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-k);
}
.ctx__line b {
    display: block;
    margin-top: 4px;
    font-weight: 400;
    font-size: clamp(20px, 1.7vw, 26px);
    letter-spacing: -0.02em;
}
.ctx__line i {
    margin-left: auto;
    font-style: normal;
    opacity: 0.4;
    transition:
        opacity 0.3s,
        transform 0.4s var(--ease);
}
.ctx__line:hover {
    padding-left: 8px;
}
.ctx__line:hover i {
    opacity: 1;
    transform: translate(2px, -2px);
}
.ctx__studios ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin-top: 10px;
}
.ctx__studios li {
    font-weight: 300;
    font-size: clamp(24px, 2vw, 32px);
    letter-spacing: -0.02em;
}
.ctx__next ol {
    list-style: none;
    display: grid;
    gap: 14px;
    margin-top: 14px;
}
.ctx__next li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-size: 16.5px;
    line-height: 1.45;
    color: var(--fg-2);
}
.ctx__next li b {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--brand-grad);
}
/* selectable chips (shared): a hidden checkbox + a pill */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.chip {
    position: relative;
}
.chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.chip span {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    color: rgba(244, 214, 223, 0.82);
    box-shadow: inset 0 0 0 1px rgba(244, 214, 223, 0.22);
    cursor: pointer;
    transition:
        background 0.3s,
        color 0.3s,
        box-shadow 0.3s;
}
.chip:hover span {
    box-shadow: inset 0 0 0 1px rgba(244, 214, 223, 0.5);
}
.chip input:checked + span {
    background: var(--brand-grad);
    color: #fff;
    box-shadow: none;
}
.chip input:focus-visible + span {
    outline: 2px solid var(--rose);
    outline-offset: 2px;
}
/* the brief form: a white card */
.bf {
    color: var(--ink) !important;
    display: grid;
    gap: 22px;
    padding: clamp(28px, 3vw, 46px);
    border-radius: 24px;
    background: #fff;
    box-shadow:
        0 1px 0 rgba(74, 0, 24, 0.05),
        0 40px 80px -46px rgba(74, 0, 24, 0.45);
}
.bf__title {
    font-size: clamp(24px, 2vw, 32px);
    letter-spacing: -0.02em;
}
.bf__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}
.bf__f > span {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wine);
}
.bf__f small {
    letter-spacing: 0.04em;
    text-transform: none;
    color: #9a8790;
}
.bf__f input,
.bf__f textarea,
.bf__f select {
    width: 100%;
    padding: 8px 0 11px;
    border: 0;
    border-bottom: 1px solid rgba(74, 0, 24, 0.2);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 17px;
    outline: none;
    resize: vertical;
    transition: border-color 0.3s;
    -webkit-appearance: none;
    appearance: none;
}
.bf__f select {
    cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a2e4a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
        right 2px center / 16px no-repeat;
    padding-right: 24px;
}
.bf__f input:focus,
.bf__f textarea:focus,
.bf__f select:focus {
    border-color: var(--wine);
}
.bf__f textarea::placeholder {
    color: #b9a3ab;
}
.bf__f.is-bad input,
.bf__f.is-bad textarea {
    border-color: #d6336c;
}
.chip--light span {
    color: #4d3a41;
    box-shadow: inset 0 0 0 1px rgba(74, 0, 24, 0.2);
}
.chip--light:hover span {
    box-shadow: inset 0 0 0 1px rgba(74, 0, 24, 0.45);
}
.chip--light input:checked + span {
    color: #fff;
}
.bf__send {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-top: 4px;
}
.bf__status {
    font-size: 14px;
    color: #6f5a62;
}
.bf__status.is-err {
    color: #c4105a;
}
.bf__status.is-ok {
    color: #1f7a45;
    font-weight: 500;
}
.bf__f.is-bad select { border-color: #d6336c; }
.bf__err { display: block; margin-top: 6px; font-size: 13px; font-style: normal; line-height: 1.35; color: #c4105a; }
.bf__count { float: right; font-size: 12px; font-weight: 400; color: #9c858d; }
.bf__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bf button[type="submit"][disabled] { opacity: 0.6; pointer-events: none; }
/* ---------- FAQ (every page): numbered questions · one large answer panel that swaps ---------- */
.faq {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
}
.faq2 {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(30px, 5vw, 80px);
    align-items: stretch;
}
.faq2__list {
    list-style: none;
    border-top: 1px solid var(--fg-line);
}
.faq2__q {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 18px;
    width: 100%;
    padding: 22px 0 22px 22px;
    border: 0;
    border-bottom: 1px solid var(--fg-line);
    background: none;
    text-align: left;
    font: inherit;
    font-size: clamp(18px, 1.5vw, 22px);
    letter-spacing: -0.015em;
    color: var(--fg-2);
    cursor: pointer;
    transition:
        color 0.4s,
        padding 0.4s var(--ease);
}
.faq2__q::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 3px;
    background: var(--brand-grad);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.45s var(--ease);
}
.faq2__q b {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--fg-k);
}
.faq2__q:hover {
    color: var(--fg);
}
.faq2__q.is-on {
    color: var(--fg);
    padding-left: 30px;
}
.faq2__q.is-on::before {
    transform: scaleY(1);
}
.faq2__q:focus-visible {
    outline: 2px solid var(--fg-k);
    outline-offset: 2px;
}
.faq2__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 360px;
    padding: clamp(28px, 3vw, 48px);
    border-radius: 24px;
    color: #fff;
    background: var(--brand-grad);
    box-shadow: 0 40px 80px -40px rgba(188, 4, 68, 0.65);
    overflow: hidden;
}
.faq2__panel::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.18),
        transparent 70%
    );
    pointer-events: none;
}
.faq2__answers {
    position: relative;
    flex: 1;
    display: grid;
}
.faq2__a {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition:
        opacity 0.5s var(--ease),
        transform 0.5s var(--ease),
        visibility 0.5s;
}
.faq2__a.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.faq2__n {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.75);
}
.faq2__qq {
    margin-top: 14px;
    font-size: clamp(16px, 1.2vw, 18px);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}
.faq2__t {
    margin-top: 18px;
    font-weight: 300;
    font-size: clamp(22px, 1.9vw, 30px);
    line-height: 1.35;
    letter-spacing: -0.02em;
}
.faq2__cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}
.faq2__cta i {
    font-style: normal;
    transition: transform 0.4s var(--ease);
}
.faq2__cta:hover i {
    transform: translate(3px, -3px);
}
@media (max-width: 860px) {
    .faq2 {
        grid-template-columns: 1fr;
    }
    .faq2__panel {
        min-height: 300px;
    }
}

/* ---------- WORK: case stories — one project per screen, image sides alternate ---------- */
.ws {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
}
.ws__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 30px;
}
.ws__count {
    font-size: 15px;
    letter-spacing: 0.1em;
    color: var(--fg-2);
}
.ws__count b {
    font-weight: 500;
    font-size: 28px;
    letter-spacing: -0.02em;
    color: var(--fg);
}
.ws__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ws__tab {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 15px;
    color: var(--fg);
    box-shadow: inset 0 0 0 1px var(--fg-line);
    transition:
        background 0.4s,
        color 0.4s,
        box-shadow 0.4s;
}
.ws__tab small {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--fg-k);
}
.ws__tab:hover {
    box-shadow: inset 0 0 0 1px var(--fg-k);
}
.ws__tab.is-on {
    background: var(--brand-grad);
    color: #fff;
    box-shadow: none;
}
.ws__tab.is-on small {
    color: rgba(255, 255, 255, 0.8);
}
.ws__panels {
    position: relative;
    height: calc(100vh - var(--stage-top) - var(--stage-bottom) - 130px);
    min-height: 440px;
}
.ws__panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(30px, 5vw, 80px);
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition:
        opacity 0.6s var(--ease),
        transform 0.6s var(--ease),
        visibility 0.6s;
}
.ws__panel.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.ws__panel:nth-child(even) .ws__img {
    order: 2;
}
.ws__img {
    position: relative;
    margin: 0;
    height: 100%;
    max-height: 540px;
    border-radius: 22px;
    overflow: visible;
}
.ws__img > img:first-child {
    width: 100%;
    height: 100%;
    border-radius: 22px;
    object-fit: cover;
    object-position: top;
    box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.8);
}
.ws__device {
    position: absolute;
    right: -18px;
    bottom: -18px;
    width: 30%;
    height: auto;
    max-height: 70%;
    border-radius: 14px;
    object-fit: cover;
    object-position: top;
    box-shadow:
        0 30px 60px -24px rgba(0, 0, 0, 0.7),
        0 0 0 4px rgba(13, 6, 9, 0.6);
}
.ws__panel:nth-child(even) .ws__device {
    right: auto;
    left: -18px;
}
.ws__sector {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-k);
}
.ws__text h3 {
    margin-top: 10px;
    font-weight: 400;
    font-size: clamp(40px, 4.4vw, 72px);
    line-height: 1;
    letter-spacing: -0.035em;
}
.ws__text > p:not([class]) {
    margin-top: 16px;
    max-width: 460px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--fg-2);
}
.ws__k {
    margin-top: 26px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-k);
}
.ws__chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 26px;
}
.ws__chips li {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--fg);
    box-shadow: inset 0 0 0 1px var(--fg-line);
}
/* ---------- METHOD: the journey — steps play out beside the 3D mark ---------- */
.mj {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
}
.mj__in {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 5vw, 80px);
    align-items: center;
    height: calc(100vh - var(--stage-top) - var(--stage-bottom) - 130px);
    min-height: 420px;
}
.mj__steps {
    position: relative;
    height: 100%;
}
.mj__step {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition:
        opacity 0.6s var(--ease),
        transform 0.6s var(--ease),
        visibility 0.6s;
}
.mj__step.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.mj__step h3 {
    margin-top: 10px;
    font-weight: 400;
    font-size: clamp(40px, 4.4vw, 72px);
    line-height: 1;
    letter-spacing: -0.035em;
}
.mj__step > p:not([class]) {
    margin-top: 16px;
    max-width: 480px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--fg-2);
}
.mj__step .svx__caps {
    grid-template-columns: 1fr;
    margin-bottom: 0;
}
.mj__tri {
    position: relative;
    justify-self: center;
    width: min(78%, 50vh);
    aspect-ratio: 1;
}
/* ---------- METHOD: the big loop (centred) + step cards ---------- */
.ml {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
}
.ml__in {
    display: grid;
    justify-items: center;
}
.loopTri--big {
    width: min(
        100%,
        760px,
        calc((100vh - var(--stage-top) - var(--stage-bottom)) * 1.13)
    );
}
.msg {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
}
.msg__grid {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.msc {
    display: flex;
    flex-direction: column;
    padding: clamp(28px, 2.6vw, 40px);
    border-radius: 22px;
    color: #fff;
    background: rgba(26, 12, 17, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px rgba(209, 125, 152, 0.16);
}
.msc__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.msc__top b {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    background: var(--brand-grad);
}
.msc__top span {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rose);
}
.msc h3 {
    margin-top: 34px;
    font-weight: 400;
    font-size: clamp(28px, 2.4vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.03em;
}
.msc > p:not([class]) {
    margin-top: 12px;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(244, 214, 223, 0.74);
}
.msc .ws__k {
    color: var(--rose);
}
.msc .svx__caps {
    margin-bottom: 0;
}
.msg__think {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 30px;
    margin-top: 56px;
    padding-top: 30px;
    border-top: 1px solid var(--fg-line);
}
.msg__think .ws__k {
    margin-top: 0;
}
.msg__think ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
}
.msg__think li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 17px;
}
.msg__think li b {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--fg-k);
}
@media (max-width: 860px) {
    .msg__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- WORK: also trusted by — client quotes ---------- */
.wq {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
}
.wq .names {
    margin-top: 0;
}
.wq__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 56px;
}
.wq__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    margin: 0;
    padding: 30px 28px;
    border-radius: 20px;
    color: var(--ink) !important;
    background: #fff;
    box-shadow:
        0 1px 0 rgba(74, 0, 24, 0.05),
        0 24px 50px -30px rgba(74, 0, 24, 0.3);
}
.wq__card blockquote {
    font-weight: 300;
    font-size: clamp(18px, 1.4vw, 21px);
    line-height: 1.45;
    letter-spacing: -0.01em;
}
.wq__card em {
    font-style: normal;
    font-weight: 500;
    color: var(--wine);
}
.wq__card figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
}
.wq__card figcaption b {
    display: block;
    font-weight: 600;
    font-size: 15px;
}
.wq__card figcaption small {
    font-size: 13px;
    color: #8f7880;
}
/* not pinned (tablets, phones, short screens): every case / step stacked */
@media not all and (min-width: 1101px) and (min-height: 680px) {
    .ws__panels,
    .mj__in,
    .mj__steps {
        height: auto;
        min-height: 0;
    }
    .ws__panels {
        display: grid;
        gap: 70px;
        margin-top: 30px;
    }
    .ws__panel,
    .mj__step {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .ws__panel {
        grid-template-columns: 1fr;
    }
    .ws__panel:nth-child(even) .ws__img {
        order: 0;
    }
    .ws__img {
        height: auto;
        aspect-ratio: 4 / 3;
    }
    .ws__count {
        display: none;
    }
    .mj__in {
        grid-template-columns: 1fr;
    }
    .mj__tri {
        order: -1;
        width: 180px;
    }
    .mj__steps {
        display: grid;
        gap: 50px;
    }
}
@media (max-width: 1100px) {
    .wq__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- SERVICES: pinned switcher — tabs on top, the active service swaps in place ---------- */
.svx {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
}
.svx__head {
    display: grid;
    gap: 22px;
    justify-items: start;
    margin-bottom: var(--head-gap);
}
.svx__head .h2 {
    max-width: 14ch;
}
.svx__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.svx__tab {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 15px;
    color: var(--fg);
    box-shadow: inset 0 0 0 1px var(--fg-line);
    transition:
        background 0.4s,
        color 0.4s,
        box-shadow 0.4s;
}
.svx__tab small {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--fg-k);
    transition: color 0.4s;
}
.svx__tab:hover {
    box-shadow: inset 0 0 0 1px var(--fg-k);
}
.svx__tab.is-on {
    background: var(--brand-grad);
    color: #fff;
    box-shadow: none;
}
.svx__tab.is-on small {
    color: rgba(255, 255, 255, 0.8);
}
.svx__bar {
    position: relative;
    height: 2px;
    margin: 18px 0 34px;
    border-radius: 2px;
    background: var(--fg-line);
}
.svx__bar i {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--p, 0) * 100%);
    border-radius: inherit;
    background: var(--brand-grad);
}
.svx__scene .svx__bar i {
    width: calc(var(--p, 0) * 100%);
}
.svx__panels {
    position: relative;
    height: calc(100vh - var(--stage-top) - var(--stage-bottom) - 130px);
    min-height: 440px;
}
.svx__panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 5vw, 80px);
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition:
        opacity 0.6s var(--ease),
        transform 0.6s var(--ease),
        visibility 0.6s;
}
.svx__panel.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.svx__n {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--fg-k);
}
.svx__text h3 {
    margin-top: 10px;
    font-weight: 400;
    font-size: clamp(36px, 3.8vw, 64px);
    line-height: 1;
    letter-spacing: -0.035em;
}
.svx__text p {
    margin-top: 18px;
    max-width: 520px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--fg-2);
}
.svx__caps {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 26px;
    margin: 26px 0 28px;
}
.svx__caps li {
    position: relative;
    padding-left: 30px;
    font-size: 15.5px;
    line-height: 1.4;
}
.svx__caps li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1em;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")
            center / 11px no-repeat,
        var(--brand-grad);
}
.svx__img {
    position: relative;
    margin: 0;
    height: 100%;
    max-height: 520px;
    border-radius: 22px;
    overflow: hidden;
    background: #eadce1;
    box-shadow: 0 40px 80px -46px rgba(74, 0, 24, 0.6);
}
.svx__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.svx__img figcaption {
    position: absolute;
    left: 16px;
    bottom: 16px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(13, 6, 9, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
/* not pinned (tablets, phones, short screens): every service stacked */
@media not all and (min-width: 1101px) and (min-height: 680px) {
    .svx__bar {
        display: none;
    }
    .svx__tabs {
        margin-bottom: 40px;
    }
    .svx__panels {
        height: auto;
        min-height: 0;
        display: grid;
        gap: 70px;
    }
    .svx__panel {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        grid-template-columns: 1fr;
    }
    .svx__img {
        height: auto;
        aspect-ratio: 4 / 3;
    }
}
@media (max-width: 560px) {
    .svx__caps {
        grid-template-columns: 1fr;
    }
}
/* ---------- SERVICES: process — four steps along a line ---------- */
.prc {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
}
.prc__steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.prc__step {
    position: relative;
    padding: 30px 26px 30px;
    border-radius: 20px;
    color: #fff;
    background: rgba(26, 12, 17, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px rgba(209, 125, 152, 0.16);
}
.prc__step b {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    background: var(--brand-grad);
}
.prc__step h3 {
    margin-top: 40px;
    font-weight: 400;
    font-size: clamp(22px, 1.8vw, 28px);
    letter-spacing: -0.02em;
}
.prc__step p {
    margin-top: 10px;
    font-size: 15.5px;
    line-height: 1.5;
    color: rgba(244, 214, 223, 0.74);
}
@media (max-width: 1100px) {
    .prc__steps {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 560px) {
    .prc__steps {
        grid-template-columns: 1fr;
    }
}

/* ---------- SERVICE PAGES ---------- */
.ab-hx__crumb {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.u-inline {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.sd {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
}
.sd-caps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.sd-cap {
    display: flex;
    flex-direction: column;
    min-height: 220px;
    padding: 26px 24px;
    border-radius: 20px;
    color: var(--ink) !important;
    background: #fff;
    box-shadow:
        0 1px 0 rgba(74, 0, 24, 0.05),
        0 24px 50px -30px rgba(74, 0, 24, 0.3);
}
.sd-cap b {
    font-weight: 300;
    font-size: clamp(36px, 3vw, 48px);
    line-height: 1;
    letter-spacing: -0.04em;
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.sd-cap h3 {
    margin-top: auto;
    padding-top: 30px;
    font-weight: 400;
    font-size: clamp(18px, 1.4vw, 22px);
    line-height: 1.2;
    letter-spacing: -0.015em;
}
.sdw {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
}
.sdw__in {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(30px, 5vw, 80px);
    align-items: center;
}
.sdw__img {
    position: relative;
    display: block;
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    box-shadow: 0 40px 80px -46px rgba(74, 0, 24, 0.6);
}
.sdw__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.8s var(--ease);
}
.sdw__img:hover img {
    transform: scale(1.03);
}
.sdw__cap {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: inline-flex;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(13, 6, 9, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.sdw__cap i {
    font-style: normal;
}
.sdw__others .ws__k {
    margin-top: 0;
}
.sdw__others ul {
    list-style: none;
    margin-top: 12px;
}
.sdw__others li a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--fg-line);
    font-size: clamp(18px, 1.5vw, 22px);
    letter-spacing: -0.01em;
    transition: padding 0.4s var(--ease);
}
.sdw__others li:last-child a {
    border-bottom: 1px solid var(--fg-line);
}
.sdw__others li a span {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--fg-k);
}
.sdw__others li a i {
    margin-left: auto;
    display: grid;
    color: var(--fg-k);
    transition: transform 0.4s var(--ease);
}
.sdw__others li a:hover {
    padding-left: 8px;
}
.sdw__others li a:hover i {
    transform: translate(2px, -2px);
}
.svx__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
}
@media (max-width: 1100px) {
    .sd-caps {
        grid-template-columns: repeat(2, 1fr);
    }
    .sdw__in {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 560px) {
    .sd-caps {
        grid-template-columns: 1fr;
    }
    .sd-cap {
        min-height: 0;
    }
}
/* ---------- CAREERS ---------- */
.pr__grid--4 {
    grid-template-columns: repeat(4, 1fr);
}
.pr__card {
    color: var(--ink) !important;
}
.apply {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
}
.apply__card {
    display: grid;
    gap: 18px;
    padding: clamp(32px, 4vw, 64px);
    border-radius: 26px;
    color: #fff;
    background: var(--brand-grad);
    box-shadow: 0 40px 80px -40px rgba(188, 4, 68, 0.7);
    transition: transform 0.5s var(--ease);
}
.apply__card:hover {
    transform: translateY(-4px);
}
.apply__k {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}
.apply__card b {
    font-weight: 300;
    font-size: clamp(44px, 6vw, 104px);
    line-height: 0.98;
    letter-spacing: -0.045em;
}
.apply__card p {
    max-width: 620px;
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}
.apply__go {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 18px;
    font-weight: 500;
}
.apply__go i {
    font-style: normal;
    transition: transform 0.4s var(--ease);
}
.apply__card:hover .apply__go i {
    transform: translate(3px, -3px);
}
@media (max-width: 1100px) {
    .pr__grid--4 {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 560px) {
    .pr__grid--4 {
        grid-template-columns: 1fr;
    }
}

/* ---------- FIT (about): who we work best with — two cards ---------- */
.fit {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
    color: var(--ink);
}
.fit__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.fit__card {
    padding: clamp(28px, 2.6vw, 40px);
    border-radius: 22px;
    background: #fff;
    box-shadow:
        0 1px 0 rgba(74, 0, 24, 0.05),
        0 24px 50px -30px rgba(74, 0, 24, 0.3);
}
.fit__card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wine);
}
.fit__card h3::before {
    content: "";
    width: 9px;
    height: 8px;
    background: var(--brand-grad);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.fit__card ul {
    list-style: none;
}
.fit__card li {
    position: relative;
    padding: 16px 0 16px 38px;
    border-top: 1px solid rgba(74, 0, 24, 0.08);
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.4;
    letter-spacing: -0.01em;
}
.fit__card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 17px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}
.fit__card--yes li::before {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")
            center / 12px no-repeat,
        var(--brand-grad);
}
.fit__card--no li {
    color: #6f5a62;
}
.fit__card--no li::before {
    box-shadow: inset 0 0 0 1.5px rgba(74, 0, 24, 0.25);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a2e4a' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E")
        center / 11px no-repeat;
}
.md--solo {
    padding-bottom: 0;
}

/* ---------- FOOTER: "Get in touch" over the hero's 3D scene + site map ---------- */
.ft {
    position: relative;
    z-index: 3;
    overflow: hidden;
    color: #fff;
}
.ft__touch {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(40px, 6vw, 110px);
    align-items: start;
    padding-top: var(--sec-y);
    padding-bottom: var(--sec-y);
}
.ft__big {
    margin-top: 20px;
    font-weight: 300;
    font-size: clamp(48px, 6vw, 108px);
    line-height: 0.96;
    letter-spacing: -0.045em;
}
.ft__big span {
    display: block;
    color: #fff;
}
.ft__big em {
    display: block;
    font-style: normal;
    font-weight: 500;
    color: var(--rose);
    padding-bottom: 0.04em;
}
.ft__lead {
    max-width: 560px;
    margin-top: 26px;
    font-size: 18.5px;
    line-height: 1.5;
    color: rgba(244, 214, 223, 0.82);
}
.ft__reach {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 34px;
    margin-top: 34px;
}
.ft__reach .u-link {
    color: #fff;
}
.social {
    display: flex;
    gap: 10px;
    margin-top: 30px;
}
.social a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    color: rgba(244, 214, 223, 0.85);
    box-shadow: inset 0 0 0 1px rgba(244, 214, 223, 0.2);
    transition:
        transform 0.4s var(--ease),
        background 0.4s,
        color 0.4s,
        box-shadow 0.4s;
}
.social a:hover {
    transform: translateY(-3px);
    background: var(--brand-grad);
    color: #fff;
    box-shadow: 0 12px 26px -12px rgba(188, 4, 68, 0.8);
}
.ft__brand .social {
    margin-top: 18px;
}
/* book-a-call card: frosted glass over the page's 3D triangle */
.ft__call {
    display: grid;
    gap: 22px;
    max-width: 540px;
    justify-self: end;
    align-self: center;
    width: 100%;
    padding: clamp(28px, 2.8vw, 44px);
    border-radius: 24px;
    background: rgba(26, 12, 17, 0.5);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
        inset 0 0 0 1px rgba(209, 125, 152, 0.18),
        0 40px 90px -40px rgba(0, 0, 0, 0.8);
}
.ft__team {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 16.5px;
    color: #fff;
}
.ft__team small {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    color: rgba(244, 214, 223, 0.6);
}
.ft__ava {
    display: flex;
}
.ft__ava i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: -10px;
    border-radius: 50%;
    background: var(--brand-grad);
    box-shadow: 0 0 0 3px #1a0c11;
    font-style: normal;
    font-size: 13px;
    color: #fff;
}
.ft__ava i:first-child {
    margin-left: 0;
}
.ft__ava i:nth-child(2) {
    background: linear-gradient(135deg, #8e1b45, #3d0016);
}
.ft__ava i:nth-child(3) {
    background: linear-gradient(135deg, #e08aa6, #bc0444);
}
.ft__callT {
    font-weight: 400;
    font-size: clamp(26px, 2.3vw, 36px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #fff;
}
.ft__callP {
    margin-top: -8px;
    font-size: 16.5px;
    line-height: 1.5;
    color: rgba(244, 214, 223, 0.72);
}
.ft__ticks {
    list-style: none;
    display: grid;
    gap: 12px;
}
.ft__ticks li {
    position: relative;
    padding-left: 30px;
    font-size: 17.5px;
    line-height: 1.45;
    color: rgba(244, 214, 223, 0.82);
}
.ft__ticks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(188, 4, 68, 0.25)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4d6df' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")
        center / 11px no-repeat;
    box-shadow: inset 0 0 0 1px rgba(209, 125, 152, 0.45);
}
.ft__book {
    justify-self: stretch;
    justify-content: center;
    margin-top: 6px;
}
.ft__reply {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14.5px;
    color: rgba(244, 214, 223, 0.6);
}
.ft__reply b {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5fd38d;
    box-shadow: 0 0 0 4px rgba(95, 211, 141, 0.15);
}
.ft__map {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.1fr 0.9fr;
    gap: 40px;
    padding: 56px 0 56px;
    border-top: 1px solid rgba(244, 214, 223, 0.12);
}
.ft__map > * {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.ft__map h5 {
    margin-bottom: 8px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rose);
}
.ft__map a,
.ft__map span {
    font-size: 17px;
    color: rgba(244, 214, 223, 0.78);
    transition: color 0.3s;
}
.ft__map a:hover {
    color: #fff;
}
.ft__brand img {
    display: block;
    width: 210px;
    height: auto;
    margin-bottom: 14px;
}
.ft__legal {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 30px;
    padding: 22px 0 24px;
    border-top: 1px solid rgba(244, 214, 223, 0.1);
    font-size: 15px;
    color: rgba(244, 214, 223, 0.5);
}
.ft__legal nav {
    display: flex;
    gap: 22px;
}
.ft__legal a {
    transition: color 0.3s;
}
.ft__legal a:hover {
    color: #fff;
}
.ft__up {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ft__up i {
    font-style: normal;
    transition: transform 0.4s var(--ease);
}
.ft__up:hover i {
    transform: translateY(-3px);
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    .top__nav {
        display: none;
    }
    .whys {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 28px;
    }
    .md__in {
        grid-template-columns: 1fr;
    }
    .md .scene__stage {
        padding: var(--sec-y) 0 0;
    }
    .loopTri {
        width: min(100%, 520px);
        margin: 48px auto 0;
    }
    .whys {
        margin-top: 80px;
    } /* pinned desktops set this from the layout instead */
}
@media (max-width: 860px) {
    .hx__base {
        grid-template-columns: 1fr;
        justify-items: start;
    }
    .hx__hold {
        display: none;
    }
    .hx__ctas {
        justify-self: start;
    }
    .hx__l2 {
        margin-top: 50px;
    } /* room for the mark between the two lines */
    .hx__chip {
        font-size: 11px;
        letter-spacing: 0.1em;
        text-align: center;
    }
    .hx {
        padding-top: 96px;
    }
    .hx__scroll {
        display: none;
    }
    .mf__trio {
        grid-template-columns: 1fr;
    }
    .cp__in {
        grid-template-columns: 1fr;
    }
    .cp__aside {
        position: static;
    }
    .prism {
        width: min(200px, 50%);
    }
    .cp__list li {
        opacity: 1;
        padding: 35px 0;
        grid-template-columns: 30px 1fr;
    }
    .node {
        position: relative;
        inset: auto;
        width: auto;
        margin: 0 0 10px !important;
        translate: none;
        opacity: 1;
        transform: none;
    }
    .loopTri {
        aspect-ratio: auto;
    }
    .loopTri svg {
        display: none;
    }
}
@media (max-width: 560px) {
    .whys {
        grid-template-columns: 1fr 1fr;
    }
    .hx__ctas,
    .hx__ctas a {
        width: 100%;
        justify-content: center;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hx__tri,
    .hx__scroll i,
    .ft__tri {
        animation: none;
    }
}

/* ---- responsive: numbers, work, footer ---- */
@media (max-width: 1100px) {
    .st__in {
        grid-template-columns: 1fr;
    }
    .st__head {
        position: static;
    }
    .ft__map {
        grid-template-columns: repeat(3, 1fr);
    }
    .ft__brand {
        grid-column: 1 / -1;
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center !important;
        gap: 10px 28px !important;
    }
    .ft__brand img {
        margin-bottom: 0 !important;
    }
}
@media (max-width: 860px) {
    .names {
        justify-content: flex-start;
    }
    .car {
        height: 58vw;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .car__card {
        width: 76vw;
        margin-left: -38vw;
    }
    .ft__btns a {
        width: 100%;
        justify-content: center;
    }
    .ft__touch {
        grid-template-columns: 1fr;
    }
    .ft__call {
        justify-self: stretch;
        max-width: none;
    }
    .ab-hx__in > * {
        max-width: none;
    }
    .fd__in {
        grid-template-columns: 1fr;
    }
    .fd__photo {
        max-width: 420px;
        order: -1;
    }
    .wt__labels {
        display: none;
    }
    .ctx__in {
        grid-template-columns: 1fr;
    }
    .wt__row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .wt__vs {
        justify-self: start;
        padding-left: 40px;
    }
    .wt__no {
        padding-left: 40px;
    }
    .pr__grid {
        grid-template-columns: 1fr 1fr;
    }
    .fit__cols {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 560px) {
    .bf__row {
        grid-template-columns: 1fr;
    }
    .pr__grid {
        grid-template-columns: 1fr;
    }
    .stat {
        grid-template-columns: 1fr;
    }
    .stat li:nth-child(even) {
        transform: none;
    }
    .stat li {
        min-height: 200px;
    }
    .ft__map {
        grid-template-columns: 1fr;
    }
}

/* ---- text follows the page background: html.bg-dark / html.bg-light are set with the background fade,
   so text still on screen from the previous section re-colours too, blended with the scroll ---- */
.st,
.cs,
.md,
.vc,
.cp,
.st__lede,
.names,
.names li,
.car__btn,
.car__count,
.car__count b,
#carTags,
#carTxt,
.btn-d,
.md__lede,
.whys,
.whys p,
.loopTri__bg,
.qw__lede,
.kick--dark,
.cp .kick,
.cp__list li,
.cp__list p,
.cp__list span,
.cp .u-link {
    transition:
        box-shadow 0.5s,
        stroke 0.5s,
        background 0.4s,
        opacity 0.5s var(--ease);
}
/* light-designed sections when the page is dark */
:is(.st, .cs, .md, .vc) {
    color: var(--fg);
}
:is(.st__lede, .car__count, #carTxt, .md__lede, .whys p) {
    color: var(--fg-2);
}
.car__count b {
    color: var(--fg);
}
:is(.st, .cs, .md, .vc) .kick--dark,
#carTags {
    color: var(--fg-k);
}
html.bg-dark :is(.car__btn, .btn-d) {
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(244, 214, 223, 0.3);
}
.names {
    border-color: var(--fg-line);
}
html.bg-dark .names li {
    color: rgba(244, 214, 223, 0.6);
}
.whys {
    border-color: var(--fg-line);
}
html.bg-dark .loopTri__bg {
    stroke: rgba(244, 214, 223, 0.22);
}
/* dark-designed sections when the page is light */
.cp {
    color: var(--fg);
}
.cp .kick,
.cp__list span {
    color: var(--fg-k);
}
.cp__list p {
    color: var(--fg-2);
}
.cp__list li {
    border-color: var(--fg-line);
}
.cp .u-link {
    color: var(--fg);
}

/* ---- pinned scenes: only what plays pins (headings flow above); nothing is squeezed to fit ---- */
@media (min-width: 1101px) and (min-height: 680px) {
    .cs {
        padding-bottom: 0;
    }
    .st {
        padding-top: 0;
    } /* its stage pins straight away and brings its own header clearance */
    .cs__scene,
    .vc__scene,
    .orb__scene,
    .svx__scene,
    .ws__scene,
    .mj__scene,
    .ml__scene {
        margin-top: calc(-1 * var(--stage-top));
    } /* heading → content stays --head-gap; once pinned the content still sits at the header line */
    .st__head {
        position: relative;
        top: auto;
    } /* the pinned stage is its own scroller: sticky would push the heading down */
    .vc {
        padding-bottom: 0;
    }
}
/* testimonials: the two rows glide further apart as the scene plays */
.qw__row--a .qw__track {
    margin-left: calc(var(--p, 0) * -18vw);
}
.qw__row--b .qw__track {
    margin-left: calc((var(--p, 0) - 1) * 18vw);
}

/* story timeline when sections don't pin: a swipeable row */
@media not all and (min-width: 1101px) and (min-height: 680px) {
    .tl2 {
        padding-top: var(--sec-y);
    }
    .tl2__track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 36px 0 12px;
        margin-top: -36px;
        scrollbar-width: none;
    }
    .tl2__track::-webkit-scrollbar {
        display: none;
    }
    .tl2__card {
        flex-basis: min(82vw, 380px);
        scroll-snap-align: start;
    }
    .tl2__line {
        display: none;
    }
    .tl2__card::before {
        display: none;
    }
    .mani {
        padding-top: var(--sec-y);
    }
}

/* ---------- header menu button: a hamburger, no label ---------- */
.menu-btn--icon {
    width: 40px;
    height: 36px;
    padding: 0;
    justify-content: center;
}
.menu-btn--icon em {
    display: grid;
    gap: 4px;
    width: 16px;
}
.menu-btn--icon em i {
    height: 1.6px;
    border-radius: 2px;
}
.menu-open .menu-btn--icon em i:nth-child(1) {
    transform: translateY(5.6px) rotate(45deg);
}
.menu-open .menu-btn--icon em i:nth-child(2) {
    opacity: 0;
}
.menu-open .menu-btn--icon em i:nth-child(3) {
    transform: translateY(-5.6px) rotate(-45deg);
}

/* ---------- content cards follow the page tone (every page): white on light sections, dark glass on dark —
   re-colouring with the same scroll-linked blend as the background, so a card never shows as a white block on dark ---------- */
html {
    --card: rgba(26, 12, 17, 0.6);
    --card-fg: #fff;
    --card-fg2: rgba(244, 214, 223, 0.74);
    --card-line: rgba(209, 125, 152, 0.18);
}
html.bg-light {
    --card: #fff;
    --card-fg: var(--ink);
    --card-fg2: #6f5a62;
    --card-line: rgba(74, 0, 24, 0);
}
.sd-cap,
.pr__card,
.wq__card,
.stat li,
.qw__card {
    background: none !important;
    background-color: var(--card) !important;
    color: var(--card-fg) !important;
    box-shadow:
        inset 0 0 0 1px var(--card-line),
        0 24px 50px -30px rgba(74, 0, 24, 0.3) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: transform 0.6s var(--ease) !important;
}
.qw__card blockquote,
.qw__card figcaption b,
.wq__card figcaption b,
.stat__n {
    color: inherit !important;
}
.pr__card p,
.stat__t,
.wq__card figcaption small,
.qw__card figcaption small {
    color: var(--card-fg2) !important;
}
.wq__card em,
.qw__card em,
.stat__k,
.stat__n sup {
    color: var(--fg-k) !important;
}

/* ---------- LEGAL PAGES: sticky contents + a readable policy column ---------- */
.ab-hx--short {
    min-height: 78vh;
    min-height: 78svh;
}
.lg {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
}
.lg__in {
    display: grid;
    grid-template-columns: 260px minmax(0, 820px);
    gap: clamp(36px, 6vw, 110px);
    align-items: start;
}
.lg__toc {
    position: sticky;
    top: var(--stage-top);
    display: grid;
    gap: 22px;
}
.lg__toc ol {
    list-style: none;
    border-left: 1px solid var(--fg-line);
}
.lg__toc a {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 9px 0 9px 18px;
    font-size: 15px;
    color: var(--fg-2);
    transition: color 0.3s;
}
.lg__toc a span {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--fg-k);
}
.lg__toc a::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: var(--brand-grad);
    transform: scaleY(0);
    transition: transform 0.4s var(--ease);
}
.lg__toc a:hover,
.lg__toc a.is-on {
    color: var(--fg);
}
.lg__toc a.is-on::before {
    transform: scaleY(1);
}
.lg__body {
    min-width: 0;
}
.lg__body .policy-section {
    padding-bottom: 56px;
    margin-bottom: 56px;
    border-bottom: 1px solid var(--fg-line);
    scroll-margin-top: calc(var(--stage-top) - 20px);
}
.lg__body .policy-section-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.lg__body .ps-num {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: var(--brand-grad);
}
.lg__body .ps-label {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-k);
}
.lg__body h2 {
    font-weight: 400;
    font-size: clamp(28px, 2.6vw, 42px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
}
.lg__body h3 {
    margin: 26px 0 10px;
    font-weight: 500;
    font-size: 19px;
    letter-spacing: -0.01em;
}
.lg__body p,
.lg__body li,
.lg__body td {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--fg-2);
}
.lg__body p + p {
    margin-top: 14px;
}
.lg__body strong {
    font-weight: 600;
    color: var(--fg);
}
.lg__body a {
    color: var(--fg);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.lg__body ul,
.lg__body ol:not(.process-steps) {
    margin: 16px 0;
    padding-left: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}
.lg__body ul li,
.lg__body ol:not(.process-steps) li {
    position: relative;
    padding-left: 24px;
}
.lg__body ul li::before,
.lg__body ol:not(.process-steps) li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.62em;
    width: 9px;
    height: 8px;
    background: var(--brand-grad);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.lg__body .info-box,
.lg__body .warning-box,
.lg__body .success-box {
    margin: 22px 0;
    padding: 20px 24px;
    border-radius: 14px;
    background: rgba(188, 4, 68, 0.06);
    box-shadow: inset 3px 0 0 #e04f80;
}
.lg__body .warning-box {
    background: rgba(214, 140, 30, 0.08);
    box-shadow: inset 3px 0 0 #d68c1e;
}
.lg__body .success-box {
    background: rgba(47, 158, 107, 0.08);
    box-shadow: inset 3px 0 0 #2f9e6b;
}
.lg__body .info-box p,
.lg__body .warning-box p,
.lg__body .success-box p {
    margin: 0;
}
.lg__body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    margin: 22px 0;
    border-collapse: collapse;
}
.lg__body thead th {
    padding: 12px 16px 12px 0;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-k);
    border-bottom: 1px solid var(--fg-line);
    white-space: nowrap;
}
.lg__body td {
    padding: 14px 16px 14px 0;
    border-bottom: 1px solid var(--fg-line);
    vertical-align: top;
    min-width: 140px;
}
.lg__body .badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
}
.lg__body .badge-green {
    background: rgba(47, 158, 107, 0.14);
    color: #1f7a52;
}
.lg__body .badge-yellow {
    background: rgba(214, 140, 30, 0.16);
    color: #9a5f08;
}
.lg__body .badge-red {
    background: rgba(188, 4, 68, 0.12);
    color: var(--wine);
}
.lg__body .cookie-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 22px 0;
}
.lg__body .cookie-card {
    padding: 22px;
    border-radius: 16px;
    background-color: var(--card);
    box-shadow:
        inset 0 0 0 1px var(--card-line),
        0 18px 40px -30px rgba(74, 0, 24, 0.3);
}
.lg__body .cookie-card-icon {
    display: none;
}
.lg__body .cookie-card-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-k);
}
.lg__body .cookie-card-badge {
    display: inline-block;
    margin-top: 12px;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
}
.lg__body .badge-required {
    background: var(--brand-grad);
    color: #fff;
}
.lg__body .badge-optional {
    box-shadow: inset 0 0 0 1px var(--fg-line);
    color: var(--fg-2);
}
.lg__body .process-steps,
.lg__body .steps-list {
    list-style: none;
    display: grid;
    gap: 12px;
    margin: 22px 0;
    padding: 0;
}
.lg__body .process-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 20px;
    border-radius: 14px;
    background-color: var(--card);
    box-shadow:
        inset 0 0 0 1px var(--card-line),
        0 18px 40px -30px rgba(74, 0, 24, 0.3);
}
.lg__body .process-step::before {
    display: none;
}
.lg__body .step-num {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: var(--brand-grad);
}
.lg__body .step-title {
    font-weight: 600;
    color: var(--fg);
}
.lg__body .step-desc {
    margin-top: 4px;
}
.lg__more {
    padding-bottom: 10px;
}
.lg__more .ws__k {
    margin-top: 0;
}
.lg__more ul {
    margin-top: 12px;
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px 26px !important;
}
.lg__more li {
    padding-left: 0 !important;
}
.lg__more li::before {
    display: none;
}
.lg__more a {
    text-decoration: none;
    font-size: 18px;
}
.lg__more a i {
    font-style: normal;
    color: var(--fg-k);
}
@media (max-width: 1100px) {
    .lg__in {
        grid-template-columns: 1fr;
    }
    .lg__toc {
        position: static;
    }
    .lg__toc ol {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 16px;
        border-left: 0;
    }
    .lg__toc a {
        padding-left: 0;
    }
    .lg__toc a::before {
        display: none;
    }
}
@media (max-width: 560px) {
    .lg__body .cookie-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- BLOG: listing cards, chips, article extras ---------- */
.bl {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 0;
}
.bl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
}
.bl-chip {
    padding: 10px 16px;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-size: 15px;
    color: var(--fg);
    background: none;
    box-shadow: inset 0 0 0 1px var(--fg-line);
    cursor: pointer;
    transition:
        background 0.4s,
        color 0.4s,
        box-shadow 0.4s;
}
.bl-chip:hover {
    box-shadow: inset 0 0 0 1px var(--fg-k);
}
.bl-chip.is-on {
    color: #fff;
    background: var(--brand-grad);
    box-shadow: none;
}
.bl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.bl-grid--2 {
    grid-template-columns: 1fr 1fr;
}
.bl-card {
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
    background-color: var(--card);
    color: var(--card-fg) !important;
    box-shadow:
        inset 0 0 0 1px var(--card-line),
        0 24px 50px -30px rgba(74, 0, 24, 0.3);
    transition: transform 0.5s var(--ease);
}
.bl-card:hover {
    transform: translateY(-4px);
}
.bl-card[hidden] {
    display: none;
}
.bl-card--big {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
}
.bl-card__vis {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 200px;
    aspect-ratio: 16 / 9;
    background: var(--brand-grad);
    overflow: hidden;
}
.bl-card--big .bl-card__vis {
    aspect-ratio: auto;
    min-height: 340px;
}
.bl-card__vis i {
    font-style: normal;
    font-size: clamp(90px, 10vw, 170px);
    line-height: 1;
    color: rgba(255, 255, 255, 0.16);
    transform: translateY(6%);
}
.bl-card__vis b {
    position: absolute;
    left: 18px;
    top: 18px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(13, 6, 9, 0.35);
}
.bl-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 26px 26px 28px;
}
.bl-card--big .bl-card__body {
    padding: clamp(28px, 3vw, 46px);
    justify-content: center;
}
.bl-card__meta {
    font-size: 12.5px;
    letter-spacing: 0.06em;
    color: var(--card-fg2);
}
.bl-card h3 {
    margin-top: 12px;
    font-weight: 400;
    font-size: clamp(22px, 1.7vw, 28px);
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.bl-card--big h3 {
    font-size: clamp(30px, 2.8vw, 46px);
}
.bl-card p {
    margin-top: 12px;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--card-fg2);
}
.bl-card__go {
    margin-top: auto;
    padding-top: 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--fg-k);
}
.bl-card__go i {
    font-style: normal;
    transition: transform 0.4s var(--ease);
    display: inline-block;
}
.bl-card:hover .bl-card__go i {
    transform: translateX(4px);
}
.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    font-size: 14px;
    color: var(--fg-2);
}
.crumbs a {
    color: var(--fg-2);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.ab-hx--post .ab-hx__in > * {
    max-width: 70%;
}
.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
    font-size: 14.5px;
    color: var(--fg-2);
}
.lg__toc a.lg__svc {
    display: grid !important;
    padding: 18px 20px !important;
    color: #fff !important;
    font-size: inherit;
    grid-template-columns: 1fr auto;
    gap: 2px 14px;
    align-items: end;
    margin-top: 6px;
    padding: 18px 20px;
    border-radius: 16px;
    color: #fff;
    background: var(--brand-grad);
}
.lg__toc .lg__svc small {
    grid-column: 1 / -1;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}
.lg__toc .lg__svc b {
    font-weight: 400;
    font-size: 20px;
}
.lg__toc .lg__svc i {
    font-style: normal;
}
.lg__toc a.lg__svc::before {
    display: none;
}
@media (max-width: 1100px) {
    .bl-grid {
        grid-template-columns: 1fr 1fr;
    }
    .bl-card--big {
        grid-template-columns: 1fr;
    }
    .ab-hx--post .ab-hx__in > * {
        max-width: none;
    }
}
@media (max-width: 640px) {
    .bl-grid,
    .bl-grid--2 {
        grid-template-columns: 1fr;
    }
}

/* client logos (from the live About page) — each sits on its own white tile since the files carry a white ground */
.names--logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(22px, 2.4vw, 36px) clamp(28px, 3.6vw, 56px);
}
.names--logos li {
    display: grid;
    place-items: center;
    width: clamp(120px, 13vw, 200px);
    padding: 4px 8px;
    transition: transform 0.4s var(--ease);
}
.names--logos li:hover {
    transform: translateY(-3px);
}
.names--logos img {
    display: block;
    width: 100%;
    height: auto;
}
/* the logos are transparent and mostly dark: on a dark page they show as white marks */
html.bg-dark .names--logos img {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}
.bt__marq--logos img {
    display: block;
    height: 58px;
    width: auto;
    filter: brightness(0) invert(1); /* the bento tile is always dark */
    opacity: 0.85;
}
@media (max-width: 560px) {
    .names--logos {
        gap: 18px 24px;
    }
    .names--logos li {
        width: calc(50% - 12px);
    }
}


/* ---------- FAQ: the title stays put on the left while the questions open and close on the right ---------- */
.faq3 {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(40px, 6vw, 120px);
    align-items: start;
}
.faq3__aside .h2 {
    margin-top: 22px;
}
.faq3__aside .lede {
    margin-top: 22px;
    max-width: 420px;
}
.faq3__help {
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--fg-line);
}
.faq3__help p {
    font-size: 18px;
    color: var(--fg);
}
.faq3__help .btn-g {
    margin-top: 16px;
}
.faq3__list {
    list-style: none;
    border-top: 1px solid var(--fg-line);
}
.faq3__item {
    border-bottom: 1px solid var(--fg-line);
}
.faq3__q {
    display: grid;
    grid-template-columns: 44px 1fr 22px;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 28px 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--fg);
    cursor: pointer;
}
.faq3__q b {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--fg-k);
}
.faq3__q span {
    font-size: clamp(19px, 1.6vw, 25px);
    line-height: 1.3;
    letter-spacing: -0.015em;
}
.faq3__q i {
    position: relative;
    width: 22px;
    height: 22px;
}
.faq3__q i::before,
.faq3__q i::after {
    content: "";
    position: absolute;
    left: 3px;
    right: 3px;
    top: 50%;
    height: 1.6px;
    margin-top: -0.8px;
    border-radius: 2px;
    background: var(--fg-k);
    transition: transform 0.45s var(--ease);
}
.faq3__q i::after {
    transform: rotate(90deg);
}
.faq3__item.is-open .faq3__q i::before {
    transform: rotate(45deg);
}
.faq3__item.is-open .faq3__q i::after {
    transform: rotate(135deg);
}
.faq3__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s var(--ease);
}
.faq3__a > div {
    overflow: hidden;
}
.faq3__a p {
    max-width: 640px;
    padding: 0 36px 30px 58px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--fg-2);
}
.faq3__item.is-open .faq3__a {
    grid-template-rows: 1fr;
}
@media (min-width: 1101px) {
    .faq3__aside {
        position: sticky;
        top: var(--stage-top);
    }
}
@media (max-width: 1100px) {
    .faq3 {
        grid-template-columns: 1fr;
        gap: var(--head-gap);
    }
}
@media (max-width: 640px) {
    .faq3__q {
        grid-template-columns: 34px 1fr 20px;
        padding: 22px 0;
    }
    .faq3__a p {
        padding: 0 0 24px 48px;
        font-size: 16px;
    }
}

/* ---------- CAREERS: send us your work, in three steps ---------- */
.apply3 {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.apply3__step {
    display: flex;
    flex-direction: column;
    min-height: 280px;
    padding: 30px 28px 32px;
    border-radius: 22px;
    background-color: var(--card);
    color: var(--card-fg);
    box-shadow:
        inset 0 0 0 1px var(--card-line),
        0 24px 50px -30px rgba(74, 0, 24, 0.3);
}
.apply3__step b {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--fg-k);
}
.apply3__step h3 {
    margin-top: auto;
    padding-top: 48px;
    font-weight: 400;
    font-size: clamp(24px, 2vw, 32px);
    line-height: 1.1;
    letter-spacing: -0.025em;
}
.apply3__step p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--card-fg2);
}
.apply3__step--go {
    color: #fff;
    background: var(--brand-grad);
    box-shadow: 0 30px 60px -30px rgba(188, 4, 68, 0.7);
}
.apply3__step--go b,
.apply3__step--go p {
    color: rgba(255, 255, 255, 0.85);
}
.apply3__step--go .btn-g {
    align-self: flex-start;
    margin-top: 22px;
    color: var(--wine);
    background: #fff;
    box-shadow: none;
}
@media (max-width: 900px) {
    .apply3 {
        grid-template-columns: 1fr;
    }
    .apply3__step {
        min-height: 0;
    }
    .apply3__step h3 {
        padding-top: 26px;
    }
}


/* ---------- HOME: "Let's talk" — two giant lines slide past each other as the footer scrolls in ---------- */
.ft__talk {
    position: relative;
    z-index: 3;
    padding: var(--sec-y) 0 calc(var(--sec-y) * 0.7);
}
.ft__talkStage {
    position: relative;
    margin-top: 34px;
    padding: 12px 0;
    overflow: hidden;
}
.ft__talkRow {
    white-space: nowrap;
}
.ft__talkTrack {
    display: inline-flex;
    align-items: center;
    gap: 0.28em;
    font-weight: 500;
    font-size: clamp(64px, 11vw, 190px);
    line-height: 1;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    will-change: transform;
}
.ft__talkTrack i {
    font-style: normal;
    font-size: 0.3em;
    color: var(--rose);
}
.ft__talkRow--a .ft__talkTrack {
    color: #fff;
}
.ft__talkRow--b .ft__talkTrack {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(244, 214, 223, 0.5);
}
.ft__talkRow--b .ft__talkTrack i {
    -webkit-text-stroke: 0;
}
.ft__talkBtn {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: clamp(136px, 13vw, 210px);
    aspect-ratio: 1;
    border-radius: 50%;
    text-align: center;
    font-size: clamp(16px, 1.3vw, 20px);
    font-weight: 500;
    line-height: 1.15;
    color: #fff;
    background: var(--brand-grad);
    box-shadow:
        0 30px 70px -20px rgba(188, 4, 68, 0.8),
        0 0 0 10px rgba(13, 6, 9, 0.55);
    transform: translate(-50%, -50%);
    transition: transform 0.5s var(--ease);
}
.ft__talkBtn:hover {
    transform: translate(-50%, -50%) scale(1.06) rotate(-4deg);
}
.ft__talkBtn i {
    font-style: normal;
    font-size: 1.3em;
}
.ft__talkInfo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 36px;
    margin-top: 44px;
    font-size: 17px;
    color: rgba(244, 214, 223, 0.8);
}
.ft__talkInfo a {
    transition: color 0.3s;
}
.ft__talkInfo a:hover {
    color: #fff;
}
@media (prefers-reduced-motion: reduce) {
    .ft__talkTrack {
        transform: none !important;
    }
}

/* ---------- BLOG: cover illustrations on cards and at the top of each article ---------- */
.bl-card__vis img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease);
}
.bl-card:hover .bl-card__vis img {
    transform: scale(1.04);
}
.bl-card__vis b {
    z-index: 1;
    left: auto;
    right: 18px;
} /* top-right: the illustrations keep that corner clear */
.post-cover {
    margin: 0 0 48px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px -40px rgba(74, 0, 24, 0.45);
}
.post-cover img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- GET IN TOUCH (every page): one centred statement — the triangle above, two buttons, contact row.
   The headline keeps the .ft__big size; when space is tight the copy is short rather than the type small ---------- */
.ft__cta {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--sec-y);
    padding-bottom: calc(var(--sec-y) * 0.7);
    text-align: center;
}
.ft__ctaMark { width: 180px; height: 160px; } /* room for the 3D triangle, which centres itself here */
.ft__cta .kick { margin-top: 26px; }
.ft__cta .ft__big { margin-top: 22px; }
.ft__ctaBtns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 44px;
}
.ft__ctaBtns .btn-o { color: #fff; box-shadow: inset 0 0 0 1px rgba(244, 214, 223, 0.35); }
@media (max-width: 640px) {
    .ft__ctaMark { width: 130px; height: 116px; }
}

/* the word masks in hero headlines open far enough below the baseline for the tails of g, p and y */
.ab-hx__t .wm { padding-bottom: 0.18em; margin-bottom: -0.18em; }

/* ---------- one section rhythm everywhere: every section opens with --sec-y and closes with nothing, so the
   space between any two sections is the same. Heroes size to their content (no full-screen height or extra
   bottom padding), and an article / policy body doesn't leave its last divider's space behind ---------- */
.lg__body .policy-section:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.lg__body .policy-section:last-child > :last-child { margin-bottom: 0; }
.lg__body > :last-child, .lg__more, .lg__more ul { margin-bottom: 0; padding-bottom: 0; }

/* ---------- INNER PAGES: the hero is the first fold — one full screen, its content centred. Every other section
   keeps the standard rhythm (--sec-y above, natural height). The home page keeps its own layout ---------- */
body.inner main > section.ab-hx {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--stage-top);
    padding-bottom: var(--stage-bottom);
}
body.inner main > section.ab-hx > * { width: 100%; }

/* ---------- inner-page hero: the client logos fill the foot of the first screen; the hero copy stays centred above ---------- */
body.inner main > section.ab-hx > .ab-hx__in { margin-top: auto; }
.hx-trust {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: auto;
    padding-top: 26px;
    border-top: 1px solid rgba(244, 214, 223, 0.14);
}
body.inner main > section.ab-hx > .hx-trust { margin-top: auto; }
body.inner main > section.ab-hx > .ab-hx__in { margin-bottom: 56px; }
.hx-trust__k {
    flex: none;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rose);
}
.hx-trust__marq {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hx-trust__track { display: flex; width: max-content; animation: hxTrust 46s linear infinite; }
.hx-trust__set { display: flex; align-items: center; gap: 56px; padding-right: 56px; }
.hx-trust__set img { display: block; height: 48px; width: auto; filter: brightness(0) invert(1); opacity: 0.72; }
@keyframes hxTrust { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hx-trust__track { animation: none; } }
@media (max-width: 640px) {
    .hx-trust { flex-direction: column; align-items: flex-start; gap: 14px; }
    .hx-trust__marq { width: 100%; }
    .hx-trust__set img { height: 32px; }
    .hx-trust__set { gap: 36px; padding-right: 36px; }
}

/* ---------- menu opens as one smooth fade (no top-down wipe, so the page never shows half-covered),
   and the links rise in one after another ---------- */
.menu {
    clip-path: none !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.menu-open .menu {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.28s ease-out, visibility 0s;
}
.menu li {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.menu-open .menu li {
    opacity: 1;
    transform: none;
    transition: opacity 0.55s var(--ease), transform 0.7s var(--ease);
}
.menu-open .menu li:nth-child(1) { transition-delay: 0.2s; }
.menu-open .menu li:nth-child(2) { transition-delay: 0.25s; }
.menu-open .menu li:nth-child(3) { transition-delay: 0.3s; }
.menu-open .menu li:nth-child(4) { transition-delay: 0.35s; }
.menu-open .menu li:nth-child(5) { transition-delay: 0.4s; }
.menu-open .menu li:nth-child(6) { transition-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) {
    .menu li, .menu-open .menu li { transform: none; transition-delay: 0s; }
}

/* ---------- BLOG COVERS: the article's key idea in bold type on a brand gradient. Drawn in CSS, so they use the
   site font and scale with their box (container units) — a thumbnail and the article header share one design ---------- */
.cover {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: 7% 7% 7.5%; /* % of the cover's own width — keeps the inner box (and the cqi type below) proportional */
    overflow: hidden;
    color: #fff;
    background: var(--cv-bg);
    container-type: inline-size;
}
.cover__t { position: relative; display: block; font-weight: 600; font-size: 19cqi; line-height: 0.9; letter-spacing: -0.045em; }
.cover__s { position: relative; display: block; margin-top: 3.6cqi; font-size: max(11px, 3.4cqi); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
.cover svg { position: absolute; right: -7cqi; top: -9cqi; width: 58cqi; height: auto; overflow: visible; }
.cover svg path { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 5; stroke-linejoin: round; }
.cover--uiux { --cv-bg: linear-gradient(135deg, #e7a3b9 0%, #d17d98 22%, #bc0444 62%, #4a0018 100%); }
.cover--web { --cv-bg: linear-gradient(160deg, #1f0b12 0%, #5a0224 48%, #bc0444 100%); }
.cover--leads { --cv-bg: radial-gradient(130% 120% at 0% 100%, #d9245e 0%, #94033a 38%, #3a0013 78%, #14080d 100%); }
.cover--social { --cv-bg: linear-gradient(115deg, #4a0018 0%, #bc0444 52%, #e7a3b9 100%); }
.bl-card__vis .cover { position: absolute; inset: 0; transition: transform 0.8s var(--ease); }
.bl-card:hover .bl-card__vis .cover { transform: scale(1.03); }
.post-cover .cover { aspect-ratio: 16 / 8; height: auto; border-radius: 20px; }

/* ---------- BLOG PAGE: magazine layout — one featured story, then wide rows (cover left, story right) ---------- */
.bl-mag { display: grid; }
.bl-mag > [hidden] { display: none !important; }
.bl-meta { font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-k); }
.bl-go { margin-top: 20px; font-size: 15px; font-weight: 500; color: var(--fg); }
.bl-go i { display: inline-block; font-style: normal; transition: transform 0.4s var(--ease); }
.bl-feat {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    border-radius: 24px;
    overflow: hidden;
    background-color: var(--card);
    color: var(--card-fg);
    box-shadow: inset 0 0 0 1px var(--card-line), 0 30px 60px -36px rgba(74, 0, 24, 0.35);
    margin-bottom: 26px;
}
.bl-feat__img { position: relative; min-height: 380px; }
.bl-feat__img .cover { position: absolute; inset: 0; transition: transform 0.9s var(--ease); }
.bl-feat:hover .bl-feat__img .cover { transform: scale(1.03); }
.bl-feat__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.4vw, 54px); }
.bl-feat h3 { margin-top: 14px; font-weight: 400; font-size: clamp(30px, 2.8vw, 46px); line-height: 1.08; letter-spacing: -0.025em; }
.bl-feat p { margin-top: 14px; font-size: 16.5px; line-height: 1.55; color: var(--card-fg2); }
.bl-feat .bl-go { color: var(--card-fg); }
.bl-row {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: clamp(24px, 3.4vw, 56px);
    align-items: center;
    padding: 26px 0;
    border-bottom: 1px solid var(--fg-line);
    color: var(--fg);
}
.bl-row:first-of-type { border-top: 1px solid var(--fg-line); }
.bl-row__img { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; }
.bl-row__img .cover { position: absolute; inset: 0; transition: transform 0.8s var(--ease); }
.bl-row:hover .bl-row__img .cover { transform: scale(1.04); }
.bl-row h3 { margin-top: 12px; font-weight: 400; font-size: clamp(24px, 2vw, 32px); line-height: 1.12; letter-spacing: -0.02em; transition: color 0.3s; }
.bl-row p { margin-top: 10px; max-width: 640px; font-size: 16px; line-height: 1.55; color: var(--fg-2); }
.bl-row:hover h3 { color: var(--fg-k); }
.bl-row:hover .bl-go i, .bl-feat:hover .bl-go i { transform: translateX(4px); }
@media (max-width: 900px) {
    .bl-feat { grid-template-columns: 1fr; }
    .bl-feat__img { min-height: 0; aspect-ratio: 16 / 10; }
    .bl-row { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .bl-row { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- BLOG PAGE: bento grid of photo tiles — the newest story wide, the next tall, two small ---------- */
.bento-blog {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.bento-blog > [hidden] { display: none !important; }
/* blog card: clean photo on top, short story below (title + excerpt each capped at 2 lines) */
.bnt {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 22px;
    overflow: hidden;
    background-color: var(--card);
    color: var(--card-fg);
    box-shadow: inset 0 0 0 1px var(--card-line), 0 30px 60px -36px rgba(74, 0, 24, 0.3);
    transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.bnt:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--card-line), 0 36px 70px -36px rgba(74, 0, 24, 0.45); }
.bnt img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; transition: transform 1s var(--ease); }
.bnt:hover img { transform: scale(1.04); }
.bnt__body { position: relative; z-index: 1; display: block; flex: 1; padding: 20px 64px 24px 22px; background-color: var(--card); }
.bnt__meta { font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-k); }
.bnt h3, .bnt p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
.bnt h3 { margin-top: 8px; font-weight: 500; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.25; letter-spacing: -0.015em; }
.bnt p { margin-top: 8px; font-size: 14.5px; line-height: 1.5; opacity: 0.72; }
.bnt__go {
    position: absolute;
    right: 18px;
    bottom: 22px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 15px;
    box-shadow: inset 0 0 0 1px var(--card-line);
    transition: background 0.4s, color 0.4s, transform 0.4s var(--ease);
}
.bnt:hover .bnt__go { background: var(--brand-grad); color: #fff; box-shadow: none; transform: translate(2px, -2px); }
@media (max-width: 1100px) {
    .bento-blog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .bento-blog { grid-template-columns: 1fr; }
}

/* article pages: the story's photo under the hero */
.post-cover--photo img { aspect-ratio: 16 / 8; object-fit: cover; }