:root {
    --blue: #0081c6;
    --deep: #15458b;
    --navy: #163463;
    --cyan: #19bfd5;
    --ice: #eefbfe;
    --ink: #24344d;
    --muted: #64738a;
    --line: #d6edf2;
    --white: #fff;
    --shadow: 0 24px 70px rgba(30, 87, 126, .16)
}

*,
*::before,
*::after {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    overflow-x: hidden
}

body {
    margin: 0;
    overflow-x: hidden;
    background: #fff;
    color: var(--ink);
    font-family: "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit
}

h1,
h2,
h3,
p,
figure {
    margin: 0
}

img {
    display: block;
    max-width: 100%
}

.shell {
    width: min(1180px, calc(100% - 40px));
    margin: auto
}

.skip {
    position: absolute;
    left: 1rem;
    top: .75rem;
    z-index: 100;
    padding: .8rem;
    border-radius: 8px;
    background: #fff;
    transform: translateY(-180%);
    transition: transform .18s ease
}

.skip:focus {
    transform: translateY(0)
}

.utility {
    border-bottom: 1px solid var(--line);
    color: #23a8c5
}

.utility-inner {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .7rem
}

.utility-inner>a {
    font-weight: 650
}

.utility-inner>span {
    margin-right: auto;
    padding-left: 1rem;
    border-left: 1px solid var(--line)
}

.language {
    display: flex;
    gap: .15rem
}

.language button {
    width: 30px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #65a9bb;
    font-size: .62rem;
    font-weight: 750;
    cursor: pointer
}

.language button[aria-pressed="true"] {
    background: var(--blue);
    color: #fff;
    border-radius: 6px
}

.header {
    background: rgba(255, 255, 255, .95);
    position: relative;
    z-index: 20
}

.nav-wrap {
    min-height: 104px;
    display: flex;
    align-items: center;
    gap: 2.5rem
}

.brand {
    margin-right: auto
}

.brand img {
    width: 238px;
    height: auto
}

.nav-wrap nav {
    display: flex;
    gap: 2rem
}

.nav-wrap nav a {
    font-size: .75rem;
    font-weight: 700;
    color: #24446d
}

.nav-wrap nav a:hover {
    color: var(--blue)
}

.nav-cta,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.35rem;
    border-radius: 999px;
    color: #fff;
    font-size: .7rem;
    font-weight: 750;
    background: linear-gradient(115deg, var(--cyan), #1179bb 52%, #171b85);
    box-shadow: 0 10px 30px rgba(17, 121, 187, .2)
}

.menu {
    display: none;
    border: 0;
    background: transparent
}

.menu span {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--navy);
    margin: 5px
}

.hero {
    min-height: 700px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 10% 20%, rgba(20, 185, 215, .09), transparent 26%), radial-gradient(circle at 95% 8%, rgba(0, 129, 198, .09), transparent 23%), #fff
}

.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 95px;
    background: linear-gradient(to top, #fff, transparent);
    pointer-events: none
}

.hero-grid {
    min-height: 680px;
    display: grid;
    grid-template-columns: 1fr .95fr;
    gap: 4rem;
    align-items: center
}

.hero-copy {
    position: relative;
    z-index: 3;
    padding: 4rem 0
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--cyan);
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em
}

.eyebrow::before {
    content: "";
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--cyan))
}

.hero h1 {
    max-width: 710px;
    margin: 1.4rem 0 1.5rem;
    font-size: clamp(3.8rem, 6.5vw, 6.4rem);
    line-height: .94;
    letter-spacing: -.065em;
    color: var(--navy)
}

.hero h1 em {
    font-style: normal;
    color: transparent;
    background: linear-gradient(105deg, var(--blue), var(--cyan));
    background-clip: text;
    -webkit-background-clip: text;
    border-bottom: 5px solid var(--cyan)
}

.hero-copy>p {
    max-width: 630px;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.8
}

.hero-actions {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-top: 2rem
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: #3d6f94;
    font-size: .72rem;
    font-weight: 700
}

.text-link i {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 2px solid var(--cyan);
    border-radius: 50%;
    color: var(--cyan);
    font-size: .55rem;
    font-style: normal
}

.trust-line {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
    font-size: .64rem;
    color: #7890a1
}

.trust-line b {
    color: var(--navy)
}

.hero-visual {
    min-height: 560px;
    position: relative;
    display: grid;
    place-items: center
}

.shape-back,
.shape-mid,
.photo-mask {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 31% 69% 61% 39%/42% 34% 66% 58%;
    transform: rotate(18deg)
}

.shape-back {
    background: linear-gradient(145deg, #1dd1dd, #126db7 58%, #151178);
    transform: rotate(31deg) translate(25px, -10px)
}

.shape-mid {
    width: 445px;
    height: 445px;
    border: 2px solid rgba(28, 178, 205, .25);
    background: transparent;
    transform: rotate(49deg)
}

.photo-mask {
    overflow: hidden;
    background: #dff6fb;
    box-shadow: var(--shadow)
}

.photo-mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: rotate(-18deg) scale(1.27)
}

.orbit {
    position: absolute;
    border: 2px solid rgba(25, 191, 213, .24);
    border-radius: 50%
}

.orbit-one {
    width: 500px;
    height: 500px
}

.orbit-two {
    width: 535px;
    height: 535px;
    border-style: dashed;
    opacity: .55
}

