. */
.nx-has-mega {
position: static;
}
.nx-mega {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 10px);
width: min(100% - 2.4rem, var(--container));
margin-inline: auto;
background: rgba(255, 255, 255, .97);
backdrop-filter: saturate(1.4) blur(14px);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-10px);
transition: opacity var(--t), transform var(--t), visibility var(--t);
}
/* Hover bridges. The pointer has to cross the header's bottom padding and
the 10px offset to reach the panel, and neither belongs to the
— so
the menu would close mid-travel without these.
The link strip only exists while the item is open, otherwise it would
hang below the header and swallow clicks on the page underneath. It is
self-sustaining: hovering a pseudo-element counts as hovering its host,
so once the pointer enters the strip the strip stays alive. */
.nx-has-mega:hover>.nx-nav__link::before,
.nx-has-mega:focus-within>.nx-nav__link::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 2.4rem;
}
.nx-mega::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -14px;
height: 14px;
}
.nx-mega__inner {
padding: 1.7rem 2rem 1.9rem;
}
.nx-has-mega:hover .nx-mega,
.nx-has-mega:focus-within .nx-mega {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
/* Three even columns with hairline rules between them. Multi-column keeps
the markup a plain
, so adding links needs no layout change. */
.nx-mega__list {
columns: 3;
column-gap: 3.2rem;
column-rule: 1px solid var(--line);
}
.nx-mega__list li {
break-inside: avoid;
}
.nx-mega__list a {
display: block;
padding: .78rem .2rem;
font-size: 1rem;
font-weight: 500;
color: var(--muted);
transition: color var(--t), transform var(--t);
}
.nx-mega__list a:hover,
.nx-mega__list a:focus-visible,
.nx-mega__list a.active {
color: var(--primary-700);
transform: translateX(5px);
}
/* Burger + mobile */
.nx-burger {
display: none;
width: 44px;
height: 44px;
border-radius: 12px;
flex-direction: column;
gap: 5px;
align-items: center;
justify-content: center;
}
.nx-burger span {
width: 22px;
height: 2px;
background: var(--ink);
border-radius: 2px;
transition: transform var(--t), opacity var(--t), background var(--t);
}
.nx-nav.is-solid .nx-burger span {
background: var(--ink);
}
.nx-mobile {
position: fixed;
inset: 0;
z-index: 1500;
visibility: hidden;
/* Stay visible until the panel has finished sliding out. */
transition: visibility 0s linear .45s;
}
.nx-mobile.is-open {
visibility: visible;
transition-delay: 0s;
}
/* The scrim sits after the panel in the DOM, so it needs an explicit
z-index below it — otherwise it paints over the drawer and swallows
every tap on the menu links. */
.nx-mobile__scrim {
position: absolute;
inset: 0;
z-index: 0;
background: rgba(9, 20, 36, .5);
opacity: 0;
transition: opacity var(--t);
backdrop-filter: blur(2px);
}
.nx-mobile.is-open .nx-mobile__scrim {
opacity: 1;
}
.nx-mobile__panel {
position: absolute;
top: 0;
right: 0;
z-index: 1;
height: 100%;
width: min(400px, 86vw);
background: var(--ink);
color: #fff;
padding: 1.4rem;
padding-bottom: calc(1.4rem + env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
/* Long menus must scroll inside the drawer instead of overflowing
off-screen on short phone viewports. */
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
transform: translateX(100%);
transition: transform .45s var(--ease-out);
box-shadow: -30px 0 80px rgba(0, 0, 0, .4);
}
.nx-mobile.is-open .nx-mobile__panel {
transform: translateX(0);
}
/* Pinned to the top of the scrolling panel so the close button stays
reachable no matter how far the menu is scrolled. */
.nx-mobile__head {
position: sticky;
top: 0;
z-index: 2;
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
background: var(--ink);
margin: -1.4rem -1.4rem 1.5rem;
padding: 1.4rem;
}
.nx-mobile__close {
flex: none;
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(255, 255, 255, .08);
color: #fff;
font-size: 1.2rem;
}
.nx-mobile__list {
flex: none;
display: flex;
flex-direction: column;
gap: .2rem;
}
.nx-mobile__list a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem .6rem;
font-size: 1.4rem;
color: rgba(255, 255, 255, .9);
border-bottom: 1px solid rgba(255, 255, 255, .08);
transition: color var(--t), padding var(--t);
}
.nx-mobile__list a i {
opacity: 0;
transform: translateX(-8px);
transition: all var(--t);
color: var(--accent-300);
}
.nx-mobile__list a:hover,
.nx-mobile__list a.active {
color: #fff;
padding-left: 1rem;
}
.nx-mobile__list a:hover i,
.nx-mobile__list a.active i {
opacity: 1;
transform: translateX(0);
}
/* Touch devices never fire :hover, so show the chevrons by default and
drop the hover-only indent that would otherwise stick after a tap. */
@media (hover: none) {
.nx-mobile__list a i {
opacity: .5;
transform: none;
}
.nx-mobile__list a:hover {
padding-left: .6rem;
}
.nx-mobile__list a.active {
padding-left: 1rem;
}
.nx-mobile__sublist a:hover {
padding-left: .6rem;
}
}
.nx-mobile__panel>nav {
flex: none;
}
/* Sub-links under a mobile menu item (About / Portfolio dropdowns). */
.nx-mobile__sublist {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: .2rem 0 .6rem .9rem;
}
.nx-mobile__sublist a {
display: block;
padding: .55rem .6rem;
font-size: .98rem;
color: rgba(255, 255, 255, .62);
border-bottom: 1px solid rgba(255, 255, 255, .05);
transition: color var(--t), padding-left var(--t);
}
.nx-mobile__sublist a:hover {
color: #fff;
padding-left: 1rem;
}
.nx-mobile__foot {
flex: none;
margin-top: auto;
padding-top: 1.5rem;
}
.nx-mobile__promise {
text-align: center;
color: var(--accent-300);
margin-top: 1rem;
}
/* 7. ------------------------------------------------------ HERO */
.nx-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
padding: 8rem 0 4rem;
background: radial-gradient(120% 120% at 80% 0%, var(--ink-3), var(--ink) 55%);
color: #fff;
overflow: hidden;
}
.nx-hero__bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.nx-hero__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .42;
}
/* --- Hero intro strip (below video hero) --- */
.nx-hero-intro {
background: var(--surface);
padding-bottom: clamp(2.5rem, 4vw, 4rem);
}
.nx-hero-intro.nx-section--paper {
background: var(--paper);
}
.nx-hero-intro__inner {
margin: 0 auto;
text-align: center;
}
.nx-hero-intro__title {
line-height: 1.12;
color: var(--heading);
margin: 0;
letter-spacing: -.015em;
}
/* Longer quotes (e.g. About page) break at a fixed point into two lines
instead of the big multi-line display treatment above. */
.nx-hero-intro__title--inline {
font-size: clamp(1.4rem, 3.2vw, 2.75rem);
}
.nx-hero-intro__text {
color: var(--muted);
line-height: 1.7;
margin: 1.1rem 0 0;
}
.nx-hero-intro__links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin-top: 1.8rem;
}
/* --- Video-background hero variant --- */
.nx-hero--video {
min-height: 100vh;
padding: 0;
}
@media (min-width: 901px) {
/* Match the focus hero's total height, including its 88px header offset,
so the overlapping card and its label sit at the same viewport position. */
.nx-hero--video {
min-height: clamp(648px, calc(100svh - 22px), 1018px);
}
}
.nx-hero--video .nx-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scaleX(-1);
}
.nx-hero--video .nx-hero__inner {
display: flex;
justify-content: flex-start;
}
.nx-hero--video .nx-hero__copy {
max-width: 50%;
margin: 0;
text-align: left;
}
.nx-hero--video .nx-hero__title {
letter-spacing: -.02em;
}
/* --- Full-bleed photographic hero variant --- */
.nx-hero--photo {
min-height: 94vh;
}
.nx-hero--photo .nx-hero__img {
opacity: 1;
object-position: 68% center;
}
.nx-hero--photo .nx-hero__glow--1 {
opacity: .35;
}
.nx-hero--photo .nx-hero__glow--2,
.nx-hero--photo .nx-blob {
opacity: .2;
}
.nx-hero--photo .nx-hero__inner {
grid-template-columns: 1.05fr .95fr;
align-items: center;
}
.nx-hero--photo .nx-hero__copy {
max-width: 640px;
}
.nx-hero--photo .nx-hero__visual {
position: relative;
min-height: 440px;
aspect-ratio: auto;
display: block;
}
.nx-hero--photo .nx-hero__card {
z-index: 5;
}
.nx-hero--photo .nx-hero__card--1 {
top: 10%;
left: 2%;
right: auto;
}
.nx-hero--photo .nx-hero__card--2 {
bottom: 14%;
right: 0;
left: auto;
}
.nx-hero__leafbadge--float {
position: absolute;
z-index: 4;
bottom: 4%;
left: 16%;
box-shadow: var(--shadow-lg);
}
.nx-hero__grid {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
background-size: 54px 54px;
mask-image: radial-gradient(120% 90% at 60% 10%, #000 30%, transparent 75%);
}
.nx-hero__glow {
position: absolute;
border-radius: 50%;
filter: blur(90px);
opacity: .5;
}
.nx-hero__glow--1 {
width: 480px;
height: 480px;
background: var(--primary);
top: -140px;
right: -60px;
}
.nx-hero__glow--2 {
width: 420px;
height: 420px;
background: var(--accent);
bottom: -160px;
left: -100px;
opacity: .38;
}
.nx-blob {
position: absolute;
border-radius: 46% 54% 60% 40% / 46% 40% 60% 54%;
background: linear-gradient(135deg, rgba(22, 67, 121, .5), rgba(211, 35, 38, .25));
filter: blur(6px);
opacity: .5;
animation: nx-morph 16s ease-in-out infinite;
}
.nx-blob--a {
width: 280px;
height: 280px;
top: 14%;
right: 8%;
}
.nx-blob--b {
width: 220px;
height: 220px;
bottom: 10%;
left: 6%;
animation-delay: -6s;
}
.nx-hero__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.nx-hero__title {
line-height: 1.03;
color: #fff;
margin: .4rem 0 0;
letter-spacing: -.025em;
}
.nx-hero__title em {
color: var(--accent-300);
}
.nx-hero__title-navy {
color: var(--primary);
}
.nx-hero__title-red {
color: var(--accent);
}
.nx-hero__lead {
font-size: clamp(1.2rem, 2vw, 1.5rem);
color: #fff;
margin: 1.3rem 0 0;
font-weight: 500;
}
.nx-hero__text {
color: #D5DEE9;
max-width: 34rem;
margin: 1rem 0 0;
font-size: 1.06rem;
}
.nx-hero__actions {
display: flex;
flex-wrap: wrap;
gap: .9rem;
margin-top: 2rem;
}
.nx-hero__chips {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-top: 2.6rem;
padding-top: 1.8rem;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.nx-hero__chip-num {
display: block;
font-size: 1.9rem;
color: #fff;
line-height: 1;
}
.nx-hero__chip-label {
font-size: .82rem;
color: #A7B4C6;
letter-spacing: .02em;
}
/* Hero orbit visual */
.nx-hero__visual {
position: relative;
aspect-ratio: 1;
display: grid;
place-items: center;
}
.nx-orbit {
position: relative;
width: min(100%, 440px);
aspect-ratio: 1;
display: grid;
place-items: center;
}
.nx-orbit__ring {
position: absolute;
border-radius: 50%;
border: 1.5px dashed rgba(255, 255, 255, .16);
}
.nx-orbit__ring--1 {
inset: 0;
animation: nx-spin 26s linear infinite;
}
.nx-orbit__ring--2 {
inset: 15%;
border-style: solid;
border-color: rgba(22, 67, 121, .35);
animation: nx-spin 20s linear infinite reverse;
}
.nx-orbit__ring--3 {
inset: 30%;
border-color: rgba(211, 35, 38, .3);
animation: nx-spin 14s linear infinite;
}
.nx-orbit__nucleus {
position: relative;
width: 32%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #3B82D9, var(--primary-700));
display: grid;
place-items: center;
box-shadow: 0 0 60px rgba(22, 67, 121, .6), inset 0 0 30px rgba(255, 255, 255, .14);
z-index: 2;
}
.nx-orbit__leaf {
width: 44%;
height: 44%;
color: #fff;
}
.nx-orbit__dot {
position: absolute;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 20px var(--accent);
}
.nx-orbit__dot--1 {
top: 0;
left: 50%;
transform: translateX(-50%);
}
.nx-orbit__dot--2 {
top: 50%;
right: 0;
transform: translateY(-50%);
background: #fff;
box-shadow: 0 0 20px #fff;
}
.nx-orbit__dot--3 {
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: #2C6FC0;
box-shadow: 0 0 20px #2C6FC0;
}
.nx-orbit__dot--4 {
top: 50%;
left: 0;
transform: translateY(-50%);
}
.nx-hero__card {
position: absolute;
z-index: 5;
display: flex;
align-items: center;
gap: .7rem;
background: rgba(14, 34, 60, .72);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: var(--r-sm);
padding: .8rem 1rem;
box-shadow: var(--shadow);
}
.nx-hero__card i {
width: 38px;
height: 38px;
border-radius: 10px;
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--primary), var(--primary-700));
color: #fff;
}
.nx-hero__card strong {
display: block;
font-size: .92rem;
color: #fff;
}
.nx-hero__card small {
color: #BCC7D5;
font-size: .78rem;
}
.nx-hero__card--1 {
top: 8%;
left: -3%;
}
.nx-hero__card--2 {
bottom: 10%;
right: -1%;
}
.nx-hero__card--2 i {
background: linear-gradient(135deg, var(--accent), var(--accent-600));
}
.nx-hero__scroll {
position: absolute;
bottom: 1.6rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
}
.nx-hero__mouse {
width: 24px;
height: 40px;
border: 2px solid rgba(255, 255, 255, .4);
border-radius: 14px;
display: block;
position: relative;
}
.nx-hero__mouse span {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 8px;
background: #fff;
border-radius: 3px;
animation: nx-scroll 1.6s ease-in-out infinite;
}
.nx-float {
animation: nx-float 5s ease-in-out infinite;
}
.nx-float--slow {
animation-duration: 7s;
animation-delay: -2s;
}
/* 8. --------------------------------------------------- SUB-HERO */
.nx-subhero {
position: relative;
min-height: 46vh;
display: flex;
align-items: center;
padding: 7.5rem 0 2.5rem;
background: radial-gradient(120% 130% at 85% 0%, var(--ink-3), var(--ink) 60%);
color: #fff;
overflow: hidden;
}
.nx-subhero__bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.nx-subhero__inner {
position: relative;
z-index: 2;
}
.nx-subhero__crumbwrap {
position: absolute;
top: 7.5rem;
left: 0;
right: 0;
z-index: 2;
}
.nx-crumb {
display: flex;
align-items: center;
gap: .6rem;
font-size: .85rem;
color: #A7B4C6;
margin-bottom: 1.2rem;
}
.nx-crumb a {
color: #A7B4C6;
transition: color var(--t);
}
.nx-crumb a:hover {
color: #fff;
}
.nx-crumb i {
font-size: .66rem;
opacity: .6;
}
.nx-subhero__kicker {
display: block;
font-weight: 700;
font-size: .82rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent-300);
margin-bottom: .9rem;
}
.nx-subhero__title {
color: #fff;
line-height: 1.05;
letter-spacing: -.02em;
}
.nx-subhero__title em {
color: var(--accent-300);
}
.nx-subhero__lead {
color: #fff;
margin: 1.2rem 0 0;
}
.nx-subhero__text {
color: #D5DEE9;
max-width: 42rem;
margin: 1rem 0 0;
}
.nx-subhero__actions {
display: flex;
flex-wrap: wrap;
gap: .9rem;
margin-top: 2rem;
}
/* 9/10. -------------------------- SHARED SECTION COMPONENTS */
/* Split */
.nx-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.nx-split--reverse .nx-split__media {
order: 2;
}
.nx-split--reverse .nx-split__copy {
order: 1;
}
.nx-split__copy .nx-btn {
margin-top: 1.8rem;
}
.nx-split--text-only {
grid-template-columns: 1fr;
}
.nx-split--text-only .nx-split__copy {
max-width: 42rem;
text-align: left;
}
.nx-figure {
position: relative;
aspect-ratio: 4/3.4;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow);
}
#built .nx-figure,
#purpose .nx-figure {
border: none;
box-shadow: none;
}
/* The India map outline in build-in-india.webp sits close to the top
edge of the source image — center-cropping this container's wider
aspect ratio was clipping into the map. Crop from the bottom (empty
table space) instead, so the full map stays visible. */
#built .nx-figure--photo img {
object-position: top;
}
#purpose .nx-figure {
border-radius: 0;
}
.nx-figure--plain {
position: relative;
aspect-ratio: auto;
border: none;
box-shadow: none;
border-radius: 0;
overflow: visible;
background: #fff;
padding: 1.2rem;
}
.nx-figure--photo.nx-figure--plain img {
position: static;
width: 100%;
height: auto;
object-fit: contain;
border-radius: 0;
}
.nx-quality-verified .nx-split {
align-items: stretch;
}
.nx-quality-verified .nx-split__copy {
display: flex;
flex-direction: column;
justify-content: center;
}
.nx-quality-verified .nx-split__media {
display: flex;
}
.nx-quality-verified .nx-figure--plain {
display: flex;
align-items: center;
width: 100%;
}
.nx-quality-verified .nx-figure--photo.nx-figure--plain img {
width: auto;
height: 80%;
max-width: 100%;
margin: 0 auto;
}
.nx-figure--about {
background: linear-gradient(150deg, var(--primary), var(--primary-700));
}
.nx-figure__pattern {
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .18) 0 2px, transparent 2px), radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .12) 0 3px, transparent 3px), linear-gradient(120deg, transparent 40%, rgba(211, 35, 38, .35));
background-size: 40px 40px, 60px 60px, 100% 100%;
}
.nx-figure__badge {
position: absolute;
left: 1.4rem;
bottom: 1.4rem;
background: #fff;
border-radius: var(--r-sm);
padding: 1rem 1.2rem;
box-shadow: var(--shadow);
}
.nx-figure__badge-num {
display: block;
font-size: 2.2rem;
color: var(--primary-700);
line-height: 1;
}
.nx-figure__badge span:last-child {
font-size: .82rem;
color: var(--muted);
}
.nx-figure__tag {
position: absolute;
top: 1.3rem;
right: 1.3rem;
background: rgba(9, 20, 36, .75);
backdrop-filter: blur(6px);
color: #fff;
font-size: .82rem;
font-weight: 600;
padding: .55rem .9rem;
border-radius: var(--pill);
display: inline-flex;
gap: .4rem;
align-items: center;
}
.nx-figure__tag i {
color: var(--accent-300);
}
.nx-figure--globe {
background: radial-gradient(circle at 50% 45%, var(--ink-3), var(--ink));
display: grid;
place-items: center;
}
.nx-figure__globe {
width: 62%;
height: 62%;
color: rgba(255, 255, 255, .5);
animation: nx-spin 40s linear infinite;
}
.nx-figure__tag--tr {
top: 1.3rem;
right: 1.3rem;
}
.nx-figure__tag--bl {
top: auto;
right: auto;
bottom: 1.3rem;
left: 1.3rem;
}
/* --- Building the Future: full-bleed video, centered ink overlay --- */
.nx-building {
position: relative;
overflow: hidden;
color: var(--text);
text-align: center;
padding-block: clamp(4.5rem, 9vw, 8rem);
}
.nx-building__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.nx-building__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.nx-building__veil {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .5) 45%, rgba(255, 255, 255, .66) 100%),
rgba(255, 255, 255, .34);
}
.nx-building__inner {
position: relative;
z-index: 2;
}
.nx-building__copy {
max-width: 60rem;
margin-inline: auto;
}
.nx-building .nx-title {
color: var(--heading);
margin: 0 0 clamp(1.6rem, 4vw, 2.6rem);
}
.nx-building__p {
font-size: clamp(1.08rem, 1.5vw, 1.28rem);
line-height: 1.6;
color: var(--text);
margin: 0 auto 1.15rem;
max-width: 52rem;
}
.nx-building__p:last-child {
margin-bottom: 0;
}
/* Why / Stats */
/* --- Global Health Challenge: full-bleed video, GSK-style stat cards --- */
.nx-challenge {
position: relative;
overflow: hidden;
padding-block: 0 clamp(4.5rem, 8vw, 7rem);
}
.nx-challenge__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.nx-challenge__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.nx-challenge__veil {
position: absolute;
inset: 0;
background: linear-gradient(90deg, #fff 0%, #fff 30%, rgba(255, 255, 255, 0) 100%);
}
.nx-challenge__inner {
position: relative;
z-index: 2;
}
.nx-challenge__topband {
position: relative;
z-index: 2;
width: 100vw;
left: 50%;
transform: translateX(-50%);
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
padding-block: clamp(4.5rem, 8vw, 7rem) clamp(4rem, 7vw, 6rem);
}
.nx-why__label {
text-align: center;
color: #000;
letter-spacing: -.01em;
margin: 0;
}
.nx-stats {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(.9rem, 1.5vw, 1.5rem);
}
.nx-health-carousel.swiper {
overflow: visible;
padding-top: .5rem;
}
.nx-health-carousel .swiper-wrapper {
align-items: stretch;
}
.nx-health-carousel .nx-stat {
width: 400px;
min-height: 28rem;
flex-shrink: 0;
}
.nx-health-carousel__nav {
display: flex;
align-items: center;
gap: 1.25rem;
width: min(42rem, 100%);
margin: 2.4rem auto 0;
}
.nx-health-carousel__prev,
.nx-health-carousel__next {
display: grid;
flex: none;
width: 2.25rem;
height: 2.25rem;
place-items: center;
padding: 0;
color: var(--accent);
background: transparent;
border: 0;
font-size: 1rem;
}
.nx-health-carousel__prev:disabled,
.nx-health-carousel__next:disabled {
color: var(--line-2);
}
.nx-health-carousel__scrollbar {
position: relative;
flex: 1;
height: 4px;
overflow: hidden;
background: rgba(255, 255, 255, .72);
border-radius: var(--pill);
}
.nx-health-carousel__scrollbar .swiper-scrollbar-drag {
background: var(--accent);
border-radius: inherit;
}
@media (max-width: 700px) {
.nx-health-carousel .nx-stat {
width: calc(100vw - 3rem);
min-height: 24rem;
}
.nx-health-carousel__nav {
margin-top: 1.75rem;
}
}
.nx-stat {
background: rgba(255, 255, 255, .96);
backdrop-filter: blur(10px);
border: 0;
border-radius: 12px;
padding: clamp(1.45rem, 2vw, 2rem);
text-align: left;
box-shadow: 0 12px 28px rgba(9, 20, 36, .08);
}
.nx-challenge:not(.nx-challenge--seq) .nx-stat {
position: relative;
overflow: hidden;
grid-column: auto;
min-height: 20rem;
}
.nx-stat__cat {
color: var(--primary-700);
margin: 0 0 2rem;
text-transform: uppercase;
letter-spacing: .08em;
}
.nx-stat__figure {
color: var(--accent);
line-height: .95;
white-space: nowrap;
font-size: clamp(3.2rem, 5.75vw, 6rem);
}
.nx-stat__text {
color: var(--text);
line-height: 1.5;
margin: 2.15rem 0 0;
}
/* Keep the overview compact; a hover turns the card into a readable detail
panel without making the five-card layout grow taller. */
.nx-challenge:not(.nx-challenge--seq) .nx-stat {
transition: background .8s ease-in-out, box-shadow .8s ease-in-out, color .8s ease-in-out;
}
/* The hover detail uses the same soft cross-fade as the reference: this
remains a rectangular card, with the full description centred on the
secondary brand colour. */
.nx-challenge:not(.nx-challenge--seq) .nx-stat__detail {
position: absolute;
inset: 0;
z-index: 1;
display: grid;
place-items: center;
padding: clamp(1.45rem, 2vw, 2rem);
color: #fff;
background: var(--secondary);
font-size: 1rem;
line-height: 1.55;
text-align: center;
opacity: 0;
pointer-events: none;
transition: opacity .8s ease-in-out;
}
/* Homepage standards: an inset light-blue heading band and four moving-image
medallions that overlap its lower edge. */
.nx-standard-showcase {
overflow: hidden;
padding: 0 0 clamp(3.5rem, 6vw, 5.5rem);
background: white;
}
.nx-standard-showcase__band {
padding: clamp(2.2rem, 4vw, 3.4rem) 0 clamp(16rem, 22vw, 19rem);
color: var(--ink);
text-align: center;
background: var(--secondary-blue-100);
}
.nx-standard-showcase__band h2 {
margin: 0 0 2rem;
color: var(--ink);
line-height: 1.15;
}
.nx-standard-showcase__band p {
max-width: 54rem;
margin: 0 auto;
color: var(--ink-2);
line-height: 1.6;
}
.nx-standard-showcase__content {
margin-top: clamp(-13rem, -15vw, -9rem);
padding-inline: 2rem;
}
.nx-standard-showcase__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(2rem, 4vw, 4rem);
}
.nx-standard-showcase__point {
min-width: 0;
text-align: center;
}
.nx-standard-showcase__video-wrap {
width: min(100%, 22rem);
aspect-ratio: 1;
margin-inline: auto;
padding: .9rem;
overflow: hidden;
border: 3px solid var(--accent);
border-radius: 50%;
background: #fff;
box-shadow: 0 10px 24px rgba(9, 20, 36, .12);
}
.nx-standard-showcase__video-wrap video {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.nx-standard-showcase__point h5 {
margin: 1.35rem 0 0;
color: var(--ink);
line-height: 1.45;
}
.nx-company-video {
padding: clamp(3.5rem, 6vw, 5.5rem) 0;
background: var(--paper);
}
.nx-company-video__player {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background: var(--primary-700);
box-shadow: 0 18px 42px rgba(9, 20, 36, .16);
}
.nx-glance__title {
position: relative;
z-index: 1;
margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
color: white !important;
/* Match the shared site section-heading treatment. */
}
.nx-glance__panel {
position: relative;
isolation: isolate;
min-height: 31rem;
padding: clamp(1.5rem, 3vw, 2.5rem);
background: #eef1f4 right center / cover no-repeat;
}
.nx-glance__panel::before {
position: absolute;
z-index: 0;
inset: 0 auto 0 0;
width: 62%;
content: "";
background: linear-gradient(90deg, rgba(35, 78, 135, .72) 0%, rgba(35, 78, 135, .5) 58%, rgba(35, 78, 135, 0) 100%);
}
.nx-glance__facts {
position: relative;
z-index: 1;
display: grid;
gap: 1rem;
width: min(100%, 28rem);
}
.nx-glance__fact {
position: relative;
padding: clamp(1.35rem, 2.5vw, 2.2rem);
border-radius: 1.1rem;
font-size: 1rem;
line-height: 1.2;
}
.nx-glance__fact strong {
font-size: 1.22em;
font-weight: 700;
}
.nx-glance__fact--light {
color: #fff;
background: var(--accent);
box-shadow: 0 12px 24px rgba(216, 33, 40, .18);
}
.nx-glance__fact--light::before,
.nx-glance__fact--light::after {
position: absolute;
width: 3.6rem;
height: 3.6rem;
content: "";
}
.nx-glance__fact--light::before {
top: 0;
left: 0;
border-top: .7rem solid var(--accent);
border-left: .7rem solid var(--accent);
}
.nx-glance__fact--light::after {
right: 0;
bottom: 0;
border-right: .7rem solid var(--primary);
border-bottom: .7rem solid var(--primary);
}
.nx-glance__fact--accent {
color: #fff;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .55);
box-shadow: none;
backdrop-filter: blur(4px);
}
.nx-life {
padding: clamp(3.5rem, 7vw, 6rem) 0;
background: white;
}
.nx-life>.nx-container>h2 {
margin: 0 0 2.5rem;
color: #000;
/* Match the shared site section-heading treatment. */
text-align: center;
}
.nx-life__tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: .6rem;
max-width: 50rem;
margin: 0 auto 2rem;
}
.nx-life__tab {
min-height: 3.2rem;
padding: .7rem .85rem;
color: var(--accent);
background: #fff;
border: 2px solid var(--accent);
font-weight: 700;
font-size: .88rem;
line-height: 1.2;
text-align: center;
transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.nx-life__tab:hover,
.nx-life__tab.is-active {
color: #fff;
background: var(--accent);
border-color: #fff;
}
.nx-life__stage {
position: relative;
display: none;
aspect-ratio: 1881 / 836;
min-height: 0;
padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 8vw, 7rem);
overflow: hidden;
background: #e9edf0 center / cover no-repeat;
border-radius: 1.25rem;
}
.nx-life__stage::before {
position: absolute;
inset: 0;
content: "";
background: none;
}
.nx-life__stage.is-active {
display: block;
}
.nx-life__copy {
position: absolute;
bottom: clamp(2rem, 4vw, 3.5rem);
left: clamp(2rem, 8vw, 7rem);
z-index: 1;
max-width: 27rem;
}
.nx-life__copy>p {
display: none;
}
.nx-life__copy h3 {
display: none;
}
.nx-life__copy h3 em {
display: none;
}
.nx-life__copy h3 strong {
display: none;
}
.nx-life__product-sliders {
margin-top: 1rem;
}
.nx-life__packs {
display: none;
align-items: center;
min-height: 12.5rem;
padding: 1rem 0;
overflow: hidden;
background: rgba(255, 255, 255, .96);
border-radius: 1rem;
}
.nx-life__packs.is-active {
display: flex;
}
.nx-life__pack-track {
display: flex;
align-items: center;
flex: 0 0 auto;
width: max-content;
gap: 3.25rem;
padding-right: 3.25rem;
animation: nx-life-pack-scroll 30s linear infinite;
will-change: transform;
}
.nx-life__packs:hover .nx-life__pack-track,
.nx-life__packs:focus-within .nx-life__pack-track {
animation-play-state: paused;
}
.nx-life__packs img {
display: block;
flex: 0 0 auto;
width: auto;
height: 10rem;
object-fit: contain;
}
/* Everyday wellness: family-led introduction with a two-product
automatically rotating showcase. */
.nx-wellness-products {
padding: clamp(3.5rem, 7vw, 6rem) 0;
background: #fff;
}
.nx-wellness-products__head {
margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.nx-wellness-products__head h2 {
margin: 0 0 .5rem;
color: var(--ink);
line-height: 1.15;
}
.nx-wellness-products__head p {
margin: 0;
color: var(--ink-2);
}
.nx-wellness-products__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
align-items: center;
gap: clamp(2rem, 6vw, 6rem);
}
.nx-wellness-products__family img {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: contain;
}
.nx-wellness-products__showcase {
width: 100%;
min-width: 0;
padding: .4rem .25rem 2.5rem;
}
.nx-wellness-products__showcase .swiper-wrapper {
align-items: stretch;
}
.nx-wellness-products__slide {
display: flex;
height: auto;
overflow: hidden;
flex-direction: column;
background: #fff;
border-radius: 1rem;
box-shadow: 0 5px 20px rgba(9, 20, 36, .12);
}
.nx-wellness-products__slide>img {
display: block;
width: 100%;
aspect-ratio: 3 / 4;
object-fit: contain;
background: #fffdfa;
}
.nx-wellness-products__pagination .swiper-pagination-bullet {
width: .65rem;
height: .65rem;
background: var(--accent);
opacity: .35;
}
.nx-wellness-products__pagination .swiper-pagination-bullet-active {
opacity: 1;
}
@keyframes nx-life-pack-scroll {
to {
transform: translateX(-50%);
}
}
.nx-quality-commitment {
padding: clamp(4.5rem, 8vw, 7rem) 0;
background: var(--surface);
}
.nx-quality-commitment h2 {
margin: 0 0 clamp(2.75rem, 5vw, 4.5rem);
color: var(--heading);
text-align: center;
}
/* This visual composition benefits from the available horizontal space. */
.nx-quality-commitment .nx-container {
width: 100%;
max-width: none;
padding-inline: clamp(1.2rem, 5vw, 5rem);
}
.nx-quality-commitment__orbit {
display: grid;
width: 100%;
grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr);
grid-template-rows: auto auto auto;
grid-template-areas:
". top ."
"left image right"
". bottom .";
align-items: center;
justify-items: center;
column-gap: clamp(1.5rem, 5vw, 6rem);
row-gap: 1.8rem;
}
.nx-quality-commitment__card--top {
grid-area: top;
}
.nx-quality-commitment__card--bottom {
grid-area: bottom;
}
.nx-quality-commitment__column--left {
grid-area: left;
align-items: flex-end;
}
.nx-quality-commitment__column--right {
grid-area: right;
align-items: flex-start;
}
.nx-quality-commitment__center {
grid-area: image;
}
.nx-quality-commitment__column {
display: flex;
flex-direction: column;
width: 100%;
gap: clamp(1.8rem, 4vw, 4rem);
}
.nx-quality-commitment__card {
display: flex;
align-items: center;
width: min(125%, 25rem);
max-width: 25rem;
gap: .9rem;
padding: 1rem 1.15rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-sm);
box-shadow: var(--shadow-sm);
transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.nx-quality-commitment__card--left {
text-align: right;
}
.nx-quality-commitment__card:hover {
background: var(--secondary);
box-shadow: var(--shadow);
transform: translateY(-4px);
}
.nx-quality-commitment__card-copy {
display: grid;
gap: .25rem;
flex: 1;
}
.nx-quality-commitment__card-copy strong {
color: var(--heading);
/* font-size: .85rem; */
line-height: 1.3;
}
.nx-quality-commitment__card-copy span {
color: var(--muted);
/* font-size: .74rem; */
line-height: 1.5;
}
.nx-quality-commitment__card:hover .nx-quality-commitment__card-copy strong,
.nx-quality-commitment__card:hover .nx-quality-commitment__card-copy span {
color: #fff;
}
.nx-quality-commitment__badge {
display: grid;
flex: none;
width: 44px;
height: 44px;
place-items: center;
border-radius: 50%;
color: #fff;
background: var(--primary);
font-size: 1rem;
box-shadow: 0 2px 10px rgba(0, 113, 59, .28);
}
.nx-quality-commitment__card:hover .nx-quality-commitment__badge {
color: var(--secondary);
background: #fff;
}
.nx-quality-commitment__center {
position: relative;
display: grid;
width: 350px;
height: 350px;
place-items: center;
}
.nx-quality-commitment__image {
position: relative;
z-index: 1;
width: 350px;
height: 350px;
overflow: hidden;
border: 5px solid #fff;
border-radius: 50%;
box-shadow: var(--shadow);
}
.nx-quality-commitment__image img,
.nx-quality-commitment__image video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.nx-quality-commitment__ring {
position: absolute;
inset: -18px;
border: 2px dashed rgba(0, 113, 59, .28);
border-radius: 50%;
animation: nx-quality-orbit 30s linear infinite;
}
.nx-quality-commitment__action {
display: flex;
justify-content: center;
padding-top: clamp(2.75rem, 5vw, 4rem);
}
.nx-quality-commitment__action .nx-btn {
font-size: .9rem;
}
.nx-quality-commitment__mobile {
display: none;
}
@keyframes nx-quality-orbit {
to {
transform: rotate(360deg);
}
}
@media (max-width: 960px) {
.nx-quality-commitment__orbit {
grid-template-columns: 1fr;
grid-template-areas:
"image"
"top"
"left"
"right"
"bottom";
gap: 1rem;
}
.nx-quality-commitment__column {
align-items: center;
gap: 1rem;
}
.nx-quality-commitment__card,
.nx-quality-commitment__card--top,
.nx-quality-commitment__card--bottom {
max-width: 30rem;
}
.nx-quality-commitment__card--left {
flex-direction: row-reverse;
text-align: left;
}
}
.nx-careers {
padding: clamp(3rem, 6vw, 5rem) 0;
overflow: hidden;
background: #fff;
}
.nx-careers__panel {
position: relative;
min-height: 26rem;
padding: 2.25rem 0;
}
.nx-careers__image {
position: absolute;
z-index: 2;
top: 0;
bottom: auto;
left: 0;
width: 39%;
height: 21rem;
background: center / cover no-repeat;
transform: scale(1.04);
transition: transform 1.15s cubic-bezier(.22, .61, .36, 1);
}
.nx-careers__panel:hover .nx-careers__image {
transform: scale(1.09);
}
.nx-careers__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 69%;
min-height: 24rem;
margin-left: auto;
padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2.25rem, 6vw, 6rem);
color: #fff;
background: var(--accent);
}
.nx-careers__content h2 {
max-width: 32rem;
margin: 0 0 1rem;
}
.nx-careers__content>span {
max-width: 33rem;
margin-bottom: 1.25rem;
font-size: 1rem;
line-height: 1.5;
}
.nx-careers__link {
display: grid;
width: 2.7rem;
height: 2.7rem;
margin-top: .25rem;
color: var(--accent);
background: #fff;
border-radius: 50%;
place-items: center;
text-decoration: none;
transition: transform .3s ease, background .3s ease, color .3s ease;
}
.nx-careers__link:hover {
color: #fff;
background: var(--primary);
transform: translateX(.35rem);
}
@media (max-width: 760px) {
.nx-standard-showcase__band {
padding-bottom: 8.5rem;
}
.nx-standard-showcase__content {
margin-top: -4rem;
}
.nx-standard-showcase__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem 1.2rem;
}
.nx-standard-showcase__video-wrap {
width: min(100%, 10rem);
}
.nx-glance__panel {
min-height: 0;
background-position: 70% center;
}
.nx-glance__facts {
width: min(100%, 24rem);
}
.nx-life__tabs {
grid-template-columns: repeat(2, 1fr);
}
.nx-life__stage {
aspect-ratio: 3 / 2;
min-height: 0;
padding: 0;
background-image: var(--nx-life-mobile-image) !important;
background-position: center;
background-size: contain;
}
.nx-life__copy {
right: auto;
bottom: .75rem;
left: 1.5rem;
}
.nx-life__copy .nx-btn {
width: auto;
max-width: none;
min-height: 0;
padding: .65rem 1.15rem;
font-size: .82rem;
white-space: nowrap;
}
.nx-life__packs {
min-height: 10rem;
}
.nx-life__pack-track {
gap: 2rem;
padding-right: 2rem;
animation-duration: 24s;
}
.nx-life__packs img {
height: 7.5rem;
}
.nx-quality-commitment__action {
padding-top: 3rem;
}
.nx-careers__panel {
min-height: 0;
padding: 0;
}
.nx-careers__image {
position: relative;
width: 100%;
height: 15rem;
background-position: center;
}
.nx-careers__content {
width: 100%;
min-height: 0;
padding: 2.5rem 1.5rem;
}
}
/* Staged homepage-careers reveal. */
section.nx-careers.nx-careers--animate .nx-careers__content {
opacity: 0;
transform: translateX(3.5rem);
transition: opacity .7s ease .16s, transform .9s cubic-bezier(.22, .61, .36, 1) .16s;
}
section.nx-careers.nx-careers--animate .nx-careers__image {
clip-path: inset(0 100% 0 0);
transition: clip-path 1s cubic-bezier(.22, .61, .36, 1), transform 1.15s cubic-bezier(.22, .61, .36, 1);
}
section.nx-careers.nx-careers--animate.is-revealed .nx-careers__content {
opacity: 1;
transform: translateX(0);
}
section.nx-careers.nx-careers--animate.is-revealed .nx-careers__image {
clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
section.nx-careers.nx-careers--animate .nx-careers__content {
opacity: 1;
transform: none;
transition: none;
}
section.nx-careers.nx-careers--animate .nx-careers__image {
clip-path: none;
transition: none;
}
}
@media (max-width: 420px) {
.nx-standard-showcase__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem .75rem;
}
.nx-standard-showcase__video-wrap {
width: min(100%, 8.5rem);
}
}
@media (hover: hover) {
.nx-challenge:not(.nx-challenge--seq) .nx-stat__text {
display: block;
max-height: 3em;
overflow: hidden;
transition: max-height .65s ease, color .65s ease;
}
.nx-challenge:not(.nx-challenge--seq) .nx-stat>.nx-stat__cat,
.nx-challenge:not(.nx-challenge--seq) .nx-stat>.nx-stat__figure,
.nx-challenge:not(.nx-challenge--seq) .nx-stat>.nx-stat__text {
transition: opacity .8s ease-in-out, transform .8s ease-in-out, color .8s ease-in-out;
}
.nx-challenge:not(.nx-challenge--seq) .nx-stat:hover {
background: var(--secondary);
box-shadow: 0 18px 36px rgba(9, 20, 36, .2);
}
.nx-challenge:not(.nx-challenge--seq) .nx-stat:hover>.nx-stat__cat,
.nx-challenge:not(.nx-challenge--seq) .nx-stat:hover>.nx-stat__figure,
.nx-challenge:not(.nx-challenge--seq) .nx-stat:hover>.nx-stat__text {
opacity: 0;
transform: translateY(-.4rem);
}
.nx-challenge:not(.nx-challenge--seq) .nx-stat:hover .nx-stat__detail {
opacity: 1;
}
}
@media (max-width: 900px) {
.nx-challenge:not(.nx-challenge--seq) .nx-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nx-challenge:not(.nx-challenge--seq) .nx-stat,
.nx-challenge:not(.nx-challenge--seq) .nx-stat:nth-child(4),
.nx-challenge:not(.nx-challenge--seq) .nx-stat:nth-child(5) {
grid-column: auto;
}
.nx-challenge:not(.nx-challenge--seq) .nx-stat:nth-child(5) {
grid-column: 1 / -1;
width: calc((100% - 1.7rem) / 2);
justify-self: center;
}
}
@media (max-width: 600px) {
.nx-challenge:not(.nx-challenge--seq) .nx-stats {
grid-template-columns: 1fr;
gap: 1rem;
}
.nx-challenge:not(.nx-challenge--seq) .nx-stat,
.nx-challenge:not(.nx-challenge--seq) .nx-stat:nth-child(5) {
grid-column: auto;
width: 100%;
}
}
.nx-why__outro {
max-width: 56rem;
margin: var(--heading-copy-gap) auto 0;
text-align: center;
color: var(--heading);
line-height: 1.5;
}
/* =============================================================
Global Health Challenge — Why We Exist variant
-------------------------------------------------------------
Everything above is the video-backdrop card grid the home page uses
and must keep using; this block is opt-in via .nx-challenge--seq on
the section (templates/section-why.php only) and overrides it into
the GSK-style treatment: a still image backdrop held by fixed
attachment, a frosted heading band, and the stat cards on a
horizontal slider.
Rules that undo a home-page default are marked "undo" — those are
load-bearing, not tidying, and dropping one lets the grid back in.
The card and type rules restate values rather than inheriting them,
so retuning the home page's cards cannot silently restyle this page.
============================================================= */
/* The artwork moves onto the section itself, as the Corriger banner
sections do: fixed attachment sizes it to the viewport and pins it
there, so the section scrolls past like a moving window onto it.
Nothing bleeds out of this section, so the home page's overflow clip
is dropped rather than inherited — the slider does its own clipping,
on its viewport, and a second clip here would only put a stray scroll
container between that viewport and the page.
The background must stay on the element that scrolls: no transform,
filter or will-change may be introduced on this section or any
ancestor, since those make a fixed background fall back to scrolling
with the box and the effect silently dies. */
.nx-challenge--seq {
overflow: visible;
/* undo */
/* Named so the heading wash can reach back up to the section's top
edge by cancelling exactly this much padding. */
--nx-challenge-pad: clamp(4.5rem, 8vw, 7rem);
padding-block: var(--nx-challenge-pad);
/* undo */
background-image: var(--nx-challenge-bg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
/* Guard for the rule above. A transform on this section makes it a
containing block, at which point the fixed backdrop silently starts
scrolling with the box. AOS is the likely source — its fade end state
is transform: translateZ(0) — so this outranks AOS's own selector
([data-aos^=fade][data-aos^=fade].aos-animate, 0-3-0) by repeating
the class to match that specificity and winning on load order. */
.nx-challenge--seq.nx-challenge--seq.nx-challenge--seq {
transform: none;
}
/* The gap down to the cards is a margin, not padding, so the band's box
hugs its text — the wash below is drawn on that box, and padding
would stretch it down through the empty space to the cards. */
.nx-challenge--seq .nx-challenge__topband {
width: auto;
/* undo */
left: auto;
/* undo */
transform: none;
/* undo */
background: none;
/* undo */
-webkit-mask-image: none;
/* undo */
mask-image: none;
/* undo */
padding-block: 0;
/* undo */
margin-bottom: clamp(4rem, 7vw, 6rem);
}
/* White wash behind the heading, so the type stays legible wherever the
backdrop happens to sit — it is fixed, so what is behind the text
changes as the page scrolls. It runs from the section's top edge (the
negative top cancels the padding above it) down past the text. The
band is a full-width block, so zero inline insets already span the
section. The block insets are a matched pair, so the wash clears the
text by the same distance below as above. Flush at the top where it
meets the section boundary; the mask fades only the last stretch at
the bottom, which would otherwise rule a hard line across the artwork.
z-index is negative within the band's own stacking context, so it
sits under the text but still above the section backdrop. */
.nx-challenge--seq .nx-challenge__topband::before {
content: "";
position: absolute;
inset: calc(var(--nx-challenge-pad) * -1) 0;
z-index: -1;
pointer-events: none;
/* Frosted glass: the blur softens the artwork behind the band, the
white sits on top of it. The wash is lighter than it would be on
its own — past roughly .6 the white swamps the blur and the panel
goes flat. Browsers without backdrop-filter simply get the wash. */
background: rgba(255, 255, 255, .5);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
}
/* Cards drop out of the home page's five-column grid into one card per
row, alternating sides down the column — see the nth-child rule
below. justify-items sets the odd rows; the even ones override it.
Each row is a viewport tall, so exactly one card is on screen at a
time: the next only arrives once the one above has cleared the top.
minmax, not a flat 100vh, so a card that outgrows the viewport (long
copy, large text setting, a short landscape phone) pushes its own row
taller instead of being cut off. The gap goes to zero — the rows
already carry all the space there is — and the card sits centred in
the empty height rather than at the top of it. */
.nx-challenge--seq .nx-stats {
grid-template-columns: 1fr;
/* undo */
grid-auto-rows: minmax(100vh, auto);
align-items: center;
gap: 0;
justify-items: start;
}
/* Mobile browsers count the collapsing address bar in vh, so a 100vh row
is taller than what is actually on screen and the card drifts. svh is
the stable height; the rule above stands where it is unsupported. */
@supports (height: 100svh) {
.nx-challenge--seq .nx-stats {
grid-auto-rows: minmax(100svh, auto);
}
}
/* The slot is the grid item; the card inside it is just the panel. The
split exists because both need a transform and one element cannot hold
two: the slot centres itself, the card carries the AOS slide.
Sticky holds the card at the middle of the screen for the length of its
row, so it rises into the centre, stays there while the row scrolls,
and only leaves when the row runs out and the next one takes over —
rather than drifting past the centre in one continuous move. top plus
the -50% pullback is what puts the middle of the card on the middle of
the viewport; a percentage in top would resolve against the row, not
the card, so it has to be done with the transform.
The width is held short of the container so the backdrop stays visible
beside the column instead of being papered over by full-bleed rows, and
is fixed rather than shrink-wrapped so every card reads the same width
regardless of how much its own copy runs. */
.nx-challenge--seq .nx-stats .nx-stat__slot {
position: sticky;
top: 50vh;
transform: translateY(-50%);
width: min(40rem, 100%);
}
/* Card and type styling is restated in full, not inherited: the home
page's cards are translucent and blurred over its video, which is
wrong over still artwork, and its figure sits alone rather than
inline in a sentence.
min-height gives every card the same floor regardless of copy length —
Women's Health carries two blocks, Men's Health one short paragraph, and
without this the column would visibly step in height card to card. A
shorter card's content is then centred through that floor rather than
pinned to the top (see align-items on the layout rule below), which is
what makes the leftover space read as intentional breathing room instead
of an accident of layout. It is a floor, not a cap: a card whose own
copy runs past it is left to grow rather than clipped, so nothing is
ever cut off to force a match. */
.nx-challenge--seq .nx-stats .nx-stat {
grid-column: 1;
/* undo */
grid-row: auto;
/* undo */
width: 100%;
min-height: 25rem;
background: #fff;
/* undo */
backdrop-filter: none;
/* undo */
border-color: var(--accent-300);
padding: clamp(1.6rem, 2.6vw, 2.4rem);
box-shadow: 0 16px 38px rgba(9, 20, 36, .12);
box-sizing: border-box;
}
/* The rise, taken from the reference section's own numbers: the card waits
300px below its resting place and slides up into it over .6s, transform
only — no fade. A solid card arriving from below reads on its own, and
fading as well would only blur the moment it lands.
Both states are gated on .is-reveal, which challengeReveal() in main.js
puts on the section only once it has an observer running — the same
opt-in shape the rest of this file uses. Nothing else turns it on, so a
page without JS never pushes the cards down in the first place rather
than stranding them 300px low with no way back up.
.is-in is then flipped per card as it reaches the middle of the screen.
The classes, not a scroll formula, are what decide: CSS holds the two
end states and nothing else. */
.nx-challenge--seq.is-reveal .nx-stats .nx-stat {
transform: translateY(var(--nx-stat-rise, 300px));
transition: transform .6s ease;
}
/* .is-in lands on the slot, not the card: the slot is what the observer
watches, because the card's pushed-down state puts it outside the centre
band by definition. See challengeReveal() in main.js. */
.nx-challenge--seq.is-reveal .nx-stats .nx-stat__slot.is-in .nx-stat {
transform: translateY(0);
}
/* Every second row swings to the right edge, so the column zigzags and
the backdrop is uncovered on alternating sides rather than always the
same one. Text stays left-aligned inside the card either way — only
the card moves. Below the phone breakpoint the cards go full width
and there is no room left to swing into, so this quietly stops
mattering rather than needing to be undone. */
.nx-challenge--seq .nx-stats .nx-stat__slot:nth-child(even) {
justify-self: end;
}
/* Icon and figure in a fixed-width rail, body copy beside it. The rail is
sized off the widest figure ("1 in 6", "10-40") rather than left to
shrink-wrap, so every card's text starts on the same line down the
column instead of stepping in and out as the figures change width.
align-items: center is doing double duty. Within the pair it keeps a
short figure lined up with the first line of body text rather than its
full paragraph. And because the container's min-height stretches this
single implicit row to fill the card (align-content: normal computes to
stretch in Grid), centring here is also what centres the whole
media+body pair vertically through a card that is taller than its own
content — the effect the min-height rule above depends on. */
.nx-challenge--seq .nx-stats .nx-stat {
display: grid;
grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
align-items: center;
gap: clamp(1rem, 2.4vw, 2rem);
}
.nx-challenge--seq .nx-stat__media {
display: flex;
flex-direction: column;
align-items: center;
gap: .75rem;
text-align: center;
}
.nx-challenge--seq .nx-stat__icon {
font-size: 1.6rem;
color: var(--primary);
line-height: 1;
}
.nx-challenge--seq .nx-stat__figure {
color: var(--heading);
line-height: 1.1;
margin: 0;
white-space: nowrap;
}
.nx-challenge--seq .nx-stat__cat {
color: var(--primary-700);
margin: 0 0 .5rem;
line-height: 1.3;
text-transform: none;
/* undo */
letter-spacing: normal;
/* undo */
}
/* Sub-heading above a block. Only the two-block card has these, so the
first one sits tight under the category and later ones open a gap to
separate themselves from the paragraph before. */
.nx-challenge--seq .nx-stat__lead {
color: var(--primary-700);
line-height: 1.3;
margin: 1.15rem 0 .2rem;
}
.nx-challenge--seq .nx-stat__body>.nx-stat__lead:first-of-type {
margin-top: 0;
}
.nx-challenge--seq .nx-stat__text {
line-height: 1.6;
margin: 0;
/* undo */
color: var(--primary-700);
}
.nx-challenge--seq .nx-stat__text+.nx-stat__text {
margin-top: .7rem;
}
.nx-challenge--seq .nx-stat__text strong {
font-weight: 700;
color: var(--heading);
}
/* Citation markers. Superscript on its own drags the line box open and
makes the paragraph's leading uneven, so the vertical shift is done
with position instead — see the line-height: 0 trick's usual failure
mode of clipping descenders. */
.nx-cite {
font-size: .62em;
font-weight: 700;
line-height: 0;
position: relative;
top: -.55em;
margin-left: .1em;
vertical-align: baseline;
color: var(--accent);
}
/* Checks */
.nx-checks {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.3rem;
}
.nx-check {
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 2rem 1.6rem;
transition: transform var(--t), box-shadow var(--t);
}
.nx-check:hover {
transform: translateY(-6px);
box-shadow: var(--shadow);
}
.nx-check__num {
position: absolute;
top: 1.3rem;
right: 1.5rem;
font-size: 2.4rem;
color: var(--line-2);
line-height: 1;
}
.nx-check__icon {
width: 54px;
height: 54px;
border-radius: 14px;
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--primary-050), #fff);
color: var(--primary-700);
font-size: 1.35rem;
margin-bottom: 1.1rem;
box-shadow: var(--shadow-sm);
}
.nx-check h3 {
margin-bottom: .5rem;
}
.nx-check p {
color: var(--muted);
margin: 0;
}
.nx-checks--dark .nx-check {
background: rgba(255, 255, 255, .04);
border-color: rgba(255, 255, 255, .1);
}
.nx-checks--dark .nx-check h3 {
color: #fff;
}
.nx-checks--dark .nx-check p {
color: #BCC7D5;
}
.nx-checks--dark .nx-check__num {
color: rgba(255, 255, 255, .14);
}
.nx-checks--dark .nx-check__icon {
background: rgba(22, 67, 121, .2);
color: #8FBBEC;
}
.nx-check--detail .nx-check__row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.nx-check--detail .nx-check__num {
position: static;
}
.nx-standard__note {
max-width: 54rem;
margin: 2.8rem auto 0;
text-align: center;
color: var(--primary-700);
}
/* Therapeutic area cards — photo over a tall off-white footer, the name
pinned to its top and a plus mark pinned to its bottom-right, with the
space between left open rather than filled. All six sit in a single
row, so a card is a sixth of the container's width; the footer's fixed
aspect ratio below is what keeps the empty space proportional to that
width instead of needing a fixed pixel height that would go wrong at
other widths.
align-items: start (not the grid default of stretch) is what makes the
stagger below possible: stretch would absorb each card's margin-top by
shrinking the card to fit, so nothing would visibly move. It also means
there is no second row to collide with — safe to reach for whichever
offset actually matches the reference, without a row-gap budget to
protect. */
/* A little extra room under the lead paragraph before the area cards
start, on top of .nx-head's own margin-bottom above. Scoped to this
page's intro rather than added to .nx-lead itself, so every other
page using that class is untouched. */
#standard-intro .nx-lead {
padding-bottom: clamp(5rem, 2.5vw, 1.8rem);
}
.nx-areacards {
--nx-area-offset: clamp(.9rem, 1.8vw, 1.6rem);
display: grid;
grid-template-columns: repeat(6, 1fr);
align-items: start;
gap: 1.1rem;
}
/* One row of six is a plain alternation — odd cards down, even cards up
— with none of the column-vs-row-position problem a wrapped grid would
raise, since there is only ever one row for a column position to belong
to. */
.nx-areacards .nx-areacard:nth-child(odd) {
margin-top: var(--nx-area-offset);
}
.nx-areacards .nx-areacard:nth-child(even) {
margin-top: calc(-1 * var(--nx-area-offset));
}
.nx-areacard {
display: block;
border-radius: var(--r);
overflow: hidden;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.nx-areacard:hover {
transform: translateY(-6px);
box-shadow: var(--shadow);
border-color: var(--accent-300);
}
.nx-areacard__img {
display: block;
aspect-ratio: 4 / 3;
background-color: var(--primary-050);
background-size: cover;
background-position: center;
transition: transform .5s ease;
}
.nx-areacard:hover .nx-areacard__img {
transform: scale(1.04);
}
/* Title and description stack together at the top; the plus is pushed to
the bottom edge by its own margin-top: auto rather than by
justify-content: space-between, since that would have spread three
children evenly and floated the description away from the title it
belongs under. Whatever room is left between the text and the plus is
exactly the empty space the fixed aspect-ratio below was built to
hold — a short card (little detail text) gets more of it, a long one
less, and the plus stays flush at the bottom of every card either way. */
.nx-areacard__foot {
display: flex;
flex-direction: column;
align-items: flex-start;
/* A floor, not a fixed ratio: title + description is now variable-length
copy that can wrap to more lines at the narrower widths six columns
produce, and a fixed aspect-ratio here would have clipped a card
whose text needed more room than that ratio allows. Short cards still
get the same tall, mostly-empty footer as before; a longer one is
simply allowed to grow past the floor instead of being cut off. */
min-height: 11rem;
padding: 1.4rem 1.5rem;
}
.nx-areacard__title {
font-size: 1.05rem;
line-height: 1.35;
color: var(--heading);
}
.nx-areacard__text {
font-size: .85rem;
line-height: 1.5;
color: var(--muted);
margin-top: .5rem;
}
.nx-areacard__plus {
align-self: flex-end;
margin-top: auto;
width: 2.1rem;
height: 2.1rem;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--primary-700);
font-size: .85rem;
transition: background var(--t), color var(--t), transform var(--t);
}
.nx-areacard:hover .nx-areacard__plus {
background: var(--primary);
color: #fff;
transform: rotate(90deg);
}
/* Checkpoints, alternating image/text rows — one outer border, a hairline
divider between rows, no divider after the last one. Reuses the same
border approach as .nx-checkgrid below (a border owned by the container
plus one edge per row) but for a single full-width column instead of a
3-up grid, so it only ever needs a bottom edge per item. */
.nx-ptrows {
border: 1px solid var(--line);
border-radius: var(--r);
overflow: hidden;
}
.nx-ptrow {
display: flex;
align-items: stretch;
gap: clamp(1.6rem, 4vw, 3.5rem);
padding: clamp(1.8rem, 3.5vw, 3rem);
/* Text alone would only be a few lines tall; this floors the row
height so the bled photo reads as a proper banner, not a sliver
that happens to match whichever row has the least copy. */
min-height: clamp(18rem, 32vw, 24rem);
}
.nx-ptrow:not(:last-child) {
border-bottom: 1px solid var(--line);
}
/* Odd rows (1st, 3rd, 5th child) keep source order — text, then image, so
the image lands on the right. Even rows reverse the visual order only;
the markup stays text-first so a screen reader always hears the title
and detail before it hears about the photo, regardless of which side
that photo is sitting on. */
.nx-ptrow:nth-child(even) {
flex-direction: row-reverse;
}
.nx-ptrow__text {
flex: 1 1 50%;
min-width: 0;
}
.nx-ptrow__icon {
display: block;
font-size: 1.4rem;
color: var(--primary);
margin-bottom: .9rem;
}
.nx-ptrow__text h3 {
margin: 0 0 .6rem;
color: var(--heading);
}
.nx-ptrow__text p {
line-height: 1.65;
color: var(--muted);
margin: 0;
}
.nx-ptrow__text p+p {
margin-top: .6rem;
}
.nx-ptrow__note {
color: var(--primary-700) !important;
margin-top: .7rem !important;
}
/* Bled to the row's own edges: the negative margins exactly cancel the
row's padding, so the photo's edge lands flush on the row's top,
bottom, and outer side (the container border, or the hairline divider
between rows) instead of floating inside it. Height comes from
align-items:stretch on the row rather than aspect-ratio, since the
box is now sized by the row, not by its own width. border-radius is
left at 0 — .nx-ptrows' own border-radius + overflow:hidden clips the
first/last row's photo to match the card's outer rounded corners. */
.nx-ptrow__img {
flex: 0 0 clamp(14rem, 42%, 22rem);
background-color: var(--primary-050);
background-size: cover;
background-position: center;
margin-block: calc(-1 * clamp(1.8rem, 3.5vw, 3rem));
margin-inline-end: calc(-1 * clamp(1.8rem, 3.5vw, 3rem));
}
.nx-ptrow:nth-child(even) .nx-ptrow__img {
margin-inline-end: 0;
margin-inline-start: calc(-1 * clamp(1.8rem, 3.5vw, 3rem));
}
/* Checkpoints, hairline variant — a plain bordered table rather than the
floating, shadowed cards .nx-check/.nx-checks use elsewhere. Margin-top
separates it from the area cards above; it does not use .nx-head's
spacing scale since there is no heading here to hang that spacing off. */
.nx-checkgrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: clamp(2.5rem, 5vw, 4rem);
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.nx-checkgrid__item {
padding: clamp(1.4rem, 2.4vw, 1.9rem);
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
transition: background var(--t);
}
.nx-checkgrid__item:hover {
background: var(--primary-050);
}
.nx-checkgrid__icon {
display: block;
font-size: 1.5rem;
color: var(--primary);
margin-bottom: 1.1rem;
}
.nx-checkgrid__item h3 {
color: var(--heading);
margin: 0 0 .4rem;
}
.nx-checkgrid__item p {
line-height: 1.5;
color: var(--muted);
margin: 0;
}
.nx-standard__note--light {
color: var(--accent-300);
}
/* Steps (home science) */
.nx-steps {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.2rem;
margin-top: 1rem;
}
.nx-steps__line {
position: absolute;
top: 34px;
left: 8%;
right: 8%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
}
.nx-step {
position: relative;
text-align: center;
padding: 0 .5rem;
}
.nx-step__num {
width: 68px;
height: 68px;
margin: 0 auto 1.2rem;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 1.4rem;
color: #fff;
background: linear-gradient(135deg, var(--ink-3), var(--ink));
border: 1.5px solid rgba(255, 255, 255, .2);
box-shadow: 0 0 0 8px rgba(22, 67, 121, .08);
position: relative;
z-index: 1;
transition: transform var(--t), border-color var(--t);
}
.nx-step:hover .nx-step__num {
transform: translateY(-5px);
border-color: var(--accent);
}
.nx-step h3 {
color: #fff;
margin-bottom: .4rem;
}
.nx-step p {
color: #BCC7D5;
margin: 0;
}
.nx-science__cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 1.5rem;
margin-top: 3.2rem;
text-align: left;
}
.nx-science__cta p {
color: #fff;
margin: 0;
max-width: 30rem;
}
/* Portfolio (home) */
.nx-portfolio.nx-section--paper {
background: var(--surface);
}
.nx-portfolio__grid {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
align-items: center;
gap: clamp(2rem, 5vw, 4rem);
}
.nx-portfolio__copy {
max-width: 34rem;
}
.nx-portfolio__copy--center {
margin-inline: auto;
text-align: center;
}
@media (max-width: 900px) {
.nx-portfolio__grid {
grid-template-columns: 1fr;
}
.nx-portfolio__copy {
max-width: none;
}
}
/* Brand cards as a responsive carousel */
.nx-portfolio__swiper {
width: 100%;
padding-bottom: 3rem;
overflow: hidden;
}
.nx-portfolio__swiper .swiper-slide {
display: flex;
}
.nx-portfolio__swiper .nx-brandcard {
width: 100%;
}
.nx-portfolio__swiper .swiper-pagination {
bottom: 0;
}
.nx-portfolio__swiper .swiper-pagination-bullet {
background: var(--line-2);
opacity: 1;
}
.nx-portfolio__swiper .swiper-pagination-bullet-active {
background: var(--primary);
}
.nx-portfolio__copy .nx-title {
color: var(--heading);
}
.nx-portfolio__copy .nx-lead {
color: var(--heading);
}
.nx-portfolio__copy .nx-muted {
color: var(--heading);
}
.nx-portfolio__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
align-items: stretch;
max-width: 920px;
margin-inline: auto;
}
/* Coloured brand + medical cards */
.nx-brandcard {
display: flex;
flex-direction: column;
overflow: hidden;
height: clamp(400px, 32vw, 480px);
box-shadow: var(--shadow);
}
.nx-brandcard--nuvox {
background: var(--primary);
}
.nx-brandcard--topup {
border: 1px solid #E08A2C;
background: #E08A2C;
}
.nx-brandcard--med {
border: 1px solid var(--accent);
background: var(--accent);
}
/* Logo area */
.nx-brandcard__logo {
display: flex;
align-items: center;
justify-content: center;
padding: 1.6rem;
min-height: 104px;
}
.nx-brandcard--topup .nx-brandcard__logo {
background: #fff;
}
.nx-brandcard__logo img {
max-width: 78%;
max-height: 62px;
object-fit: contain;
}
.nx-brandcard--nuvox .nx-brandcard__logo img {
max-width: 70%;
max-height: 88px;
}
/* Body */
.nx-brandcard__body {
flex: 1;
display: flex;
flex-direction: column;
padding: 1.5rem 1.6rem 1.8rem;
}
.nx-brandcard__text {
font-size: clamp(1.15rem, 1.5vw, 1.4rem);
font-weight: 600;
line-height: 1.45;
margin: .2rem 0 0;
}
/* "Learn More" as a themed CTA button */
.nx-brandcard__link {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: .5rem;
margin-top: auto;
padding: .7rem 1.35rem;
border-radius: var(--pill);
background: #fff;
font-weight: 700;
font-size: .92rem;
box-shadow: 0 8px 20px rgba(9, 20, 36, .16);
transition: transform var(--t), box-shadow var(--t);
}
.nx-brandcard__link i {
font-size: .8rem;
transition: transform var(--t);
}
.nx-brandcard__link:hover {
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(9, 20, 36, .22);
}
.nx-brandcard__link:hover i {
transform: translateX(4px);
}
/* Body text keeps the theme colour; the CTA text uses the element's theme colour */
.nx-brandcard--nuvox .nx-brandcard__text {
color: #fff;
}
.nx-brandcard--nuvox .nx-brandcard__link {
color: var(--primary);
}
.nx-brandcard--topup .nx-brandcard__text {
color: #3A2408;
}
.nx-brandcard--topup .nx-brandcard__link {
color: #B4600E;
}
/* Medical / prescribed card */
.nx-brandcard--med {
position: relative;
padding-top: 1.5rem;
overflow: hidden;
}
.nx-brandcard__medhead {
position: relative;
padding: 0 1.5rem;
z-index: 2;
}
.nx-brandcard__medhead h3 {
color: #fff;
line-height: 1.2;
margin: 0 0 1rem;
}
.nx-brandcard__tata {
display: inline-flex;
align-items: baseline;
gap: .1rem;
background: #fff;
border-radius: 8px;
padding: .45rem .8rem;
font-weight: 800;
font-size: 1.15rem;
color: #2B2B2B;
letter-spacing: .01em;
}
.nx-brandcard__tata b {
color: var(--accent);
}
.nx-brandcard__doctor {
position: absolute;
right: 0;
bottom: 0;
height: 100%;
display: flex;
align-items: flex-end;
z-index: 1;
}
.nx-brandcard__doctor img {
height: 100%;
width: auto;
max-width: none;
object-fit: contain;
object-position: bottom right;
display: block;
}
/* Quality — CSS-only tabbed showcase (home) */
.nx-quality.nx-section--tint {
background: var(--surface);
}
.nx-quality__grid {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: clamp(2rem, 5vw, 3.5rem);
align-items: center;
}
.nx-quality__intro {
margin-bottom: 0;
}
.nx-qualitytabs {
min-width: 0;
}
.nx-qualitytabs__radio {
position: absolute;
opacity: 0;
pointer-events: none;
}
.nx-qualitytabs__card {
display: grid;
grid-template-columns: minmax(200px, 260px) 1fr;
background: var(--surface);
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
min-height: 320px;
}
.nx-qualitytabs__nav {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.6rem;
padding: 2.4rem 2rem;
border-right: 1px solid var(--line);
}
.nx-qualitytabs__navitem {
display: flex;
align-items: flex-start;
gap: .8rem;
font-size: .78rem;
font-weight: 700;
letter-spacing: .08em;
color: var(--muted);
cursor: pointer;
transition: color var(--t);
}
.nx-qualitytabs__navitem:hover {
color: var(--heading);
}
.nx-qualitytabs__dot {
width: 8px;
height: 8px;
flex: none;
margin-top: .3rem;
border-radius: 50%;
background: var(--line);
transition: background var(--t), transform var(--t);
}
.nx-qualitytabs__panels {
position: relative;
padding: 2.8rem 3rem;
display: flex;
align-items: center;
}
.nx-qualitytabs__panel {
display: none;
animation: nx-fade-in .4s ease;
}
.nx-qualitytabs__panel h3 {
line-height: 1.15;
color: var(--heading);
margin: 0 0 1rem;
}
.nx-qualitytabs__panel p {
color: var(--muted);
line-height: 1.6;
max-width: 34rem;
margin: 0;
}
@keyframes nx-fade-in {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#qtab-0:checked~.nx-qualitytabs__card .nx-qualitytabs__navitem[data-tab="0"],
#qtab-1:checked~.nx-qualitytabs__card .nx-qualitytabs__navitem[data-tab="1"],
#qtab-2:checked~.nx-qualitytabs__card .nx-qualitytabs__navitem[data-tab="2"],
#qtab-3:checked~.nx-qualitytabs__card .nx-qualitytabs__navitem[data-tab="3"],
#qtab-4:checked~.nx-qualitytabs__card .nx-qualitytabs__navitem[data-tab="4"],
#qtab-5:checked~.nx-qualitytabs__card .nx-qualitytabs__navitem[data-tab="5"] {
color: var(--heading);
}
#qtab-0:checked~.nx-qualitytabs__card .nx-qualitytabs__navitem[data-tab="0"] .nx-qualitytabs__dot,
#qtab-1:checked~.nx-qualitytabs__card .nx-qualitytabs__navitem[data-tab="1"] .nx-qualitytabs__dot,
#qtab-2:checked~.nx-qualitytabs__card .nx-qualitytabs__navitem[data-tab="2"] .nx-qualitytabs__dot,
#qtab-3:checked~.nx-qualitytabs__card .nx-qualitytabs__navitem[data-tab="3"] .nx-qualitytabs__dot,
#qtab-4:checked~.nx-qualitytabs__card .nx-qualitytabs__navitem[data-tab="4"] .nx-qualitytabs__dot,
#qtab-5:checked~.nx-qualitytabs__card .nx-qualitytabs__navitem[data-tab="5"] .nx-qualitytabs__dot {
background: var(--primary);
transform: scale(1.3);
}
#qtab-0:checked~.nx-qualitytabs__card .nx-qualitytabs__panels .nx-qualitytabs__panel[data-panel="0"],
#qtab-1:checked~.nx-qualitytabs__card .nx-qualitytabs__panels .nx-qualitytabs__panel[data-panel="1"],
#qtab-2:checked~.nx-qualitytabs__card .nx-qualitytabs__panels .nx-qualitytabs__panel[data-panel="2"],
#qtab-3:checked~.nx-qualitytabs__card .nx-qualitytabs__panels .nx-qualitytabs__panel[data-panel="3"],
#qtab-4:checked~.nx-qualitytabs__card .nx-qualitytabs__panels .nx-qualitytabs__panel[data-panel="4"],
#qtab-5:checked~.nx-qualitytabs__card .nx-qualitytabs__panels .nx-qualitytabs__panel[data-panel="5"] {
display: block;
}
.nx-quality__cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 1.5rem;
margin-top: 2.8rem;
}
.nx-quality__cta p {
color: var(--heading);
margin: 0;
max-width: 30rem;
}
/* Quality flow */
.nx-flow {
display: flex;
flex-direction: column;
gap: .8rem;
}
.nx-flow__item {
display: flex;
align-items: center;
gap: 1rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--pill);
padding: .8rem 1.4rem;
box-shadow: var(--shadow-sm);
transition: transform var(--t), border-color var(--t);
}
.nx-flow__item:hover {
transform: translateX(8px);
border-color: var(--primary);
}
.nx-flow__dot {
width: 36px;
height: 36px;
flex: none;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--primary), var(--primary-700));
color: #fff;
font-weight: 700;
}
.nx-flow__label {
font-weight: 600;
color: var(--heading);
}
/* Reach marquee */
.nx-marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
margin: 3rem 0;
}
.nx-marquee__track {
display: flex;
gap: 3rem;
width: max-content;
animation: nx-marquee 26s linear infinite;
}
.nx-marquee:hover .nx-marquee__track {
animation-play-state: paused;
}
.nx-marquee__item {
display: inline-flex;
align-items: center;
gap: .6rem;
font-size: 1.6rem;
color: rgba(255, 255, 255, .8);
white-space: nowrap;
}
.nx-marquee__item i {
color: var(--accent-300);
font-size: 1rem;
}
.nx-reach {
position: relative;
overflow: hidden;
}
.nx-reach .nx-section__bg img {
opacity: 1;
}
.nx-reach .nx-container {
position: relative;
z-index: 2;
}
.nx-reach__head {
max-width: 50%;
text-align: left;
color: #000;
}
.nx-reach__head .nx-title,
.nx-reach__head .nx-lead,
.nx-reach__head .nx-muted {
color: #000;
}
.nx-reach__cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
text-align: center;
}
.nx-reach__cta--left {
align-items: flex-start;
text-align: left;
}
.nx-reach__closing {
font-size: 1.4rem;
color: #fff;
margin: 0;
}
/* Values */
.nx-vals {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.3rem;
}
.nx-val {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 2rem 1.7rem;
transition: transform var(--t), box-shadow var(--t);
}
.nx-val:hover {
transform: translateY(-6px);
box-shadow: var(--shadow);
}
.nx-val__icon {
width: 56px;
height: 56px;
border-radius: 16px;
display: grid;
place-items: center;
font-size: 1.4rem;
background: linear-gradient(135deg, var(--primary-050), #fff);
color: var(--primary-700);
margin-bottom: 1.2rem;
box-shadow: var(--shadow-sm);
}
.nx-val h3 {
margin-bottom: .5rem;
}
.nx-val__tag {
font-weight: 600;
color: var(--heading);
margin: 0 0 .6rem;
}
.nx-val__text {
color: var(--muted);
font-size: .95rem;
margin: 0 0 .8rem;
}
.nx-val__closing {
color: var(--primary-700);
margin: 0;
}
.nx-vals--dark .nx-val {
background: rgba(255, 255, 255, .04);
border-color: rgba(255, 255, 255, .1);
}
.nx-vals--dark .nx-val h3 {
color: #fff;
}
.nx-vals--dark .nx-val__tag {
color: #EDF1F6;
}
.nx-vals--dark .nx-val__text {
color: #A7B4C6;
}
.nx-vals--dark .nx-val__closing {
color: var(--accent-300);
}
.nx-vals--dark .nx-val__icon {
background: rgba(22, 67, 121, .18);
color: #8FBBEC;
}
.nx-values .nx-center {
margin-top: 2.6rem;
}
/* Values — intro card row (flippable photo / detail cards) */
.nx-valcards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.1rem;
margin: 3rem 0 0;
perspective: 1600px;
}
.nx-valflip {
position: relative;
flex: 0 1 calc(33.333% - 1.1rem * 2 / 3);
max-width: calc(33.333% - 1.1rem * 2 / 3);
min-height: 380px;
cursor: pointer;
}
.nx-valflip__inner {
position: relative;
width: 100%;
height: 100%;
min-height: 380px;
transition: transform .7s var(--ease);
transform-style: preserve-3d;
}
.nx-valflip:hover .nx-valflip__inner,
.nx-valflip:focus-visible .nx-valflip__inner,
.nx-valflip.is-flipped .nx-valflip__inner {
transform: rotateY(180deg);
}
.nx-valflip__face {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
overflow: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border: 1px solid var(--primary-100);
box-shadow: var(--shadow-sm);
}
.nx-valflip__front {
margin: 0;
background: transparent;
border: none;
box-shadow: none;
gap: 0;
}
.nx-valflip__front img {
width: 100%;
flex: 1;
min-height: 0;
object-fit: cover;
box-shadow: var(--shadow-sm);
}
.nx-valflip__front figcaption {
flex: 0 0 auto;
text-align: center;
font-weight: 600;
color: var(--primary-700);
font-size: .92rem;
line-height: 1.35;
padding: .7rem .6rem;
border: 1px solid var(--primary-100);
background: var(--surface);
}
.nx-valflip__back {
transform: rotateY(180deg);
background: #fff;
border: none;
color: #000;
justify-content: center;
padding: 1.8rem;
text-align: center;
}
.nx-valflip__tag {
color: #fff;
margin: 0 0 .8rem;
}
.nx-valflip__text {
line-height: 1.55;
color: rgba(255, 255, 255, .9);
margin: 0 0 .8rem;
}
/* Evidence copy sets the card height so long references are never clipped. */
.nx-evidence-focus .nx-valflip {
container-type: inline-size;
}
.nx-evidence-focus .nx-valflip__inner {
display: grid;
}
.nx-evidence-focus .nx-valflip__back {
position: relative;
inset: auto;
min-height: 380px;
padding: clamp(1rem, 5cqi, 1.5rem);
overflow: visible;
}
.nx-evidence-focus .nx-valflip__tag {
font-size: clamp(1.125rem, 5cqi, 1.35rem);
line-height: 1.3;
color: var(--ink);
}
.nx-evidence-focus .nx-valflip__text {
font-size: clamp(.875rem, 4cqi, 1rem);
line-height: 1.5;
color: var(--text);
margin: 0;
}
.nx-valflip__closing {
color: var(--accent-300);
margin: 0;
}
@media (max-width: 900px) {
.nx-valflip {
flex: 0 1 calc(50% - .55rem);
max-width: calc(50% - .55rem);
}
}
@media (max-width: 560px) {
.nx-valflip {
flex: 0 1 100%;
max-width: 100%;
}
}
/* Values — "Where Our Values Become Action" photo section */
.nx-valuesaction {
position: relative;
overflow: hidden;
min-height: 34rem;
display: flex;
align-items: center;
}
.nx-valuesaction .nx-section__bg img {
object-fit: cover;
object-position: right center;
opacity: 1;
}
.nx-valuesaction .nx-container {
position: relative;
z-index: 2;
}
.nx-valuesaction__head {
max-width: 46%;
}
@media (max-width: 900px) {
.nx-valuesaction__head {
max-width: 100%;
}
}
.nx-reachexpand {
position: relative;
overflow: hidden;
min-height: 30rem;
display: flex;
align-items: center;
}
.nx-reachexpand .nx-section__bg img {
object-fit: cover;
object-position: right center;
opacity: 1;
}
.nx-reachexpand .nx-container {
position: relative;
z-index: 2;
}
.nx-reachexpand__head {
max-width: 46%;
}
.nx-reachexpand__head .nx-title,
.nx-reachexpand__head .nx-lead {
color: #000;
}
.nx-reachexpand__text p {
margin: 0;
}
.nx-reachexpand__text p+p {
margin-top: .6rem;
}
.nx-reachexpand__closing {
font-weight: 700;
font-size: 1.3rem;
line-height: 1.35;
color: var(--accent);
margin: 1.3rem 0 0;
}
@media (max-width: 900px) {
.nx-reachexpand__head {
max-width: 100%;
}
}
/* Resource links */
.nx-reslinks__title {
margin: 0 0 1.2rem;
}
.nx-reslinks {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.nx-reslinks__item {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: 1rem 1.3rem;
font-weight: 600;
font-size: .95rem;
color: var(--heading);
transition: border-color var(--t), color var(--t);
}
.nx-reslinks__item:hover {
border-color: var(--primary);
color: var(--primary-700);
}
.nx-reslinks__item--featured {
grid-row: span 2;
border-radius: var(--r);
border-width: 1.5px;
font-size: 1.05rem;
}
@media (max-width: 900px) {
.nx-reslinks {
grid-template-columns: repeat(2, 1fr);
}
.nx-reslinks__item--featured {
grid-row: auto;
}
}
@media (max-width: 520px) {
.nx-reslinks {
grid-template-columns: 1fr;
}
}
/* Newsroom + careers */
.nx-newsgrid {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
.nx-news__list {
display: grid;
gap: .9rem;
}
.nx-news__item {
display: flex;
align-items: center;
gap: 1.2rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 1.3rem 1.6rem;
transition: transform var(--t), box-shadow var(--t);
}
.nx-news__item:hover {
transform: translateX(8px);
box-shadow: var(--shadow);
}
.nx-news__item p {
margin: 0;
color: var(--text);
flex: 1;
}
.nx-news__item>i {
color: var(--primary);
transition: transform var(--t);
}
.nx-news__item:hover>i {
transform: translateX(5px);
}
.nx-careers {
margin-top: 3rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: clamp(2rem, 4vw, 3.4rem);
color: #fff;
box-shadow: var(--shadow-primary);
position: relative;
overflow: hidden;
}
.nx-careers--left {
flex-direction: column;
align-items: flex-start;
justify-content: center;
max-width: 50%;
text-align: left;
}
.nx-careers::after {
content: "";
position: absolute;
top: -40%;
right: -10%;
width: 340px;
height: 340px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 65%);
}
.nx-news--photo {
position: relative;
background: url('../images/sections/career.webp') center / cover no-repeat;
}
.nx-news--photo .nx-careers {
background: transparent;
box-shadow: none;
}
.nx-news--photo .nx-careers::after {
display: none;
}
.nx-careers__copy {
position: relative;
max-width: 40rem;
}
.nx-careers__closing {
color: #000;
margin-top: .6rem;
}
.nx-careers__title {
color: #fff;
margin-bottom: .6rem;
}
.nx-careers__copy p {
color: rgba(255, 255, 255, .9);
margin: 0;
}
.nx-news--photo .nx-careers__title {
color: #000;
}
.nx-news--photo .nx-careers__copy p {
color: var(--muted);
}
.nx-news--photo .nx-careers__closing {
margin-top: 1.4rem;
}
.nx-careers--dark {
background: linear-gradient(120deg, var(--ink-3), var(--ink));
border: 1px solid rgba(255, 255, 255, .1);
}
/* 11. ------------------------------------------------- ABOUT */
.nx-quotecard {
background: linear-gradient(150deg, var(--ink-3), var(--ink));
color: #fff;
border-radius: var(--r-lg);
padding: clamp(2rem, 4vw, 3rem);
position: relative;
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.nx-quotecard::before {
content: "“";
position: absolute;
top: -1rem;
right: 1.5rem;
font-size: 9rem;
color: rgba(211, 35, 38, .2);
line-height: 1;
}
.nx-quotecard__icon {
width: 48px;
height: 48px;
color: var(--accent-300);
margin-bottom: 1.4rem;
}
.nx-quotecard__text {
font-size: clamp(1.4rem, 2.6vw, 1.9rem);
line-height: 1.35;
color: #fff;
margin: 0;
position: relative;
}
.nx-quotecard__by {
color: #A7B4C6;
margin: 1.4rem 0 0;
font-size: .9rem;
position: relative;
}
/* --- Vision / Mission tabs (About) --- */
.nx-vmtabs__radio {
position: absolute;
opacity: 0;
pointer-events: none;
}
.nx-vmtabs__nav {
display: flex;
gap: 2.2rem;
border-bottom: 1px solid var(--line);
margin-bottom: 2.4rem;
}
.nx-vmtabs__navitem {
display: inline-block;
padding: 0 0 1.1rem;
margin-bottom: -1px;
font-size: clamp(1rem, 1.6vw, 1.2rem);
font-weight: 600;
color: var(--muted);
border-bottom: 3px solid transparent;
cursor: pointer;
transition: color var(--t), border-color var(--t);
}
.nx-vmtabs__navitem:hover {
color: var(--heading);
}
.nx-vmtabs__panel {
display: none;
}
#vmtab-0:checked~.nx-vmtabs__panels [data-panel="0"],
#vmtab-1:checked~.nx-vmtabs__panels [data-panel="1"] {
display: grid;
}
#vmtab-0:checked~.nx-vmtabs__nav [data-tab="0"],
#vmtab-1:checked~.nx-vmtabs__nav [data-tab="1"] {
color: var(--heading);
border-color: var(--primary);
}
.nx-vmtabs__panels [data-panel] {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1.8rem, 4vw, 3.5rem);
align-items: center;
}
.nx-vmtabs__media {
overflow: hidden;
aspect-ratio: 16 / 11;
}
.nx-vmtabs__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.nx-vmtabs__copy h3 {
color: var(--heading);
line-height: 1.15;
margin: 0 0 1rem;
}
.nx-vmtabs__copy p {
color: var(--text);
line-height: 1.7;
margin: 0;
}
@media (max-width: 720px) {
.nx-vmtabs__panels [data-panel] {
grid-template-columns: 1fr;
}
}
.nx-story-section {
overflow: hidden;
}
.nx-story-intro {
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.nx-story-intro .nx-head {
margin-bottom: 1.5rem;
}
.nx-story-intro .nx-figure {
box-shadow: none;
}
/* --- Story card: copy + three-video strip (About > Our Story) --- */
.nx-storycard {
display: grid;
grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
overflow: hidden;
}
.nx-storycard__copy {
padding: clamp(1.75rem, 3.5vw, 3rem);
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.nx-storycard__title {
margin: 0 0 1.1rem;
}
.nx-storycard__text {
position: relative;
max-height: 18rem;
overflow: hidden;
transition: max-height .45s var(--ease);
}
.nx-storycard.is-open .nx-storycard__text {
max-height: 80rem;
}
.nx-storycard__text p {
line-height: 1.6;
color: var(--text);
margin: 0 0 .9rem;
}
.nx-storycard__text p:last-child {
margin-bottom: 0;
}
.nx-storycard__more {
align-self: flex-start;
margin-top: 1.4rem;
padding: .8rem 1.5rem;
border: 0;
border-radius: var(--pill);
background: linear-gradient(120deg, var(--accent), var(--accent-600));
color: #fff;
font-weight: 600;
font-size: .95rem;
line-height: 1;
cursor: pointer;
box-shadow: var(--shadow-accent);
transition: transform var(--t), box-shadow var(--t);
}
.nx-storycard__more:hover {
transform: translateY(-2px);
box-shadow: 0 24px 50px rgba(211, 35, 38, .38);
}
.nx-storycard__media {
display: flex;
min-height: 100%;
}
.nx-storycard__panel {
position: relative;
flex: 1 1 0;
min-width: 0;
overflow: hidden;
}
.nx-storycard__panel+.nx-storycard__panel {
border-left: 2px solid #fff;
}
.nx-storycard__panel video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 900px) {
.nx-storycard {
grid-template-columns: 1fr;
}
.nx-storycard__media {
min-height: 260px;
order: -1;
}
}
@media (max-width: 560px) {
.nx-storycard__media {
min-height: 200px;
}
}
.nx-figure__scrim--fade-l {
background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .7) 22%, rgba(255, 255, 255, 0) 45%);
}
.nx-partnership-section {
overflow: hidden;
}
.nx-partnership-section .nx-section__bg {
background-position: right center;
}
.nx-partnership-section .nx-section__bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--paper) 0%, var(--paper) 38%, rgba(255, 255, 255, .55) 62%, rgba(255, 255, 255, 0) 100%);
}
.nx-partnership-section>.nx-container {
position: relative;
z-index: 1;
}
.nx-partnership-section .nx-split__copy {
max-width: 42rem;
}
.nx-story {
max-width: 45rem;
}
.nx-story__p {
font-size: 1.12rem;
color: var(--text);
text-align: justify;
text-justify: inter-word;
margin: 0 0 1rem;
}
.nx-story__closing {
max-width: 46rem;
margin: 3rem auto 0;
text-align: center;
font-size: 1.35rem;
color: var(--primary-700);
}
/* Certification / accreditation logos — auto-sliding marquee */
.nx-certmarquee {
overflow: hidden;
padding-top: clamp(2rem, 4vw, 3rem);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.nx-certmarquee__track {
display: flex;
align-items: center;
width: max-content;
animation: nx-certscroll 24s linear infinite;
}
.nx-certmarquee:hover .nx-certmarquee__track {
animation-play-state: paused;
}
.nx-certmarquee__item {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
padding-inline: clamp(2rem, 5vw, 5rem);
}
.nx-certmarquee__item img {
height: clamp(88px, 9.5vw, 132px);
width: auto;
object-fit: contain;
display: block;
}
@keyframes nx-certscroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
.nx-certmarquee__track {
animation: none;
}
}
/* --- Diagonal timeline (About > Our Story) --- */
.nx-tl2 {
position: relative;
height: clamp(360px, 40vw, 460px);
margin-top: 5rem;
}
/* Rising baseline the dots sit on */
.nx-tl2__rail {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
filter: drop-shadow(0 8px 14px rgba(9, 20, 36, .07));
}
/* Tapering grey road */
.nx-tl2__rail polygon {
fill: #E7EAEF;
}
.nx-tl2__item {
position: absolute;
top: 3%;
width: 25%;
padding-left: 20px;
}
.nx-tl2__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: .6rem;
margin-bottom: .8rem;
}
.nx-tl2__label {
display: inline-flex;
align-items: center;
font-weight: 600;
font-size: .9rem;
color: var(--muted);
background: #EFEFF1;
border: 1px solid var(--line-2);
border-radius: var(--pill);
padding: .42rem 1rem;
white-space: nowrap;
}
.nx-tl2__icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: .45rem;
}
.nx-tl2__icon img {
height: 40px;
width: auto;
max-width: 84px;
object-fit: contain;
display: block;
}
.nx-tl2__title {
color: var(--heading);
margin: 0 0 .55rem;
}
.nx-tl2__text {
line-height: 1.55;
color: var(--tl-gold);
margin: 0;
}
/* Vertical stem + ring dot (positions set inline as % of the track) */
.nx-tl2__stem {
position: absolute;
width: 2px;
background: var(--tl-c, var(--primary-700));
transform: translateX(-50%);
/* Above the dot's white fill so the line reaches the centre dot */
z-index: 3;
}
.nx-tl2__dot {
position: absolute;
width: 50px;
height: 25px;
border-radius: 50%;
background: #fff;
/* Level horizontal ellipse lying on the line */
border: 3px solid var(--tl-c, var(--primary-700));
transform: translate(-50%, -50%);
box-shadow: 0 6px 13px rgba(9, 20, 36, .13);
z-index: 2;
}
/* Filled centre dot (matching oval) */
.nx-tl2__dot::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 17px;
height: 10px;
border-radius: 50%;
background: var(--tl-c, var(--primary-700));
transform: translate(-50%, -50%);
}
/* Per-milestone colour ramp: navy -> mauve -> red */
.nx-tl2__item--0,
.nx-tl2__stem--0,
.nx-tl2__dot--0,
.nx-tl2m__item--0 {
--tl-c: var(--ink);
/* Dark Navy #102B4E */
}
.nx-tl2__item--1,
.nx-tl2__stem--1,
.nx-tl2__dot--1,
.nx-tl2m__item--1 {
--tl-c: var(--primary);
/* Blue #234E87 */
}
.nx-tl2__item--2,
.nx-tl2__stem--2,
.nx-tl2__dot--2,
.nx-tl2m__item--2 {
--tl-c: var(--accent);
}
/* --- Scroll reveal: road draws in, poles drop, dots pop, text rises --- */
.nx-tl2.js-anim .nx-tl2__rail {
clip-path: inset(0 100% 0 0);
}
.nx-tl2.js-anim .nx-tl2__stem {
transform: translateX(-50%) scaleY(0);
transform-origin: top center;
}
.nx-tl2.js-anim .nx-tl2__dot {
transform: translate(-50%, -50%) scale(0);
}
.nx-tl2.js-anim .nx-tl2__top,
.nx-tl2.js-anim .nx-tl2__title,
.nx-tl2.js-anim .nx-tl2__text {
opacity: 0;
transform: translateY(16px);
}
.nx-tl2.js-anim.is-inview .nx-tl2__rail {
clip-path: inset(0 0 0 0);
transition: clip-path 1.1s var(--ease);
}
.nx-tl2.js-anim.is-inview .nx-tl2__stem {
transform: translateX(-50%) scaleY(1);
transition: transform .7s var(--ease);
}
.nx-tl2.js-anim.is-inview .nx-tl2__dot {
transform: translate(-50%, -50%) scale(1);
transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.nx-tl2.js-anim.is-inview .nx-tl2__top,
.nx-tl2.js-anim.is-inview .nx-tl2__title,
.nx-tl2.js-anim.is-inview .nx-tl2__text {
opacity: 1;
transform: none;
transition: opacity .55s var(--ease), transform .55s var(--ease);
}
/* Stagger: poles drop, dots pop, and the text cascades (label -> title -> body) */
.nx-tl2.js-anim.is-inview .nx-tl2__stem--0 {
transition-delay: .30s;
}
.nx-tl2.js-anim.is-inview .nx-tl2__dot--0 {
transition-delay: .75s;
}
.nx-tl2.js-anim.is-inview .nx-tl2__item--0 .nx-tl2__top {
transition-delay: .25s;
}
.nx-tl2.js-anim.is-inview .nx-tl2__item--0 .nx-tl2__title {
transition-delay: .38s;
}
.nx-tl2.js-anim.is-inview .nx-tl2__item--0 .nx-tl2__text {
transition-delay: .50s;
}
.nx-tl2.js-anim.is-inview .nx-tl2__stem--1 {
transition-delay: .50s;
}
.nx-tl2.js-anim.is-inview .nx-tl2__dot--1 {
transition-delay: .95s;
}
.nx-tl2.js-anim.is-inview .nx-tl2__item--1 .nx-tl2__top {
transition-delay: .45s;
}
.nx-tl2.js-anim.is-inview .nx-tl2__item--1 .nx-tl2__title {
transition-delay: .58s;
}
.nx-tl2.js-anim.is-inview .nx-tl2__item--1 .nx-tl2__text {
transition-delay: .70s;
}
.nx-tl2.js-anim.is-inview .nx-tl2__stem--2 {
transition-delay: .70s;
}
.nx-tl2.js-anim.is-inview .nx-tl2__dot--2 {
transition-delay: 1.15s;
}
.nx-tl2.js-anim.is-inview .nx-tl2__item--2 .nx-tl2__top {
transition-delay: .65s;
}
.nx-tl2.js-anim.is-inview .nx-tl2__item--2 .nx-tl2__title {
transition-delay: .78s;
}
.nx-tl2.js-anim.is-inview .nx-tl2__item--2 .nx-tl2__text {
transition-delay: .90s;
}
@media (prefers-reduced-motion: reduce) {
.nx-tl2.js-anim .nx-tl2__rail,
.nx-tl2.js-anim .nx-tl2__stem,
.nx-tl2.js-anim .nx-tl2__dot,
.nx-tl2.js-anim .nx-tl2__top,
.nx-tl2.js-anim .nx-tl2__title,
.nx-tl2.js-anim .nx-tl2__text {
clip-path: none !important;
transform: none !important;
opacity: 1 !important;
transition: none !important;
}
/* keep the stem/dot base transforms intact */
.nx-tl2.js-anim .nx-tl2__stem {
transform: translateX(-50%) !important;
}
.nx-tl2.js-anim .nx-tl2__dot {
transform: translate(-50%, -50%) !important;
}
}
/* Stacked variant for small screens */
.nx-tl2m {
display: none;
list-style: none;
margin: 2.75rem 0 0;
padding: 0;
}
.nx-tl2m__item {
position: relative;
padding: 0 0 2rem 1.75rem;
border-left: 2px solid var(--line);
}
.nx-tl2m__item:last-child {
padding-bottom: 0;
border-left-color: transparent;
}
.nx-tl2m__item::before {
content: "";
position: absolute;
left: -9px;
top: .35rem;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--tl-c, var(--primary-700));
}
/* Filled centre dot (bullseye) */
.nx-tl2m__item::after {
content: "";
position: absolute;
left: -1px;
top: calc(.35rem + 8px);
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--tl-c, var(--primary-700));
transform: translate(-50%, -50%);
}
.nx-tl2m__top {
display: flex;
align-items: center;
gap: .7rem;
margin-bottom: .6rem;
}
.nx-tl2m__label {
display: inline-flex;
align-items: center;
font-weight: 600;
font-size: .9rem;
color: var(--muted);
background: #EFEFF1;
border: 1px solid var(--line-2);
border-radius: var(--pill);
padding: .42rem 1rem;
white-space: nowrap;
}
.nx-tl2m__icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: .45rem;
}
.nx-tl2m__icon img {
height: 38px;
width: auto;
max-width: 80px;
object-fit: contain;
display: block;
}
.nx-tl2m__title {
color: var(--heading);
margin: 0 0 .4rem;
}
.nx-tl2m__text {
line-height: 1.55;
color: var(--tl-gold);
margin: 0;
}
@media (max-width: 820px) {
.nx-tl2 {
display: none;
}
.nx-tl2m {
display: block;
}
}
.nx-leadership {
position: relative;
overflow: hidden;
}
/* Keep the molecule anchored to the right so it stays fully in frame */
.nx-leadership>.nx-section__bg {
background-position: right center;
background-repeat: no-repeat;
}
/* Bluish overlay (matches the hero veil, a touch deeper) */
.nx-leadership>.nx-section__bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(11, 34, 68, .68) 0%, rgba(11, 34, 68, .58) 45%, rgba(11, 34, 68, .76) 100%);
}
.nx-leadership>.nx-container {
position: relative;
z-index: 1;
}
/* Founders — heading + flip cards (redesign) */
.nx-leadhead {
max-width: 34rem;
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.nx-leadhead .nx-title {
margin: 0 0 .8rem;
color: #fff;
}
/* Sits under the title rather than above it — see the Leadership block in
templates/section-about.php. */
.nx-leadhead__eyebrow {
display: block;
font-size: .95rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255, 255, 255, .78);
}
.nx-founders2 {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
max-width: 640px;
perspective: 1600px;
}
.nx-fflip {
position: relative;
flex: 0 1 calc(50% - .75rem);
max-width: calc(50% - .75rem);
cursor: pointer;
border-radius: var(--r-sm);
}
.nx-fflip:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 3px;
}
.nx-fflip__inner {
position: relative;
width: 100%;
transition: transform .7s var(--ease);
transform-style: preserve-3d;
}
.nx-fflip:hover .nx-fflip__inner,
.nx-fflip:focus-visible .nx-fflip__inner,
.nx-fflip.is-flipped .nx-fflip__inner {
transform: rotateY(180deg);
}
/* The front face sits in normal flow so the photo's own ratio sets the card
height; the back is overlaid on top of it. */
.nx-fflip__face {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: var(--r-sm);
background: var(--surface);
box-shadow: var(--shadow);
}
/* FRONT — photo + red name bar */
/* Matches the founder portraits' native 413x531 so the photo fills the card
edge to edge with nothing cropped. */
.nx-fflip__photo {
position: relative;
flex: 0 0 auto;
aspect-ratio: 413 / 531;
background: #fff;
}
.nx-fflip__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.nx-fflip__initials {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-weight: 700;
font-size: 3rem;
color: var(--primary);
background: var(--primary-050);
}
.nx-fflip__bar {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: .15rem;
background: var(--accent);
color: #fff;
padding: .9rem 1.1rem 1rem;
text-align: center;
}
.nx-fflip__name {
font-weight: 700;
font-size: 1.02rem;
line-height: 1.2;
}
.nx-fflip__role {
font-size: .82rem;
font-weight: 600;
color: rgba(255, 255, 255, .88);
}
/* BACK — bio */
.nx-fflip__back {
position: absolute;
inset: 0;
transform: rotateY(180deg);
background: linear-gradient(155deg, var(--primary), var(--primary-700));
color: #fff;
justify-content: flex-start;
padding: 1.6rem 1.5rem;
overflow-y: auto;
}
.nx-fflip__backname {
font-weight: 700;
font-size: 1.15rem;
margin-bottom: .5rem;
padding-bottom: .6rem;
border-bottom: 2px solid var(--accent-300);
}
.nx-fflip__bio {
line-height: 1.6;
color: rgba(255, 255, 255, .92);
margin: .6rem 0 0;
}
@media (max-width: 600px) {
.nx-founders2 {
max-width: 100%;
}
.nx-fflip {
flex: 0 1 100%;
max-width: 320px;
margin-inline: auto;
}
}
.nx-founders {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.8rem;
}
.nx-founders--plain {
display: flex;
flex-direction: column;
gap: 3rem;
}
.nx-founder {
display: flex;
gap: 1.6rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 2rem;
transition: transform var(--t), box-shadow var(--t);
}
.nx-founder:hover {
transform: translateY(-6px);
box-shadow: var(--shadow);
}
.nx-founders--plain .nx-founder {
display: block;
background: none;
border: none;
padding: 0;
max-width: 50rem;
margin-inline: auto;
}
.nx-founders--plain .nx-founder:hover {
transform: none;
box-shadow: none;
}
.nx-founder__wrap::after {
content: '';
display: table;
clear: both;
}
.nx-founder__wrap--left .nx-founder__portrait {
float: left;
margin: .2rem 1.6rem 1rem 0;
}
.nx-founder__wrap--right .nx-founder__portrait {
float: right;
margin: .2rem 0 1rem 1.6rem;
}
.nx-founder__portrait {
position: relative;
width: 92px;
height: 92px;
flex: none;
}
.nx-founders--plain .nx-founder__portrait {
width: 250px;
height: 250px;
}
.nx-founder__initials {
position: absolute;
inset: 0;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 1.8rem;
color: #fff;
background: linear-gradient(135deg, var(--primary), var(--primary-700));
}
.nx-founder__role {
color: var(--primary-700);
font-weight: 600;
margin: .2rem 0 .8rem;
}
.nx-founders--plain .nx-founder__role {
font-weight: 500;
font-size: .85rem;
margin: .2rem 0 .9rem;
}
.nx-founder__bio {
color: var(--muted);
font-size: .92rem;
margin: 0;
line-height: 1.6;
}
.nx-reachgrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.4rem;
}
.nx-reachgrid--2 {
grid-template-columns: repeat(2, 1fr);
max-width: 50rem;
margin: 0 auto;
}
.nx-reachgrid--1 {
grid-template-columns: 1fr;
max-width: 40rem;
margin: 0 auto;
}
.nx-today__mapwrap {
position: relative;
max-width: 56rem;
}
.nx-today__mapwrap::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse at center, transparent 35%, var(--paper) 72%);
}
.nx-today__map {
display: block;
width: 100%;
}
.nx-reachcard {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 2rem 1.8rem;
transition: transform var(--t), box-shadow var(--t);
}
.nx-reachcard:hover {
transform: translateY(-6px);
box-shadow: var(--shadow);
}
.nx-reachcard h3 {
margin-bottom: .8rem;
color: var(--primary-700);
}
.nx-reachcard p {
color: var(--muted);
margin: 0 0 .8rem;
}
.nx-marketchips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .7rem;
margin-top: 2.6rem;
}
.nx-marketchips li {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .6rem 1.1rem;
border-radius: var(--pill);
background: var(--surface);
border: 1px solid var(--line);
font-weight: 600;
color: var(--heading);
font-size: .92rem;
}
.nx-marketchips i {
color: var(--primary);
}
.nx-strands {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 1.6rem;
}
.nx-strand {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 2.2rem;
transition: transform var(--t), box-shadow var(--t);
}
.nx-strand:hover {
transform: translateY(-6px);
box-shadow: var(--shadow);
}
.nx-strand__head {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.nx-strand__icon {
width: 54px;
height: 54px;
border-radius: 14px;
display: grid;
place-items: center;
font-size: 1.35rem;
background: var(--primary-050);
color: var(--primary-700);
}
.nx-strand__lead {
color: var(--heading);
font-weight: 500;
margin: 0 0 1.3rem;
}
.nx-strand__items {
display: grid;
gap: 1rem;
}
.nx-strand__items li {
padding-left: 1.4rem;
position: relative;
}
.nx-strand__items li::before {
content: "";
position: absolute;
left: 0;
top: .55rem;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
}
.nx-strand__items strong {
display: block;
color: var(--heading);
font-size: 1.1rem;
margin-bottom: .2rem;
}
.nx-strand__items span {
color: var(--muted);
font-size: .92rem;
}
.nx-nisce-intro .nx-split {
align-items: stretch;
}
.nx-nisce-intro__copy {
display: flex;
flex-direction: column;
justify-content: center;
}
.nx-nisce-intro__copy .nx-title {
margin-bottom: 1.6rem;
}
.nx-nisce-intro__copy h3 {
margin: 0 0 1.25rem;
color: var(--heading);
line-height: 1.35;
}
.nx-nisce-intro__copy p {
max-width: 35rem;
margin: 0;
color: var(--text);
}
.nx-nisce-intro__media {
min-height: 19rem;
border: 1px solid var(--brand-gray);
border-radius: var(--r-sm);
background: #eee;
}
.nx-nisce__closing {
max-width: 50rem;
margin: 3rem auto 0;
text-align: center;
font-size: 1.3rem;
color: var(--primary-700);
}
/* 12. ---------------------------------------------- SERVICES */
.nx-brandsplit {
display: flex;
align-items: stretch;
justify-content: center;
gap: 1.4rem;
margin-top: 3rem;
flex-wrap: wrap;
}
.nx-brandsplit__item {
flex: 1;
min-width: 260px;
max-width: 420px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 2rem;
text-align: center;
transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.nx-brandsplit__item:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
.nx-brandsplit__item--primary:hover {
border-color: var(--primary);
}
.nx-brandsplit__item--accent:hover {
border-color: var(--accent);
}
.nx-brandsplit__mark {
width: 68px;
height: 68px;
margin: 0 auto 1.2rem;
border-radius: 18px;
display: grid;
place-items: center;
font-size: 1.7rem;
color: #fff;
}
.nx-brandsplit__item--primary .nx-brandsplit__mark {
background: linear-gradient(135deg, var(--primary), var(--primary-700));
}
.nx-brandsplit__item--accent .nx-brandsplit__mark {
background: linear-gradient(135deg, var(--accent), var(--accent-600));
}
.nx-brandsplit__name {
display: block;
font-size: 1.5rem;
color: var(--heading);
margin-bottom: .3rem;
}
.nx-brandsplit__tag {
color: var(--muted);
font-size: .92rem;
}
.nx-brandsplit__divider {
align-self: center;
font-size: 2rem;
color: var(--line-2);
}
.nx-brandsec__head {
text-align: center;
max-width: 60rem;
margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.nx-brandsec__badge {
display: inline-flex;
align-items: center;
gap: .5rem;
font-weight: 700;
font-size: .82rem;
letter-spacing: .08em;
text-transform: uppercase;
padding: .5rem 1rem;
border-radius: var(--pill);
margin-bottom: 1.2rem;
}
.nx-brandsec__badge--primary {
background: var(--primary-050);
color: var(--primary-700);
}
.nx-brandsec__badge--accent {
background: var(--accent-050);
color: var(--accent-600);
}
.nx-points {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.2rem;
margin-bottom: 3.5rem;
}
.nx-point {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 1.7rem;
border-left: 3px solid var(--primary);
transition: transform var(--t), box-shadow var(--t);
}
.nx-point:hover {
transform: translateY(-5px);
box-shadow: var(--shadow);
}
.nx-point h4 {
margin-bottom: .6rem;
}
.nx-point p {
color: var(--muted);
margin: 0 0 .8rem;
}
.nx-point__cite {
font-size: .78rem;
color: var(--primary-700);
font-weight: 600;
}
/* Flip cards */
.nx-flip-hint {
text-align: center;
color: var(--muted);
margin: 0 0 1.6rem;
}
.nx-flip-hint i {
color: var(--primary);
}
.nx-flips {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.3rem;
perspective: 1600px;
}
.nx-flips--4 {
grid-template-columns: repeat(4, 1fr);
}
.nx-flip {
position: relative;
min-height: 240px;
cursor: pointer;
}
.nx-flip__inner {
position: relative;
width: 100%;
height: 100%;
min-height: 240px;
transition: transform .7s var(--ease);
transform-style: preserve-3d;
}
.nx-flip:hover .nx-flip__inner,
.nx-flip:focus-visible .nx-flip__inner,
.nx-flip.is-flipped .nx-flip__inner {
transform: rotateY(180deg);
}
.nx-flip__face {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: var(--r-lg);
padding: 1.9rem;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-sm);
border: 1px solid var(--line);
}
.nx-flip__front {
background: var(--surface);
}
.nx-flip__icon {
width: 56px;
height: 56px;
border-radius: 15px;
display: grid;
place-items: center;
font-size: 1.4rem;
background: linear-gradient(135deg, var(--primary), var(--primary-700));
color: #fff;
margin-bottom: 1.1rem;
}
.nx-flip--accent .nx-flip__icon {
background: linear-gradient(135deg, var(--accent), var(--accent-600));
}
.nx-flip__front h4 {
margin-bottom: .5rem;
}
.nx-flip__front p {
color: var(--muted);
margin: 0;
}
.nx-flip__tag {
font-size: .72rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--accent-600);
margin-bottom: .3rem;
}
.nx-flip__cue {
position: absolute;
bottom: 1.3rem;
right: 1.5rem;
color: var(--line-2);
font-size: 1.1rem;
animation: nx-pulse 2.5s ease-in-out infinite;
}
.nx-flip__back {
transform: rotateY(180deg);
background: linear-gradient(150deg, var(--primary), var(--primary-700));
color: #fff;
border: none;
justify-content: center;
}
.nx-flip--accent .nx-flip__back {
background: linear-gradient(150deg, var(--accent-600), #8E1518);
}
.nx-flip__backlabel {
font-size: .74rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255, 255, 255, .7);
margin-bottom: .8rem;
}
.nx-flip__products {
line-height: 1.4;
color: #fff;
margin: 0;
}
.nx-flip__back p {
color: rgba(255, 255, 255, .92);
margin: 0;
}
.nx-flip__cat {
margin-top: auto;
padding-top: 1rem;
font-size: .82rem;
color: rgba(255, 255, 255, .75);
}
.nx-trust {
margin-top: 3.5rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 2rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: clamp(1.8rem, 3.5vw, 2.8rem);
box-shadow: var(--shadow);
}
.nx-trust__body {
display: flex;
gap: 1.4rem;
align-items: center;
max-width: 44rem;
}
.nx-trust__icon {
width: 64px;
height: 64px;
flex: none;
border-radius: 16px;
display: grid;
place-items: center;
font-size: 1.6rem;
background: var(--primary-050);
color: var(--primary-700);
}
.nx-trust__body h3 {
margin-bottom: .4rem;
}
.nx-trust__body p {
color: var(--muted);
margin: 0;
}
.nx-trust__cta {
text-align: center;
}
.nx-trust__cta small {
display: block;
color: var(--muted);
font-size: .8rem;
margin-top: .7rem;
}
.nx-tech {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.3rem;
}
.nx-techcard {
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: var(--r);
padding: 2rem 1.7rem;
transition: transform var(--t), border-color var(--t), background var(--t);
}
.nx-techcard:hover {
transform: translateY(-6px);
border-color: rgba(211, 35, 38, .4);
background: rgba(255, 255, 255, .06);
}
.nx-techcard__icon {
width: 56px;
height: 56px;
border-radius: 15px;
display: grid;
place-items: center;
font-size: 1.4rem;
background: rgba(22, 67, 121, .2);
color: #8FBBEC;
margin-bottom: 1.2rem;
}
.nx-techcard h3 {
color: #fff;
margin-bottom: .5rem;
}
.nx-techcard p {
color: #A7B4C6;
margin: 0;
}
.nx-certs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.nx-cert {
display: inline-flex;
align-items: center;
gap: .7rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--pill);
padding: .9rem 1.5rem;
font-weight: 600;
color: var(--heading);
box-shadow: var(--shadow-sm);
transition: transform var(--t), border-color var(--t);
}
.nx-cert:hover {
transform: translateY(-4px);
border-color: var(--primary);
}
.nx-cert i {
color: var(--primary);
font-size: 1.2rem;
}
/* Accordion */
.nx-accordion {
display: grid;
gap: .9rem;
}
.nx-acc__item {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
overflow: hidden;
transition: box-shadow var(--t), border-color var(--t);
}
.nx-acc__item.is-open {
box-shadow: var(--shadow);
border-color: var(--primary-100);
}
.nx-acc__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
text-align: left;
padding: 1.3rem 1.6rem;
font-size: 1.12rem;
color: var(--heading);
font-weight: 600;
}
.nx-acc__icon {
flex: none;
width: 30px;
height: 30px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--primary-050);
color: var(--primary-700);
transition: transform var(--t), background var(--t), color var(--t);
font-size: .82rem;
}
.nx-acc__item.is-open .nx-acc__icon {
transform: rotate(135deg);
background: var(--primary);
color: #fff;
}
.nx-acc__a {
max-height: 0;
overflow: hidden;
transition: max-height .4s var(--ease);
}
.nx-acc__inner {
padding: 0 1.6rem 1.4rem;
}
.nx-acc__inner p {
margin: 0;
color: var(--muted);
}
/* 13. ---------------------------------------------- RESEARCH */
/* Hairline 4-up strip: cells share one border between them rather than
floating separately, using the same shared-border trick .nx-checkgrid
on our-standard.php uses — the grid draws its own top/left edge, each
step draws only its own right/bottom edge, so no line between two
adjacent cells is ever drawn twice. */
.nx-flow4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
border-radius: var(--r);
overflow: hidden;
}
.nx-flow4__step {
display: block;
background: var(--surface);
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 2rem 1.6rem;
color: inherit;
text-decoration: none;
transition: background var(--t);
}
.nx-flow4__step:hover {
background: var(--primary-050);
}
/* Solid dark disc with a plain white glyph — no gradient, no ring, unlike
the number badge this replaces. The step count now reads from the
label below it instead of being printed inside the icon. */
.nx-flow4__icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--heading);
color: #fff;
font-size: 1.1rem;
margin-bottom: 1.1rem;
}
.nx-flow4__steplabel {
display: block;
font-weight: 700;
font-size: .78rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: .3rem;
}
.nx-flow4__step h3 {
margin-bottom: .5rem;
}
.nx-flow4__short {
color: var(--muted);
line-height: 1.5;
margin: 0;
}
/* The single connector for the whole sequence, replacing the old dashed
backdrop line plus one arrow icon per gap between cards. A plain static
block below the strip rather than something absolutely positioned over
it, since there is no longer a row of separate floating cards for it to
thread between. */
.nx-science-journey {
position: relative;
gap: 20px;
padding: 30px 0 12px;
border: 0;
border-radius: 0;
overflow: visible;
}
.nx-science-journey::before {
content: '';
position: absolute;
top: 6px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--primary), #a9c9e9 70%, var(--accent));
transform-origin: left;
}
.nx-science-journey .nx-flow4__step {
position: relative;
display: flex;
flex-direction: column;
isolation: isolate;
padding: clamp(24px, 2.5vw, 38px);
border: 1px solid #dce5ef;
border-radius: 24px;
background: linear-gradient(145deg, #fff 25%, #eff5fc);
box-shadow: 0 12px 32px rgba(24, 62, 106, .06);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.nx-science-journey .nx-flow4__step::before {
content: '';
position: absolute;
top: -31px;
left: 38px;
width: 14px;
height: 14px;
border: 3px solid #fff;
border-radius: 50%;
background: var(--primary);
box-shadow: 0 0 0 1px #bad0e7;
}
.nx-science-journey .nx-flow4__step:last-child::before {
background: var(--accent);
}
.nx-science-journey__number {
position: absolute;
top: 15px;
right: 22px;
z-index: -1;
font-size: clamp(64px, 6vw, 90px);
font-weight: 700;
line-height: 1;
color: #dce7f3;
letter-spacing: -.06em;
}
.nx-science-journey .nx-flow4__icon {
width: 58px;
height: 58px;
margin-bottom: 32px;
border-radius: 18px;
background: linear-gradient(145deg, #3268a5, #173a64);
box-shadow: 0 8px 18px #234f7d26, inset 0 1px 0 #ffffff40;
transition: background .3s ease;
}
.nx-science-journey .nx-flow4__step h3 {
color: #153857;
}
.nx-science-journey .nx-flow4__short {
color: #4b6075;
line-height: 1.7;
margin-bottom: 28px;
}
.nx-science-journey__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 18px;
border-top: 1px solid #dce5ef;
color: var(--primary);
font-size: .8rem;
font-weight: 700;
}
.nx-science-journey__link i {
transition: transform .3s ease;
}
.nx-science-journey .nx-flow4__step:is(:hover, :focus-visible) {
transform: none;
border-color: #86acd4;
box-shadow: 0 20px 44px #163c6821;
}
.nx-science-journey .nx-flow4__step:focus-visible {
outline: 3px solid var(--primary);
outline-offset: 5px;
}
.nx-science-journey .nx-flow4__step:is(:hover, :focus-visible) .nx-flow4__icon {
background: var(--secondary-green-600);
transform: none;
}
.nx-science-journey .nx-flow4__step:is(:hover, :focus-visible) .nx-science-journey__link i {
transform: translateX(4px);
}
@media (prefers-reduced-motion: no-preference) {
.nx-science-journey.is-visible::after {
content: '';
position: absolute;
top: 3px;
left: 0;
width: 60px;
height: 8px;
border-radius: 50%;
pointer-events: none;
background: linear-gradient(90deg, transparent, #6ca7e3, #e92536);
box-shadow: 0 0 14px #6ca7e380;
animation: nx-science-travel 5s linear infinite;
}
.nx-science-journey.is-visible .nx-flow4__step::before {
animation: nx-science-pulse 3s ease-in-out infinite;
animation-delay: calc(var(--step) * .5s);
}
.nx-science-journey.is-visible .nx-science-journey__number {
animation: nx-science-glow 5s ease-in-out infinite;
animation-delay: calc(var(--step) * -.8s);
}
.nx-science-journey.is-motion-paused::after,
.nx-science-journey.is-motion-paused .nx-flow4__icon i,
.nx-science-journey.is-motion-paused .nx-flow4__step::before,
.nx-science-journey.is-motion-paused .nx-science-journey__number {
animation-play-state: paused;
}
@keyframes nx-science-travel {
0% {
left: 0;
opacity: 0;
}
8%,
92% {
opacity: 1;
}
100% {
left: calc(100% - 60px);
opacity: 0;
}
}
@keyframes nx-science-float {
0%,
100% {
transform: translateY(2px) rotate(-5deg);
}
50% {
transform: translateY(-4px) rotate(5deg);
}
}
@keyframes nx-science-pulse {
0%,
100% {
box-shadow: 0 0 0 1px #bad0e7;
}
50% {
box-shadow: 0 0 0 7px #bad0e730, 0 0 16px #3268a54d;
}
}
@keyframes nx-science-glow {
0%,
100% {
opacity: .55;
}
50% {
opacity: 1;
}
}
.nx-science-journey.is-visible::before {
animation: nx-science-line 1.8s ease both;
}
.nx-science-journey.is-visible .nx-flow4__step {
animation: nx-science-arrive .7s ease backwards;
animation-delay: calc(var(--step) * .16s);
}
@keyframes nx-science-line {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
@keyframes nx-science-arrive {
from {
opacity: 0;
transform: translateY(22px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}
.nx-science-motion {
display: block;
margin: 16px 0 0 auto;
padding: 8px 14px;
border: 1px solid #dce5ef;
border-radius: 30px;
background: #fff;
color: var(--primary);
font: inherit;
font-size: .78rem;
cursor: pointer;
}
.nx-science-motion:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.nx-science-motion {
display: none;
}
}
@media (max-width: 1100px) {
.nx-science-journey {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.nx-science-journey::before,
.nx-science-journey::after,
.nx-science-journey .nx-flow4__step::before {
display: none;
}
}
@media (max-width: 600px) {
.nx-science-journey {
grid-template-columns: 1fr;
padding-top: 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.nx-science-journey *,
.nx-science-journey *::before {
transition: none !important;
animation: none !important;
}
}
.nx-flow4__line {
display: block;
height: 3px;
margin-top: 1.6rem;
border-radius: 2px;
background: repeating-linear-gradient(90deg, var(--primary-100) 0 10px, transparent 10px 20px);
}
/* Innovation videos — featured player + thumbnail rail.
The featured player is one dark card in two panels: a meta panel
(category kicker + title) and a frame holding the actual