/*
ubind About page styles - Elementor Pro version
Paste this CSS into Elementor Page Settings > Advanced > Custom CSS,
Elementor Site Settings > Custom CSS, or upload this file and link it from the HTML.
Styles are scoped to .ubind-about-page to avoid affecting the rest of your WordPress site.
*/
/* ============================================================
TOKENS - same as landing page, anchored to brand jade #39b591
============================================================ */

.ubind-about-page {
	/* tokens now in the uBind Design Tokens plugin */
}

.ubind-about-page, .ubind-about-page * {box-sizing: border-box;
margin: 0;
padding: 0;}

.ubind-about-page {scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;}

.ubind-about-page {font-family: var(--body);
color: var(--ink-900);
background: var(--paper);
line-height: 1.55;
font-size: 16px;
overflow-x: hidden;}

.ubind-about-page img, .ubind-about-page svg {display: block;
max-width: 100%;}

.ubind-about-page a {color: inherit;
text-decoration: none;}

.ubind-about-page button {font: inherit;
cursor: pointer;
border: none;
background: none;
color: inherit;}

.ubind-about-page::selection, .ubind-about-page ::selection {background: var(--emerald-500);
color: white;}

.ubind-about-page .container {width: 100%;
max-width: var(--maxw);
margin: 0 auto;
padding: 0 32px;}

@media (max-width: 600px) {
.ubind-about-page .container {padding: 0 20px;}
}

.ubind-about-page .eyebrow {display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--emerald-600);}

.ubind-about-page .eyebrow .dot {width: 6px;
height: 6px;
background: var(--emerald-500);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(31, 166, 122, .18);
animation: pulse 2.4s ease-in-out infinite;}



.ubind-about-page .h-display {font-family: var(--font-display);
font-weight: 400;
letter-spacing: -0.028em;
line-height: 1.05;
font-variation-settings: "opsz" 144;}



.ubind-about-page .btn {display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 22px;
border-radius: 999px;
font-weight: 500;
font-size: 15px;
letter-spacing: -0.005em;
transition: transform .25s var(--ease-out), box-shadow .25s, background .2s, color .2s;
white-space: nowrap;
position: relative;
overflow: hidden;}

.ubind-about-page .btn-primary {background: var(--emerald-500);
color: white;
box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 10px 30px -8px rgba(31, 166, 122, .5);}

.ubind-about-page .btn-primary:hover {background: var(--emerald-600);
transform: translateY(-2px);
box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 18px 40px -10px rgba(31, 166, 122, .6);}

.ubind-about-page .btn-ghost {background: rgba(255, 255, 255, .05);
color: white;
border: 1px solid rgba(255, 255, 255, .14);
backdrop-filter: blur(10px);}

.ubind-about-page .btn-ghost:hover {background: rgba(255, 255, 255, .12);
transform: translateY(-2px);}

.ubind-about-page .btn-outline {background: transparent;
color: var(--ink-900);
border: 1px solid var(--ink-200);}

.ubind-about-page .btn-outline:hover {border-color: var(--ink-900);
transform: translateY(-2px);}

.ubind-about-page .arrow-svg {transition: transform .25s var(--ease-out);}

.ubind-about-page .btn:hover .arrow-svg {transform: translateX(4px);}

/* ============================================================
NAV - same as landing
============================================================ */

.ubind-about-page .nav-wrap {position: fixed;
top: 18px;
left: 0;
right: 0;
z-index: 100;
display: flex;
justify-content: center;
pointer-events: none;
transition: transform .4s var(--ease-out), opacity .3s;}

.ubind-about-page .nav-wrap.hidden {transform: translateY(-100%);
opacity: 0;}

.ubind-about-page .nav {pointer-events: auto;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px 10px 22px;
background: rgba(11, 17, 15, 0.6);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 999px;
box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .4);
transition: background .3s;}

.ubind-about-page .nav.scrolled {background: rgba(5, 8, 7, .85);}

.ubind-about-page .nav-logo {display: flex;
align-items: center;
gap: 10px;
color: white;
font-weight: 600;
font-size: 17px;
letter-spacing: -0.02em;
padding-right: 6px;
font-family: var(--body);}

.ubind-about-page .nav-logo .logo-mark {width: 30px;
height: 30px;}

.ubind-about-page .nav-logo .u {color: var(--emerald-400);}

.ubind-about-page .nav-links {display: flex;
align-items: center;
gap: 2px;
margin: 0 6px 0 18px;}

.ubind-about-page .nav-link {color: rgba(255, 255, 255, .78);
font-size: 14px;
padding: 8px 14px;
border-radius: 999px;
transition: background .2s, color .2s;}

.ubind-about-page .nav-link:hover {color: white;
background: rgba(255, 255, 255, .08);}

.ubind-about-page .nav-cta {font-size: 14px;
padding: 10px 18px;}

@media (max-width: 920px) {
.ubind-about-page .nav-links {display: none;}

.ubind-about-page .nav {padding: 8px 8px 8px 16px;}
}

/* ============================================================
ABOUT HERO - dark with animated mesh, John Gamble portrait
============================================================ */

.ubind-about-page .about-hero {position: relative;
min-height: 100vh;
background: var(--ink-1000);
color: white;
overflow: hidden;
isolation: isolate;}

