/* ==========================================================
   Shared service-page styles (the wdd* classes are the shared components)
   Used by web-design-development.html and contact.html (+ css/contact-page.css); see RECORD-BOOK.md
   Type scale matches the rest of the site (css/preset.css):
   headings Jost 500 #343c55 (section titles 40px), body Open Sans 18px/28px #5e6371,
   eyebrows 18px uppercase with wide letter-spacing.
   Colours: brand violet / pink, logo teal (#4cdaa0 -> #359fad) and logo charcoal.
   Motion: transform / opacity only, switched off for reduced motion.
   ========================================================== */

:root {
    --wdd-ink: #343c55;
    --wdd-body: #5e6371;
    --wdd-muted: #868b9b;
    --wdd-line: #e9eaf2;
    --wdd-soft: #f7f6fc;
    --wdd-violet: #5b3fd0;
    --wdd-pink: #d9265f;
    --wdd-pink-dark: #c21a52;
    --wdd-teal: #0c8a72;
    --wdd-teal-2: #0b6f80;
    --wdd-mint: #4cdaa0;
    --wdd-charcoal: #22242e;
    --wdd-night: #10132a;
    --wdd-gutter: clamp(16px, 4vw, 40px);
    --wdd-ease: cubic-bezier(.2, .7, .2, 1);
    --wdd-heading: 'Jost', sans-serif;
    --wdd-text: 'Open Sans', sans-serif;
}

/* Shared content width: banner, hero and every section line up */
.wddWrap {
    width: min(1320px, calc(100% - 2 * var(--wdd-gutter)));
    margin-inline: auto;
}

#wdd-services,
#wdd-portfolio,
#wdd-why,
#wdd-industries,
#wdd-process,
#enquiry,
#faq {
    scroll-margin-top: 90px;
}

/* Accent tones (icon tiles, hover edges, spotlight) */
.wddTone--violet,
.wddFeature--violet {
    --tint: #f0ebff;
    --accent: #5b3fd0;
    --edge: #d8ccff;
    --glow: rgba(91, 63, 208, .35);
}

.wddTone--pink,
.wddFeature--pink {
    --tint: #ffebf1;
    --accent: #e0336b;
    --edge: #fac6d6;
    --glow: rgba(224, 51, 107, .3);
}

.wddTone--coral,
.wddFeature--coral {
    --tint: #fff0e6;
    --accent: #ea6a1f;
    --edge: #fbd2b6;
    --glow: rgba(234, 106, 31, .3);
}

.wddTone--sky,
.wddFeature--sky {
    --tint: #e8f5fd;
    --accent: #1586c9;
    --edge: #bfe2f6;
    --glow: rgba(21, 134, 201, .3);
}

.wddTone--green,
.wddFeature--green {
    --tint: #e3f6f1;
    --accent: #0c8a72;
    --edge: #b5e6da;
    --glow: rgba(12, 138, 114, .3);
}

.wddTone--amber,
.wddFeature--amber {
    --tint: #fff6df;
    --accent: #d88a06;
    --edge: #f7deaa;
    --glow: rgba(216, 138, 6, .3);
}

.wddFill {
    fill: currentColor !important;
    stroke: none !important;
}

/* ---------- Shared type (site scale) ---------- */

.wddEyebrow {
    margin: 0 0 14px;
    font-family: var(--wdd-heading);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 4.5px;
    text-transform: uppercase;
    color: var(--wdd-pink);
}

.wddContent h1,
.wddHead h2,
.wddProcessHead h2,
.wddEnquiry h2 {
    margin: 0 0 14px;
    font-family: var(--wdd-heading);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--wdd-ink);
}

.wddHead p:not(.wddEyebrow),
.wddProcessHead p:not(.wddEyebrow),
.wddEnquiryLead {
    margin: 0;
    font-family: var(--wdd-text);
    font-size: 16px;
    line-height: 26px;
    color: var(--wdd-body);
}

/* ---------- Hero ---------- */

.wddIntro {
    position: relative;
    padding: 56px 0 32px;
    background:
        radial-gradient(900px 480px at 18% 30%, rgba(124, 92, 214, .07), transparent 70%),
        linear-gradient(180deg, #fbfaff 0%, #fff 100%);
    overflow: hidden;
}

.wddIntroInner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    align-items: stretch;
    gap: clamp(32px, 3.6vw, 64px);
}

/* Left: the hero image fills the whole column (tilts gently with the mouse via --px/--py) */
.wddVisual {
    --px: 0;
    --py: 0;
    position: relative;
    min-height: 460px;
}

.wddVisualFrame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 24px;
    background: #f4f1ff;
    box-shadow: 0 40px 80px -44px rgba(40, 26, 110, .45), 0 0 0 1px rgba(91, 63, 208, .07);
    transform: perspective(1400px) rotateX(calc(var(--py) * -2.5deg)) rotateY(calc(var(--px) * 3.5deg));
    transition: transform .6s var(--wdd-ease);
}

.wddVisualFrame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

/* Floating highlight cards: float on their own, drift with the mouse (translate) */
.wddFloat {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 12px;
    border: 1px solid rgba(15, 20, 48, .06);
    border-radius: 16px;
    background: rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px -18px rgba(40, 26, 110, .32), 0 2px 6px rgba(15, 20, 48, .05);
    font-family: var(--wdd-heading);
    translate: calc(var(--px) * var(--depth, 10px)) calc(var(--py) * var(--depth, 10px));
    transition: translate .6s var(--wdd-ease);
    animation: wddFloat 7s ease-in-out infinite alternate;
}

.wddFloat strong {
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--wdd-ink);
}

.wddFloat small {
    display: block;
    margin-top: 2px;
    font-family: var(--wdd-text);
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--wdd-muted);
}

.wddFloatIcon {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--tint);
    color: var(--accent);
}

.wddFloatIcon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wddFloat--design {
    --tint: #ffeaf1;
    --accent: #e0336b;
    --depth: -14px;
    top: 28px;
    left: -26px;
}

.wddFloat--speed {
    --tint: #e3f6f1;
    --accent: #0c8a72;
    --depth: 16px;
    top: 46%;
    right: -26px;
    animation-delay: -2.5s;
}

.wddFloat--speed svg {
    fill: currentColor;
    stroke-width: 1.5;
}

.wddFloat--secure {
    --tint: #efeaff;
    --accent: #5b3fd0;
    --depth: 12px;
    bottom: 36px;
    left: -26px;
    animation-delay: -5s;
}

@keyframes wddFloat {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-8px);
    }
}

/* Right: content */
.wddContent {
    container-type: inline-size;
    align-self: center;
}

.wddContent h1 {
    margin-bottom: 18px;
    line-height: 1.2;
}

.wddLead {
    margin: 0 0 28px;
    font-family: var(--wdd-text);
    font-size: 17px;
    line-height: 28px;
    color: var(--wdd-body);
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.wddLead strong {
    font-weight: 600;
    color: var(--wdd-ink);
}

/* Feature grid: 2 columns x 3 rows, filled column by column */
.wddFeatures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 12px 14px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.wddFeature {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 12px 16px 12px 12px;
    border: 1px solid var(--wdd-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 20, 48, .04);
    font-family: var(--wdd-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--wdd-ink);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.wddFeature:hover {
    border-color: var(--edge);
    box-shadow: 0 12px 28px -16px var(--glow);
    transform: translateY(-2px);
}

.wddFeatureIcon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--tint);
    color: var(--accent);
    transition: transform .35s var(--wdd-ease);
}

.wddFeature:hover .wddFeatureIcon {
    transform: rotate(-8deg) scale(1.08);
}

.wddFeatureIcon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Buttons ---------- */

.wddBtn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    height: 54px;
    padding: 0 18px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    font-family: var(--wdd-heading);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease, translate .3s var(--wdd-ease);
}

.wddBtn svg {
    position: relative;
    flex: none;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wddBtn .wddBtnFill {
    fill: currentColor;
    stroke: none;
}

.wddBtn .wddBtnArrow {
    width: 16px;
    height: 16px;
    transition: transform .25s ease;
}

.wddBtn:hover .wddBtnArrow {
    transform: translateX(3px);
}

.wddBtn:hover {
    transform: translateY(-1px);
}

.wddBtn:focus-visible {
    outline: 3px solid rgba(91, 63, 208, .35);
    outline-offset: 2px;
}

/* Light sweep across filled buttons on hover */
.wddBtn--primary::after,
.wddBtn--whatsapp::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent);
    transform: skewX(-20deg);
    transition: left .7s ease;
    pointer-events: none;
}

