:root {
--teal: #c4e7ee;
--mint: #e0fdee;
--pale: #eef9ee;
--yellow-green: #8bd136;
--pale-yellow-green: #cde494;
--ink: #103322;
/* titles: Poppins. body copy: the Typekit kit's "arial" family (loaded via
the use.typekit.net link in ). */
--font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
--font-body: "arial", "Helvetica Neue", Arial, sans-serif;
--brand-blue: #25408f;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
font-family: var(--font-body);
background: #fff;
color: var(--ink);
/* a teammate flagged the page appearing to "move left to right" -- a
screen recording showed content shift left then snap back with the
cursor never moving, which is a horizontal trackpad-swipe rubber-band
bounce (Safari/Chrome's own overscroll gesture feedback), not
anything actually animating in this codebase. overscroll-behavior-x
alone suppresses that bounce.
`overflow-x: hidden` was tried alongside it and reverted -- setting
overflow-x explicitly on forces the UA to compute overflow-y
as `auto` instead of `visible` (CSS overflow spec: one axis can't
stay `visible` once the other is a non-visible value), which changes
which element is the real scrolling container and threw off the
timing of every scroll-position-dependent effect on this page (Lenis,
the hero scroll-frame, stack-shrink, ...). overscroll-behavior-x does
NOT have that side effect, so it's kept on its own. */
overscroll-behavior-x: none;
}
/* once JS confirms #site-waves exists to paint something underneath it,
drop body's own opaque white fill -- without this, body's normal-flow
background box paints ABOVE a negative-z-index fixed descendant (see
#site-waves below), hiding the canvas completely regardless of its own
z-index. Gated behind html.js (same pattern as [data-reveal] above it
in this file) so a JS failure/slow load just means no waves, not a
see-through page with nothing under it. */
html.js body {
background: transparent;
}
/* --- site-wide wave background -----------------------------------------
A persistent canvas painted BEHIND every section (setupSiteWaves() in
hero.js draws continuously-animated translucent sine lines onto it) --
not a hero-specific effect. position:fixed + z-index:-1 keeps it
pinned to the viewport and below all normal page content; it's
invisible wherever a section paints a fully opaque background over it
(the hero video, .about__image, ...) and shows through wherever a
section uses one of this site's existing translucent rgba-alpha
gradient washes instead -- same behavior the sponsorships.aramco.com
reference this was modeled on has with its own photography. */
#site-waves {
position: fixed;
inset: 0;
z-index: -1;
display: block;
pointer-events: none;
}
/* --- one-scroll/one-keypress-per-section snapping: REMOVED (used to be
scroll-snap-type on html + scroll-snap-align/-stop on .snap-section).
It worked fine on its own, but now that Lenis owns scrolling (see
hero.js) the two fight: native scroll-snap forcibly jumps the real
scrollTop to the nearest snap point on its own timing, behind Lenis's
back, which desyncs Lenis's internally tracked scroll position from the
actual one and produces a visible jump/glitch on the next scroll input
-- confirmed by forcing a native scroll into #performance-highlights's
old snap zone, which jumped straight to the snap point regardless of
Lenis's animation state. Lenis has its own opt-in snap addon if this
behavior is wanted back; native scroll-snap-type alongside Lenis is not
a safe middle ground. The .snap-section class has been removed from
index.html (it only ever marked #hero and #performance-highlights). */
/* --- stacked-panel parallax (Hero -> About -> Highlights -> Trust ->
Joint Letter -> CEO Message): each panel is a normal-flow 100vh block
that goes `position: sticky; top: 0`, so it pins in place the instant it
reaches the viewport top. The next panel, still approaching from below
in ordinary scroll flow, is stacked at a higher z-index -- so as it
scrolls upward it visibly slides up and over the still-pinned panel
beneath it, right up until it reaches the top and pins itself. Hero
joined this stack (at the lowest z-index, so About covers it first) so
the very first scroll -- hero into About -- gets the same cover motion
as every later transition, instead of being a plain scroll-away. This
region deliberately has no scroll-snap-align: it needs continuous
scroll to animate the cover, not discrete per-section jumps. --- */
.stack {
position: relative;
}
.stack section {
position: sticky;
top: 0;
}
.stack section#hero { z-index: 0; }
.stack section#about { z-index: 1; }
.stack section#highlights { z-index: 2; }
/* #global-footprint (Trust), #joint-letter, and #ceo-message are no
longer inside .stack -- each flows normally below Highlights instead
of sticky-pinning/covering the one before it, per explicit request to
drop the parallax stacking from Trust onward. */
/* --- scroll-entry reveal utility --------------------------------------
Any element with [data-reveal="up|left|right|scale"] starts hidden/offset
and gets .is-revealed added by the IntersectionObserver in hero.js the
first time it scrolls into view (fires once -- re-triggering on scroll-
back-up would read as jittery, not delightful, on a report site).
Repeated groups (chip grids, card rows) stagger via a per-item
transition-delay set alongside each group's own rules further down,
rather than a generic nth-child scheme here, to match this file's
existing one-rule-per-class style.
Everything here is gated behind html.js (set by the inline script at the
top of ) -- without it, a JS failure or slow/blocked script would
leave every [data-reveal] element at opacity:0 forever, permanently
hiding content instead of just losing the entrance animation. */
html.js [data-reveal] {
opacity: 0;
transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js [data-reveal="up"] { transform: translateY(56px); }
html.js [data-reveal="left"] { transform: translateX(-64px); }
html.js [data-reveal="right"] { transform: translateX(64px); }
html.js [data-reveal="scale"] { transform: scale(0.9); }
/* opacity-only, no transform -- for the Read More buttons, which already
animate `transform` themselves on :hover (a lift). Combining that with
this utility's transform-based entrance would fight over the same
property; fading them in avoids the clash entirely. */
html.js [data-reveal="fade"] { transform: none; }
html.js [data-reveal].is-revealed {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
[data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
}
/* Joint Letter and CEO Message: entrance animation removed per client
request -- content renders immediately at full opacity/position instead
of fading/sliding in on scroll. */
#joint-letter [data-reveal],
#ceo-message [data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
/* --- Read More button: flat solid pill -------------------------------
Replaces the earlier liquid-glass treatment (frosted blur + canvas-
generated dynamic rim/specular lighting, ported from a reference
React/WebGL component -- see HANDOFF for that round's history if it
ever needs resurrecting). Liquid-glass turned out to be the only
blurred/glass-styled control anywhere on the site -- every other CTA
(.site-nav__cta, nav pills, carousel arrows) is a flat solid-fill
pill with a plain lift-on-hover, no blur -- so it read as an outlier
against the rest of the page rather than a highlight. This matches
that existing flat-pill language instead: same recipe as
.site-nav__cta (solid brand-blue, white text, pill radius, lift +
shadow on hover), reused here as a shared class since it's now the
same visual treatment in every one of the 7 places it appears.
Structure: -- no
inner spans needed (the old __specular/__rim/__label children existed
only for the glass layering, which is gone). The component-specific
class (.hero-readmore etc.) still owns position/layout/
transition-delay. */
.btn-cta {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 999px;
background: var(--brand-blue);
color: #fff;
font-family: var(--font-display);
font-size: 0.86rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.btn-cta:active {
transform: translateY(0) scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
.btn-cta,
.btn-cta:hover,
.btn-cta:active { transition: none; }
}
/* white-fill variant for buttons sitting on dark/photo backgrounds
(Trust's dark navy "Global Footprint" section, Joint Letter, CEO
Message, Verticals) where solid brand-blue would blend in too close
to the backdrop's own hue -- same reasoning the liquid-glass
--light variant had, just for a solid fill instead of a tinted one. */
.btn-cta--light {
background: #fff;
color: var(--brand-blue);
}
/* --- top navigation --- */
.site-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 20;
/* no background here -- the logo sits directly on the video */
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* auto-hides on scroll down, reappears on scroll up -- see setupNavAutoHide()
in hero.js. Skipped entirely while the mobile drawer or a mega-menu panel
is open (that guard lives in the JS, not here) so it can't slide away out
from under an open dropdown. */
.site-nav.site-nav--hidden {
transform: translateY(-130%);
}
@media (prefers-reduced-motion: reduce) {
.site-nav { transition: none; }
}
.site-nav__inner {
/* position+z-index here (not just on the ) is required --
.site-nav__mega is a sibling *inside* , positioned with its
own z-index. Within header's shared stacking context, a positioned
z-index:19 sibling paints OVER non-positioned in-flow content
regardless of the header's own z-index being higher; without this,
opening any mega-menu made the whole logo+links bar invisible
(painted-under, not actually removed -- rects/opacity checked fine in
devtools, just hidden behind the panel). */
position: relative;
z-index: 2;
max-width: 1520px;
margin: 0 auto;
padding: 0.8rem 4vw 0.8rem 6vw;
display: flex;
align-items: center;
justify-content: space-between;
}
/* logo/menu drop in from just above the top edge once .site-nav.is-loaded
is set (see hideLoader() in hero.js -- fires the moment the loader fades
out, so the nav visibly arrives right as the loader disappears rather
than sitting there statically the whole time). Gated behind html.js,
same reasoning as the [data-reveal] utility above: if JS never runs,
is-loaded never gets added, so this can't be allowed to hide the nav
permanently. */
html.js .site-nav__logo,
html.js .site-nav__menu {
opacity: 0;
transform: translateY(-140px) scale(0.85);
/* overshoot easing (the cubic-bezier dips past 1 before settling) reads
as a bouncy drop rather than a plain slide -- opacity still eases in
smoothly on its own curve so it doesn't flicker on the overshoot */
transition: opacity 0.6s ease-out, transform 1.1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html.js .site-nav__menu { transition-delay: 0.22s; }
html.js .site-nav.is-loaded .site-nav__logo,
html.js .site-nav.is-loaded .site-nav__menu {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html.js .site-nav__logo,
html.js .site-nav__menu {
opacity: 1;
transform: none;
transition: none;
}
}
.site-nav__logo {
display: block;
flex: 0 0 auto;
line-height: 0;
/* top padding carries an extra 0.8rem (matching .site-nav__inner's own
padding-top exactly) offset by an equal negative top margin just
below -- the two cancel out for the logo IMAGE's own rendered
position (unchanged from before), but the box's background/border
edge itself extends up by that same 0.8rem, reaching all the way to
the header's own top edge (y:0) instead of stopping at the inner
padding's floor. Only visible once scrolled (background is
transparent otherwise), but applied unconditionally since it's a
layout offset, not a visual one, and toggling it on/off would need
its own transition anyway. */
padding: 1.3rem 0.5rem 0.5rem;
margin-top: -0.8rem;
/* square, flat corners -- matches this site's own no-rounded-corners
rule elsewhere, unlike the hamburger's pill treatment below. */
background: transparent;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-nav--scrolled .site-nav__logo {
background: #fff;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
}
.site-nav__logo img {
/* +15% over the original 46px */
height: 53px;
width: auto;
display: block;
filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.2));
}
/* individual bordered pill buttons floating directly on the page --
replaced a single frosted-glass bar holding all the links, closer to
getminds.ai's nav than the earlier glass-box treatment. .site-nav__menu
is now a plain flex layout wrapper, not a visual container itself. */
.site-nav__menu {
position: relative;
display: flex;
align-items: center;
gap: 1rem;
}
.site-nav__links {
display: flex;
align-items: center;
gap: 0.6rem;
flex: 0 0 auto;
}
.site-nav__links a,
.site-nav__link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--ink);
text-decoration: none;
font-size: 0.86rem;
font-weight: 500;
letter-spacing: 0.01em;
white-space: nowrap;
background: #fff;
border: 1.5px solid rgba(37, 64, 143, 0.22);
border-radius: 999px;
padding: 0.55rem 1.1rem;
cursor: pointer;
font-family: inherit;
box-shadow: 0 2px 10px rgba(16, 51, 34, 0.06);
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.site-nav__links a svg,
.site-nav__link svg {
flex: 0 0 auto;
}
.site-nav__links a:hover,
.site-nav__links a:focus-visible,
.site-nav__link:hover,
.site-nav__link:focus-visible {
border-color: var(--brand-blue);
color: var(--brand-blue);
}
/* filled solid while its mega-menu panel is open -- was previously an
underline indicator; a filled pill reads more clearly as "active" and
matches the reference's filled-pill treatment for the current item */
.site-nav__link[aria-expanded="true"] {
background: var(--brand-blue);
border-color: var(--brand-blue);
color: #fff;
}
.site-nav__cta {
display: inline-flex;
align-items: center;
gap: 0.45rem;
flex: 0 0 auto;
background: var(--brand-blue);
color: #fff;
text-decoration: none;
font-size: 0.86rem;
font-weight: 600;
padding: 0.6rem 1.3rem;
border: 1.5px solid var(--brand-blue);
border-radius: 999px;
white-space: nowrap;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.site-nav__cta:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
/* Nav collapses behind this hamburger at EVERY width now, not just mobile
-- .site-nav__links/.site-nav__cta are hidden by default (below) and
only reveal on .site-nav.is-open, same toggle regardless of viewport.
Desktop reveal is a plain `display` flip back to the pills' own normal
flex-row layout (nothing else needed, see the unconditional .is-open
rules below); the max-width:860px query further down layers on the
narrow-viewport-only stacked/column treatment on top of that. */
.site-nav__toggle {
display: block;
flex: 0 0 auto;
width: 22px;
height: 18px;
border: none;
background: transparent;
cursor: pointer;
padding: 0;
position: relative;
}
/* pill background, painted via a pseudo-element sized larger than the
button's own 30x24 hit box (rather than resizing the button itself,
which would require re-centering the three bar spans) -- z-index:-1
keeps it behind the bars. Only visible once scrolled, mirroring the
logo's own square background above; fully rounded, unlike the logo's
flat corners, per the client's explicit ask for a pill here. */
.site-nav__toggle::before {
content: "";
position: absolute;
inset: -10px -14px;
border-radius: 999px;
background: transparent;
z-index: -1;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-nav--scrolled .site-nav__toggle::before {
background: #fff;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
}
.site-nav__toggle span,
.site-nav__toggle span::before,
.site-nav__toggle span::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 2px;
background: var(--ink);
transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-nav__toggle span { top: 8px; }
.site-nav__toggle span::before { top: -6px; }
.site-nav__toggle span::after { top: 6px; }
.site-nav__links { display: none; }
.site-nav__cta { display: none; }
/* --- Ask VIA: entry point to via.html ---------------------------------
Deliberately NOT hidden behind the hamburger the way .site-nav__links
and .site-nav__cta are. Those collapse at every width (Round 10), which
leaves the logo and the hamburger as the only things on screen at rest;
putting VIA alongside them is what makes the feature discoverable at
all. If this is ever restyled, the constraint to preserve is legibility
over BOTH the hero video (green/teal, at scroll position 0) and the
plain white sections below it -- which is why it carries a solid light
fill rather than the transparent-with-border treatment the in-drawer
nav pills use. Those only ever appear over the drawer's own backdrop. */
.site-nav__via {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex: 0 0 auto;
text-decoration: none;
font-family: var(--font-display);
font-size: 0.8rem;
font-weight: 500;
color: var(--brand-blue);
background: rgba(255, 255, 255, 0.92);
border: 1.5px solid rgba(37, 64, 143, 0.22);
border-radius: 999px;
padding: 0.5rem 1.05rem;
white-space: nowrap;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
/* the wordmark carries the same letterspacing as VIA's own header, so the
button and the destination read as the same product */
.site-nav__via strong { font-weight: 700; letter-spacing: 0.13em; }
.site-nav__via svg { flex-shrink: 0; opacity: 0.85; }
.site-nav__via:hover {
background: var(--brand-blue);
border-color: var(--brand-blue);
color: #fff;
transform: translateY(-1px);
}
.site-nav__via:hover svg { opacity: 1; }
@media (max-width: 860px) {
/* space is tight next to the hamburger -- drop the verb, keep the mark
and the wordmark, which is enough to identify it */
.site-nav__via { padding: 0.45rem 0.8rem; gap: 0.4rem; }
.site-nav__via span { font-size: 0; }
.site-nav__via strong { font-size: 0.78rem; }
/* Inside the open drawer it becomes a full-width row like every other
nav pill, and there's room to say "Ask VIA" in full again. */
.site-nav.is-open .site-nav__via {
width: 100%;
justify-content: flex-start;
padding: 0.6rem 1.1rem;
margin-top: 0.6rem;
}
.site-nav.is-open .site-nav__via span { font-size: 0.85rem; }
}
.site-nav.is-open .site-nav__links { display: flex; }
.site-nav.is-open .site-nav__cta { display: inline-flex; }
/* hamburger -> X, same at every width */
.site-nav.is-open .site-nav__toggle span { transform: rotate(45deg); }
.site-nav.is-open .site-nav__toggle span::before { transform: translateY(6px) rotate(-90deg); opacity: 0; }
.site-nav.is-open .site-nav__toggle span::after { transform: translateY(-6px) rotate(-90deg); }
@media (max-width: 860px) {
.site-nav__toggle { margin: 0 0.4rem; }
/* each pill already carries its own border/background/padding now, so
the stacked mobile list just needs vertical gap between them -- no
more border-bottom separators or width/text-align overrides */
.site-nav.is-open .site-nav__links {
flex-direction: column;
align-items: stretch;
gap: 0.6rem;
width: 100%;
padding-top: 0.8rem;
}
.site-nav.is-open .site-nav__links a,
.site-nav.is-open .site-nav__link {
width: 100%;
justify-content: flex-start;
}
.site-nav.is-open .site-nav__cta {
margin: 0.8rem 0 0.6rem;
}
.site-nav.is-open .site-nav__inner { align-items: flex-start; }
.site-nav.is-open .site-nav__menu { flex-direction: column; align-items: stretch; }
.site-nav.is-open .site-nav__toggle { align-self: flex-end; }
}
/* --- desktop nav mega-menu (Round 8 redesign, then refined once more same
round): a compact card-style dropdown, now the same size and same screen
position every time -- whichever of the 4 buttons is clicked, the same
box appears in the same place, only its content swaps. (Earlier in this
round each panel was individually sized/positioned under its own
trigger; client feedback was that the inconsistency itself read as
unpolished, more than any single panel's size -- so position/size are
now computed once from fixed reference points, not per-button, see
positionMega() in hero.js.) Replaces the original (pre-Round-7) design:
a panel that always opened flush against the far-right edge regardless
of which button was clicked, and stretched all the way to the bottom of
the viewport, leaving a large dead white gap under whichever chapter had
the fewest links. Each panel: a representative image (brought back after
being cut earlier in this round for eating height with no payoff -- it
earns its space now that the panel's overall size is fixed and content-
independent, so a short link list no longer means a mostly-empty box),
a small header repeating the trigger's own icon+label, then the
chapter's links. Menu items mirror the site footer's chapter lists
exactly (same copy, same href-vs-plain-span split for sections that
don't exist yet -- those get a "Soon" tag + muted color instead of
rendering identically to a real link, see .site-nav__mega-links span) --
see hero.js for the open/close logic (one panel open at a time,
Escape/outside-click/link-click all close it) and .site-footer for the
shared copy source. */
.site-nav__mega {
/* top uses a JS-measured CSS var (see hero.js, setNavHeightVar), not a
hardcoded px guess -- the nav's real rendered height can differ by
viewport/font-load timing, and a fixed px value here either leaves a
gap above the panel or overlaps the nav, depending which way it's
wrong. Falls back to 141px only if the var somehow isn't set yet.
+14px on top of that is a deliberate visual gap so the card reads as
a separate floating element under the pill, not fused flush to it.
`left`/`width` are set inline by positionMega() in hero.js right
before opening -- JS-driven (not a fixed CSS value) only because the
right edge needs to track the Download Report CTA's real position
(viewport-width-dependent), not because it varies per trigger anymore --
every panel gets the exact same computed left/width. */
position: fixed;
top: calc(var(--nav-height, 141px) + 14px);
left: 0;
z-index: 1;
width: min(480px, 90vw);
max-height: min(64vh, 560px);
display: flex;
flex-direction: column;
background: #fff;
border: 1.5px solid rgba(37, 64, 143, 0.16);
border-radius: 20px;
/* clips .site-nav__mega-image/-head/-links to the rounded corners --
simpler than giving each stacked child its own matching top/bottom
radius, and .site-nav__mega-links keeps its own independent
overflow-y: auto for internal scrolling regardless. Rounded corners
are a deliberate exception to the site's usual flat-corner rule (see
Design System in HANDOFF.md) -- requested specifically for this
dropdown card, not a blanket change to boxes/chips elsewhere. */
overflow: hidden;
box-shadow: 0 18px 40px rgba(16, 51, 34, 0.16);
pointer-events: none;
/* fade + slight upward-settle + scale reads as a dropdown "popping" open
near the button that opened it -- the old clip-path wipe made sense
when the panel spanned from the nav to the bottom of the screen, but
on a small content-sized card it just looks like an odd sliding sliver. */
opacity: 0;
transform: translateY(-10px) scale(0.98);
transform-origin: top left;
transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-nav__mega.is-open {
pointer-events: auto;
opacity: 1;
transform: translateY(0) scale(1);
}
.site-nav__mega-image {
/* fixed height, not the old clamp(120px, 26vh, 260px) that ate up to
~40% of a panel which itself used to stretch to the viewport bottom --
this panel's total height is now bounded by its own content instead,
so a shorter, fixed strip reads as a header image, not a competing
section. */
flex: 0 0 128px;
height: 128px;
width: 100%;
object-fit: cover;
display: block;
background: #fff;
}
.site-nav__mega-head {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 1.1rem 1.5rem;
color: var(--brand-blue);
border-bottom: 1px solid rgba(37, 64, 143, 0.12);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.86rem;
letter-spacing: 0.03em;
text-transform: uppercase;
flex: 0 0 auto;
}
.site-nav__mega-links {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 0.7rem 0.9rem 1rem;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.site-nav__mega-links a,
.site-nav__mega-links span {
display: block;
font-size: 0.96rem;
line-height: 1.4;
color: #2b3540;
padding: 0.6rem 0.7rem;
position: relative;
}
.site-nav__mega-links a {
text-decoration: none;
padding-left: 1.15rem;
transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease;
}
/* left accent bar that grows in on hover, echoing the brand-blue used
everywhere else on the site rather than the generic underline the old
plain-link style used. */
.site-nav__mega-links a::before {
content: "";
position: absolute;
left: 0.15rem;
top: 0.55rem;
bottom: 0.55rem;
width: 3px;
background: var(--brand-blue);
transform: scaleY(0);
transition: transform 0.2s ease;
}
.site-nav__mega-links a:hover {
color: var(--brand-blue);
background: rgba(37, 64, 143, 0.06);
padding-left: 1.4rem;
}
.site-nav__mega-links a:hover::before {
transform: scaleY(1);
}
/* chapters that don't exist as a section yet (plain , not ) --
previously rendered in the exact same color/weight as a real link, which
read as a broken/dead link rather than an intentionally-unbuilt page.
Muted color + a small "Coming soon" tag + no hover state makes the
distinction obvious at a glance instead of something you discover by
clicking and getting nothing. */
.site-nav__mega-links span {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
color: #9aa3ab;
cursor: default;
}
.site-nav__mega-links span::after {
content: "Soon";
flex: 0 0 auto;
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #aeb4ba;
background: #f1f3f5;
padding: 0.2rem 0.45rem;
}
.site-nav__mega-links h4 {
margin: 0.6rem 0.7rem 0.1rem;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.74rem;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--brand-blue);
opacity: 0.65;
}
.site-nav__mega-links--split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 1.4rem;
}
.site-nav__mega-links--split > div {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
@media (max-width: 860px) {
.site-nav__mega { display: none; }
}
/* .hero is now 2 viewport-heights tall (was 1) -- the extra height is pure
scroll "runway", not extra visible content, giving the scroll-frame
effect (below) a full viewport-height of dedicated scroll distance to
finish closing in BEFORE the next section (About) starts its normal
stack-cover slide over Hero. Without this runway, both effects shared
the same single viewport-height of scroll, so About was already halfway
covering Hero by the time the frame had only half-closed -- client
feedback was that About shouldn't arrive until the square has fully
formed. Everything actually visible lives in the nested .hero-viewport
(100vh, fixed), not directly in .hero -- see that rule below for why. */
.hero {
position: relative;
width: 100%;
height: 200vh;
min-height: 1120px;
overflow: hidden;
/* deliberately no opaque background here -- .hero-video-wrap is now
inset from .hero's edges (see below), leaving a visible margin where
#site-waves (a fixed canvas painted behind the whole page, see
main.css's #site-waves rule) needs to show through. An opaque
fallback here would block that margin permanently, not just during
video load. #site-waves itself paints a solid white base under its
wave lines the instant JS runs, so it already serves as the "video
still loading" fallback this used to handle with a flat color. */
}
/* the actual visible "window" -- exactly one viewport tall/positioned at
.hero's own top, regardless of .hero's own (now doubled) height. Every
child below (video-wrap, frame, content, scroll cue) keeps its existing
percentage-based sizing unchanged, because percentages resolve against
the nearest positioned ancestor -- which is THIS element, not .hero
directly -- so none of those rules needed touching just because .hero
itself got taller. `position: sticky` isn't needed here: .hero itself is
already the sticky, z-indexed element (from ".stack section", see
above), and while it's stuck its own top edge sits at the viewport's
top for the entire (now 200vh) dwell -- this being `position: absolute;
top: 0` inside it is enough to always render at the visible viewport
top for that whole duration, no independent stickiness required. */
.hero-viewport {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100vh;
min-height: 560px;
overflow: hidden;
}
/* Sized/offset larger than the hero (-6%/112%) -- the cursor-parallax
drift this overscan originally existed for (a translate on this
wrapper, set by hero.js) was removed per client feedback ("not that
great"), but the overscan itself stays: setupHeroFrame()'s clip-path
math below explicitly measures insets from THIS element's own
(deliberately larger) edges and adds the 6% overscan back in to land
on-screen at the intended position -- shrinking this back to 100%
would need that formula reworked too, for a value that's otherwise
harmless to leave as-is (the video still fully covers via
object-fit:cover, just with a hair of unused crop margin at rest). */
.hero-video-wrap {
position: absolute;
inset: -6%;
z-index: 1;
width: 112%;
height: 112%;
overflow: hidden;
}
.hero-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform-origin: center center;
animation: hero-ken-burns 24s ease-in-out infinite alternate;
}
@keyframes hero-ken-burns {
from { transform: scale(1); }
to { transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
.hero-video { animation: none; }
}
.hero-content {
position: relative;
z-index: 3;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
/* centered, not left-anchored -- was `padding: 0 6vw` on a full-width
flex column with left-aligned children; center-aligning the eyebrow/
title/subtitle/button as a group (not just the text within a still-
left-anchored block) needs both align-items:center (so each child
shrink-wraps and centers instead of stretching to a left edge) and a
constrained/auto-margined width so the whole block sits in the middle
of the viewport, not just the middle of a 92vw-wide left-hand column. */
align-items: center;
text-align: center;
margin: 0 auto;
max-width: min(720px, 92vw);
padding: 0 6vw;
pointer-events: none;
}
.hero-eyebrow,
.hero-title,
.hero-subtitle {
/* always white, both over the video AND once the scroll-frame's square
window has closed past the text's own width (at typical desktop
widths the square, capped independently of the title's rendered
width -- see squareSize in hero.js -- ends up narrower than it, so
the outer parts of the text end up sitting over the exposed wave
background, #site-waves, not the video). This used to swap to
brand-blue there instead (#hero-content.is-framed, toggled by
setupHeroFrame()'s scroll tick), which read as illegible/low-contrast
against the mixed video+white backdrop during the transition itself,
not just at either endpoint. A layered shadow -- a tight dark
near-outline plus a soft blurred halo -- holds up as white-on-white
over the wave background well enough that the color no longer needs
to change at all. */
color: #fff;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.7),
0 0 6px rgba(0, 0, 0, 0.55),
0 4px 18px rgba(0, 0, 0, 0.45);
}
.hero-eyebrow {
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.8rem;
font-weight: 600;
margin: 0 0 0.8rem;
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 5vw, 4rem);
line-height: 1.06;
margin: 0 0 0.9rem;
font-weight: 600;
/* deliberately two lines now (a
in the markup splits
"Accelerating"/"Growth."), not natural wrap -- white-space: nowrap
would fight that forced break. */
}
.hero-subtitle {
font-family: var(--font-display);
font-size: clamp(1rem, 1.8vw, 1.4rem);
margin: 0;
max-width: 30ch;
}
.hero-content.is-dimmed {
opacity: 0.25;
transition: opacity 0.5s ease;
}
.hero-readmore {
pointer-events: auto;
/* was `align-self: flex-start` to hug the old left-anchored block's left
edge -- with .hero-content now centered, flex-start would have pinned
the button to the block's own left edge instead of centering it under
the (centered) title/subtitle above it. */
align-self: center;
margin-top: 1.6rem;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 0.75rem 2.3rem;
}
/* --- hero scroll-frame effect ------------------------------------------
.hero-video-wrap itself is clipped (via clip-path, set inline by
hero.js's setupHeroFrame() on every scroll tick) into a centered square
window as the user scrolls through Hero's own one-viewport-height
"dwell" -- the same scroll distance during which About's box slides up
to cover Hero (see .stack above). Can't be pure CSS: the final inset
depends on both scroll progress AND the viewport's own aspect ratio,
recalculated on resize.
Used to be 4 opaque white bars layered ON TOP of a still-full-size
video (faking a shrink by progressively covering its edges) -- replaced
with a real clip-path on the video itself so the newly-exposed area is
genuine empty space, not video-hidden-under-a-div. Since
.hero/.hero-viewport have no background of their own (see .hero's own
comment), that empty space falls through to #site-waves -- a fixed
canvas painted behind the whole page (setupSiteWaves() in hero.js) --
so the client's animated wave background shows through specifically as
this effect plays, not as a permanent margin around the video. The
hero text's own shadow (see .hero-eyebrow/.hero-title/.hero-subtitle
below) is tuned to stay legible against this exposed area too, not
just the video -- it stays white throughout rather than swapping color
once the frame closes. */
.hero-scroll {
position: absolute;
z-index: 3;
left: 50%;
bottom: 32px;
transform: translateX(-50%);
width: 30px;
height: 46px;
border-radius: 20px;
border: 2px solid rgba(16, 51, 34, 0.5);
background: rgba(255, 255, 255, 0.15);
cursor: pointer;
padding: 0;
}
.hero-scroll span {
position: absolute;
top: 8px;
left: 50%;
width: 4px;
height: 8px;
border-radius: 2px;
background: rgba(16, 51, 34, 0.7);
transform: translateX(-50%);
animation: scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot {
0% { top: 8px; opacity: 1; }
70% { top: 26px; opacity: 0; }
100% { top: 26px; opacity: 0; }
}
@media (max-width: 720px) {
.hero-content { max-width: 90%; padding: 0 7vw; }
.hero { min-height: 960px; }
.hero-viewport { min-height: 480px; }
}
/* --- about section: one full-bleed photo, a headline directly on it, and a
few small floating stat chips -- no eyebrow/paragraph/split-image layout --- */
.about {
position: relative;
width: 100%;
height: 100vh;
min-height: 560px;
overflow: hidden;
}
.about__image {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 70% 30%;
display: block;
}
.about__scrim {
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(90deg, rgba(8, 15, 12, 0.6) 0%, rgba(8, 15, 12, 0.15) 42%, rgba(8, 15, 12, 0) 65%),
linear-gradient(0deg, rgba(8, 15, 12, 0.45) 0%, rgba(8, 15, 12, 0) 35%);
}
.about__title {
position: absolute;
z-index: 3;
left: 6vw;
top: 26%;
margin: 0;
max-width: 26ch;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.9rem, 4.2vw, 3.4rem);
line-height: 1.14;
color: #fff;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}
/* the 4 numeric stat chips (130+ Products, 50+ Plants, 45+ Years, 2,300+
Employees) -- .about's only supporting content now (a Purpose/Vision/
Promise/Values slider briefly occupied this section too, in an earlier
pass this same round; it was removed again, see HANDOFF.md). Right-
docked as its own 2x2 grid, independent of .about__title's left-side
column -- `right: 6vw` mirrors the title's own `left: 6vw` so the two
feel symmetric. `top: 26%` matches the title's own top so both columns
start at the same height. */
.about__stats {
position: absolute;
z-index: 3;
top: 26%;
right: 6vw;
display: grid;
grid-template-columns: repeat(2, 190px);
grid-auto-rows: 108px;
gap: 1rem;
}
.about__stat {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.2rem;
padding: 0.9rem 1.1rem;
border-radius: 0;
background: rgba(255, 255, 255, 0.16);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 24px rgba(0, 0, 0, 0.2);
}
.about__stat-value {
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 600;
color: #fff;
}
.about__stat-label {
font-size: 0.78rem;
line-height: 1.3;
color: rgba(255, 255, 255, 0.85);
}
.about__stat--1 { transition-delay: 0s; }
.about__stat--2 { transition-delay: 0.15s; }
.about__stat--3 { transition-delay: 0.3s; }
.about__stat--4 { transition-delay: 0.45s; }
.about__readmore {
position: absolute;
z-index: 3;
left: 6vw;
/* chained off the title's own top (26%) + its rendered height (4 lines
at the clamp()'s max font-size, ~246px) + a gap -- sits close under
the heading instead of down at the section's bottom edge. The title's
copy is fixed/short, so this is safe to chain unlike the old numeric-
chip/slider content that used to sit here (see HANDOFF.md) -- that
had variable-length copy and icon rows, which is why it was bottom-
anchored instead; a short, unchanging 4-line heading doesn't have
that problem. */
top: calc(26% + 270px);
transition-delay: 0.6s;
pointer-events: auto;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 0.75rem 2.3rem;
}
@media (max-width: 760px) {
/* `object-position: 70% 30%` (the desktop default) was tuned for a wide
crop showing both the scientist AND the equipment to her right, with
text overlaid on the empty space to her left. A narrow/tall mobile
viewport crops `object-fit: cover` almost entirely left-right (the
image is 3840x2160 -- far wider than tall relative to a phone screen,
so `cover` scales it to fill the viewport's height and trims width,
not height), so that same 70% horizontal anchor pushed her mostly out
of frame instead of just re-cropping the sides. Recentered on her
actual position in the source photo (~47% across), not 50% flat --
50% would still clip part of her given how much width gets trimmed at
phone aspect ratios. */
.about__image { object-position: 47% 30%; }
.about__title { max-width: 14ch; top: 20%; left: 7vw; font-size: clamp(1.6rem, 6vw, 2.4rem); }
/* no room for a side-by-side right column on a phone-width screen --
.about__stats drops the desktop right-docked position for a centered
2x2 grid in the gap below the title, same left/right (7vw) as
everything else at this width. */
.about__stats { top: 44%; right: 7vw; left: 7vw; grid-template-columns: 1fr 1fr; grid-auto-rows: 92px; gap: 0.6rem; }
/* chained close under the stats grid (44% + its own 2-row height + gap)
instead of pinned to the section's bottom edge, matching the desktop
"close to the heading" treatment -- title/stats/button all cluster
together near the top instead of the button sitting on its own far
below everything else. */
.about__readmore { top: calc(44% + 210px); bottom: auto; left: 7vw; }
}
/* short desktop windows: the 2x2 stat grid + its gap to the title/button
above/below adds up to a fixed block that doesn't shrink with viewport
height, which on a short window can push Read More close to the fold --
.about__readmore itself doesn't need adjusting (it's bottom-anchored,
see above), just trim the stats grid's own footprint a little. */
@media (max-height: 700px) {
.about__stats { grid-auto-rows: 88px; gap: 0.7rem; }
}
/* --- Key Highlights FY26 --- */
.highlights {
position: relative;
width: 100%;
height: 100vh;
min-height: 560px;
overflow: hidden;
}
.highlights__image {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 60%;
display: block;
}
.highlights__scrim {
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(0deg, rgba(5, 8, 4, 0.55) 0%, rgba(5, 8, 4, 0.25) 45%, rgba(5, 8, 4, 0.35) 100%),
linear-gradient(90deg, rgba(5, 8, 4, 0.55) 0%, rgba(5, 8, 4, 0.1) 55%);
}
.highlights__left {
position: absolute;
z-index: 3;
left: 6vw;
top: 50%;
max-width: min(32vw, 420px);
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2rem;
}
.highlights__title {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.9rem, 4vw, 3rem);
color: #fff;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
.highlights__chips {
position: absolute;
z-index: 3;
right: 6vw;
top: 50%;
transform: translateY(-50%);
display: grid;
grid-template-columns: 240px;
grid-auto-rows: 96px;
gap: 1rem;
}
.highlights__chip {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.2rem;
padding: 0.9rem 1.1rem;
border-radius: 0;
background: rgba(255, 255, 255, 0.16);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 24px rgba(0, 0, 0, 0.2);
}
.highlights__chip-value {
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 700;
color: #fff;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}
.highlights__chip-value small {
font-size: 0.85rem;
font-weight: 600;
}
.highlights__chip-label {
font-size: 0.78rem;
line-height: 1.3;
color: rgba(255, 255, 255, 0.85);
}
/* scroll-triggered stagger (see [data-reveal] in the scroll-entry reveal
utility near the top of this file) -- was previously a page-load
animation-delay, which only ever animated for whatever was on screen at
load; staggering off each element's own scroll-into-view instead means
every section's chip grid gets the same effect, not just the first one. */
.highlights__chip--1 { transition-delay: 0.1s; }
.highlights__chip--2 { transition-delay: 0.25s; }
.highlights__chip--3 { transition-delay: 0.4s; }
.highlights__chip--4 { transition-delay: 0.55s; }
.highlights__readmore {
transition-delay: 0.7s;
pointer-events: auto;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 0.75rem 2.3rem;
}
@media (max-width: 760px) {
.highlights__left { left: 7vw; top: 14%; max-width: 80vw; transform: none; gap: 1.25rem; }
.highlights__title { font-size: clamp(1.6rem, 6vw, 2.2rem); }
.highlights__chips { top: 38%; right: auto; left: 7vw; bottom: auto; transform: none; grid-template-columns: minmax(180px, 60vw); grid-auto-rows: 76px; gap: 0.75rem; }
}
/* --- Trusted to Serve Globally --- */
/* background transparent, not a solid gradient fill -- lets #site-waves
(the fixed, animated wave canvas, see that rule near the top of this
file) peek through faintly wherever the video/scrim above it aren't
fully opaque, matching Joint Letter and CEO Message. */
.trust {
position: relative;
width: 100%;
height: 100vh;
min-height: 560px;
overflow: hidden;
background: transparent;
display: flex;
align-items: flex-start;
}
/* opacity < 1 so #site-waves shows through the video itself, not just
around its edges -- the video covers the whole section (inset:0,
object-fit:cover), so there's no gap for waves to show through unless
the video layer itself is partly see-through. */
.trust__video {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
display: block;
}
.trust__scrim {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(135deg, rgba(11, 25, 71, 0.72) 0%, rgba(11, 25, 71, 0.5) 100%);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.trust__inner {
position: relative;
z-index: 3;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
/* centered, not left-anchored -- the map and the Read More button
(the heading was removed) center as a group. */
align-items: center;
justify-content: center;
gap: 1.4rem;
padding: 0 6vw;
}
.trust__readmore {
pointer-events: auto;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 0.75rem 2.3rem;
/* second in the stagger order now (was third, behind .trust__text) --
.trust__text is gone and this button moved from inside .trust__content
to after .trust__map, becoming the last element revealed instead of
the middle one. */
transition-delay: 0.3s;
}
.trust__map {
width: 100%;
padding: 0.4rem 0 0;
transition-delay: 0.15s;
}
.trust__map-title {
margin: 0.9rem 0 0;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #5bc0e8;
text-align: center;
}
/* enlarged further after the heading above it was removed -- with no title
competing for vertical room, the map can take up most of the section.
This is now an inlined