.ubind-about-page .about-hero .hero-mesh {position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(70% 60% at 18% 20%, rgba(31, 166, 122, 0.45) 0%, transparent 60%),
radial-gradient(60% 50% at 88% 30%, rgba(105, 224, 176, 0.22) 0%, transparent 60%),
radial-gradient(80% 70% at 50% 100%, rgba(18, 138, 95, 0.32) 0%, transparent 70%),
linear-gradient(180deg, #061a14 0%, #08231b 60%, #050d0b 100%);
animation: mesh-shift 18s ease-in-out infinite alternate;}

@keyframes mesh-shift {0% {
filter: hue-rotate(0deg) saturate(1);
}

100% {
filter: hue-rotate(-8deg) saturate(1.15);
}}

.ubind-about-page .about-hero .hero-grid-bg {position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 80%);
animation: grid-pan 30s linear infinite;}

@keyframes grid-pan {from {
background-position: 0 0;
}

to {
background-position: 64px 64px;
}}

.ubind-about-page .about-hero .glow-orb {position: absolute;
border-radius: 50%;
filter: blur(60px);
pointer-events: none;
z-index: -1;}

.ubind-about-page .about-hero .orb-1 {width: 520px;
height: 520px;
background: radial-gradient(circle, rgba(31, 166, 122, .5) 0%, transparent 60%);
right: -120px;
top: 25%;
animation: drift1 14s ease-in-out infinite alternate;}

.ubind-about-page .about-hero .orb-2 {width: 380px;
height: 380px;
background: radial-gradient(circle, rgba(105, 224, 176, .35) 0%, transparent 60%);
left: -80px;
bottom: -40px;
animation: drift2 16s ease-in-out infinite alternate;}

@keyframes drift1 {0% {
transform: translate(0, 0) scale(1);
}

100% {
transform: translate(-50px, 40px) scale(1.15);
}}

@keyframes drift2 {0% {
transform: translate(0, 0) scale(1);
}

100% {
transform: translate(40px, -30px) scale(1.1);
}}

.ubind-about-page .hero-grid-2 {position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 80px;
align-items: center;}

@media (max-width: 1100px) {
.ubind-about-page .hero-grid-2 {grid-template-columns: 1fr;
gap: 60px;}
}

.ubind-about-page .about-hero .eyebrow {color: var(--emerald-300);
margin-bottom: 28px;}

@keyframes fadeUp {from {
opacity: 0;
transform: translateY(16px);
}

to {
opacity: 1;
transform: translateY(0);
}}

