@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --bx-ink: #0B1220;
    --bx-navy: #0F172A;
    --bx-primary: #1e67b9;
    --bx-accent: #0472bb;
    --bx-sky: #38bdf8;
    --bx-ease: cubic-bezier(.2, .7, .2, 1);
    --bx-ease-out: cubic-bezier(.16, 1, .3, 1);
    --bx-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --bx-display: var(--bx-font);
    --bx-mono: var(--bx-font);
    --bx-hl: #0472bb;
}

html { overflow-x: hidden; overflow-x: clip; }
body { overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased; }
::selection { background: rgba(56, 189, 248, .3); color: #0B1220; }

.section-title, .reveal-title, .section-head h2, .section-header h2, .section-block h2,
.mv-title, .bx-hero h1, .careers-header h1 {
    font-family: var(--bx-display) !important;
    font-weight: 600 !important;
    letter-spacing: -.015em;
    line-height: 1.12;
}
:is(.section-title, .reveal-title, .section-head h2, .section-header h2, .bx-heading, .bx-hero h1, .hero-title) span:not(.bx-w):not(.bx-w > span) {
    font-weight: 600;
    color: var(--bx-hl) !important;
    text-shadow: none;
    padding-right: .06em;
}
.bx-heading { font-family: var(--bx-display) !important; font-weight: 600 !important; letter-spacing: -.015em; }
:is(.section-title, .reveal-title, .section-head h2, .section-header h2, .section-block h2, .mv-title, .bx-heading, .bx-hero h1, .careers-header h1, .hero-title) :is(span, em, strong, b, i) { font-family: inherit; }
.hero-title { font-family: var(--bx-display) !important; font-weight: 600 !important; letter-spacing: -.02em; }
.bx-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem) !important; line-height: 1.04 !important; }
.section-subtitle, .section-sub, .section-head p, .section-header p { font-size: 1.05rem; line-height: 1.75; }

/* Small mono "eyebrow" label injected above hero titles */
.bx-eyebrow {
    display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem;
    font-family: var(--bx-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bx-sky);
}
.bx-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .8; }

.btn:not(.btn-outline), .whatsapp-btn, .bx-sheen {
    position: relative; overflow: hidden; isolation: isolate;
}
.btn:not(.btn-outline)::after, .whatsapp-btn::after, .bx-sheen::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: none;
    transform: translateX(-120%); transition: transform .8s var(--bx-ease);
}
.btn:not(.btn-outline):hover::after, .whatsapp-btn:hover::after, .bx-sheen:hover::after { transform: translateX(120%); }
.btn:not(.btn-outline) { background-image: none; box-shadow: 0 12px 30px -14px rgba(30, 103, 185, .8); }
.hero-btn:hover { background-image: none; }   /* keep the hero button's outline-on-hover look */

