/* ============================================================
   Workflow Improvement page — reuses the Get Started design
   system (.gs-page). Page accent = the workflow green.
   ============================================================ */

/* Self-hosted (like Grift/Jeffesta) so the notepad handwriting
   doesn't depend on Google Fonts resolving in every context. */
@font-face {
    font-family: 'Covered By Your Grace';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/CoveredByYourGrace.woff2') format('woff2');
}
.wf-page {
    --gs-accent: #34d399;
    --gs-accent-dark: #059669;   /* two shades darker (button hover) */

    /* Industry colour coding — theme colours first, complementary additions after. */
    --ind-legal: #38bdf8;        /* theme blue */
    --ind-real-estate: #fbbf24;  /* theme amber */
    --ind-accounting: #34d399;   /* theme green */
    --ind-healthcare: #a78bfa;   /* theme light purple */
    --ind-professional: #7c6cf5; /* theme core purple */
    --ind-trades: #fb923c;       /* added: orange */
    --ind-retail: #f472b6;       /* added: pink */
    --ind-hospitality: #2dd4bf;  /* added: teal */
}

/* Coloured-button hover label is handled globally in get-started.css
   (label darkens to a deep shade of the accent — applies to the green here too). */

/* ---- Hero ---- */
.wf-hero {
    min-height: 72vh;
    align-items: center;
    background:
        radial-gradient(900px 520px at 50% -10%, rgba(52, 211, 153, 0.14), transparent 60%),
        var(--gs-bg);
}
.wf-hero .gs-hero__actions { justify-content: center; }
.wf-hero .gs-hero__sub { margin-inline: auto; }

/* Circular green gradient, centred in the hero, half cut off by the section bottom. */
.wf-hero__glow {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);   /* centre on the bottom edge -> half visible */
    width: min(720px, 85vw);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(52, 211, 153, 0.28) 0%,
        rgba(52, 211, 153, 0.10) 45%,
        transparent 70%);
    z-index: 0;
    pointer-events: none;
}

/* Hero title colour-block fill: flat fields of three greens with clean,
   hard-edged boundaries (a diagonal + an arc) cutting through the letters.
   The boundaries glide with the cursor while it's inside the hero. */