.ubind-about-page .about-hero h1 {font-size: clamp(46px, 6vw, 88px);
margin-bottom: 32px;
background: linear-gradient(180deg, #fff 0%, #b8d8ce 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;}

.ubind-about-page .about-hero .hero-sub {font-size: 19px;
line-height: 1.55;
color: rgba(255, 255, 255, .7);
max-width: 560px;
margin-bottom: 40px;}

.ubind-about-page .hero-quick-stats {display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
padding-top: 36px;
border-top: 1px solid rgba(255, 255, 255, .08);}

.ubind-about-page .hero-quick-stats .stat-num {font-family: var(--font-display);
font-size: 38px;
font-weight: 400;
color: white;
line-height: 1;
letter-spacing: -0.03em;
margin-bottom: 6px;}

.ubind-about-page .hero-quick-stats .stat-num em {color: var(--emerald-400);
font-style: normal;}

.ubind-about-page .hero-quick-stats .stat-label {font-size: 12.5px;
color: rgba(255, 255, 255, .55);}

@media (max-width: 720px) {
.ubind-about-page .hero-quick-stats {grid-template-columns: 1fr 1fr;
gap: 20px;}

.ubind-about-page .hero-quick-stats .stat-num {font-size: 30px;}
}

/* Founder portrait card */

.ubind-about-page .founder-card-wrap {position: relative;
opacity: 0;
animation: fadeUp 1.2s .4s var(--ease-out) forwards;
perspective: 1600px;}

.ubind-about-page .founder-card {position: relative;
background: linear-gradient(180deg, rgba(15, 28, 23, .95) 0%, rgba(8, 17, 14, .95) 100%);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: var(--r-xl);
padding: 24px;
box-shadow:
0 40px 80px -20px rgba(0, 0, 0, .5),
0 0 0 1px rgba(255, 255, 255, .04),
inset 0 1px 0 rgba(255, 255, 255, .06);
animation: founder-float 8s ease-in-out infinite alternate;
transform-style: preserve-3d;}

@keyframes founder-float {0% {
transform: translateY(0) rotateX(2deg) rotateY(-3deg);
}

100% {
transform: translateY(-10px) rotateX(2deg) rotateY(-3deg);
}}

.ubind-about-page .founder-card::before {content: "";
position: absolute;
inset: -1px;
background: linear-gradient(135deg, rgba(31, 166, 122, .4), transparent 60%);
border-radius: var(--r-xl);
z-index: -1;
opacity: .6;}

.ubind-about-page .founder-portrait {width: 100%;
aspect-ratio: 4/5;
border-radius: var(--r-lg);
background: linear-gradient(135deg, var(--emerald-800), var(--emerald-950));
overflow: hidden;
position: relative;}

.ubind-about-page .founder-portrait img {width: 100%;
height: 100%;
object-fit: cover;
filter: contrast(1.02) saturate(1.05);}

.ubind-about-page .founder-card-meta {padding: 18px 6px 4px;}

.ubind-about-page .founder-card-meta .name {font-family: var(--font-display);
font-size: 28px;
font-weight: 400;
letter-spacing: -0.02em;
margin-bottom: 4px;
background: linear-gradient(180deg, #fff 0%, #b8d8ce 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;}

.ubind-about-page .founder-card-meta .role {font-family: var(--mono);
font-size: 11px;
color: var(--emerald-300);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 10px;}

.ubind-about-page .founder-card-meta .bio-line {font-size: 13.5px;
color: rgba(255, 255, 255, .6);
line-height: 1.5;}

.ubind-about-page .founder-badge {position: absolute;
top: 18px;
right: -14px;
background: linear-gradient(135deg, var(--emerald-500), var(--emerald-700));
color: white;
padding: 8px 16px;
border-radius: 999px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
box-shadow: 0 12px 30px -8px rgba(31, 166, 122, .5);
animation: badge-pulse 3s ease-in-out infinite;
z-index: 2;}

@keyframes badge-pulse {0%,
100% {
transform: scale(1);
}

50% {
transform: scale(1.05);
}}

/* Floating "founder" decorative card */

.ubind-about-page .founder-float-card {position: absolute;
bottom: -30px;
left: -40px;
background: rgba(15, 28, 23, .9);
backdrop-filter: blur(16px);
border: 1px solid rgba(31, 166, 122, .3);
border-radius: var(--r-md);
padding: 14px 18px;
font-size: 12px;
color: white;
box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .6);
animation: side-float-3 9s ease-in-out infinite alternate;}

@keyframes side-float-3 {0% {
transform: translateY(0) rotate(-2deg);
}

100% {
transform: translateY(-10px) rotate(-2deg);
}}

.ubind-about-page .founder-float-card .label {font-family: var(--mono);
font-size: 9px;
color: var(--emerald-300);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 6px;}

.ubind-about-page .founder-float-card .val {font-family: var(--font-display);
font-size: 20px;
font-weight: 400;
letter-spacing: -0.01em;
background: linear-gradient(135deg, #fff, #b8d8ce);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;}

@media (max-width: 1100px) {
.ubind-about-page .founder-card-wrap {max-width: 460px;
margin: 0 auto;}

.ubind-about-page .founder-float-card {left: -20px;}
}

@media (max-width: 600px) {

.ubind-about-page .founder-float-card {display: none;}
}

/* ============================================================
SECTION BASE + REVEAL
============================================================ */

.ubind-about-page section.block {
position: relative;}


.ubind-about-page .section-head {display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 48px;
margin-bottom: 72px;}

.ubind-about-page .section-head .left {max-width: 760px;}

.ubind-about-page .section-head h2 {font-size: clamp(36px, 5vw, 64px);
margin-top: 18px;}

.ubind-about-page .section-head p {color: var(--ink-500);
font-size: 17px;
max-width: 540px;
margin-top: 18px;
line-height: 1.55;}

@media (max-width: 768px) {
.ubind-about-page .section-head {flex-direction: column;
align-items: flex-start;}
}.ubind-about-page .reveal {
transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}

.ubind-about-page .reveal.reveal-armed:not(.visible) {
opacity: 0;
transform: translateY(30px);
}

.ubind-about-page .reveal.visible {opacity: 1;
transform: translateY(0);}.ubind-about-page .reveal-stagger>* {
transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}

.ubind-about-page .reveal-stagger.reveal-armed:not(.visible)>* {
opacity: 0;
transform: translateY(24px);
}

.ubind-about-page .reveal-stagger.visible>*:nth-child(1) {transition-delay: 0s;}

.ubind-about-page .reveal-stagger.visible>*:nth-child(2) {transition-delay: .08s;}

.ubind-about-page .reveal-stagger.visible>*:nth-child(3) {transition-delay: .16s;}

.ubind-about-page .reveal-stagger.visible>*:nth-child(4) {transition-delay: .24s;}

.ubind-about-page .reveal-stagger.visible>*:nth-child(5) {transition-delay: .32s;}

.ubind-about-page .reveal-stagger.visible>*:nth-child(6) {transition-delay: .4s;}

.ubind-about-page .reveal-stagger.visible>*:nth-child(7) {transition-delay: .48s;}

.ubind-about-page .reveal-stagger.visible>*:nth-child(8) {transition-delay: .56s;}

.ubind-about-page .reveal-stagger.visible>* {opacity: 1;
transform: translateY(0);}

/* ============================================================
FOUNDER'S MESSAGE - bold quote-driven section
============================================================ */

.ubind-about-page .founder-msg {background: var(--paper);
position: relative;
overflow: hidden;}

.ubind-about-page .founder-msg::before {content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1100px;
height: 1100px;
background: radial-gradient(circle, rgba(31, 166, 122, .05) 0%, transparent 60%);
filter: blur(40px);
transform: translate(-50%, -50%);
z-index: 0;
pointer-events: none;}

.ubind-about-page .founder-msg>.container {position: relative;
z-index: 1;}

.ubind-about-page .founder-msg-head {text-align: center;
max-width: 780px;
margin: 0 auto 80px;}

.ubind-about-page .founder-msg-head .eyebrow {justify-content: center;}

.ubind-about-page .founder-msg-head h2 {margin-top: 22px;
font-size: clamp(34px, 4.6vw, 60px);}

.ubind-about-page .founder-msg-grid {display: grid;
grid-template-columns: .85fr 1.15fr;
gap: 80px;
align-items: center;}

@media (max-width: 1024px) {
.ubind-about-page .founder-msg-grid {grid-template-columns: 1fr;
gap: 56px;
max-width: 700px;
margin: 0 auto;}
}

.ubind-about-page .founder-msg-portrait {position: relative;
border-radius: var(--r-xl);
overflow: hidden;
aspect-ratio: 4/5;
box-shadow: 0 40px 80px -20px rgba(6, 26, 20, .25);
border: 1px solid var(--emerald-200);}

.ubind-about-page .founder-msg-portrait img {width: 100%;
height: 100%;
object-fit: cover;
display: block;}

.ubind-about-page .founder-msg-portrait::after {content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(6, 26, 20, .4) 100%);
pointer-events: none;}

.ubind-about-page .founder-msg-portrait .sig-row {position: absolute;
bottom: 24px;
left: 24px;
right: 24px;
z-index: 2;
color: white;
display: flex;
justify-content: space-between;
align-items: flex-end;}

.ubind-about-page .founder-msg-portrait .sig-row .who {font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.01em;}

.ubind-about-page .founder-msg-portrait .sig-row .role {font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--emerald-300);
margin-top: 4px;}

.ubind-about-page .founder-msg-body .opener {font-family: var(--font-display);
font-size: clamp(24px, 2.6vw, 34px);
font-weight: 400;
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--ink-1000);
margin-bottom: 28px;}

.ubind-about-page .founder-msg-body .opener em {font-style: italic;
color: var(--emerald-600);} .ubind-about-page .founder-msg-body p em { font-family: var(--ubind-font-display, 'Soho Gothic Pro', 'Montserrat', sans-serif); font-weight: 400; }

.ubind-about-page .founder-msg-body p {font-size: 17px;
line-height: 1.65;
color: var(--ink-600);
margin-bottom: 20px;}

.ubind-about-page .founder-msg-body p strong {color: var(--ink-1000);
font-weight: 600;}

.ubind-about-page .founder-msg-body .signature {margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--ink-100);
display: flex;
align-items: center;
gap: 14px;}

.ubind-about-page .founder-msg-body .sig-mark {font-family: var(--font-display);
font-style: italic;
font-size: 32px;
font-weight: 400;
color: var(--emerald-600);
line-height: 1;}

.ubind-about-page .founder-msg-body .sig-meta {font-family: var(--mono);
font-size: 12px;
color: var(--ink-500);
letter-spacing: 0.06em;
text-transform: uppercase;}

.ubind-about-page .founder-msg-body .sig-meta strong {display: block;
font-family: var(--body);
text-transform: none;
letter-spacing: 0;
color: var(--ink-1000);
font-size: 14px;
margin-bottom: 2px;}

/* ============================================================
MISSION & ORIGIN STORY - dark gradient panel
============================================================ */

.ubind-about-page .mission {background: var(--ink-1000);
color: white;
position: relative;
overflow: hidden;}

.ubind-about-page .mission::before {content: "";
position: absolute;
inset: 0;
background:
radial-gradient(60% 50% at 30% 30%, rgba(31, 166, 122, .25) 0%, transparent 60%),
radial-gradient(50% 40% at 80% 80%, rgba(105, 224, 176, .15) 0%, transparent 60%);
pointer-events: none;}

.ubind-about-page .mission>.container {position: relative;
z-index: 1;}

.ubind-about-page .mission .eyebrow {color: var(--emerald-400);}

.ubind-about-page .mission .section-head h2 {color: white;}

.ubind-about-page .mission .section-head p {color: rgba(255, 255, 255, .6);}

.ubind-about-page .origin-track {display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
position: relative;}

@media (max-width: 900px) {
.ubind-about-page .origin-track {grid-template-columns: 1fr;}
}

.ubind-about-page .origin-step {background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: var(--r-lg);
padding: 32px 28px;
position: relative;
overflow: hidden;
transition: border-color .3s, transform .3s, background .3s;}

.ubind-about-page .origin-step::before {content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--emerald-400), transparent);
opacity: 0;
transition: opacity .3s;}