.bx-hero { position: relative; isolation: isolate; overflow: hidden; }
.bx-hero > .bx-layer { position: absolute; inset: 0; pointer-events: none; }
.bx-hero > .bx-shade {
    z-index: 0;
    background: none;
}
.bx-hero > .bx-grid {
    z-index: 0; opacity: .55;
    background-image: none;
    background-size: 80px 80px;
    
    
}
.bx-hero > .bx-grain {
    z-index: 0; opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bx-hero > :not(.bx-layer):not(video):not(.hero-video):not(.hero-video-overlay):not(.hero-slider) { position: relative; z-index: 2; }
.bx-scroll-cue {
    position: absolute; left: 50%; bottom: 28px; z-index: 3; transform: translateX(-50%);
    width: 24px; height: 38px; border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 14px; pointer-events: none;
}
.bx-scroll-cue::after {
    content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px;
    background: var(--bx-sky); animation: bx-cue 1.8s var(--bx-ease) infinite;
}
@keyframes bx-cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

.bx-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; pointer-events: none;
    transform-origin: 0 50%; transform: scaleX(var(--p, 0));
    background: var(--bx-accent); box-shadow: 0 0 12px rgba(56, 189, 248, .7);
}
.bx-intro {
    position: fixed; inset: 0; z-index: 5000; background: var(--bx-ink);
    display: grid; place-items: center;
    clip-path: inset(0 0 0 0); transition: clip-path 1s var(--bx-ease-out), visibility 0s 1s;
}
.bx-intro.is-done { clip-path: inset(0 0 100% 0); visibility: hidden; }
.bx-intro-seen .bx-intro { display: none; }
.bx-intro-inner { text-align: center; }
.bx-intro-logo {
    position: relative; width: 120px; height: 120px; margin: 0 auto; overflow: hidden; border-radius: 4px;
    opacity: 0; transform: scale(.85); filter: blur(10px);
    animation: bx-logo-in 1s .1s var(--bx-ease-out) forwards;
}
.bx-intro-logo img { width: 100%; height: 100%; object-fit: contain; }
.bx-intro-logo::after {
    content: ""; position: absolute; inset: 0;
    background: none;
    transform: translateX(-130%); animation: bx-sweep 1.1s .8s var(--bx-ease) forwards;
}
.bx-intro-word { margin-top: 1.1rem; display: flex; justify-content: center; gap: .15em; font-family: var(--bx-mono); font-size: .8rem; letter-spacing: .12em; color: #9fb4cc; text-transform: uppercase; }
.bx-intro-word span { opacity: 0; transform: translateY(12px); animation: bx-rise .6s var(--bx-ease-out) forwards; }
.bx-intro-bar { width: 140px; height: 2px; margin: 1.3rem auto 0; background: rgba(255, 255, 255, .08); overflow: hidden; border-radius: 2px; }
.bx-intro-bar::after { content: ""; display: block; height: 100%; background: var(--bx-accent); transform-origin: left; transform: scaleX(0); animation: bx-load 1.3s .2s var(--bx-ease) forwards; }
@keyframes bx-logo-in { to { opacity: 1; transform: none; filter: none; } }
@keyframes bx-sweep { to { transform: translateX(130%); } }
@keyframes bx-rise { to { opacity: 1; transform: none; } }
@keyframes bx-load { to { transform: scaleX(1); } }

img.bx-img {
    background-color: #dfe7f0;
    background-image: none;
    background-size: 250% 100%;
    animation: bx-shimmer 1.5s linear infinite;
    opacity: .01; filter: blur(14px) saturate(.85); transform: scale(1.04);
    transition: opacity .9s var(--bx-ease), filter 1s var(--bx-ease), transform 1.4s var(--bx-ease-out);
}
img.bx-img.bx-loaded { animation: none; background: none; opacity: 1; filter: none; transform: none; }
@keyframes bx-shimmer { from { background-position: 125% 0; } to { background-position: -125% 0; } }

.bx-motion [data-bx] {
    transition: opacity 1s var(--bx-ease), transform 1.15s var(--bx-ease-out), filter 1s var(--bx-ease), clip-path 1.25s var(--bx-ease-out);
    transition-delay: var(--bx-delay, 0ms);
}
.bx-motion [data-bx="up"] { opacity: 0; transform: translate3d(0, 46px, 0); }
.bx-motion [data-bx="down"] { opacity: 0; transform: translate3d(0, -30px, 0); }
.bx-motion [data-bx="left"] { opacity: 0; transform: translate3d(-60px, 0, 0); }
.bx-motion [data-bx="right"] { opacity: 0; transform: translate3d(60px, 0, 0); }
.bx-motion [data-bx="zoom"] { opacity: 0; transform: scale(.9); }
.bx-motion [data-bx="fade"] { opacity: 0; }
.bx-motion [data-bx="blur"] { opacity: 0; filter: blur(14px); transform: scale(1.03); }
.bx-motion [data-bx="tilt"] { opacity: 0; transform: perspective(1200px) rotateX(16deg) translate3d(0, 50px, 0); transform-origin: 50% 100%; }
.bx-motion [data-bx="flip"] { opacity: 0; transform: perspective(1400px) rotateY(-14deg) translate3d(30px, 0, 0); transform-origin: 0 50%; }
.bx-motion [data-bx="clip"] { clip-path: inset(0 0 100% 0); }
.bx-motion [data-bx="wipe"] { clip-path: inset(0 100% 0 0); }
.bx-motion [data-bx="iris"] { clip-path: circle(0% at 50% 50%); }
.bx-motion [data-bx].bx-in { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }
.bx-motion [data-bx="iris"].bx-in { clip-path: circle(80% at 50% 50%); }
@media (max-width: 767px) {
    .bx-motion [data-bx="left"], .bx-motion [data-bx="right"], .bx-motion [data-bx="flip"] { transform: translate3d(0, 36px, 0); }
}

/* Word-by-word headlines */
.bx-motion [data-bx="words"] .bx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.bx-motion [data-bx="words"] .bx-w > span {
    display: inline-block; transform: translate3d(0, 110%, 0);
    transition: transform 1s var(--bx-ease-out);
    transition-delay: calc(var(--i, 0) * 55ms + var(--bx-delay, 0ms));
}
.bx-motion [data-bx="words"].bx-in .bx-w > span { transform: none; }
.bx-motion [data-bx="words"] :is(span:not(.bx-w):not(.bx-w > span), em) .bx-w > span { color: var(--bx-hl); text-shadow: none; }

/* Headings get a sky underline that draws in once revealed */
.bx-motion .bx-underline { position: relative; }
.bx-motion .bx-underline::before {
    content: ""; position: absolute; left: 0; bottom: -10px; width: 64px; height: 3px; border-radius: 2px;
    background: var(--bx-accent); transform: scaleX(0); transform-origin: left; transition: transform 1.2s .4s var(--bx-ease-out);
}
.bx-motion .bx-underline.bx-in::before, .bx-motion .bx-underline.bx-done::before { transform: scaleX(1); }
.section-header .bx-underline::before, [style*="text-align: center"] .bx-underline::before, .text-center .bx-underline::before { left: 50%; margin-left: -32px; }

.bx-motion:not(.bx-ready) :is([class$="-hero"], [class*="-hero "], .hero-section, .careers-header) h1 { opacity: 0; }

/* Gentle pointer tilt on cards (desktop) */
.bx-tilt { transition: transform .5s var(--bx-ease); transform-style: preserve-3d; }

/* Back-to-top with a progress ring */
.bx-top {
    position: fixed; right: 30px; bottom: 104px; z-index: 900; width: 52px; height: 52px; border-radius: 50%;   /* sits above the WhatsApp button */
    border: 0; background: rgba(15, 23, 42, .88); backdrop-filter: blur(10px); color: #fff; cursor: pointer;
    display: grid; place-items: center; opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none;
    transition: opacity .4s var(--bx-ease), transform .5s var(--bx-ease-out); box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .6);
}
.bx-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.bx-top svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.bx-top circle { fill: none; stroke-width: 2.5; }
.bx-top .track { stroke: rgba(255, 255, 255, .12); }
.bx-top .ring { stroke: var(--bx-sky); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.bx-top .arrow { font-family: var(--bx-mono); font-size: 1.05rem; line-height: 1; }
.bx-top:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
    .bx-motion [data-bx], .bx-motion [data-bx] .bx-w > span, img.bx-img { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; }
    .bx-intro { display: none; }
    .bx-scroll-cue::after, img.bx-img { animation: none; }
}