.hero-badge {
    position: absolute;
    left: 4%;
    bottom: 8%;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: .8rem;
    background: #fff;
    padding: .9rem 1.1rem;
    border-radius: 14px;
    box-shadow: 0 14px 45px rgba(28, 83, 117, .18)
}

.hero-badge img {
    width: 43px
}

.hero-badge span {
    color: var(--navy);
    font-size: .65rem;
    font-weight: 750;
    line-height: 1.35
}

.hero-visual::after {
    content: "········\A········\A········";
    white-space: pre;
    position: absolute;
    right: 0;
    bottom: 4%;
    color: var(--cyan);
    font-size: 1.25rem;
    line-height: .55;
    letter-spacing: .3rem;
    opacity: .35
}

[dir="rtl"] body {
    font-family: Tahoma, Arial, sans-serif
}

[dir="rtl"] .brand {
    margin-right: 0;
    margin-left: auto
}

[dir="rtl"] .utility-inner>span {
    margin-right: 0;
    margin-left: auto;
    padding-left: 0;
    padding-right: 1rem;
    border-left: 0;
    border-right: 1px solid var(--line)
}

[dir="rtl"] .eyebrow::before {
    order: 2
}

@media(max-width:950px) {
    .nav-wrap nav {
        display: none
    }

    .menu {
        display: block
    }

    .nav-cta {
        display: none
    }

    .hero-grid {
        grid-template-columns: 1fr
    }

    .hero-copy {
        padding-bottom: 0
    }

    .hero-visual {
        min-height: 560px
    }

    .shape-back,
    .photo-mask {
        width: 390px;
        height: 390px
    }

    .shape-mid {
        width: 420px;
        height: 420px
    }

    .orbit-one {
        width: 460px;
        height: 460px
    }

    .orbit-two {
        width: 495px;
        height: 495px
    }
}

@media(max-width:560px) {
    .shell {
        width: calc(100% - 28px)
    }

    .utility-inner>span {
        display: none
    }

    .brand img {
        width: 188px
    }

    .nav-wrap {
        min-height: 84px
    }

    .hero-grid {
        min-height: 0
    }

    .hero-copy {
        padding-top: 4rem
    }

    .hero h1 {
        font-size: 3.45rem
    }

    .hero-copy>p {
        font-size: .9rem
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column
    }

    .trust-line {
        align-items: flex-start;
        flex-direction: column
    }

    .hero-visual {
        min-height: 430px
    }

    .shape-back,
    .photo-mask {
        width: 295px;
        height: 295px
    }

    .shape-mid {
        width: 320px;
        height: 320px
    }

    .orbit-one {
        width: 340px;
        height: 340px
    }

    .orbit-two {
        width: 370px;
        height: 370px
    }

    .hero-badge {
        left: 0
    }

    .photo-mask img {
        transform: rotate(-18deg) scale(1.35)
    }
}

/* Complete homepage */
.section {
    padding: clamp(5.5rem, 9vw, 9rem) 0
}

.split {
    display: grid;
    grid-template-columns: .95fr 1fr;
    gap: clamp(4rem, 8vw, 8rem);
    align-items: center
}

.split-reverse {
    grid-template-columns: 1fr .95fr
}

.section-kicker {
    display: block;
    margin-bottom: 1rem;
    color: var(--cyan);
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .13em
}