.ubind-about-page .origin-step:hover {border-color: rgba(31, 166, 122, .4);
background: rgba(31, 166, 122, .06);
transform: translateY(-4px);}

.ubind-about-page .origin-step:hover::before {opacity: 1;}

.ubind-about-page .origin-step .year-tag {display: inline-block;
font-family: var(--mono);
font-size: 11px;
background: rgba(31, 166, 122, .15);
color: var(--emerald-300);
padding: 4px 10px;
border-radius: 999px;
letter-spacing: 0.1em;
border: 1px solid rgba(31, 166, 122, .3);
margin-bottom: 18px;}

.ubind-about-page .origin-step h3 {font-family: var(--font-display);
font-size: 24px;
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.015em;
color: white;
margin-bottom: 14px;}



.ubind-about-page .origin-step p {color: rgba(255, 255, 255, .65);
font-size: 14.5px;
line-height: 1.6;}

.ubind-about-page .origin-step .step-num {position: absolute;
top: 22px;
right: 28px;
font-family: var(--font-display);
font-size: 56px;
font-weight: 400;
letter-spacing: -0.05em;
color: rgba(31, 166, 122, .15);
line-height: 1;}

/* ============================================================
CORE VALUES - six animated cards with motion graphics per value
============================================================ */

/* Seam: .founder-msg above is --paper too. */
.ubind-about-page .values {background: var(--paper);
border-top: var(--ub-seam-light);
position: relative;
overflow: hidden;}

.ubind-about-page .values::before {content: "";
position: absolute;
top: -200px;
right: -200px;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(31, 166, 122, .08) 0%, transparent 60%);
filter: blur(40px);
z-index: 0;}

.ubind-about-page .values>.container {position: relative;
z-index: 1;}

.ubind-about-page .values-grid {display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;}

@media (max-width: 1024px) {
.ubind-about-page .values-grid {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 640px) {
.ubind-about-page .values-grid {grid-template-columns: 1fr;}
}

.ubind-about-page .value-card {background: white;
border: 1px solid var(--ink-100);
border-radius: var(--r-lg);
padding: 36px 32px;
position: relative;
overflow: hidden;
transition: border-color .3s, transform .3s, box-shadow .3s;
min-height: 280px;
display: flex;
flex-direction: column;}

.ubind-about-page .value-card:hover {border-color: var(--emerald-300);
transform: translateY(-4px);
box-shadow: 0 20px 50px -20px rgba(31, 166, 122, .2);}

.ubind-about-page .value-card .v-mono {font-family: var(--mono);
font-size: 11px;
color: var(--emerald-600);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 16px;}

.ubind-about-page .value-card h3 {font-family: var(--font-display);
font-size: 28px;
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink-1000);
margin-bottom: 12px;}