.wf-hero .gs-hero__title { position: relative; }
.wf-hero .gs-hero__title::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background:
        /* theme green (the DARKEST shade used) — small diagonal block, lower left */
        linear-gradient(115deg,
            #34d399 0%, #34d399 var(--b1, 22%), rgba(52, 211, 153, 0) var(--b1, 22%)),
        /* mint arc dipping in from the top */
        radial-gradient(circle 300px at var(--c1, 30%) -180px,
            #6ee7b7 0% 62%, rgba(110, 231, 183, 0) 62%),
        /* light green blob rising from the bottom right */
        radial-gradient(circle 260px at var(--c2, 78%) 130%,
            #a7f3d0 0% 58%, rgba(167, 243, 208, 0) 58%),
        /* mint slice on the far right edge */
        linear-gradient(-65deg,
            #6ee7b7 0%, #6ee7b7 12%, rgba(110, 231, 183, 0) 12%),
        /* palest green base */
        linear-gradient(#d1fae5, #d1fae5);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.wf-hero.is-spot .gs-hero__title::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .wf-hero .gs-hero__title::after { display: none; }
}

/* ---- "Do any of these look familiar?" — workflow idea pills ----
   Full-bleed rows; each pill + trailing line slides in from a screen edge
   (5 left, 5 right, alternating), staggered, when the section scrolls in. */
/* Keep the whole flyout section within 70vh; rows distribute to fill. */
.wf-ideas {
    padding-block: clamp(3rem, 7vh, 5rem) clamp(2rem, 5vh, 4rem);
}
.wf-flow {
    width: 100vw;
    margin-left: calc(50% - 50vw);   /* break out of the container, full-bleed */
    margin-top: clamp(1.5rem, 4vh, 2.5rem);
    overflow: hidden;                /* clip the off-screen start positions */
    display: flex;
    flex-direction: column;
    gap: clamp(0.6rem, 1.6vh, 1.1rem);   /* natural row spacing (section grows to fit) */
}
.wf-pill {
    display: flex;
    align-items: center;
    width: 100%;
    opacity: 0;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
    transition-delay: var(--d, 0s);
    will-change: transform, opacity;
}
.wf-pill--left  { justify-content: flex-start; transform: translateX(-100%); }
.wf-pill--right { justify-content: flex-end;   transform: translateX(100%); }
/* Workflow-icon cursor while hovering a pill. */
.wf-pill { cursor: url('/static/images/workflow-cursor.svg') 16 16, pointer; }
.wf-flow.is-in .wf-pill { opacity: 1; transform: translateX(0); }

.wf-pill__line {
    /* Line runs from the screen edge to 50px past centre, so the pill's inner
       edge rests 50px beyond the centre line (left pills right of it, right pills left of it). */
    flex: 0 0 calc(50% + 50px);
    height: 2px;
    background: rgba(52, 211, 153, 0.12);   /* same colour + opacity as the pill */
    border-radius: 2px;
}
.wf-pill__label {
    position: relative;
    flex: 0 0 auto;
    background: rgba(52, 211, 153, 0.12);
    color: var(--gs-text);
    padding: 0.38rem 1rem;
    border-radius: var(--gs-radius-pill);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: clamp(0.82rem, 1.3vw, 1rem);
    white-space: nowrap;
    transition: transform 0.15s ease, background 0.15s ease;
}

/* Detail panel (revealed on hover) — absolute so it never reflows the rows. */
.wf-pill__detail {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: max(100%, 280px);
    padding: 0.6rem 0.85rem;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-top: 2px solid var(--gs-accent);
    border-radius: var(--gs-radius-sm);
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.45;
    color: var(--gs-text-dim);
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    pointer-events: none;
    box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.8);
    z-index: 6;
}
.wf-pill--right .wf-pill__detail { left: auto; right: 0; }

/* Hover: dim the others; expand + reveal detail on the hovered pill.
   Override the staggered entrance delay/duration so the hover is snappy. */
.wf-flow:hover .wf-pill { opacity: 0.25; transition-delay: 0s; transition-duration: 0.15s; }
.wf-flow .wf-pill:hover { opacity: 1; position: relative; z-index: 6; transition-delay: 0s; transition-duration: 0.15s; }
.wf-pill:hover .wf-pill__label {
    transform: scale(1.06);
    background: rgba(52, 211, 153, 0.22);
}
.wf-pill:hover .wf-pill__detail {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .wf-pill__label,
    .wf-pill__detail { transition: none; }
    .wf-pill:hover .wf-pill__label { transform: none; }
}
@media (max-width: 600px) {
    .wf-pill__line { flex-basis: 8%; }
    .wf-pill__label { font-size: 0.8rem; padding: 0.5rem 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .wf-pill { transition: none; opacity: 1; transform: none; }
}

/* ---- Equation row — "You say" types in, "We build" assembles X + Y = result ---- */
.wf-eq {
    padding-block: clamp(3rem, 6vw, 4.5rem);
    background: var(--gs-bg-alt);   /* a step lighter than the page, to bound the row */
}
.wf-eq__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gs-4);
    align-items: center;
}
@media (min-width: 900px) {
    .wf-eq__layout { grid-template-columns: 0.9fr 1.1fr; gap: var(--gs-6); }
}

.wf-eq__label {
    display: block;
    margin-bottom: 0.7rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gs-text-faint);
}

/* Left — the typed request. */
.wf-eq__ask,
.wf-eq__calc { transition: opacity 0.4s ease; }
.wf-eq__ask.is-leaving,
.wf-eq__calc.is-leaving { opacity: 0; }
.wf-eq__text {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.45;
    color: var(--gs-text);
    margin: 0;
    min-height: calc(2 * 1.45em);   /* reserve two lines so the row doesn't jump */
}
.wf-eq__caret {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-left: 3px;
    vertical-align: text-bottom;
    background: var(--gs-accent);
    animation: wf-eq-caret 1s steps(1) infinite;
}
@keyframes wf-eq-caret { 50% { opacity: 0; } }

/* Right — tiles, operators, result pane. */
.wf-eq__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
}
.wf-eq__tile {
    width: 54px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: 14px;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wf-eq__tile.is-on { opacity: 1; transform: scale(1); }
.wf-eq__tile.is-hidden { display: none; }
.wf-eq__logo {
    width: 52%;
    height: 52%;
    background: var(--gs-text-dim);
    -webkit-mask: var(--logo) center / contain no-repeat;
            mask: var(--logo) center / contain no-repeat;
}
.wf-eq__op {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gs-accent);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.wf-eq__op.is-on { opacity: 1; transform: none; }
.wf-eq__op.is-hidden { display: none; }
.wf-eq__op--eq { font-size: 1.8rem; }

/* The mock result, in the card-mock visual language. */
.wf-eq__out {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 190px;
    padding: 0.7rem;
    background: var(--gs-surface-2);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-sm);
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.wf-eq__out.is-on { opacity: 1; transform: none; }
.wf-eq__chip {
    align-self: flex-start;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gs-text-faint);
    border: 1px solid var(--gs-border-strong);
    border-radius: var(--gs-radius-pill);
    padding: 0.14rem 0.45rem;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.wf-eq__out.is-on .wf-eq__chip:not(.is-done) { animation: wf-eq-working 1.1s ease-in-out infinite; }
.wf-eq__chip.is-done {
    color: var(--gs-accent);
    border-color: var(--gs-accent);
    animation: none;
}
@keyframes wf-eq-working { 50% { opacity: 0.35; } }
.wf-eq__bar {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.14);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.wf-eq__bar--1 { width: 85%; }
.wf-eq__bar--2 { width: 62%; }
.wf-eq__bar--3 { width: 74%; }
.wf-eq__bar.is-on { transform: scaleX(1); }
.wf-eq__total {
    height: 6px;
    width: 55%;
    align-self: flex-end;
    border-radius: 3px;
    background: var(--gs-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.wf-eq__total.is-on { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
    .wf-eq__caret { display: none; }
    .wf-eq__ask,
    .wf-eq__calc,
    .wf-eq__tile,
    .wf-eq__op,
    .wf-eq__out,
    .wf-eq__chip,
    .wf-eq__bar,
    .wf-eq__total { transition: none; animation: none; }
}

/* ---- Pills section hidden (kept for now) ---- */
.wf-ideas { display: none; }

/* ---- Connect your tools — constellation ---- */
/* Overflow stays visible so the top constellation tiles can peek above the
   hero fold; the glow clips its own top half instead (clip-path below). */
.wf-connect {
    position: relative;
    padding-block-start: clamp(2.5rem, 5vw, 4rem);   /* slimmer top so the stage rides the fold */
}
.wf-connect .gs-container { position: relative; z-index: 1; }

/* Same green circular gradient as the hero, centred on the section's TOP edge. */
.wf-con__glow {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    width: min(720px, 85vw);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(52, 211, 153, 0.28) 0%,
        rgba(52, 211, 153, 0.10) 45%,
        transparent 70%);
    clip-path: inset(50% 0 0 0);   /* keep only the half below the fold */
    z-index: 0;
    pointer-events: none;
}

.wf-con__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gs-5);
}
@media (min-width: 900px) {
    .wf-con__layout {
        grid-template-columns: 0.9fr 1.1fr;
        gap: var(--gs-6);
        align-items: center;
    }
}

