/* ============================================================
DDT — Website Revamp ("Website DDT" frame)
Design tokens mapped 1:1 from Figma variables.
============================================================ */
:root {
/* ---- Colors ---- */
--color-surface-default: #ffffff;
--color-surface-brand-primary: #4a3dcc;
--color-surface-brand-secondary: #29ccb2;
--color-background-default: #fafafa;
--color-text-primary: #111827;
--color-text-secondary: #4b5563;
--color-text-tertiary: #6b7280;
--color-text-muted: #9ca3af;
--color-text-inverse: #ffffff;
--color-text-brand-primary: #4a3dcc;
--color-text-brand-secondary: #24b39d;
--color-text-error: #ef4444;
--color-surface-strong: #f3f4f6;
--color-surface-brand-primary-subtle: #eceafb;
--color-surface-brand-secondary-subtle: #e4f9f6;
--color-icon-inverse: #ffffff;
--color-border-white: #ffffff;
--color-border-default: #e5e7eb;
--color-border-primary-subtle: #bdb6f0;
--color-border-secondary-subtle: #98e8dc;
/* ---- Spacing scale ---- */
--space-none: 0px;
--space-xss: 4px;
--space-xs: 8px;
--space-s: 12px;
--space-m: 16px;
--space-l: 20px;
--space-xl: 24px;
--space-3xl: 40px;
--space-6xl: 80px;
--space-7xl: 96px;
--space-padding: 120px;
/* fluid section side padding: 96px at >=1440, scales down to 20px */
--pad-x: clamp(20px, 6.6667vw, 96px);
/* fluid vertical padding for the About intro: 120px at desktop -> 64px */
--pad-y: clamp(64px, 8.333vw, 120px);
/* ---- Radius ---- */
--radius-xs: 4px;
--radius-s: 8px;
--radius-m: 12px;
/* button corner radius — aliased so the small icon tiles that sit inside
buttons keep the tighter 4px and only the button surface changes */
--radius-btn: var(--radius-s);
--radius-full: 999px;
/* ---- Font families ---- */
--font-heading: "Geologica", sans-serif;
--font-label: "Geologica", sans-serif;
--font-button: "Geologica", sans-serif;
--font-body: "Inter", sans-serif;
/* ---- Nav heights ---- */
--nav-h: 80px;
--nav-h-scrolled: 80px;
}
/* ============================================================
Reset
============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--color-background-default);
color: var(--color-text-primary);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
p { margin: 0; }
/* ============================================================
Type styles (from Figma text styles)
Big headings use clamp() so they stay exact at 1440 and
scale down fluidly. Line-height is unitless and letter-
spacing is in em, so both track the fluid font size.
============================================================ */
.t-display {
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(28px, 4.4444vw, 64px);
line-height: 1.125;
letter-spacing: -0.01em;
}
.t-h1 {
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(30px, 3.3333vw, 48px);
line-height: 1.1667;
letter-spacing: -0.01em;
}
.t-h2 {
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(26px, 2.7778vw, 40px);
line-height: 1.2;
letter-spacing: -0.01em;
}
.t-h5 {
font-family: var(--font-heading);
font-weight: 500;
font-size: 20px;
line-height: 1.4;
letter-spacing: 0;
}
.t-body-large {
font-family: var(--font-body);
font-weight: 400;
font-size: 18px;
line-height: 1.5556;
letter-spacing: 0;
}
.t-body-medium {
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0;
}
.t-button-large {
font-family: var(--font-button);
font-weight: 600; /* SemiBold */
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.08px;
}
.t-caption-medium {
font-family: var(--font-label);
font-weight: 400;
font-size: 12px;
line-height: 1.3333;
letter-spacing: 0.06px;
}
.t-caption-large {
font-family: var(--font-label);
font-weight: 600; /* SemiBold */
font-size: 14px;
line-height: 1.4286; /* 20 */
letter-spacing: 0.003em;
}
/* ============================================================
Site shell — full-width, fluid
============================================================ */
.site {
width: 100%;
margin: 0 auto;
overflow-x: clip;
}
/* ============================================================
Buttons (shared component)
============================================================ */
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
height: 48px;
border-radius: var(--radius-btn);
border: none;
cursor: pointer;
white-space: nowrap;
overflow: hidden; /* clip the bulb sweep to the button */
}
.btn > * { position: relative; z-index: 1; } /* label + tile sit above the bulb */
/* filled white button with brand icon tile */
.btn--solid {
background: var(--color-surface-default);
padding: var(--space-s) var(--space-xs) var(--space-s) var(--space-s);
}
.btn--solid .btn__label { color: var(--color-text-brand-primary); transition: color .3s ease; }
/* purple button (e.g. "Our Company") — has a brand outline so it stays visible
once the white fill covers it. Reusable for all purple buttons. */
.btn--purple {
background: var(--color-surface-brand-primary);
border: 1px solid var(--color-surface-brand-primary);
padding: var(--space-s) var(--space-xs) var(--space-s) var(--space-s);
}
.btn--purple .btn__label { color: var(--color-text-inverse); transition: color .3s ease; }
.btn--purple .btn__tile {
background: var(--color-surface-default);
color: var(--color-text-brand-primary); /* brand arrow on the white tile */
}
/* fill — a colour spreads out FROM the arrow tile to flood the whole button
(the arrow box is the "source" of the water) */
.btn--solid::before,
.btn--purple::before {
content: "";
position: absolute;
z-index: 0;
top: 50%;
right: 8px; /* centred over the arrow tile (button pr = 8) */
width: 32px;
height: 32px;
margin-top: -16px;
border-radius: 50%;
transform: scale(0);
transform-origin: center;
transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
.btn--solid::before { background: var(--color-surface-brand-primary); } /* purple floods the white button */
.btn--purple::before { background: var(--color-surface-default); } /* white floods the purple button */
.btn--solid:hover::before,
.btn--purple:hover::before { transform: scale(16); }
.btn--solid:hover .btn__label { color: var(--color-text-inverse); }
.btn--purple:hover .btn__label { color: var(--color-text-brand-primary); }
/* On phones every CTA button fills the width — the nav bar's own buttons are the
only exception. The CTA action rows also stack + stretch, so a button never
hugs its content inside a flex-start parent. */
@media (max-width: 620px) {
.hero__actions, .coHero__actions, .caHero__actions, .finHero__actions,
.lifeHero__actions, .solDHero__actions, .coGrow__actions, .lastCta__actions,
.caps__footerCta, .promo__actions, .srvPromo__actions, .navPromo__actions {
flex-direction: column; align-items: stretch; align-self: stretch; width: 100%;
}
.btn:not(.nav__cta):not(.nav__item--btn),
.solHero__btn { width: 100%; }
}
/* outlined (white border) button */
.btn--outline {
background: transparent;
border: 1px solid var(--color-border-white);
padding: var(--space-s) var(--space-xl);
}
.btn--outline .btn__label { color: var(--color-text-inverse); transition: color .3s ease; }
/* fluid fill rising from the bottom (no arrow tile here, so bottom-to-top) */
.btn--outline::before {
content: "";
position: absolute;
z-index: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
background: var(--color-surface-default);
transform: scaleY(0);
transform-origin: bottom;
transition: transform .5s cubic-bezier(.25, .8, .4, 1);
}
.btn--outline:hover::before { transform: scaleY(1); }
.btn--outline:hover .btn__label { color: var(--color-text-brand-primary); }
/* the 32x32 icon tile — clips the swapping arrows */
.btn__tile {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-xs);
background: var(--color-surface-brand-primary);
color: var(--color-icon-inverse); /* arrow inherits via currentColor */
flex: none;
overflow: hidden;
}
.btn__arrows { position: relative; width: 24px; height: 24px; }
.icon-arrow {
position: absolute;
inset: 0;
width: 24px;
height: 24px;
display: block;
transition: transform .4s cubic-bezier(.45, 0, .2, 1);
}
/* arrow A visible; arrow B waits at bottom-left */
.icon-arrow--b { transform: translate(-100%, 100%); }
/* on hover: A exits to top-right, B slides in from bottom-left (alternating) */
.btn:hover .icon-arrow--a { transform: translate(100%, -100%); }
.btn:hover .icon-arrow--b { transform: translate(0, 0); }
:focus-visible { outline: 2px solid var(--color-border-white); outline-offset: 3px; }
/* ============================================================
Nav — fixed, swaps to a white "scrolled" state
============================================================ */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
height: var(--nav-h);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--pad-x);
background: transparent;
transition: height .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.nav__brand { display: flex; align-items: center; }
.nav__logo { width: 111px; height: 48px; }
.nav__logo--dark { display: none; }
.nav__menu {
display: flex;
align-items: stretch;
height: 100%;
}
.nav__item {
display: flex;
align-items: center;
gap: var(--space-xs);
height: 100%;
padding: 0 var(--space-l);
color: var(--color-text-inverse);
}
.icon-plus {
width: 16px;
height: 16px;
flex: none;
display: inline-block;
color: currentColor;
}
.nav__actions {
display: flex;
align-items: center;
gap: var(--space-xss);
justify-content: flex-end;
}
/* own compositing layer so the fill pseudo-element repaints cleanly inside
the fixed nav (fixes a purple paint ghost on un-hover) */
.nav__cta { transform: translateZ(0); }
/* ---- scrolled state (Figma "Nav / Variant2") ---- */
.nav--scrolled {
height: var(--nav-h-scrolled);
background: var(--color-surface-default);
}
/* shadow is driven by actual scrolling, not just the solid state, so white-nav
interior pages (Life, Who We Serve) sit flat at the very top and only cast a
shadow once the page scrolls */
.nav--shadow {
box-shadow: 0 1px 0 rgba(17, 24, 39, 0.06), 0 6px 20px rgba(17, 24, 39, 0.05);
}
.nav--scrolled .nav__logo--light { display: none; }
.nav--scrolled .nav__logo--dark { display: block; }
.nav--scrolled .nav__item { color: var(--color-text-primary); }
.nav--scrolled .nav__item .icon-plus { color: var(--color-text-brand-primary); }
.nav--scrolled .nav__cta { background: var(--color-surface-brand-primary); }
.nav--scrolled .nav__cta .btn__label { color: var(--color-text-inverse); font-weight: 600; }
.nav--scrolled .nav__cta .btn__tile {
background: var(--color-surface-default);
color: var(--color-text-brand-primary); /* arrow turns brand on the white tile */
}
/* scrolled button is already brand — its bulb spreads white instead */
/* ============================================================
Hero — full viewport height
============================================================ */
.hero {
position: relative;
height: 100vh;
min-height: 640px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: var(--space-none) var(--pad-x) var(--space-6xl);
overflow: hidden;
isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
position: absolute;
inset: 0;
z-index: -1;
background: rgba(0, 0, 0, 0.64); /* flat wash across the whole photo, not just the edges */
}
.hero__navspace { height: var(--nav-h); width: 100%; flex: none; }
/* Centered hierarchy (Figma "Hero Section", 35128:52945): the text/CTA
block sits centered in the space under the nav, with the (real, visible)
partner-logo row hugging the bottom — re-arranged from the old
left-aligned/two-column layout, same content and assets throughout. */
.hero__content {
flex: 1 1 auto;
min-height: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-3xl);
}
.hero__col {
flex: 1 1 auto;
min-width: 0;
width: 100%;
max-width: 612px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 32px; /* content block -> buttons */
}
.hero__text {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xl); /* headblock -> lead */
}
/* the hero's own partner-logo strip: real + visible now (it doubles as the
scroll anchor .chosen's logos fly from — see setupChosen() in main.js,
unchanged) instead of only a hidden measurement reference. */
.hero__spacer { flex: none; width: 100%; max-width: 1248px; }
.hero__spacer .heroLogos { height: auto; align-items: center; padding-bottom: 0; }
.hero__headblock {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
}
/* badge — 8px gap between the dot and the text */
.hero__badge {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
align-self: center;
padding: var(--space-xs) var(--space-m) var(--space-xs) var(--space-s);
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.12);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
color: var(--color-text-inverse);
}
.hero__badge .t-caption-medium { font-weight: 600; font-size: 14px; } /* semibold caption, 14px */
/* laurel wreaths flanking the tagline (Figma 35493:122463); 27x40 marks
drawn white, one each side of the text. The exported SVGs are the raw
(un-transformed) branches; Figma applies a transform per side so both
curve UP and open toward the text — reproduced here: left flips
vertically, right rotates a half-turn (matches the frame's node
transforms exactly). */
.hero__badge-laurel { flex: none; width: 27px; height: 40px; display: block; }
/* the display:block above would otherwise beat the HTML `hidden` attribute
(whose UA rule is only `display:none`), so honour hidden explicitly */
.hero__badge-laurel[hidden] { display: none; }
.hero__badge-laurel--l { transform: scaleY(-1); }
.hero__badge-laurel--r { transform: rotate(180deg); }
.hero__badge-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-text-inverse);
flex: none;
animation: badge-dot-pulse 2.4s ease-in-out infinite; /* slow show/hide fade loop */
}
@keyframes badge-dot-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.15; }
}
.hero__title { color: var(--color-text-inverse); margin: 0; text-align: center; }
/* each line is its own no-wrap unit so the manual
always lands exactly
where authored ("Business Forward" stays the second line) instead of the
first half silently wrapping again inside its own line at narrower widths */
.hero__titleLine { display: inline-block; white-space: nowrap; }
.hero__lead { color: var(--color-text-inverse); margin: 0; text-align: center; }
.hero__actions {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
}
/* On tablets/phones the tall viewport strands the bottom logo row far below the
centred content (Figma's desktop "logos hug the bottom" turns into a big gap).
Keep the hero full-height, but group the content + logos and centre them so
the logos sit just under the copy instead of at the very bottom. Desktop
(>900) keeps the Figma "logos hug the bottom" layout. */
@media (max-width: 900px) {
.hero { justify-content: center; padding-top: var(--nav-h); }
.hero__navspace { display: none; }
/* the logos live inside .hero__content, so their gap from the buttons is set
here (not on .hero); give them clear separation */
.hero__content { flex: 0 1 auto; gap: clamp(64px, 11vh, 104px); }
}
/* ============================================================
Scrolling logos
============================================================ */
.logos {
position: relative;
height: 120px;
background: var(--color-surface-default);
overflow: hidden;
}
/* static, size-to-fit logo row (mirrors the homepage hero; main.js sizes it) */
.logo--shinhan { height: 40px; }
.logo--tokomama { height: 48px; }
.logo--nobu { height: 36px; }
.logo--zurich { height: 40px; }
.logo--zu { height: 36px; }
@keyframes logos-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* the old white overlay panels are superseded by the mask on .logos__viewport */
/* ============================================================
About Us
============================================================ */
.about { background: var(--color-surface-default); }
.about__intro {
position: relative;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--space-3xl);
align-content: center; /* centre the block, biased slightly upward via extra bottom padding */
align-items: start; /* keep the label aligned to the top of the body */
min-height: 100vh;
padding: var(--pad-y) var(--pad-x) calc(var(--pad-y) + 12vh);
}
/* hover-revealed checkerboard behind the About content */
.about__grid {
position: absolute;
inset: 0;
z-index: 0;
display: grid;
overflow: hidden;
pointer-events: none; /* text stays selectable; hover is tracked on the section */
}
.about__cell {
opacity: 0;
transition: opacity .5s ease;
will-change: opacity;
}
.about__cell--a { background: var(--color-surface-brand-primary); }
.about__cell--b { background: var(--color-surface-brand-secondary); }
/* keep the text above the grid */
.about__label, .about__body { position: relative; z-index: 1; }
.about__label {
grid-column: span 4; /* 4 of 12 */
min-width: 0;
display: flex;
align-items: center;
gap: var(--space-xs);
}
.about__label img { width: 16px; height: 16px; flex: none; }
.about__label-text {
font-family: var(--font-heading);
font-weight: 700;
font-size: 20px;
line-height: 1.4;
color: var(--color-text-brand-primary);
white-space: nowrap;
}
.about__body {
grid-column: span 8; /* 8 of 12 */
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-xl);
}
.about__statement { margin: 0; color: var(--color-text-primary); }
.about__statement em { font-style: italic; }
.about__statement .is-brand { color: var(--color-text-brand-primary); }
.about__statement .is-teal { color: var(--color-text-brand-secondary); }
.about__statement .is-bold { font-weight: 700; }
.about__paragraph {
margin: 0;
color: var(--color-text-secondary);
opacity: 0.8;
}
.about__cta { align-self: flex-start; } /* hug, don't stretch to full column width */
/* ---- Counter band (hug height) ---- */
.counter {
position: relative;
padding: var(--space-padding) var(--pad-x) var(--space-3xl); /* 120 / 40 */
background: var(--color-surface-brand-primary);
overflow: hidden;
}
.counter .stats { position: relative; z-index: 1; } /* full-width row over the texture */
/* ---- Statement — pinned scroll sequence ---- */
.statement {
position: relative;
/* Scroll length that drives the sequence. The pin is 100vh, so the
scrubbable travel is (height - 100vh) and every stage in
hologramUpdate() is expressed as a fraction of it — changing this
number rescales the whole sequence without altering the choreography.
Was 380vh (2.8 screens of travel); 200vh keeps the same beats in
1 screen of travel, roughly two scrolls shorter. */
height: 200vh;
background: var(--color-surface-brand-primary);
}
.statement__pin {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: var(--pad-y) var(--pad-x);
background: var(--color-surface-brand-primary);
}
.counter__texture,
.statement__texture {
position: absolute;
inset: 0;
background-image: var(--texture);
background-size: 1024px 1024px;
background-position: top left;
background-repeat: repeat;
opacity: 0.08;
pointer-events: none;
z-index: 0;
}
/* hand holograms — full-bleed canvas; hands are anchored so wrists sit
off-screen (bottom-left + top-right) and never show a cut edge */
.handCanvas {
position: absolute;
inset: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
pointer-events: none; /* cursor is tracked on the pin */
will-change: opacity;
filter:
drop-shadow(0 0 4px rgba(205, 235, 255, 0.55))
drop-shadow(0 0 14px rgba(130, 175, 255, 0.35));
}
/* transition light that grows from the centre */
.statement__light {
position: absolute;
z-index: 3;
left: 50%;
top: 50%;
width: 60px;
height: 60px;
border-radius: 50%;
background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0.92) 34%, rgba(255, 255, 255, 0) 70%);
transform: translate(-50%, -50%) scale(0);
opacity: 0;
pointer-events: none;
will-change: transform, opacity;
}
/* ---- Counter row ---- */
.stats {
position: relative;
display: flex;
align-items: center;
justify-content: space-between; /* hug items, balanced left↔right */
}
.stats__item {
position: relative;
flex: 0 0 auto; /* hug content */
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-l);
color: var(--color-text-inverse);
}
.stats__value { margin: 0; font-variant-numeric: tabular-nums; }
.stats__label { margin: 0; } /* 100% opacity (was 80%) */
/* ---- Closing statement — centred over the hologram ---- */
.closing {
position: relative;
z-index: 2; /* above the hologram */
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.closing__text {
position: relative;
flex: 1 1 0;
min-width: 0;
margin: 0;
text-align: center;
color: var(--color-text-inverse);
}
/* two lines: lead on line 1, revealed phrase on line 2 */
.closing__lead,
.closing__reveal { display: block; }
/* second line — opacity is scroll-scrubbed by JS (no transition lag) */
.closing__reveal { opacity: 0; }
/* ---- Placeholder blank section (extra scroll room; content TBD) ---- */
.placeholder {
min-height: 100vh;
background: var(--color-surface-default);
}
/* ============================================================
Entrance animations — nav + hero fade in together on load
============================================================ */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: none; }
}
.nav { animation: fadeInDown .7s ease both; }
.hero__badge { animation: fadeInUp .8s ease both .18s; }
.hero__title { animation: fadeInUp .8s ease both .30s; }
.hero__lead { animation: fadeInUp .8s ease both .44s; }
.hero__actions{ animation: fadeInUp .8s ease both .58s; }
/* ============================================================
Scroll char-reveal (About paragraphs)
============================================================ */
.reveal-text .char { will-change: opacity; }
/* ============================================================
Reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
.logos__track { animation: none; }
.btn--solid, .btn--outline, .btn--purple, .nav { transition: none; }
.btn--solid::before, .btn--purple::before, .btn--outline::before, .icon-arrow,
.btn--solid .btn__label, .btn--purple .btn__label, .btn--outline .btn__label { transition: none; }
.nav, .hero__badge, .hero__title, .hero__lead, .hero__actions { animation: none; }
.hero__badge-dot { animation: none; opacity: 1; }
.reveal-text .char { opacity: 1 !important; }
.closing__text { transform: none !important; transition: none; }
.closing__reveal { opacity: 1 !important; }
html { scroll-behavior: auto; }
}
/* ============================================================
Responsive layout
Type scales fluidly via clamp(); these breakpoints handle
the column/row structure. Figma provided desktop frames
only, so below 1440 the structure stacks in the obvious way
(a fallback, not a separate mobile design).
============================================================ */
@media (max-width: 900px) {
.nav__menu { display: none; }
.about__intro {
grid-template-columns: 1fr;
min-height: auto;
align-content: start;
gap: var(--space-l);
padding-bottom: var(--pad-y);
}
.about__label, .about__body { grid-column: auto; }
/* collapse the pinned sequence on small screens */
.statement { height: auto; }
.statement__pin { position: static; height: auto; min-height: 100vh; }
.closing__reveal { opacity: 1 !important; }
.stats { flex-wrap: wrap; row-gap: var(--space-6xl); column-gap: var(--space-xl); }
.stats__item { flex: 1 1 40%; align-items: center; text-align: center; }
/* match the Our Story (company) counter sizing on phones: bigger number,
balanced label, centred */
.counter .stats__value { font-size: clamp(40px, 12vw, 52px); }
.counter .stats__label { font-size: clamp(17px, 4.8vw, 20px); }
}
@media (max-width: 560px) {
.hero { padding-bottom: var(--space-3xl); }
.hero__actions { flex-wrap: wrap; }
.hero__actions .btn { flex: 1 1 auto; }
.stats__item { flex: 1 1 100%; }
.nav__actions .nav__item { display: none; } /* keep only the Contact button tight on phones */
}
/* ============================================================
NEW SECTIONS (Capabilities / Industries / Testimonials /
FAQ / Last CTA) — appended; nothing above is modified.
============================================================ */
/* extra type styles from the Figma scale */
.t-h3 {
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(24px, 2.2222vw, 32px);
line-height: 1.375;
letter-spacing: -0.005em;
}
.t-h4 {
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(20px, 1.6667vw, 24px);
line-height: 1.3333;
letter-spacing: -0.005em;
}
/* shared emphasis (same tokens the About statement uses) */
em.is-brand { color: var(--color-text-brand-primary); font-style: italic; }
em.is-teal { color: var(--color-text-brand-secondary); font-style: italic; }
em.is-bold { font-weight: 700; }
/* shared tagline pill */
.pill {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-m);
border: 1px solid #e5e7eb;
border-radius: var(--radius-full);
background: var(--color-surface-default);
box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.06);
font-family: var(--font-label);
font-weight: 600;
font-size: 14px;
line-height: 1.4286;
letter-spacing: 0.03px;
color: var(--color-text-primary);
white-space: nowrap;
}
/* ---------------- Our Capabilities ---------------- */
.caps {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3xl);
padding: var(--space-padding) var(--pad-x);
background: var(--color-surface-default);
}
.caps__header {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-l);
width: 100%;
}
.caps__title { margin: 0; text-align: center; color: var(--color-text-primary); }
.caps__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px; /* cards are separated in the updated design */
width: 100%;
padding: var(--space-l);
border-radius: 12px;
background: var(--color-background-default);
}
.capCard {
grid-column: span 2; /* bottom row: three cards */
display: flex;
flex-direction: column;
min-height: 520px;
background: var(--color-surface-default);
overflow: hidden; /* clip the card media (orbit, beam, scan) */
}
/* top row: two wide cards */
.caps__grid > .capCard:nth-child(1),
.caps__grid > .capCard:nth-child(2) { grid-column: span 3; }
.caps__grid > .capCard:nth-child(1) { border-top-left-radius: 8px; }
.caps__grid > .capCard:nth-child(2) { border-top-right-radius: 8px; }
.caps__grid > .capCard:nth-child(3) { border-bottom-left-radius: 8px; }
.caps__grid > .capCard:nth-child(5) { border-bottom-right-radius: 8px; }
.capCard__media { position: relative; flex: 1 1 auto; min-height: 160px; overflow: hidden; }
.capCard__body {
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding: var(--space-xl);
}
.capCard__title { margin: 0; color: var(--color-text-primary); }
.capCard__desc { margin: 0; color: var(--color-text-secondary); }
.capCard__tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs);
margin: 0;
}
.capCard__tags span {
display: inline-flex;
align-items: center;
font-family: var(--font-label);
font-weight: 600;
font-size: 12px;
line-height: 1.3333;
letter-spacing: 0.06px;
color: var(--color-text-brand-primary);
white-space: nowrap;
}
.capCard__tags span + span::before {
content: "";
width: 4px; height: 4px;
border-radius: 50%;
background: var(--color-text-brand-primary);
margin-right: var(--space-xs);
flex: none;
}
/* ================= Capability card visuals ================= */
/* ---- Card 1: Platform Integration — orbiting tech logos ----
concentric rings, a stack core, and three rotating layers whose logos
revolve like planets. Alternate layers spin opposite ways; each badge
counter-rotates so the mark stays upright. */
.capOrbit { display: block; }
.capOrbit__ring {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px solid rgba(74, 61, 204, .13);
}
.capOrbit__ring--1 { width: 208px; height: 208px; }
.capOrbit__ring--2 { width: 360px; height: 360px; }
.capOrbit__ring--3 { width: 560px; height: 560px; }
.capOrbit__ring--4 { width: 704px; height: 704px; border-style: dashed; border-color: rgba(74, 61, 204, .08); }
.capOrbit__core {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 64px; height: 64px;
display: grid; place-items: center;
border-radius: 50%;
background: radial-gradient(circle at 50% 40%, #f0edff, #e3ddff);
box-shadow: 0 10px 26px rgba(74, 61, 204, .22);
z-index: 2;
}
.capOrbit__core img { width: 30px; height: 30px; object-fit: contain; }
.capOrbit__spin {
position: absolute;
inset: 0;
transform-origin: 50% 50%;
}
.capOrbit__spin--cw { animation: capOrbitCW var(--dur, 40s) linear infinite; }
.capOrbit__spin--ccw { animation: capOrbitCCW var(--dur, 40s) linear infinite; }
.capOrbit__arm {
position: absolute;
left: 50%; top: 50%;
width: 0; height: 0;
transform: rotate(var(--a)) translateX(var(--r));
}
.capOrbit__cnt { position: absolute; left: 0; top: 0; }
.capOrbit__spin--cw .capOrbit__cnt { animation: capOrbitCCW var(--dur, 40s) linear infinite; }
.capOrbit__spin--ccw .capOrbit__cnt { animation: capOrbitCW var(--dur, 40s) linear infinite; }
.capBadge {
position: absolute;
left: 0; top: 0;
width: 50px; height: 50px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--tint, #eef2ff);
box-shadow: 0 6px 16px rgba(17, 24, 39, .10);
transform: translate(-50%, -50%) rotate(calc(-1 * var(--a)));
}
.capBadge img { width: 54%; height: 54%; object-fit: contain; display: block; }
@keyframes capOrbitCW { to { transform: rotate(360deg); } }
@keyframes capOrbitCCW { to { transform: rotate(-360deg); } }
/* ---- Card 2: AI & Automation — logos scroll behind the DDT mark ---- */
.capAi { display: grid; place-items: center; }
.capAi__beam {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
height: 110%; width: auto;
z-index: 0;
opacity: .85;
}
/* a soft, static glow behind the mark (no pulsing) */
.capAi__glow {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 240px; height: 100%;
background: radial-gradient(ellipse 46% 52% at 50% 50%, rgba(74, 61, 204, .3), rgba(36, 179, 157, .15) 56%, transparent 74%);
filter: blur(16px);
z-index: 0;
}
/* when the section scrolls off-screen, freeze its running animations so they
stop burning GPU/CPU behind the scenes */
.caps.is-rest .capOrbit__spin,
.caps.is-rest .capOrbit__cnt,
.caps.is-rest .capAi__row { animation-play-state: paused; }
.capAi__marquee {
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 100%;
overflow: hidden;
z-index: 1;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
/* per-logo margin (not flex gap) so the row is exactly 2x a set INCLUDING its
trailing gap — then translateX(-50%) lands the duplicate perfectly on the
original and the loop is seamless (a flex `gap` leaves a half-gap seam) */
.capAi__row { display: flex; width: max-content; animation: capAiScroll 26s linear infinite; will-change: transform; }
.capAi__logo { flex: none; width: 52px; height: 52px; margin-right: 48px; display: grid; place-items: center; opacity: .92; }
.capAi__logo img { width: 100%; height: 100%; object-fit: contain; }
.capAi__badge {
position: relative;
z-index: 2;
display: grid; place-items: center;
width: 148px; height: 148px; /* 1:1 square */
padding: 18px;
border-radius: 14px;
background: linear-gradient(135deg, #4a3dcc 50%, #1a164b);
box-shadow: 0 10px 12px rgba(0,0,0,.10), 0 6px 22px rgba(74,61,204,.28);
}
.capAi__badge img { width: 104px; height: auto; object-fit: contain; }
/* on tablet the card is narrower, so shrink the DDT badge to match */
@media (min-width: 621px) and (max-width: 1024px) {
.capAi__badge { width: 118px; height: 118px; padding: 14px; }
.capAi__badge img { width: 84px; }
}
/* --shift is the exact width of one logo set (set by main.js); shifting by it
lands the duplicate on the original with no sub-pixel seam */
@keyframes capAiScroll { to { transform: translateX(var(--shift, -700px)); } }
/* ---- Cards 3 & 5: Lottie animations ---- */
.capLottie { display: grid; place-items: center; padding: 8px; }
.capLottie svg, .capLottie canvas { width: 100% !important; height: 100% !important; max-height: 100%; }
.capLottie img.capMedia__svg { width: 100%; height: 100%; object-fit: contain; }
/* Enterprise map: blow it up so the globe reads large. Only the whole card clips
(rounded outer) — the media box itself does NOT clip, so nothing gets cut at the
img/text seam. */
.capCard__media.capCard__media--bleed { overflow: visible; }
.capLottie img.capMedia__svg.capGlobe { object-fit: cover; transform: scale(1.25); }
.capPhone__qr canvas, .capPhone__qr svg { width: 100% !important; height: 100% !important; }
.capPhone__qr img.capMedia__svg { width: 100%; height: 100%; object-fit: contain; }
/* ---- Card 4: Payments — phone + QR scan ---- */
.capPhone { display: grid; place-items: center; }
.capPhone__frame {
position: relative;
height: 100%;
aspect-ratio: 395 / 372;
max-width: 100%;
}
.capPhone__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* white patch over the phone's static QR + brackets, so the animated QR below
sits on a clean screen (the screen is white, so the patch is seamless) */
.capPhone__cover {
position: absolute;
left: 17%; right: 17%;
top: 24%; bottom: 16%;
background: #fff;
}
/* the animated scanning QR (Lottie) placed in the phone screen. The Lottie has
wide empty margins, so the container runs past the screen (clipped) to make
the actual QR read large */
.capPhone__qr {
position: absolute;
left: 50%; top: 58%;
width: 112%; aspect-ratio: 1;
transform: translate(-50%, -50%);
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.capOrbit__spin, .capOrbit__cnt, .capAi__row { animation: none !important; }
}
.caps__footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
max-width: 824px;
}
.caps__footerText { margin: 0; text-align: center; color: var(--color-text-primary); }
/* ---------------- Industries ---------------- */
.ind {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-6xl);
padding: var(--space-padding) 0 var(--space-padding) var(--pad-x);
background: var(--color-surface-brand-secondary);
overflow: hidden;
}
.ind__texture {
position: absolute;
inset: 0;
background-image: var(--texture);
background-size: 1024px 1024px;
background-repeat: repeat;
opacity: 0.16;
pointer-events: none;
}
.ind__header {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-l);
padding-right: var(--pad-x);
}
.ind__title { margin: 0; color: var(--color-text-inverse); }
.ind__rail {
position: relative;
display: flex;
gap: var(--space-xl);
padding-right: var(--pad-x);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.ind__rail::-webkit-scrollbar { display: none; }
.indCard {
flex: 0 0 440px;
display: flex;
flex-direction: column;
gap: var(--space-l);
height: 520px;
padding: 28px;
border-radius: var(--radius-m);
background: var(--color-surface-brand-primary);
scroll-snap-align: start;
}
.indCard__head { display: flex; align-items: center; gap: 20px; }
.indCard__title { flex: 1 1 auto; margin: 0; color: var(--color-text-inverse); }
.indCard__icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
border-radius: var(--radius-xs);
background: var(--color-surface-default);
color: var(--color-text-brand-primary);
}
.indCard__icon svg { width: 28px; height: 28px; }
/* no panel behind the mark — it sits straight on the card */
.indCard__media {
flex: 1 1 auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.indCard__media::after { content: none; }
/* the Figma pixel-art mark, drawn white on the card with a soft teal glow and a
gentle float; --fd (on the media parent) staggers each card's bob */
.indCard__illo {
position: relative;
z-index: 1;
display: block;
width: var(--illoW, clamp(120px, 42%, 180px));
height: auto;
image-rendering: auto;
filter: brightness(0) invert(1) drop-shadow(0 0 22px rgba(41, 204, 178, .42));
animation: indMediaFloat 5.5s ease-in-out infinite;
animation-delay: var(--fd, 0s);
}
@keyframes indMediaFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
.indCard__illo { animation: none; }
}
.indCard__desc { margin: 0; color: var(--color-text-inverse); }
/* ---- flowing doodle line behind the cards (Figma 35174:65393) ----
one teal stroked path; main.js sets stroke-dasharray/offset so it draws in
sync with the horizontal scroll, flowing top-right down to bottom-left */
.ind__doodle {
position: absolute;
left: 50%;
top: 50%;
width: min(1462px, 106%);
height: auto;
transform: translate(-50%, -50%);
z-index: 0;
pointer-events: none;
overflow: visible;
}
.ind__doodlePath {
fill: none;
stroke: #29ccb2;
stroke-width: 44;
stroke-linecap: round;
stroke-linejoin: round;
}
/* keep the heading and card rail above the doodle */
.ind--rail .ind__header--top,
.ind--rail .ind__rail { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
/* no draw: show the line fully so the section still reads as designed */
.ind__doodlePath { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}
/* the doodle rides the pinned desktop scroll; the mobile rail isn't pinned, so
drop it there rather than let the absolute line float out of place */
@media (max-width: 900px) {
.ind__doodle { display: none; }
}
/* ---------------- Testimonials ---------------- */
.tst {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3xl);
padding: var(--space-padding) var(--pad-x);
background: var(--color-surface-default);
}
.tst__header {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-l);
width: 100%;
}
.tst__title { margin: 0; text-align: center; color: var(--color-text-primary); }
.tst__stage {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3xl);
padding: var(--space-6xl) clamp(24px, 8vw, 120px);
border-radius: 16px;
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 75%, rgba(0,0,0,.32)), url("assets/testimonial-field.jpg");
background-size: cover;
background-position: center;
}
.tst__carousel {
display: flex;
align-items: center;
gap: var(--space-3xl);
width: 100%;
}
.tst__arrow {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-s);
border: none;
border-radius: var(--radius-full);
background: var(--color-surface-default);
color: var(--color-text-primary);
cursor: pointer;
transition: transform .2s ease;
}
.tst__arrow:hover { transform: scale(1.08); }
.tst__arrow svg { width: 24px; height: 24px; display: block; }
.tst__viewport {
flex: 1 1 auto;
min-width: 0;
padding: var(--space-xl);
border-radius: 24px;
background: rgba(255,255,255,.1);
overflow: hidden;
}
.tst__track {
display: flex;
transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.tstCard {
flex: 0 0 100%;
display: flex;
flex-direction: column;
gap: var(--space-3xl);
margin: 0;
padding: var(--space-3xl);
border-radius: 16px;
background: var(--color-surface-default);
}
.tstCard__metric { display: flex; flex-direction: column; gap: var(--space-xss); }
.tstCard__metricLabel { color: #6b7280; }
.tstCard__metricValue { color: var(--color-text-primary); }
.tstCard__quote { margin: 0; color: var(--color-text-primary); }
.tstCard__person { display: flex; align-items: center; gap: var(--space-s); }
.tstCard__person > span { display: flex; flex-direction: column; gap: var(--space-xss); }
.tstCard__avatar { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex: none; }
.tstCard__name { color: var(--color-text-primary); }
.tstCard__role { color: #6b7280; }
.tst__dots { display: flex; align-items: center; gap: var(--space-xs); }
.tst__dots button {
width: 8px; height: 8px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255,255,255,.5);
cursor: pointer;
transition: width .3s ease, background-color .3s ease;
}
/* active pill is a progress track; main.js fills it (--tp: 0→1) as the card ages,
so it reads as a smooth 2s countdown that hands off to the next dot */
.tst__dots button.is-active {
width: 44px;
border-radius: 999px;
background: rgba(255, 255, 255, .32);
position: relative;
overflow: hidden;
}
.tst__dots button.is-active::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: #fff;
transform-origin: left center;
transform: scaleX(0);
/* compositor-driven fill — stays smooth even when the main thread is busy */
animation: tstFill var(--tst-dur, 4000ms) linear forwards;
}
.tst__dots.is-paused button.is-active::after { animation-play-state: paused; }
@keyframes tstFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
.tst__dots button.is-active { background: #fff; }
.tst__dots button.is-active::after { display: none; }
}
/* ---------------- FAQ ---------------- */
.faq {
display: flex;
align-items: stretch;
justify-content: center;
gap: var(--space-3xl);
padding: var(--space-padding) var(--pad-x);
background: var(--color-surface-default);
}
.faq__panel {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-3xl);
min-height: 512px;
padding: var(--space-3xl);
border-radius: 16px;
background-image:
linear-gradient(180deg, rgba(0,0,0,.64) 0%, rgba(0,0,0,0) 59%),
linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,.64) 100%),
url("assets/faq-bg.jpg");
background-size: cover;
background-position: center;
}
.faq__panelTop { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-l); }
.faq__title { margin: 0; color: var(--color-text-inverse); }
.faq__list { flex: 1 1 0; min-width: 0; }
.faqItem { border-bottom: 1px solid #e5e7eb; }
.faqItem__head {
width: 100%;
display: flex;
align-items: center;
gap: var(--space-xl);
padding: var(--space-l) 0;
background: none;
border: none;
text-align: left;
cursor: pointer;
}
.faqItem__q { flex: 1 1 auto; color: var(--color-text-primary); }
.faqItem__toggle {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: var(--radius-full);
background: var(--color-surface-brand-primary);
color: var(--color-text-inverse);
transition: transform .3s ease;
}
.faqItem__toggle svg { width: 16px; height: 16px; display: block; }
.faqItem.is-open .faqItem__toggle { transform: rotate(45deg); }
.faqItem__body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .35s ease;
}
.faqItem.is-open .faqItem__body { grid-template-rows: 1fr; }
.faqItem__body > p {
overflow: hidden;
margin: 0;
color: var(--color-text-secondary);
}
.faqItem.is-open .faqItem__body > p { padding-bottom: var(--space-l); }
/* ---------------- Last CTA ---------------- */
.lastCta { padding: var(--space-3xl); background: #000; }
/* when the CTA sits directly above the footer, the CTA already provides the
bottom black gap (its 40px padding). Drop the footer's own top padding so the
gap to the footer content equals the CTA's top padding (visual balance). */
.lastCta + .ft .ft__desktop { padding-top: 0; }
.lastCta__inner {
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
gap: var(--space-3xl);
/* box stays wide; the content is padded in so it lines up with the page
gutter (--pad-x from the screen edge) minus the box's own outer frame.
A small floor keeps the content off the card edge on narrow screens. */
padding: 64px max(var(--space-l), calc(var(--pad-x) - var(--space-3xl)));
background: var(--color-surface-brand-primary);
overflow: hidden;
}
.lastCta__texture {
position: absolute;
inset: 0;
background-image: url("assets/cta-texture.jpg");
background-size: cover;
background-position: center;
opacity: 0.18;
pointer-events: none;
}
.lastCta__eyebrow {
position: relative;
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
gap: var(--space-xs);
}
.lastCta__dot { width: 12px; height: 12px; background: var(--color-surface-default); flex: none; }
.lastCta__eyebrowText {
font-family: var(--font-heading);
font-weight: 500;
font-size: 16px;
line-height: 1.5;
color: var(--color-text-inverse);
white-space: nowrap;
}
.lastCta__content {
position: relative;
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-xl);
}
.lastCta__title {
margin: 0;
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(30px, 3.3333vw, 48px);
line-height: 1.3333;
letter-spacing: -0.01em;
color: var(--color-text-inverse);
}
.lastCta__actions { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
/* ---------------- responsive (new sections) ---------------- */
@media (max-width: 1024px) {
.caps__grid { grid-template-columns: repeat(2, 1fr); }
.capCard,
.caps__grid > .capCard:nth-child(1),
.caps__grid > .capCard:nth-child(2) { grid-column: span 1; }
/* the 5th card (Enterprise Systems) has no neighbour to its right, so let it
fill the whole row instead of leaving dead space */
.caps__grid > .capCard:nth-child(5) { grid-column: span 2; }
.caps__grid > .capCard { border-radius: 0; }
.faq { flex-direction: column; }
}
@media (max-width: 900px) {
.tst__carousel { gap: var(--space-m); }
.tst__stage { padding: var(--space-3xl) var(--space-l); }
.tstCard { padding: var(--space-xl); gap: var(--space-l); }
.lastCta__inner { flex-direction: column; gap: var(--space-l); }
.indCard { flex-basis: 300px; height: 460px; padding: var(--space-xl); }
}
@media (max-width: 620px) {
.caps__grid { grid-template-columns: 1fr; }
.caps__grid > .capCard:nth-child(5) { grid-column: auto; }
.capCard { min-height: 420px; }
.tst__arrow { display: none; }
.indCard { flex-basis: 82vw; }
}
/* ============================================================
Capabilities revisions — light handoff, reveals, 8-col footer
============================================================ */
/* white veil: takes over from the statement's light so the Capabilities
section is *revealed* by it instead of appearing as a blank white page */
.veil {
position: fixed;
inset: 0;
z-index: 5;
background: var(--color-surface-default);
opacity: 0;
pointer-events: none;
will-change: opacity;
}
/* scroll reveal used by the Capabilities section */
.reveal-up {
opacity: 0;
transform: translateY(28px);
transition:
opacity .75s cubic-bezier(.2, .7, .3, 1),
transform .75s cubic-bezier(.2, .7, .3, 1);
transition-delay: var(--rd, 0s);
}
.reveal-up.is-in { opacity: 1; transform: none; }
/* footer text spans 8 of 12 columns, centred (no fixed width) */
.caps__footer {
display: grid;
grid-template-columns: repeat(12, 1fr);
row-gap: 32px;
width: 100%;
max-width: none;
}
.caps__footerText { grid-column: 3 / span 8; }
.caps__footerCta {
grid-column: 1 / -1;
display: flex;
justify-content: center;
}
@media (max-width: 900px) {
.caps__footerText { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
.reveal-up { opacity: 1; transform: none; transition: none; }
.veil { transition: none; }
}
/* Capabilities sits ABOVE the white veil, so as the light whites the screen
out the section is already there (painting on top of the white) and runs
its own reveal, instead of being hidden behind the transition. */
.caps {
position: relative;
z-index: 6; /* veil is 5 */
}
/* ============================================================
Section pass 2 — card reveals, pinned horizontal Industries,
glass Testimonials (100vh), 5/7 FAQ (100vh + beat)
============================================================ */
/* ---- Capability cards: rise + settle, staggered, with a hover lift ---- */
.capCard.reveal-up {
transform: translateY(44px) scale(.985);
transition:
opacity .8s cubic-bezier(.2,.7,.3,1),
transform .8s cubic-bezier(.2,.7,.3,1),
box-shadow .35s ease;
transition-delay: var(--rd, 0s);
}
.capCard.reveal-up.is-in { transform: none; }
.capCard {
border-radius: 8px; /* keeps the hover lift clean */
transition: transform .35s ease, box-shadow .35s ease;
}
.capCard:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(17,24,39,.10);
}
/* ============================================================
Industries — pinned, scrolls horizontally, then a beat
============================================================ */
.ind {
position: relative;
padding: 0; /* the pin owns the padding now */
background: var(--color-surface-brand-secondary);
/* height is set by JS: 100vh + horizontal distance + beat */
}
.ind__pin {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-6xl);
padding: var(--space-6xl) 0 var(--space-6xl) var(--pad-x);
overflow: hidden;
background: var(--color-surface-brand-secondary);
}
.ind__rail {
position: relative;
overflow: hidden; /* JS drives the movement */
padding-right: 0;
}
.ind__track {
display: flex;
gap: var(--space-xl);
width: max-content;
will-change: transform;
}
.indCard {
transition: transform .35s ease, box-shadow .35s ease;
}
.indCard:hover {
transform: translateY(-6px);
box-shadow: 0 20px 44px rgba(17,24,39,.18);
}
/* arrow tile behaves like the button: swap out top-right / in bottom-left */
.indCard__icon { overflow: hidden; }
.indCard__icon .btn__arrows { position: relative; width: 28px; height: 28px; }
.indCard__icon .icon-arrow {
position: absolute;
inset: 0;
width: 28px;
height: 28px;
transition: transform .45s cubic-bezier(.45,0,.2,1);
}
.indCard__icon .icon-arrow--b { transform: translate(-100%, 100%); }
.indCard:hover .icon-arrow--a { transform: translate(100%, -100%); }
.indCard:hover .icon-arrow--b { transform: translate(0, 0); }
/* ============================================================
Testimonials — glass stage, 100vh, one card at a time
============================================================ */
.tst__stage {
min-height: 100vh;
justify-content: center;
}
.tst__viewport {
/* stronger glassmorphism */
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.28);
box-shadow:
0 24px 60px rgba(17,24,39,.22),
inset 0 1px 0 rgba(255,255,255,.35);
-webkit-backdrop-filter: blur(12px) saturate(150%);
backdrop-filter: blur(12px) saturate(150%);
}
/* push the neighbouring slides well out of frame */
.tst__track { --tst-gap: 96px; gap: var(--tst-gap); }
.tstCard { flex: 0 0 100%; }
/* ============================================================
FAQ — 5 / 7 columns, equal height, 100vh + a beat
============================================================ */
.faq {
position: relative;
display: block;
padding: 0; /* the inner block owns the padding */
background: var(--color-surface-default);
height: auto; /* no pin, no scroll break: plain flow */
}
.faq__pin {
position: static; /* was sticky + a 60vh beat */
top: auto;
height: auto;
min-height: 100vh;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--space-3xl);
align-items: stretch; /* left panel fills the FAQ height */
align-content: center;
padding: var(--pad-y) var(--pad-x);
background: var(--color-surface-default);
}
.faq__panel { grid-column: span 5; min-height: 0; height: 100%; }
.faq__list { grid-column: span 7; min-height: 0; align-self: center; }
@media (max-width: 1024px) {
.faq { height: auto; }
.faq__pin {
position: static;
height: auto;
min-height: 100vh;
grid-template-columns: 1fr;
}
.faq__panel, .faq__list { grid-column: 1 / -1; }
.faq__panel { height: auto; min-height: 420px; }
}
@media (max-width: 1024px) {
/* no pinning on tablet/mobile — plain vertical flow + native swipe */
.ind { height: auto !important; padding: var(--space-padding) 0 var(--space-padding) var(--pad-x); }
.ind__pin { position: static; height: auto; padding: 0; overflow: visible; }
.ind__rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-right: var(--pad-x); }
.ind__rail::-webkit-scrollbar { display: none; }
.ind__track { transform: none !important; }
.tst__track { --tst-gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
.capCard, .capCard:hover, .indCard, .indCard:hover { transform: none; transition: none; }
.indCard__icon .icon-arrow { transition: none; }
}
/* ============================================================
Section pass 3 — industries fit, testimonial framing + glass
============================================================ */
/* ---- Industries: make everything fit inside the 100vh pin ----
pin padding + header + gap + card must never exceed the viewport,
otherwise the cards get clipped at the bottom. */
.ind__pin {
gap: clamp(28px, 5vh, 64px);
padding-top: clamp(40px, 7vh, 72px);
padding-bottom: clamp(40px, 7vh, 72px);
}
.indCard {
/* header block is ~150px; the rest of the viewport is the card */
height: clamp(320px, calc(100vh - 330px), 520px);
padding: 28px;
gap: var(--space-xl);
}
.ind__rail { padding-bottom: 4px; } /* room for the hover lift */
.indCard__desc {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ============================================================
Testimonials — framed stage (equal space all round) + iOS glass
============================================================ */
.tst {
/* bottom padding doubles as the one-scroll break before the FAQ */
padding: var(--space-padding) var(--pad-x) calc(var(--pad-x) + 60vh);
gap: var(--pad-x); /* same breathing room as the sides */
}
.tst__stage {
/* stage + its equal top/bottom margin adds up to one screen */
min-height: calc(100vh - 2 * var(--pad-x));
margin-bottom: 0;
padding: clamp(32px, 6vh, 80px) clamp(24px, 8vw, 120px);
}
/* modern iOS-style glass: lighter frost, more see-through, crisp edge */
.tst__viewport {
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.38);
box-shadow:
0 8px 32px rgba(17, 24, 39, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.45);
-webkit-backdrop-filter: blur(12px) saturate(180%);
backdrop-filter: blur(12px) saturate(180%);
}
@media (max-width: 900px) {
.tst { padding-bottom: calc(var(--pad-x) + 24vh); }
.tst__stage { min-height: 0; }
}
/* ============================================================
Section pass 4
The FAQ pattern is the reference for a "one scroll break":
section is 160vh tall, its inner block sticks for 100vh, so
the content holds for ~60vh before the next section arrives.
============================================================ */
/* ---- About Us: hold for one scroll before the counter ---- */
.about { height: 160vh; }
.about__intro {
position: sticky;
top: 0;
height: 100vh;
min-height: 0;
}
/* ---- Industries: never clip the cards (hover lift + shadow) ----
the pin clips horizontally only, so nothing is cut off vertically */
.ind__pin {
overflow-x: clip;
overflow-y: visible;
}
.ind__rail {
overflow: visible;
padding-top: 10px; /* headroom for the lift */
padding-bottom: 18px; /* room for the drop shadow */
margin-top: -10px;
margin-bottom: -18px;
}
.indCard { will-change: transform; }
/* ============================================================
Testimonials — header section, then the box as its own 100vh
============================================================ */
.tst {
/* header only now: no giant bottom gap */
padding: var(--space-padding) var(--pad-x) 0;
gap: var(--space-l);
min-height: 0;
}
.tstBox {
position: relative;
height: 160vh; /* 100vh box + ~one scroll of break */
background: var(--color-surface-default);
}
.tstBox__pin {
position: sticky;
top: 0;
height: 100vh;
display: flex;
padding: var(--pad-x); /* equal margin on all four sides */
background: var(--color-surface-default);
}
/* the stage fills the pin, so box + equal margins == exactly one screen */
.tst__stage {
flex: 1 1 auto;
min-height: 0;
height: 100%;
margin: 0;
justify-content: center;
gap: clamp(20px, 3vh, 40px);
padding: clamp(24px, 4vh, 56px) clamp(24px, 6vw, 80px);
}
@media (max-width: 1024px) {
.about { height: auto; }
.about__intro { position: static; height: auto; min-height: 100vh; }
}
@media (max-width: 900px) {
.tstBox { height: auto; }
.tstBox__pin { position: static; height: auto; min-height: 0; padding: var(--pad-x) var(--pad-x) 0; }
.tst__stage { height: auto; min-height: 0; }
}
/* ============================================================
Section pass 5 — nav 72, industries split, testimonial
balance, footer
============================================================ */
/* ---- Nav: shorter scrolled state, smoother shrink ---- */
:root { --nav-h-scrolled: 72px; }
.nav {
transition:
height .45s cubic-bezier(.4, 0, .2, 1),
background-color .45s cubic-bezier(.4, 0, .2, 1),
box-shadow .45s cubic-bezier(.4, 0, .2, 1),
transform .4s cubic-bezier(.4, 0, .2, 1);
will-change: transform;
}
.nav__logo {
transition: width .45s cubic-bezier(.4,0,.2,1), height .45s cubic-bezier(.4,0,.2,1);
}
.nav--scrolled .nav__logo { width: 100px; height: 44px; }
.nav__cta { transition: height .45s cubic-bezier(.4,0,.2,1); }
.nav--scrolled .nav__cta { height: 44px; }
/* ============================================================
Industries — header is its own block, cards get the 100vh pin
============================================================ */
.ind--head {
position: relative;
height: auto;
/* the cards below centre themselves in their own 100vh pin, which already
leaves clear space under this block — 80px here on top of that read as a
hole between the heading and the first card */
padding: var(--space-padding) var(--pad-x) var(--space-3xl);
overflow: hidden;
}
.ind--head .ind__header { padding-right: 0; }
.ind--rail {
position: relative;
padding: 0;
/* height is set by JS: 100vh + horizontal distance + beat */
}
/* heading + tag stay at the TOP of the pinned section (full width), and the
card rail scrolls horizontally beneath them — Figma 33195:3778 */
/* header + card rail as one block, vertically centred in the pin, with the
same padding on all four sides and 24px between heading and cards */
.ind--rail .ind__pin {
gap: var(--space-xxl, 32px); /* 32 heading -> cards */
justify-content: center;
padding: 48px var(--pad-x); /* 48 top/bottom, gutter left/right */
}
.ind__header--top {
flex: none;
width: 100%;
}
/* dark heading + black tag on the mint field */
.ind__header--top .ind__title { color: var(--color-text-primary); margin: 0; }
.ind__header--top .pill {
background: var(--color-surface-overlay, #111827);
border-color: transparent;
color: var(--color-text-inverse);
}
/* the rail holds the cards; symmetric headroom so the centred block sits even
(the base rail has asymmetric top/bottom room for the hover lift) */
.ind--rail .ind__rail {
flex: none;
padding-top: 16px; padding-bottom: 16px;
margin-top: -16px; margin-bottom: -16px;
}
.ind--rail .indCard { height: clamp(340px, calc(100vh - 340px), 520px); }
.ind--rail .indCard { flex-basis: 440px; }
/* ============================================================
Testimonials box — balanced top/bottom like the FAQ
============================================================ */
.tstBox__pin {
align-items: stretch;
padding: var(--pad-x);
}
.tst__stage {
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(16px, 2.4vh, 32px);
/* equal top/bottom so the glass card sits optically centred */
padding: clamp(24px, 4vh, 56px) clamp(24px, 6vw, 80px);
}
/* ============================================================
Footer
============================================================ */
.ft { background: #000; color: var(--color-text-inverse); }
.ft__desktop {
position: relative;
display: flex;
flex-direction: column;
gap: 64px;
padding: 64px var(--pad-x);
overflow: hidden; /* the orbs bounce inside this block and nowhere else */
}
/* ---- drifting glow orbs (Figma 35025:29190 blue / 35025:29192 green) ----
Soft radial fields rather than blurred circles: a filter: blur() of this
radius on a moving element repaints every frame, a gradient does not.
main.js gives each one a slow random heading and bounces it off the edges. */
.ft__orbs {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
/* An orb's centre can reach the edges, so part of it always hangs outside.
Clipping that leaves a hard line across the black — and the CTA above is
black too, so it reads as a cut through nothing. Fading the boundary
instead lets the glow ride off the edge and disappear. */
--orb-fade: 140px;
-webkit-mask-image:
linear-gradient(to bottom, transparent 0, #000 var(--orb-fade),
#000 calc(100% - var(--orb-fade)), transparent 100%),
linear-gradient(to right, transparent 0, #000 var(--orb-fade),
#000 calc(100% - var(--orb-fade)), transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to bottom, transparent 0, #000 var(--orb-fade),
#000 calc(100% - var(--orb-fade)), transparent 100%),
linear-gradient(to right, transparent 0, #000 var(--orb-fade),
#000 calc(100% - var(--orb-fade)), transparent 100%);
mask-composite: intersect;
}
.ft__orb {
position: absolute;
top: 0;
left: 0;
border-radius: var(--radius-full);
opacity: .75;
/* the gradient carries most of the softness; the blur on top pushes it the
rest of the way to Figma's layer blur. Only the transform changes each
frame, so the blurred result is rasterised once and just recomposited. */
filter: blur(68px);
will-change: transform;
}
/* scaled up from Figma's 327 / 320 so they read at full width */
.ft__orb--blue {
width: 620px;
height: 620px;
background: radial-gradient(circle closest-side,
rgba(74, 61, 204, 1) 0%, rgba(74, 61, 204, .82) 22%,
rgba(74, 61, 204, .38) 55%, rgba(74, 61, 204, 0) 100%);
}
.ft__orb--green {
width: 600px;
height: 600px;
background: radial-gradient(circle closest-side,
rgba(41, 204, 178, 1) 0%, rgba(41, 204, 178, .82) 22%,
rgba(41, 204, 178, .38) 55%, rgba(41, 204, 178, 0) 100%);
}
/* every band of footer content paints above them */
.ft__top,
.ft__cols { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
.ft__orb { will-change: auto; }
}
.ft__top { display: flex; flex-direction: column; gap: var(--space-l); }
.ft__logo { width: 112px; height: 52px; }
.ft__topRow { display: flex; gap: 32px; align-items: flex-start; }
.ft__brand {
width: 400px;
flex: none;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-3xl);
}
.ft__tagline { margin: 0; color: var(--color-text-inverse); }
.ft__badges { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.ft__badge {
display: inline-flex;
align-items: center;
padding: var(--space-xs) var(--space-m);
border: 1px solid rgba(255,255,255,.45);
border-radius: var(--radius-full);
font-family: var(--font-label);
font-weight: 600;
font-size: 12px;
line-height: 1.3333;
letter-spacing: 0.06px;
color: var(--color-text-inverse);
white-space: nowrap;
}
.ft__reach {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-l);
text-align: right;
}
.ft__reachTitle { margin: 0; color: var(--color-text-inverse); }
.ft__mail { font-weight: 700; text-decoration: underline; text-underline-position: from-font; }
.ft__mail:hover { opacity: .8; }
.ft__phone { margin: 0; color: var(--color-text-inverse); }
.ft__social { display: flex; align-items: center; gap: var(--space-xl); }
.ft__social a { display: inline-flex; transition: opacity .25s ease, transform .25s ease; }
.ft__social img {
width: 28px; height: 28px;
filter: brightness(0) invert(1); /* force the exported glyph to white */
}
.ft__social a:hover { opacity: .75; transform: translateY(-2px); }
.ft__cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-xl);
align-items: start;
}
.ft__col { display: flex; flex-direction: column; gap: var(--space-xl); }
.ft__colTitle { margin: 0; color: var(--color-text-inverse); }
.ft__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xl); }
.ft__links a {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
color: rgba(255,255,255,.75);
transition: color .25s ease;
}
.ft__links a:hover { color: var(--color-text-inverse); }
.ft__copyright { background: var(--color-surface-brand-primary); }
.ft__copyInner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-xl);
padding: 24px var(--pad-x);
flex-wrap: wrap;
}
.ft__copyText { margin: 0; color: var(--color-text-inverse); }
.ft__legal { display: flex; gap: var(--space-l); flex-wrap: wrap; }
.ft__legal a {
font-family: var(--font-label);
font-weight: 600;
font-size: 14px;
line-height: 1.4286;
color: var(--color-text-inverse);
transition: opacity .25s ease;
}
.ft__legal a:hover { opacity: .75; }
@media (max-width: 1024px) {
.ft__cols { grid-template-columns: repeat(2, 1fr); gap: var(--space-3xl); }
.ft__topRow { flex-direction: column; }
.ft__brand { width: 100%; }
.ft__reach { align-items: flex-start; text-align: left; }
}
@media (max-width: 620px) {
.ft__cols { grid-template-columns: 1fr; }
.ft__copyInner { flex-direction: column; align-items: flex-start; }
}
/* dots sit at the bottom edge so the glass card stays optically centred */
.tst__stage { position: relative; }
.tst__dots {
position: absolute;
left: 50%;
bottom: clamp(14px, 2.2vh, 26px);
transform: translateX(-50%);
margin: 0;
}
/* ============================================================
FIX: the cards section must NOT clip, or position:sticky dies.
overflow:hidden/auto/scroll on an ancestor turns it into a scroll
container, so the pin sticks to *that* instead of the viewport and
the section never holds. The horizontal clipping lives on the pin
itself (overflow-x: clip), which is safe.
============================================================ */
.ind--rail {
overflow: visible;
background: var(--color-surface-brand-secondary);
}
.ind--rail .ind__pin {
/* clip BOTH axes so the background doodle stays inside this section (it was
bleeding up into Partners). `clip` — unlike hidden/auto/scroll — does not
create a scroll container, so position:sticky still holds. */
overflow: clip;
background: var(--color-surface-brand-secondary);
}
/* ============================================================
Section pass 6 — CTA hologram, footer icons, button hover fix
============================================================ */
/* ---- FIX: the arrow tile disappeared once the fill flooded the button ----
(white tile on a white-filled button / purple tile on a purple-filled one).
Invert the tile on hover so the arrow always stays legible. */
.btn__tile { transition: background-color .35s ease, color .35s ease; }
.btn--solid:hover .btn__tile {
background: var(--color-surface-default);
color: var(--color-text-brand-primary);
}
.btn--purple:hover .btn__tile {
background: var(--color-surface-brand-primary);
color: var(--color-text-inverse);
}
/* (the nav CTA's tile hover now lives in the NAV CTA block at the end of this
file, so every nav state resolves to the same hover) */
/* ============================================================
Last CTA — gradient + absolutely placed hologram sphere
============================================================ */
.lastCta__inner {
position: relative;
overflow: hidden;
background:
radial-gradient(62% 120% at 18% 88%, rgba(142, 82, 236, .55) 0%, rgba(142, 82, 236, 0) 62%),
linear-gradient(100deg, #5436ca 0%, #4a3dcc 46%, #3d32a7 100%);
}
/* The canvas spans the WHOLE band, not just the sphere's box. Nodes absorbed
toward the cursor used to travel outside a small canvas and get cut off at
its bitmap edge (the "clipped geometry"); with a full-band canvas there is
nothing to clip against. The sphere keeps its Figma placement through these
three custom properties, which main.js reads to offset the drawing. */
.lastCta__sphere {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
opacity: .95;
--sphere-x: -24.5%; /* left edge of the sphere box, in band width */
--sphere-y: 27%; /* top edge, in band height */
--sphere-w: 86%; /* sphere diameter, in band width */
}
/* keep the copy above the hologram */
.lastCta__eyebrow, .lastCta__content { position: relative; z-index: 1; }
/* eyebrow marker: the DDT mark motif — a 16px circle with a squared
bottom-right corner (measured off Figma 33197:7595). Shared by every
page's CTA, since the CTA + footer is one component. */
.lastCta__dot {
width: 16px;
height: 16px;
border-radius: 50% 50% 0 50%;
background: var(--color-surface-default);
flex: none;
}
.lastCta__eyebrowText { font-weight: 600; }
/* ============================================================
Footer social icons — real vectors, already white
============================================================ */
.ft__social img {
width: 28px;
height: 28px;
filter: none; /* the SVGs are white already */
}
@media (prefers-reduced-motion: reduce) {
.lastCta__sphere img { animation: none; }
}
/* ============================================================
Section pass 7 — sphere canvas + button stroke fix
============================================================ */
/* the sphere is a canvas mesh now: it spins in place, nodes absorb to cursor */
.lastCta__sphere {
display: block;
animation: none; /* rotation is done per-node in the canvas */
transform: none;
}
/* FIX: a real `border` plus `overflow: hidden` leaves a seam where the border
meets the clipped fill, so the outline looked cut at the corners. An inset
shadow paints over the padding box instead and stays continuous. */
.btn--purple {
border: 0;
box-shadow: inset 0 0 0 1px var(--color-surface-brand-primary);
}
.btn--outline {
border: 0;
box-shadow: inset 0 0 0 1px var(--color-border-white);
padding: var(--space-s) calc(var(--space-xl) + 1px);
}
/* keep the arrow tile clear of the button edge on all sides */
.btn__tile { margin-right: 0; }
/* ============================================================
Section pass 8 — button outline that survives the hover fill
Why the old one broke: `box-shadow: inset` paints in the element's
BACKGROUND layer, but the fill circle is a positioned pseudo-element,
so it paints above the shadow and progressively covered the outline
(hence the top-only / missing outline while hovering).
The outline now lives in its own ::after overlay on the TOP layer,
so the fill can never cover it.
============================================================ */
.btn--solid,
.btn--purple,
.btn--outline { box-shadow: none; border: 0; }
.btn--solid::after,
.btn--purple::after,
.btn--outline::after {
content: "";
position: absolute;
inset: 0;
z-index: 2; /* above the fill (0) and the content (1) */
border: 1px solid currentColor;
border-radius: inherit;
pointer-events: none;
}
/* each button outlines in its own colour */
.btn--solid::after { color: var(--color-surface-brand-primary); }
.btn--purple::after { color: var(--color-surface-brand-primary); }
.btn--outline::after { color: var(--color-border-white); }
/* restore the outline variant's original padding (border no longer takes space) */
.btn--outline { padding: var(--space-s) var(--space-xl); }
/* once the fill has landed, flip the outline so it never sits on its own colour
(purple outline on a purple-filled button would vanish, and vice versa) */
.btn--solid::after,
.btn--purple::after,
.btn--outline::after { transition: color .35s ease; }
.btn--solid:hover::after { color: var(--color-border-white); }
.btn--outline:hover::after { color: var(--color-surface-brand-primary); }
/* ============================================================
Button colour timing
The flood sweeps out FROM the arrow tile, so the label sits at
the far end and is the last thing it reaches. Flipping the
label and the outline to their inverted colours on a shorter
timer left them white-on-white for a beat — the label read as
missing and the stroke vanished. Both now wait for the flood
to arrive, then change; on the way out they revert
immediately, so the button never looks blank in either
direction.
============================================================ */
.btn--solid .btn__label,
.btn--purple .btn__label,
.btn--outline .btn__label,
.btn--brandline .btn__label { transition: color .26s ease; transition-delay: 0s; }
.btn--solid:hover .btn__label,
.btn--purple:hover .btn__label,
.btn--outline:hover .btn__label,
.btn--brandline:hover .btn__label,
.btn--solid:active .btn__label,
.btn--purple:active .btn__label,
.btn--outline:active .btn__label { transition-delay: .18s; }
.btn--solid:hover::after,
.btn--purple:hover::after,
.btn--outline:hover::after { transition-delay: .18s; }
/* ============================================================
Nav mega menu — Who We Serve
============================================================ */
.nav__group { display: flex; align-items: stretch; height: 100%; }
.nav__item--btn {
background: none;
border: 0;
font: inherit;
cursor: pointer;
/* colour is owned by the .nav__item rules (they cover both nav states) */
}
/* panel drops out of the fixed nav */
.mega {
position: absolute;
left: 0;
right: 0;
top: 100%;
background: var(--color-surface-default);
border-top: 1px solid #e5e7eb;
box-shadow: 0 24px 48px rgba(17, 24, 39, .12);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity .28s ease, transform .28s cubic-bezier(.2,.7,.3,1), visibility .28s;
}
.nav.is-mega-open .mega {
opacity: 1;
visibility: visible;
transform: none;
}
.mega__inner {
display: grid;
grid-template-columns: 4fr 8fr; /* same 4/8 rhythm as About */
gap: var(--space-3xl);
padding: var(--space-3xl) var(--pad-x);
align-items: start;
}
.mega__lead { display: flex; flex-direction: column; gap: var(--space-m); align-items: flex-start; }
.mega__leadText { margin: 0; color: var(--color-text-primary); }
.mega__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-s);
}
.megaCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-s);
padding: var(--space-m);
border-radius: 8px;
background: var(--color-background-default);
color: var(--color-text-primary);
transition: background-color .25s ease, transform .25s ease, color .25s ease;
}
.megaCard__title { margin: 0; }
/* (the text-only N3CA lockup was replaced by the real product logos in the
dedicated Products panel — see "BIG MENU / PRODUCTS" at the end of this file) */
.megaCard__icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
border-radius: var(--radius-xs);
background: var(--color-surface-default);
color: var(--color-text-brand-primary);
transition: background-color .25s ease, color .25s ease, transform .35s cubic-bezier(.45,0,.2,1);
}
.megaCard__icon svg { width: 20px; height: 20px; display: block; }
.megaCard:hover {
background: var(--color-surface-brand-primary);
color: var(--color-text-inverse);
transform: translateY(-2px);
}
.megaCard:hover .megaCard__icon {
background: var(--color-surface-default);
color: var(--color-text-brand-primary);
transform: translate(3px, -3px);
}
/* the trigger's + becomes an x while open */
/* while the panel is open the bar goes solid so the two read as one surface */
.nav.is-mega-open {
background: var(--color-surface-default);
box-shadow: 0 1px 0 rgba(17,24,39,.06);
}
.nav.is-mega-open .nav__logo--light { display: none; }
.nav.is-mega-open .nav__logo--dark { display: block; }
.nav.is-mega-open .nav__item { color: var(--color-text-primary); }
.nav.is-mega-open .nav__item .icon-plus { color: var(--color-text-brand-primary); }
.nav.is-mega-open .nav__cta { background: var(--color-surface-brand-primary); }
.nav.is-mega-open .nav__cta .btn__label { color: var(--color-text-inverse); }
.nav.is-mega-open .nav__cta .btn__tile {
background: var(--color-surface-default);
color: var(--color-text-brand-primary);
}
@media (max-width: 1024px) {
.mega__inner { grid-template-columns: 1fr; }
.mega__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.mega { display: none; } /* nav menu is hidden at this width anyway */
}
@media (prefers-reduced-motion: reduce) {
.mega { transition: none; }
.megaCard, .megaCard__icon { transition: none; }
}
/* ============================================================
Nav pass 2 — all five mega menus + language dropdown
============================================================ */
/* FIX: `color: inherit` on the button beat `.nav__item`'s white and pulled the
dark body colour, so "Who We Serve" rendered dark on the hero. Let the
.nav__item colour rules own it (they already handle both nav states). */
.nav__item--btn {
background: none;
border: 0;
font: inherit;
cursor: pointer;
/* no `color` here on purpose */
}
.nav__menu .nav__item--btn { color: var(--color-text-inverse); }
.nav--scrolled .nav__item--btn,
.nav.is-mega-open .nav__item--btn { color: var(--color-text-primary); }
/* the open trigger reads as active */
.nav__item.is-open { color: var(--color-text-brand-primary) !important; }
.nav__item .icon-plus { transition: transform .3s ease; }
.nav__item.is-open .icon-plus { transform: rotate(45deg); }
/* ---- panels: one per menu, cross-faded in the same shell ---- */
.mega__panel { display: none; }
.mega__panel.is-active { display: block; }
.mega__lead { gap: var(--space-m); }
.mega__cta {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
margin-top: var(--space-xs);
font-family: var(--font-button);
font-weight: 600;
font-size: 16px;
color: var(--color-text-brand-primary);
}
.mega__cta svg { width: 18px; height: 18px; transition: transform .3s cubic-bezier(.45,0,.2,1); }
.mega__cta:hover svg { transform: translate(3px, -3px); }
/* cards flow in with a short stagger each time a panel opens */
.nav.is-mega-open .mega__panel.is-active .megaCard {
animation: megaCardIn .42s cubic-bezier(.2,.7,.3,1) both;
animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes megaCardIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
/* ---- language dropdown ---- */
.nav__lang { position: relative; display: flex; align-items: stretch; height: 100%; }
.lang {
position: absolute;
top: calc(100% - 14px);
right: 0;
min-width: 208px;
padding: var(--space-xs);
border-radius: 10px;
background: var(--color-surface-default);
border: 1px solid #e5e7eb;
box-shadow: 0 18px 40px rgba(17, 24, 39, .16);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity .22s ease, transform .22s cubic-bezier(.2,.7,.3,1), visibility .22s;
z-index: 5;
}
.nav__lang.is-open .lang { opacity: 1; visibility: visible; transform: none; }
.lang__opt {
display: flex;
align-items: center;
gap: var(--space-s);
width: 100%;
padding: 10px var(--space-s);
border: 0;
border-radius: 8px;
background: none;
cursor: pointer;
text-align: left;
color: var(--color-text-primary);
transition: background-color .2s ease;
}
.lang__opt:hover { background: var(--color-background-default); }
.lang__code {
flex: none;
min-width: 30px;
font-family: var(--font-label);
font-weight: 600;
font-size: 12px;
letter-spacing: .06px;
padding: 3px 6px;
border-radius: 4px;
text-align: center;
background: var(--color-background-default);
color: var(--color-text-brand-primary);
}
.lang__name { font-family: var(--font-body); font-size: 15px; }
.lang__opt.is-active { background: rgba(74, 61, 204, .08); }
.lang__opt.is-active .lang__code {
background: var(--color-surface-brand-primary);
color: var(--color-text-inverse);
}
@media (prefers-reduced-motion: reduce) {
.nav.is-mega-open .mega__panel.is-active .megaCard { animation: none; }
.lang { transition: none; }
}
/* ============================================================
Language dropdown — same surface language as the mega menu,
but hugging its content instead of spanning the bar
============================================================ */
/* every nav button is white over the hero, dark once the bar is solid */
.nav .nav__item--btn { color: var(--color-text-inverse); }
.nav--scrolled .nav__item--btn,
.nav.is-mega-open .nav__item--btn { color: var(--color-text-primary); }
.lang {
position: absolute;
top: 100%; /* flush under the bar, like a mega panel */
right: 0;
left: auto;
width: max-content; /* hug the content */
min-width: 0;
padding: var(--space-xs);
background: var(--color-surface-default);
border: 1px solid #e5e7eb;
border-top: 0;
border-radius: 0 0 12px 12px;
box-shadow: 0 24px 48px rgba(17, 24, 39, .12);
}
.lang__opt { white-space: nowrap; } /* "Bahasa Indonesia" on one line */
.lang__name { white-space: nowrap; }
/* options flow in like the mega cards */
.nav__lang.is-open .lang__opt {
animation: megaCardIn .34s cubic-bezier(.2,.7,.3,1) both;
}
.nav__lang.is-open .lang__opt:nth-child(2) { animation-delay: 40ms; }
@media (prefers-reduced-motion: reduce) {
.nav__lang.is-open .lang__opt { animation: none; }
}
/* the lang wrapper must span the full bar height, otherwise `top: 100%`
anchors to the button box and the panel floats mid-bar */
.nav__actions { align-self: stretch; align-items: center; }
.nav__lang { align-self: stretch; height: auto; align-items: center; }
/* ============================================================
Language flags (Figma "Rounded" flag, 117.6x84 -> 21x15)
Flag first, then the label, on one line.
============================================================ */
.lang__flag {
width: 21px;
height: 15px;
flex: none;
display: block;
object-fit: cover;
/* the SVG carries the rounded clip; the drop-shadow follows its alpha */
filter: drop-shadow(0 .5px 1.2px rgba(66, 71, 76, .28));
transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}
/* the trigger's flag lifts a touch while the panel is down */
.nav__lang.is-open #langFlag { transform: translateY(-1px) scale(1.06); }
.lang__opt:hover .lang__flag { transform: scale(1.06); }
/* the trigger keeps the same rhythm as the other nav items */
#langTrigger { gap: var(--space-xs); }
@media (prefers-reduced-motion: reduce) {
.lang__flag { transition: none; }
.nav__lang.is-open #langFlag,
.lang__opt:hover .lang__flag { transform: none; }
}
/* ============================================================
MOBILE PASS
Figma supplied desktop frames only, so this block is the
mobile system: a hamburger + full-height drawer, a single
20px gutter, full-width buttons, and the pinned/animated
sections collapsed into plain vertical flow.
============================================================ */
/* ---- hamburger: last child of .nav__actions, so it is the rightmost item ---- */
.nav__burger {
display: none; /* desktop: the real menu is in the bar */
align-items: center;
justify-content: center;
width: 48px; /* 48px tap target */
height: 48px;
margin-right: -12px; /* optical: the icon lands on the page gutter */
padding: 0;
background: none;
border: 0;
cursor: pointer;
color: var(--color-text-inverse);
transition: color .25s ease;
}
.nav--scrolled .nav__burger,
.nav.is-drawer-open .nav__burger { color: var(--color-text-primary); }
/* the list icon cross-fades into a close icon */
.nav__burgerIcons { position: relative; display: block; width: 24px; height: 24px; }
/* three bars that morph into an X (built in main.js) */
.nav__burgerBar {
position: absolute;
left: 3px; right: 3px;
top: 50%; height: 2px; margin-top: -1px;
border-radius: 2px;
background: currentColor;
transform-origin: center;
transition: transform .4s cubic-bezier(.72, 0, .24, 1), opacity .2s ease;
}
.nav__burgerBar--1 { transform: translateY(-6px); }
.nav__burgerBar--3 { transform: translateY(6px); }
.nav__burger.is-open .nav__burgerBar--1 { transform: rotate(45deg); }
.nav__burger.is-open .nav__burgerBar--2 { opacity: 0; transform: scaleX(.2); }
.nav__burger.is-open .nav__burgerBar--3 { transform: rotate(-45deg); }
/* ---- the drawer: white sheet filling the rest of the viewport ---- */
.drawer {
display: none;
position: fixed;
top: var(--nav-h);
left: 0;
width: 100%;
height: calc(100dvh - var(--nav-h));
background: var(--color-surface-default);
z-index: 90; /* under the bar (100) so the burger stays clickable */
opacity: 0;
transform: translateY(-10px);
visibility: hidden;
pointer-events: none;
transition: opacity .3s ease, transform .3s cubic-bezier(.2, .7, .3, 1), visibility .3s;
}
.drawer.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.drawer__scroll {
height: 100%;
display: flex;
flex-direction: column;
}
/* the menu list scrolls; the Get in Touch footer stays pinned to the bottom */
.drawer__nav {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: var(--space-xs) var(--pad-x) var(--space-l);
}
/* ---- accordion sections (same mechanics as the FAQ) ---- */
.drawerItem { border-bottom: 1px solid rgba(17, 24, 39, .08); }
.drawerItem__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
width: 100%;
min-height: 56px;
padding: var(--space-m) 0;
background: none;
border: 0;
cursor: pointer;
text-align: left;
font-family: var(--font-heading);
font-weight: 600;
font-size: 18px;
line-height: 1.4;
color: var(--color-text-primary);
transition: color .25s ease;
}
.drawerItem.is-open .drawerItem__head { color: var(--color-text-brand-primary); }
.drawerItem__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex: none;
color: var(--color-text-brand-primary);
transition: transform .3s ease;
}
.drawerItem__toggle svg { width: 16px; height: 16px; display: block; }
.drawerItem.is-open .drawerItem__toggle { transform: rotate(45deg); }
.drawerItem__body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .35s ease;
}
.drawerItem.is-open .drawerItem__body { grid-template-rows: 1fr; }
.drawerItem__links { overflow: hidden; display: flex; flex-direction: column; }
.drawer__link,
.drawer__more {
display: block;
padding: 12px 0;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.5;
color: var(--color-text-secondary);
}
.drawer__more { color: var(--color-text-brand-primary); font-weight: 600; }
.drawerItem.is-open .drawerItem__links { padding-bottom: var(--space-m); }
/* ---- drawer footer: language + the contact CTA ---- */
.drawer__foot {
display: flex;
flex-direction: column;
gap: var(--space-s);
flex: none;
/* pinned bar: solid white so the scrolling menu passes behind it, plain (no border/shadow) */
background: var(--color-surface-default);
padding: var(--space-m) var(--pad-x) calc(var(--space-l) + env(safe-area-inset-bottom, 0px));
}
.drawer__lang { display: flex; flex-direction: column; gap: var(--space-xs); } /* legacy, unused */
/* language menu rows — live inside the drawer's Language accordion */
.drawer__langOpt {
display: flex;
align-items: center;
gap: var(--space-s);
width: 100%;
min-height: 44px;
padding: 10px 0;
border: 0;
background: none;
cursor: pointer;
text-align: left;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.5;
color: var(--color-text-secondary);
transition: color .2s ease;
}
.drawer__langOpt .lang__flag { flex: none; width: 21px; height: 15px; border-radius: 2px; }
.drawer__langOpt .lang__name { flex: 1; min-width: 0; }
.drawer__langOpt.is-active { color: var(--color-text-brand-primary); font-weight: 600; }
.drawer__langCheck {
margin-left: auto; display: inline-flex; align-items: center;
color: var(--color-text-brand-primary); opacity: 0; transition: opacity .2s ease;
}
.drawer__langCheck svg { width: 16px; height: 16px; display: block; }
.drawer__langOpt.is-active .drawer__langCheck { opacity: 1; }
/* Insights renders as a flat link — its head is an , not a toggle button */
.drawerItem--flat .drawerItem__head { text-decoration: none; }
.drawer__cta { width: 100%; }
body.is-drawer-open { overflow: hidden; }
/* the bar goes solid behind an open drawer, exactly like the mega menu */
.nav.is-drawer-open { background: var(--color-surface-default); box-shadow: none; }
.nav.is-drawer-open .nav__logo--light { display: none; }
.nav.is-drawer-open .nav__logo--dark { display: block; }
/* ============================================================
Nav auto-hide: slides up out of view on scroll down, returns
on scroll up. The panels live inside .nav, so they ride along
(main.js holds the bar open whenever one is down).
============================================================ */
/* The entry animation (fadeInDown) animates `transform` with fill-mode `both`,
so it keeps applying transform forever and would outrank the auto-hide.
main.js adds .nav--entered once it has played, handing transform back to CSS. */
.nav--entered { animation: none; }
/* An open panel always wins, so the bar can never slide away underneath a
mega menu, the language list or the mobile drawer even if the class lingers. */
.nav--hidden:not(.is-mega-open):not(.is-drawer-open) { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
.nav { transition: none; }
.nav--hidden { transform: none; } /* no slide: just leave the bar in place */
}
/* ============================================================
Nav hover: pointing at the bar flips it to the white state
Same treatment as .nav--scrolled / .is-mega-open, so the
logo, menu items, language and CTA all switch together.
Desktop pointers only — on touch there is no hover and the
bar would latch white after a tap.
============================================================ */
@media (hover: hover) and (min-width: 901px) {
.nav:hover { background: var(--color-surface-default); box-shadow: 0 1px 0 rgba(17, 24, 39, .06); }
.nav:hover .nav__logo--light { display: none; }
.nav:hover .nav__logo--dark { display: block; }
.nav:hover .nav__item,
.nav:hover .nav__item--btn { color: var(--color-text-primary); }
.nav:hover .nav__item .icon-plus { color: var(--color-text-brand-primary); }
.nav:hover .nav__item.is-open { color: var(--color-text-brand-primary); }
.nav:hover .nav__burger { color: var(--color-text-primary); }
/* the CTA takes its scrolled (purple) treatment */
.nav:hover .nav__cta { background: var(--color-surface-brand-primary); }
.nav:hover .nav__cta .btn__label { color: var(--color-text-inverse); font-weight: 600; }
.nav:hover .nav__cta .btn__tile {
background: var(--color-surface-default);
color: var(--color-text-brand-primary);
}
}
/* ============================================================
Tablet + mobile nav (<= 1024px): the bar collapses to the
hamburger + drawer at tablet already, while the rest of the
page keeps its own (<=900 / <=620) breakpoints.
============================================================ */
@media (max-width: 1024px) {
.nav__menu { display: none; }
.nav__burger { display: inline-flex; }
.drawer { display: block; }
/* tablet bar keeps the language flag + the Get in Touch CTA (both are
dropped from the bar at <=620, where the drawer carries them) */
.nav__actions { gap: var(--space-s); align-items: center; }
/* .nav .nav__cta beats the <=620 full-width `.btn` sizing that would
otherwise blow the bar CTA up to 52px tall / full width.
flex-shrink:0 keeps it sized to its label+icon: `.btn` has
overflow:hidden (for the hover fill), which zeroes a flex item's
automatic min size and would otherwise let the label get clipped. */
.nav .nav__cta { display: inline-flex; flex: 0 0 auto; align-items: center; width: auto; height: 36px; padding: 4px 4px 4px 14px; gap: 8px; }
.nav .nav__cta .btn__label { font-size: 13px; padding-right: 0; }
/* tile back into flex flow so label + arrow can never overlap (the base
.btn pins it absolute + reserves space via label padding-right) */
.nav .nav__cta .btn__tile { position: static; flex: 0 0 auto; width: 28px; height: 28px; inset: auto; margin: 0; }
.nav .nav__cta .btn__arrows, .nav .nav__cta .icon-arrow { width: 18px; height: 18px; }
.nav, .nav--scrolled { height: var(--nav-h); }
/* balanced compact logo for the tablet/mobile bar */
.nav__logo, .nav--scrolled .nav__logo { width: 100px; height: 44px; }
/* while the drawer is open the bar CTA + language are redundant (the drawer
carries its own), so drop them and leave just the logo + close button */
.nav.is-drawer-open .nav__cta,
.nav.is-drawer-open .nav__lang { display: none; }
}
/* ============================================================
Mobile layout (<= 900px)
============================================================ */
@media (max-width: 900px) {
/* the nav's mobile collapse (hamburger + CTA, no language) is handled by the
<=1024 block above; only non-nav mobile rules live here */
/* the fly-to-.chosen animation now runs on every size, so the ghost stays
hidden here too (the visible logos are the descending clones). The
reduced-motion fallback that shows the static ghost lives at end-of-file. */
}
/* ============================================================
Phone layout (<= 620px)
============================================================ */
@media (max-width: 620px) {
/* phone bar is just logo + hamburger; the Get in Touch CTA and the
language switch live inside the drawer at this width */
.nav .nav__cta { display: none; }
.nav__lang { display: none; }
/* 20px gutter everywhere, tighter vertical rhythm */
:root { --pad-x: 20px; --pad-y: 64px; --space-padding: 64px; }
/* ---- buttons: full width, stacked, primary on top ---- */
.btn {
width: 100%;
height: 52px;
padding: 0 var(--space-m);
justify-content: center;
position: relative;
}
.btn__label { font-size: 16px; padding-right: 28px; }
.btn--outline .btn__label { padding-right: 0; }
.btn__tile {
width: 36px;
height: 36px;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
}
.hero__actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-s);
width: 100%;
}
.hero__actions .btn { flex: none; width: 100%; }
.lastCta__actions, .caps__footerCta { width: 100%; display: flex; }
.lastCta__actions .btn, .caps__footerCta .btn { width: 100%; }
.about__cta, .faq__panel .btn { width: 100%; }
/* ---- hero rhythm ---- */
.hero { min-height: 560px; padding-bottom: var(--space-3xl); }
.hero__col { gap: var(--space-xl); }
.hero__text { gap: var(--space-m); }
.hero__badge { padding: 6px var(--space-s) 6px 10px; }
.hero__badge .t-caption-medium { font-size: 12px; line-height: 1.35; }
.hero__title { font-size: clamp(32px, 9vw, 44px); line-height: 1.12; }
/* ---- section rhythm ---- */
.logos { height: 88px; }
.about__intro { padding-top: var(--pad-y); padding-bottom: var(--pad-y); gap: var(--space-xl); }
.counter { padding: var(--pad-y) var(--pad-x); }
.stats { row-gap: var(--space-3xl); }
.caps { padding: var(--pad-y) var(--pad-x); gap: var(--space-3xl); }
.caps__header { gap: var(--space-m); }
.caps__footer { gap: var(--space-xl); }
/* the desktop grid insets its cards; on a phone that would double the
gutter, so the cards sit straight on the 20px edge and the 12px row gap
keeps the "separated cards" treatment */
.caps__grid { padding: 0; }
.capCard { min-height: 440px; padding: var(--space-xl); }
/* taller visual box on each card so the orbit artwork has room to breathe */
.capCard__media { min-height: 260px; }
/* AI card: shrink the centre DDT badge a touch (kept 1:1 square) */
.capAi__badge { width: 116px; height: 116px; padding: 14px; }
.capAi__badge img { width: 82px; }
.ind--head { padding: var(--pad-y) var(--pad-x); }
.ind--rail { padding: 0 0 var(--pad-y) var(--pad-x); }
.indCard { flex-basis: calc(100vw - 56px); height: 420px; padding: var(--space-xl); }
.tst { padding-bottom: var(--space-3xl); }
.tstBox__pin { padding: 0 var(--pad-x); }
/* comfortable left/right padding so the card never runs to the edges */
.tst__stage { padding: var(--space-l) var(--space-l); }
.tst__viewport { padding: var(--space-s); }
.tstCard { padding: var(--space-l); gap: var(--space-m); }
.faq__pin { gap: var(--space-3xl); padding: var(--pad-y) var(--pad-x); }
.faq__panel { min-height: 0; padding: var(--space-xl); }
/* lastCta + footer are both black and stack directly — keep the gap
between the CTA card and the footer logo tight instead of pad-y (64)
on each side */
.lastCta { padding: var(--pad-y) var(--pad-x) var(--space-xl); }
.lastCta__inner { padding: var(--space-3xl) var(--space-l); }
.lastCta__title { font-size: clamp(26px, 7.5vw, 34px); }
.ft__desktop { padding: var(--space-2xl, 32px) var(--pad-x) var(--space-3xl); }
.ft__cols { gap: var(--space-xl); }
.drawerItem__head { font-size: 17px; }
}
/* ============================================================
Animated / pinned sections on mobile
The scroll choreography (sticky pins, the statement light and
the veil handoff) assumes a tall desktop viewport. Below 900px
every pin is released and the light sequence is replaced by a
plain reveal, so nothing depends on scrubbing a pin.
============================================================ */
@media (max-width: 900px) {
/* statement: static, no light wash, both lines simply visible */
.statement { height: auto !important; }
.statement__pin { position: static; height: auto; min-height: 92vh; padding-top: var(--space-6xl, 80px); padding-bottom: var(--space-6xl, 80px); }
.statement__light { display: none; }
.closing__lead, .closing__reveal { opacity: 1 !important; transform: none !important; }
/* let the copy flow naturally (no forced line break) and shrink it to fit */
.closing__lead, .closing__reveal { display: inline; }
.closing__text { font-size: clamp(24px, 6.6vw, 34px); line-height: 1.24; }
.veil { display: none; } /* nothing to hand the light over to */
/* the hand hologram keeps its ambience but never competes with the copy */
.handCanvas { opacity: .68; }
/* capabilities heading flows on one block (no forced line break) */
.caps__title br { display: none; }
/* capabilities no longer has to sit above a veil */
.caps { z-index: auto; }
/* CTA sphere: smaller, and pushed off the copy */
.lastCta__sphere { --sphere-w: 130%; --sphere-x: -34%; --sphere-y: 42%; opacity: .6; }
/* testimonials: the arrows are hidden, so the dots carry the control */
.tst__dots { position: static; transform: none; margin-top: var(--space-l); justify-content: center; }
/* the industries rail becomes a native swipe with snap points */
.ind__rail { scroll-padding-left: var(--pad-x); }
.indCard { scroll-snap-align: start; }
}
/* ============================================================
Button fill sweep — coverage + touch
The flood is a 32px circle sitting over the arrow tile that
scales up. scale(16) reaches ~256px from that origin, which
covers a desktop button but leaves a full-width phone button
(up to ~390px of travel) only half filled. The factor is now
a variable so the mobile range can ask for a longer reach.
============================================================ */
.btn--solid, .btn--purple { --fill-scale: 16; }
.btn--solid:hover::before,
.btn--purple:hover::before { transform: scale(var(--fill-scale)); }
/* touch has no hover: :active gives the same feedback on tap */
.btn--solid:active::before,
.btn--purple:active::before { transform: scale(var(--fill-scale)); }
.btn--solid:active .btn__label { color: var(--color-text-inverse); }
.btn--purple:active .btn__label { color: var(--color-text-brand-primary); }
.btn--solid:active .btn__tile {
background: var(--color-surface-default);
color: var(--color-text-brand-primary);
}
.btn--purple:active .btn__tile {
background: var(--color-surface-brand-primary);
color: var(--color-text-inverse);
}
.btn--outline:active::before { transform: scaleY(1); }
.btn--outline:active .btn__label { color: var(--color-text-brand-primary); }
@media (max-width: 620px) {
/* full-width buttons: the flood has to travel the whole width */
.btn--solid, .btn--purple { --fill-scale: 30; }
}
@media (prefers-reduced-motion: reduce) {
.drawer, .drawerItem__body, .nav__burgerBar, .drawerItem__toggle { transition: none; }
}
/* ============================================================
N3CA Products page (products.html)
============================================================ */
/* jump nav */
/* value props */
/* architecture layers */
/* module rows */
/* ============================================================
Solutions page (solutions.html) — same hero/jump-nav language as
the N3CA products page, its own numbered module rows.
============================================================ */
/* ============================================================
Company page (company.html)
============================================================ */
/* (About Us lives in the COMPANY PAGE PASS block at the end of this file —
the old 12-column/label version was removed when it was rebuilt from Figma) */
/* (the old .coTrust band was replaced by .partners--counter, built from Figma) */
/* values: intro + triforce diagram + 2x2 petal cards */
/* (the value cards are rebuilt from Figma in the COMPANY PAGE PASS at the
end of this file — the old circle version lived here) */
/* vision / mission — dark band, two columns split by a divider */
/* (Leadership is rebuilt from Figma in the COMPANY PAGE PASS at the end of
this file — the old square-avatar version lived here)
(Grow With Us is rebuilt from Figma in the COMPANY PAGE PASS at the end
of this file — the old gradient-teaser version lived here) */
/* ============================================================
BIG MENU / PRODUCTS (Figma "Big Menu - Products", 35470:61129)
1440x444 panel: 188px rail | 742px 3x3 card grid (row-major,
0 gap) | 318px promo panel.
Tokens taken straight from the frame:
surface-brand-primary-subtle #eceafb, border-default #e5e7eb,
Heading/H6 16/24 w500, Body/Small 14/20 w400 ls .028px,
Captions/Medium 12/16 w600 ls .06px
============================================================ */
.mega__panel--n3ca .mega__n3ca {
display: flex;
align-items: stretch;
padding: 0 var(--pad-x);
background: var(--color-surface-default);
}
/* ---- left rail ---- */
.mega__rail {
flex: none;
width: 188px;
display: flex;
flex-direction: column;
gap: var(--space-s);
padding: var(--space-xl) var(--space-s) var(--space-xl) 0;
border-right: 1px solid #e5e7eb;
}
.mega__railLabel {
padding: 0 var(--space-s);
font-family: var(--font-label);
font-weight: 600;
font-size: 12px;
line-height: 16px;
letter-spacing: .06px;
color: var(--color-text-secondary);
}
.railItem {
display: flex;
align-items: center;
gap: var(--space-xss);
padding: var(--space-s);
border-radius: var(--radius-xs);
background: transparent;
transition: background-color .25s ease;
}
/* the rail entry is the N3CA wordmark itself (Figma 68x24), not icon + text.
Height is fixed and the width follows, so the lockup can never squash. */
.railItem__logo {
height: 24px;
width: auto;
flex: none;
display: block;
object-fit: contain;
}
.railItem.is-active,
.railItem:hover { background: #eceafb; }
/* ---- product cards: three columns, three rows, filled row-major ----
(8 items fill the first 8 of 9 cells; no row/column gap — the cards sit
edge-to-edge and only their own padding + hover fill separate them) */
.mega__cards {
flex: none;
width: 742px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row; /* DOM order runs left-to-right, top-to-bottom */
padding: var(--space-xl) var(--space-s) var(--space-xl) var(--space-s);
}
.prodCard {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-xs);
min-height: 132px;
padding: var(--space-m);
border-radius: 8px;
background: var(--color-surface-default);
transition: background-color .25s ease, transform .25s ease;
}
/* product lockups: fixed 28px height, width follows (aspect ratio locked) */
.prodCard__logo { flex: none; height: 28px; display: flex; align-items: flex-start; }
.prodCard__logo img {
height: 28px;
width: auto;
max-width: 53px;
display: block;
object-fit: contain;
}
.prodCard__body { display: flex; flex-direction: column; width: 100%; min-width: 0; }
.prodCard__title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 16px;
line-height: 24px;
color: var(--color-text-primary);
}
.prodCard__desc {
font-family: var(--font-body);
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: .028px;
color: var(--color-text-secondary);
}
.prodCard:hover { background: #eceafb; }
/* ---- promo panel ---- */
.promo {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-s);
padding: var(--space-xl);
border-left: 1px solid #e5e7eb;
border-right: 1px solid #e5e7eb;
overflow: hidden;
}
.promo__head { display: flex; flex-direction: column; gap: var(--space-xss); }
/* "Meet N3CA" is plain bold type in the updated design */
.promo__kicker {
margin: 0;
font-family: var(--font-heading);
font-weight: 700;
font-size: 20px; /* "Meet N3CA" — 20px on desktop */
line-height: 28px;
color: var(--color-text-primary);
}
/* the two promo buttons read SemiBold like the site's other buttons */
.promo__actions .btn .btn__label { font-weight: 600; }
.promo__desc {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: .028px;
color: var(--color-text-secondary);
}
.promo__art {
flex: 1 1 0;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-l);
border-radius: 8px;
background: linear-gradient(129.13deg, #1c47ef 0%, #8639ff 100%);
}
.promo__art img { height: 100%; width: auto; max-width: 100%; display: block; }
/* "Book a Demo" fills the row, "About N3CA" hugs its label */
.promo__actions { display: flex; align-items: stretch; gap: var(--space-xs); flex: none; }
.promo__actions .btn--purple { flex: 1 1 auto; min-width: 0; }
.promo__actions .btn--brandline { flex: 0 0 auto; }
/* the label takes the slack so the arrow tile is pinned to the right edge */
.promo__actions .btn--purple { justify-content: space-between; }
.promo__actions .btn--purple .btn__label { flex: 1 1 auto; text-align: left; }
/* ---- the promo buttons ARE the site .btn component ----
.btn--sm scales it to the Figma 44px spec; .btn--brandline is the outline
treatment in brand colours (the stock .btn--outline is white-on-dark).
Both inherit the flood fill and the two-arrow swap unchanged. */
.btn--sm {
height: 44px;
gap: var(--space-xs);
}
.btn--sm .btn__label { font-size: 14px; line-height: 20px; letter-spacing: .07px; }
.btn--sm.btn--purple { padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-s); }
.btn--sm .btn__tile { width: 28px; height: 28px; }
.btn--sm .btn__arrows { width: 20px; height: 20px; }
.btn--sm .icon-arrow { width: 20px; height: 20px; }
/* brand-coloured outline: purple hairline + purple label, floods purple */
.btn--brandline {
/* white, not transparent — the design places this button on a tinted
gradient where transparent would let the background show through */
background: var(--color-surface-default);
padding: var(--space-s);
}
.btn--brandline .btn__label { color: var(--color-text-brand-primary); transition: color .3s ease; }
.btn--brandline::before {
content: "";
position: absolute;
z-index: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
background: var(--color-surface-brand-primary);
transform: scaleY(0);
transform-origin: bottom;
transition: transform .5s cubic-bezier(.25, .8, .4, 1);
}
.btn--brandline:hover::before,
.btn--brandline:active::before { transform: scaleY(1); }
.btn--brandline:hover .btn__label,
.btn--brandline:active .btn__label { color: var(--color-text-inverse); }
/* hairline on the top layer so the fill can never cover it (same trick as .btn--outline) */
.btn--brandline::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
border: 1px solid var(--color-surface-brand-primary);
border-radius: inherit;
pointer-events: none;
}
/* cards flow in with the same stagger as the other panels */
.nav.is-mega-open .mega__panel--n3ca.is-active .prodCard,
.nav.is-mega-open .mega__panel--n3ca.is-active .railItem,
.nav.is-mega-open .mega__panel--n3ca.is-active .promo > * {
animation: megaCardIn .38s cubic-bezier(.2, .7, .3, 1) both;
animation-delay: calc(var(--i, 0) * 30ms);
}
/* ---- narrower desktops: let the three bands shrink instead of clipping ---- */
@media (max-width: 1439px) {
.mega__cards { width: auto; flex: 1 1 0; min-width: 0; }
.promo { flex: 0 0 300px; }
}
@media (max-width: 1180px) {
.mega__panel--n3ca .mega__n3ca { flex-wrap: wrap; }
.mega__rail { width: 100%; border-right: 0; border-bottom: 1px solid #e5e7eb; padding-bottom: var(--space-s); }
.mega__cards { flex: 1 1 420px; padding-left: 0; padding-bottom: var(--space-xl); }
.promo { flex: 1 1 260px; }
}
@media (max-width: 1180px) {
/* once the bands wrap, the art must not stretch to fill the taller panel */
.promo__art { flex: none; height: 160px; }
.promo__art img { height: 100%; }
}
@media (max-width: 1024px) {
/* one column of cards */
.mega__cards { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.nav.is-mega-open .mega__panel--n3ca.is-active .prodCard,
.nav.is-mega-open .mega__panel--n3ca.is-active .railItem,
.nav.is-mega-open .mega__panel--n3ca.is-active .promo > * { animation: none; }
.prodCard, .railItem { transition: none; }
}
/* ============================================================
PARTNERS (Figma "Partners" 33239:13480)
Brand purple band + the shared 1024px texture at 16%, a
centred H1 and a 4x2 grid of translucent logo tiles.
============================================================ */
.partners {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* a firm full-viewport band on desktop; the grid fits within one screen here.
the narrow layouts below fall back to min-height so the taller stacked grid
is never clipped */
height: 100vh;
gap: 64px;
padding: var(--space-padding) var(--pad-x);
background: var(--color-surface-brand-primary);
overflow: hidden;
isolation: isolate;
}
.partners__texture {
position: absolute;
inset: 0;
z-index: 0;
background-image: var(--texture);
background-size: 1024px 1024px;
background-position: top left;
background-repeat: repeat;
opacity: .08;
pointer-events: none;
}
.partners__title {
position: relative;
z-index: 1;
margin: 0;
max-width: 898px;
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(28px, 3.3333vw, 48px);
line-height: 1.3333;
letter-spacing: -.01em;
text-align: center;
color: var(--color-text-inverse);
}
/* let the title wrap naturally on phones instead of the forced two-line break */
@media (max-width: 620px) {
.partners__title br { display: none; }
}
/* partner logo grid (Figma 33239:13480) — 4 x 2 of translucent white cards,
each holding one white logo optically sized to the same height */
.partners__grid {
position: relative;
z-index: 1;
width: 100%;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-l);
}
.partnerItem {
display: flex;
align-items: center;
justify-content: center;
min-height: 144px;
/* modest side padding so the wider wordmarks (GC, Verihubs, Microsoft) reach
their full Figma width and only spill into the padding like the design */
padding: var(--space-l) var(--space-m);
border-radius: 8px;
background: rgba(255, 255, 255, .1);
transition: background-color .3s ease, transform .3s ease;
}
.partnerItem:hover { background: rgba(255, 255, 255, .16); transform: translateY(-4px); }
/* each logo is drawn at its exact Figma height (--lh); width follows the
native aspect. brightness(0) invert(1) forces every mark to pure white so
they read as one family on the brand-purple cards */
.partnerItem__logo {
display: block;
width: auto;
height: var(--lh, 56px);
max-width: 100%;
object-fit: contain;
filter: brightness(0) invert(1);
}
.partnerItem__more {
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(18px, 1.6667vw, 24px);
line-height: 1.3333;
letter-spacing: -0.005em;
color: var(--color-text-inverse);
white-space: nowrap;
}
@media (max-width: 1024px) {
.partners__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* the grid stacks into more rows here, so let the band grow instead of clip */
.partners { height: auto; min-height: 100vh; }
}
@media (max-width: 760px) {
.partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.partners { gap: var(--space-3xl); }
.partnerItem { min-height: 120px; }
/* scale every logo down together so the smaller cards stay balanced */
.partnerItem__logo { height: calc(var(--lh, 56px) * .8); }
}
@media (prefers-reduced-motion: reduce) {
.partnerItem, .partnerItem:hover { transition: none; transform: none; }
}
/* ============================================================
INDUSTRIES WE SERVE — restyled header (Figma 33195:3778)
Flat mint field instead of the teal + texture treatment, a
dark pill, and dark type. The cards are unchanged.
============================================================ */
/* The teal is set in four places (.ind, .ind--rail, .ind__pin and
.ind--rail .ind__pin), so the mint has to replace all of them or the card
rail keeps the old colour while only the header changes. */
.ind,
.ind--head,
.ind--rail,
.ind__pin,
.ind--rail .ind__pin { background: #e4f9f6; }
.ind__texture { display: none; } /* the new field is flat */
.ind__title { color: var(--color-text-primary); }
/* the section's own pill inverts: dark fill, white label */
.ind__header .pill {
background: var(--color-text-primary);
border-color: var(--color-text-primary);
color: var(--color-text-inverse);
box-shadow: none;
}
/* ============================================================
BIG MENU / COMPANY (Figma "Big Menu - Company", 33353:18300)
Three picture cards, each with its own accent. Panel is
1440x570: 96px gutters, 3 x 400 cards, 24px gaps, 24px inset.
Per-card colour comes from --co (icon + bottom glow) and
--co-soft (the glow's end stop).
============================================================ */
.mega__panel--company .mega__company {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-xl);
padding: var(--space-xl) var(--pad-x);
background: var(--color-surface-default);
}
/* safety net for every panel: never grow past the viewport, whatever the
content or window height */
.mega { max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
.coCard {
--co: var(--color-surface-brand-primary);
--co-soft: #eceafb;
position: relative;
display: flex;
flex-direction: column;
height: 522px;
border: 1px solid #e5e7eb;
border-radius: 16px;
overflow: hidden;
background: var(--color-surface-default);
isolation: isolate;
transition: border-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.2, .7, .3, 1);
}
/* --co drives the icon chip, --co-rgb the gradient's alpha ramp,
--glow-h how far that gradient climbs on hover */
.coCard--story { --co: #4a3dcc; --co-rgb: 74, 61, 204; --glow-h: 30%; }
.coCard--life { --co: #29ccb2; --co-rgb: 41, 204, 178; --glow-h: 40%; }
.coCard--careers { --co: #1d4ed8; --co-rgb: 29, 78, 216; --glow-h: 20%; }
/* faint measuring grid behind everything (Figma "Repeat group 1") */
.coCard__grid {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
repeating-linear-gradient(to right, rgba(17, 24, 39, .055) 0 1px, transparent 1px 66px),
repeating-linear-gradient(to bottom, rgba(17, 24, 39, .055) 0 1px, transparent 1px 66px);
/* the top half fades to white so the copy always sits on a clean field */
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
}
/* Light rising from the bottom edge, in the card's own colour. It sits BEHIND
the photo (z-index 1 vs the artwork's 2) so it glows up around the cut-out
subject, and it is hover-only: at rest a card is just its copy and the photo.
The alpha ramp is eased rather than linear — a straight two-stop fade leaves
a visible shoulder where it meets the white card. These stops thin out
progressively so the top edge dissolves into the white field instead of
ending on a hard line. */
.coCard__glow {
position: absolute;
left: -8%;
right: -8%;
bottom: -10px;
height: 6%;
z-index: 1;
pointer-events: none;
background: linear-gradient(
to top,
rgba(var(--co-rgb), .95) 0%,
rgba(var(--co-rgb), .80) 14%,
rgba(var(--co-rgb), .60) 30%,
rgba(var(--co-rgb), .40) 46%,
rgba(var(--co-rgb), .24) 60%,
rgba(var(--co-rgb), .12) 73%,
rgba(var(--co-rgb), .05) 85%,
rgba(var(--co-rgb), .01) 94%,
rgba(var(--co-rgb), 0) 100%);
opacity: 0;
transition: height .55s cubic-bezier(.2, .7, .3, 1), opacity .45s ease;
}
/* how far the glow climbs, per card — the denser photos need a taller wash to
read, the handshake sits higher so a fifth is enough */
.coCard:hover .coCard__glow,
.coCard:focus-visible .coCard__glow { height: var(--glow-h, 20%); opacity: 1; }
.coCard__content {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-s);
padding: 32px;
flex: none;
}
.coCard__icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-xs);
border-radius: 8px;
background: var(--co);
}
.coCard__icon img { width: 20px; height: 20px; display: block; }
.coCard__title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 24px;
line-height: 32px;
letter-spacing: -.12px;
color: var(--color-text-primary);
}
.coCard__desc {
font-family: var(--font-body);
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: .028px;
color: var(--color-text-secondary);
}
/* ---- artwork well ----
.coCard__art is its own stacking context, so the three layers inside it
order independently of the card: decorative pieces that sit BEHIND the
subject (1), the cut-out photo (2), then pieces that cross in FRONT (3).
This mirrors Figma's layer order for each card. */
.coCard__art { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; }
.coCard__shot { position: absolute; left: 0; width: 100%; z-index: 2; }
/* The photos never move or scale — the crop is baked into the asset so the
whole cut-out is shown as-is, with nothing cropped by a hover transform. */
.coCard__photo {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
object-position: bottom center;
}
/* Each frame takes its height from its own asset's aspect ratio rather than a
percentage of the art well, so frame and image match exactly at any card
width — no letterbox, and nothing cropped. Vertical placement follows Figma:
the towers bleed off the bottom, the team sits on the bottom edge, and the
handshake is centred. */
.coCard--story .coCard__shot { aspect-ratio: 796 / 756; bottom: -18%; }
.coCard--life .coCard__shot { aspect-ratio: 796 / 628; bottom: 0; }
.coCard--careers .coCard__shot { aspect-ratio: 796 / 532; top: 50%; transform: translateY(-50%); }
/* ---- decorative pieces ---- */
.coDeco { position: absolute; display: block; pointer-events: none; }
.coDeco img { width: 100%; height: 100%; display: block; }
/* behind the subject */
.coDeco--graph { left: -11.8%; top: 15.2%; width: 117.7%; height: 48.4%; z-index: 1; }
/* 370px ring, centred on the card, 44px down the 320px art well */
.coDeco--ring { left: 50%; top: 13.75%; width: 92.96%; aspect-ratio: 1 / 1;
transform: translateX(-50%) rotate(180deg); z-index: 1; }
.coDeco--star { left: 37.4%; top: 8.4%; width: 25.1%; aspect-ratio: 149.5 / 146.05; z-index: 1; }
.coDeco--line1 { left: -2.5%; top: 8.6%; width: 114.3%; aspect-ratio: 459 / 269; z-index: 1; }
/* crossing in front of the subject */
.coDeco--line2 { left: 80%; top: 6.5%; width: 31.8%; aspect-ratio: 130.7 / 195.6; z-index: 3; }
.coDeco--line3 { left: -2.5%; top: 54.7%; width: 35.4%; aspect-ratio: 145 / 149.1; z-index: 3; }
/* ============================================================
Cards flow in when the panel opens
============================================================ */
.mega__panel--company .coCard { opacity: 0; transform: translateY(18px); }
.mega__panel--company.is-active .coCard {
animation: coCardIn .5s cubic-bezier(.2, .7, .3, 1) both;
animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes coCardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* ============================================================
Company mega v2 — full-width columns split by thin dividers
(no card boxes). Same layout: icon + title + desc on top, the
photo pinned to the bottom. Replaces the .coCard grid; that
version is kept above but no longer rendered (see main.js).
============================================================ */
.mega__panel--company .coCols {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
background: var(--color-surface-default);
/* keep the side gutter like the other mega menus, plus a little breathing
room at the top */
padding: var(--space-l) var(--pad-x) var(--space-xl);
}
.coCol {
position: relative;
display: flex;
flex-direction: column;
height: 470px; /* a touch shorter than the 522px card */
overflow: hidden;
isolation: isolate;
text-decoration: none;
color: inherit;
border-left: 1px solid #e5e7eb; /* divider between columns */
}
.coCol:first-child { border-left: 0; }
.coCol--story { --co: #4a3dcc; }
.coCol--life { --co: #29ccb2; }
.coCol--careers { --co: #1d4ed8; }
.coCol__content {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-s);
padding: var(--space-xl);
flex: none;
}
.coCol__icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-xs);
border-radius: 8px;
background: var(--co);
}
.coCol__icon img { width: 20px; height: 20px; display: block; }
.coCol__title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 22px;
line-height: 30px;
letter-spacing: -.12px;
color: var(--color-text-primary);
}
.coCol__desc {
font-family: var(--font-body);
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: .028px;
color: var(--color-text-secondary);
}
/* photo well: pinned to the bottom, unchanged crops per item */
.coCol__art { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; }
.coCol__shot { position: absolute; left: 0; width: 100%; z-index: 2; }
.coCol__photo { width: 100%; height: 100%; display: block; object-fit: contain; object-position: bottom center; }
.coCol--story .coCol__shot { aspect-ratio: 796 / 756; bottom: -18%; }
.coCol--life .coCol__shot { aspect-ratio: 796 / 628; bottom: 0; }
.coCol--careers .coCol__shot { aspect-ratio: 796 / 532; top: 50%; transform: translateY(-50%); }
/* subtle hover tint so it still reads as interactive without the card frame */
.coCol::after {
content: "";
position: absolute; inset: 0; z-index: 1;
background: var(--co);
opacity: 0;
transition: opacity .35s ease;
pointer-events: none;
}
.coCol:hover::after, .coCol:focus-visible::after { opacity: .05; }
/* reveal in on open, same timing as the cards */
.mega__panel--company .coCol { opacity: 0; transform: translateY(18px); }
.mega__panel--company.is-active .coCol {
animation: coCardIn .5s cubic-bezier(.2, .7, .3, 1) both;
animation-delay: calc(var(--i, 0) * 70ms);
}
/* ============================================================
Decorations are HOVER-ONLY extras
At rest a card is just its content and the cut-out photo;
pointing at it flows the graph / ellipse / star / dashed
lines in behind and across the subject.
These are transitions rather than keyframes on purpose: they
are reversible, so they play forwards on enter and unwind on
leave, and they replay on every hover with no class juggling.
Stagger lives in the :hover rules, so the exit is quick and
together while the entrance arrives in sequence.
============================================================ */
.coDeco {
opacity: 0;
transition: opacity .4s ease, transform .55s cubic-bezier(.2, .7, .3, 1);
}
.coCard:hover .coDeco,
.coCard:focus-visible .coDeco { opacity: 1; }
/* the graph draws itself, flowing from the left end toward the top right.
The path data runs right-to-left, so a NEGATIVE dash offset easing to 0
reveals it from the far (left) end forward. */
.coDeco__draw {
stroke-dashoffset: calc(var(--len, 620) * -1);
transition: stroke-dashoffset 1.05s cubic-bezier(.33, 0, .2, 1);
}
.coCard:hover .coDeco__draw,
.coCard:focus-visible .coDeco__draw { stroke-dashoffset: 0; }
/* The ring draws instead of scaling, so its transform is pure placement and
must not change on hover. Only ~58% of the circumference is ever drawn:
that covers the arc from 9 through 12 to past 3, which is everything
visible above the photo — so the whole animation is on screen rather than
spending half its time tracing a hidden bottom edge. */
.coDeco__draw--ring {
stroke-dashoffset: var(--len, 1125);
transition: stroke-dashoffset 1.1s cubic-bezier(.33, 0, .2, 1);
}
.coCard:hover .coDeco__draw--ring,
.coCard:focus-visible .coDeco__draw--ring { stroke-dashoffset: calc(var(--len, 1125) * .42); }
.coDeco--star { transform: scale(.42) rotate(-24deg); }
.coCard:hover .coDeco--star,
.coCard:focus-visible .coDeco--star { transform: scale(1) rotate(0deg); }
/* dashed lines already carry a dash pattern, so animating the offset would
make the dashes march; they wipe in from the left instead */
.coDeco--line1, .coDeco--line2, .coDeco--line3 {
clip-path: inset(0 100% 0 0);
transition: opacity .35s ease, clip-path .8s cubic-bezier(.33, 0, .2, 1);
}
.coCard:hover .coDeco--line1, .coCard:focus-visible .coDeco--line1,
.coCard:hover .coDeco--line2, .coCard:focus-visible .coDeco--line2,
.coCard:hover .coDeco--line3, .coCard:focus-visible .coDeco--line3 {
clip-path: inset(0 0 0 0);
}
/* entrance stagger (exit has no delay, so it unwinds cleanly as one) */
.coCard:hover .coDeco--graph { transition-delay: .05s; }
.coCard:hover .coDeco__draw { transition-delay: .08s; }
.coCard:hover .coDeco--ring { transition-delay: .05s; }
.coCard:hover .coDeco--star { transition-delay: .12s; }
.coCard:hover .coDeco--line1 { transition-delay: .05s; }
.coCard:hover .coDeco--line3 { transition-delay: .16s; }
.coCard:hover .coDeco--line2 { transition-delay: .26s; }
/* ---- responsive ----
The cards stay in three columns for the whole desktop range and just get
shorter. Stacking them would make the panel taller than the viewport, which
would put the last card out of reach. Below 900px the mega menu is hidden
entirely and the drawer takes over. */
@media (max-width: 1240px) {
.coCard { height: 460px; }
.coCard__content { padding: var(--space-xl); }
.coCard__title { font-size: 20px; line-height: 28px; }
}
@media (max-width: 1080px) {
.mega__panel--company .mega__company { gap: var(--space-s); }
.coCard { height: 400px; }
.coCard__content { padding: var(--space-m); gap: var(--space-xs); }
.coCard__title { font-size: 18px; line-height: 26px; }
.coCard__desc { font-size: 13px; line-height: 18px; }
.coCard__icon { padding: 6px; }
.coCard__icon img { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.mega__panel--company .coCard { opacity: 1; transform: none; }
.mega__panel--company.is-active .coCard { animation: none; }
/* decorations still appear on hover, they just arrive instantly */
.coCard, .coCard__glow, .coDeco, .coDeco__draw, .coDeco__draw--ring,
.coDeco--line1, .coDeco--line2, .coDeco--line3 { transition: none; }
/* only the pieces that animate their transform are reset — the ring's
transform is placement (centring + the half turn), so it must survive */
.coCard:hover .coDeco--star { transform: none; }
.coCard:hover .coDeco__draw { stroke-dashoffset: 0; }
.coCard:hover .coDeco__draw--ring { stroke-dashoffset: calc(var(--len, 1125) * .42); }
}
/* ============================================================
COMPANY PAGE PASS
============================================================ */
/* ============================================================
1. About Us (Figma 33236:8470)
Section 120/96, row gap 120, a 506px heading column and the
copy on flex-1. Figma's own annotation on the frame reads
"Left side sticky, right side scroll", so the heading pins
while the paragraphs pass it. No icon in the design.
============================================================ */
.coIntro {
display: flex;
align-items: flex-start; /* not stretch, or sticky has no room */
gap: var(--space-padding); /* 120 */
padding: var(--space-padding) var(--pad-x);
background: var(--color-surface-default);
}
.coIntro__heading {
position: sticky;
top: calc(var(--nav-h) + var(--space-3xl));
flex: 0 0 506px;
max-width: 506px;
margin: 0;
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(28px, 2.7778vw, 40px); /* 40 at 1440 */
line-height: 1.3; /* 52 / 40 */
letter-spacing: -.01em; /* -0.4 at 40 */
color: var(--color-text-primary);
}
/* the two accents are bold italic, in brand purple then teal */
.coIntro__brand,
.coIntro__teal { font-weight: 700; font-style: italic; }
.coIntro__brand { color: var(--color-text-brand-primary); }
.coIntro__teal { color: var(--color-text-brand-secondary); }
.coIntro__body {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-xl); /* 24 */
}
.coIntro__body p {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: clamp(16px, 1.25vw, 18px);
line-height: 1.5556; /* 28 / 18 */
color: var(--color-text-primary);
opacity: .8; /* Figma sets 80% on both paragraphs */
}
/* ============================================================
2. Partnership (Figma 33275:23515)
The homepage partners band with the counter row sharing the
same purple field below it. One section, so the noise texture
is a single continuous layer instead of restarting mid-field.
Figma annotates the partners band itself as 100vh; the
counter sits underneath it.
============================================================ */
/* The 100vh sits on the SECTION, not on the band. Putting it on the band made
the band centre its content inside a full viewport and then stack the
counter underneath, which opened a large dead gap between the logo grid and
the numbers. With the section holding the height, the band sizes to its
content and Figma's own paddings (120 / 40 · 40 / 120) set the rhythm —
which lands at roughly a viewport anyway. */
.partners--counter {
min-height: 100vh;
justify-content: center;
gap: 0;
padding: 0 var(--pad-x);
}
.partners--counter .partners__band {
position: relative;
z-index: 1;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 64px;
padding: var(--space-padding) 0 var(--space-3xl); /* 120 top, 40 bottom */
}
/* counter row: four columns spread edge to edge, 40 above / 120 below */
.partners--counter .stats {
position: relative;
z-index: 1;
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3xl);
padding: var(--space-3xl) 0 var(--space-padding);
background: none;
}
.partners--counter .stats__item {
display: flex;
flex-direction: column;
gap: var(--space-l); /* 20 */
flex: 0 1 auto;
min-width: 0;
}
.partners--counter .stats__value {
margin: 0;
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(36px, 4.4444vw, 64px); /* 64 at 1440 */
line-height: 1.125; /* 72 / 64 */
letter-spacing: -.01em;
color: var(--color-text-inverse);
white-space: nowrap;
}
.partners--counter .stats__label {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: clamp(15px, 1.25vw, 18px);
line-height: 1.5556; /* 28 / 18 */
color: var(--color-text-inverse);
white-space: nowrap;
}
@media (max-width: 900px) {
.partners--counter { min-height: auto; }
.partners--counter .partners__band { padding-top: var(--pad-y); gap: var(--space-3xl); }
.partners--counter .stats {
flex-wrap: wrap; justify-content: center;
gap: var(--space-4xl, 48px) var(--space-xl);
padding-bottom: var(--pad-y);
}
/* centred, larger stats on touch */
.partners--counter .stats__item { flex: 1 1 40%; align-items: center; text-align: center; gap: var(--space-s); }
.partners--counter .stats__value { font-size: clamp(40px, 12vw, 52px); }
/* larger label so it balances the big number on phones */
.partners--counter .stats__label { white-space: normal; font-size: clamp(17px, 4.8vw, 20px); }
}
@media (max-width: 560px) {
.partners--counter .stats__item { flex: 1 1 100%; }
}
/* ============================================================
3. Dream / Deliver / Top Notch
Figma "Value" is a 920x710 group: a 460x355 triangle on top
(x230) and two below it (x0 and x460, y355). Each face is
clipped to its own triangle so hover hit-testing follows the
shape — the boxes overlap heavily, so a rectangular hit area
would fire the wrong face. The rounded outline lives in the
SVG, which sits inside the sharp clip and is never cut by it.
============================================================ */
.coTri {
display: none; /* Dream/Deliver/Top Notch triangle section hidden per request */
position: relative;
min-height: 100svh;
align-items: center;
justify-content: center;
/* Vertical padding gives way before the art does. Everything inside the
group is sized as a fraction of it, so the group reaching its 920px
design width is what puts the type at its design size — 120px of padding
on a 900px screen would hold it at 855 and shrink the copy with it.
Yields the full 120 on a tall screen, 95 at 1440x900, never below 48. */
--tri-pad-y: clamp(48px, calc((100svh - 710px) / 2), var(--pad-y));
padding: var(--tri-pad-y) var(--pad-x);
background: var(--color-surface-default);
text-align: center;
overflow: hidden;
}
/* holds the grain pattern only; must stay in the layer tree for url(#) to
resolve, so it is collapsed rather than display:none */
.coTri__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Height is the binding constraint now that the section is one screen tall:
the group takes all the room the padding leaves and the width follows from
the ratio, falling back to the container width on narrow viewports.
Constraining height and width independently is what squashes the triangles.
No 920px cap — the composition is vector plus container-relative type, so
it scales up cleanly on a tall screen. */
.coTri__group {
position: relative;
width: min(100%, calc((100svh - 2 * var(--tri-pad-y)) * 920 / 710));
aspect-ratio: 920 / 710;
container-type: inline-size;
}
/* the group is the reveal target, but it drives its own choreography below
rather than the generic fade-and-rise */
.coTri__group.reveal-up { opacity: 1; transform: none; transition: none; }
/* The cell boxes cover the empty wedges between the triangles, so a plain
rectangle would fire the wrong face for a pointer in the gap. A clip-path
on the face fixes the hit area but also shaves the stroke: the rounded
path's straight edges are collinear with the sharp clip, so half the stroke
falls outside it, and near the apex the arc runs within a pixel of the clip
and loses the stroke almost entirely. So nothing is clipped — the face
passes pointer events through and the filled path takes the hits, which
also makes the hit area follow the real rounded outline. */
.triFace {
position: absolute;
width: 50%; /* 460 of 920 */
height: 50%; /* 355 of 710 */
margin: 0;
padding: 0;
border: 0;
background: none;
pointer-events: none;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.triFace--dream { left: 25%; top: 0; --dd: 0s; }
.triFace--deliver { left: 0; top: 50%; --dd: .16s; }
.triFace--topnotch { left: 50%; top: 50%; --dd: .32s; }
/* overflow:visible so the outer half of the stroke on the base line is not
trimmed by the SVG viewport, which sits exactly on it */
.triFace__shape {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.triFace__fill {
pointer-events: auto;
cursor: pointer;
fill: var(--color-surface-default);
stroke: var(--color-border-default);
/* 2 user units, which is a true 2px at the 920 design width and scales with
the group either side of it — same rule as the type.
Do NOT add vector-effect: non-scaling-stroke here. Chrome then measures
the dash pattern below in screen space while pathLength normalises against
user space, so above 1x the dash runs out before the path does and the
closing segment (the whole left edge, up to the apex) never paints. */
stroke-width: 2;
transition: fill .42s cubic-bezier(.2, .7, .3, 1), stroke .42s ease;
}
/* the grain rides the same path, so it is bounded by the rounded outline
instead of the sharp hit-test clip */
.triFace__grain {
fill: url(#triGrain);
opacity: 0;
transition: opacity .42s ease;
pointer-events: none;
}
/* ---- reveal: each outline draws itself, then its label arrives ---- */
.triFace__fill {
stroke-dasharray: 1; /* pathLength="1", so no JS measuring */
stroke-dashoffset: 1;
}
.coTri__group.is-in .triFace__fill {
stroke-dashoffset: 0;
transition:
stroke-dashoffset 1.15s cubic-bezier(.3, .7, .3, 1) var(--dd, 0s),
fill .42s cubic-bezier(.2, .7, .3, 1),
stroke .42s ease;
}
.triFace__copy {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(10px);
transition: opacity .55s ease, transform .55s ease;
pointer-events: none;
}
.coTri__group.is-in .triFace__copy {
opacity: 1;
transform: none;
transition-delay: calc(var(--dd, 0s) + .5s);
}
/* ---- label and description trade places ----
both sit low in the triangle where it is widest: Figma puts the label
baseline at 65% of the cell and the copy block centre at 86% */
.triFace__label,
.triFace__desc {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
transition: opacity .3s ease;
}
.triFace__label {
top: 63%;
font-family: var(--font-heading);
font-weight: 500;
font-size: max(14px, 3.4783cqw); /* 32 of 920, locked to the group */
line-height: 1.375;
letter-spacing: -0.005em;
color: var(--color-text-primary);
white-space: nowrap;
transition: opacity .3s ease, color .3s ease;
}
/* Figma centres a 340-wide block at 86%, sized for 14px copy that fits on
three lines. At 16px the two longer descriptions need a fourth line, which
pushes the block into the narrowing part of the triangle at the top and
against the base at the bottom. 330 wide at 84% is the measured fit: every
line clears the sloped edges by at least 8px and the base by at least 12. */
.triFace__desc {
top: 84%;
width: 35.87cqw; /* 330 of 920 */
font-family: var(--font-body);
font-weight: 400;
/* Body/Medium 16/24. Purely proportional — a px floor here would push the
copy wider than the triangle is at that height and spill it over the
sloped edges, which is exactly what the group sizing above prevents. */
font-size: 1.7391cqw; /* 16 of 920 */
line-height: 1.5; /* 24 */
letter-spacing: 0;
color: var(--color-text-inverse);
opacity: 0;
}
.triFace:hover .triFace__fill,
.triFace:focus-visible .triFace__fill,
.triFace.is-open .triFace__fill {
fill: var(--color-surface-brand-primary);
stroke: var(--color-surface-brand-primary);
}
.triFace:hover .triFace__grain,
.triFace:focus-visible .triFace__grain,
.triFace.is-open .triFace__grain { opacity: .08; }
.triFace:hover .triFace__label,
.triFace:focus-visible .triFace__label,
.triFace.is-open .triFace__label { opacity: 0; }
.triFace:hover .triFace__desc,
.triFace:focus-visible .triFace__desc,
.triFace.is-open .triFace__desc { opacity: 1; }
/* Below roughly a 560px group the description cannot fit inside the triangle
at its locked ratio, so the label stays and turns inverse instead. */
@container (max-width: 560px) {
.triFace__desc { display: none; }
.triFace:hover .triFace__label,
.triFace:focus-visible .triFace__label,
.triFace.is-open .triFace__label {
opacity: 1;
color: var(--color-text-inverse);
}
}
/* the mark sits on the centroid of the inverted middle triangle
(x 460, y 482 of the 920x710 group) — not eyeballed to the box centre */
.coTri__logo {
position: absolute;
left: 50%;
top: 67.89%;
transform: translate(-50%, -50%);
width: 18.04%; /* 166 of 920 */
height: auto;
pointer-events: none;
z-index: 2;
opacity: 0;
transition: opacity .6s ease;
}
.coTri__group.is-in .coTri__logo { opacity: 1; transition-delay: 1.05s; }
/* ============================================================
5. Vision / Mission — parallax photo, and a rail whose dot
rides the leading edge of a line drawn top to bottom as the
section scrolls through.
============================================================ */
/* The section is only a runway; the Figma frame is .coVM__pin, which is one
viewport tall and sticks while the page scrolls the runway past it.
main.js scrubs --p (0..1 across the runway) and derives --dot, --vis, --mis
from it. No overflow on the runway itself or the sticky stops working. */
.coVM {
position: relative;
height: 220vh;
background: #000;
}
/* Our Purpose — single centred statement reusing the coVM bg + scrim.
Overrides the two-column scroll runway (no pin/rail here). */
.coVM--purpose {
height: auto;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-padding) var(--pad-x);
overflow: hidden;
isolation: isolate;
text-align: center;
}
.coPurpose {
position: relative;
z-index: 3;
max-width: 900px;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-l);
}
.coPurpose__title {
margin: 0;
font-family: var(--font-heading);
font-weight: 600;
font-size: clamp(38px, 5.6vw, 72px);
line-height: 1.14;
letter-spacing: -0.02em;
color: var(--color-text-inverse);
}
.coPurpose__desc { max-width: 56ch; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; }
/* on touch it needn't fill the viewport — just breathe with generous padding */
@media (max-width: 900px) {
.coVM--purpose { min-height: 0; padding-top: var(--space-6xl, 80px); padding-bottom: var(--space-6xl, 80px); }
}
.coVM__pin {
position: sticky;
top: 0;
height: 100svh;
display: flex;
align-items: stretch;
gap: var(--space-3xl); /* 40 */
padding: var(--space-padding) var(--pad-x); /* 120 / 96 */
overflow: hidden;
isolation: isolate;
}
/* fills the pinned frame exactly and never moves — no parallax overscan */
.coVM__bg { position: absolute; inset: 0; z-index: 0; }
.coVM__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coVM__scrim {
position: absolute;
inset: 0;
z-index: 1;
background: rgba(0, 0, 0, .7); /* the flat 70% scrim from the frame */
}
/* ---- columns: vision anchors to the top, mission to the bottom ---- */
.coVM__col {
position: relative;
z-index: 3;
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-xl); /* 24 */
}
.coVM__eyebrow {
font-family: var(--font-heading);
font-style: italic;
font-weight: 500;
font-size: 16px;
line-height: 1.5; /* 24 */
color: var(--color-text-brand-secondary);
}
.coVM__title {
margin: 0;
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(26px, 2.7778vw, 40px);
line-height: 1.3; /* 52 */
letter-spacing: -0.01em;
color: var(--color-text-inverse);
}
.coVM__desc { margin: 0; color: var(--color-text-inverse); }
/* ---- rail: 20px dot over a 2px line, both centred in a 20px column ---- */
.coVM__rail {
position: relative;
z-index: 3;
flex: none;
width: 20px;
align-self: stretch;
}
.coVM__railTrack,
.coVM__railFill {
position: absolute;
left: 50%;
margin-left: -1px;
width: 2px;
top: 10px; /* starts under the dot's home position */
background: var(--color-surface-brand-secondary);
}
.coVM__railTrack { bottom: 0; opacity: .3; }
.coVM__railFill { height: calc(var(--dot, 0) * (100% - 10px)); }
.coVM__railDot {
position: absolute;
left: 50%;
top: calc(10px + var(--dot, 0) * (100% - 10px));
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border-radius: var(--radius-full);
background: var(--color-surface-brand-secondary);
}
/* ---- 6. Grow With Us ---- */
/* ============================================================
Grow With Us (Figma 33240:13814)
Two equal flex columns, 120/96 padding, 40 gap. The gradient
is Figma's four literal stops, not an approximation.
============================================================ */
.coGrow {
display: flex;
align-items: center;
gap: var(--space-3xl); /* 40 */
padding: var(--space-padding) var(--pad-x);
background: linear-gradient(103.3deg,
#e4f9f6 0%, /* brand-secondary-subtle */
#fffbeb 43.269%, /* warning-subtle */
#f3f6ff 66.346%, /* info-subtle */
#eceafb 100%); /* brand-primary-subtle */
overflow: hidden;
}
.coGrow__text {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-xl); /* 24 */
}
.coGrow__title {
margin: 0;
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(30px, 3.3333vw, 48px); /* 48 at 1440 */
line-height: 1.3333; /* 64 / 48 */
letter-spacing: -.01em;
color: var(--color-text-primary);
}
/* Body/Medium in the design — 16/24, not the 18/28 large size */
.coGrow__desc {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: var(--color-text-secondary);
}
.coGrow__actions { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
/* Figma's button paddings for this section */
.coGrow__actions .btn--purple { padding: var(--space-s) var(--space-xs) var(--space-s) var(--space-s); }
.coGrow__actions .btn--brandline { padding: var(--space-s) var(--space-xl); }
/* circular crop that bleeds off the right edge, as in the design */
/* Not a circle. Figma rounds three corners to the full radius and leaves one
square, then mirrors the frame (rotate 180 + flip Y) — which lands the
square corner at the BOTTOM RIGHT. */
.coGrow__visual {
position: relative;
flex: 1 1 0;
min-width: 0;
height: 604px;
border-radius: var(--radius-full) var(--radius-full) 0 var(--radius-full);
overflow: hidden;
background: none;
}
.coGrow__visual::after { content: none; }
.coGrow__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ---- responsive ---- */
@media (max-width: 1024px) {
.coIntro { flex-direction: column; gap: var(--space-3xl); }
.coIntro__heading { position: static; flex: none; max-width: none; }
/* two columns plus a viewport-tall pin do not fit a phone: the frame stops
being pinned, the columns stack, and the rail runs down their left edge */
.coVM { height: auto; }
.coVM__pin {
position: static;
height: auto;
flex-direction: column;
gap: var(--space-3xl);
padding: var(--pad-y) var(--pad-x);
}
.coVM__col--vision,
.coVM__col--mission {
order: 0;
opacity: 1;
transform: none;
padding-left: var(--space-3xl);
}
.coVM__rail {
position: absolute;
left: var(--pad-x);
top: var(--pad-y);
bottom: var(--pad-y);
align-self: auto;
}
.coVM__railFill { height: calc(var(--dot, 0) * (100% - 10px)); }
.coGrow { flex-direction: column; align-items: stretch; padding: var(--pad-y) var(--pad-x); }
.coGrow__visual { flex: none; width: 100%; height: min(460px, 78vw); }
}
@media (max-width: 620px) {
/* full-width, stacked CTAs on phones */
.coGrow__actions { flex-direction: column; align-items: stretch; width: 100%; }
.coGrow__actions .btn { width: 100%; justify-content: center; }
}
@media (max-width: 1024px) {
/* the triangle set (Dream/Deliver/Top Notch) duplicates the hero on touch and
never lays out cleanly on a phone — hide it */
.coTri { display: none; }
}
@media (max-width: 760px) {
/* a phone screen cannot hold the group at its ratio and stay legible, so
the section stops being a pinned screen and just wraps the art */
.coTri { min-height: 0; }
.coTri__group { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.triFace__fill, .triFace__grain, .triFace__label, .triFace__desc { transition: none; }
.triFace__fill { stroke-dashoffset: 0; }
.triFace__copy, .coTri__logo { opacity: 1; transform: none; transition: none; }
}
/* ============================================================
COMPANY HERO (Figma "Hero Section" 33229:4504, 1440x900)
Built as its own block rather than reusing the homepage hero,
so the two can diverge without one breaking the other.
Frame: padding 0 96 80, column, space-between; 80px nav
spacer; content row gap 80 with a 612px copy column.
============================================================ */
.coHero {
position: relative;
height: 100vh;
min-height: 640px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0 var(--pad-x) var(--space-6xl);
overflow: hidden;
isolation: isolate;
}
.coHero__bg { position: absolute; inset: 0; z-index: -2; }
.coHero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* exactly the two stops Figma uses: a short wash under the nav, and a long
rise to solid black at the base so the copy always has contrast */
.coHero__scrim {
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 11.944%),
linear-gradient(180deg, rgba(0, 0, 0, 0) 42.778%, rgba(0, 0, 0, 1) 100%);
}
.coHero__navspace { height: var(--nav-h); width: 100%; flex: none; }
.coHero__content {
display: flex;
align-items: flex-start;
gap: var(--space-6xl);
width: 100%;
}
.coHero__col {
flex: 0 1 612px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 32px; /* copy block -> buttons */
}
.coHero__aside { flex: 1 1 0; min-width: 0; align-self: stretch; }
.coHero__text { display: flex; flex-direction: column; gap: var(--space-xl); }
.coHero__title {
margin: 0;
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(38px, 4.4444vw, 64px); /* 64 at 1440 */
line-height: 1.125; /* 72 / 64 */
letter-spacing: -.01em;
color: var(--color-text-inverse);
}
.coHero__lead {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: clamp(16px, 1.25vw, 18px);
line-height: 1.5556; /* 28 / 18 */
color: var(--color-text-inverse);
}
.coHero__actions { display: flex; align-items: center; gap: var(--space-xs); }
/* radius now comes from --radius-btn globally; only the paddings are local */
.coHero__actions .btn--solid { padding: var(--space-s) var(--space-xs) var(--space-s) var(--space-s); }
.coHero__actions .btn--outline { padding: var(--space-s) var(--space-xl); }
@media (max-width: 900px) {
.coHero__content { display: block; }
.coHero__col { flex: none; width: 100%; }
.coHero__aside { display: none; }
.coHero__title br { display: none; } /* let the title flow, no forced break */
.coHero__nowrap { white-space: nowrap; } /* but keep "Top Notch." together */
}
@media (max-width: 620px) {
.coHero { min-height: 560px; padding-bottom: var(--space-3xl); }
.coHero__col { gap: var(--space-xl); }
.coHero__text { gap: var(--space-m); }
.coHero__actions { flex-direction: column; align-items: stretch; gap: var(--space-s); width: 100%; }
.coHero__actions .btn { width: 100%; }
}
/* ============================================================
NAV CTA — single source of truth
This button was previously styled across eight separate
places (base, --scrolled, .is-mega-open, .nav:hover, the
generic .btn--solid flood, the tile-inversion pass, the
outline pass, mobile), and they disagreed about hover. Every
state now lives here, and this block sits last so it wins.
Rest, over the hero : white button, purple label/tile/stroke
Rest, over solid nav : purple button, white label/tile
Hover, ALWAYS : white button, purple stroke, purple
label, purple arrow box (white arrow)
============================================================ */
/* the flood is always white, so hover lands on the white treatment from
either resting state instead of running purple-over-white one way and
white-over-purple the other */
.nav .nav__cta::before { background: var(--color-surface-default); }
/* ---- rest: solid-nav treatment (scrolled, mega open, or bar hovered) ---- */
.nav--scrolled .nav__cta,
.nav.is-mega-open .nav__cta,
.nav.is-drawer-open .nav__cta { background: var(--color-surface-brand-primary); }
.nav--scrolled .nav__cta .btn__label,
.nav.is-mega-open .nav__cta .btn__label { color: var(--color-text-inverse); font-weight: 600; }
.nav--scrolled .nav__cta .btn__tile,
.nav.is-mega-open .nav__cta .btn__tile {
background: var(--color-surface-default);
color: var(--color-text-brand-primary);
}
/* the hairline is purple in every state, so it reads on white and edges the
purple fill without disappearing into it */
.nav .nav__cta::after { color: var(--color-surface-brand-primary); }
/* ---- hover: one target, whatever the bar is doing ---- */
.nav .nav__cta:hover .btn__label,
.nav .nav__cta:focus-visible .btn__label { color: var(--color-text-brand-primary); }
.nav .nav__cta:hover::after,
.nav .nav__cta:focus-visible::after { color: var(--color-surface-brand-primary); }
.nav .nav__cta:hover .btn__tile,
.nav .nav__cta:focus-visible .btn__tile {
background: var(--color-surface-brand-primary);
color: var(--color-text-inverse);
}
/* ==================================================================
COMPANY — VALUE BOX (Figma 35006:16994, annotated "100 vh")
Two rows of two. Each row pairs a wide card with a narrow one and
the pairing mirrors on the second row. The wide cards carry their
copy at the top, the tinted ones at the bottom, so the empty halves
fall on a diagonal.
Figma draws the cards at a fixed 520px, which with the 120px padding
makes the frame 1304 tall — taller than the viewport it is annotated
to fill. The section is pinned to one screen instead and the rows
share whatever height is left, so 520 is what you get on a 1304px
screen and less on a shorter one. They never compress past their own
copy: below that the section grows and scrolls normally.
================================================================== */
.coValues {
display: flex;
flex-direction: column;
gap: var(--space-3xl); /* 40 */
padding: var(--pad-y) var(--pad-x); /* 120 / 96 at the design width */
background: var(--color-surface-default);
}
.coValues__rows {
display: flex;
flex-direction: column;
gap: var(--space-xl); /* 24 */
width: 100%;
}
/* fr tracks rather than flex-basis: a flex item cannot shrink below its own
padding + border, which skews a 0-basis grow ratio. Grid splits the free
space cleanly, so the 718 / 506 pairing holds at any width and the wide
card stays the wide one past 1440 instead of being overtaken.
min-height stays auto so a row never crushes below its own copy. */
.coValues__row {
display: grid;
gap: var(--space-xl); /* 24 */
}
.coValues__row--wideFirst { grid-template-columns: 718fr 506fr; }
.coValues__row--wideLast { grid-template-columns: 506fr 718fr; }
.coValues__card {
display: flex;
flex-direction: column;
justify-content: flex-start;
min-width: 0;
height: 520px; /* Figma desktop card height */
padding: var(--space-3xl); /* 40 */
border: 1px solid var(--color-border-default);
border-radius: var(--radius-m); /* 12 */
background: var(--color-surface-default);
overflow: hidden;
}
.coValues__body {
display: flex;
flex-direction: column;
gap: var(--space-s); /* 12 */
width: 100%;
}
.coValues__title {
margin: 0;
font-family: var(--font-heading);
font-weight: 700; /* Bold, not the H3 token's 500 */
font-size: clamp(24px, 2.2222vw, 32px);
line-height: 1.375; /* 44 */
letter-spacing: -0.005em;
color: var(--color-text-primary);
}
.coValues__desc {
margin: 0;
color: var(--color-text-secondary);
}
.coValues__title--brand { color: var(--color-text-brand-primary); }
.coValues__title--center { text-align: center; }
/* every value card sits on white now; the visual carries the colour */
.coV { position: relative; justify-content: space-between; }
/* ---------- Card 1: Growth — bars grow, the DDT mark hops across them ----------
the bars run flush to the card's bottom edge (no bottom padding), the DDT gets
headroom above the tallest bar */
.coV--growth { padding-bottom: 0; }
.coBars {
position: relative;
flex: 1 1 auto;
display: flex;
align-items: flex-end;
min-height: 0;
margin-top: var(--space-l);
}
.coBars__chart { display: flex; align-items: flex-end; gap: clamp(12px, 3.4%, 34px); width: 100%; height: 100%; }
.coBars__bar {
flex: 1 1 0;
height: 0; /* main.js grows each to var(--h)% */
border-radius: 10px 10px 0 0;
background: #ECEAFB;
transition: height .6s cubic-bezier(.34, 1.3, .5, 1);
}
.coBars__bar--lead { background: var(--color-surface-brand-primary, #4A3DCC); }
.coBars__ddt {
position: absolute;
left: 0; bottom: 0;
width: clamp(48px, 12%, 74px);
transform: translate(-50%, 0);
opacity: 0;
will-change: left, bottom, transform;
transition: left .5s cubic-bezier(.45, 0, .25, 1), bottom .5s cubic-bezier(.4, 0, .3, 1);
}
.coBars__ddt img { width: 100%; display: block; }
/* a gentle hop: soft arc up with a light squash on landing (not too springy) */
@keyframes coHop {
0% { transform: translate(-50%, 0) scale(1, 1); }
40% { transform: translate(-50%, -26px) scale(.98, 1.04); }
72% { transform: translate(-50%, 0) scale(1.05, .96); }
100% { transform: translate(-50%, 0) scale(1, 1); }
}
/* ---------- Card 2: Exceptional Talent — rotating star behind the team (Figma 35006:17003) ---------- */
.coV--talent { padding: 0; align-items: stretch; }
/* title is an opaque white strip above the art, so the spinning star can fan up
right to its edge but never overlaps the text */
.coV--talent .coValues__title {
position: relative;
z-index: 2; /* stays above the star; no bg band so the top reads plain */
padding: var(--space-3xl); /* 40, per Figma title block */
width: 100%;
text-align: center;
color: #000; /* black title (per request) */
}
/* only the CARD clips (rounded corners) — this frame does not */
.coTalent { position: relative; flex: 1 1 0; width: 100%; min-height: 0; }
/* 6-point star spinning behind the team; centre 168px below the frame midline
(Figma). It over-runs the sides (card clips them) and the title strip masks
its top, so it fills the gap under the text without touching it. */
.coTalent__star {
position: absolute;
left: 50%; top: calc(50% + 168px);
width: 150%; max-width: 150%; height: auto; /* override the global img max-width:100% cap */
transform: translate(-50%, -50%);
transform-origin: center;
animation: coSpin 46s linear infinite;
z-index: 0;
}
/* team photo fills the frame, flush to the bottom, no padding (Figma 506x388) */
.coTalent__people {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: bottom center;
z-index: 1;
}
@keyframes coSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* ---------- shared cable pulses (Financial + Built) ---------- */
.coCables { position: absolute; inset: 0; width: 100%; height: 100%; }
.coCables__lines path { fill: none; stroke: rgba(74, 61, 204, .16); stroke-width: 1.4; }
.coCables__pulse circle { fill: #4A3DCC; filter: drop-shadow(0 0 4px rgba(74, 61, 204, .9)); }
/* ---------- Card 3: Financial-Grade — 12x radial cable burst + layered shield ----------
Figma 35006-17312. Visual frame is 506x392; the cable SVG maps 1:1 to it, and the
three shield layers are concentric at the frame centre (widths are % of 506). */
.coV--fin { justify-content: flex-end; padding: 0; }
.coV--fin .coValues__body { padding: 0 clamp(20px, 4vw, var(--space-3xl)) clamp(20px, 4vw, var(--space-3xl)); }
.coFin { position: relative; flex: 1 1 0; width: 100%; min-height: 0; overflow: hidden; }
.coCables--fin { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.coCables--fin .coCables__lines { fill: none; }
.coCables--fin .coMeteors circle,
.coCables--fin .coMeteors ellipse { fill: #4A3DCC; }
.coFin__ghost, .coFin__white, .coFin__shield {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
height: auto; max-width: none;
}
.coFin__ghost { width: 64.81%; z-index: 1; } /* 327.94 / 506 — pale ghost shield */
.coFin__white { width: 49.57%; z-index: 2; } /* 250.85 / 506 — white middle */
.coFin__overlay {
position: absolute; left: 0; bottom: 0;
width: 100%; height: 55.48%; /* 217.5 / 392 — front bottom fade */
z-index: 3; pointer-events: none;
}
.coFin__shield { width: 31.62%; z-index: 4; } /* 159.97 / 506 — crisp core + keyhole */
/* ---------- Card 4: Built With You — DDT hub, avatars, cable pulses ---------- */
/* visual frame is 718x376 in Figma; every coordinate below is a % of that box */
.coV--built { justify-content: flex-end; padding: 0; }
/* Figma text padding: 40 on the sides + bottom, 0 on top; scaled down on narrow cards */
.coV--built .coValues__body { padding: 0 clamp(20px, 4vw, var(--space-3xl)) clamp(20px, 4vw, var(--space-3xl)); }
.coNet {
position: relative; width: 100%;
aspect-ratio: 718 / 376;
overflow: hidden; /* card clips its content (Figma) */
}
.coNet__buildings { /* line-art city skyline behind the network (Figma 35216-60671) */
position: absolute;
top: 10.11%; left: 0; right: 0; bottom: auto;
width: 100%; height: auto; max-width: none;
opacity: 1; z-index: 0; /* rendered light-grey art — shown as-is */
}
.coNet__strip { /* Rectangle58 — bottom fade strip */
position: absolute; left: 0; top: 81.9%;
width: 100%; height: 24.5%;
object-fit: cover; object-position: top;
z-index: 2; pointer-events: none;
}
.coCables--built { position: absolute; inset: 0; z-index: 1; }
.coCables--built .coCables__lines path { fill: none; stroke: #BDB6F0; stroke-width: 1.4; }
.coCables--built .coCables__pulse circle { fill: #4A3DCC; }
.coNet__hub {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
z-index: 4; /* the DDT hub sits centred, above all cables */
width: 13.93%; aspect-ratio: 1;
display: grid; place-items: center;
border-radius: 50%;
background: var(--color-surface-brand-primary, #4A3DCC);
box-shadow: 0 12px 30px rgba(74, 61, 204, .34);
/* one beat per comet cycle (4.4s), peaking as the light reaches the centre */
animation: coHubBeat 4.4s ease-in-out infinite;
}
.coNet__hub img { width: 60%; height: auto; filter: brightness(0) invert(1); position: relative; z-index: 1; }
@keyframes coHubBeat {
0%, 44% { transform: translate(-50%, -50%) scale(1);
box-shadow: 0 12px 30px rgba(74, 61, 204, .34), 0 0 0 0 rgba(74, 61, 204, 0); }
52% { transform: translate(-50%, -50%) scale(1.09);
box-shadow: 0 14px 34px rgba(74, 61, 204, .44), 0 0 0 4px rgba(74, 61, 204, .30); }
74% { transform: translate(-50%, -50%) scale(1);
box-shadow: 0 12px 30px rgba(74, 61, 204, .34), 0 0 0 22px rgba(74, 61, 204, 0); }
100% { transform: translate(-50%, -50%) scale(1);
box-shadow: 0 12px 30px rgba(74, 61, 204, .34), 0 0 0 0 rgba(74, 61, 204, 0); }
}
.coNet__av {
position: absolute;
z-index: 3; /* above the cables — masks the pulse at the photo end */
width: 11.14%; aspect-ratio: 1;
transform: translate(-50%, -50%);
border-radius: 50%;
overflow: hidden;
background: #fff;
box-shadow: 0 6px 16px rgba(17, 24, 39, .14);
}
.coNet__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coNet__av--tl { left: 24.79%; top: 17.02%; }
.coNet__av--ml { left: 14.21%; top: 50%; }
.coNet__av--bl { left: 24.79%; top: 80.85%; }
.coNet__av--tr { left: 75.35%; top: 17.02%; }
.coNet__av--mr { left: 85.93%; top: 50%; }
.coNet__av--br { left: 75.35%; top: 80.85%; }
@media (prefers-reduced-motion: reduce) {
.coTalent__star, .coBars__ddt, .coNet__hub { animation: none; }
.coCables__pulse { display: none; }
}
@media (max-width: 1024px) {
/* one screen cannot hold four stacked cards, so it stops being a pinned
section and becomes an ordinary stack */
.coValues { min-height: 0; display: block; }
.coValues__rows { display: flex; }
.coValues__row--wideFirst,
.coValues__row--wideLast { grid-template-columns: 1fr; }
.coValues__card { height: auto; min-height: 440px; }
}
@media (max-width: 560px) {
/* visuals bleed to the card edges — ONLY the text keeps padding */
.coValues__card { padding: 0; min-height: 380px; }
/* centre the copy on all four cards */
.coValues__body { align-items: center; text-align: center; }
.coValues__title { text-align: center; }
/* growth: pad just the copy; the bars run to the side + bottom edges */
.coV--growth { padding-bottom: 0; }
.coV--growth .coValues__body { padding: var(--space-xl) var(--space-xl) 0; }
.coBars { margin-top: var(--space-l); padding: 0 var(--space-xl); }
/* talent: no title background — the team photo is the front layer */
.coV--talent .coValues__title { padding: var(--space-xl); }
/* show the whole team (no side crop), flush to the bottom, in front of the star */
.coTalent__people { object-fit: contain; object-position: bottom center; z-index: 2; }
/* the star sits centred on the bottom edge, so only its top half shows; it
scales with the card (%) and stays behind the team */
.coTalent__star { top: 100%; width: 150%; max-width: 150%; z-index: 0; }
/* built: give the copy a bit more room below its visual, and let the network
breathe at the top (it was cramped against the card's top edge) */
.coV--built .coValues__body { padding-top: var(--space-l); }
.coV--built .coNet { margin: var(--space-xl) var(--space-s) 0; }
}
/* ==================================================================
COMPANY — LEADERSHIP (Figma 33240:13666, hover 33240:13740)
Section is a white column: title, then three equal tracks. Each track
is [ photo + name/role ] then the trait row, 24px apart. Hovering a
portrait flips it to the purple bio panel from the hover frame.
================================================================== */
.coLeadership {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3xl); /* 40 */
padding: var(--space-padding) var(--pad-x); /* 120 / 96 */
background: var(--color-surface-default);
}
/* H1 sits on a 64px line here, not the 56px the base class uses */
.coLeadership__title {
width: 100%;
margin: 0;
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(30px, 3.3333vw, 48px);
line-height: 1.3333;
letter-spacing: -0.01em;
text-align: center;
color: var(--color-text-primary);
}
.coLeadership__title em { font-style: italic; font-weight: 700; }
.coLeadership__title .is-brand { color: var(--color-text-brand-primary); }
.coLeadership__title .is-teal { color: var(--color-text-brand-secondary); }
.coLeadership__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: start;
gap: var(--space-xl); /* 24 */
width: 100%;
}
/* Row 1 — top leadership: two cards centred as a group, each the same width as
a Row-2 card so they sit above the middle of the three below. */
.coLeadTop {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: start;
gap: var(--space-xl);
width: 100%;
margin-bottom: var(--space-xl);
}
.coLeadTop > .coLead {
flex: 0 1 calc((100% - 2 * var(--space-xl)) / 3);
max-width: calc((100% - 2 * var(--space-xl)) / 3);
}
.coLead {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xl); /* 24 between the head block and traits */
min-width: 0;
}
.coLead__head {
display: flex;
flex-direction: column;
gap: var(--space-s); /* 12 between portrait and name */
width: 100%;
}
/* ---- portrait / bio flip ---- */
.coLead__flip {
position: relative;
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1; /* square — width fills, height follows (Figma 400x400) */
margin: 0;
padding: 0;
border: 0;
background: none;
perspective: 1400px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.coLead__faces {
position: absolute;
inset: 0;
transform-style: preserve-3d;
transition: transform .72s cubic-bezier(.22, .68, .24, 1);
will-change: transform;
}
/* no overflow:hidden anywhere on a backface-hidden face — the radius rides
on the face and on the image itself instead (Safari clips 3D otherwise) */
.coLead__face {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-s);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.coLead__face--photo { background: var(--color-surface-subtle, #f3f4f6); }
.coLead__face--photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: inherit;
}
.coLead__face--bio {
transform: rotateY(180deg);
background: var(--color-surface-brand-primary);
padding: var(--space-xl); /* 24 */
color: var(--color-text-inverse);
text-align: center;
}
/* the copy lands a beat after the panel has turned to face you */
.coLead__bio {
opacity: 0;
transform: translateY(8px);
transition: opacity .34s ease .26s, transform .34s ease .26s;
}
@media (hover: hover) {
.coLead__flip:hover .coLead__faces { transform: rotateY(180deg); }
.coLead__flip:hover .coLead__bio { opacity: 1; transform: none; }
}
.coLead__flip:focus-visible { outline: none; }
.coLead__flip:focus-visible .coLead__faces,
.coLead__flip.is-flipped .coLead__faces { transform: rotateY(180deg); }
.coLead__flip:focus-visible .coLead__bio,
.coLead__flip.is-flipped .coLead__bio { opacity: 1; transform: none; }
/* keyboard focus needs a visible ring, and it has to survive the rotation */
.coLead__flip:focus-visible .coLead__face--bio {
box-shadow: 0 0 0 3px var(--color-surface-default), 0 0 0 5px var(--color-surface-brand-primary);
}
/* ---- name / role ---- */
.coLead__id {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
text-align: center;
}
.coLead__name { margin: 0; color: var(--color-text-primary); }
.coLead__role { margin: 0; color: var(--color-text-secondary); }
/* ---- trait row ---- */
.coLead__tags {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: center;
gap: var(--space-xs); /* 8 */
width: 100%;
}
/* type comes from .t-caption-large in the markup.
Figma keeps each trait on one line, which only fits while a column is at
its full 400px. Narrower than that the longest trait is wider than its
column, so it wraps instead of breaking out of the track. */
.coLead__tag {
color: var(--color-text-brand-primary);
white-space: normal;
text-wrap: balance;
text-align: center; /* long tags wrap centred, not left */
}
@media (min-width: 1400px) {
.coLead__tag { white-space: nowrap; }
}
.coLead__dot {
flex: none;
width: 4px;
height: 4px;
border-radius: var(--radius-full);
background: var(--color-text-brand-secondary);
}
/* ---- reveal: the card rises, then the caption and traits follow ---- */
.coLead__id,
.coLead__tags {
opacity: 0;
transform: translateY(14px);
transition:
opacity .6s cubic-bezier(.2, .7, .3, 1),
transform .6s cubic-bezier(.2, .7, .3, 1);
}
.coLead.is-in .coLead__id { opacity: 1; transform: none; transition-delay: calc(var(--rd, 0s) + .18s); }
.coLead.is-in .coLead__tags { opacity: 1; transform: none; transition-delay: calc(var(--rd, 0s) + .28s); }
/* three tracks only while a column is still wide enough to hold the longest
bio inside the 400px panel — below that they stack rather than spill */
@media (max-width: 1100px) {
.coLeadership__grid {
grid-template-columns: 1fr;
max-width: 420px;
margin-inline: auto;
gap: var(--space-3xl);
}
/* Row 1 stacks the same way as Row 2 — no forced 2-up on small screens */
.coLeadTop {
flex-direction: column;
align-items: center;
max-width: 420px;
margin-inline: auto;
gap: var(--space-3xl);
margin-bottom: var(--space-3xl);
}
.coLeadTop > .coLead { flex-basis: auto; max-width: none; width: 100%; }
/* keep the 3:4 portrait ratio on mobile too (single column) */
.coLead__flip { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
.coLead__faces { transition: none; }
.coLead__bio { transition: none; }
.coLead__id,
.coLead__tags { opacity: 1; transform: none; transition: none; }
}
/* ==================================================================
N3CA PRODUCT PAGE (Figma "Website DDT - Product - N3CA" 35030:16719)
A blue-branded page: --n3-blue re-skins the shared button components
rather than forking them.
================================================================== */
.n3Hero,
.n3Why,
.n3Title,
.n3Prod {
--n3-blue: #163bd1;
--n3-line: var(--color-border-default);
}
/* ---- shared pill ---- */
.n3Pill {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-m);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-full);
background: var(--color-surface-default);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 6px rgba(0, 0, 0, .06);
font-family: var(--font-label);
font-weight: 600;
font-size: 14px;
line-height: 1.4286; /* 20 */
letter-spacing: 0.003em;
color: var(--color-text-primary);
white-space: nowrap;
}
/* ---- hero ---- */
.n3Hero {
position: relative;
height: 100svh;
display: flex;
flex-direction: column;
gap: 64px;
padding: 0 var(--pad-x) var(--space-6xl);
background: var(--color-surface-default);
overflow: hidden; /* the card band runs off the bottom, as drawn */
}
.n3Hero__spacer { height: var(--nav-h); flex: none; }
.n3Hero__body {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-padding);
min-height: 0;
}
.n3Hero__content {
display: flex;
flex-direction: column;
align-items: center;
width: min(823px, 100%);
text-align: center;
}
.n3Hero__content .n3Pill { margin-bottom: var(--space-s); }
.n3Hero__title {
margin: 0 0 var(--space-xl);
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(36px, 4.4444vw, 64px);
line-height: 1.125; /* 72 */
letter-spacing: -0.01em;
color: var(--color-text-primary);
}
.n3Hero__lead {
margin: 0 0 32px;
font-family: var(--font-body);
font-size: clamp(16px, 1.25vw, 18px);
line-height: 1.5556; /* 28 */
color: var(--color-text-secondary);
}
.n3Hero__actions {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
flex-wrap: wrap;
}
/* the page's blue re-skin of the shared button */
/* N3CA buttons = the existing .btn component, only recoloured to the N3CA gradient
(blue #1C47EF -> violet #6900FF). Same flood + arrow-swap interaction as built. */
.n3Btn--fill { background: linear-gradient(100deg, #1C47EF, #6900FF); border-color: transparent; }
.n3Btn--fill .btn__tile { color: #1C47EF; }
.n3Btn--fill:hover .btn__label { background: linear-gradient(100deg, #1C47EF, #6900FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.n3Btn--fill:hover .btn__tile { background: linear-gradient(100deg, #1C47EF, #6900FF); color: #fff; }
.n3Btn--line { border-color: #4E4AFF; }
.n3Btn--line .btn__label { background: linear-gradient(100deg, #1C47EF, #6900FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.n3Btn--line::before { background: linear-gradient(100deg, #1C47EF, #6900FF); }
.n3Btn--line:hover .btn__label { -webkit-text-fill-color: #fff; color: #fff; }
/* ---- drifting card band ----
Each card is a 400x500 rounded rect run through Figma's
rotate(30) skewX(30) scaleY(.87), which maps to a 346.41 x 700 box with
vertical sides. Cards overlap by 80, so the repeat step is 266.41 and a
set of seven is exactly the distance the track travels before looping,
which is what keeps the spacing identical across the seam. */
.n3Marquee {
--n3-card-w: 346.41px;
--n3-overlap: 130px; /* tighter than Figma's 80, per request */
--n3-step: calc(var(--n3-card-w) - var(--n3-overlap));
--n3-count: 7;
--n3-dur: 28s;
width: 100%;
min-height: 0;
display: flex;
justify-content: center;
}
.n3Marquee__track {
display: flex;
width: max-content;
will-change: transform;
animation: n3Drift var(--n3-dur) linear infinite;
}
.n3Marquee__set { display: flex; }
@keyframes n3Drift {
from { transform: translate3d(0, 0, 0); }
/* --n3-loop is the measured set width, written by main.js; the arithmetic
fallback keeps it drifting if the script never runs */
to { transform: translate3d(calc(var(--n3-loop, calc(var(--n3-step) * var(--n3-count))) * -1), 0, 0); }
}
.n3Card {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: var(--n3-card-w);
height: 700px;
margin-right: calc(var(--n3-overlap) * -1);
}
.n3Card i {
display: block;
width: 400px;
height: 500px;
border-radius: 16px;
background: var(--c);
transform: rotate(30deg) skewX(30deg) scaleY(.87);
}
@media (prefers-reduced-motion: reduce) {
.n3Marquee__track { animation: none; }
}
/* ---- why n3ca ---- */
.n3Why {
display: flex;
flex-direction: column;
align-items: center;
gap: 64px;
padding: var(--space-padding) var(--pad-x);
background: var(--color-surface-default, #fff);
}
.n3Why__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-s); width: 100%; }
.n3Why__title {
margin: 0;
width: 100%;
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(30px, 3.3333vw, 48px);
line-height: 1.3333; /* 64 */
letter-spacing: -0.01em;
text-align: center;
color: var(--color-text-primary);
}
.n3Why__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-xl);
width: 100%;
}
.n3Feat {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-s);
height: 300px;
padding: var(--space-xl);
border: 1px solid #29CCB2;
border-radius: 16px;
background: #E4F9F6;
}
.n3Card__head { display: flex; flex-direction: column; gap: var(--space-s); }
.n3Card__icon {
display: inline-flex; align-items: center; justify-content: center;
align-self: flex-start;
padding: 8px; border-radius: 8px; background: #29CCB2;
}
.n3Card__icon img { display: block; width: 28px; height: 28px; }
.n3Card__title {
margin: 0;
font-family: var(--font-heading);
font-weight: 500;
font-size: 24px;
line-height: 1.3333;
letter-spacing: -0.005em;
color: var(--color-text-primary);
}
.n3Card__desc {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
color: var(--color-text-secondary);
}
/* CTA card (bottom-right of the grid) — solid purple with a subtle purple border */
.n3Card--cta {
position: relative; overflow: hidden;
border: 1px solid var(--color-border-primary-subtle);
background: var(--color-surface-brand-primary);
}
/* subtle noise over the purple surface (8%, same as the other purple sections) */
.n3Card--cta::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: url("assets/about-texture.png") top left / 1024px 1024px repeat;
opacity: .08;
}
.n3Card--cta > * { position: relative; z-index: 2; }
.n3Card__ctaTitle {
margin: 0;
font-family: var(--font-heading);
font-weight: 500;
font-size: 32px;
line-height: 1.25;
letter-spacing: -0.005em;
color: #fff;
}
/* CTA card button: white, N3CA-gradient label + arrow tile, 8px radius, full width */
.n3WhyCta { width: 100%; justify-content: space-between; border-radius: 8px; background: #fff; border-color: transparent; }
.n3WhyCta .btn__label {
font-size: 16px; font-weight: 600;
background: linear-gradient(100deg, #1C47EF, #6900FF);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.n3WhyCta .btn__tile { background: linear-gradient(100deg, #1C47EF, #6900FF); color: #fff; border-radius: 4px; }
/* hover follows the arrow-box colour (gradient floods in) like the other buttons */
.n3WhyCta::before { background: linear-gradient(100deg, #1C47EF, #6900FF); }
.n3WhyCta:hover .btn__label { -webkit-text-fill-color: #fff; color: #fff; }
.n3WhyCta:hover .btn__tile { background: #fff; color: #1C47EF; }
/* ---- section title ---- */
.n3Title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 64px;
padding: var(--space-padding) var(--pad-x) 64px;
background: var(--color-surface-default);
}
.n3Title__row { display: flex; gap: var(--space-padding); align-items: flex-start; width: 100%; }
.n3Title__heading {
flex: 1 1 0;
min-width: 0;
margin: 0;
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(26px, 2.7778vw, 40px);
line-height: 1.3; /* 52 */
letter-spacing: -0.01em;
color: var(--color-text-primary);
}
.n3Title__lead {
flex: 1 1 0;
min-width: 0;
margin: 0;
font-family: var(--font-body);
font-size: clamp(16px, 1.25vw, 18px);
line-height: 1.5556;
color: var(--color-text-secondary);
}
/* ---- product: sticky tab rail + scrolling panels ---- */
/* the horizontal rules sit on the section so they run the full width of the
screen, past the gutters the columns are inset by */
.n3Prod {
display: flex;
align-items: flex-start;
padding: 0 var(--pad-x);
border-top: 1px solid var(--n3-line);
background: var(--color-surface-default);
}
.n3Prod__rail { flex: 0 0 25%; max-width: 25%; align-self: stretch; } /* 3 of 12 columns */
/* Sits flush under whatever bar is above it and fills everything below.
--n3-railtop is that bar's underside, written by main.js: the main nav's
bottom edge, plus the section rail's height when that rail is in use. The
height eases rather than snapping, so the six rows resize together instead
of jumping when the nav slides back in. */
.n3Prod__tabs {
position: sticky;
top: var(--n3-railtop, var(--nav-h-scrolled));
height: calc(100svh - var(--n3-railtop, var(--nav-h-scrolled)));
transition: height .35s cubic-bezier(.2, .7, .3, 1);
display: flex;
flex-direction: column;
border-left: 1px solid var(--n3-line);
border-right: 1px solid var(--n3-line);
overflow: hidden; /* keeps the sliding block inside the rail */
}
/* the active state is one block that slides between tabs, so switching
reads as a single movement instead of six independent flickers */
.n3Prod__marker {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 128px;
background: var(--n3-blue);
transform: translate3d(0, 0, 0);
transition: transform .52s cubic-bezier(.4, .05, .2, 1);
z-index: 0;
pointer-events: none;
overflow: hidden;
}
/* noise over the active-tab block — same texture/opacity as the CTA section so
they read as one consistent surface (Figma 35030:22219) */
.n3Prod__marker::after {
content: "";
position: absolute;
inset: 0;
background-image: url("assets/about-texture.png");
background-size: 1024px 1024px;
background-position: top left;
background-repeat: repeat;
opacity: 0.07;
pointer-events: none;
}
.n3Tab {
position: relative;
z-index: 1;
display: flex;
align-items: center;
/* the rows divide the rail's height rather than each claiming a fixed 128,
so six of them always add up to exactly one screen */
flex: 1 1 0;
min-height: 0;
width: 100%;
margin: 0;
padding: var(--space-m) var(--space-xl) var(--space-m) 48px;
border: 0;
background: none;
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(17px, 1.32vw, 20px);
line-height: 1.3333;
letter-spacing: -0.005em;
text-align: left;
color: var(--color-text-primary);
cursor: pointer;
transition: color .52s cubic-bezier(.4, .05, .2, 1), background-color .2s ease;
}
/* hover on an inactive tab: subtle blue tint + blue label, so it reads as
interactive without disturbing the sliding active marker */
.n3Tab:not(.is-active):hover { background: rgba(22, 59, 209, 0.06); color: var(--n3-blue); }
.n3Tab.is-active { color: var(--color-text-inverse); }
.n3Tab:focus-visible { outline: 2px solid var(--n3-blue); outline-offset: -4px; }
.n3Prod__panels { flex: 1 1 0; min-width: 0; }
.n3Panel {
display: flex;
flex-direction: column;
justify-content: center;
gap: 32px;
min-height: 816px;
padding: 64px; /* Figma has 32 top and bottom; 64 all round per request */
border-right: 1px solid var(--n3-line);
background: var(--color-surface-default);
}
.n3Panel__head { display: flex; flex-direction: column; gap: var(--space-xs); width: 100%; }
.n3Panel__eyebrow {
margin: 0;
font-family: var(--font-heading);
font-weight: 700;
font-size: 16px;
line-height: 1.5;
color: var(--n3-blue);
}
.n3Panel__title {
margin: 0;
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(24px, 2.2222vw, 32px);
line-height: 1.375; /* 44 */
letter-spacing: -0.005em;
color: var(--color-text-primary);
}
.n3Panel__desc {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
color: var(--color-text-secondary);
}
.n3Panel__list {
display: flex;
flex-direction: column;
gap: var(--space-s);
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.n3Panel__list li {
display: flex;
gap: var(--space-xs);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
color: var(--color-text-secondary);
}
/* the tick is drawn, not an asset, so it stays crisp and recolours with the page */
.n3Panel__list li::before {
content: "";
flex: none;
width: 24px;
height: 24px;
border-radius: var(--radius-full);
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 12.4l3 3 6-6.6' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat,
var(--n3-blue);
}
.n3Panel__cta { align-self: stretch; width: 100%; justify-content: center; }
.n3Panel__cta .btn__label { font-weight: 600; } /* SemiBold like the other buttons */
.n3Panel__slot {
width: 100%;
height: 400px;
border-radius: var(--radius-m);
background: var(--color-surface-brand-primary-subtle, #ECEAFB); /* purple product card */
display: flex;
align-items: center;
justify-content: center;
}
.n3Panel__slot img { width: 260px; max-width: 62%; height: auto; }
/* ---- Product panel v2: nav logo + bento checklist + Learn More (Figma 35030:22241) ---- */
.n3Panel__logo { display: flex; align-items: flex-start; }
.n3Panel__logo img { height: 52px; width: auto; display: block; }
.n3Panel__bento {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
width: 100%;
}
.n3PanelCell {
display: flex;
flex-direction: column;
gap: var(--space-xs);
height: 300px;
padding: var(--space-m);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-s);
background: var(--color-surface-default);
}
.n3PanelCell__text {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
color: var(--color-text-secondary);
}
/* illustration slot — dashed placeholder box per Figma, awaiting artwork */
.n3PanelCell__illo {
flex: 1 0 0;
min-height: 0;
width: 100%;
border-radius: var(--radius-m, 16px);
background: #fafafa;
border: 2px dashed var(--color-border-default);
}
/* ---- responsive ---- */
@media (max-width: 1100px) {
.n3Why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.n3Title__row { flex-direction: column; gap: var(--space-xl); }
}
@media (max-width: 1024px) {
/* the rail cannot sit beside the panels on a narrow screen, so it becomes
a scrollable strip pinned under the nav */
.n3Prod { flex-direction: column; align-items: stretch; padding: 0; }
/* dissolve the rail so the tab strip becomes a direct child of the tall
section and can stay stuck to the top for the whole section, not just
the rail's own height */
.n3Prod__rail { display: contents; }
.n3Prod__panels { width: 100%; }
.n3Prod__tabs {
/* ride the nav's live bottom edge (written by main.js): sits under the nav
while it shows, and slides up to the very top once the nav hides. On
mobile the sub-nav is hidden, so --n3-railtop resolves to the nav bottom */
top: var(--n3-railtop, var(--nav-h));
height: auto; /* was 100svh from the desktop rail */
flex-direction: row;
overflow-x: auto;
border: 0;
border-bottom: 1px solid var(--n3-line);
background: var(--color-surface-default);
scrollbar-width: none;
z-index: 5;
}
.n3Prod__tabs::-webkit-scrollbar { display: none; }
.n3Prod__marker { display: none; }
/* plain underline tabs (no sliding block, no timed fill) */
.n3Tab {
flex: none; width: auto; white-space: nowrap;
padding: var(--space-m) var(--space-l); font-size: 16px;
background: none;
color: var(--color-text-secondary);
border-bottom: 2px solid transparent;
transition: color .2s ease, border-color .2s ease;
}
.n3Tab.is-active { color: var(--n3-blue); background: none; border-bottom-color: var(--n3-blue); }
.n3Tab:not(.is-active):hover { background: none; }
.n3Panel {
min-height: 0; border-right: 0;
/* tighter top/bottom on phones so panels do not feel far apart */
padding: clamp(28px, 7vw, 56px) var(--pad-x);
gap: var(--space-l);
/* a tapped tab scrolls its panel to just under the sticky nav + tab strip */
scroll-margin-top: calc(var(--nav-h) + 58px);
}
/* keep a comfortable gap before the purple CTA so the last card does not
sit flush against it on tablet/phone */
.n3Panel:last-child { padding-bottom: clamp(40px, 9vw, 72px); }
/* product cards scroll sideways instead of stacking 2-up; first card lines
up with the panel text (no edge-bleed), the last peeks at the gutter */
.n3Panel__bento {
display: flex;
grid-template-columns: none;
gap: var(--space-s);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-bottom: var(--space-s);
}
.n3Panel__bento::-webkit-scrollbar { display: none; }
.n3PanelCell { flex: 0 0 78%; height: 300px; scroll-snap-align: start; }
/* pin the card band to the hero's bottom edge and drop it half its own
height, so only the top 50% of the cards peeks in (bottom half clipped) */
.n3Marquee {
--n3-card-w: 242.49px; --n3-overlap: 91px;
position: absolute; left: 0; right: 0; bottom: 0;
height: 490px; align-items: flex-start;
transform: translateY(50%);
}
.n3Card { height: 490px; }
.n3Card i { width: 280px; height: 350px; }
}
@media (max-width: 620px) {
.n3Marquee { --n3-card-w: 173.21px; --n3-overlap: 65px; height: 350px; }
.n3Card { height: 350px; }
.n3Card i { width: 200px; height: 250px; }
.n3Why__grid { grid-template-columns: 1fr; }
.n3Feat { height: auto; min-height: 196px; }
}
/* ---- section rail (Figma 35035:22566) ----
Sits in the flow to begin with and only pins once the page reaches it.
Its pinned offset is the main nav's live bottom edge, written by main.js:
0 when that nav has slid away, its height when it is showing. Tracking the
real edge rather than toggling between two values means the rail follows
the nav's own slide instead of jumping 72px the moment it hides. */
.n3Subnav {
position: sticky;
top: var(--n3-navbottom, 0px);
z-index: 90; /* under the main nav's 100 */
background: var(--color-background-inverse, #000);
}
/* PARKED — the rail is built and styled but not in use. Remove this one rule
to bring it back; nothing else needs changing, because the product rail
measures its offset from this bar's real height, which is 0 while it is
not displayed, so it pins straight to the main nav instead. */
.n3Subnav { display: none; }
.n3Subnav__inner {
display: flex;
align-items: center;
justify-content: center;
height: 64px;
padding: 0 var(--pad-x);
overflow-x: auto;
scrollbar-width: none;
}
.n3Subnav__inner::-webkit-scrollbar { display: none; }
.n3Subnav__link {
flex: none;
display: flex;
align-items: center;
height: 100%;
padding: 0 var(--space-3xl); /* 40 */
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: rgba(255, 255, 255, .8);
text-decoration: none;
white-space: nowrap;
transition: color .25s ease;
}
.n3Subnav__link.is-active { font-weight: 700; color: var(--color-text-inverse); }
.n3Subnav__link:hover { color: var(--color-text-inverse); }
.n3Subnav__link:focus-visible { outline: 2px solid var(--color-surface-default); outline-offset: -6px; }
/* Bold is wider than regular, so the row would shuffle every time the active
item changed. This lays the bold text out invisibly to claim the width up
front, and the visible label never moves. */
.n3Subnav__link::before {
content: attr(data-label);
display: block;
height: 0;
overflow: hidden;
font-weight: 700;
visibility: hidden;
pointer-events: none;
}
/* Anchored jumps clear the fixed nav. Deliberately the nav's full height and
not its live edge, so a jump made while the nav is away still lands clear
of it once it slides back in. Add + 64px here if the rail above is
ever un-parked. */
.n3Why,
.n3Prod,
.n3Arch { scroll-margin-top: var(--nav-h-scrolled); }
/* ---- hybrid architecture (placeholder frame) ---- */
.n3Arch {
--n3-blue: #163bd1;
display: flex;
flex-direction: column;
align-items: center;
gap: 64px;
padding: var(--space-padding) var(--pad-x);
background: var(--color-surface-default);
}
.n3Arch__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-s); width: 100%; }
.n3Arch__title {
margin: 0;
width: 100%;
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(30px, 3.3333vw, 48px);
line-height: 1.3333;
letter-spacing: -0.01em;
text-align: center;
color: var(--color-text-primary);
}
.n3Arch__slot {
width: 100%;
height: clamp(320px, 46vw, 620px);
border-radius: var(--radius-m);
background: #f3f4f6;
}
@media (max-width: 1024px) {
.n3Subnav__inner { gap: var(--space-xl); padding: 0 var(--pad-x); }
}
/* ==================================================================
N3CA closing CTA (Figma 35036:22582)
================================================================== */
.n3Cta {
position: relative;
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 var(--pad-x);
background: linear-gradient(155.647deg, #163bd1 16.287%, #8639ff 70.475%);
overflow: hidden;
isolation: isolate;
}
.n3Cta__texture {
position: absolute;
inset: 0;
z-index: 0;
background-image: var(--texture);
background-size: 1024px 1024px;
background-position: top left;
background-repeat: repeat;
opacity: .07;
pointer-events: none;
}
.n3Cta__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3xl);
width: 100%;
padding: var(--space-padding) 0;
}
.n3Cta__copy {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-m);
width: min(612px, 100%);
text-align: center;
color: var(--color-text-inverse);
}
.n3Cta__title {
margin: 0;
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(26px, 2.7778vw, 40px);
line-height: 1.3; /* 52 */
letter-spacing: -0.01em;
}
.n3Cta__lead {
margin: 0;
font-family: var(--font-body);
font-size: clamp(16px, 1.25vw, 18px);
line-height: 1.5556; /* 28 */
}
/* the shared button, kept at the frame's 4px corner rather than the
global 8, so it inherits the same flood and arrow swap as every other */
.n3Cta__btn { border-radius: 8px; }
@media (max-width: 620px) {
.n3Cta__inner { padding: var(--pad-y) 0; }
}
/* ==================================================================
HYBRID ARCHITECTURE (Figma 35050:24345)
One pinned viewport, not a pile of independent sticky cards. The pin is
the ONLY sticky element, so the heading, the tags and the four cards are a
single block that pins and releases together — there is no way for one to
outlive another. Cards rise from below as you scroll; when all four have
landed they sit level, hold for a beat, then the whole pin lets go and
scrolls to the next section. main.js drives the card motion and the runway.
================================================================== */
.n3Arch {
--n3-file-minh: 0px;
--n3-card-h: 360px;
position: relative;
height: 460svh; /* fallback; main.js sets the real runway */
background: var(--color-background-inverse, #000);
}
/* the single pinned frame */
.n3Arch__stage {
position: sticky;
top: 0;
height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-3xl); /* heading to deck */
padding: 0 var(--pad-x);
overflow: hidden; /* cards start below the fold */
}
.n3Arch__head {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-s);
width: 100%;
}
.n3Arch__title {
margin: 0;
width: 100%;
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(26px, 3.3333vw, 48px);
line-height: 1.3333;
letter-spacing: -0.01em;
text-align: center;
color: var(--color-text-inverse);
}
/* the deck is one card tall; the four cards stack absolutely inside it */
.n3Arch__deck {
position: relative;
z-index: 1;
width: 100%;
max-width: 1248px;
height: var(--n3-card-h);
}
.n3File {
position: absolute;
left: 0;
right: 0;
top: 0;
width: 100%;
will-change: transform;
}
.n3File__tabs { display: flex; align-items: stretch; width: 100%; }
.n3File__tabs span {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-l, 20px) var(--space-3xl);
border-radius: 16px 16px 0 0;
background: var(--t);
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(13px, 1.3889vw, 20px);
line-height: 1.4;
text-align: center;
color: var(--color-text-inverse);
white-space: nowrap;
overflow: hidden;
}
/* each card shows only its own tab, sitting in its own slot */
.n3File__tabs span { opacity: 0; }
.n3File[data-step="1"] .n3File__tabs span:nth-child(1),
.n3File[data-step="2"] .n3File__tabs span:nth-child(2),
.n3File[data-step="3"] .n3File__tabs span:nth-child(3),
.n3File[data-step="4"] .n3File__tabs span:nth-child(4) { opacity: 1; }
.n3File__body {
display: flex;
flex-direction: column;
gap: var(--space-xxl, 32px);
padding: var(--space-3xl);
min-height: var(--n3-file-minh, 0px);
border-radius: 16px;
background: var(--c);
}
/* the flush-edge tab squares off its own top corner */
.n3File[data-step="1"] .n3File__body { border-top-left-radius: 0; }
.n3File[data-step="4"] .n3File__body { border-top-right-radius: 0; }
.n3File__title {
margin: 0;
width: 100%;
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(24px, 2.7778vw, 40px);
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--color-text-inverse);
}
.n3File__tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-xl) var(--space-s);
width: min(752px, 100%);
}
.n3File__tags span {
display: inline-flex;
align-items: center;
padding: var(--space-xs) var(--space-m);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-full);
background: var(--color-surface-default);
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(12px, 1.1111vw, 16px);
line-height: 1.5;
color: var(--pill);
white-space: nowrap;
}
@media (max-width: 900px) {
.n3Arch__stage { gap: var(--space-xl); }
.n3File__body { padding: var(--space-xl); gap: var(--space-xl); }
.n3File__tabs span { padding: var(--space-s) var(--space-xs); }
.n3File__tags { gap: var(--space-s) var(--space-xs); }
}
@media (prefers-reduced-motion: reduce) {
/* no pin, no scrub: read it as four plain stacked cards */
.n3Arch { height: auto; }
.n3Arch__stage { position: static; height: auto; padding: var(--pad-y) var(--pad-x); }
.n3Arch__deck { height: auto; }
.n3File { position: static; margin-bottom: var(--space-3xl); }
.n3File__tabs span { opacity: 1 !important; }
}
/* tablet + phone: same un-stack — the scroll-jack pin is desktop-only now
(setupN3Arch skips the runway <=1024), so the four cards read as a plain
vertical stack instead of a pinned, absolutely-stacked deck */
@media (max-width: 1024px) {
.n3Arch { height: auto; }
.n3Arch__stage { position: static; height: auto; padding: var(--pad-y) var(--pad-x); }
.n3Arch__deck { height: auto; }
.n3File { position: static; margin-bottom: var(--space-3xl); }
.n3File:last-child { margin-bottom: 0; }
.n3File__tabs span { opacity: 1 !important; }
}
/* ==================================================================
Client logos — hero anchor + "Chosen by Leading Enterprises".
Two logo sets live in two 624x28 strips (logoset1/2.svg). Each slot shows
ONE logo, cropped to its rect via a sprite window (.cyc__face), and flips
upward every ~2s between set 1 and set 2 (main.js drives the flip). The
window is --cw wide (the wider of the slot's two logos) so both sets sit
centred in the same box; --fx/--fw pick each logo's rect; --s scales the
whole strip so one set of numbers drives both the small hero anchor and
the larger section.
================================================================== */
.cyc {
overflow: hidden;
flex: none;
height: calc(28 * var(--s) * 1px);
width: calc(var(--cw) * var(--s) * 1px);
}
.cyc__track {
display: flex;
flex-direction: column;
align-items: center;
will-change: transform;
}
.cyc__face {
position: relative;
display: block;
overflow: hidden;
flex: none;
height: calc(28 * var(--s) * 1px);
width: calc(var(--fw) * var(--s) * 1px);
}
.cyc__face img {
position: absolute;
top: 0;
max-width: none;
width: calc(624 * var(--s) * 1px);
height: calc(28 * var(--s) * 1px);
left: calc(var(--fx) * var(--s) * -1px);
filter: brightness(0) invert(0.62); /* black strip -> soft grey */
}
/* (the "toko mama" optical zoom was reverted — scaling the sprite image up
pushed it past the face's crop window and clipped the mark, so it renders
at its native sprite size like the other logos.) */
/* while a logo is still visually in the hero (its own static mobile row, or
the .chosen clone before it has flown to rest — see is-hero below) it
reads white on the dark photo instead of the grey used at rest */
.hero__spacer .cyc__face img,
.chosen__slot.is-hero .cyc__face img {
filter: brightness(0) invert(1);
opacity: .9;
}
/* ---- hero anchor: bottom-right; only the geometry matters (invisible) ---- */
.heroLogos {
--s: 1; /* main.js sizes this to fit the width */
display: flex;
align-items: flex-end;
justify-content: space-between; /* gap is dynamic — fills the row evenly */
flex-wrap: nowrap; /* always one line */
gap: 0; /* JS sizes logos to leave room; space-between spreads it */
width: 100%;
height: 100%;
padding-bottom: var(--space-xs);
}
/* invisible on purpose: this row only exists as the scroll-fly anchor for
setupChosen() in main.js — the "Chosen by Leading Enterprises" logos
animate from this position down to their resting spot below. Showing it
too creates a visible duplicate (one copy that scrolls normally here,
one that flies to rest down there), so it stays hidden. */
.heroLogos--ghost { visibility: hidden; }
/* ---- "Chosen by Leading Enterprises" section ---- */
.chosen {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3xl);
padding: var(--space-5xl, 64px) var(--pad-x);
background: var(--color-surface-default);
}
.chosen__title {
margin: 0;
font-family: var(--font-heading);
font-weight: 500;
font-size: 20px;
line-height: 1.4;
color: var(--color-text-primary);
text-align: center;
}
.chosen__row {
--s: 1.5; /* strip ~42px tall here */
display: flex;
align-items: center;
justify-content: center;
gap: clamp(32px, 6vw, 104px);
width: 100%;
max-width: 1248px;
flex-wrap: wrap;
}
/* each slot flies from the hero anchor (top, small) down to rest here as you
scroll — main.js drives the transform off one scroll progress, so the
section reads empty until the hero logos descend into it */
.chosen__slot {
position: relative;
transform-origin: center center;
will-change: transform;
}
@media (max-width: 1024px) {
.chosen__row { --s: 1.15; gap: clamp(24px, 5vw, 64px); }
}
@media (prefers-reduced-motion: reduce) {
.chosen__slot { transform: none !important; }
}
/* ================================================================
Big Menu — Solutions & Who We Serve (Figma 35074-28179 / 35113-32790)
Cards fill from the icon on hover (a button-like radial flood); only the
bg changes — no shadow. Tones: purple / green / yellow (Solutions),
purple everywhere (Serve). ================================================ */
.solMenu, .srvMenu { display: flex; align-items: stretch; padding: 0 var(--pad-x); }
/* promo CTAs reuse the site .btn (liquid flood + arrow swap); serve's fills the row */
.btn--sm.btn--solid { padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-s); }
.srvPromo__actions .btn { flex: 1 1 auto; width: 100%; }
/* label fills left, arrow tile pinned right */
.srvPromo__actions .btn--solid { justify-content: space-between; }
.srvPromo__actions .btn--solid .btn__label { flex: 1 1 auto; text-align: left; }
/* the button is full-width, so the flood needs a bigger sweep to reach the left edge */
.srvPromo__actions .btn--solid:hover::before { transform: scale(26); }
/* ---- Solutions grid ---- */
.solGrid {
flex: 1 1 0; min-width: 0;
display: grid; grid-template-columns: repeat(3, 1fr); /* horizontal: Build | Integrate | Operate */
border-left: 1px solid #e5e7eb;
}
.solGroup { display: flex; flex-direction: column; gap: 4px; padding: var(--space-xl) var(--space-s); border-right: 1px solid #e5e7eb; }
.solGroup__title { margin: 0 0 0 var(--space-s); font-family: var(--font-heading); font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: .042px; color: var(--color-text-secondary); }
.solGroup__list { display: flex; flex-direction: column; }
.solCard {
display: flex; align-items: center; gap: var(--space-s);
height: 80px; padding: var(--space-s); border-radius: 8px; text-decoration: none;
}
.solCard:hover { background: var(--sol-fill); } /* instant tone fill (no animation) */
.solCard__icon { flex: none; width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.solCard__icon img { width: 24px; height: 24px; object-fit: contain; display: block; }
.solCard__body { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.solCard__title { font-family: var(--font-heading); font-weight: 600; font-size: 16px; line-height: 24px; letter-spacing: .042px; color: var(--color-text-primary); }
.solCard__desc { display: none; } /* description removed in Figma */
.solGroup--purple .solCard { --sol-fill: #ECEAFB; }
.solGroup--purple .solCard__icon { background: #ECEAFB; }
.solGroup--green .solCard { --sol-fill: #E4F9F6; }
.solGroup--green .solCard__icon { background: #E4F9F6; }
.solGroup--yellow .solCard { --sol-fill: #FFFBEB; }
.solGroup--yellow .solCard__icon { background: #FFFBEB; }
/* ---- Solutions promo ---- */
/* the promo is now a filled purple card (Figma 35078:28303) */
.navPromo { flex: none; width: 400px; padding: var(--space-xl); border-right: 1px solid #e5e7eb; }
.navPromo__card { position: relative; overflow: hidden; width: 100%; border-radius: var(--radius-m, 12px); padding: var(--space-xl); background: var(--color-surface-brand-primary, #4A3DCC); }
.navPromo__tex { position: absolute; inset: 0; background: url("assets/nav/sol-promo-tex.png") top left / 1024px auto; opacity: .08; pointer-events: none; }
.navPromo__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-3xl); }
.navPromo__head { display: flex; flex-direction: column; gap: var(--space-xs); }
.navPromo__title { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 28px; color: #fff; }
.navPromo__desc { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 24px; color: #fff; }
.navPromo__actions { display: flex; flex-direction: column; gap: var(--space-xs); width: 100%; }
.navPromo__actions .btn { width: 100%; }
/* promo button labels are SemiBold like every other button */
.navPromo__actions .btn__label, .srvPromo__actions .btn__label { font-weight: 600; }
.navPromo__actions .btn--solid { justify-content: space-between; }
.navPromo__actions .btn--solid .btn__label { flex: 1 1 auto; text-align: left; }
.navPromo__actions .btn--solid:hover::before { transform: scale(26); } /* full-width flood reaches the edges */
.navPromo__actions .btn--outline { justify-content: flex-start; padding: var(--space-s); }
/* ---- Who We Serve grid ---- */
.srvGrid {
flex: 1 1 0; min-width: 0;
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);
border-left: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb;
}
.srvCard {
display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl);
padding: var(--space-xl); text-decoration: none; border-right: 1px solid #e5e7eb;
}
.srvCard:hover { background: var(--color-surface-brand-primary-subtle, #ECEAFB); } /* instant purple fill */
.srvCard:nth-child(1) { grid-row: 1 / span 2; grid-column: 1; }
.srvCard:nth-child(3), .srvCard:nth-child(5) { border-right: 0; }
.srvCard:nth-child(4), .srvCard:nth-child(5) { border-top: 1px solid #e5e7eb; }
.srvCard__top { display: flex; flex-direction: column; gap: var(--space-xs); align-items: flex-start; }
.srvCard__icon { display: inline-flex; }
.srvCard__icon img { width: 24px; height: 24px; display: block; }
.srvCard__title { font-family: var(--font-heading); font-weight: 500; font-size: 20px; line-height: 28px; color: var(--color-text-primary); }
.srvCard__desc { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--color-text-secondary); }
/* ---- Who We Serve promo (photo card) ---- */
.srvPromoWrap { flex: none; width: 400px; display: flex; align-items: stretch; padding: var(--space-xl); border-right: 1px solid #e5e7eb; }
.srvPromo { position: relative; overflow: hidden; isolation: isolate; flex: 1 1 auto; min-height: 380px; border-radius: 12px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); padding: var(--space-xl); }
.srvPromo__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.srvPromo__grad { position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(0,0,0,0) 83.4%, #000 100%),
linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 50%); }
.srvPromo__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-xs); }
.srvPromo__title { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 28px; color: #fff; }
.srvPromo__desc { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: .028px; color: #fff; }
.srvPromo__actions { position: relative; z-index: 2; display: flex; width: 100%; }
/* ================================================================
Solutions page — Hero + bento grid (Figma 35051-24627)
================================================================ */
/* 100vh hero on surface primary; brand purple fills from the top down to the
middle of the image (setupSolHero sets the exact height). The image fills the
remaining height and straddles the purple/white line at its middle. */
.solHero { position: relative; background: var(--color-surface-default); padding: 120px var(--pad-x) var(--space-3xl); display: flex; flex-direction: column; gap: var(--space-3xl); }
.solHero__purple { position: absolute; top: 0; left: 0; right: 0; height: 60%; background: var(--color-surface-brand-primary, #4A3DCC); z-index: 0; }
.solHero__content, .solHero__media { position: relative; z-index: 1; }
.solHero__media { aspect-ratio: 2 / 1; width: 100%; border-radius: 12px; overflow: hidden; } /* height = half the width */
.solHero__content { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3xl); width: 100%; }
.solHero__logos { display: none; } /* hidden per request — markup kept for later */
.solHero__title { flex: 1 1 0; min-width: 0; margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: clamp(40px, 4.44vw, 64px); line-height: 1.125; letter-spacing: -0.01em; color: #fff; }
.solHero__aside { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: var(--space-xl); }
.solHero__lead { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, .84); text-align: right; }
.solHero__btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 12px 24px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 8px; color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 16px; letter-spacing: .08px; text-decoration: none; white-space: nowrap; transition: background-color .25s ease, color .25s ease; }
.solHero__btn:hover { background: #fff; color: var(--color-text-brand-primary, #4A3DCC); }
.solHero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.solBento { background: var(--color-surface-default); padding: var(--space-6xl) var(--pad-x); display: flex; flex-direction: column; gap: var(--space-3xl); }
.solBento__title { margin: 0; text-align: center; font-family: var(--font-heading); font-weight: 400; font-size: clamp(28px, 3.3vw, 48px); line-height: 1.2; letter-spacing: -0.01em; color: var(--color-text-primary); }
.solBento__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
.solBento__card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3xl); min-height: 232px; padding: var(--space-xl); border-radius: 8px; text-decoration: none; transition: transform .3s ease; }
.solBento__card:hover { transform: translateY(-3px); }
/* tone-blocked bento: each colour group is 2 stacked cards on the left plus
1 tall card on the right (2-card groups are a simple left/right pair) */
.solBento__card:nth-child(1) { grid-column: 1; grid-row: 1; } /* Custom (purple) */
.solBento__card:nth-child(2) { grid-column: 1; grid-row: 2; } /* Digital (purple) */
.solBento__card:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; } /* Advisory (purple, tall) */
.solBento__card:nth-child(4) { grid-column: 1; grid-row: 3; } /* Core (green) */
.solBento__card:nth-child(5) { grid-column: 2; grid-row: 3; } /* API (green) */
.solBento__card:nth-child(6) { grid-column: 2; grid-row: 4; } /* Ongoing Support (yellow) */
.solBento__card:nth-child(7) { grid-column: 2; grid-row: 5; } /* App Maintenance (yellow) */
.solBento__card:nth-child(8) { grid-column: 1; grid-row: 4 / span 2; } /* Cloud (yellow, tall) */
.solBento__icon { display: inline-flex; }
.solBento__icon img { width: 32px; height: 32px; object-fit: contain; display: block; }
.solBento__foot { display: flex; align-items: flex-end; gap: var(--space-3xl); }
.solBento__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.solBento__cardTitle { font-family: var(--font-heading); font-weight: 700; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.375; letter-spacing: -0.16px; color: var(--color-text-primary); }
.solBento__desc { font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 28px; color: var(--color-text-secondary); }
.solBento__arrow { flex: none; display: inline-flex; }
.solBento__arrow svg { width: 40px; height: 40px; display: block; }
/* reuse the button's two-arrow swap (up-right out, bottom-left in) — no tile box */
.solBento__arrow .btn__arrows { position: relative; display: block; width: 40px; height: 40px; overflow: hidden; }
.solBento__card:hover .icon-arrow--a { transform: translate(100%, -100%); }
.solBento__card:hover .icon-arrow--b { transform: translate(0, 0); }
.solBento__card--purple { background: #ECEAFB; } .solBento__card--purple .solBento__arrow { color: #4A3DCC; }
.solBento__card--green { background: #E4F9F6; } .solBento__card--green .solBento__arrow { color: #24B39D; }
.solBento__card--yellow { background: #FFFBEB; } .solBento__card--yellow .solBento__arrow { color: #E8A200; }
@media (max-width: 860px) {
.solHero__content { flex-direction: column; align-items: flex-start; gap: var(--space-l); }
.solHero__aside { align-items: flex-start; }
.solHero__lead { text-align: left; }
.solHero__logos .chosen__row { justify-content: center; gap: clamp(24px, 6vw, 56px); }
.solBento__grid { grid-template-columns: 1fr; }
.solBento__card { grid-column: 1 !important; grid-row: auto !important; }
}
@media (max-width: 620px) {
/* the hero image flips to a portrait on phones, kept close to the next section */
.solHero__media { aspect-ratio: 3 / 4; }
.solHero { padding-bottom: 0; }
.solBento { padding-top: var(--space-4xl, 48px); }
}
@media (prefers-reduced-motion: reduce) { .solBento__card:hover { transform: none; } }
/* ================================================================
Life at DDT page (Figma 33253-14110)
================================================================ */
.lifeHero { display: flex; align-items: center; gap: var(--space-3xl); padding: 120px var(--pad-x) var(--space-6xl); background: var(--color-surface-default); }
.lifeHero__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-xxl, 32px); align-items: flex-start; }
.lifeHero__head { display: flex; flex-direction: column; gap: var(--space-m); }
.lifeHero__title { margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: clamp(40px, 4.44vw, 64px); line-height: 1.125; letter-spacing: -0.01em; color: var(--color-text-brand-primary, #4A3DCC); }
.lifeHero__t2 { color: #24B39D; }
.lifeHero__lead { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 28px; color: var(--color-text-secondary); max-width: 604px; }
.lifeHero__actions { display: flex; gap: var(--space-xs); align-items: center; flex-wrap: wrap; }
.lifeHero__media { flex: none; width: min(48%, 604px); display: flex; flex-direction: column; gap: var(--space-xl); align-items: center; }
.lifeHero__row { display: flex; gap: var(--space-xl); width: 100%; }
.lifeHero__row img { flex: 1 1 0; min-width: 0; height: auto; display: block; }
.lifeHero__big { width: 72%; height: auto; display: block; }
.lifeDesc { display: flex; align-items: stretch; gap: var(--space-3xl); padding: 120px var(--pad-x); background: var(--color-surface-brand-primary-subtle, #ECEAFB); }
.lifeDesc__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-m); justify-content: center; }
.lifeDesc__title { margin: 0 0 var(--space-s); font-family: var(--font-heading); font-weight: 500; font-size: clamp(34px, 4.44vw, 64px); line-height: 1.125; letter-spacing: -0.01em; color: var(--color-text-brand-primary, #4A3DCC); }
.lifeDesc__p { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 28px; color: var(--color-text-primary); }
.lifeDesc__media { flex: 1 1 0; min-width: 0; min-height: 440px; border: 2px solid var(--color-border-primary, #4A3DCC); border-radius: 16px; overflow: hidden; }
.lifeDesc__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lifeCulture { display: flex; flex-direction: column; align-items: center; gap: var(--space-5xl, 64px); padding: var(--space-6xl) var(--pad-x); background: var(--color-surface-default); }
.lifeCulture__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-s); text-align: center; max-width: 900px; }
.lifeCulture__title { margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: clamp(28px, 3.3vw, 40px); line-height: 1.3; letter-spacing: -0.01em; color: var(--color-text-primary); }
.lifeCulture__title em { font-weight: 700; font-style: italic; }
.lifeCulture__sub { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--color-text-secondary); }
.lifeCulture__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xxl, 32px); width: 100%; }
.lifeVal { display: flex; flex-direction: column; gap: var(--space-m); align-items: center; text-align: center; }
.lifeVal__ill { position: relative; width: 100%; aspect-ratio: 288 / 280; overflow: hidden; }
.lifeVal__ill img { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; }
.lifeVal__text { display: flex; flex-direction: column; gap: var(--space-xs); align-items: center; }
.lifeVal__title { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 28px; color: var(--color-text-brand-primary, #4A3DCC); }
.lifeVal__desc { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--color-text-secondary); }
.lifeMoments { display: flex; flex-direction: column; align-items: center; gap: var(--space-3xl); padding: var(--space-6xl) var(--pad-x); background: var(--color-surface-subtle, #FAFAFA); }
.lifeMoments__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-s); text-align: center; }
.lifePill { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; background: var(--color-surface-default, #fff); border: 1px solid var(--color-border-default, #e5e7eb); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.06); font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: .042px; color: var(--color-text-primary); }
.lifeMoments__title { margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: clamp(28px, 3.3vw, 40px); line-height: 1.3; letter-spacing: -0.01em; color: var(--color-text-primary); }
.lifeMoments__title em { font-weight: 700; font-style: italic; }
.lifeMoments__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); width: 100%; }
.lifeMoment { display: flex; flex-direction: column; gap: var(--space-m); }
.lifeMoment__img { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; }
.lifeMoment__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lifeMoment__body { display: flex; flex-direction: column; gap: var(--space-l, 20px); }
.lifeMoment__tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.lifeTag { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; background: var(--color-surface-brand-primary, #4A3DCC); color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: .042px; }
.lifeMoment__text { display: flex; flex-direction: column; gap: var(--space-xs); }
.lifeMoment__title { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 24px; line-height: 32px; letter-spacing: -0.12px; color: var(--color-text-primary); }
.lifeMoment__desc { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--color-text-secondary); }
@media (max-width: 1024px) {
.lifeCulture__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
.lifeHero, .lifeDesc { flex-direction: column; align-items: stretch; }
/* the collage fills the full width so there is no dead space on the right;
the big image spans wider and sits centred under the two circles */
.lifeHero__media { width: 100%; max-width: none; align-self: stretch; gap: var(--space-l); }
.lifeHero__big { width: 78%; }
.lifeMoments__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.lifeCulture__grid { grid-template-columns: 1fr; }
/* bigger card headings on phones */
.lifeVal__title { font-size: 26px; line-height: 34px; }
}
/* --- Life page: every section fills the viewport; images scale to fit --- */
.lifeHero, .lifeDesc, .lifeCulture, .lifeMoments { min-height: 100vh; box-sizing: border-box; }
.lifeHero { align-items: center; }
.lifeCulture, .lifeMoments { justify-content: center; }
/* hero stays exactly 100vh; the media (all three images filled) starts at the
top and spills past the bottom — the next section (opaque, higher z-index)
sits on top of the overflow, so img 3 reads as tucked behind section 2 */
.lifeHero { min-height: 0; height: 100vh; overflow: visible; align-items: flex-start; position: relative; z-index: 0; }
.lifeHero__text { align-self: center; } /* left column vertically centred; media stays top-aligned */
.lifeHero__media { max-height: none; justify-content: flex-start; flex: 1 1 0; min-width: 0; width: auto; }
.lifeHero__row { min-height: 0; justify-content: center; width: 100%; }
.lifeHero__row img { flex: 1 1 0; min-width: 0; width: 100%; max-width: none; max-height: none; height: auto; }
.lifeHero__big { width: 100%; max-width: 100%; height: auto; max-height: none; }
.lifeDesc { position: relative; z-index: 1; }
.lifeDesc__media { max-height: calc(100vh - 240px); }
.lifeMoment__img { max-height: 42vh; }
@media (max-width: 860px) {
.lifeHero, .lifeDesc, .lifeCulture, .lifeMoments { min-height: 0; }
}
/* ==================================================================
CAREERS PAGE (Figma "Website DDT - Careers" 35301:53266)
================================================================== */
.caHero {
position: relative;
min-height: 100svh;
display: flex;
align-items: flex-end;
padding: var(--nav-h, 80px) var(--pad-x) 80px;
overflow: hidden;
}
.caHero__bg { position: absolute; inset: 0; z-index: 0; }
.caHero__bg img { width: 100%; height: 100%; object-fit: cover; }
.caHero::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 12%),
linear-gradient(180deg, rgba(0,0,0,0) 43%, rgba(0,0,0,1) 100%);
}
.caHero__inner { position: relative; z-index: 2; width: 100%; }
.caHero__content { display: flex; flex-direction: column; gap: var(--space-xxl, 32px); max-width: 612px; }
.caHero__text { display: flex; flex-direction: column; gap: var(--space-l, 24px); }
.caHero__title {
margin: 0; font-family: var(--font-heading); font-weight: 500;
font-size: clamp(40px, 4.4444vw, 64px); line-height: 1.125; letter-spacing: -0.01em;
color: var(--color-text-inverse, #fff);
}
.caHero__lead {
margin: 0; font-family: var(--font-body); font-size: 18px; line-height: 1.5556;
color: var(--color-text-inverse, #fff);
}
.caHero__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs, 8px); }
.caJobs {
display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
min-height: 100svh;
gap: 40px;
padding: var(--space-xl) var(--pad-x);
background: var(--color-surface-default, #fff);
}
.caJobs__illus img { display: block; width: 439px; max-width: 90%; height: auto; }
.caJobs__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-s, 12px); max-width: 760px; }
.caJobs__title {
margin: 0; font-family: var(--font-heading); font-weight: 500;
font-size: clamp(28px, 3vw, 32px); line-height: 1.375; letter-spacing: -0.005em;
color: var(--color-text-primary);
}
.caJobs__sub {
margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5;
color: var(--color-text-secondary);
}
.caJobs__cta { margin-top: 4px; }
/* ============================================================
FINANCIAL SERVICES PAGE (Figma "Who We Serve - Financial
Services", 35094:28322 + Capabilities full sequence 35332:63096)
============================================================ */
/* ---- Hero ---- */
.finHero {
height: 100vh;
display: flex;
flex-direction: column;
padding: var(--space-none) var(--pad-x);
background: var(--color-surface-default);
}
.finHero__navspace { height: var(--nav-h); width: 100%; flex: none; }
/* 12-col grid, content/illustration sharing an even 6/6 split at a 24px
gap (Figma "Frame 220", 35315:56549); fills the rest of the 100vh hero
and centres the row vertically in the space left under the nav. */
.finHero__inner {
flex: 1 1 auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
align-items: center;
align-content: center;
gap: var(--space-xl);
}
/* the inner centres in the space *below* the 80px nav, which reads a touch
low on tall desktop screens; a bottom padding shrinks the centring band
so the content sits nearer the true viewport centre (Who We Serve pages
only — .finHero isn't used elsewhere). */
@media (min-width: 1025px) {
.finHero__inner { padding-bottom: var(--nav-h); }
}
.finHero__col { grid-column: span 6; min-width: 0; display: flex; flex-direction: column; gap: var(--space-xl); }
/* laurel badge above the heading (Figma 35506:122930) — same laurel lockup
as the home hero, but no pill background: dark text, golden laurels
(the SVGs carry #F8A008 baked in, so no filter). 24px gap to the heading
comes from the column's own gap. */
.finHero__badge {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 0;
animation: fadeInUp .8s ease both .02s;
}
.finHero__badge-text {
font-family: var(--font-label);
font-weight: 600;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.042px;
color: var(--color-text-primary);
white-space: nowrap;
}
.finHero__badge-laurel { flex: none; width: 27px; height: 40px; display: block; }
.finHero__badge-laurel--l { transform: scaleY(-1); }
.finHero__badge-laurel--r { transform: rotate(180deg); }
.finHero__title { margin: 0; color: var(--color-text-primary); animation: fadeInUp .8s ease both .1s; }
.finHero__lead { margin: 0; color: var(--color-text-secondary); animation: fadeInUp .8s ease both .22s; }
.finHero__actions { display: flex; align-items: center; gap: var(--space-xs); animation: fadeInUp .8s ease both .34s; }
.finHero__art { grid-column: span 6; min-width: 0; display: flex; align-items: center; justify-content: center; animation: fadeInUp .9s ease both .3s; }
.finHero__art img { width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
.finHero__badge, .finHero__title, .finHero__lead, .finHero__actions, .finHero__art { animation: none; }
}
@media (max-width: 1024px) {
/* not a forced 100vh on touch — let the stacked content flow with room to
breathe so the buttons never crowd the section below; content is centred */
.finHero { height: auto; min-height: 0; padding-bottom: var(--space-7xl, 96px); }
.finHero__navspace { height: calc(var(--nav-h) + var(--space-l)); }
.finHero__inner { grid-template-columns: 1fr; align-content: start; gap: var(--space-xl); }
.finHero__col { grid-column: auto; gap: var(--space-l); align-items: center; text-align: center; }
.finHero__art { grid-column: auto; order: -1; }
.finHero__art img { width: min(100%, 300px); }
.finHero__badge { align-self: center; }
.finHero__title { font-size: clamp(30px, 8vw, 42px); line-height: 1.14; }
.finHero__lead { font-size: 16px; line-height: 1.6; max-width: 46ch; }
.finHero__actions { justify-content: center; flex-wrap: wrap; width: 100%; }
}
@media (max-width: 480px) {
/* buttons stack full-width on small phones */
.finHero__actions { flex-direction: column; align-items: stretch; }
.finHero__actions .btn { width: 100%; }
}
/* ---- Counter — reuses .counter/.stats, symmetric padding per Figma ---- */
.counter--fin { padding: var(--space-6xl) var(--pad-x); }
/* ---- Why DDT ---- */
.finWhy {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3xl);
padding: var(--space-padding) var(--pad-x);
background: var(--color-surface-default);
}
.finWhy__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-s); }
.finWhy__title { margin: 0; max-width: 900px; text-align: center; color: var(--color-text-primary); }
.finWhy__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); width: 100%; }
.finWhy__card {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: var(--space-xs);
min-height: 560px;
padding: var(--space-xl);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-m, 16px);
background: var(--color-surface-default);
}
.finWhy__cardText { display: flex; flex-direction: column; gap: var(--space-s); width: 100%; }
.finWhy__cardTitle { margin: 0; color: var(--color-text-primary); }
.finWhy__cardDesc { margin: 0; color: var(--color-text-secondary); }
/* illustration slot — dashed placeholder box per Figma, awaiting artwork */
.finWhy__illo {
flex: 1 0 0;
min-height: 0;
width: 100%;
border-radius: var(--radius-m, 16px);
background: #fafafa;
border: 2px dashed var(--color-border-default);
}
.finWhy__desc { margin: 0; max-width: 824px; text-align: center; color: var(--color-text-tertiary); }
/* emphasized clause in the closing line — darker + heavier than the rest */
.finWhy__descEm { color: var(--color-text-primary); font-weight: 600; }
@media (max-width: 900px) {
.finWhy__grid { grid-template-columns: 1fr; }
.finWhy__card { min-height: auto; }
.finWhy__illo { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
.finWhy__cardDesc, .finOutCard__desc, .finSolCard__desc { opacity: 1 !important; transition: none; }
}
/* ---- Solutions bento ---- */
.finSol {
scroll-margin-top: var(--nav-h-scrolled);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3xl);
padding: var(--space-padding) var(--pad-x);
background: var(--color-background-default);
}
.finSol__title { margin: 0; text-align: center; color: var(--color-text-primary); }
.finSol__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); width: 100%; }
.finSolCard--wide { grid-column: span 2; }
/* 5-solution pages (healthcare, retail & commerce): 3 cards on the top row,
2 wider cards below — a balanced bento for the odd card count */
.finSol__grid--five { grid-template-columns: repeat(6, 1fr); }
.finSol__grid--five .finSolCard { grid-column: span 2; }
.finSol__grid--five .finSolCard--wide { grid-column: span 3; }
.finSolCard {
display: flex;
flex-direction: column;
/* head pinned to the top, description pushed to the bottom edge, so the
descriptions line up across cards no matter how tall the title runs */
justify-content: space-between;
gap: var(--space-4xl, 48px);
padding: var(--space-xl);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-m, 16px);
background: var(--color-surface-default);
transition: transform .25s ease, box-shadow .25s ease;
}
.finSolCard:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(17,24,39,.08); }
/* head groups the icon row + title with their own 12px gap (Figma
35328:58425); the card's own 48px gap then only separates that head
group from the description — previously the 48px gap applied to the
title too, doubling up the space above it. */
.finSolCard__head { display: flex; flex-direction: column; gap: var(--space-s); }
.finSolCard__top { display: flex; align-items: center; justify-content: space-between; }
.finSolCard__icon {
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px; padding: var(--space-xs);
border-radius: var(--radius-s); background: var(--color-surface-brand-primary-subtle);
}
.finSolCard__icon--teal { background: var(--color-surface-brand-secondary-subtle); }
.finSolCard__icon--amber { background: #fffbeb; }
.finSolCard__icon img { width: 28px; height: 28px; object-fit: contain; }
.finSolCard__arrow { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--color-text-primary); }
.finSolCard__arrow svg { width: 24px; height: 24px; }
.finSolCard__title { margin: 0; color: var(--color-text-primary); }
/* description hides at rest and reveals on hover; it keeps its box (no flex
grow, sits flush at the bottom via the card's space-between) so revealing
it never shifts the layout */
.finSolCard__desc { margin: 0; color: var(--color-text-secondary); opacity: 0; transition: opacity .3s ease; }
.finSolCard:hover .finSolCard__desc { opacity: 1; }
/* the 4 single-width cards reserve 2 lines for the description so they
stay the same size as each other (e.g. "Core Banking Systems" always
wraps to 2 lines) — the 2 wide cards below are left to size naturally */
.finSolCard:not(.finSolCard--wide) .finSolCard__desc { min-height: calc(24px * 2); }
@media (max-width: 1024px) { .finSol__grid { grid-template-columns: repeat(2, 1fr); } .finSolCard--wide { grid-column: span 2; } }
@media (max-width: 1024px) {
.finSol__grid--five { grid-template-columns: repeat(2, 1fr); }
.finSol__grid--five .finSolCard,
.finSol__grid--five .finSolCard--wide { grid-column: span 1; }
.finSol__grid--five .finSolCard:last-child { grid-column: span 2; }
}
/* touch has no hover — the card descriptions are always visible, and the big
reveal gap collapses to a normal one */
@media (hover: none), (max-width: 1024px) {
.finSolCard__desc { opacity: 1 !important; }
.finSolCard { gap: var(--space-l); }
}
@media (max-width: 620px) { .finSol__grid { grid-template-columns: 1fr; } .finSolCard--wide { grid-column: span 1; } }
@media (max-width: 620px) {
.finSol__grid--five { grid-template-columns: 1fr; }
.finSol__grid--five .finSolCard:last-child { grid-column: span 1; }
}
/* ---- Capabilities — pinned/sticky sequence ----
Outer runway is (tabs + 1) screens tall; the extra screen is a hold at
the end so the last tab stays put for a full scroll before the section
releases into Business Outcomes. main.js scrubs --i via scroll progress
and toggles .is-active on the matching tab/panel pair. */
.finCaps {
position: relative;
height: 600vh; /* 6 tabs, one screen each — no hold at the end */
background: var(--color-surface-default);
}
.finCaps__pin {
position: sticky;
top: 0;
height: 100vh;
display: flex;
align-items: stretch;
overflow: hidden;
}
/* content fills the full 100vh pin and never overflows it: the head hugs
its own text, the tab list takes whatever is left and splits it evenly
across all 6 tabs, so every tab is always visible regardless of the
viewport's actual height (no fixed Figma-desktop padding to overflow). */
.finCaps__content { flex: 5 1 0; min-width: 0; height: 100%; padding-top: var(--space-3xl); display: flex; flex-direction: column; }
.finCaps__head { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--space-xs); justify-content: center; padding: var(--space-xl) var(--space-3xl) var(--space-xl) var(--pad-x); }
.finCaps__kicker { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 16px; line-height: 24px; color: var(--color-text-brand-primary); }
.finCaps__title { margin: 0; color: var(--color-text-primary); }
.finCaps__list { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
.finCapsTab {
flex: 1 1 0;
min-height: 0;
display: flex;
align-items: center;
border: none;
border-top: 1px solid var(--color-border-default);
padding: var(--space-xs) var(--space-3xl) var(--space-xs) var(--pad-x);
background: transparent;
font-family: var(--font-heading);
font-weight: 500;
font-size: 20px;
line-height: 1.4;
letter-spacing: -0.005em;
color: var(--color-text-primary);
text-align: left;
cursor: pointer;
transition: background-color .3s ease, color .3s ease;
}
.finCapsTab:last-child { border-bottom: 1px solid var(--color-border-default); }
.finCapsTab.is-active {
background: var(--color-surface-brand-primary-subtle);
color: var(--color-text-brand-primary);
font-weight: 700;
}
.finCaps__media { position: relative; flex: 7 1 0; min-width: 0; }
.finCapsPanel {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
padding: var(--space-4xl, 48px) var(--pad-x) var(--space-4xl, 48px) var(--space-4xl, 48px);
background-image: var(--bg);
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity .5s ease;
}
.finCapsPanel.is-active { opacity: 1; }
.finCapsPanel__quote {
margin: 0;
padding: var(--space-3xl);
width: 100%;
background: var(--color-surface-default);
color: var(--color-text-primary);
font-size: 28px;
line-height: 1.4286;
}
@media (max-width: 1024px) {
/* touch: no pin; a horizontal, swipeable tab bar with the active panel shown
right below it (so the content stays in view as you switch tabs) */
.finCaps { height: auto; }
.finCaps__pin { position: static; height: auto; flex-direction: column; overflow: visible; }
.finCaps__content { height: auto; padding-top: 0; }
.finCaps__head { padding: var(--space-6xl, 80px) var(--pad-x) var(--space-l); }
/* underline tabs: a full-width track line with the active tab underlined,
the row itself scrolls horizontally */
.finCaps__list {
flex: none; flex-direction: row; flex-wrap: nowrap;
overflow-x: auto; overflow-y: hidden;
gap: 0; padding: 0 var(--pad-x);
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.finCaps__list::-webkit-scrollbar { display: none; }
/* spacing comes from padding (no gap), so the underline can run the full tab
width edge to edge, not just under the text */
.finCapsTab {
position: relative;
flex: none; min-height: 0; white-space: nowrap;
border: none; border-radius: 0; background: transparent;
padding: var(--space-s) var(--space-m); font-size: 15px; line-height: 1.3;
color: var(--color-text-secondary);
}
/* every tab shows a grey baseline; the active one lays a purple line on top */
.finCapsTab::before {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
background: var(--color-border-default);
}
.finCapsTab:last-child { border: none; }
.finCapsTab.is-active { background: transparent; color: var(--color-text-brand-primary); font-weight: 700; }
/* the purple underline flows left→right over the 2.5s interval and restarts
each time a tab becomes active */
.finCapsTab.is-active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
background: var(--color-surface-brand-primary);
transform-origin: left center; animation: finCapsFill 2.5s linear both;
}
.finCaps__media { flex: none; min-height: 300px; } /* touches the tab bar, no gap */
/* shrink the white quote box on the panel image */
.finCapsPanel { padding: var(--space-xl) var(--pad-x); }
.finCapsPanel__quote { padding: var(--space-l); font-size: 18px; line-height: 1.5; }
}
@keyframes finCapsFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
.finCapsTab, .finCapsPanel { transition: none; }
.finCapsTab.is-active::after { animation: none; } /* static full underline */
}
/* ---- Business Outcomes bento ---- */
.finOut {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3xl);
padding: var(--space-padding) var(--pad-x);
background: var(--color-surface-default);
}
.finOut__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-s); }
.finOut__title { margin: 0; max-width: 900px; text-align: center; color: var(--color-text-primary); }
/* 3 cols: side columns each hold 3 stacked cards (grid-row 1/2/3 set inline
per card), the centre column is one photo spanning all 3 rows so it
always matches the stacked cards' combined height exactly. */
.finOut__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); width: 100%; }
.finOutCard {
display: flex;
flex-direction: column;
gap: var(--space-s);
justify-content: flex-start;
padding: var(--space-xl);
border-radius: var(--radius-m, 16px);
background: var(--color-surface-default);
}
.finOutCard__icon {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; flex: none;
border-radius: var(--radius-s);
background: var(--color-surface-brand-primary);
}
.finOutCard__icon img { width: 24px; height: 24px; }
.finOutCard__title { margin: 0; color: var(--color-text-primary); }
.finOutCard__desc { margin: 0; color: var(--color-text-secondary); }
.finOut__photo {
border-radius: var(--radius-m, 16px);
overflow: hidden;
min-height: 300px;
}
.finOut__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* desktop: fill the viewport and centre the block vertically */
@media (min-width: 1025px) {
.finOut { min-height: 100vh; justify-content: center; }
}
@media (max-width: 1024px) {
.finOut__grid { grid-template-columns: repeat(2, 1fr); }
.finOutCard, .finOut__photo { grid-column: auto !important; grid-row: auto !important; }
/* the centre photo/visual is decorative — drop it on touch so the outcome
cards get the full width */
.finOut__photo { display: none !important; }
}
@media (max-width: 620px) {
.finOut__grid { grid-template-columns: 1fr; }
.finOut__photo { grid-column: span 1 !important; }
}
/* ============================================================
CONTACT MODAL (Figma "Get in Touch Modal", 35338:61239)
Sitewide overlay — injected once by main.js and opened by any CTA
whose label matches the whitelist in setupContactModal(). 612px
card, 24px outer rhythm, 20px inner field rhythm, 2-col (6/6) rows.
============================================================ */
.contactOverlay {
position: fixed;
inset: 0;
z-index: 300;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-xl);
opacity: 0;
visibility: hidden;
transition: opacity .28s ease, visibility .28s;
}
.contactOverlay.is-open { opacity: 1; visibility: visible; }
.contactOverlay__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.24);
}
/* header and footer are fixed inside the card; only the middle
(.contactModal__scroll) scrolls, with its own themed scrollbar rather
than the browser's native one on the whole card. */
.contactModal {
position: relative;
width: min(680px, 100%);
max-height: min(840px, calc(100vh - var(--space-xl)));
display: flex;
flex-direction: column;
border-radius: 24px;
background: var(--color-surface-default);
box-shadow: 0 24px 64px rgba(17, 24, 39, .18);
transform: translateY(16px) scale(.98);
opacity: 0;
transition: transform .32s cubic-bezier(.2, .7, .3, 1), opacity .32s ease;
overflow: hidden; /* keeps the header/footer's square corners inside the rounded card */
}
.contactOverlay.is-open .contactModal { transform: none; opacity: 1; }
.contactModal__head {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-xl);
background: var(--color-surface-default);
border-bottom: 1px solid var(--color-border-default);
position: relative;
z-index: 1;
}
/* logo matched to the close button's 40px box so the header balances
visually left-to-right */
.contactModal__logo { height: 40px; width: auto; }
.contactModal__close {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; padding: var(--space-xs);
border: none; border-radius: var(--radius-s);
background: var(--color-surface-strong);
color: var(--color-text-primary);
cursor: pointer;
transition: background-color .2s ease;
}
.contactModal__close:hover { background: var(--color-border-default); }
.contactModal__close svg { width: 24px; height: 24px; }
.contactForm { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.contactModal__scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: var(--space-xl);
display: flex;
flex-direction: column;
gap: var(--space-xl);
/* custom scrollbar so it reads as part of the card, not the OS chrome */
scrollbar-width: thin;
scrollbar-color: var(--color-border-default) transparent;
}
.contactModal__scroll::-webkit-scrollbar { width: 8px; }
.contactModal__scroll::-webkit-scrollbar-track { background: transparent; }
.contactModal__scroll::-webkit-scrollbar-thumb { background: var(--color-border-default); border-radius: 999px; }
.contactModal__scroll::-webkit-scrollbar-thumb:hover { background: #c7cbd3; }
.contactModal__intro { display: flex; flex-direction: column; gap: var(--space-xss); }
.contactModal__title { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 32px; line-height: 1.375; color: var(--color-text-primary); }
.contactModal__lead { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--color-text-secondary); }
.contactForm__fields { display: flex; flex-direction: column; gap: var(--space-l); }
.contactForm__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-l); }
.contactField { display: flex; flex-direction: column; gap: var(--space-xss); min-width: 0; }
.contactField__label {
display: flex; align-items: center; gap: var(--space-xss);
font-family: var(--font-label); font-weight: 600; font-size: 14px;
line-height: 20px; letter-spacing: .042px; color: var(--color-text-primary);
}
.contactField__req { color: var(--color-text-error); }
.contactField__optional { font-family: var(--font-label); font-weight: 600; font-size: 12px; letter-spacing: .06px; color: var(--color-text-tertiary); }
.contactField__input,
.contactField__textarea {
width: 100%;
height: 48px;
padding: var(--space-s) var(--space-m);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-m, 12px);
background: var(--color-surface-default);
font-family: var(--font-body);
font-size: 14px;
line-height: 20px;
letter-spacing: .028px;
color: var(--color-text-primary);
transition: border-color .2s ease, box-shadow .2s ease;
}
.contactField__input::placeholder,
.contactField__textarea::placeholder { color: var(--color-text-muted); }
.contactField__textarea { height: 120px; padding-top: var(--space-s); resize: vertical; }
.contactField__input:hover,
.contactField__textarea:hover { border-color: #c7cbd3; }
.contactField__input:focus,
.contactField__textarea:focus {
outline: none;
border-color: var(--color-surface-brand-primary);
box-shadow: 0 0 0 3px var(--color-surface-brand-primary-subtle);
}
.contactField.has-error .contactField__input,
.contactField.has-error .contactField__textarea {
border-color: var(--color-text-error);
}
.contactField.has-error .contactField__input:focus,
.contactField.has-error .contactField__textarea:focus {
box-shadow: 0 0 0 3px rgba(239, 68, 68, .14);
}
.contactField__error {
margin: 0;
min-height: 0;
font-family: var(--font-body);
font-size: 13px;
line-height: 1.4;
color: var(--color-text-error);
display: none;
}
.contactField.has-error .contactField__error { display: block; }
/* custom Industry dropdown — a native