.section-copy h2,
.section-head h2,
.center-head h2,
.contact h2 {
    color: var(--navy);
    font-size: clamp(2.6rem, 4.5vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -.055em
}

.section-copy>p,
.section-head>p,
.center-head>p,
.contact p {
    margin-top: 1.35rem;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.8
}

.section-copy>.button {
    margin-top: 2rem
}

.people-visual,
.why-visual {
    min-height: 600px;
    position: relative;
    display: grid;
    place-items: center
}

.people-circle {
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: linear-gradient(145deg, #e4fbfe, #cbeef7)
}

.people-circle::after {
    content: "";
    position: absolute;
    inset: -28px;
    border: 1px solid rgba(25, 191, 213, .2);
    border-radius: 50%
}

.people-photo {
    position: relative;
    width: 390px;
    height: 470px;
    border-radius: 44% 56% 48% 52%/53% 44% 56% 47%;
    overflow: hidden
}

.people-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.dot-field {
    position: absolute;
    right: 2%;
    bottom: 11%;
    width: 125px;
    height: 100px;
    background-image: radial-gradient(circle, var(--blue) 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    opacity: .28
}

.visual-note {
    position: absolute;
    right: 0;
    top: 10%;
    max-width: 205px;
    padding: 1.1rem 1.2rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 45px rgba(28, 83, 117, .15)
}

.visual-note strong {
    display: block;
    color: var(--blue);
    font-size: .7rem
}

.visual-note span {
    display: block;
    margin-top: .35rem;
    color: var(--navy);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.45
}

.check-list {
    display: grid;
    gap: 1rem;
    margin: 1.8rem 0 0;
    padding: 0;
    list-style: none
}

.check-list li {
    position: relative;
    padding-left: 2rem;
    color: #465a73;
    font-size: .82rem;
    line-height: 1.6
}

.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .05rem;
    width: 19px;
    height: 19px;
    border: 2px solid var(--cyan);
    border-radius: 50%;
    background: radial-gradient(circle, var(--cyan) 0 3px, transparent 4px)
}

.why {
    background: linear-gradient(180deg, #fff, #f7fcfd)
}

.why-frame {
    width: 430px;
    height: 520px;
    position: relative;
    overflow: hidden;
    border-radius: 26px 120px 26px 120px;
    background: #d9f4f8;
    box-shadow: var(--shadow)
}

.why-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.why-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 8px solid rgba(255, 255, 255, .55);
    border-radius: inherit
}

.why-visual::before {
    content: "";
    position: absolute;
    width: 490px;
    height: 490px;
    border: 2px solid rgba(0, 129, 198, .16);
    border-radius: 50%;
    transform: rotate(30deg)
}

.value-list {
    display: grid;
    gap: 1.4rem;
    margin-top: 2rem
}

.value-list article {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 1rem;
    align-items: start
}

.value-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 2px solid var(--cyan);
    border-radius: 15px;
    color: var(--blue);
    font-size: .68rem;
    font-weight: 800;
    background: #fff
}

.value-list h3 {
    color: var(--navy);
    font-size: 1rem
}

.value-list article p {
    margin-top: .25rem;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.6
}

.confidence-card,
.solution-card {
    position: absolute;
    z-index: 3;
    padding: 1rem 1.2rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 15px 45px rgba(31, 76, 109, .16)
}

.confidence-card {
    left: 0;
    bottom: 9%
}

.solution-card {
    right: 0;
    top: 10%;
    display: flex;
    align-items: center;
    gap: .8rem
}

.confidence-card b,
.solution-card span {
    display: block;
    color: var(--navy);
    font-size: .66rem;
    line-height: 1.45
}

.confidence-card span {
    display: block;
    margin-top: .2rem;
    color: var(--blue);
    font-size: .74rem;
    font-weight: 750
}

.solution-card img {
    width: 42px
}

.services {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f3fbfd, #ecf8fb)
}

.services::before {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    left: -190px;
    top: 25%;
    border: 1px solid rgba(0, 129, 198, .16);
    border-radius: 50%
}

.section-head {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 5rem;
    align-items: end
}

.section-head h2 {
    max-width: 760px
}

.section-head>p {
    align-self: end
}

.service-stage {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    align-items: end;
    margin-top: 4rem
}

.service-person {
    min-height: 470px;
    position: relative
}

.service-person img {
    position: absolute;
    left: -30px;
    bottom: 0;
    width: 345px;
    height: 430px;
    object-fit: cover;
    object-position: center;
    border-radius: 48% 52% 10% 10%/34% 38% 10% 10%
}

.service-person>span {
    position: absolute;
    left: -20px;
    top: 12%;
    z-index: 2;
    padding: 1rem;
    border: 2px solid var(--blue);
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    font-size: .66rem;
    font-weight: 750;
    line-height: 1.35;
    transform: rotate(-8deg)
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.35rem
}

.service-card {
    min-height: 440px;
    padding: 1.2rem 1.2rem 1.6rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 15px 45px rgba(24, 91, 126, .11);
    display: flex;
    flex-direction: column
}

.service-image {
    height: 155px;
    border-radius: 14px;
    overflow: hidden;
    background: #d7f4f8
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.data-image {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 14px 15px 12px;
    isolation: isolate;
    color: #fff;
    background: radial-gradient(circle at 85% 12%, rgba(70, 229, 238, .3), transparent 28%), linear-gradient(145deg, #102f67, #087fb7 58%, #0bbccc)
}

.data-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .3;
    background-image: linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(to bottom, transparent, #000 45%, #000)
}

.data-image::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -42px;
    bottom: -52px;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    box-shadow: 0 0 0 18px rgba(255, 255, 255, .05)
}

.dash-top,
.dash-body,
.dash-legend {
    position: relative;
    z-index: 1
}

.dash-top {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.dash-top b {
    font-size: .54rem;
    letter-spacing: .03em
}

.dash-top span {
    padding: 3px 6px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    font-size: .38rem;
    font-weight: 850;
    letter-spacing: .13em
}

.dash-body {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px 4px 5px
}

.dash-donut {
    width: 56px;
    height: 56px;
    position: relative;
    flex: 0 0 auto;
    border-radius: 50%;
    background: conic-gradient(#fff 0 41%, #65e8ef 41% 70%, rgba(255, 255, 255, .18) 70% 100%);
    box-shadow: 0 8px 20px rgba(3, 38, 82, .2)
}

.dash-donut::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: inherit;
    background: #086fa7
}

.dash-donut i {
    width: 7px;
    height: 7px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%)
}

.dash-bars {
    height: 58px;
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .3)
}

.dash-bars i {
    flex: 1;
    min-width: 7px;
    border-radius: 4px 4px 1px 1px;
    background: linear-gradient(to top, #5ce4ed, #fff)
}

.dash-bars i:nth-child(1) {
    height: 31%
}

.dash-bars i:nth-child(2) {
    height: 55%
}

.dash-bars i:nth-child(3) {
    height: 44%
}

.dash-bars i:nth-child(4) {
    height: 78%
}

.dash-bars i:nth-child(5) {
    height: 92%
}

.dash-legend {
    display: flex;
    gap: 11px;
    color: rgba(255, 255, 255, .78);
    font-size: .4rem;
    font-weight: 700
}

.dash-legend span::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 4px;
    border-radius: 50%;
    background: #7cebf1
}

.service-card>span {
    margin-top: 1.2rem;
    color: var(--cyan);
    font-size: .62rem;
    font-weight: 800
}

.service-card h3 {
    margin-top: .6rem;
    color: var(--navy);
    font-size: 1.25rem;
    line-height: 1.15
}

.service-card p {
    margin-top: .8rem;
    color: var(--muted);
    font-size: .74rem;
    line-height: 1.7
}

.all-services {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .8rem;
    margin-top: 2rem;
    color: var(--blue);
    font-size: .75rem;
    font-weight: 800
}

.all-services span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 2px solid var(--blue);
    border-radius: 50%
}