.wddBtn--primary:hover::after,
.wddBtn--whatsapp:hover::after {
    left: 130%;
}

.wddBtn--primary {
    background: linear-gradient(135deg, #f9577c 0%, #f9758f 100%);
    color: #fff;
    box-shadow: 0 6px 18px -6px rgba(249, 87, 124, .32);
}

.wddBtn--primary:hover,
.wddBtn--primary:focus-visible {
    background: linear-gradient(135deg, #ea4269 0%, #f85f7c 100%);
    color: #fff;
    box-shadow: 0 10px 22px -6px rgba(249, 87, 124, .42);
}

/* WhatsApp: deep logo teal, white text */
.wddBtn--whatsapp {
    background: linear-gradient(135deg, var(--wdd-teal) 0%, var(--wdd-teal-2) 100%);
    color: #fff;
    box-shadow: 0 6px 18px -6px rgba(11, 111, 128, .28);
}

.wddBtn--whatsapp:hover,
.wddBtn--whatsapp:focus-visible {
    background: linear-gradient(135deg, #0a7864 0%, #095d6b 100%);
    color: #fff;
    box-shadow: 0 10px 22px -6px rgba(9, 93, 107, .38);
}

/* View Our Work / Call: logo charcoal outline, fills on hover */
.wddBtn--work {
    border-color: var(--wdd-charcoal);
    background: #fff;
    color: var(--wdd-charcoal);
}

.wddBtn--work:hover,
.wddBtn--work:focus-visible {
    border-color: var(--wdd-charcoal);
    background: var(--wdd-charcoal);
    color: #fff;
}

/* Hero CTAs: one row whenever the column can hold it (sized by the column, not the screen) */
.wddCtas {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}

@container (max-width: 679px) {
    .wddCtas {
        gap: 8px;
    }

    .wddCtas .wddBtn {
        padding: 0 12px;
        gap: 7px;
        font-size: 15px;
    }

    .wddCtas .wddBtn svg {
        width: 18px;
        height: 18px;
    }

    .wddCtas .wddBtn--work .wddBtnArrow {
        display: none;
    }
}

@container (max-width: 599px) {
    .wddCtas .wddBtn {
        padding: 0 10px;
        gap: 6px;
        font-size: 14px;
    }
}

@container (max-width: 539px) {
    .wddCtas {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
    }

    .wddCtas .wddBtn--primary {
        grid-column: 1 / -1;
    }

    .wddCtas .wddBtn {
        height: 52px;
    }
}

@container (max-width: 400px) {
    .wddCtas .wddBtn {
        padding: 0 8px;
        gap: 6px;
        font-size: 14px;
    }
}

@container (max-width: 339px) {
    .wddCtas {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Proof line under the CTAs */
.wddProof {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--wdd-text);
    font-size: 15px;
    line-height: 1.4;
    color: var(--wdd-body);
}

.wddProof li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wddProof li::before,
.wddWhyPoints li::before {
    content: '';
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e3f6f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c8a72' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* ---------- Sections (shared) ---------- */

.wddSection {
    padding: 72px 0;
    font-family: var(--wdd-heading);
}

.wddHead {
    max-width: 860px;
    margin: 0 auto 36px;
    text-align: center;
}

.wddStep a,
.wddQ p a {
    color: var(--wdd-violet);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(91, 63, 208, .35);
    text-underline-offset: 3px;
}

.wddStep a:hover,
.wddQ p a:hover {
    color: var(--wdd-pink);
    text-decoration-color: currentColor;
}

/* Cursor spotlight on cards (--mx/--my set by the page script on mouse devices) */
[data-spot] {
    --mx: 50%;
    --my: 0%;
}

[data-spot]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(240px circle at var(--mx) var(--my), var(--spot), transparent 70%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

[data-spot]:hover::after {
    opacity: 1;
}

/* ---------- Services ---------- */

.wddServices {
    padding: 48px 0 40px;
    background: #fff;
}

.wddServiceGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.wddService {
    --spot: var(--tint);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border: 1px solid var(--wdd-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 20, 48, .04);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.wddService:hover {
    border-color: var(--edge);
    box-shadow: 0 18px 38px -22px var(--glow);
    transform: translateY(-3px);
}

.wddIcon {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--tint);
    color: var(--accent);
    transition: transform .4s var(--wdd-ease);
}

.wddService:hover .wddIcon {
    transform: rotate(-8deg) scale(1.08);
}

.wddIcon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wddService h3 {
    margin: 0 0 4px;
    font-family: var(--wdd-heading);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--wdd-ink);
}

.wddService p {
    margin: 0;
    font-family: var(--wdd-text);
    font-size: 15px;
    line-height: 1.5;
    color: var(--wdd-body);
}

/* Platforms & technologies: one sliding row of logos */
.wddStack {
    margin-top: 40px;
}

.wddStackLabel {
    margin: 0 0 16px;
    text-align: center;
    font-family: var(--wdd-heading);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--wdd-muted);
}

/* ---------- Sliding strips (platform logos, industries) ----------
   The page script duplicates the items and adds .is-ready; without it the list simply wraps. */
.wddMarquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.wddMarqueeTrack {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 4px 0;
    list-style: none;
}

.wddMarquee.is-ready .wddMarqueeTrack {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    animation: wddMarquee var(--speed, 40s) linear infinite;
}

.wddMarquee--reverse.is-ready .wddMarqueeTrack {
    animation-direction: reverse;
}

.wddMarquee:hover .wddMarqueeTrack {
    animation-play-state: paused;
}

@keyframes wddMarquee {
    to {
        transform: translateX(calc(-50% - 6px));
    }
}

.wddLogos li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 10px 14px;
    border: 1px solid var(--wdd-line);
    border-radius: 999px;
    background: #fff;
    font-family: var(--wdd-heading);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: var(--wdd-ink);
    white-space: nowrap;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.wddLogos li:hover {
    border-color: #d9dbe6;
    box-shadow: 0 10px 22px -16px rgba(15, 20, 48, .35);
}

.wddLogos svg {
    flex: none;
    width: 26px;
    height: 26px;
}

.wddChips li {
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--chip);
    font-family: var(--wdd-heading);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    color: #1f2433;
    white-space: nowrap;
}

/* Industry chip colours (were inline styles). One colour per position; the copies the marquee script
   adds (items 26-50) repeat the same colours, hence 25n. */
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+1) { --chip: #b3e5fc; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+2) { --chip: #c8e6c9; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+3) { --chip: #fff9c4; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+4) { --chip: #ffe0b2; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+5) { --chip: #f8bbd0; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+6) { --chip: #d1c4e9; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+7) { --chip: #ffccbc; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+8) { --chip: #cfd8dc; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+9) { --chip: #b2dfdb; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+10) { --chip: #bbdefb; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+11) { --chip: #f0f4c3; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+12) { --chip: #fff59d; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+13) { --chip: #e1bee7; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+14) { --chip: #ffecb3; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+15) { --chip: #ffccff; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+16) { --chip: #b0bec5; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+17) { --chip: #ffcdd2; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+18) { --chip: #fce4ec; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+19) { --chip: #dcedc8; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+20) { --chip: #e0f7fa; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+21) { --chip: #d7ccc8; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+22) { --chip: #c5cae9; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+23) { --chip: #ffab91; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+24) { --chip: #dcedc8; }
.wddMarquee:not(.wddMarquee--reverse) .wddChips li:nth-child(25n+25) { --chip: #e1bee7; }
.wddMarquee--reverse .wddChips li:nth-child(25n+1) { --chip: #b0bec5; }
.wddMarquee--reverse .wddChips li:nth-child(25n+2) { --chip: #fce4ec; }
.wddMarquee--reverse .wddChips li:nth-child(25n+3) { --chip: #a5d6a7; }
.wddMarquee--reverse .wddChips li:nth-child(25n+4) { --chip: #b39ddb; }
.wddMarquee--reverse .wddChips li:nth-child(25n+5) { --chip: #ffe082; }
.wddMarquee--reverse .wddChips li:nth-child(25n+6) { --chip: #80cbc4; }
.wddMarquee--reverse .wddChips li:nth-child(25n+7) { --chip: #90caf9; }
.wddMarquee--reverse .wddChips li:nth-child(25n+8) { --chip: #f48fb1; }
.wddMarquee--reverse .wddChips li:nth-child(25n+9) { --chip: #ce93d8; }
.wddMarquee--reverse .wddChips li:nth-child(25n+10) { --chip: #aed581; }
.wddMarquee--reverse .wddChips li:nth-child(25n+11) { --chip: #ffcc80; }
.wddMarquee--reverse .wddChips li:nth-child(25n+12) { --chip: #b2ebf2; }
.wddMarquee--reverse .wddChips li:nth-child(25n+13) { --chip: #c8e6c9; }
.wddMarquee--reverse .wddChips li:nth-child(25n+14) { --chip: #ffe0b2; }
.wddMarquee--reverse .wddChips li:nth-child(25n+15) { --chip: #f0f4c3; }
.wddMarquee--reverse .wddChips li:nth-child(25n+16) { --chip: #d7ccc8; }
.wddMarquee--reverse .wddChips li:nth-child(25n+17) { --chip: #c5e1a5; }
.wddMarquee--reverse .wddChips li:nth-child(25n+18) { --chip: #ffecb3; }
.wddMarquee--reverse .wddChips li:nth-child(25n+19) { --chip: #e6ee9c; }
.wddMarquee--reverse .wddChips li:nth-child(25n+20) { --chip: #f8bbd0; }
.wddMarquee--reverse .wddChips li:nth-child(25n+21) { --chip: #f48fb1; }
.wddMarquee--reverse .wddChips li:nth-child(25n+22) { --chip: #80deea; }
.wddMarquee--reverse .wddChips li:nth-child(25n+23) { --chip: #d1c4e9; }
.wddMarquee--reverse .wddChips li:nth-child(25n+24) { --chip: #ffab91; }
.wddMarquee--reverse .wddChips li:nth-child(25n+25) { --chip: #ffccbc; }

/* ---------- Portfolio (auto-playing previews) ---------- */

.wddWork {
    padding: 56px 0 72px;
    background: var(--wdd-soft);
}

.wddWorkGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wddWorkItem {
    text-align: center;
}

.wddWorkBox {
    position: relative;
    container-type: size;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 14px;
    background: #efefef;
    box-shadow: 0 10px 25px rgba(15, 20, 48, .08);
    transition: transform .35s var(--wdd-ease), box-shadow .35s ease;
}

.wddWorkBox:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(15, 20, 48, .14);
}

.wddWorkCover {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .6s ease;
}

/* Full-page screenshot, added by the page script only while the section is on screen */
.wddWorkShot {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: auto;
    will-change: transform;
}

.wddWorkBox.is-playing .wddWorkCover {
    opacity: 0;
}

.wddWorkBox.is-running .wddWorkShot {
    animation: wddShot 7.5s cubic-bezier(.45, 0, .55, 1) forwards;
}

@keyframes wddShot {

    0%,
    8% {
        transform: translateY(0);
    }

    92%,
    100% {
        transform: translateY(calc(-100% + 100cqh));
    }
}

.wddWorkLive {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 5px 10px 5px 22px;
    border-radius: 999px;
    background: rgba(16, 19, 42, .8);
    font-family: var(--wdd-heading);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    color: #fff;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}

.wddWorkLive::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 9px;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--wdd-mint);
}

.wddWorkBox.is-playing .wddWorkLive {
    opacity: 1;
    transform: none;
}

.wddWorkBox.is-playing .wddWorkLive::before {
    animation: wddPulse 1.6s ease-out infinite;
}

@keyframes wddPulse {
    from {
        box-shadow: 0 0 0 0 rgba(76, 218, 160, .7);
    }

    to {
        box-shadow: 0 0 0 8px rgba(76, 218, 160, 0);
    }
}

.wddWorkItem h3 {
    margin: 14px 0 2px;
    font-family: var(--wdd-heading);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--wdd-ink);
}

.wddWorkItem p {
    margin: 0;
    font-family: var(--wdd-text);
    font-size: 15px;
    line-height: 1.4;
    color: var(--wdd-muted);
}

/* ---------- Why CoregenX (dark, 4 columns) ---------- */

.wddWhy {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 500px at 88% -10%, rgba(76, 218, 160, .12), transparent 60%),
        radial-gradient(800px 520px at -5% 110%, rgba(91, 63, 208, .32), transparent 60%),
        var(--wdd-night);
}

.wddWhy .wddEyebrow {
    color: var(--wdd-mint);
}

.wddWhy .wddHead h2 {
    margin-bottom: 0;
    color: #fff;
}

.wddWhyStats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wddWhyStat {
    --spot: rgba(76, 218, 160, .16);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 26px 24px 24px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    transition: border-color .3s ease, transform .3s ease, background-color .3s ease;
}

.wddWhyStat:hover {
    border-color: rgba(76, 218, 160, .38);
    background-color: rgba(255, 255, 255, .06);
    transform: translateY(-3px);
}

.wddWhyStat strong {
    display: block;
    margin-bottom: 14px;
    font-family: var(--wdd-heading);
    font-size: 52px;
    font-weight: 600;
    line-height: 1;
    background: linear-gradient(135deg, var(--wdd-mint), #359fad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}

.wddWhyStat h3 {
    margin: 0 0 6px;
    font-family: var(--wdd-heading);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: #fff;
}

.wddWhyStat p {
    margin: 0;
    font-family: var(--wdd-text);
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .74);
}

.wddWhyPoints {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.wddWhyPoints li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px 9px 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    font-family: var(--wdd-heading);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: rgba(255, 255, 255, .92);
}

/* ---------- Industries (compact, two sliding rows) ---------- */

.wddIndustries {
    padding: 64px 0;
    background: #fff;
}

.wddIndustries .wddHead {
    margin-bottom: 28px;
}

.wddIndustryRows {
    display: grid;
    gap: 12px;
}

/* ---------- Process (icons, compact, with CTA) ---------- */

.wddProcess {
    padding: 64px 0;
    background: var(--wdd-soft);
}

.wddProcessHead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 48px;
    margin-bottom: 36px;
}

.wddProcessHead h2 {
    margin-bottom: 10px;
}

.wddProcessHead .wddBtn {
    flex: none;
}

.wddSteps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Track + animated fill running through the step icons */
.wddSteps::before,
.wddSteps::after {
    content: '';
    position: absolute;
    top: 26px;
    left: 27px;
    right: calc(20% - 40px);
    height: 2px;
    border-radius: 2px;
}

.wddSteps::before {
    background: #e3dcfb;
}

.wddSteps::after {
    background: linear-gradient(90deg, var(--wdd-violet), var(--wdd-pink));
    transform-origin: left center;
    transition: transform 1.8s cubic-bezier(.65, 0, .35, 1);
}

.wddStep {
    position: relative;
}

/* Arrow between steps, sitting on the line */
.wddStep:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 21px;
    left: calc(27px + 50% + 2px);
    z-index: 1;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--wdd-violet);
    border-right: 2px solid var(--wdd-violet);
    background: var(--wdd-soft);
    transform: rotate(45deg);
    transition: border-color .4s ease;
}

.wddStepIcon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 2px solid var(--wdd-violet);
    border-radius: 16px;
    background: linear-gradient(135deg, #6a4fe0, var(--wdd-violet));
    color: #fff;
    box-shadow: 0 10px 22px -10px rgba(91, 63, 208, .65);
    transition: background .45s ease, border-color .45s ease, color .45s ease, box-shadow .45s ease, transform .35s var(--wdd-ease);
}

.wddStep:hover .wddStepIcon {
    transform: translateY(-3px) rotate(-6deg);
}

.wddStepIcon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wddStepNo {
    display: block;
    margin: 16px 0 4px;
    font-family: var(--wdd-heading);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--wdd-pink);
}

.wddStep h3 {
    margin: 0 0 6px;
    font-family: var(--wdd-heading);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--wdd-ink);
}

.wddStep p {
    margin: 0;
    font-family: var(--wdd-text);
    font-size: 15px;
    line-height: 1.55;
    color: var(--wdd-body);
}

/* Before the section is reached (script adds .is-armed), steps wait in a quiet state */
.wddSteps.is-armed:not(.is-in)::after {
    transform: scaleX(0);
}

.wddSteps.is-armed:not(.is-in) .wddStepIcon {
    border-color: #e3dcfb;
    background: #fff;
    color: var(--wdd-muted);
    box-shadow: none;
}

.wddSteps.is-armed:not(.is-in) .wddStep:not(:last-child)::after {
    border-color: #d6ccf7;
}

.wddSteps.is-in .wddStep:nth-child(2) .wddStepIcon,
.wddSteps.is-in .wddStep:nth-child(1)::after {
    transition-delay: .35s;
}

.wddSteps.is-in .wddStep:nth-child(3) .wddStepIcon,
.wddSteps.is-in .wddStep:nth-child(2)::after {
    transition-delay: .7s;
}

.wddSteps.is-in .wddStep:nth-child(4) .wddStepIcon,
.wddSteps.is-in .wddStep:nth-child(3)::after {
    transition-delay: 1.05s;
}

.wddSteps.is-in .wddStep:nth-child(5) .wddStepIcon,
.wddSteps.is-in .wddStep:nth-child(4)::after {
    transition-delay: 1.4s;
}

/* Swipe-row motion (tablets and phones): step timer bar and the nudging arrow */
@keyframes wddStepTimer {
    to {
        transform: scaleX(1);
    }
}

@keyframes wddNudge {
    from {
        transform: translateX(-2px);
    }

    to {
        transform: translateX(3px);
    }
}

/* ---------- Dots under swipe rows (added by the page script; shown on tablets and phones) ---------- */

.wddDots {
    display: none;
    justify-content: center;
    margin-top: 2px;
}

.wddDots button {
    display: grid;
    place-items: center;
    width: 24px; /* 24px tap target (accessibility); the dot itself is drawn smaller by ::before */
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.wddDots button::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d3cbf3;
    transition: transform .35s var(--wdd-ease), background-color .35s ease;
}

.wddDots button[aria-current="true"]::before {
    background: var(--wdd-violet);
    transform: scaleX(2.4);
}

.wddDots button:focus-visible {
    outline: 2px solid var(--wdd-violet);
    outline-offset: -2px;
    border-radius: 6px;
}

/* ---------- Enquiry ---------- */

.wddEnquiry {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(700px 420px at 92% 8%, rgba(255, 255, 255, .09), transparent 60%),
        linear-gradient(135deg, #2b1d74 0%, #4430ad 55%, #6247d2 100%);
    color: #fff;
}

.wddEnquiryInner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 32px clamp(32px, 4.5vw, 72px);
}

.wddEnquiry .wddEyebrow {
    color: #ffb3c9;
}

.wddEnquiry h2 {
    color: #fff;
}

.wddEnquiryLead {
    max-width: 46ch;
    color: rgba(255, 255, 255, .84);
}

.wddCallCard {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 30px;
    padding: 14px 26px 14px 14px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 18px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    transition: background-color .25s ease, border-color .25s ease, transform .3s var(--wdd-ease);
}

.wddCallCard:hover,
.wddCallCard:focus-visible {
    border-color: rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .16);
    color: #fff;
    transform: translateY(-2px);
}

.wddCallIcon {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    color: var(--wdd-violet);
}

/* Soft ring that keeps "calling" */
.wddCallIcon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: wddRing 2.4s ease-out infinite;
}

@keyframes wddRing {
    from {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .55);
    }

    to {
        box-shadow: 0 0 0 14px rgba(255, 255, 255, 0);
    }
}

.wddCallIcon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wddCallCard small {
    display: block;
    font-family: var(--wdd-text);
    font-size: 13px;
    line-height: 1.3;
    color: rgba(255, 255, 255, .75);
}

.wddCallCard strong {
    display: block;
    font-family: var(--wdd-heading);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
}

/* Contact-page form, restyled to this page's colours */
.wddFormCard {
    --cgx-primary: #5b3fd0;
    --cgx-border-focus: #5b3fd0;
    position: relative;
    margin: 0;
    color: var(--wdd-body);
    box-shadow: 0 30px 60px -30px rgba(10, 6, 40, .6);
}

/* Brand-gradient ring that spins while the visitor is filling the form */
@property --wdd-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.wddFormCard::before {
    content: '';
    position: absolute;
    inset: -2px;
    padding: 2px;
    border-radius: calc(var(--cgx-radius-lg, 18px) + 2px);
    background: conic-gradient(from var(--wdd-angle), var(--wdd-mint), #359fad, var(--wdd-violet), var(--wdd-pink), var(--wdd-mint));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

.wddFormCard:focus-within::before {
    opacity: 1;
    animation: wddSpin 4s linear infinite;
}

@keyframes wddSpin {
    to {
        --wdd-angle: 360deg;
    }
}

.wddFormTitle {
    margin: 0 0 18px;
    font-family: var(--wdd-heading);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--wdd-ink);
}

.wddFormCard .cgx-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wddFormCard .cgx-submit-btn {
    border-radius: 12px;
    background: linear-gradient(135deg, #f9577c 0%, #f9758f 100%);
    color: #fff;
    font-family: var(--wdd-heading);
    font-weight: 500;
    box-shadow: 0 6px 18px -6px rgba(249, 87, 124, .32);
}

.wddFormCard .cgx-submit-btn:hover {
    background: linear-gradient(135deg, #ea4269 0%, #f85f7c 100%);
    box-shadow: 0 10px 22px -6px rgba(249, 87, 124, .42);
}

.wddFormCard .cgx-captcha-legal a {
    color: inherit;
    text-decoration: underline;
}

/* The reCAPTCHA holder must not take a grid cell; its badge is replaced by the legal line under the button */
#recaptcha-holder {
    position: absolute;
    width: 0;
    height: 0;
}

.grecaptcha-badge {
    visibility: hidden !important;
}

/* ---------- FAQ (two columns) ---------- */

.wddFaq {
    background: #fff;
}

.wddFaqCols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    align-items: start;
}

.wddFaqList {
    display: grid;
    gap: 12px;
}

.wddQ {
    border: 1px solid var(--wdd-line);
    border-radius: 14px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.wddQ:hover {
    border-color: #d8ccff;
}

.wddQ[open] {
    border-color: #d8ccff;
    box-shadow: 0 14px 30px -22px rgba(91, 63, 208, .45);
}

.wddQ summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    list-style: none;
    cursor: pointer;
}

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

.wddQ summary:focus-visible {
    outline: 3px solid rgba(91, 63, 208, .35);
    outline-offset: 2px;
    border-radius: 14px;
}

.wddQ summary h3 {
    margin: 0;
    font-family: var(--wdd-heading);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--wdd-ink);
}

.wddQ summary::after {
    content: '';
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f0ebff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b3fd0' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 13px no-repeat;
    transition: transform .3s var(--wdd-ease), background-color .3s ease;
}

.wddQ[open] summary::after {
    transform: rotate(45deg);
    background-color: #e6dcff;
}

.wddQ p {
    margin: 0;
    padding: 0 20px 18px;
    font-family: var(--wdd-text);
    font-size: 16px;
    line-height: 26px;
    color: var(--wdd-body);
}

/* Smooth open/close where the browser supports animating to auto height */
@supports (interpolate-size: allow-keywords) {
    .wddFaqCols {
        interpolate-size: allow-keywords;
    }

    .wddQ::details-content {
        block-size: 0;
        overflow-y: clip;
        transition: block-size .35s var(--wdd-ease), content-visibility .35s allow-discrete;
    }

    .wddQ[open]::details-content {
        block-size: auto;
    }
}

.wddFaqCta {
    padding: 20px 20px 22px;
    border: 1px dashed #d8ccff;
    border-radius: 14px;
    background: var(--wdd-soft);
}

.wddFaqCta p {
    margin: 0 0 14px;
    font-family: var(--wdd-text);
    font-size: 16px;
    line-height: 1.5;
    color: var(--wdd-body);
}

.wddFaqCta strong {
    color: var(--wdd-ink);
}

.wddFaqCtaBtns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wddFaqCtaBtns .wddBtn {
    height: 46px;
    font-size: 15px;
}

/* ---------- Scroll reveal ----------
   The script only hides elements that start below the screen, so nothing flashes and
   everything stays visible if JavaScript is off. */
.wdd-reveal {
    opacity: 0;
    transform: translateY(28px) scale(.98);
    filter: blur(6px);
}

.wdd-reveal.is-in {
    opacity: 1;
    transform: none;
    filter: none;
    transition: opacity .8s var(--wdd-ease), transform .8s var(--wdd-ease), filter .8s ease;
    transition-delay: var(--d, 0s);
}

/* ---------- Mobile quick-contact bar ---------- */

.wddSticky {
    display: none;
    font-family: var(--wdd-heading);
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
    .wddEyebrow {
        letter-spacing: 3.5px;
    }

    .wddFloat {
        padding: 10px 14px 10px 10px;
    }

    .wddFloat small {
        display: none;
    }

    .wddFloatIcon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .wddFloatIcon svg {
        width: 18px;
        height: 18px;
    }

    .wddFloat--design,
    .wddFloat--secure {
        left: -18px;
    }

    .wddFloat--speed {
        right: -18px;
    }

    .wddFeature {
        font-size: 14.5px;
    }

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

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

/* Small laptops: the text column gets tall, so the image keeps a 4:5 frame beside it */
@media (max-width: 1365px) {
    .wddIntroInner {
        align-items: center;
    }

    .wddVisual {
        min-height: 0;
        aspect-ratio: 4 / 5;
    }
}

/* Tablet & mobile: stack, content first */
@media (max-width: 991px) {
    .wddContent h1,
    .wddHead h2,
    .wddProcessHead h2,
    .wddEnquiry h2 {
        font-size: 28px;
    }

    .wddIntro {
        padding: 44px 0 28px;
    }

    .wddIntroInner {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        max-width: 720px;
    }

    .wddContent {
        order: -1;
    }

    /* Tablets and phones show the whole hero image at its own shape: no crop, no frame, no tilt */
    .wddVisual {
        width: 100%;
        max-width: 460px;
        min-height: 0;
        margin-inline: auto;
        aspect-ratio: auto;
    }

    .wddVisualFrame {
        position: static;
        border-radius: 0;
        background: none;
        box-shadow: none;
        transform: none;
    }

    .wddVisualFrame img {
        height: auto;
    }

    .wddFloat small {
        display: block;
    }

    .wddFloat--design,
    .wddFloat--secure {
        left: 12px;
    }

    .wddFloat--speed {
        right: 12px;
    }

    .wddSection {
        padding: 56px 0;
    }

    .wddServices {
        padding: 40px 0 36px;
    }

    .wddWork {
        padding: 44px 0 56px;
    }

    /* Portfolio: one swipeable row instead of a tall grid */
    .wddWorkGrid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 44%;
        gap: 14px;
        margin: 0 calc(-1 * var(--wdd-gutter));
        padding: 4px var(--wdd-gutter) 12px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--wdd-gutter);
        scrollbar-width: none;
    }

    .wddWorkGrid::-webkit-scrollbar {
        display: none;
    }

    .wddWorkItem {
        scroll-snap-align: start;
    }

    .wddDots {
        display: flex;
    }

    .wddIndustries,
    .wddProcess {
        padding: 52px 0;
    }

    /* Process: head stacks, steps become a swipeable row of cards */
    .wddProcessHead {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 24px;
    }

    .wddSteps {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(240px, 38%);
        gap: 12px;
        margin: 0 calc(-1 * var(--wdd-gutter));
        padding: 4px var(--wdd-gutter) 16px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--wdd-gutter);
        scrollbar-width: none;
    }

    .wddSteps::-webkit-scrollbar {
        display: none;
    }

    .wddSteps::before,
    .wddSteps::after {
        display: none;
    }

    .wddStep {
        padding: 18px 18px 20px;
        border: 1px solid var(--wdd-line);
        border-radius: 16px;
        background: #fff;
        scroll-snap-align: start;
        transition: border-color .4s ease, box-shadow .4s ease;
    }

    /* The step in view is highlighted; the row slides on by itself (js/service-page.js) */
    .wddStep.is-current {
        border-color: rgba(91, 63, 208, .4);
        box-shadow: 0 10px 22px -14px rgba(91, 63, 208, .55);
    }

    /* Timer bar on the highlighted step, filling until the row slides to the next one */
    .wddStep::before {
        content: '';
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: -1px;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: linear-gradient(90deg, var(--wdd-violet), var(--wdd-pink));
        transform: scaleX(0);
        transform-origin: left center;
    }

    .wddSteps.is-timing .wddStep.is-current::before {
        animation: wddStepTimer var(--wdd-step-time, 3.2s) linear forwards;
    }

    /* Arrow badge in the gap between cards, linking each step to the next */
    .wddStep:not(:last-child)::after {
        top: 28px;
        left: calc(100% - 7px);
        z-index: 3;
        width: 26px;
        height: 26px;
        border: 1.5px solid #d6ccf7;
        border-radius: 50%;
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b3fd0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 13px no-repeat;
        box-shadow: 0 4px 10px -4px rgba(91, 63, 208, .4);
        transform: none;
        transition: background-color .3s ease, border-color .3s ease;
    }

    .wddSteps.is-in .wddStep:nth-child(n)::after {
        transition-delay: 0s;
    }

    /* The highlighted step's arrow fills in and nudges towards the next step */
    .wddStep.is-current:not(:last-child)::after {
        border-color: var(--wdd-violet);
        background-color: var(--wdd-violet);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
        animation: wddNudge .9s ease-in-out infinite alternate;
    }

    .wddStepIcon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .wddStepIcon svg {
        width: 21px;
        height: 21px;
    }

    .wddStepNo {
        margin-top: 12px;
    }

    .wddEnquiryInner {
        grid-template-columns: minmax(0, 1fr);
        max-width: 720px;
    }

    .wddFaqCols {
        grid-template-columns: minmax(0, 1fr);
        max-width: 720px;
        margin-inline: auto;
    }
}

@media (max-width: 767px) {
    .wddEyebrow {
        margin-bottom: 10px;
        font-size: 13px;
        letter-spacing: 2.5px;
    }

    .wddContent h1,
    .wddHead h2,
    .wddProcessHead h2,
    .wddEnquiry h2 {
        font-size: 24px;
        line-height: 1.25;
    }

    /* H1 on one line: sized to the column (the title is about 14x its font size wide) */
    .wddContent h1 {
        font-size: min(24px, 7cqi);
        white-space: nowrap;
    }

    .wddHead p:not(.wddEyebrow),
    .wddProcessHead p:not(.wddEyebrow),
    .wddEnquiryLead,
    .wddLead {
        font-size: 15px;
        line-height: 24px;
    }

    .wddIntro {
        padding: 32px 0 20px;
    }

    .wddLead {
        margin-bottom: 22px;
    }

    .wddFeatures {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-flow: row;
        gap: 8px;
        margin-bottom: 22px;
    }

    .wddFeature {
        min-height: 0;
        padding: 9px 12px 9px 9px;
        font-size: 14.5px;
    }

    .wddFeatureIcon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .wddFeatureIcon svg {
        width: 19px;
        height: 19px;
    }

    .wddProof {
        gap: 8px 16px;
        font-size: 13.5px;
    }

    .wddProof .wddProof__since {
        display: none;
    }

    /* Phones: the whole hero image edge to edge; its plain top and bottom margins fade into the page */
    .wddVisual {
        width: auto;
        max-width: none;
        margin-inline: calc(-1 * var(--wdd-gutter));
    }

    .wddVisualFrame img {
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    }

    .wddFloat {
        gap: 8px;
        padding: 7px 12px 7px 7px;
        border-radius: 12px;
    }

    .wddFloat strong {
        font-size: 13px;
    }

    .wddFloat small {
        display: none;
    }

    .wddFloatIcon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    .wddFloatIcon svg {
        width: 16px;
        height: 16px;
    }

    .wddFloat--design {
        top: 10px;
        left: 10px;
    }

    .wddFloat--speed {
        top: auto;
        bottom: 10px;
        right: 10px;
    }

    .wddFloat--secure {
        display: none;
    }

    .wddSection {
        padding: 44px 0;
    }

    .wddHead {
        margin-bottom: 22px;
    }

    .wddServices {
        padding: 32px 0 28px;
    }

    .wddServiceGrid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .wddService {
        gap: 14px;
        padding: 14px 16px;
        border-radius: 14px;
    }

    .wddIcon {
        width: 42px;
        height: 42px;
        border-radius: 11px;
    }

    .wddIcon svg {
        width: 20px;
        height: 20px;
    }

    .wddService h3 {
        margin-bottom: 2px;
        font-size: 16px;
    }

    .wddService p {
        font-size: 14.5px;
    }

    .wddStack {
        margin-top: 28px;
    }

    .wddStackLabel {
        margin-bottom: 12px;
        font-size: 12.5px;
        letter-spacing: .08em;
    }

    .wddMarquee {
        margin-inline: calc(-1 * var(--wdd-gutter));
    }

    .wddLogos li {
        padding: 8px 16px 8px 11px;
        font-size: 14.5px;
    }

    .wddLogos svg {
        width: 22px;
        height: 22px;
    }

    .wddChips li {
        padding: 8px 14px;
        font-size: 13.5px;
    }

    .wddIndustryRows {
        gap: 8px;
    }

    .wddWork {
        padding: 32px 0 44px;
    }

    /* One whole project per view, with a 14px peek of the next one */
    .wddWorkGrid {
        grid-auto-columns: calc(100% - 10px);
        gap: 12px;
    }

    .wddWorkBox {
        border-radius: 12px;
    }

    .wddWorkLive {
        top: 8px;
        left: 8px;
        padding: 4px 8px 4px 19px;
        font-size: 11px;
    }

    .wddWorkLive::before {
        left: 8px;
        width: 6px;
        height: 6px;
        margin-top: -3px;
    }

    .wddWorkItem h3 {
        margin-top: 10px;
        font-size: 16px;
    }

    .wddWorkItem p {
        font-size: 13.5px;
    }

    .wddWhyStats {
        gap: 10px;
    }

    .wddWhyStat {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .wddWhyStat strong {
        margin-bottom: 10px;
        font-size: 36px;
    }

    .wddWhyStat h3 {
        font-size: 16px;
    }

    .wddWhyStat p {
        font-size: 13.5px;
        line-height: 1.45;
    }

    /* Points in the same 2-column grid as the stat cards above, so the edges line up */
    .wddWhyPoints {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        gap: 10px;
        margin-top: 10px;
    }

    .wddWhyPoints li {
        gap: 7px;
        padding: 11px 8px 11px 9px;
        border-radius: 14px;
        font-size: 13px;
        line-height: 1.25;
    }

    .wddIndustries {
        padding: 40px 0;
    }

    .wddIndustries .wddHead {
        margin-bottom: 18px;
    }

    .wddProcess {
        padding: 40px 0;
    }

    .wddProcessHead .wddBtn {
        width: 100%;
    }

    .wddSteps {
        grid-auto-columns: 76%;
    }

    .wddCallCard {
        margin-top: 20px;
    }

    .wddCallCard strong {
        font-size: 19px;
    }

    .wddQ summary {
        padding: 15px 16px;
    }

    .wddQ summary h3 {
        font-size: 16px;
    }

    .wddQ p {
        padding: 0 16px 16px;
        font-size: 15px;
        line-height: 24px;
    }

    .wddFaqCta {
        padding: 16px;
    }

    .wddFaqCtaBtns .wddBtn {
        flex: 1 1 auto;
        padding: 0 14px;
    }

    /* Quick-contact bar replaces the floating WhatsApp bubble on phones */
    .wddSticky {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        display: grid;
        grid-template-columns: 1fr 1.15fr 1.35fr;
        gap: 8px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 -8px 24px -12px rgba(15, 20, 48, .25);
        transform: translateY(110%);
        transition: transform .3s ease;
    }

    .wddSticky.is-on {
        transform: none;
    }

    .wddSticky a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 46px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 500;
        white-space: nowrap;
    }

    .wddSticky svg {
        flex: none;
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .wddSticky__call {
        border: 1.5px solid var(--wdd-charcoal);
        background: #fff;
        color: var(--wdd-charcoal);
    }

    .wddSticky__wa {
        background: linear-gradient(135deg, var(--wdd-teal) 0%, var(--wdd-teal-2) 100%);
        color: #fff;
    }

    .wddSticky__quote {
        background: linear-gradient(135deg, #f9577c 0%, #f9758f 100%);
        color: #fff;
    }

    .wddSticky__call:hover,
    .wddSticky__call:focus {
        color: var(--wdd-charcoal);
    }

    .wddSticky__wa:hover,
    .wddSticky__wa:focus,
    .wddSticky__quote:hover,
    .wddSticky__quote:focus {
        color: #fff;
    }

    #whatsappButton {
        display: none !important;
    }

    /* Room so the bar never covers the end of the footer */
    body {
        padding-bottom: 62px;
    }
}

@media (max-width: 575px) {
    .wddFormTitle {
        margin-bottom: 14px;
        font-size: 20px;
    }

    .wddFormCard .cgx-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 419px) {
    .wddFaqCtaBtns .wddBtn {
        flex-basis: 100%;
    }
}

@media (max-width: 379px) {
    .wddEyebrow {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .wddSticky a {
        font-size: 13.5px;
    }

    .wddWhyStat strong {
        font-size: 32px;
    }

    .wddWhyPoints li {
        gap: 6px;
        font-size: 12.5px;
    }

    .wddWhyPoints li::before {
        width: 16px;
        height: 16px;
        background-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .wddFloat,
    .wddFeature,
    .wddFeatureIcon,
    .wddService,
    .wddIcon,
    .wddBtn,
    .wddBtn .wddBtnArrow,
    .wddBtn::after,
    .wddVisualFrame,
    .wddLogos li,
    .wddWorkBox,
    .wddWorkCover,
    .wddWhyStat,
    .wddStepIcon,
    .wddSteps::after,
    .wddStep,
    .wddStep::before,
    .wddStep::after,
    .wddDots button::before,
    .wddCallCard,
    .wddCallIcon::before,
    .wddSticky,
    .wddFormCard::before {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================
   Owner walkthrough fixes, 17 Oct 2026 (web design page; ecommerce reuses some of these)
   ========================================================== */

/* Occasional shine: only on buttons that carry .wddBtn--shine (one per section at most) */
@keyframes wddShineAuto {
    0%, 82% { left: -60%; }
    100% { left: 130%; }
}

.wddBtn--shine::after {
    animation: wddShineAuto 7s ease-in-out 2s infinite;
}

/* Hero proof points: four aligned points on one row (2 x 2 on phones) */
.wddProof--grid {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    gap: 10px 14px;
    font-size: 14.5px;
}

.wddProof--grid li {
    white-space: nowrap;
}

@media (max-width: 1599px) {
    .wddProof--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        max-width: 540px;
        gap: 10px 20px;
    }

    .wddProof--grid li {
        white-space: normal;
    }
}

@media (max-width: 767px) {
    .wddProof--grid .wddProof__since {
        display: flex;
    }
}

/* Why CoregenX: theme violet band with circles and dots */
.wddWhy {
    background:
        radial-gradient(circle at 8% 18%, rgba(255, 255, 255, .10) 0 90px, transparent 91px),
        radial-gradient(circle at 94% 88%, rgba(255, 255, 255, .08) 0 140px, transparent 141px),
        radial-gradient(rgba(255, 255, 255, .16) 1.4px, transparent 1.6px) 0 0 / 22px 22px,
        #432d92;
}

.wddWhy::before,
.wddWhy::after {
    content: '';
    position: absolute;
    border: 2px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    pointer-events: none;
}

.wddWhy::before {
    top: -70px;
    right: 6%;
    width: 220px;
    height: 220px;
}

.wddWhy::after {
    bottom: -90px;
    left: 4%;
    width: 260px;
    height: 260px;
    border-style: dashed;
}

.wddWhy .wddWrap {
    position: relative;
    z-index: 1;
}

.wddWhy .wddEyebrow {
    color: #f9758f;
}

.wddWhyStat {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
}

.wddWhyStat:hover {
    border-color: rgba(255, 255, 255, .42);
    background-color: rgba(255, 255, 255, .13);
}

.wddWhyStat strong {
    background: linear-gradient(135deg, #fff 20%, #4cdaa0);
    -webkit-background-clip: text;
    background-clip: text;
}

.wddWhyStat p {
    color: rgba(255, 255, 255, .82);
}

.wddWhyPoints li {
    border-color: rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .1);
}

/* How we work: lilac start state instead of grey, soft dotted band */
.wddProcess {
    background:
        radial-gradient(rgba(91, 63, 208, .10) 1.2px, transparent 1.4px) 0 0 / 24px 24px,
        #f8f6ff;
}

.wddStep:not(:last-child)::after {
    background: #f8f6ff;
}

.wddSteps::before {
    background: #d9cdfb;
}

.wddSteps.is-armed:not(.is-in) .wddStepIcon {
    border-color: #432d92;
    background: #fff;
    color: var(--wdd-violet);
}

.wddSteps.is-armed:not(.is-in) .wddStep:not(:last-child)::after {
    border-color: #b9a6f6;
}

/* Free consultation (web design page): wider form, fuller left column */
.wddEnquiry:not(.ecEnquiry) .wddEnquiryInner {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.42fr);
    gap: 32px clamp(28px, 3.5vw, 56px);
}

.wddEnquiry:not(.ecEnquiry) .wddFormCard .cgx-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wddEnquiry:not(.ecEnquiry) .wddFormCard .cgx-field-textarea {
    min-height: 64px;
    height: 64px;
}

.wddEnquiryPerks {
    display: grid;
    gap: 12px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.wddEnquiryPerks li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--wdd-text);
    font-size: 16px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .9);
}

.wddEnquiryPerks span {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.wddEnquiryPerks svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1199px) {
    .wddEnquiry:not(.ecEnquiry) .wddFormCard .cgx-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .wddEnquiry:not(.ecEnquiry) .wddEnquiryInner {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .wddEnquiry:not(.ecEnquiry) .wddFormCard .cgx-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wddBtn--shine::after {
        animation: none !important;
    }
}

/* WhatsApp button: no border, so the gradient has no seam at the edges (owner, 17 Oct) */
.wddBtn--whatsapp {
    border-width: 0;
}

/* ==========================================================
   Owner feedback 17 Oct (afternoon): web-design-development.html (.pgWdd) and
   ecommerce-development.html (.pgEc) only. Scoped by the body class, so the other pages
   that load this file do not change.
   - One type scale: H1 32 > H2 29 > card H3 17-19 > body; supporting text 10% smaller
   - Logo palette only (no blue, orange or amber tones)
   - Desktop never shows a call CTA: WhatsApp / Get a quote; "Call" only on phones
   - Tighter, consistent section spacing; no dot grids
   ========================================================== */

/* Accent tones mapped to the theme palette */
:is(.pgWdd, .pgEc) :is(.wddTone--violet, .wddFeature--violet) { --tint: #efebfe; --accent: #432d92; --edge: #d6ccf6; --glow: rgba(67, 45, 146, .32); }
:is(.pgWdd, .pgEc) :is(.wddTone--pink, .wddFeature--pink) { --tint: #ffebf1; --accent: #d9265f; --edge: #fac6d6; --glow: rgba(217, 38, 95, .3); }
:is(.pgWdd, .pgEc) :is(.wddTone--coral, .wddFeature--coral) { --tint: #fff0f3; --accent: #f05a7e; --edge: #fdd0da; --glow: rgba(249, 117, 143, .32); }
:is(.pgWdd, .pgEc) :is(.wddTone--sky, .wddFeature--sky) { --tint: #e3f4f6; --accent: #23818d; --edge: #bfe3e8; --glow: rgba(53, 159, 173, .3); }
:is(.pgWdd, .pgEc) :is(.wddTone--green, .wddFeature--green) { --tint: #e2f8ef; --accent: #0c8a72; --edge: #b5e6da; --glow: rgba(76, 218, 160, .32); }
:is(.pgWdd, .pgEc) :is(.wddTone--amber, .wddFeature--amber) { --tint: #ecebf5; --accent: #1c1446; --edge: #d3d0e6; --glow: rgba(28, 20, 70, .25); }

/* Type scale */
:is(.pgWdd, .pgEc) .wddEyebrow {
    margin-bottom: 10px;
    font-size: 13px;
    letter-spacing: 3.5px;
}

:is(.pgWdd, .pgEc) :is(.wddHead h2, .wddProcessHead h2, .wddEnquiry h2) {
    margin-bottom: 10px;
    font-size: 29px;
    line-height: 1.25;
}

:is(.pgWdd, .pgEc) :is(.wddHead p:not(.wddEyebrow), .wddProcessHead p:not(.wddEyebrow), .wddEnquiryLead) {
    font-size: 14.5px;
    line-height: 23px;
}

:is(.pgWdd, .pgEc) .wddContent .wddLead {
    font-size: 15.5px;
    line-height: 26px;
}

:is(.pgWdd, .pgEc) .wddFeature { font-size: 14px; }
:is(.pgWdd, .pgEc) .wddService h3 { font-size: 17px; }
:is(.pgWdd, .pgEc) .wddService p { font-size: 14px; line-height: 21px; }
:is(.pgWdd, .pgEc) .wddFormTitle { font-size: 21px; }
:is(.pgWdd, .pgEc) .wddEnquiryPerks li { font-size: 14.5px; }
.pgWdd .wddWorkItem h3 { font-size: 17px; }
.pgWdd .wddWorkItem p { font-size: 13.5px; }
.pgWdd .wddStep h3 { font-size: 17px; }
.pgWdd .wddStep p { font-size: 14px; line-height: 22px; }
.pgWdd .wddQ summary h3 { font-size: 16px; }
.pgWdd .wddQ p { font-size: 14.5px; line-height: 24px; }

/* Section rhythm: same top and bottom everywhere, tighter heads, short FAQ top */
:is(.pgWdd, .pgEc) .wddHead { margin-bottom: 30px; }
.pgWdd .wddSection { padding: 60px 0; }
.pgWdd section#wdd-services { padding: 52px 0 48px; }
.pgWdd section#faq { padding: 44px 0 60px; }
.pgWdd .wddProcessHead { margin-bottom: 30px; }

/* Desktop never offers a phone call; phones get the call link */
@media (min-width: 992px) {
    :is(.pgWdd, .pgEc) .wddMobOnly { display: none !important; }
}

@media (max-width: 991px) {
    :is(.pgWdd, .pgEc) .wddDeskOnly { display: none !important; }
}

:is(.pgWdd, .pgEc) .wddCallCard--wa .wddCallIcon { color: #1faf62; }
:is(.pgWdd, .pgEc) .wddCallCard--wa .wddCallIcon svg { width: 24px; height: 24px; }

/* Hero proof points: the two company facts, on one aligned row */
:is(.pgWdd, .pgEc) .wddProof--pair {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 20px;
    font-size: 14px;
}

:is(.pgWdd, .pgEc) .wddProof--pair li { white-space: nowrap; }

/* Why CoregenX: violet band with circles and lines (no dot grid), copy left, 360 ring right */
.pgWdd .wddWhy {
    background:
        radial-gradient(circle at 6% 16%, rgba(255, 255, 255, .09) 0 90px, transparent 91px),
        radial-gradient(circle at 96% 92%, rgba(255, 255, 255, .07) 0 150px, transparent 151px),
        #432d92;
}

.pgWdd .wddWhy::after { border-style: solid; }

.pgWdd .wddWhyGrid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 32px clamp(28px, 4vw, 64px);
}

.pgWdd .wddWhyCopy h2 {
    margin: 0 0 10px;
    font-family: var(--wdd-heading);
    font-size: 29px;
    font-weight: 500;
    line-height: 1.25;
    color: #fff;
}

.pgWdd .wddWhyLead {
    margin: 0;
    font-family: var(--wdd-text);
    font-size: 14.5px;
    line-height: 23px;
    color: rgba(255, 255, 255, .82);
}

.pgWdd .wddWhyFacts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.pgWdd .wddWhyFacts li {
    padding: 4px 18px;
    border-left: 1px solid rgba(255, 255, 255, .2);
}

.pgWdd .wddWhyFacts li:first-child {
    padding-left: 0;
    border-left: 0;
}

.pgWdd .wddWhyFacts strong {
    display: block;
    font-family: var(--wdd-heading);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.05;
    background: linear-gradient(120deg, #fff 30%, #4cdaa0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}

.pgWdd .wddWhyFacts span:not([data-count]) {
    display: block;
    margin-top: 6px;
    font-family: var(--wdd-text);
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, .78);
}

.pgWdd .wddWhyPoints {
    justify-content: flex-start;
    gap: 10px;
    margin-top: 28px;
}

.pgWdd .wddWhyPoints li {
    padding: 8px 15px 8px 9px;
    font-size: 14px;
}

.pgWdd .wddRing {
    position: relative;
    width: 100%;
    max-width: 620px;
    height: 440px;
    margin: 0 0 0 auto;
}

.pgWdd .wddRingChart {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 360px;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}

.pgWdd .wddRingSvg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.pgWdd .wddRingOuter {
    fill: none;
    stroke: rgba(255, 255, 255, .16);
    stroke-width: 1.5;
}

.pgWdd .wddRingSweep {
    fill: none;
    stroke: #4cdaa0;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 16 84;
    transform-box: view-box;
    transform-origin: 50% 50%;
}

.pgWdd .wddRingTrack {
    fill: none;
    stroke: rgba(255, 255, 255, .08);
    stroke-width: 34;
}

.pgWdd .wddRingSeg {
    fill: none;
    stroke-width: 34;
    stroke-dasharray: 23 77;
    transition: stroke-dasharray 1.1s var(--wdd-ease), stroke-width .35s ease;
}

.pgWdd .wddRingSeg--1 { stroke-dashoffset: -1; transition-delay: .15s, 0s; }
.pgWdd .wddRingSeg--2 { stroke-dashoffset: -26; transition-delay: .45s, 0s; }
.pgWdd .wddRingSeg--3 { stroke-dashoffset: -51; transition-delay: .75s, 0s; }
.pgWdd .wddRingSeg--4 { stroke-dashoffset: -76; transition-delay: 1.05s, 0s; }

.pgWdd .wddRing.wdd-reveal:not(.is-in) .wddRingSeg { stroke-dasharray: 0 100; }

.pgWdd .wddRingInner {
    fill: rgba(255, 255, 255, .06);
    stroke: rgba(255, 255, 255, .2);
    stroke-width: 1.5;
}

.pgWdd .wddRingOrbit {
    transform-box: view-box;
    transform-origin: 50% 50%;
}

.pgWdd .wddRingOrbit circle {
    fill: #fff;
    stroke: rgba(76, 218, 160, .55);
    stroke-width: 6;
}

.pgWdd .wddRingCore {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-content: center;
    justify-items: center;
    width: 47%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 24px 50px -20px rgba(15, 10, 50, .65);
    text-align: center;
    transform: translate(-50%, -50%);
}

.pgWdd .wddRingCore img {
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
}

.pgWdd .wddRingCore strong {
    font-family: var(--wdd-heading);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.1;
    color: #1c1446;
}

.pgWdd .wddRingCore span {
    margin-top: 3px;
    font-family: var(--wdd-heading);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #23818d;
}

.pgWdd .wddRingLabels {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pgWdd .wddRingLabel {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 216px;
    padding: 9px 12px 9px 9px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 16px;
    background: rgba(255, 255, 255, .09);
    transition: background-color .35s ease, border-color .35s ease, transform .35s var(--wdd-ease);
}

.pgWdd .wddRingLabel--1 { top: 4%; right: 0; }
.pgWdd .wddRingLabel--2 { bottom: 4%; right: 0; }
.pgWdd .wddRingLabel--3 { bottom: 4%; left: 0; }
.pgWdd .wddRingLabel--4 { top: 4%; left: 0; }

.pgWdd .wddRingLabel:hover {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .18);
    transform: translateY(-3px);
}

.pgWdd .wddRingIcon {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, #f9758f, #d9265f);
    color: #fff;
}

.pgWdd .wddRingLabel--2 .wddRingIcon { background: linear-gradient(to left, #4cdaa0, #359fad); }
.pgWdd .wddRingLabel--3 .wddRingIcon { background: linear-gradient(135deg, #b9a6f6, #7a63d6); }
.pgWdd .wddRingLabel--4 .wddRingIcon { background: linear-gradient(135deg, #359fad, #4cdaa0); }

.pgWdd .wddRingIcon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pgWdd .wddRingLabel b {
    display: block;
    font-family: var(--wdd-heading);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
}

.pgWdd .wddRingLabel small {
    display: block;
    margin-top: 2px;
    font-family: var(--wdd-text);
    font-size: 12px;
    line-height: 1.3;
    color: rgba(255, 255, 255, .74);
}

.pgWdd .wddRing:has(.wddRingLabel--1:hover) .wddRingSeg--1,
.pgWdd .wddRing:has(.wddRingLabel--2:hover) .wddRingSeg--2,
.pgWdd .wddRing:has(.wddRingLabel--3:hover) .wddRingSeg--3,
.pgWdd .wddRing:has(.wddRingLabel--4:hover) .wddRingSeg--4 {
    stroke-width: 46;
}

@media (prefers-reduced-motion: no-preference) {
    .pgWdd .wddRingSweep { animation: wddRot 18s linear infinite; }
    .pgWdd .wddRingOrbit { animation: wddRot 12s linear infinite; }

    @keyframes wddRot { to { transform: rotate(360deg); } }

    /* each part of the ring and its label light up in turn */
    .pgWdd .wddRingSeg { animation: wddSegOn 10s ease-in-out infinite; }
    .pgWdd .wddRingLabel { animation: wddLblOn 10s ease-in-out infinite; }
    .pgWdd .wddRingSeg--2, .pgWdd .wddRingLabel--2 { animation-delay: 2.5s; }
    .pgWdd .wddRingSeg--3, .pgWdd .wddRingLabel--3 { animation-delay: 5s; }
    .pgWdd .wddRingSeg--4, .pgWdd .wddRingLabel--4 { animation-delay: 7.5s; }
    .pgWdd .wddRing:hover .wddRingSeg,
    .pgWdd .wddRing:hover .wddRingLabel { animation-play-state: paused; }

    @keyframes wddSegOn {
        0%, 4%, 26%, 100% { stroke-width: 34; }
        9%, 21% { stroke-width: 44; }
    }

    @keyframes wddLblOn {
        0%, 4%, 26%, 100% { background-color: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .2); }
        9%, 21% { background-color: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .55); }
    }
}

/* How we work: plain lilac band (no dot grid) */
.pgWdd .wddProcess { background: #f8f6ff; }

/* FAQ: "Still have a question" on white, same button borders as the hero buttons */
.pgWdd .wddFaqCta {
    position: relative;
    overflow: hidden;
    padding: 20px 22px 22px 26px;
    border: 1px solid var(--wdd-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 40px -32px rgba(28, 20, 70, .45);
}

.pgWdd .wddFaqCta::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: linear-gradient(to bottom, #4cdaa0, #359fad);
}

.pgWdd .wddFaqCta p { font-size: 15px; }

.pgWdd .wddFaqCtaBtns .wddBtn {
    height: 46px;
    border: 1px solid transparent;
}

.pgWdd .wddFaqCtaBtns .wddBtn--work { border-color: var(--wdd-ink); }

/* Phones and tablets */
@media (max-width: 991px) {
    .pgWdd .wddWhyGrid { grid-template-columns: minmax(0, 1fr); }
    .pgWdd .wddRing { height: auto; margin: 0 auto; max-width: 560px; }
    .pgWdd .wddRingChart { position: relative; top: auto; left: auto; width: min(330px, 86%); margin: 0 auto; transform: none; }
    .pgWdd .wddRingLabels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
    .pgWdd .wddRingLabel { position: static; width: auto; }
}

@media (max-width: 767px) {
    .pgWdd .wddContent h1 { font-size: min(27px, 6.9cqi); }
    .pgEc .wddContent h1 { font-size: min(27px, 6.5cqi); }
    :is(.pgWdd, .pgEc) :is(.wddHead h2, .wddProcessHead h2, .wddEnquiry h2) { font-size: 24px; }
    :is(.pgWdd, .pgEc) .wddContent .wddLead { font-size: 15px; line-height: 25px; }
    :is(.pgWdd, .pgEc) .wddHead { margin-bottom: 24px; }
    .pgWdd .wddSection { padding: 44px 0; }
    .pgWdd section#wdd-services { padding: 40px 0 36px; }
    .pgWdd section#faq { padding: 34px 0 44px; }
    .pgWdd .wddWhyCopy h2 { font-size: 24px; }
    .pgWdd .wddWhyFacts strong { font-size: 30px; }
    .pgWdd .wddWhyFacts li { padding: 2px 10px; }
    .pgWdd .wddWhyFacts span:not([data-count]) { font-size: 12px; }
    .pgWdd .wddRingLabel { gap: 8px; padding: 8px; }
    .pgWdd .wddRingIcon { width: 32px; height: 32px; border-radius: 9px; }
    .pgWdd .wddRingLabel b { font-size: 14px; }
    .pgWdd .wddRingLabel small { font-size: 11.5px; }
    .pgWdd .wddRingCore img { width: 40px; height: 40px; }
    .pgWdd .wddRingCore strong { font-size: 16px; }
    .pgWdd .wddRingCore span { font-size: 9.5px; letter-spacing: .8px; }
    :is(.pgWdd, .pgEc) .wddProof--pair { gap: 8px 18px; font-size: 13.5px; }
}

@media (max-width: 379px) {
    .pgWdd .wddRingLabels { grid-template-columns: minmax(0, 1fr); }
}

/* The reCAPTCHA holder never takes a grid cell, and its status text stays hidden inside it */
:is(.pgWdd, .pgEc) #recaptcha-holder {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}