/* ============================================================
   RSK BUSINESS SOLUTIONS DESIGN SYSTEM — TOKENS
   (matched to rsk-bsl.com live theme)
   ============================================================ */
#opnew {
    --navy-deep: #10385E;
    --navy-mid: #1D62A5;
    --blue-brand: #1D66AB;
    --blue-alt: #286CAD;
    --blue-bright: #2F97F7;
    --green-accent: #96C121;
    --green-alt: #A4C942;
    --purple-vs: #5B3DF5;
    --ink: #1D2C38;
    --body-grey: #4E597B;
    --bg-light: #EEF3F9;
    --bg-lighter: #F4F7FA;
    --white: #FFF;
    --grad-hero: linear-gradient(196deg, #10385E 32%, #1D62A5 71%);
    --grad-band: linear-gradient(196deg, #10385E 32%, #2A6BAB 71%);
    --radius-card: 20px;
    --radius-sm: 14px;
    --font-head: "Poppins", sans-serif;
    --font-body: "Poppins", sans-serif;
    --shadow-card: 0 10px 30px rgba(16, 56, 94, 0.1);
    --shadow-hover: 0 22px 45px rgba(16, 56, 94, 0.18)
    }
#opnew * {
    margin: 0;
    padding: 0;
    box-sizing: border-box
    }
#opnew {
    scroll-behavior: smooth
    }
#opnew {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--white);
    overflow-x: hidden;
    line-height: 1.6
    }
#opnew img {
    max-width: 100%;
    display: block
    }
#opnew a {
    text-decoration: none;
    color: inherit
    }
#opnew .container {
    width: min(1200px, 92%);
    margin: 0 auto
    }
#opnew section {
    position: relative
    }
/* ---------- shared type ---------- */
#opnew .tagline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--blue-brand);
    margin-bottom: 14px
    }
#opnew .tagline::before {
    content: "";
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: var(--green-accent)
    }
#opnew h2.sec-title {
    font-family: var(--font-head);
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 700;
    line-height: 1.22;
    color: var(--ink)
    }
#opnew h2.sec-title .em {
    font-style: italic;
    font-weight: 700;
    color: var(--blue-brand);
    padding-bottom: 1px;
    background-image: linear-gradient(rgba(150, 193, 33, 0.38), rgba(150, 193, 33, 0.38));
    background-size: 100% 6px;
    background-position: 0 92%;
    background-repeat: no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone
    }
#opnew .sec-sub {
    max-width: 720px;
    margin-top: 16px;
    color: var(--body-grey);
    font-size: 17px
    }
#opnew .light .tagline {
    color: #BFE06A
    }
#opnew .light h2.sec-title {
    color: #fff
    }
#opnew .light h2.sec-title .em {
    color: #BFE06A;
    background-image: linear-gradient(rgba(150, 193, 33, 0.42), rgba(150, 193, 33, 0.42))
    }
#opnew .light .sec-sub {
    color: rgba(255, 255, 255, 0.78)
    }
#opnew .center {
    text-align: center;
    margin-left: auto;
    margin-right: auto
    }
#opnew .center .tagline {
    justify-content: center
    }
#opnew .center .sec-sub {
    margin-left: auto;
    margin-right: auto
    }
/* ---------- buttons ---------- */
#opnew .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 16px;
    padding: 15px 34px;
    border-radius: 50px;
    cursor: pointer;
    border: 0;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.35s, background 0.35s;
    position: relative;
    overflow: hidden
    }
#opnew .btn svg {
    transition: transform 0.35s
    }
#opnew .btn:hover svg {
    transform: translatex(5px)
    }
#opnew .btn-primary {
    background: var(--blue-brand);
    color: #fff;
    box-shadow: 0 10px 24px rgba(29, 102, 171, 0.35)
    }
#opnew .btn-primary:hover {
    transform: translatey(-3px);
    box-shadow: 0 16px 34px rgba(29, 102, 171, 0.45);
    background: var(--navy-mid)
    }
#opnew .btn-green {
    background: var(--green-accent);
    color: #fff;
    box-shadow: 0 10px 24px rgba(150, 193, 33, 0.35)
    }
#opnew .btn-green:hover {
    transform: translatey(-3px);
    box-shadow: 0 16px 34px rgba(150, 193, 33, 0.5)
    }
#opnew .btn-ghost {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.55)
    }
#opnew .btn-ghost:hover {
    border-color: var(--green-accent);
    color: var(--green-accent);
    transform: translatey(-3px)
    }
#opnew .btn .shine {
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewx(-20deg);
    animation: shine 3.4s infinite;
    pointer-events: none
    }
@keyframes shine {
    0% {
        left: -80%
        } 55% {
        left: 130%
        } 100% {
        left: 130%
        }
    }