.ubind-about-page .value-card p {color: var(--ink-500);
font-size: 14.5px;
line-height: 1.55;
flex: 1;}

.ubind-about-page .value-card .v-anim {position: absolute;
bottom: 0;
right: 0;
width: 140px;
height: 140px;
opacity: 0.55;
pointer-events: none;
transition: opacity .3s, transform .5s var(--ease-out);}

.ubind-about-page .value-card:hover .v-anim {opacity: 1;
transform: scale(1.08);}

/* per-value motion graphic shapes */

.ubind-about-page .v-anim.grow circle.ring {fill: none;
stroke: var(--emerald-400);
stroke-width: 1.5;
transform-origin: center;
animation: grow-pulse 3s ease-in-out infinite;}

.ubind-about-page .v-anim.grow circle.ring:nth-child(2) {animation-delay: -1s;}

.ubind-about-page .v-anim.grow circle.ring:nth-child(3) {animation-delay: -2s;}

@keyframes grow-pulse {0%,
100% {
transform: scale(.5);
opacity: 0;
}

50% {
transform: scale(1);
opacity: .6;
}}

.ubind-about-page .v-anim.serve path {fill: none;
stroke: var(--emerald-500);
stroke-width: 1.5;
stroke-dasharray: 4 4;
animation: dash-flow 6s linear infinite;}

@keyframes dash-flow {to {
stroke-dashoffset: -80;
}}

.ubind-about-page .v-anim.innovate {filter: drop-shadow(0 0 8px rgba(31, 166, 122, .4));}

.ubind-about-page .v-anim.innovate .spark {transform-origin: center;
animation: spark-rotate 8s linear infinite;}

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

.ubind-about-page .v-anim.fair rect {fill: var(--emerald-400);
transform-origin: center bottom;
animation: bar-rise 2.4s var(--ease-out) infinite alternate;}

.ubind-about-page .v-anim.fair rect:nth-child(2) {animation-delay: -.6s;}

.ubind-about-page .v-anim.fair rect:nth-child(3) {animation-delay: -1.2s;}

.ubind-about-page .v-anim.fair rect:nth-child(4) {animation-delay: -1.8s;}

@keyframes bar-rise {0% {
transform: scaleY(.3);
}

100% {
transform: scaleY(1);
}}

.ubind-about-page .v-anim.feedback path.ln {fill: none;
stroke: var(--emerald-500);
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: draw-loop 3.5s var(--ease-out) infinite;}

@keyframes draw-loop {0% {
stroke-dashoffset: 200;
}

60% {
stroke-dashoffset: 0;
}

100% {
stroke-dashoffset: -200;
}}

.ubind-about-page .v-anim.improve {animation: step-up 4s ease-in-out infinite;}

@keyframes step-up {0%,
100% {
transform: translateY(0);
}

50% {
transform: translateY(-6px);
}}

.ubind-about-page .v-anim.improve .step-line {fill: none;
stroke: var(--emerald-400);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: trace-up 3s var(--ease-out) infinite;}

@keyframes trace-up {0% {
stroke-dashoffset: 300;
}

70% {
stroke-dashoffset: 0;
}

100% {
stroke-dashoffset: -300;
}}

/* ============================================================
ORG CHART TEAM - clean hierarchical layout matching real chart
============================================================ */

.ubind-about-page .team {background: linear-gradient(180deg, var(--ink-1000) 0%, var(--emerald-950) 100%);
color: white;
position: relative;
overflow: hidden;}

.ubind-about-page .team::before {content: "";
position: absolute;
inset: 0;
background:
radial-gradient(60% 50% at 50% 20%, rgba(31, 166, 122, .2) 0%, transparent 60%),
radial-gradient(40% 40% at 20% 80%, rgba(105, 224, 176, .12) 0%, transparent 60%);
pointer-events: none;}

.ubind-about-page .team>.container {position: relative;
z-index: 1;}

.ubind-about-page .team .eyebrow {color: var(--emerald-400);}

.ubind-about-page .team .section-head h2 {color: white;}

.ubind-about-page .team .section-head p {color: rgba(255, 255, 255, .6);}

/* ─────── Org chart tree ─────── */

.ubind-about-page .org-tree {position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;}

.ubind-about-page .org-row {display: flex;
gap: 24px;
align-items: stretch;
flex-wrap: wrap;
justify-content: center;
position: relative;
z-index: 1;}

.ubind-about-page .org-row.row-ceo {margin-bottom: 72px;}

.ubind-about-page .org-row.row-leads {margin-bottom: 64px;
gap: 18px;}

.ubind-about-page .org-row.row-team {margin-bottom: 0;
gap: 18px;}

/* connector lines between layers */

.ubind-about-page .org-connector {width: 100%;
height: 56px;
position: relative;
z-index: 0;}

.ubind-about-page .org-connector svg {width: 100%;
height: 100%;
position: absolute;
inset: 0;}

.ubind-about-page .org-connector svg path {fill: none;
stroke: rgba(105, 224, 176, .35);
stroke-width: 1.2;
stroke-dasharray: 4 5;
animation: org-flow 8s linear infinite;}

@keyframes org-flow {to {
stroke-dashoffset: -100;
}}

.ubind-about-page .org-connector svg circle.flow-dot {fill: var(--emerald-300);
filter: drop-shadow(0 0 6px var(--emerald-400));}