/* The constellation canvas. Node positions come from --x/--y per node. */
.wf-con__stage {
    position: relative;
    height: clamp(420px, 58vh, 600px);
}
.wf-con__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.wf-con__line {
    stroke: rgba(52, 211, 153, 0.16);
    stroke-width: 1.5;
    transition: stroke 0.2s ease, opacity 0.2s ease;
}
.wf-con__line.is-active { stroke: var(--gs-accent); }
.wf-con__pulse {
    fill: var(--gs-accent);
    filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.9));
}

/* Central hub: green core + expanding ring. */
.wf-con__hub {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gs-accent);
    box-shadow: 0 0 24px rgba(52, 211, 153, 0.8);
}
.wf-con__hub::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid rgba(52, 211, 153, 0.5);
    animation: wf-hub-ring 2.4s ease-out infinite;
}
@keyframes wf-hub-ring {
    from { transform: scale(0.6); opacity: 1; }
    to   { transform: scale(1.8); opacity: 0; }
}

/* Tool nodes — dark tiles; logo rendered via mask so we control its colour. */
.wf-con__node {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    width: clamp(46px, 4.5vw, 60px);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: 14px;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.wf-con__logo {
    width: 52%;
    height: 52%;
    background: var(--gs-text-dim);
    -webkit-mask: var(--logo) center / contain no-repeat;
            mask: var(--logo) center / contain no-repeat;
    transition: background 0.2s ease;
    animation: wf-con-float 6s ease-in-out infinite alternate;
}
.wf-con__node:nth-child(odd) .wf-con__logo  { animation-delay: -2s; }
.wf-con__node:nth-child(3n) .wf-con__logo   { animation-delay: -4s; }
@keyframes wf-con-float {
    from { transform: translateY(-2px); }
    to   { transform: translateY(2px); }
}

.wf-con__node.is-glow,
.wf-con__node.is-active {
    border-color: var(--gs-accent);
    box-shadow: 0 0 18px rgba(52, 211, 153, 0.45);
}
.wf-con__node.is-glow .wf-con__logo,
.wf-con__node.is-active .wf-con__logo { background: var(--gs-accent); }

/* Hovering one tool dims the rest (same pattern as the industry cards). */
.wf-con__stage.is-focused .wf-con__node:not(.is-active) { opacity: 0.25; }
.wf-con__stage.is-focused .wf-con__line:not(.is-active) { opacity: 0.3; }

/* Caption pill near the hub. */
.wf-con__caption {
    position: absolute;
    left: 50%;
    top: calc(50% + 32px);
    transform: translateX(-50%);
    margin: 0;
    padding: 0.4rem 0.85rem;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border-strong);
    border-radius: var(--gs-radius-pill);
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gs-text);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 2;
}
.wf-con__caption.is-visible { opacity: 1; }

/* CTA under the intro copy, scrolls to the industry section. */
.wf-con__cta { margin-top: var(--gs-4); }

/* ---- Tangle -> clean line (left-column visual aid) ----
   workflow.js extends each strand's path to the window's left edge inside the
   one svg. A single LINEAR clip-path wipe reveals the whole drawing left to
   right: one wavefront, GPU-composited (no per-stroke repaints), and the
   green node/line physically can't appear before the wipe reaches them. */
.wf-tangle-wrap {
    position: relative;
    margin-top: var(--gs-4);
}
.wf-tangle {
    display: block;
    width: min(100%, 400px);   /* pre-JS fallback; workflow.js sizes it exactly */
    clip-path: inset(-12% 100% -12% 0);   /* hidden; opens left -> right */
    will-change: clip-path;
    transition: clip-path 1.6s linear;
}
.wf-tangle-wrap.is-drawn .wf-tangle { clip-path: inset(-12% 0 -12% 0); }