.numbers {
    padding: 4.5rem 0;
    background: #fff
}

.number-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr)
}

.number-grid div {
    min-height: 110px;
    display: grid;
    place-items: center;
    border-right: 1px solid var(--line);
    align-content: center
}

.number-grid div:last-child {
    border: 0
}

.number-grid strong {
    color: var(--navy);
    font-size: 3.2rem;
    line-height: 1;
    letter-spacing: -.06em
}

.number-grid span {
    margin-top: .7rem;
    color: var(--muted);
    font-size: .72rem
}

.center-head {
    text-align: center;
    max-width: 720px;
    margin: auto
}

.center-head h2 {
    margin-top: .6rem
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    margin-top: 5rem
}

.process-grid article {
    text-align: center;
    position: relative
}

.process-grid article:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 66px;
    left: calc(50% + 80px);
    width: calc(100% - 115px);
    height: 1px;
    background: linear-gradient(90deg, rgba(25, 191, 213, .65), rgba(0, 129, 198, .12))
}

.process-grid article>span {
    position: absolute;
    left: 12%;
    top: 0;
    color: #d3eff4;
    font-size: 2rem;
    font-weight: 850
}

.process-icon {
    width: 132px;
    height: 132px;
    margin: 0 auto 1.4rem;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 129, 198, .18);
    border-radius: 34px;
    background: radial-gradient(circle at 76% 18%, rgba(25, 191, 213, .2), transparent 28%), linear-gradient(145deg, #fff, #eaf8fb);
    box-shadow: 0 18px 42px rgba(22, 126, 164, .13)
}

.process-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .38;
    background-image: radial-gradient(circle, rgba(0, 129, 198, .28) 1px, transparent 1.5px);
    background-size: 14px 14px;
    mask-image: linear-gradient(135deg, #000, transparent 72%)
}

.process-icon>* {
    display: block;
    position: absolute;
    z-index: 2;
    margin: 0;
    text-decoration: none;
    font-style: normal
}

.discover i {
    width: 48px;
    height: 48px;
    left: 42px;
    top: 42px;
    border: 2px solid var(--blue);
    border-radius: 50%;
    box-shadow: inset 0 0 0 9px #fff, inset 0 0 0 11px rgba(25, 191, 213, .55)
}

.discover b,
.discover em,
.discover u {
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 5px #fff, 0 0 0 6px rgba(0, 129, 198, .28)
}

.discover b {
    width: 10px;
    height: 10px;
    right: 27px;
    top: 27px
}

.discover em {
    width: 8px;
    height: 8px;
    left: 28px;
    bottom: 30px
}

.discover u {
    width: 6px;
    height: 6px;
    right: 28px;
    bottom: 27px
}

.discover i::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 2px;
    right: -25px;
    bottom: 3px;
    background: linear-gradient(90deg, var(--blue), transparent);
    transform: rotate(43deg);
    transform-origin: left center
}

.frame i {
    width: 58px;
    height: 58px;
    left: 37px;
    top: 37px;
    border: 2px solid var(--blue);
    border-radius: 15px;
    box-shadow: inset 0 0 0 9px #fff, inset 0 0 0 10px rgba(25, 191, 213, .3)
}

.frame i::after {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 6px;
    background: linear-gradient(145deg, var(--blue), var(--cyan))
}

.frame b,
.frame em,
.frame u {
    width: 11px;
    height: 11px;
    border: 2px solid var(--cyan);
    border-radius: 4px;
    background: #fff
}

.frame b {
    left: 28px;
    top: 28px
}

.frame em {
    right: 27px;
    top: 28px
}

.frame u {
    left: 28px;
    bottom: 27px
}

.build i {
    width: 24px;
    height: 24px;
    left: 31px;
    top: 34px;
    border: 2px solid var(--blue);
    border-radius: 7px;
    background: #fff;
    box-shadow: 43px 4px 0 -2px #fff, 43px 4px 0 0 var(--cyan), 21px 42px 0 -2px #fff, 21px 42px 0 0 var(--blue)
}

.build b,
.build em {
    height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--cyan))
}

.build b {
    width: 44px;
    left: 48px;
    top: 54px;
    transform: rotate(7deg)
}

.build em {
    width: 47px;
    left: 44px;
    top: 76px;
    transform: rotate(-39deg)
}

.build u {
    width: 10px;
    height: 10px;
    right: 23px;
    bottom: 25px;
    border: 2px solid var(--cyan);
    border-radius: 50%;
    background: #fff
}

.transfer i,
.transfer b {
    width: 45px;
    height: 45px;
    top: 39px;
    border: 2px solid var(--blue);
    border-radius: 15px;
    background: rgba(255, 255, 255, .82)
}

.transfer i {
    left: 25px
}

.transfer b {
    right: 25px;
    top: 49px;
    border-color: var(--cyan)
}

