/* ==========================================================================
   Mobile App Development service page
   Scoped under .ma. Theme taken from the existing Triangle Mind service pages:
     hero      #273f44 dark blue to #1b2d30 with a soft orange glow
     dark      #1b2d30 teal, tech section #273f44 dotted
     light     #fff / #e9ebea grey / #ecede8 sand with grid
     accent    #f2691c orange (kickers, indexes, hover, buttons)
     type      DM Sans (headings + body), Manrope for kickers
   ========================================================================== */

.ma {
    --ma-teal: #1b2d30;
    --ma-teal-2: #273f44;
    --ma-ink: #14201f;
    --ma-muted: #5d6b6a;          /* body text on light */
    --ma-muted-dark: #b9c2d0;     /* body text on dark */
    --ma-soft: #8a9695;           /* grey phrase in headings ("clarity.") */
    --ma-orange: #f2691c;
    --ma-orange-light: #ff9148;
    --ma-orange-hover: #ff7d2c;
    --ma-grey: #e9ebea;
    --ma-sand: #ecede8;
    --ma-line-light: #dfe3e2;
    --ma-line-dark: rgba(255, 255, 255, .12);

    --ma-ease: cubic-bezier(.2, .8, .2, 1);

    position: relative;
    overflow-x: clip;
    background: #fff;
    color: var(--ma-ink);
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

.ma h1, .ma h2, .ma h3, .ma p, .ma ul, .ma ol { margin: 0; padding: 0; }
.ma ul, .ma ol { list-style: none; }
.ma-light { background: #fff; }
.ma-grey  { background: var(--ma-grey); }
.ma-sand  {
    background-color: var(--ma-sand);
    background-image:
        linear-gradient(rgba(20, 32, 31, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 32, 31, .06) 1px, transparent 1px);
    background-size: 75px 75px;
}
section{
	padding: 20px;
}

.ma-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* ---------- type ---------- */
.ey {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font: 700 11px Manrope;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue-deep);
    animation: fadeUp 0.8s var(--ease) 0.2s forwards;
}
.ey:before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--orange);
}
.ma-h2 {
    max-width: 26ch;
    color: inherit;
    font-size: clamp(1.625rem, 3vw, 1.875rem); /* 30px */
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.025em;
}

/* grey closing phrase, same device as "From complexity to clarity." */
.ma em { font-style: normal; font-weight: inherit; color: var(--ma-soft); }

.ma-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ma-orange-light);
    font-family: 'Manrope', 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ma-eyebrow::before,
.ma-eyebrow::after { content: ''; width: 30px; height: 2px; background: var(--ma-orange); }

/* ---------- buttons (square, like .service-btn) ---------- */

.ma-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border: 1px solid #fff;
    color: #fff;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: transform .3s ease, background .3s ease, border-color .3s ease;
}

.ma-btn svg,
.ma-cta-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s var(--ma-ease);
}
.ma-btn:hover svg,
.ma-cta-btn:hover svg { transform: translateX(5px); }
.ma-btn:hover { transform: translateY(-3px); background: var(--ma-orange-hover); border-color: var(--ma-orange-hover); }
.ma-btn--ghost { background: transparent; }
.ma a:focus-visible { outline: 2px solid var(--ma-orange-light); outline-offset: 4px; }
/* ==========================================================================
   HERO (centered; phones rise from the bottom edge and are cropped by it)
   ========================================================================== */

.ma-hero {
    position: relative;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(circle at 80% 20%, rgba(242, 105, 28, .16), transparent 34%),
        radial-gradient(circle at 12% 85%, rgba(255, 255, 255, .05), transparent 30%),
        linear-gradient(160deg, var(--ma-teal-2) 0%, var(--ma-teal) 100%);
    overflow: hidden;
}