.wf-tangle__strand {
    fill: none;
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 1.5;
    stroke-linecap: round;
}
.wf-tangle__out {
    fill: none;
    stroke: var(--gs-accent);
    stroke-width: 2;
    stroke-linecap: round;
}
.wf-tangle__node {
    fill: var(--gs-accent);
    filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.8));
}

/* Repeating pulse travelling the exit line once the wipe lands. */
.wf-tangle__pulse {
    fill: none;
    stroke: var(--gs-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 10 146;     /* one dash per 156px path */
    opacity: 0;
    transition: opacity 0.3s ease 1.7s;
}
.wf-tangle-wrap.is-drawn .wf-tangle__pulse {
    opacity: 0.9;
    animation: wf-tangle-pulse 2.2s linear infinite;
    animation-delay: 1.75s;
}
@keyframes wf-tangle-pulse {
    from { stroke-dashoffset: 156; }
    to   { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .wf-tangle,
    .wf-tangle__pulse { transition: none; }
    .wf-tangle-wrap.is-drawn .wf-tangle__pulse { animation: none; opacity: 0; }
}

/* Mobile: collapse to a tidy logo grid — no lines, hub, or captions. */
@media (max-width: 899px) {
    .wf-con__stage {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.8rem;
    }
    .wf-con__lines,
    .wf-con__hub,
    .wf-con__caption { display: none; }
    .wf-con__node { position: static; transform: none; width: 54px; }
}

@media (prefers-reduced-motion: reduce) {
    .wf-con__hub::after { animation: none; }
    .wf-con__logo { animation: none; }
    .wf-con__node,
    .wf-con__line,
    .wf-con__caption { transition: none; }
}

/* ---- Benefits — left intro, right vertical auto-slider ----
   (hidden — kept for possible reuse) */
.wf-benefits { display: none; }
.wf-benefits { position: relative; overflow: hidden; }
.wf-benefits .gs-container { position: relative; z-index: 1; }   /* content above the glow */

/* Same green circular gradient as the hero, centred on the section's TOP edge. */
.wf-ben__glow {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);   /* centre on the top edge -> half visible */
    width: min(720px, 85vw);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(52, 211, 153, 0.28) 0%,
        rgba(52, 211, 153, 0.10) 45%,
        transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.wf-ben__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gs-5);
}
@media (min-width: 900px) {
    .wf-ben__layout {
        grid-template-columns: 0.9fr 1.1fr;
        gap: var(--gs-6);
        align-items: center;
    }
}

.wf-ben__viewport {
    position: relative;
    height: clamp(360px, 56vh, 540px);
    overflow: hidden;
    /* Fade the cards in/out at the top and bottom edges. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.wf-ben__track {
    display: flex;
    flex-direction: column;
    animation: wf-ben-scroll 24s linear infinite;
}
.wf-ben__viewport:hover .wf-ben__track { animation-play-state: paused; }
@keyframes wf-ben-scroll {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }   /* one full set (cards are duplicated) */
}

.wf-ben__card {
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-left: 3px solid var(--gs-accent);
    border-radius: var(--gs-radius);
    padding: clamp(1.1rem, 2vw, 1.6rem);
    margin-bottom: var(--gs-3);
}
.wf-ben__tag {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gs-accent);
}
.wf-ben__title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0.3rem 0 0;
}
.wf-ben__desc {
    color: var(--gs-text-dim);
    line-height: 1.5;
    font-size: 0.92rem;
    margin: 0.5rem 0 0;
}
@media (prefers-reduced-motion: reduce) {
    .wf-ben__viewport { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
    .wf-ben__track { animation: none; }
}

/* ---- By industry — filterable card grid ---- */
.wf-industries {
    /* Dark page bg bleeds in from the top AND back out at the bottom, so
       neither seam shows a hard edge against the neighbouring sections. */
    background:
        linear-gradient(to bottom, var(--gs-bg) 0%, rgba(10, 10, 15, 0) 28%),
        linear-gradient(to top, var(--gs-bg) 0%, rgba(10, 10, 15, 0) 24%),
        #0a1c14;   /* dark shade of the workflow green */
    position: relative;
    overflow: hidden;
    scroll-margin-top: 4.5rem;   /* clear the fixed nav on anchor jumps */
    /* Tighter than the default section padding so the header and both
       marquee rows fit a 1080p viewport together. */
    padding-block: clamp(3rem, 7vh, 5rem);
}
.wf-industries .gs-container { max-width: 90vw; position: relative; z-index: 1; }

/* Dark circular gradient (the second section's bg colour) on the top edge. */
.wf-ind__glow {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    width: min(1100px, 130vw);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(10, 10, 15, 1) 0%,
        rgba(10, 10, 15, 0.78) 38%,
        transparent 72%);
    z-index: 0;
    pointer-events: none;
}

/* Top half of the How-section glow (same circle, same colour), centred on the
   bottom edge — together with .wf-how__glow it forms one continuous dome
   across the seam, so there is no hard line between the sections. */