#opnew :focus-visible {
    outline: 3px solid var(--green-accent);
    outline-offset: 3px;
    border-radius: 4px
    }
#opnew .light :focus-visible, #opnew .hero :focus-visible, #opnew .cta :focus-visible {
    outline-color: #BFE06A
    }
/* ---------- scroll reveal ---------- */
#opnew .rv {
    opacity: 0;
    transform: translatey(46px);
    transition: opacity 0.9s cubic-bezier(0.16, 0.84, 0.3, 1), transform 0.9s cubic-bezier(0.16, 0.84, 0.3, 1)
    }
#opnew .rv.left {
    transform: translatex(-56px)
    }
#opnew .rv.right {
    transform: translatex(56px)
    }
#opnew .rv.zoom {
    transform: scale(0.9)
    }
#opnew .rv.vis {
    opacity: 1;
    transform: none
    }
/* ---------- scroll progress ---------- */
#opnew #opnewProgress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0;
    background: linear-gradient(90deg, var(--green-accent), var(--blue-bright));
    z-index: 1000;
    transition: width 0.1s linear
    }
/* ============================================================
   HEADER (placeholder — the live site header replaces this)
   ============================================================ */
/* ============================================================
   SECTION 1 — HERO
   ============================================================ */
#opnew .hero {
    display: flex;
    align-items: center;
    background: var(--grad-hero);
    color: #fff;
    overflow: hidden;
    padding: 150px 0 100px
    }
#opnew .hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
    }
#opnew .hero-bg .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.5;
    animation: drift 14s ease-in-out infinite alternate
    }
#opnew .orb.o1 {
    width: 520px;
    height: 520px;
    background: #2F97F7;
    top: -170px;
    right: -120px
    }
#opnew .orb.o2 {
    width: 420px;
    height: 420px;
    background: #96C121;
    bottom: -190px;
    left: -130px;
    animation-delay: -5s;
    opacity: 0.28
    }
#opnew .orb.o3 {
    width: 300px;
    height: 300px;
    background: var(--purple-vs);
    top: 44%;
    left: 34%;
    animation-delay: -9s;
    opacity: 0.22
    }
@keyframes drift {
    from {
        transform: translate(0, 0) scale(1)
        } to {
        transform: translate(60px, -45px) scale(1.15)
        }
    }
#opnew .hero-grid-lines {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at 28% 42%, #000 30%, transparent 76%);
    mask-image: radial-gradient(ellipse at 28% 42%, #000 30%, transparent 76%)
    }
#opnew #nodes {
    position: absolute;
    inset: 0;
    overflow: hidden
    }
#opnew .node {
    position: absolute;
    bottom: -10vh;
    border-radius: 50%;
    background: rgba(150, 193, 33, 0.5);
    animation: riseup linear infinite;
    box-shadow: 0 0 12px rgba(150, 193, 33, 0.25)
    }
@keyframes riseup {
    0% {
        transform: translateY(0);
        opacity: 0
        } 10% {
        opacity: .85
        } 100% {
        transform: translateY(-118vh);
        opacity: 0
        }
    }
#opnew .hero .container {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2
    }
#opnew .crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 24px
    }
#opnew .crumbs a:hover {
    color: var(--green-accent)
    }
#opnew .crumbs .sep {
    opacity: 0.5
    }
#opnew .hero .tagline {
    color: #BFE06A
    }
#opnew .hero h1 {
    font-family: var(--font-head);
    font-size: clamp(34px, 4.8vw, 60px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.5px
    }
#opnew .hero h1 .em {
    font-style: italic;
    color: #BFE06A;
    padding-bottom: 2px;
    background-image: linear-gradient(rgba(150, 193, 33, 0.3), rgba(150, 193, 33, 0.3));
    background-size: 100% 9px;
    background-position: 0 90%;
    background-repeat: no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone
    }
#opnew .hero p.lede {
    margin-top: 22px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 540px
    }
#opnew .hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px
    }
/* --- hero process ring (animated) --- */
#opnew .ring-wrap {
    position: relative;
    width: min(470px, 100%);
    margin-inline: auto;
    aspect-ratio: 1
    }
#opnew .ring {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible
    }
#opnew .ring-halo {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 1
    }
#opnew .ring-dash {
    fill: none;
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 1.5;
    stroke-dasharray: 2 11;
    stroke-linecap: round;
    transform-box: view-box;
    transform-origin: 210px 210px;
    animation: ringspin 44s linear infinite
    }
@keyframes ringspin {
    to {
        transform: rotate(360deg)
        }
    }
#opnew .ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.14);
    stroke-width: 6
    }
#opnew .ring-prog {
    fill: none;
    stroke: url(#rgrad);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 942.48;
    stroke-dashoffset: 942.48;
    transition: stroke-dashoffset 1.05s cubic-bezier(0.4, 0.9, 0.3, 1)
    }