/* member cards */

.ubind-about-page .member-card {background: linear-gradient(180deg, rgba(15, 28, 23, .85) 0%, rgba(8, 17, 14, .85)
100%);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: var(--r-md);
padding: 0;
width: 220px;
overflow: hidden;
transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s;
position: relative;
cursor: default;
display: flex;
flex-direction: column;}

.ubind-about-page .member-card:hover {transform: translateY(-4px);
border-color: rgba(31, 166, 122, .4);
box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .5), 0 0 0 1px rgba(31, 166, 122, .2);}

.ubind-about-page .member-card .photo-wrap {width: 100%;
aspect-ratio: 4/5;
overflow: hidden;
background: var(--emerald-900);
position: relative;}

.ubind-about-page .member-card .photo-wrap img {width: 100%;
height: 115%;
object-fit: cover;
transition: transform .6s var(--ease-out);}

.ubind-about-page .member-card:hover .photo-wrap img {transform: scale(1.04);}

.ubind-about-page .member-card .photo-wrap::after {content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(5, 8, 7, .6) 100%);
pointer-events: none;}

.ubind-about-page .member-card .photo-wrap .role-chip {position: absolute;
bottom: 12px;
left: 12px;
right: 12px;
z-index: 2;}

.ubind-about-page .member-card .role-chip .role-tag {display: inline-block;
background: rgba(31, 166, 122, .18);
color: var(--emerald-300);
border: 1px solid rgba(31, 166, 122, .35);
padding: 4px 9px;
border-radius: 999px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.08em;
text-transform: uppercase;
backdrop-filter: blur(8px);}

.ubind-about-page .member-card .meta {padding: 14px 16px 18px;
border-top: 1px solid rgba(255, 255, 255, .04);}

.ubind-about-page .member-card .meta .name {font-family: var(--font-display);
font-size: 19px;
font-weight: 500;
letter-spacing: -0.015em;
color: white;
margin-bottom: 4px;}

.ubind-about-page .member-card .meta .title {font-size: 12.5px;
color: rgba(255, 255, 255, .6);
line-height: 1.4;}

/* CEO card is bigger */

.ubind-about-page .member-card.ceo {width: 280px;
border-color: rgba(31, 166, 122, .4);
background: linear-gradient(180deg, rgba(15, 40, 30, .95) 0%, rgba(8, 25, 18, .95) 100%);
box-shadow:
0 30px 80px -15px rgba(31, 166, 122, .2),
0 0 0 1px rgba(31, 166, 122, .2);}

.ubind-about-page .member-card.ceo .photo-wrap {aspect-ratio: 1;}

.ubind-about-page .member-card.ceo .meta .name {font-size: 24px;}

.ubind-about-page .member-card.ceo .meta .title {font-size: 13px;
color: rgba(255, 255, 255, .7);}

.ubind-about-page .member-card.ceo .role-chip .role-tag {background: linear-gradient(135deg, var(--emerald-500),
var(--emerald-700));
color: white;
border-color: rgba(255, 255, 255, .2);}

/* placeholder dotted card for roles we don't have photos for */

.ubind-about-page .member-card.ghost {background: rgba(255, 255, 255, .02);
border: 1px dashed rgba(255, 255, 255, .15);
width: 220px;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px 16px;
min-height: 320px;}

.ubind-about-page .member-card.ghost .ghost-init {width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(31, 166, 122, .12);
border: 1px solid rgba(31, 166, 122, .25);
color: var(--emerald-300);
display: grid;
place-items: center;
font-family: var(--font-display);
font-size: 22px;
letter-spacing: -0.02em;
margin: 30px auto 18px;}

.ubind-about-page .member-card.ghost .name {font-family: var(--font-display);
font-size: 17px;
color: rgba(255, 255, 255, .85);
margin-bottom: 6px;
letter-spacing: -0.01em;}

.ubind-about-page .member-card.ghost .title {font-size: 12px;
color: rgba(255, 255, 255, .5);
line-height: 1.4;}

@media (max-width: 720px) {
.ubind-about-page .org-row {gap: 14px;}

.ubind-about-page .member-card, .ubind-about-page .member-card.ghost {width: calc(50% - 7px);}

.ubind-about-page .member-card.ceo {width: 100%;}

.ubind-about-page .org-connector {height: 36px;}
}

/* Team subgroup section labels */

.ubind-about-page .team-subhead {text-align: center;
margin: 70px auto 36px;
max-width: 700px;}

.ubind-about-page .team-subhead .eyebrow {margin-bottom: 14px;
color: var(--emerald-400);}

.ubind-about-page .team-subhead h3 {font-family: var(--font-display);
font-size: clamp(24px, 3vw, 32px);
font-weight: 400;
letter-spacing: -0.02em;
color: white;}



/* Sub-team strip - engineers row */

.ubind-about-page .team-strip {display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;}

@media (max-width: 1100px) {
.ubind-about-page .team-strip {grid-template-columns: repeat(3, 1fr);}
}

@media (max-width: 640px) {
.ubind-about-page .team-strip {grid-template-columns: repeat(2, 1fr);}
}

/* Senior management team - consolidated grid */

.ubind-about-page .team-strip.smt {grid-template-columns: repeat(4, 1fr);
max-width: 1040px;
margin: 0 auto;}