.wf-ind__glow-btm {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    width: min(1100px, 130vw);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgb(17, 50, 35) 0%,
        rgba(17, 50, 35, 0.85) 40%,
        transparent 75%);
    clip-path: inset(0 0 50% 0);   /* keep only the half above the seam */
    z-index: 0;
    pointer-events: none;
}

.wf-ind__layout { margin-top: var(--gs-4); }

/* Industry filter — a centred row of pills on top. */
.wf-ind__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    margin-bottom: var(--gs-4);
}
.wf-ind__link {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-pill);
    color: var(--gs-text-dim);
    font-family: 'Outfit', sans-serif;
    font-size: clamp(0.8rem, 1vw, 0.92rem);
    font-weight: 500;
    padding: 0.4rem 0.95rem;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.wf-ind__link:hover { color: var(--gs-text); border-color: var(--gs-border-strong); }
/* Each industry filter takes its industry colour when active. */
.wf-ind__link[data-industry="legal"]        { --c: var(--ind-legal); }
.wf-ind__link[data-industry="real-estate"]  { --c: var(--ind-real-estate); }
.wf-ind__link[data-industry="accounting"]   { --c: var(--ind-accounting); }
.wf-ind__link[data-industry="healthcare"]   { --c: var(--ind-healthcare); }
.wf-ind__link[data-industry="professional"] { --c: var(--ind-professional); }
.wf-ind__link[data-industry="trades"]       { --c: var(--ind-trades); }
.wf-ind__link[data-industry="retail"]       { --c: var(--ind-retail); }
.wf-ind__link[data-industry="hospitality"]  { --c: var(--ind-hospitality); }
.wf-ind__link { --c: var(--gs-accent); position: relative; }   /* "all" + fallback */
.wf-ind__link.is-active {
    color: var(--c);
    border-color: var(--c);
    background: color-mix(in srgb, var(--c) 14%, transparent);
}

/* Small animated nodes rising off the active industry link. */
.wf-ind__link.is-active::before,
.wf-ind__link.is-active::after {
    content: "";
    position: absolute;
    top: -7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 6px var(--c);
    animation: wf-nav-node 2.6s ease-in-out infinite;
}
.wf-ind__link.is-active::before { left: 30%; }
.wf-ind__link.is-active::after {
    left: 62%;
    width: 4px;
    height: 4px;
    animation-duration: 3.1s;
    animation-delay: -1.4s;
}
@keyframes wf-nav-node {
    0%   { opacity: 0; transform: translateY(3px) scale(0.6); }
    35%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-11px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .wf-ind__link.is-active::before,
    .wf-ind__link.is-active::after { animation: none; }   /* static marker dots */
}

/* Square-ish cards, up to 4 across. */
.wf-ind__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gs-3);
}
@media (min-width: 700px)  { .wf-ind__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .wf-ind__grid { grid-template-columns: repeat(4, 1fr); } }

.wf-card {
    display: flex;
    flex-direction: column;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-top: 3px solid var(--gs-accent);
    border-radius: var(--gs-radius);
    padding: clamp(1rem, 1.6vw, 1.35rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.wf-card.is-dimmed { opacity: 0.22; }
.wf-card__tag {
    display: inline-block;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gs-accent);
}
.wf-card__title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(0.98rem, 1.4vw, 1.18rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0.35rem 0 0;
}
.wf-card__desc {
    color: var(--gs-text-dim);
    line-height: 1.5;
    font-size: 0.82rem;
    margin: 0.5rem 0 0;
}
.wf-card__pills {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: var(--gs-2) 0 0;   /* sit just under the description */
    padding: 0;
}
.wf-card__pills li {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--gs-text-dim);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-pill);
    padding: 0.18rem 0.5rem;
}
@media (prefers-reduced-motion: reduce) {
    .wf-card { transition: none; }
}

/* ---- Industry cards v2 — colour-coded, animated mock, tool logos ----
   Cards ride three full-bleed marquee rows (engine in workflow.js):
   alternating directions, hover pauses, cursor left/right scrubs. */
.wf-mq {
    width: 100vw;
    margin-left: calc(50% - 50vw);   /* break out of the 90vw container */
    overflow: hidden;
    padding-block: 6px;              /* room for the card hover lift */
}
.wf-mq + .wf-mq { margin-top: var(--gs-2); }
.wf-mq__track {
    display: flex;
    gap: var(--gs-3);
    width: max-content;
    will-change: transform;
}
.wf-mq__track .wf-card2 { flex: none; }

/* No marquee on touch/small screens or reduced motion (JS gates the engine):
   rows fall back to native horizontal scrolling. */
@media (max-width: 767px) {
    .wf-mq { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (prefers-reduced-motion: reduce) {
    .wf-mq { overflow-x: auto; }
}

.wf-card2 {
    --c: var(--gs-accent);
    width: 270px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-top: 3px solid var(--c);
    border-radius: var(--gs-radius);
    overflow: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.wf-card2:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--c) 55%, var(--gs-border));
}
.wf-card2.is-dimmed { opacity: 0.22; }