#opnew .rn-c {
    fill: #154471;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 2;
    transition: fill 0.5s, stroke 0.5s
    }
#opnew .rn-t {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 700;
    fill: rgba(255, 255, 255, 0.6);
    text-anchor: middle;
    dominant-baseline: central;
    transition: fill 0.5s
    }
#opnew .rn.past .rn-c {
    fill: #2F97F7;
    stroke: #2F97F7
    }
#opnew .rn.past .rn-t {
    fill: #fff
    }
#opnew .rn.on .rn-c {
    fill: #96C121;
    stroke: #BFE06A
    }
#opnew .rn.on .rn-t {
    fill: #0F3055
    }
#opnew .rn-p {
    fill: none;
    stroke: #BFE06A;
    stroke-width: 2;
    opacity: 0
    }
#opnew .rn.on .rn-p {
    animation: rpulse 2.1s ease-out infinite
    }
@keyframes rpulse {
    0% {
        r: 17;
        opacity: .7
        } 100% {
        r: 33;
        opacity: 0
        }
    }
#opnew .ring-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 54%;
    text-align: center;
    pointer-events: none
    }
#opnew .rh-ico {
    position: relative;
    height: 32px;
    margin-bottom: 14px
    }
#opnew .rh-ico svg {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translatex(-50%) scale(0.78);
    opacity: 0;
    transition: opacity 0.45s, transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2)
    }
#opnew .rh-ico svg.on {
    opacity: 1;
    transform: translatex(-50%) scale(1)
    }
#opnew .rh-num {
    display: block;
    font-family: var(--font-head);
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1.5px;
    color: #fff
    }
#opnew .rh-name {
    display: block;
    margin-top: 9px;
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #BFE06A;
    min-height: 2.7em
    }
#opnew .rh-of {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5)
    }
#opnew .rh-num, #opnew .rh-name {
    transition: opacity 0.28s, transform 0.28s
    }
#opnew .ring-wrap.swap .rh-num, #opnew .ring-wrap.swap .rh-name {
    opacity: 0;
    transform: translatey(6px)
    }
/* ============================================================
   SECTION 2 — JOURNEY (full-height timeline, one visual per step)
   rail + dots share a single --rail axis so they can never drift
   ============================================================ */
#opnew .journey {
    padding: 110px 0 120px;
    background: var(--bg-lighter);
    overflow-x: clip
    }
#opnew .jr-head {
    max-width: 840px
    }
/* sticky jump nav */
#opnew .tl-nav {
    position: sticky;
    top: 74px;
    z-index: 60;
    margin-top: 34px;
    padding: 7px;
    border-radius: 50px;
    background: rgba(244, 247, 250, 0.97);
    backdrop-filter: blur(12px);
    border: 1px solid #E1EAF4;
    box-shadow: 0 8px 24px rgba(16, 56, 94, 0.08)
    }
#opnew .tl-nav::before, #opnew .tl-nav::after {
    content: "";
    position: absolute;
    top: 7px;
    bottom: 7px;
    width: 34px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 2
    }
#opnew .tl-nav::before {
    left: 7px;
    border-radius: 50px 0 0 50px;
    background: linear-gradient(90deg, #F4F7FA, rgba(244, 247, 250, 0))
    }
#opnew .tl-nav::after {
    right: 7px;
    border-radius: 0 50px 50px 0;
    background: linear-gradient(270deg, #F4F7FA, rgba(244, 247, 250, 0))
    }
#opnew .tl-nav.more-l::before, #opnew .tl-nav.more-r::after {
    opacity: 1
    }
#opnew .tl-nav-in {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
    }
#opnew .tl-nav-in::-webkit-scrollbar {
    display: none
    }
#opnew .tl-nav button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    border: 0;
    background: transparent;
    border-radius: 50px;
    padding: 9px 17px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--body-grey);
    cursor: pointer;
    transition: background 0.35s, color 0.35s
    }
#opnew .tl-nav button b {
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.9px;
    color: #9DB0C6;
    transition: color 0.35s
    }
#opnew .tl-nav button:hover {
    background: #E9F1F8;
    color: var(--blue-brand)
    }
#opnew .tl-nav button.on {
    background: var(--navy-deep);
    color: #fff
    }
#opnew .tl-nav button.on b {
    color: var(--green-accent)
    }
#opnew .tl {
    --rail: 34px;
    --pad: 100px;
    position: relative;
    margin-top: 40px;
    padding-left: var(--pad)
    }
#opnew .tl-line {
    position: absolute;
    left: var(--rail);
    transform: translatex(-50%);
    top: 0;
    height: 0;
    width: 3px;
    border-radius: 3px;
    background: #DCE7F3;
    overflow: hidden
    }