.ma-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 70px 70px;
    -webkit-mask-image: radial-gradient(60% 60% at 50% 35%, #000, transparent 80%);
            mask-image: radial-gradient(60% 60% at 50% 35%, #000, transparent 80%);
    pointer-events: none;
}

.ma-hero-text { position: relative; z-index: 4; }

.ma-h1 {
    margin-top: 20px;
    color: #fff;
    font-size: clamp(2.1rem, 4.6vw, 3.25rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.03em;
}

.ma-line { display: block; overflow: hidden; padding-bottom: .1em; }

.ma-line > span {
    display: block;
    transform: translateY(115%);
    animation: ma-line-up 1s var(--ma-ease) forwards;
    animation-delay: calc(.12s + var(--i, 0) * .14s);
}

.ma-lead {
    margin: 18px auto 0;
    color: var(--ma-muted-dark);
    font-size: 1rem;
}

.ma-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }

.ma-fade { opacity: 0; transform: translateY(14px); animation: ma-fade .9s var(--ma-ease) forwards; animation-delay: var(--d, 0s); }

/* ---------- device fan (em-based, scales with viewport) ---------- */
.ma-devices {
    position: relative;
    z-index: 2;
    width: 100%;
    /* max-width: 1100px; */
    height: 30em;
    /* margin: clamp(28px, 4vw, 48px) auto 0; */
    font-size: 10px;
    overflow: hidden;
}
.ma-phone {
    position: absolute;
    top: 0;
    width: 22em;
    aspect-ratio: 22 / 45;
    padding: .8em;
    border-radius: 3.4em;
    background: linear-gradient(160deg, #324047, #131c22);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .12),
        inset 0 0 0 1px rgba(255, 255, 255, .06),
        0 4em 8em -2em rgba(0, 0, 0, .8);
    opacity: 0;
    animation: ma-rise 1.1s var(--ma-ease) forwards;
}

.ma-phone--c {
    left: calc(50% - 11em);
    z-index: 3;
    animation: ma-rise 1.1s var(--ma-ease) .5s forwards, ma-bob 7s ease-in-out 1.8s infinite alternate;
}

.ma-phone--l { left: calc(50% - 27em); top: 6em; width: 19em; z-index: 1; rotate: -7deg; animation-delay: .75s; filter: saturate(.85); }
.ma-phone--r { left: calc(50% + 8em);  top: 6em; width: 19em; z-index: 1; rotate: 7deg;  animation-delay: .75s; filter: saturate(.85); }

.ma-notch {
    position: absolute;
    top: 1.5em;
    left: 50%;
    z-index: 5;
    width: 6em;
    height: 1.6em;
    transform: translateX(-50%);
    border-radius: 1em;
    background: #05080f;
}

.ma-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.4em;
    height: 100%;
    padding: 1.1em 1.5em 1.4em;
    border-radius: 2.6em;
    background: linear-gradient(180deg, #16262a 0%, #101c1f 100%);
    overflow: hidden;
}

.ma-status { display: flex; justify-content: space-between; align-items: center; padding: 0 .3em; color: #d6dde0; font-size: 1.05em; font-weight: 700; }
.ma-status i { width: 1.4em; height: .8em; border-radius: .4em; background: #d6dde0; opacity: .8; }

.ma-app-head { display: flex; align-items: center; justify-content: space-between; margin-top: .4em; }
.ma-app-head small { display: block; color: var(--ma-muted-dark); font-size: 1em; line-height: 1.3; }
.ma-app-head strong { display: block; color: #fff; font-size: 1.9em; font-weight: 700; line-height: 1.2; }
.ma-avatar { width: 3em; height: 3em; border-radius: 50%; background: linear-gradient(135deg, var(--ma-orange-light), var(--ma-orange)); }

.ma-app-card {
    padding: 1.4em;
    border-radius: 1.8em;
    background: linear-gradient(145deg, #f2691c, #c4470b);
    box-shadow: 0 1.6em 3em -1.4em rgba(242, 105, 28, .8);
}

.ma-app-card > span { color: rgba(255, 255, 255, .92); font-size: 1.05em; font-weight: 700; }

.ma-bars { display: flex; align-items: flex-end; gap: .7em; height: 8em; margin-top: 1.2em; }

.ma-bars i {
    flex: 1;
    height: var(--h);
    border-radius: .5em;
    background: rgba(255, 255, 255, .9);
    transform: scaleY(0);
    transform-origin: bottom;
    animation: ma-grow .9s var(--ma-ease) forwards;
    animation-delay: calc(1.2s + var(--i, 0) * .07s);
}

.ma-bars i:nth-child(odd) { background: rgba(255, 255, 255, .45); }

.ma-rows { display: flex; flex-direction: column; gap: 1.1em; }
.ma-rows li { display: flex; align-items: center; gap: 1em; }
.ma-row-ico { width: 3.2em; height: 3.2em; flex: none; border-radius: 1em; background: rgba(242, 105, 28, .25); }
.ma-rows li:nth-child(2) .ma-row-ico { background: rgba(255, 255, 255, .1); }
.ma-rows li:nth-child(3) .ma-row-ico { background: rgba(95, 143, 150, .4); }
.ma-row-text { flex: 1; display: flex; flex-direction: column; gap: .6em; }
.ma-row-text b { height: .8em; border-radius: 1em; background: rgba(255, 255, 255, .22); }
.ma-row-text b + b { width: 60%; background: rgba(255, 255, 255, .1); }
.ma-rows em { width: 3.4em; height: 1.5em; border-radius: 1em; background: rgba(242, 105, 28, .35); }

.ma-tabbar { display: flex; justify-content: space-around; align-items: center; margin-top: auto; padding: 1.1em 0 .2em; border-top: 1px solid var(--ma-line-dark); }
.ma-tabbar i { width: 1.6em; height: 1.6em; border-radius: .5em; background: rgba(255, 255, 255, .18); }
.ma-tabbar i.on { background: var(--ma-orange); }

.ma-lines { display: flex; flex-direction: column; gap: 1em; }
.ma-lines i { height: 1em; border-radius: 1em; background: rgba(255, 255, 255, .16); }
.ma-lines i:nth-child(2) { width: 75%; }
.ma-lines i:nth-child(3) { width: 50%; }
.ma-pill-bar { width: 40%; height: .5em; margin: auto auto 0; border-radius: 1em; background: rgba(255, 255, 255, .25); }

.ma-ring {
    display: grid;
    place-items: center;
    width: 11em;
    height: 11em;
    margin: 2.4em auto 0;
    border-radius: 50%;
    background: conic-gradient(var(--ma-orange) 0 68%, rgba(255, 255, 255, .08) 0);
}

.ma-ring span { width: 8em; height: 8em; border-radius: 50%; background: #101c1f; }

.ma-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .7em; margin-top: 1.6em; }
.ma-cal i { aspect-ratio: 1; border-radius: .6em; background: rgba(255, 255, 255, .09); }
.ma-cal i.on { background: var(--ma-orange); }

/* center phone: three screens crossfade */
.ma-cycle { position: relative; flex: 1; }

.ma-sc {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 1.4em;
    opacity: 0;
    animation: ma-sc 12s linear infinite;
}

.ma-sc--a { animation-delay: 0s; }
.ma-sc--b { animation-delay: -8s; }
.ma-sc--c { animation-delay: -4s; }

.ma-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.ma-tiles i { aspect-ratio: 1; border-radius: 1.4em; background: rgba(242, 105, 28, .28); }
.ma-tiles i:nth-child(2) { background: rgba(255, 255, 255, .1); }
.ma-tiles i:nth-child(3) { background: rgba(95, 143, 150, .4); }
.ma-tiles i:nth-child(4) { background: rgba(242, 105, 28, .6); }

.ma-map {
    position: relative;
    height: 15em;
    border-radius: 1.6em;
    background:
        linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 2.6em 2.6em,
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 2.6em 2.6em,
        #14262b;
    overflow: hidden;
}
.ma-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ma-route { fill: none; stroke: var(--ma-orange); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: ma-route 4s ease-in-out infinite; }
.ma-pin { position: absolute; right: 8%; top: 18%; width: 1.4em; height: 1.4em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .6em rgba(242, 105, 28, .4); }
.ma-toast {
    position: absolute;
    top: 5.4em;
    left: 50%;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: .8em;
    padding: .9em 1.5em;
    border-radius: 2em;
    background: rgba(255, 255, 255, .97);
    color: var(--ma-ink);
    font-size: 1.05em;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -1.5em) scale(.92);
    animation: ma-toast 5.5s var(--ma-ease) 2.6s forwards;
    box-shadow: 0 1.2em 2.4em -.8em rgba(0, 0, 0, .6);
}
.ma-toast span { width: .8em; height: .8em; border-radius: 50%; background: #22c55e; }
/* floating feature badges */
.ma-badge {
    position: absolute;
    z-index: 4;
    padding: .7em 1.4em;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 2em;
    background: rgba(27, 45, 48, .8);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    color: #fff;
    font-size: 1.3em;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    animation: ma-fade 1s var(--ma-ease) forwards, ma-float 6s ease-in-out infinite alternate;
}
.ma-badge::before { content: ''; display: inline-block; width: .6em; height: .6em; margin-right: .7em; border-radius: 50%; background: var(--ma-orange); }
.ma-badge--1 { left: 2%;  top: 7em;  animation-delay: 1.4s, 1.4s; }
.ma-badge--2 { right: 1%; top: 3em;  animation-delay: 1.6s, 2.2s; }
.ma-badge--3 { right: 6%; top: 19em; animation-delay: 1.8s, .8s; }
/* INTRO (light): big statement, words light up on scroll */
.ma-intro-title { max-width: 24ch; }
.ma-statement {
    color: var(--ma-ink);
    line-height: 1.45;
    letter-spacing: -.01em;
}
.ma-statement strong { font-weight: 700; }
/* before JS splits the words the text stays fully visible; once split it dims */
.ma-statement.is-split .ma-w { color: rgba(20, 32, 31, .17); transition: color .35s; }
.ma-statement.is-split .ma-w.on { color: var(--ma-ink); }
.ma-statement.is-split strong .ma-w.on { color: var(--ma-orange); }
.ma-intro-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 6vw, 90px);
    /* margin-top: clamp(36px, 5vw, 60px); */
    padding-top: 30px;
    border-top: 1px solid var(--ma-line-light);
}

.ma-intro-cols p { max-width: 52ch; color: var(--ma-muted); font-size: 1rem; }
.ma-intro-cols strong { color: var(--ma-ink); font-weight: 700; }

/* ==========================================================================
   CAPABILITIES (grey): cards stack as you scroll
   ========================================================================== */

.ma-caps-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(32px, 6vw, 90px);
    align-items: start;
}

.ma-caps-head { position: sticky; top: 130px; }
.ma-caps-note { margin-top: 24px; color: var(--ma-muted); }

.ma-pile { display: flex; flex-direction: column; gap: 26px; padding-bottom: 40px; }

.ma-card {
    position: sticky;
    top: calc(120px + var(--i) * 22px);
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 24px;
    align-items: center;
    min-height: 240px;
    padding:12px;
    border: 1px solid #e1e5e4;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(18, 24, 32, .07), 0 -22px 36px -28px rgba(18, 24, 32, .25);
}

.ma-card-index {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--ma-orange);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: .06em;
}

.ma-card h3 { margin-bottom: 12px; color: var(--ma-ink); font-size: 1.25rem; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.ma-card p { color: var(--ma-muted); font-size: 1rem; }

.ma-card-art {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    border: 1px solid #efe6db;
    border-radius: 14px;
    background: radial-gradient(70% 70% at 50% 40%, rgba(242, 105, 28, .14), transparent 75%), #fbf7f2;
}

.ma-card-art svg {
    width: 78%;
    fill: none;
    stroke: var(--ma-orange);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==========================================================================
   JOURNEY (sand with grid): sticky phone follows the step in view
   ========================================================================== */

.ma-journey-sec { border-block: 1px solid #dcddd6; }

.ma-journey { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 7vw, 110px); margin-top: clamp(24px, 4vw, 56px); }

.ma-journey-phone { position: sticky; top: 90px; align-self: start; height: calc(100vh - 120px); min-height: 520px; display: grid; place-items: center; }

.ma-phone--j {
    position: relative;
    top: auto;
    left: auto;
    width: clamp(220px, 20vw, 270px);
    opacity: 1;
    animation: none;
    font-size: clamp(10px, .95vw, 12.2px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 3em 5em -2em rgba(10, 16, 32, .55);
}

.ma-phone--j .ma-screen { gap: 1.2em; padding-top: 3.4em; }

.ma-js-screen {
    position: absolute;
    inset: 3.4em 1.5em 1.5em;
    display: flex;
    flex-direction: column;
    gap: 1.2em;
    opacity: 0;
    transform: translateY(1.2em) scale(.98);
    transition: opacity .6s var(--ma-ease), transform .6s var(--ma-ease);
    pointer-events: none;
}

[data-step="1"] .ma-js-screen--1,
[data-step="2"] .ma-js-screen--2,
[data-step="3"] .ma-js-screen--3,
[data-step="4"] .ma-js-screen--4 { opacity: 1; transform: none; }

/* step 1: wireframe */
.ma-js-tag {
    align-self: flex-start;
    padding: .5em 1.2em;
    border: 1px dashed rgba(255, 145, 72, .8);
    border-radius: 2em;
    color: var(--ma-orange-light);
    font-size: 1.05em;
    font-weight: 700;
}

.ma-wire { border: 1.5px dashed rgba(255, 255, 255, .28); border-radius: 1em; }
.ma-wire--bar { height: 2.6em; }
.ma-wire--hero { height: 10em; }
.ma-wire-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.ma-wire-row .ma-wire { height: 6em; }

/* step 2: designed UI */
.ma-swatches { display: flex; gap: .8em; }
.ma-swatches i { width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--ma-orange); }
.ma-swatches i:nth-child(2) { background: var(--ma-orange-light); }
.ma-swatches i:nth-child(3) { background: #5f8f96; }
.ma-swatches i:nth-child(4) { background: #fff; }
.ma-bars--static i { transform: none; animation: none; }

/* step 3: build */
.ma-code { display: flex; flex-direction: column; gap: .9em; padding: 1.4em; border-radius: 1.4em; background: rgba(255, 255, 255, .05); }
.ma-code i { width: var(--w); height: .8em; border-radius: 1em; background: rgba(242, 105, 28, .7); }
.ma-code i:nth-child(even) { background: rgba(255, 255, 255, .25); }

.ma-checks { display: flex; flex-direction: column; gap: .9em; }
.ma-checks li { display: flex; align-items: center; gap: .9em; padding: .9em 1.2em; border-radius: 1.1em; background: rgba(255, 255, 255, .07); color: #fff; font-size: 1.1em; font-weight: 700; }
.ma-checks li::before { content: ''; width: 1em; height: .55em; margin-top: -.2em; border-left: .2em solid var(--ma-orange-light); border-bottom: .2em solid var(--ma-orange-light); transform: rotate(-45deg) scale(0); transition: transform .4s var(--ma-ease); }
[data-step="3"] .ma-js-screen--3 li::before,
[data-step="4"] .ma-js-screen--4 li::before { transform: rotate(-45deg) scale(1); }
[data-step="3"] .ma-js-screen--3 li:nth-child(2)::before { transition-delay: .2s; }
[data-step="3"] .ma-js-screen--3 li:nth-child(3)::before { transition-delay: .4s; }
.ma-checks--row { flex-direction: row; }
.ma-checks--row li { flex: 1; justify-content: center; }

/* step 4: release */
.ma-js-screen--4 { align-items: center; justify-content: center; text-align: center; }
.ma-icon-big { display: grid; place-items: center; width: 8em; height: 8em; border-radius: 2.2em; background: linear-gradient(145deg, var(--ma-orange-light), var(--ma-orange)); box-shadow: 0 1.6em 3em -1em rgba(242, 105, 28, .8); }
.ma-icon-big svg { width: 4em; height: 4em; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ma-js-screen--4 strong { color: #fff; font-size: 1.5em; font-weight: 700; }
.ma-progress { width: 100%; height: .7em; border-radius: 1em; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ma-progress i { display: block; height: 100%; width: 0; border-radius: 1em; background: linear-gradient(90deg, var(--ma-orange), var(--ma-orange-light)); transition: width 1.2s var(--ma-ease) .3s; }
[data-step="4"] .ma-progress i { width: 100%; }

/* steps column */
.ma-jsteps { display: flex; flex-direction: column; }

.ma-jstep {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 45vh;
    opacity: .3;
    transition: opacity .5s;
}

.ma-jstep.is-active { opacity: 1; }

.ma-jnum {
    margin-bottom: 18px;
    font-size: clamp(2.5rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.03em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(20, 32, 31, .3);
    transition: -webkit-text-stroke-color .5s, color .5s;
}

.ma-jstep.is-active .ma-jnum { -webkit-text-stroke-color: var(--ma-orange); color: rgba(242, 105, 28, .08); }

.ma-jstep h3 { margin-bottom: 14px; color: var(--ma-ink); font-size: 1.375rem; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.ma-jstep p { max-width: 40ch; color: var(--ma-muted); font-size: 1rem; }

/* ==========================================================================
   TECH (dark teal, dotted, vignette): pill marquee
   ========================================================================== */

.ma-tech {
    --ma-soft: #8fa3a6;
    position: relative;
    color: #fff;
    background-color: var(--ma-teal-2);
    background-image: radial-gradient(#101827 1px, #273f44 1.2px);
    background-size: 22px 22px;
    overflow: hidden;
}

.ma-tech::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, #0b0e13 100%);
    pointer-events: none;
}

.ma-tech > *:not(.ma-sr) { position: relative; z-index: 1; }

.ma-tech-head { text-align: center; }
.ma-tech .ma-h2 { max-width: none; }

.ma-marquee {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: clamp(40px, 5vw, 72px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.ma-track { display: flex; width: max-content; animation: ma-run 42s linear infinite; }
.ma-track--1 { animation-direction: reverse; animation-duration: 48s; }
.ma-marquee:hover .ma-track { animation-play-state: paused; }

.ma-run { display: flex; flex: none; gap: 16px; padding-right: 16px; }

.ma-run li {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 26px 14px 20px;
    border-radius: 999px;
    background: rgba(160, 178, 182, .5);
    color: rgba(20, 32, 31, .78);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: background .3s, color .3s;
}

/* small glyph before each name, like the logo marks on the site */
.ma-run li::before {
    content: '';
    width: 20px;
    height: 20px;
    flex: none;
    border: 3px solid currentColor;
    border-radius: 7px;
}

.ma-run li:nth-child(even)::before { border-radius: 50%; }
.ma-run li:nth-child(3n)::before { border-radius: 4px 12px; }

.ma-run li.is-fill { background: #f3f4f4; color: var(--ma-ink); }
.ma-run li:hover { background: #fff; color: var(--ma-orange); }

/* CTA (teal band, same as the other service pages) */
.ma-cta-sec {
    --ma-soft: #8fa3a6;
    background: var(--ma-teal);
    color: #fff;
}
.ma-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 48px; }
.ma-cta-copy { flex: 1 1 480px; }
.ma-cta .ma-h2 { max-width: 24ch; }
.ma-cta-copy p { max-width: 46ch; margin-top: 16px; color: #aeb8c8; font-size: 1rem; }
.ma-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 30px;
    border: 1px solid #fff;
    background: linear-gradient(var(--ma-orange), var(--ma-orange)) no-repeat left center / 0% 100%;
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background-size .5s var(--ma-ease), border-color .4s;
}
.ma-cta-btn:hover { background-size: 100% 100%; border-color: var(--ma-orange); }
/* REVEAL (active only after JS adds .ma-js)*/

.ma-js [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s var(--ma-ease) var(--d, 0s), transform .8s var(--ma-ease) var(--d, 0s);
}
.ma-js [data-reveal].is-in { opacity: 1; transform: none; }
/* the CTA button keeps its own hover transition once revealed */
.ma-js .ma-cta-btn.is-in { transition: opacity .8s var(--ma-ease) var(--d, 0s), background-size .5s var(--ma-ease), border-color .4s; }
/* KEYFRAMES */
@keyframes ma-line-up { to { transform: translateY(0); } }
@keyframes ma-fade    { to { opacity: 1; transform: none; } }
@keyframes ma-rise    { from { opacity: 0; transform: translateY(8em); } to { opacity: 1; transform: translateY(0); } }
@keyframes ma-grow    { to { transform: scaleY(1); } }
@keyframes ma-bob     { from { translate: 0 -.8em; } to { translate: 0 .8em; } }
@keyframes ma-float   { from { transform: translateY(-.7em); } to { transform: translateY(.7em); } }
@keyframes ma-run     { to { transform: translateX(-50%); } }
@keyframes ma-route   { 0% { stroke-dashoffset: 260; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes ma-sc {
    0%        { opacity: 0; }
    6%, 30%   { opacity: 1; }
    38%, 100% { opacity: 0; }
}

@keyframes ma-toast {
    0%   { opacity: 0; transform: translate(-50%, -1.5em) scale(.92); }
    10%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
    85%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -1em) scale(.96); }
}
/* RESPONSIVE */
@media (max-width: 900px) {
    .ma-intro-cols { grid-template-columns: 1fr; }
    .ma-caps-grid { grid-template-columns: 1fr; }
    .ma-caps-head { position: static; }
    .ma-caps-note { display: none; }
    .ma-journey { grid-template-columns: 1fr; }
    .ma-journey-phone { display: none; }
    .ma-jstep { min-height: 0; opacity: 1; padding: 34px 0; border-top: 1px solid #d6d8d0; }
    .ma-jnum { font-size: 2.5rem; }
}
@media (max-width: 640px) {
    .ma-wrap { width: min(1280px, 100% - 30px); }
    .ma-card { position: relative; top: auto; grid-template-columns: 1fr; }
    .ma-card-art { aspect-ratio: 16 / 9; }
    .ma-actions { flex-direction: column; align-items: stretch; }
    .ma-badge--1 { top: 4em; }
    .ma-badge--3 { display: none; }
    .ma-cta { gap: 32px; }
    .ma-cta-btn { width: 100%; justify-content: center; }
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    .ma *,
    .ma *::before,
    .ma *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }

    .ma-sc--a { opacity: 1; animation: none; }
    .ma-route { stroke-dashoffset: 0; }
    .ma-js [data-reveal] { opacity: 1; transform: none; }
    .ma-track { animation: none; flex-wrap: wrap; width: auto; }
}