/* Mock viewport: enquiry pane -> travelling dot -> quote pane (7s loop). */
.wf-card2__mock {
    display: flex;
    align-items: stretch;
    gap: 0.45rem;
    padding: 0.65rem;
    background: rgba(0, 0, 0, 0.35);
    border-bottom: 1px solid var(--gs-border);
}
.wf-mock__pane {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.55rem;
    background: var(--gs-surface-2);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-sm);
    min-height: 88px;
}
.wf-mock__chip {
    align-self: flex-start;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gs-text-faint);
    border: 1px solid var(--gs-border-strong);
    border-radius: var(--gs-radius-pill);
    padding: 0.14rem 0.45rem;
    animation: wfm-pop 7s ease infinite both;
}
.wf-mock__chip--accent {
    color: var(--c);
    border-color: var(--c);
    animation-name: wfm-pop-late;
}
.wf-mock__line {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.14);
    transform-origin: left;
    animation: wfm-line 7s ease infinite both;
}
.wf-mock__pane > .wf-mock__line:nth-child(3) { animation-delay: 0.15s; }
.wf-mock__pane > .wf-mock__line:nth-child(4) { animation-delay: 0.3s; }
.wf-mock__line--w80 { width: 80%; }
.wf-mock__line--w60 { width: 60%; }
.wf-mock__line--w70 { width: 70%; }

.wf-mock__flow {
    position: relative;
    flex: 0 0 22px;
    align-self: center;
    height: 2px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--c) 30%, transparent);
}
.wf-mock__dot {
    position: absolute;
    top: 50%;
    margin-top: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 8px var(--c);
    left: 4%;
    opacity: 0;
    animation: wfm-dot 7s linear infinite;
}

.wf-mock__row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    animation: wfm-row 7s ease infinite both;
}
.wf-mock__pane > .wf-mock__row:nth-child(3) { animation-delay: 0.18s; }
.wf-mock__pane > .wf-mock__row:nth-child(4) { animation-delay: 0.36s; }
.wf-mock__row i {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.14);
}
.wf-mock__row b {
    width: 20px;
    height: 5px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--c) 60%, transparent);
}
.wf-mock__total {
    height: 6px;
    width: 58%;
    align-self: flex-end;
    border-radius: 4px;
    background: var(--c);
    transform-origin: left;
    animation: wfm-total 7s ease infinite both;
}

/* The story: enquiry types in -> pulse crosses -> quote builds -> total lands,
   hold, then everything fades together and the loop restarts. */
@keyframes wfm-pop {
    0%, 1% { opacity: 0; transform: translateY(4px); }
    4%     { opacity: 1; transform: none; }
    82%    { opacity: 1; }
    90%, 100% { opacity: 0; }
}
@keyframes wfm-pop-late {
    0%, 33% { opacity: 0; transform: translateY(4px); }
    37%     { opacity: 1; transform: none; }
    82%     { opacity: 1; }
    90%, 100% { opacity: 0; }
}
@keyframes wfm-line {
    0%, 4% { transform: scaleX(0); opacity: 0; }
    8%     { transform: scaleX(1); opacity: 1; }
    82%    { opacity: 1; }
    90%, 100% { opacity: 0; }
}
@keyframes wfm-dot {
    0%, 14% { left: 4%; opacity: 0; }
    17%     { opacity: 1; }
    30%     { left: calc(100% - 9px); opacity: 1; }
    33%, 100% { left: calc(100% - 9px); opacity: 0; }
}
@keyframes wfm-row {
    0%, 38% { opacity: 0; transform: translateY(5px); }
    43%     { opacity: 1; transform: none; }
    82%     { opacity: 1; }
    90%, 100% { opacity: 0; }
}
@keyframes wfm-total {
    0%, 52% { transform: scaleX(0); opacity: 0; }
    60%     { transform: scaleX(1); opacity: 1; }
    82%     { opacity: 1; }
    90%, 100% { opacity: 0; }
}

/* Body + footer */
.wf-card2__body { padding: 0.8rem 0.85rem 0.3rem; }
.wf-card2__tag {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c);
}
.wf-card2__title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0.35rem 0 0;
}
.wf-card2__desc {
    color: var(--gs-text-dim);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0.45rem 0 0;
}
.wf-card2__foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem 0.8rem;
    margin-top: auto;
}
.wf-card2__with {
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gs-text-faint);
}
.wf-card2__logos {
    list-style: none;
    display: flex;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
}
.wf-card2__logos li {
    width: 13px;
    height: 13px;
    background: var(--gs-text-faint);
    -webkit-mask: var(--logo) center / contain no-repeat;
            mask: var(--logo) center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
    .wf-card2 { transition: none; }
    .wf-card2:hover { transform: none; }
    /* Mock elements default to their finished state; just stop the loop. */
    .wf-card2__mock .wf-mock__chip,
    .wf-card2__mock .wf-mock__line,
    .wf-card2__mock .wf-mock__dot,
    .wf-card2__mock .wf-mock__row,
    .wf-card2__mock .wf-mock__total { animation: none; }
}