#opnew .tl-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--green-accent), var(--blue-bright))
    }
#opnew .tl-row {
    position: relative;
    margin-bottom: 26px
    }
#opnew .tl-row:last-child {
    margin-bottom: 0
    }
#opnew .tl-dot {
    position: absolute;
    left: calc(var(--rail) - var(--pad));
    top: 54px;
    transform: translatex(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #DCE7F3;
    display: grid;
    place-items: center;
    z-index: 2;
    transition: background 0.45s, border-color 0.45s, transform 0.45s, box-shadow 0.45s
    }
#opnew .tl-dot svg {
    opacity: 0;
    transition: opacity 0.35s
    }
#opnew .tl-row.past .tl-dot {
    background: var(--blue-bright);
    border-color: var(--blue-bright)
    }
#opnew .tl-row.past .tl-dot svg {
    opacity: 1
    }
#opnew .tl-row.active .tl-dot {
    background: var(--green-accent);
    border-color: var(--green-accent);
    transform: translatex(-50%) scale(1.22);
    box-shadow: 0 0 0 7px rgba(150, 193, 33, 0.16)
    }
#opnew .tl-card {
    background: #fff;
    border: 1px solid #E4ECF6;
    border-radius: var(--radius-card);
    padding: 32px 34px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 38px;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.5s, border-color 0.5s
    }
#opnew .tl-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--green-accent), var(--blue-bright));
    transform: scaley(0);
    transform-origin: top;
    transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.3, 1)
    }
#opnew .tl-row.active .tl-card {
    box-shadow: var(--shadow-hover);
    border-color: transparent;
    transform: translatey(-3px)
    }
#opnew .tl-row.active .tl-card::before {
    transform: scaley(1)
    }
#opnew .tl-num {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.2px;
    color: #9DB0C6;
    margin-bottom: 10px;
    transition: color 0.45s
    }
#opnew .tl-num::before {
    content: "";
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #DCE7F3;
    transition: background 0.45s
    }
#opnew .tl-row.active .tl-num {
    color: #5f8f2b
    }
#opnew .tl-row.active .tl-num::before {
    background: var(--green-accent)
    }
#opnew .tl-card h3 {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 650;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 11px
    }
#opnew .tl-card p {
    color: var(--body-grey);
    font-size: 15.5px
    }
#opnew .tl-visual {
    border-radius: 16px;
    background: linear-gradient(155deg, #F2F7FC, #EDF5E4);
    border: 1px solid #E4ECF6;
    padding: 12px;
    overflow: hidden
    }
#opnew .tl-visual svg {
    display: block;
    width: 100%;
    height: auto
    }
#opnew .tl-visual .vs {
    opacity: 0;
    transform: translatey(10px);
    transition: opacity 0.8s 0.25s cubic-bezier(0.16, 0.84, 0.3, 1), transform 0.8s 0.25s cubic-bezier(0.16, 0.84, 0.3, 1)
    }
#opnew .tl-row.vis .tl-visual .vs {
    opacity: 1;
    transform: none
    }
#opnew .tl-visual .sweep {
    animation: sweep 3.2s ease-in-out infinite
    }
@keyframes sweep {
    0%, 100% {
        transform: translateY(0)
        } 50% {
        transform: translateY(58px)
        }
    }
#opnew .tl-visual .blink {
    animation: blink 1.6s steps(1) infinite
    }
@keyframes blink {
    0%, 49% {
        opacity: 1
        } 50%, 100% {
        opacity: .15
        }
    }
/* ============================================================
   SECTION 3 — PRICING MODELS (tabs)
   ============================================================ */
#opnew .pricing {
    padding: 110px 0;
    background: var(--grad-band);
    color: #fff;
    overflow: hidden
    }
#opnew .pricing::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 22%, transparent 74%);
    mask-image: radial-gradient(ellipse at 60% 40%, #000 22%, transparent 74%);
    pointer-events: none
    }
#opnew .pricing .container {
    position: relative;
    z-index: 2
    }
#opnew .pm-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 44px
    }
#opnew .pm-tab {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    border-radius: 50px;
    padding: 12px 24px;
    cursor: pointer;
    transition: background 0.4s, color 0.4s, border-color 0.4s, transform 0.4s, box-shadow 0.4s
    }
#opnew .pm-tab svg {
    stroke: currentColor;
    flex-shrink: 0
    }
#opnew .pm-tab:hover {
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
    transform: translatey(-2px)
    }
#opnew .pm-tab.on {
    background: var(--green-accent);
    border-color: var(--green-accent);
    color: #0F3055;
    box-shadow: 0 12px 28px rgba(150, 193, 33, 0.34)
    }
#opnew .pm-stage {
    margin-top: 30px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    padding: 44px 46px;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden
    }
#opnew .pm-panel {
    display: none
    }