.transfer em {
    width: 42px;
    height: 3px;
    left: 45px;
    top: 66px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--blue), var(--cyan))
}

.transfer em::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -4px;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--cyan);
    border-right: 2px solid var(--cyan);
    transform: rotate(45deg)
}

.transfer u {
    width: 8px;
    height: 8px;
    left: 62px;
    bottom: 22px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 5px #fff, 0 0 0 6px rgba(0, 129, 198, .22)
}

.process-grid h3 {
    color: var(--navy);
    font-size: 1rem
}

.process-grid p {
    margin-top: .55rem;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.6
}

.products {
    background: linear-gradient(180deg, #fff, #f6fcfd)
}

.product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 4rem
}

.product-card {
    position: relative;
    min-height: 420px;
    display: grid;
    grid-template-columns: .85fr 1fr;
    border: 1px solid #d4edf2;
    border-radius: 28px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 20px 55px rgba(22, 85, 120, .09)
}

.product-media {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #e6f9fc, #cceff6)
}

.product-media::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .52), transparent 32%), linear-gradient(135deg, rgba(235, 249, 252, .08), rgba(255, 255, 255, .34));
    backdrop-filter: blur(1.4px)
}

.product-media > * {
    filter: blur(3px) saturate(.82);
    opacity: .72;
    transform: scale(1.025)
}