/* Flat theme: solid colours only */
.bh-dark, .bh-hero, .bp-hero, .bp-cta, .bp-split-visual, .bh-contact-info, .bh-badge, .bh-stats, .bf, .bp-side-card--dark, .bp-initials { --bx-hl: #38bdf8; }
.bh-btn, .bn-cta { background: var(--bx-accent, #0472bb); }
.bh-btn:hover, .bn-cta:hover { background: #1e67b9; }
.bh-btn--ghost { background: rgba(255,255,255,.06); }
.bh-btn--ghost:hover { background: rgba(255,255,255,.14); }
.bh-btn--dark { background: #0B1220; }
.bh-btn--dark:hover { background: #1e293b; }
.bh-hero-grid, .bp-hero-grid, .bx-hero > .bx-grid { display: none; }
:is(h1, h2, h3, h4) em { font-style: normal; color: var(--bx-hl); }
.bh-service p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.bh-service h3, .bp-feature h3, .bp-card h3, .bp-rowcard h4, .bp-equip h3 { overflow-wrap: anywhere; }
.bh-title { font-size: clamp(1.9rem, 3.2vw, 2.75rem) !important; letter-spacing: -.02em; line-height: 1.15; }
.bh-hero h1, .bp-hero h1 { letter-spacing: -.025em; }
html :is(.bh-btn, .bh-btn:hover, .bn-cta, .bn-cta:hover, .bf-cta, .bf-btn, .bf-btn--white, .bf-btn--wa, .bp-wa, .bp-wa:hover, .btn:not(.btn-outline), .bf-logo-tile, .bn-panel, .bx-intro-logo) { box-shadow: none; }
html .wab-launch { box-shadow: 0 6px 16px -6px rgba(11,18,32,.45); }
html .bh-btn:hover, html .bf-btn:hover, html .bn-cta:hover { transform: none; }
html :is(.bh-form, .bp-side-card, .bp-toc, .bp-facts, .bh-collage-a, .bh-collage-b, .bp-row-img, .bp-feature-img, .bh-story-visual) { box-shadow: none; }
html .bh-mvv-card::before { content: none; }
html .bp-row-no { display: none; }