#opnew .pm-panel.on {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 48px;
    align-items: center;
    animation: fadeup 0.55s cubic-bezier(0.2, 0.8, 0.3, 1)
    }
@keyframes fadeup {
    from {
        opacity: 0;
        transform: translateY(18px)
        } to {
        opacity: 1;
        transform: none
        }
    }
#opnew .pm-panel .pm-idx {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #BFE06A;
    margin-bottom: 10px;
    display: block
    }
#opnew .pm-panel h3 {
    font-family: var(--font-head);
    font-size: clamp(23px, 2.5vw, 30px);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 14px
    }
#opnew .pm-panel p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 16.5px;
    max-width: 70ch
    }
#opnew .pm-art {
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 10px;
    overflow: hidden
    }
#opnew .pm-art svg {
    display: block;
    width: 100%;
    height: auto
    }
/* entry animations replay on every tab switch: display:none resets them */
#opnew .pmA {
    opacity: 0;
    animation: pmIn 0.6s cubic-bezier(0.2, 0.85, 0.3, 1) forwards
    }
@keyframes pmIn {
    from {
        opacity: 0;
        transform: translateY(10px)
        } to {
        opacity: 1;
        transform: none
        }
    }
#opnew .pmS {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: pmPop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.35) forwards
    }
@keyframes pmPop {
    from {
        opacity: 0;
        transform: scale(.66)
        } to {
        opacity: 1;
        transform: scale(1)
        }
    }
#opnew .pmGrow {
    transform-box: fill-box;
    transform-origin: left center;
    animation: pmGrowX 1.1s cubic-bezier(0.3, 0.9, 0.3, 1) both
    }
@keyframes pmGrowX {
    from {
        transform: scaleX(0)
        } to {
        transform: scaleX(1)
        }
    }
#opnew .pmFlow {
    stroke-dasharray: 5 7;
    animation: pmFlowD 1.6s linear infinite
    }
@keyframes pmFlowD {
    to {
        stroke-dashoffset: -24
        }
    }
#opnew .pmDraw {
    stroke-dasharray: 190;
    stroke-dashoffset: 190;
    animation: pmDrawD 1.4s 0.85s ease forwards
    }
@keyframes pmDrawD {
    to {
        stroke-dashoffset: 0
        }
    }
#opnew .pmSpin {
    transform-box: view-box;
    animation: pmSpinR 9s linear infinite
    }
@keyframes pmSpinR {
    to {
        transform: rotate(360deg)
        }
    }
#opnew .pmBlink {
    animation: pmBlinkO 1.35s steps(1) infinite
    }
@keyframes pmBlinkO {
    0%, 49% {
        opacity: 1
        } 50%, 100% {
        opacity: .18
        }
    }
#opnew .pmPulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: pmPulseS 2.4s ease-in-out infinite
    }
@keyframes pmPulseS {
    0%, 100% {
        transform: scale(1);
        opacity: .85
        } 50% {
        transform: scale(1.09);
        opacity: 1
        }
    }
#opnew .pmDrop {
    animation: pmDropY 0.5s 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) both
    }
@keyframes pmDropY {
    from {
        transform: translateY(-7px)
        } to {
        transform: translateY(0)
        }
    }
/* ============================================================
   SECTION 4 — WHOM WE WORK WITH (slider)
   ============================================================ */
#opnew .clients {
    padding: 110px 0;
    background: var(--white);
    overflow: hidden
    }
#opnew .cl-head {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 52px;
    align-items: start
    }
#opnew .cl-head .sec-sub {
    max-width: none;
    font-size: 16px
    }
#opnew .cl-shell {
    margin-top: 52px;
    position: relative
    }
#opnew .cl-track {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 2px 26px;
    scrollbar-width: none;
    -ms-overflow-style: none
    }
#opnew .cl-track::-webkit-scrollbar {
    display: none
    }
#opnew .cl-card {
    flex: 0 0 calc((100% - 44px)/3);
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid #E4ECF6;
    border-radius: var(--radius-card);
    padding: 32px 30px 34px;
    position: relative;
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.45s, border-color 0.45s
    }
#opnew .cl-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 0;
    background: linear-gradient(90deg, var(--green-accent), var(--blue-bright));
    transition: width 0.5s
    }
#opnew .cl-card:hover {
    transform: translatey(-8px);
    box-shadow: var(--shadow-hover);
    border-color: transparent
    }
#opnew .cl-card:hover::after {
    width: 100%
    }
#opnew .cl-ico {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: linear-gradient(140deg, #EAF3E2, #E7F1FB);
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    transition: transform 0.45s
    }
#opnew .cl-card:hover .cl-ico {
    transform: rotate(-7deg) scale(1.06)
    }
#opnew .cl-ico svg {
    stroke: var(--blue-brand)
    }