@media (max-width: 860px) {
.ubind-about-page .team-strip.smt {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 480px) {
.ubind-about-page .team-strip.smt {grid-template-columns: 1fr;
max-width: 320px;}
}

.ubind-about-page .team-strip .member-card, .ubind-about-page .team-strip .member-card.ghost {width: auto;}

/* ============================================================
MILESTONES TIMELINE - full-width animated timeline
============================================================ */

.ubind-about-page .milestones {background: var(--paper);
position: relative;
overflow: hidden;}

.ubind-about-page .milestones::before {content: "";
position: absolute;
top: 200px;
left: -200px;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(31, 166, 122, .08) 0%, transparent 60%);
filter: blur(50px);
z-index: 0;}

.ubind-about-page .milestones>.container {position: relative;
z-index: 1;}

/* Vertical timeline rail */

.ubind-about-page .timeline-rail {position: relative;
max-width: 920px;
margin: 0 auto;
padding: 20px 0;}

.ubind-about-page .timeline-rail::before {content: "";
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
margin-left: -1px;
background: linear-gradient(180deg,
transparent 0%,
var(--emerald-200) 8%,
var(--emerald-300) 50%,
var(--emerald-200) 92%,
transparent 100%);}

.ubind-about-page .timeline-rail::after {content: "";
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
margin-left: -1px;
background: linear-gradient(180deg, var(--emerald-500), var(--emerald-400));
transform-origin: top center;
transform: scaleY(var(--prog, 0));
transition: transform .8s var(--ease-out);
box-shadow: 0 0 16px var(--emerald-400);
/* Fade the line in and out over the same first and last 8% of the rail as the static line
behind it, so it emerges from the top rather than starting at full strength and ends where
that one ends rather than stopping dead. scaleY scales the mask along with the paint, so every
stop divides the progress back out and the fades stay a fixed distance from the rail's two ends
however far the line has grown. That is also what keeps the growing tip crisp: until the line is
nearly complete the closing stops sit beyond its end, so there is nothing there to fade. */
-webkit-mask-image: linear-gradient(180deg,
transparent 0,
#000 calc(8% / max(var(--prog, 1), .0001)),
#000 calc(92% / max(var(--prog, 1), .0001)),
transparent calc(100% / max(var(--prog, 1), .0001)));
mask-image: linear-gradient(180deg,
transparent 0,
#000 calc(8% / max(var(--prog, 1), .0001)),
#000 calc(92% / max(var(--prog, 1), .0001)),
transparent calc(100% / max(var(--prog, 1), .0001)));
z-index: 1;}.ubind-about-page .tl-item {
position: relative;
/* The reveal transform makes each item a stacking context, so the dot's own
z-index cannot clear the rail's progress line. Lift the whole item instead. */
z-index: 2;
display: grid;
grid-template-columns: 1fr 80px 1fr;
gap: 0;
margin-bottom: 36px;
align-items: center;
transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}

.ubind-about-page .tl-item.reveal-armed:not(.visible) {
opacity: 0;
transform: translateY(30px);
}

.ubind-about-page .tl-item.visible {opacity: 1;
transform: translateY(0);}

.ubind-about-page .tl-item .tl-card-side {position: relative;}

.ubind-about-page .tl-item .tl-spacer {/* empty side */}

.ubind-about-page .tl-card {background: white;
border: 1px solid var(--ink-100);
border-radius: var(--r-lg);
padding: 24px 26px;
box-shadow: 0 12px 36px -16px rgba(6, 26, 20, .18);
position: relative;
transition: border-color .3s, transform .25s, box-shadow .3s;}

.ubind-about-page .tl-card:hover {border-color: var(--emerald-300);
transform: translateY(-3px);
box-shadow: 0 24px 50px -16px rgba(31, 166, 122, .22);}

.ubind-about-page .tl-card .year {display: inline-block;
font-family: var(--mono);
font-size: 11px;
color: var(--emerald-700);
background: var(--emerald-50);
border: 1px solid var(--emerald-200);
padding: 4px 11px;
border-radius: 28px;
letter-spacing: 0.08em;
margin-bottom: 12px;}

.ubind-about-page .tl-card h3 {font-family: var(--font-display);
font-size: 22px;
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--ink-1000);
margin-bottom: 10px;}



.ubind-about-page .tl-card p {color: var(--ink-500);
font-size: 14.5px;
line-height: 1.55;}

.ubind-about-page .tl-card ul {list-style: none;
margin-top: 12px;}

.ubind-about-page .tl-card ul li {display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13.5px;
color: var(--ink-600);
padding: 4px 0;
line-height: 1.4;}

.ubind-about-page .tl-card ul li::before {content: "";
flex-shrink: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--emerald-400);
margin-top: 8px;}

.ubind-about-page .tl-card ul li > .li-body {flex: 1;}

.ubind-about-page .tl-card ul li > .li-body strong {display: block;
margin-bottom: 2px;}

.ubind-about-page .tl-card .gwp-badge {display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, var(--emerald-500), var(--emerald-700));
color: white;
padding: 6px 12px;
border-radius: 999px;
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
margin-top: 14px;
box-shadow: 0 8px 20px -6px rgba(31, 166, 122, .5);}

.ubind-about-page .tl-card .gwp-badge::before {content: "";
width: 6px;
height: 6px;
background: white;
border-radius: 50%;}

.ubind-about-page .tl-card.major {background: linear-gradient(180deg, var(--ink-1000), var(--emerald-950));
color: white;
border-color: var(--emerald-700);}

.ubind-about-page .tl-card.major::before {content: "";
position: absolute;
inset: 0;
background: radial-gradient(50% 60% at 100% 0%, rgba(31, 166, 122, .35) 0%, transparent 60%);
border-radius: var(--r-lg);
pointer-events: none;}

.ubind-about-page .tl-card.major h3 {color: white;}



.ubind-about-page .tl-card.major p {color: rgba(255, 255, 255, .75);}