.product-copy {
    padding: 2.3rem;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.product-copy>span {
    color: var(--cyan);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .12em
}

.product-copy h3 {
    margin-top: .8rem;
    color: var(--navy);
    font-size: 2.1rem;
    letter-spacing: -.045em
}

.product-copy p {
    margin-top: 1rem;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.7;
    filter: blur(1.15px);
    opacity: .58;
    user-select: none
}

.product-copy b {
    margin-top: 1.2rem;
    color: var(--blue);
    font-size: .68rem;
    filter: blur(1.2px);
    opacity: .58;
    user-select: none
}

.home-product .product-media {
    background: radial-gradient(circle at 12% 16%, rgba(25, 191, 213, .24), transparent 28%), linear-gradient(145deg, #f7fdff, #d8f2f7)
}

.hometv-showcase {
    width: min(260px, 86%);
    position: relative;
    display: grid;
    gap: 22px;
    padding: 28px 22px;
    border: 1px solid rgba(0, 129, 198, .16);
    border-radius: 24px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 22px 48px rgba(15, 81, 126, .12);
    backdrop-filter: blur(10px)
}

.hometv-showcase>span {
    color: #537792;
    font-size: .48rem;
    font-weight: 850;
    letter-spacing: .16em
}

.hometv-showcase img {
    width: 100%;
    height: auto
}

.hometv-showcase>i {
    height: 1px;
    position: relative;
    background: linear-gradient(90deg, var(--cyan), rgba(0, 129, 198, .12))
}

.hometv-showcase>i::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    right: 18%;
    top: -3px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 5px rgba(0, 129, 198, .08)
}

.studio-product .product-media {
    background: linear-gradient(145deg, #f7fafc, #e8eef3)
}

.studio-hold {
    width: min(230px, 82%);
    display: grid;
    gap: 12px;
    padding: 25px;
    border: 1px dashed #9eb4c3;
    border-radius: 22px;
    background: rgba(255, 255, 255, .64)
}

.studio-hold>span {
    color: #718999;
    font-size: .5rem;
    font-weight: 850;
    letter-spacing: .15em
}

.studio-hold>i {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #c6d5de, #e7eef2)
}

.studio-hold>i:nth-of-type(1) {
    width: 88%
}

.studio-hold>i:nth-of-type(2) {
    width: 62%
}

.studio-hold>i:nth-of-type(3) {
    width: 74%
}

.studio-hold>b {
    margin-top: 7px;
    color: #6c8190;
    font-size: .58rem;
    font-weight: 700;
    line-height: 1.45
}

.contact {
    padding-top: 2rem
}

.contact-panel {
    min-height: 300px;
    padding: clamp(2rem, 5vw, 4.5rem);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4rem;
    align-items: center;
    border-radius: 34px;
    background: linear-gradient(115deg, #0758a1, #0c82b6 56%, #18c9d6);
    color: #fff;
    position: relative;
    overflow: hidden
}

.contact-panel::before {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    right: 18%;
    top: -180px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%
}

.contact .section-kicker,
.contact h2,
.contact p {
    color: #fff;
    position: relative
}

.contact h2 {
    max-width: 720px
}

.contact p {
    max-width: 600px;
    color: #d9f7fb
}

.button-light {
    position: relative;
    background: #fff;
    color: var(--blue);
    box-shadow: 0 15px 35px rgba(10, 66, 111, .2)
}

.footer {
    margin-top: 7rem;
    padding: 5rem 0 2rem;
    background: #0d4a92;
    color: #fff
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.25fr;
    gap: 4rem
}

.footer-brand img {
    width: 225px;
    filter: brightness(0) invert(1)
}

.footer-brand p {
    max-width: 320px;
    margin-top: 1.4rem;
    color: #c5e0f1;
    font-size: .78rem;
    line-height: 1.75
}

.footer h2 {
    font-size: .72rem;
    margin-bottom: 1.2rem
}

.footer a,
.footer>div p {
    display: block;
    color: #cbe5f3;
    font-size: .72rem;
    line-height: 2
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .2);
    color: #a9d2e9;
    font-size: .62rem
}

[dir="rtl"] .check-list li {
    padding-left: 0;
    padding-right: 2rem
}

[dir="rtl"] .check-list li::before {
    left: auto;
    right: 0
}

[dir="rtl"] .section-head {
    direction: rtl
}

[dir="rtl"] .service-person>span {
    left: auto;
    right: -20px
}

[dir="rtl"] .all-services {
    justify-content: flex-start
}

[dir="rtl"] .process-grid article:not(:last-child)::after {
    left: auto;
    right: calc(50% + 70px)
}

@media(max-width:1000px) {

    .split,
    .split-reverse {
        grid-template-columns: 1fr
    }

    .challenge .people-visual {
        order: 2
    }

    .section-head {
        grid-template-columns: 1fr
    }

    .service-stage {
        grid-template-columns: 1fr
    }

    .service-person {
        display: none
    }

    .service-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .process-grid {
        grid-template-columns: 1fr 1fr
    }

    .process-grid article:nth-child(2)::after {
        display: none
    }

    .product-grid {
        grid-template-columns: 1fr
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr
    }

    .footer-brand {
        grid-column: 1/-1
    }
}

@media(max-width:650px) {
    .section {
        padding: 5rem 0
    }

    .section-copy h2,
    .section-head h2,
    .center-head h2,
    .contact h2 {
        font-size: 2.7rem
    }

    .people-visual,
    .why-visual {
        min-height: 470px
    }

    .people-circle {
        width: 320px;
        height: 320px
    }

    .people-photo {
        width: 285px;
        height: 370px
    }

    .visual-note {
        right: 0;
        top: 4%
    }

    .why-frame {
        width: 310px;
        height: 400px;
        border-radius: 20px 70px 20px 70px
    }

    .why-visual::before {
        width: 350px;
        height: 350px
    }

    .confidence-card {
        left: -5px
    }

    .solution-card {
        right: -5px
    }

    .service-grid {
        grid-template-columns: 1fr
    }

    .service-card {
        min-height: 410px
    }

    .service-image {
        height: 210px
    }

    .number-grid {
        grid-template-columns: 1fr
    }

    .number-grid div {
        border-right: 0;
        border-bottom: 1px solid var(--line)
    }

    .process-grid {
        grid-template-columns: 1fr
    }

    .process-grid article::after {
        display: none
    }

    .product-card {
        grid-template-columns: 1fr
    }

    .product-media {
        min-height: 260px
    }

    .contact-panel {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .contact-panel .button {
        justify-self: start
    }

    .footer-grid {
        grid-template-columns: 1fr
    }

    .footer-brand {
        grid-column: 1
    }

    .footer-bottom {
        flex-direction: column
    }
}

/* Professionally sourced Phosphor process icons */
.process-grid {
    gap: clamp(1.5rem, 3vw, 2.8rem);
    margin-top: 4.5rem
}

.process-grid article {
    min-width: 0;
    text-align: left
}

.process-grid article:not(:last-child)::after {
    top: 48px;
    left: 112px;
    width: calc(100% - 88px);
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, rgba(25, 191, 213, .72), rgba(0, 129, 198, .1))
}

.process-grid article>span {
    left: auto;
    right: 0;
    top: -22px;
    color: rgba(21, 69, 139, .075);
    font-size: 4.8rem;
    font-weight: 850;
    letter-spacing: -.08em
}

.process-icon {
    width: 96px;
    height: 96px;
    margin: 0 0 1.7rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 6px solid #fff;
    outline: 1px solid rgba(0, 129, 198, .16);
    border-radius: 50%;
    transform: none;
    background: radial-gradient(circle at 28% 18%, #1b6eb1, transparent 38%), linear-gradient(145deg, #163463, #075e9e 64%, #078fae);
    box-shadow: 0 18px 42px rgba(18, 68, 108, .2)
}

.process-icon::before {
    display: none
}

.process-icon>img {
    width: 54px;
    height: 54px;
    position: relative;
    z-index: 2;
    object-fit: contain
}

.process-grid h3 {
    font-size: 1.05rem;
    letter-spacing: -.015em
}

.process-grid p {
    max-width: 225px;
    margin-top: .65rem;
    font-size: .73rem;
    line-height: 1.7
}

[dir="rtl"] .process-grid article {
    text-align: right
}

[dir="rtl"] .process-grid article>span {
    right: auto;
    left: 0
}

[dir="rtl"] .process-grid article:not(:last-child)::after {
    left: auto;
    right: 112px
}

@media(max-width:1000px) {
    .process-grid {
        grid-template-columns: 1fr 1fr;
        row-gap: 4rem
    }
}

@media(max-width:650px) {
    .process-grid {
        grid-template-columns: 1fr
    }

    .process-grid article {
        text-align: center
    }

    .process-icon {
        margin-left: auto;
        margin-right: auto
    }

    .process-grid p {
        margin-left: auto;
        margin-right: auto
    }
}

/* Cohesive editorial treatment for the technology photography */
.photo-mask::after,
.people-photo::after,
.why-frame::before,
.service-person::after,
.service-image:not(.data-image)::after {
    content: "";
    position: absolute;
    pointer-events: none
}

.photo-mask::after {
    inset: 0;
    z-index: 2;
    background: linear-gradient(145deg, rgba(7, 39, 88, .03), rgba(7, 144, 180, .16));
    mix-blend-mode: screen
}

.photo-mask img {
    object-position: 52% 51%;
    filter: hue-rotate(274deg) saturate(.9) contrast(1.08) brightness(1.08)
}

.people-photo::after {
    inset: 0;
    background: linear-gradient(155deg, rgba(255, 255, 255, .03) 48%, rgba(3, 92, 143, .11))
}

.people-photo img {
    object-position: 51% center;
    filter: saturate(.82) contrast(1.04) brightness(1.04)
}

.why-frame::before {
    inset: 0;
    z-index: 1;
    background: linear-gradient(145deg, rgba(255, 255, 255, .02) 42%, rgba(7, 91, 145, .13))
}

.why-frame img {
    object-position: 50% center;
    filter: saturate(.74) contrast(1.04) brightness(1.02)
}

.service-person::after {
    left: -30px;
    bottom: 0;
    width: 345px;
    height: 430px;
    border-radius: 48% 52% 10% 10%/34% 38% 10% 10%;
    background: linear-gradient(160deg, rgba(10, 33, 72, .03), rgba(0, 129, 198, .28))
}

.service-person img {
    object-position: 54% center;
    filter: saturate(.78) contrast(1.13) brightness(.88)
}

.service-card {
    min-height: 410px
}

.service-image {
    height: 180px;
    position: relative
}

.service-image:not(.data-image)::after {
    inset: 0;
    background: linear-gradient(155deg, transparent 48%, rgba(4, 91, 145, .22))
}

.service-image img {
    filter: saturate(.82) contrast(1.08)
}

@media(max-width:650px) {
    .service-card {
        min-height: 410px
    }

    .service-image {
        height: 210px
    }
}

/* Data-led service visuals */
.service-stage {
    display: block;
    margin-top: 3.75rem
}

.analysis-board {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 26px 28px 24px;
    border: 1px solid rgba(31, 141, 174, .14);
    border-radius: 30px;
    color: var(--navy);
    background: radial-gradient(circle at 7% -8%, rgba(49, 201, 218, .16), transparent 30%), radial-gradient(circle at 98% 105%, rgba(116, 144, 215, .12), transparent 34%), linear-gradient(145deg, #fbfefe, #edf8fa 72%);
    box-shadow: 0 30px 80px rgba(21, 82, 111, .15), inset 0 1px 0 #fff
}

.analysis-board::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: .38;
    background-image: linear-gradient(rgba(25, 132, 164, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(25, 132, 164, .075) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, transparent, #000 44%, #000)
}

.analysis-board::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -55%;
    left: 16%;
    width: 68%;
    height: 75%;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(56, 191, 208, .12);
    filter: blur(60px)
}

.analysis-board-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 10px
}

.analysis-board-head div {
    display: grid;
    gap: 5px;
    padding-left: 14px;
    border-left: 2px solid #66e0e9
}

.analysis-board-head span {
    color: #087fa5;
    font-size: .55rem;
    font-weight: 850;
    letter-spacing: .18em;
    text-transform: uppercase
}

.analysis-board-head b {
    color: var(--navy);
    font-size: 1.08rem;
    letter-spacing: -.025em
}

.analysis-board-head em {
    padding: 7px 11px;
    border: 1px solid rgba(8, 127, 165, .2);
    border-radius: 999px;
    color: #58768a;
    background: rgba(255, 255, 255, .72);
    font-size: .46rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .13em
}

.analysis-canvas {
    width: 100%;
    height: 276px;
    position: relative;
    z-index: 1;
    display: block
}

.service-grid {
    margin-top: 1.65rem
}

.service-card {
    min-height: 405px;
    border: 1px solid rgba(11, 129, 184, .1);
    border-radius: 21px;
    box-shadow: 0 22px 55px rgba(17, 72, 104, .1)
}

.service-image.viz-image {
    height: 205px;
    padding: 0;
    border: 1px solid rgba(24, 139, 170, .12);
    background: radial-gradient(circle at 92% 0, rgba(28, 196, 210, .16), transparent 30%), #f3fafb;
    box-shadow: inset 0 1px 0 #fff, 0 10px 26px rgba(18, 94, 124, .08)
}

.service-image.viz-image::after {
    display: none
}

.viz-image canvas {
    width: 100%;
    height: 100%;
    display: block
}

.service-image.automation-photo {
    height: 205px;
    background: #dce7ec
}

.automation-photo img {
    object-position: 52% 51%;
    filter: saturate(.72) contrast(1.08) brightness(.98);
    transform: scale(1.025)
}

.automation-photo::after {
    background: linear-gradient(150deg, rgba(5, 36, 59, .02) 28%, rgba(3, 74, 112, .28)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16)
}

[dir="rtl"] .analysis-board-head {
    direction: rtl
}

[dir="rtl"] .analysis-board-head div {
    padding-right: 14px;
    padding-left: 0;
    border-right: 2px solid #66e0e9;
    border-left: 0
}

@media(max-width:650px) {
    .analysis-board {
        padding: 20px 16px
    }

    .analysis-board-head {
        align-items: flex-start;
        flex-direction: column;
        gap: .8rem
    }

    .analysis-canvas {
        height: 590px
    }

    .service-image.viz-image {
        height: 245px
    }

    .service-image.automation-photo {
        height: 245px
    }
}

/* Production navigation and keyboard accessibility */
a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(25, 191, 213, .55);
    outline-offset: 4px
}

@media(max-width:950px) {
    .header.nav-open {
        box-shadow: 0 18px 44px rgba(20, 66, 99, .12)
    }

    .header.nav-open .nav-wrap nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: grid;
        gap: 0;
        padding: .65rem max(20px, calc((100% - 1180px) / 2));
        border-top: 1px solid var(--line);
        background: rgba(255, 255, 255, .985);
        box-shadow: 0 24px 44px rgba(20, 66, 99, .12)
    }

    .header.nav-open .nav-wrap nav a {
        padding: 1rem 0;
        border-bottom: 1px solid rgba(214, 237, 242, .72);
        font-size: .84rem
    }

    .menu {
        position: relative;
        z-index: 2;
        min-width: 44px;
        min-height: 44px;
        padding: 6px;
        cursor: pointer
    }

    .menu span {
        transition: transform .22s ease, opacity .22s ease
    }

    .header.nav-open .menu span:first-child {
        transform: translateY(3.5px) rotate(45deg)
    }

    .header.nav-open .menu span:last-child {
        transform: translateY(-3.5px) rotate(-45deg)
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important
    }
}

/* Privacy and system pages */
.legal-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(5rem, 9vw, 8rem) 0;
    background: radial-gradient(circle at 8% 12%, rgba(25, 191, 213, .12), transparent 34%), radial-gradient(circle at 92% 18%, rgba(21, 69, 139, .09), transparent 30%), #f8fdfe
}