#opnew .cl-card:hover .cl-ico svg {
    stroke: #5f8f2b
    }
#opnew .cl-card h3 {
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 650;
    line-height: 1.32;
    color: var(--ink);
    margin-bottom: 10px
    }
#opnew .cl-card p {
    color: var(--body-grey);
    font-size: 14.8px
    }
#opnew .cl-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 6px
    }
#opnew .cl-dots {
    display: flex;
    gap: 8px
    }
#opnew .cl-dots button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: #D3DFEC;
    cursor: pointer;
    transition: width 0.35s, background 0.35s
    }
#opnew .cl-dots button.on {
    width: 26px;
    border-radius: 6px;
    background: var(--green-accent)
    }
#opnew .cl-arrows {
    display: flex;
    gap: 10px
    }
#opnew .cl-arrows button {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.6px solid #DCE7F3;
    background: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color 0.3s, background 0.3s, transform 0.3s, opacity 0.3s
    }
#opnew .cl-arrows button svg {
    stroke: var(--blue-brand);
    transition: stroke 0.3s
    }
#opnew .cl-arrows button:hover:not(:disabled) {
    border-color: var(--green-accent);
    background: var(--green-accent);
    transform: translatey(-2px)
    }
#opnew .cl-arrows button:hover:not(:disabled) svg {
    stroke: #fff
    }
#opnew .cl-arrows button:disabled {
    opacity: 0.36;
    cursor: default
    }
/* ============================================================
   SECTION 5 — CTA / ENQUIRY
   ============================================================ */
#opnew .cta {
    padding: 110px 0;
    background: var(--grad-hero);
    color: #fff;
    overflow: hidden
    }
#opnew .cta-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
    }
#opnew .cta-bg .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.42;
    animation: drift 16s ease-in-out infinite alternate
    }
#opnew .cta-bg .orb.c1 {
    width: 460px;
    height: 460px;
    background: #2F97F7;
    top: -140px;
    left: -100px
    }
#opnew .cta-bg .orb.c2 {
    width: 380px;
    height: 380px;
    background: #96C121;
    bottom: -160px;
    right: -90px;
    animation-delay: -6s;
    opacity: 0.26
    }
#opnew .cta .container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 0.92fr;
    gap: 60px;
    align-items: center
    }
#opnew .cta h2 {
    font-family: var(--font-head);
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 700;
    line-height: 1.22
    }
#opnew .cta h2 .em {
    font-style: italic;
    color: #BFE06A;
    padding-bottom: 1px;
    background-image: linear-gradient(rgba(150, 193, 33, 0.42), rgba(150, 193, 33, 0.42));
    background-size: 100% 6px;
    background-position: 0 92%;
    background-repeat: no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone
    }
#opnew .cta p.lede {
    margin-top: 16px;
    font-size: 17px;
    color: rgba(255, 255, 255, 0.84);
    max-width: 520px
    }
#opnew .cta-list {
    list-style: none;
    margin-top: 30px;
    display: grid;
    gap: 14px
    }
#opnew .cta-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.92)
    }
#opnew .cta-list li .ck {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(150, 193, 33, 0.18);
    border: 1px solid rgba(150, 193, 33, 0.45);
    display: grid;
    place-items: center
    }
/* ---------- enquiry card ---------- */
#opnew .form-card {
    background: #fff;
    color: var(--ink);
    border-radius: 26px;
    padding: 36px 34px;
    box-shadow: 0 30px 70px rgba(6, 26, 48, 0.38);
    position: relative;
    overflow: hidden
    }
#opnew .form-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--green-accent), var(--blue-bright))
    }
#opnew .form-card h3 {
    font-family: var(--font-head);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.25
    }
#opnew .form-card .fc-sub {
    margin-top: 8px;
    font-size: 14.5px;
    color: var(--body-grey)
    }
#opnew .frm {
    margin-top: 22px;
    display: grid;
    gap: 15px
    }
#opnew .fld {
    position: relative
    }
#opnew .fld label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--navy-deep);
    margin-bottom: 6px
    }
#opnew .fld label .req {
    color: #D2483F;
    margin-left: 2px
    }
#opnew .fld label .reqnote {
    font-weight: 500;
    color: var(--body-grey);
    font-size: 11.5px;
    letter-spacing: 0
    }
#opnew .fld input, #opnew .fld textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
    padding: 13px 15px;
    border: 1.6px solid #E1E9F3;
    border-radius: 12px;
    background: var(--bg-lighter);
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
    outline: none
    }
#opnew .fld textarea {
    resize: vertical;
    min-height: 92px
    }
#opnew .fld input:focus, #opnew .fld textarea:focus {
    border-color: var(--blue-brand);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(29, 102, 171, 0.1)
    }