.ubind-about-page .tl-card.major ul li {color: rgba(255, 255, 255, .85);}

.ubind-about-page .tl-card.major .year {background: rgba(31, 166, 122, .2);
color: var(--emerald-300);
border-color: rgba(31, 166, 122, .4);}

/* Center dot */

.ubind-about-page .tl-dot-cell {position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100%;}

.ubind-about-page .tl-dot {width: 22px;
height: 22px;
background: var(--paper);
border: 3px solid var(--emerald-300);
border-radius: 50%;
position: relative;
z-index: 2;
transition: background .3s, border-color .3s, box-shadow .3s, transform .3s;}

.ubind-about-page .tl-item.visible .tl-dot {background: var(--emerald-500);
border-color: var(--emerald-500);
box-shadow: 0 0 0 6px rgba(31, 166, 122, .18), 0 0 18px var(--emerald-400);
transform: scale(1.06);}

.ubind-about-page .tl-item.major .tl-dot {width: 28px;
height: 28px;
border-width: 4px;}

.ubind-about-page .tl-item.visible.major .tl-dot {box-shadow: 0 0 0 8px rgba(31, 166, 122, .22), 0 0 24px
var(--emerald-400);}

/* Side connectors from card to dot */

.ubind-about-page .tl-item.left .tl-card-side:first-child .tl-card::after {content: "";
position: absolute;
right: -38px;
top: 50%;
height: 1px;
width: 38px;
background: var(--emerald-300);
transform: scaleX(0);
transform-origin: left;
transition: transform .6s .2s var(--ease-out);}

.ubind-about-page .tl-item.right .tl-card-side:last-child .tl-card::before {content: "";
position: absolute;
left: -38px;
top: 50%;
height: 1px;
width: 38px;
background: var(--emerald-300);
transform: scaleX(0);
transform-origin: right;
transition: transform .6s .2s var(--ease-out);}

.ubind-about-page .tl-item.left.visible .tl-card-side:first-child .tl-card::after {transform: scaleX(1);}

.ubind-about-page .tl-item.right.visible .tl-card-side:last-child .tl-card::before {transform: scaleX(1);}

@media (max-width: 768px) {
.ubind-about-page .timeline-rail::before, .ubind-about-page .timeline-rail::after {left: 22px;}

.ubind-about-page .tl-item {grid-template-columns: 44px 1fr;
gap: 0;}

.ubind-about-page .tl-item .tl-dot-cell {order: -1;
justify-content: flex-start;}

.ubind-about-page .tl-item .tl-spacer {display: none;}

.ubind-about-page .tl-item.left .tl-card-side:first-child {order: 0;}

.ubind-about-page .tl-item.left .tl-card-side:last-child {display: none;}

.ubind-about-page .tl-item.right .tl-card-side:first-child {display: none;}

.ubind-about-page .tl-item.right .tl-card-side:last-child {order: 0;}

.ubind-about-page .tl-item.left .tl-card-side:first-child .tl-card::after, .ubind-about-page .tl-item.right
.tl-card-side:last-child .tl-card::before {left: -22px;
right: auto;
width: 22px;
transform-origin: left;}
}

/* ============================================================
FOOTER
============================================================ */

.ubind-about-page footer {background: #050807;
color: rgba(255, 255, 255, .7);
padding: 80px 0 40px;
border-top: 1px solid rgba(255, 255, 255, .06);}

.ubind-about-page .footer-grid {display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 60px;}

@media (max-width: 900px) {
.ubind-about-page .footer-grid {grid-template-columns: 1fr 1fr;}
}

@media (max-width: 540px) {
.ubind-about-page .footer-grid {grid-template-columns: 1fr;}
}

.ubind-about-page .footer-brand {max-width: 320px;}

.ubind-about-page .footer-brand .logo {display: flex;
align-items: center;
gap: 10px;
color: white;
font-weight: 600;
font-size: 22px;
letter-spacing: -0.02em;
margin-bottom: 18px;}

.ubind-about-page .footer-brand .tag {font-family: var(--mono);
font-size: 12px;
color: var(--emerald-400);
letter-spacing: 0.1em;
text-transform: uppercase;}

.ubind-about-page .footer-brand p {font-size: 14.5px;
line-height: 1.6;
margin-top: 16px;}

.ubind-about-page .footer-col h5 {color: white;
font-size: 13px;
font-family: var(--mono);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 18px;}

.ubind-about-page .footer-col ul {list-style: none;}

.ubind-about-page .footer-col li {padding: 6px 0;}

.ubind-about-page .footer-col a {color: rgba(255, 255, 255, .6);
font-size: 14px;
transition: color .2s;}

.ubind-about-page .footer-col a:hover {color: var(--emerald-400);}

.ubind-about-page .footer-bottom {display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, .06);
font-size: 13px;
color: rgba(255, 255, 255, .4);
flex-wrap: wrap;
gap: 16px;}

.ubind-about-page .footer-bottom a {color: rgba(255, 255, 255, .5);
margin-left: 18px;
transition: color .2s;}

.ubind-about-page .footer-bottom a:hover {color: white;}

.ubind-about-page .compliance-row {display: flex;
gap: 12px;
margin-top: 24px;
flex-wrap: wrap;}

.ubind-about-page .compliance-badge {display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 8px;
font-family: var(--mono);
font-size: 11px;
color: rgba(255, 255, 255, .7);
letter-spacing: 0.06em;}

@media (prefers-reduced-motion: reduce) {
.ubind-about-page, .ubind-about-page *, .ubind-about-page::before, .ubind-about-page *::before,
.ubind-about-page::after, .ubind-about-page *::after {animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;}
}