/* ---- How it works — three steps ---- */
.wf-steps {
    list-style: none;
    margin: var(--gs-5) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gs-3);
}
@media (min-width: 768px) {
    .wf-steps { grid-template-columns: repeat(3, 1fr); }
}
.wf-steps li {
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-top: 3px solid var(--gs-accent);
    border-radius: var(--gs-radius);
    padding: clamp(1.5rem, 3vw, 2.2rem);
}
.wf-steps__num {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--gs-accent);
}
.wf-steps h3 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0.4rem 0 0;
}
.wf-steps p {
    color: var(--gs-text-dim);
    line-height: 1.6;
    margin: var(--gs-2) 0 0;
}

/* ---- How it works v2 — notepad + 3D step carousel ---- */
.wf-how { position: relative; overflow: hidden; }
.wf-how .gs-container { position: relative; z-index: 1; }

/* Blurred circle in the industry section's dark green, centred on the top
   edge — the section above bleeds down into this one. */
.wf-how__glow {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    width: min(1100px, 130vw);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgb(17, 50, 35) 0%,
        rgba(17, 50, 35, 0.85) 40%,
        transparent 75%);
    z-index: 0;
    pointer-events: none;
}

.wf-how2__container { max-width: 90vw; }

.wf-how2__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gs-5);
    margin-top: var(--gs-5);
}
@media (min-width: 900px) {
    .wf-how2__layout {
        grid-template-columns: 1fr 1.1fr;
        gap: var(--gs-6);
        align-items: center;
    }
}

/* The notepad: handwriting on faint rules; lines "write" in left-to-right. */
.wf-pad {
    position: relative;          /* anchors the margin doodles */
    justify-self: center;
    width: min(100%, 460px);
    padding: 0.5rem 0.25rem;
    /* faint ruled lines, one per text line */
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0 calc(2.6rem - 1px),
        rgba(255, 255, 255, 0.06) calc(2.6rem - 1px) 2.6rem);
}
.wf-pad__line {
    position: relative;
    margin: 0;
    font-family: 'Covered By Your Grace', cursive;
    font-size: 2rem;
    font-weight: 400;
    line-height: 2.6rem;
    color: rgba(255, 255, 255, 0.85);
    clip-path: inset(-20% 100% -20% 0);   /* hidden; wipes open like writing */
    transition: clip-path 0.7s ease var(--d, 0s);
}
.wf-pad.is-writing .wf-pad__line { clip-path: inset(-20% -5% -20% 0); }
.wf-pad__line:nth-child(2) { transform: rotate(-0.6deg); }
.wf-pad__line:nth-child(3) { transform: rotate(0.4deg); }
.wf-pad__line:nth-child(5) { transform: rotate(-0.4deg); }
.wf-pad__line em {
    font-style: normal;
    color: var(--gs-accent);
}
.wf-pad__line--big {
    margin-top: 0.8rem;
    font-size: 2.9rem;
    font-weight: 400;
    line-height: 1.15;
    color: var(--gs-accent);
    transform: rotate(-1.2deg);
}
.wf-pad__circle-wrap {
    position: relative;
    display: inline-block;
    padding: 0.4rem 1rem;
}

/* Sketch marks (underline / circle / arrow) draw in via dashoffset. */
.wf-pad__mark {
    overflow: visible;
    pointer-events: none;
}
.wf-pad :is(.wf-pad__mark, .wf-pad__doodle) :is(path, ellipse) {
    fill: none;
    stroke: var(--gs-accent);
    stroke-width: 2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: var(--len, 600);
    stroke-dashoffset: var(--len, 600);
    transition: stroke-dashoffset 0.6s ease var(--d, 0s);
}
.wf-pad__doodle :is(path, ellipse) {
    stroke: rgba(255, 255, 255, 0.42);   /* pen-grey, quieter than the accent marks */
    stroke-width: 1.6;
}
.wf-pad.is-writing :is(.wf-pad__mark, .wf-pad__doodle) :is(path, ellipse) { stroke-dashoffset: 0; }