#opnew .fld input.bad, #opnew .fld textarea.bad {
    border-color: #D2483F;
    background: #FEF5F4
    }
#opnew .fld .err {
    display: none;
    font-size: 12px;
    color: #D2483F;
    margin-top: 5px;
    font-weight: 500
    }
#opnew .fld.show-err .err {
    display: block
    }
#opnew .frm-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px
    }
#opnew .cap-wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: end
    }
#opnew .cap-q {
    background: linear-gradient(135deg, var(--navy-deep), var(--blue-brand));
    color: #fff;
    border-radius: 12px;
    padding: 13px 18px;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    align-self: end;
    line-height: 1.35
    }
#opnew .frm .btn {
    width: 100%;
    margin-top: 4px
    }
#opnew .form-ok {
    display: none;
    text-align: center;
    padding: 18px 6px 6px
    }
#opnew .form-ok.on {
    display: block;
    animation: popin 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2)
    }
@keyframes popin {
    from {
        opacity: 0;
        transform: scale(.9)
        } to {
        opacity: 1;
        transform: none
        }
    }
#opnew .form-ok .tick {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: rgba(150, 193, 33, 0.14);
    display: grid;
    place-items: center;
    margin: 0 auto 16px
    }
#opnew .form-ok h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy-deep);
    font-family: var(--font-head)
    }
#opnew .form-ok p {
    font-size: 14.5px;
    color: var(--body-grey);
    margin-top: 8px
    }
#opnew .form-ok button {
    margin-top: 16px;
    background: none;
    border: 0;
    color: var(--blue-brand);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline
    }
#opnew .hidden {
    display: none !important
    }
/* ============================================================
   FOOTER (placeholder — live site footer replaces this)
   ============================================================ */
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
#opnew .hero .container, #opnew .cta .container {
    grid-template-columns: 1fr;
    gap: 48px
    }
#opnew .hero p.lede, #opnew .cta p.lede {
    max-width: none
    }
#opnew .ring-wrap {
    max-width: 400px
    }
#opnew .form-card {
    max-width: 620px
    }
#opnew .tl-card {
    grid-template-columns: 1fr;
    gap: 26px
    }
#opnew .tl-visual {
    max-width: 420px
    }
#opnew .cl-head {
    grid-template-columns: 1fr;
    gap: 20px
    }
#opnew .pm-panel.on {
    grid-template-columns: 1fr;
    gap: 28px
    }
#opnew .pm-art {
    max-width: 380px
    }
}
@media (max-width: 760px) {
#opnew .hero {
    padding: 120px 0 70px
    }
#opnew .journey, #opnew .pricing, #opnew .clients, #opnew .cta {
    padding: 78px 0
    }
#opnew .tl {
    --rail: 19px;
    --pad: 52px
    }
#opnew .tl-dot {
    top: 32px;
    width: 22px;
    height: 22px;
    border-width: 2.5px
    }
#opnew .tl-card {
    padding: 26px 22px;
    gap: 22px
    }
#opnew .tl-card h3 {
    font-size: 19.5px
    }
#opnew .tl-card p {
    font-size: 15px
    }
#opnew .tl-visual {
    max-width: none
    }
#opnew .cl-card {
    flex: 0 0 88%
    }
#opnew .pm-stage {
    padding: 28px 22px
    }
#opnew .pm-tab {
    font-size: 14px;
    padding: 11px 18px
    }
#opnew .frm-row {
    grid-template-columns: 1fr
    }
#opnew .cap-wrap {
    grid-template-columns: 1fr;
    align-items: stretch
    }
#opnew .cap-q {
    text-align: center
    }
#opnew .form-card {
    padding: 28px 22px
    }
#opnew .cl-nav {
    flex-direction: column-reverse;
    gap: 16px
    }
}
@media (prefers-reduced-motion: reduce) {
#opnew *, #opnew *::before, #opnew *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important
    }
#opnew .rv {
    opacity: 1;
    transform: none
    }