.legal-hero::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -180px;
    bottom: -260px;
    border: 1px dashed rgba(25, 191, 213, .24);
    border-radius: 50%
}

.legal-hero-inner {
    position: relative;
    z-index: 1
}

.legal-hero h1 {
    max-width: 860px;
    margin-top: 1.25rem;
    color: var(--navy);
    font-size: clamp(3.2rem, 6vw, 5.7rem);
    line-height: .98;
    letter-spacing: -.06em
}

.legal-hero p {
    max-width: 720px;
    margin-top: 1.7rem;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.8
}

.error-hero {
    min-height: 560px;
    display: grid;
    align-items: center
}

.error-button {
    margin-top: 2rem
}

.compact-footer .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr
}

.legal-content {
    background: #fff
}

.legal-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: clamp(3rem, 8vw, 7rem)
}

.legal-layout aside {
    height: fit-content;
    position: sticky;
    top: 2rem;
    display: grid;
    gap: .7rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f7fcfd;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.5
}

.legal-layout aside strong {
    color: var(--navy);
    font-size: .76rem
}

.legal-layout aside a {
    margin-top: .7rem;
    color: var(--blue);
    font-weight: 750;
    overflow-wrap: anywhere
}

.legal-layout article {
    display: grid;
    gap: 3rem
}