/* Margin doodles — sketched workflows flanking the written list. */
.wf-pad__doodle {
    position: absolute;
    overflow: visible;
    pointer-events: none;
}
.wf-pad__doodle--flow { left: -110px; top: 4%; width: 105px; }
.wf-pad__doodle--hub  { right: -125px; bottom: 8%; width: 120px; }
@media (max-width: 1299px) {
    .wf-pad__doodle { display: none; }   /* no margin room at narrower widths */
}
.wf-pad__mark--underline {
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 86px;
    height: 8px;
}
.wf-pad__mark--underline path { stroke: rgba(255, 255, 255, 0.55); }
.wf-pad__mark--circle {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.wf-pad__mark--arrow {
    position: absolute;
    right: -76px;
    top: 50%;
    width: 70px;
    height: 44px;
    transform: translateY(-50%) rotate(-8deg);
}
@media (max-width: 1100px) {
    .wf-pad__mark--arrow { display: none; }   /* nothing to its right to point at */
}

/* 3D circular carousel — borderless mini-sections billboarded on a ring. */
.wf-orbit3d__stage {
    position: relative;
    height: clamp(380px, 48vh, 500px);
    perspective: 1200px;
}
.wf-step3d {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(530px, 92%);
    transform: translate(-50%, -50%)
               rotateY(var(--theta, 0deg))
               translateZ(330px)
               rotateY(calc(-1 * var(--theta, 0deg)));
    opacity: 0.14;
    filter: blur(1.5px);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.8s ease, filter 0.8s ease;
}
.wf-step3d.is-active { opacity: 1; filter: none; }
.wf-step3d__num {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(5rem, 7vw, 6.7rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--gs-accent);
    opacity: 0.26;
}
.wf-step3d__title {
    position: relative;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.7rem, 2.7vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: -2.9rem 0 0 3.6rem;   /* heading overlaps the big number */
}
.wf-step3d__desc {
    color: var(--gs-text-dim);
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0.9rem 0 0 3.6rem;
    max-width: 40ch;
}
.wf-orbit3d__dots {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: var(--gs-2);
}
.wf-orbit3d__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--gs-border-strong);
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.wf-orbit3d__dot:hover { border-color: var(--gs-accent); }
.wf-orbit3d__dot.is-active {
    background: var(--gs-accent);
    border-color: var(--gs-accent);
    transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
    .wf-pad__line,
    .wf-pad__mark path,
    .wf-pad__doodle path,
    .wf-pad__doodle ellipse,
    .wf-step3d,
    .wf-orbit3d__dot { transition: none; }
}

/* ---- Proof — Friend & Dobson case study ---- */
.wf-proof { background: var(--gs-bg-alt); }

.wf-cs {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gs-5);
    align-items: center;
    margin-top: clamp(4rem, 9vh, 6.5rem);
    /* revealed on scroll-in (workflow.js adds .is-in) */
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.wf-cs.is-in { opacity: 1; transform: none; }
@media (min-width: 900px) {
    .wf-cs {
        grid-template-columns: 0.8fr 1.2fr;
        gap: var(--gs-6);
    }
}

/* Portrait with an offset accent frame, ambient glow, and the firm badge. */
.wf-cs__media {
    position: relative;
    margin: 0;
    justify-self: center;
    width: min(100%, 380px);
}
.wf-cs__media::before {
    content: "";
    position: absolute;
    inset: 14px -14px -14px 14px;   /* offset frame, lower right */
    border: 1px solid rgba(52, 211, 153, 0.35);
    border-radius: var(--gs-radius);
    pointer-events: none;
}
.wf-cs__media > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--gs-radius);
    border: 1px solid var(--gs-border-strong);
    box-shadow: 0 30px 80px -30px rgba(52, 211, 153, 0.25);
}
.wf-cs__badge {
    position: absolute;
    left: -16px;
    bottom: 22px;
    padding: 0.55rem 0.9rem;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border-strong);
    border-radius: var(--gs-radius-sm);
    box-shadow: 0 14px 36px -18px rgba(0, 0, 0, 0.85);
}
.wf-cs__badge img {
    display: block;
    width: 150px;
    height: auto;
    filter: brightness(0) invert(1);   /* slate wordmark -> white for dark bg */
    opacity: 0.92;
}

/* Quote with an oversized green mark. */
.wf-cs__body { position: relative; }
.wf-cs__mark {
    position: absolute;
    top: -3.2rem;
    left: -0.6rem;
    font-family: 'Outfit', sans-serif;
    font-size: 7rem;
    font-weight: 800;
    line-height: 1;
    color: var(--gs-accent);
    opacity: 0.25;
    pointer-events: none;
}
.wf-cs__quote {
    margin: 0;
}
.wf-cs__quote p {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--gs-text);
    margin: 0;
    max-width: 24ch;
}
.wf-cs__attr {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: var(--gs-3) 0 0;
}
.wf-cs__attr strong {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: var(--gs-text);
}
.wf-cs__attr span {
    font-size: 0.88rem;
    color: var(--gs-text-dim);
}

/* What we built */
.wf-cs__what {
    margin-top: var(--gs-4);
    padding-left: 1rem;
    border-left: 2px solid var(--gs-accent);
}
.wf-cs__what h3 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gs-accent);
    margin: 0;
}
.wf-cs__what p {
    color: var(--gs-text-dim);
    line-height: 1.6;
    margin: 0.5rem 0 0;
    max-width: 56ch;
}

/* Stats — count up on scroll-in. */
.wf-cs__stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin: var(--gs-4) 0 0;
    padding-top: var(--gs-3);
    border-top: 1px solid var(--gs-border);
}
.wf-cs__num {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--gs-accent);
    margin: 0;
}
.wf-cs__label {
    font-size: 0.82rem;
    color: var(--gs-text-dim);
    margin-top: 0.15rem;
}
.wf-proof .gs-btn { margin-top: var(--gs-4); }

@media (max-width: 600px) {
    .wf-cs__stats { grid-template-columns: 1fr; gap: var(--gs-2); }
    .wf-cs__badge { left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .wf-cs { transition: none; opacity: 1; transform: none; }
}