#opnew .cl-track {
    scroll-behavior: auto
    }
}
#opnew #gform_wrapper_78{margin:0}
#opnew #gform_wrapper_78 .gform_fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#opnew #gform_wrapper_78 .gfield{margin:0;grid-column:auto;min-width:0}
#opnew #gform_wrapper_78 .gform_fields > .gfield:first-child{grid-column:1 / -1}
#opnew #gform_wrapper_78 .gfield--type-textarea,#opnew #gform_wrapper_78 .gfield--type-math_captcha,#opnew #gform_wrapper_78 .gfield:has(textarea){grid-column:1 / -1}
#opnew #gform_wrapper_78 .gfield_label{display:block;margin:0 0 6px;font:600 13px var(--font-body);color:#143a5f}
#opnew #gform_wrapper_78 .gfield_required{color:var(--green-accent);margin-left:3px;font-weight:700}
#opnew #gform_wrapper_78 input[type=text],#opnew #gform_wrapper_78 input[type=email],#opnew #gform_wrapper_78 input[type=tel],#opnew #gform_wrapper_78 input[type=number],#opnew #gform_wrapper_78 textarea{width:100%;padding:13px 15px;border:1.5px solid #DCE5F0;border-radius:12px;background:var(--bg-lighter,#F4F7FA);font:400 15px var(--font-body);color:var(--ink);outline:none;transition:border-color .3s,box-shadow .3s,background .3s}
#opnew #gform_wrapper_78 textarea{resize:vertical;min-height:90px;line-height:1.5}
#opnew #gform_wrapper_78 ::placeholder{color:#9aa7b5;opacity:1}
#opnew #gform_wrapper_78 input:focus,#opnew #gform_wrapper_78 textarea:focus{border-color:var(--blue-brand);background:#fff;box-shadow:0 0 0 4px rgba(29,102,171,.12)}
#opnew #gform_wrapper_78 .gfield--type-math_captcha .ginput_container{display:flex;align-items:center;gap:12px;width:100%}
#opnew #gform_wrapper_78 .gfield--type-math_captcha .ginput_container > label{flex:0 0 auto;white-space:nowrap}
#opnew #gform_wrapper_78 .gfield--type-math_captcha .ginput_container input{flex:1 1 auto;width:100%;min-width:0}
#opnew #gform_wrapper_78 .gform_footer{margin:4px 0 0;padding:0}
#opnew #gform_wrapper_78 .gform_footer input[type=submit],#opnew #gform_wrapper_78 .gform_button{width:100%;min-height:54px;border:0;border-radius:50px;cursor:pointer;color:#fff;font:700 16px var(--font-head);background:linear-gradient(100deg,#8CBE1E,#A4CE2E,#B6D64A);box-shadow:0 10px 24px rgba(150,193,33,.4);transition:transform .3s,box-shadow .3s,background .3s}
#opnew #gform_wrapper_78 .gform_footer input[type=submit]:hover,#opnew #gform_wrapper_78 .gform_button:hover{transform:translateY(-3px);background:#88b117;box-shadow:0 16px 34px rgba(150,193,33,.55)}
@media(max-width:560px){#opnew #gform_wrapper_78 .gform_fields{grid-template-columns:1fr}}


/* force white headings on dark sections (beat theme) */
#opnew .hero h1{color:#fff !important}
#opnew .hero h1 .grn,#opnew .hero h1 .em{color:var(--green-accent) !important}
#opnew .hero .sub,#opnew .hero .lede,#opnew .hero p{color:rgba(255,255,255,.85) !important}
#opnew .light h2,#opnew .light h2.sec-title{color:#fff !important}
#opnew .light h2 .em{color:#BFE06A !important}
#opnew .light .tagline{color:#BFE06A !important}
#opnew .light .sec-sub{color:rgba(255,255,255,.8) !important}
#opnew .cta h2{color:#fff !important}
#opnew .cta h2 .em{color:#BFE06A !important}
#opnew .cta .lede,#opnew .cta p{color:rgba(255,255,255,.85) !important}

/* restore tablet 2-col slider cards (cssutils dropped it) */
@media (max-width: 1024px){ #opnew .cl-card{ flex: 0 0 calc((100% - 22px)/2) } }
@media (max-width: 640px){ #opnew .cl-card{ flex: 0 0 88% } }

/* pricing panel headings white (dark section) */
#opnew .pricing .pm-panel h3,
#opnew .pricing .pm-panel h2,
#opnew .pm-panel h3{ color:#fff !important }

/* contact form card — visible subtitle + submit button spacing */
#opnew .form-card .fc-sub{ color:#4E597B !important; margin-bottom: 10px !important; }
#opnew #gform_wrapper_78 .gform_footer{ margin-top:20px !important }
#opnew #gform_wrapper_78 .gform_footer input[type=submit],
#opnew #gform_wrapper_78 .gform_button{ margin-top:10px !important }

/* restore original paragraph sizes (theme was shrinking them) */
#opnew .lede{ font-size:18px !important }
#opnew .sec-sub{ font-size:17px !important }
#opnew .tl-card p{ font-size:15.5px !important }
#opnew .pm-panel p{ font-size:16.5px !important }
#opnew .cl-card p{ font-size:14.8px !important }
#opnew .form-card .fc-sub{ font-size:14.5px !important }
#opnew .hero .sub{ font-size:18px !important }
#opnew .feat-copy p, #opnew .step p, #opnew .why-item p{ font-size:15.5px !important }
@media(max-width:768px){
  #opnew .lede{ font-size:17px !important }
  #opnew .sec-sub{ font-size:16px !important }
  #opnew .tl-card p{ font-size:15px !important }
}