.legal-layout article section {
    position: relative;
    padding: 0 0 3rem 4.4rem;
    border-bottom: 1px solid var(--line)
}

.legal-layout article section>span {
    position: absolute;
    left: 0;
    top: -.2rem;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 2px solid var(--cyan);
    border-radius: 15px;
    color: var(--deep);
    font-size: .68rem;
    font-weight: 850
}

.legal-layout h2 {
    color: var(--navy);
    font-size: clamp(1.55rem, 2.4vw, 2.2rem);
    letter-spacing: -.035em
}

.legal-layout article p {
    max-width: 790px;
    margin-top: 1rem;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.85
}

[dir="rtl"] .legal-layout article section {
    padding-right: 4.4rem;
    padding-left: 0
}

[dir="rtl"] .legal-layout article section>span {
    right: 0;
    left: auto
}

@media(max-width:760px) {
    .legal-layout {
        grid-template-columns: 1fr
    }

    .legal-layout aside {
        position: static
    }

    .legal-layout article section {
        padding-left: 0;
        padding-top: 4.2rem
    }

    [dir="rtl"] .legal-layout article section {
        padding-right: 0;
        padding-top: 4.2rem
    }

    .compact-footer .footer-grid {
        grid-template-columns: 1fr
    }
}

/* WCAG contrast and touch-target refinements */
.utility {
    color: #086f86
}

.language button {
    color: #3f6978
}

.language button[aria-pressed="true"] {
    background: #006da8
}

.section-kicker,
.service-card>span,
.product-copy>span,
.hometv-showcase>span {
    color: #08728d
}

.visual-note strong,
.value-icon,
.confidence-card span,
.button-light,
.all-services {
    color: #006da8
}

.footer a {
    min-height: 28px;
    display: flex;
    align-items: center;
    padding: .12rem 0
}

.process-grid article>span {
    display: none
}

.process-grid article::before {
    position: absolute;
    right: 0;
    top: -22px;
    color: rgba(21, 69, 139, .075);
    font-size: 4.8rem;
    font-weight: 850;
    letter-spacing: -.08em
}

.process-grid article:nth-child(1)::before { content: "01" }
.process-grid article:nth-child(2)::before { content: "02" }
.process-grid article:nth-child(3)::before { content: "03" }
.process-grid article:nth-child(4)::before { content: "04" }

[dir="rtl"] .process-grid article::before {
    right: auto;
    left: 0
}

.product-copy p,
.product-copy b {
    opacity: 1;
    filter: blur(1.65px)
}

.product-copy b {
    color: #006da8
}