/* ==========================================================================
Suria Crestway Sdn. Bhd. — Homepage
Everything is scoped under .sc-home and prefixed .sc- so this can be
dropped into a WordPress shortcode without fighting the active theme.
IMAGE RULES ARE PREFIXED `.sc-home` ON PURPOSE — don't "simplify" them.
Page builders ship a blanket image reset at the same specificity as a plain
component rule. Elementor's is
.elementor img { border:none; border-radius:0; box-shadow:none;
height:auto; max-width:100% }
which is (0,1,1) — identical to `.sc-header__brand img`. A plugin stylesheet
is enqueued before the theme's and before Elementor's, so on an equal-
specificity tie the later sheet wins: every image depending on a CSS height
collapsed, the header logo rendered at its full 693x1007, and the hero
photograph stopped covering. The `.sc-home` prefix makes these (0,2,1), which
wins on specificity and so holds regardless of load order.
State modifiers are prefixed alongside their base rule (`.sc-showcase__img`
AND `--on`, `.sc-scard img` AND `:hover img`). Raise only the base and it
starts outranking its own modifier — the showcase would sit permanently at
opacity 0.
========================================================================== */
.sc-home {
/* Brand */
--sc-brand: #262aad;
--sc-brand-dark: #1c1f8a;
--sc-brand-tint: #eef0fb;
--sc-brand-tint2:#e3e7f8;
--sc-accent: #f42e39;
/* Neutrals */
--sc-navy: #070a26;
--sc-ink: #0e1130;
--sc-ink-2: #474c6d;
--sc-ink-3: #7a7f9c;
--sc-line: #e3e6f1;
--sc-cream: #f8f7f4;
--sc-paper: #ffffff;
/* Layout */
--sc-w: 1340px;
--sc-r: 16px;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.65;
color: var(--sc-ink-2);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* --- reset (scoped) ------------------------------------------------------
Wrapped in :where() so it carries ZERO specificity. Without this the
reset outranks the component classes below (and would, for example,
repaint .sc-hero__title with the default heading colour). */
.sc-home *,
.sc-home *::before,
.sc-home *::after { box-sizing: border-box; }
:where(.sc-home) :where(h1, h2, h3, p, figure) { margin: 0; }
:where(.sc-home) :where(img) { display: block; max-width: 100%; }
:where(.sc-home) :where(button) { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
:where(.sc-home) :where(a) { color: inherit; text-decoration: none; }
/* Body copy runs justified. Set on the paragraphs themselves rather than on a
wrapper, so headings, eyebrows, labels and buttons keep their own alignment
and only prose is affected. The card back is the one exception — its whole
face is centred, so a justified paragraph in it would sit oddly.
Hyphenation is not optional here. Several of these paragraphs sit in narrow
columns (the .sc-feat grid, the service cards), and justifying a narrow
column without letting words break forces the leftover space into the word
gaps — the rivers of white that make justified text look broken. Allowing a
break gives the line somewhere else to put that space.
The hyphenate-limit-chars values are deliberately loose. The narrowest of
these columns (.sc-feat, inside the two-up grid inside the two-up why body)
gives the text only about 260px — roughly 37 characters, five words a line.
At that measure a strict limit disqualifies most of the words on the line
and there is nothing left to break, so the space goes back into the gaps.
5 2 2 lets any word of 5+ characters break with two letters either side,
which is what actually closes the gaps here. The element must carry
a lang attribute or the browser has no dictionary and silently does
nothing. */
.sc-home p {
text-align: justify;
-webkit-hyphens: auto;
hyphens: auto;
-webkit-hyphenate-limit-before: 2;
-webkit-hyphenate-limit-after: 2;
hyphenate-limit-chars: 5 2 2;
/* Stops the last line landing as a single orphaned word, which reads worse
next to justified lines than it does under ragged-right text. */
text-wrap: pretty;
}
.sc-home .sc-scard__face--back p { text-align: center; }
:where(.sc-home) :where(h1, h2, h3) {
font-family: "Archivo", "Inter", sans-serif;
color: var(--sc-ink);
font-weight: 600;
}
/* 1340px fixed, no left/right padding as specified.
Below 1340 the safety inset keeps content off the viewport edge. */
.sc-container {
width: var(--sc-w);
max-width: 100%;
margin-inline: auto;
}
@media (max-width: 1379px) {
.sc-container { padding-inline: 24px; }
}
/* Off-screen but still read by assistive tech and indexed — for the hero
,
whose visible headline was removed. Not `display:none` or `visibility:hidden`:
both would take it out of the accessibility tree, which defeats the point. */
.sc-vh {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.sc-i { width: 1em; height: 1em; fill: none; stroke: currentColor;
stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
flex: none; }
.sc-i--accent { color: var(--sc-accent); }
/* --- shared type --------------------------------------------------------- */
.sc-h2 {
font-size: 44px;
line-height: 1.36;
font-weight: 500;
letter-spacing: -0.02em;
}
.sc-eyebrow {
display: flex;
align-items: center;
gap: 9px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--sc-ink);
}
.sc-eyebrow__dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--sc-accent);
flex: none;
}
/* --- buttons ------------------------------------------------------------- */
.sc-btn {
display: inline-flex;
align-self: flex-start; /* prevents stretching full-width inside flex columns */
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 500;
letter-spacing: -0.005em;
transition: background-color .22s ease, color .22s ease, transform .22s ease;
}
.sc-btn--light {
background: #fff;
color: var(--sc-ink);
padding: 13px 26px;
font-size: 15px;
border-radius: 8px;
}
.sc-btn--light:hover { background: var(--sc-brand-tint); }
.sc-btn--outline { border: 1px solid var(--sc-line); }
.sc-btn--outline:hover { border-color: var(--sc-brand-tint2); }
.sc-btn--brand {
background: var(--sc-brand);
color: #fff;
border-radius: 8px;
padding: 13px 26px;
font-size: 15px;
}
.sc-btn--brand:hover { background: var(--sc-brand-dark); }
/* ==========================================================================
1. HERO
========================================================================== */
.sc-hero {
position: relative;
background: var(--sc-navy);
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 182px;
padding-bottom: 64px;
isolation: isolate;
/* Horizontal flicks belong to the slide-stepping handler in js/main.js;
vertical ones stay with the page. See the note on .sc-carousel. */
touch-action: pan-y;
}
.sc-hero__media {
position: absolute; inset: 0; z-index: -2;
overflow: hidden;
}
.sc-home .sc-hero__media picture { display: block; width: 100%; height: 100%; }
.sc-home .sc-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* --------------------------------------------------------------------------
HERO SLIDER — three slides, crossfaded
Two stacks that move together, both driven by the same index in
js/main.js's heroSlider():
.sc-hero__media (one per slide, absolute, behind the scrim)
.sc-hero__pane (one per slide, grid-stacked, in front of it)
The scrim, the slider controls and the stats bar are NOT part of either
stack — they are page furniture that stays put while the slides change.
The panes are stacked with grid-area rather than position:absolute so the
container still takes the height of the TALLEST pane. Absolute panes would
collapse it to zero and the controls and stats bar underneath would jump up
over the copy.
Resting state is slide 1 visible, and visibility is driven by a class the
JS adds. If the script never runs, --on stays where the markup put it and
the hero renders as a normal static hero rather than an empty band — the
same progressive-enhancement rule the entrance module follows.
-------------------------------------------------------------------------- */
.sc-hero__media {
opacity: 0;
transition: opacity .9s ease;
}
.sc-hero__media--on { opacity: 1; }
.sc-hero__panes {
display: grid;
/* center, not end: the panes are different heights, and aligning them to the
bottom of the tallest one made the shorter slides sit low in the frame. */
align-items: center;
}
.sc-hero__pane {
grid-area: 1 / 1; /* every pane in the same cell = a stack */
opacity: 0;
visibility: hidden; /* not just transparent: keeps it out of hit-testing */
transform: translateY(12px);
transition: opacity .55s ease, transform .55s ease, visibility 0s linear .55s;
}
.sc-hero__pane--on {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity .55s ease .12s, transform .55s ease .12s, visibility 0s;
}
/* ---- controls ---- */
.sc-heronav {
position: relative;
margin-top: 40px;
display: flex;
align-items: center;
/* Right-aligned, and .sc-hero's space-between puts the row on the bottom edge.
flex-end rather than an auto margin so the dots stay adjacent to the arrows
instead of being flung to the opposite side of the container. */
justify-content: flex-end;
gap: 22px;
}
.sc-heronav__dots { display: flex; gap: 10px; }
/* The dots sit bottom-right, which is the one corner the scrim barely reaches
(it runs .86 alpha at the left edge down to .02 at the right). At the old
.32 white they disappeared completely over the pale water of slide 3 — same
failure as the accent full stop above, and the same fix: carry their own
ground rather than borrowing the backdrop's. The arrows already do, via
their fill and border. */
.sc-heronav__dot {
width: 34px; height: 4px;
border-radius: 2px;
background: rgba(255,255,255,.5);
box-shadow: 0 1px 4px rgba(7,10,38,.6);
cursor: pointer;
transition: background-color .25s ease, width .25s ease;
}
.sc-heronav__dot:hover { background: rgba(255,255,255,.75); }
.sc-heronav__dot--on { width: 54px; background: var(--sc-accent); }
.sc-heronav__arrows { display: flex; gap: 8px; }
/* .42 alpha was enough on the left, where the scrim guaranteed a dark ground
under the controls. Bottom-right there is none, and the backdrop changes with
every slide — over the bright tank tops of slide 2 these went nearly
invisible. The blur is the part that does the real work on that shot, since
the problem there is clutter rather than brightness, but the fill is raised
far enough to stand on its own wherever backdrop-filter is unavailable. */
.sc-heronav__arrow {
width: 40px; height: 40px;
display: grid; place-items: center;
border-radius: 50%;
color: #fff;
background: rgba(7,10,38,.62);
border: 1px solid rgba(255,255,255,.3);
box-shadow: 0 2px 10px rgba(7,10,38,.4);
backdrop-filter: blur(6px);
cursor: pointer;
transition: background-color .22s ease, border-color .22s ease;
}
.sc-heronav__arrow:hover {
background: var(--sc-brand);
border-color: transparent;
}
.sc-heronav__arrow .sc-i { font-size: 18px; }
/* Focus must stay visible on a dark ground — the UA default outline is dark. */
.sc-heronav__dot:focus-visible,
.sc-heronav__arrow:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
/* Motion is decoration here; the slider still works, it just cuts instead of
fading, and js/main.js stops advancing it on its own. */
@media (prefers-reduced-motion: reduce) {
.sc-hero__media,
.sc-hero__pane { transition: none; }
.sc-hero__pane { transform: none; }
}
.sc-hero__scrim {
position: absolute; inset: 0; z-index: -1;
transition: opacity .55s ease;
background:
linear-gradient(98deg,
rgba(7,10,38,.86) 0%,
rgba(7,10,38,.70) 26%,
rgba(8,14,44,.26) 46%,
rgba(8,16,48,.06) 64%,
rgba(8,18,52,.02) 100%),
linear-gradient(to bottom, rgba(7,10,38,.22) 0%, rgba(7,10,38,0) 32%, rgba(7,10,38,.13) 100%);
}
.sc-hero--brand-slide .sc-hero__scrim { opacity: 0; }
/* Grows into the space between the header clearance and the stats bar, then
centres the pane stack inside it. Without the grow, .sc-hero's
space-between pins this block hard against the top padding and the copy
reads as sitting near the bottom of the frame once the stats bar is
accounted for. */
.sc-hero__inner {
position: relative;
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.sc-badge {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 0;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: rgba(255,255,255,.82);
}
.sc-badge__dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--sc-accent);
flex: none;
}
.sc-hero__title {
margin-top: 30px;
font-size: 68px;
line-height: 1.12;
font-weight: 500;
letter-spacing: -0.028em;
color: #fff;
}
.sc-hero__title strong { font-weight: 700; }
.sc-dot { color: var(--sc-accent); }
/* The accent full stop is brand red, and red is the one colour on the palette
that has nowhere to go against a bright photograph — on the tagline slide,
whose backdrop is the brightest of the three, it measured 1.10:1 and simply
vanished. A shadow rather than a lighter red: the mark stays exactly the
brand colour, and gains its own ground to sit on whichever slide is up. */
.sc-hero__title .sc-dot {
text-shadow: 0 2px 10px rgba(7,10,38,.85), 0 0 2px rgba(7,10,38,.7);
}
/* Slide 2 has no badge above its title, so the title's 30px top margin is dead
space. The panes are centred in a shared grid cell, so that space doesn't just
sit there — it pushes the whole block below the optical centre. */
.sc-hero__title--nobadge { margin-top: 0; }
.sc-hero__lead {
margin-top: 22px;
/* Kept narrow on purpose: the hero photograph's subject sits right of centre
and a wider measure runs the copy over the bright hull, where it stops
being readable. */
max-width: 34em;
font-size: 17px;
line-height: 1.65;
color: rgba(255,255,255,.82);
}
/* The scoped reset at the top of this file zeroes
margins, but it is wrapped
in :where() and so carries ZERO specificity — the same trap the image rules
at the top document. Every WordPress theme and page builder ships a bare
`p { margin-bottom: 1em }`-ish rule, and once the plugin stylesheet is
enqueued the theme's wins. On slides 2 and 3 the hero title IS a
at 68px,
so that em-based margin came out around 100px, collapsed with the lead's
22px, and opened a chasm between the headline and the description. (Slide 1
has no copy, which is why only 2 and 3 showed it.)
Doubling .sc-home takes these to (0,2,0) — enough to beat both a bare `p` and
a builder's `.elementor p` (0,1,1) regardless of load order — while leaving
the reset's zero specificity alone so the component rules above still win
normally. Only margin-BOTTOM is pinned: the tops are the designed rhythm and
the responsive overrides below need to keep moving them. */
.sc-home.sc-home .sc-hero__title,
.sc-home.sc-home .sc-hero__lead,
.sc-home.sc-home .sc-trust__text { margin-bottom: 0; }
.sc-hero__actions {
margin-top: 36px;
display: flex;
align-items: center;
gap: 30px;
}
.sc-trust { display: flex; align-items: center; gap: 14px; }
.sc-trust__stack { display: flex; }
.sc-home .sc-trust__stack img {
width: 42px; height: 42px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(255,255,255,.85);
}
.sc-trust__stack img + img { margin-left: -13px; }
.sc-trust__text {
font-size: 14px;
line-height: 1.45;
color: rgba(255,255,255,.75);
}
/* stats bar — sits inside the hero, no overlap onto the section below */
.sc-statswrap {
position: relative;
margin-top: 64px;
}
/* TINTED DARK, not the usual barely-there white glass. This bar sits over the
hero photograph, and when the hero scrim was re-balanced (2026-08-17) the
ground under it went from near-navy to open daylight — the 13.5px labels
measured 2.87:1 there, under the 4.5:1 AA floor. Darkening the bar rather
than putting the scrim back keeps the water bright around it and spends the
contrast where the text actually is. Same fix as .sc-why__panel and the
contact page's glass. */
.sc-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
padding: 18px;
background: rgba(7,10,38,.42);
border: 1px solid rgba(255,255,255,.16);
border-radius: 8px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.sc-stat {
display: flex;
align-items: center;
gap: 20px;
padding: 20px 22px;
background: rgba(7,10,38,.34);
border-radius: 8px;
}
.sc-stat__num {
font-family: "Archivo", sans-serif;
font-size: 36px;
font-weight: 600;
letter-spacing: -0.03em;
color: #fff;
line-height: 1;
}
.sc-stat__rule {
width: 1px;
height: 34px;
background: rgba(255,255,255,.22);
flex: none;
margin-left: auto;
}
.sc-stat__label {
font-size: 13.5px;
line-height: 1.42;
color: rgba(255,255,255,.68);
flex: none;
}
/* ==========================================================================
2. CAPABILITY
========================================================================== */
.sc-capability {
background: var(--sc-cream);
padding: 104px 0;
}
.sc-statement {
margin-top: 26px;
max-width: 1180px;
font-size: 44px;
line-height: 1.36;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--sc-ink);
}
/* scroll-scrubbed word reveal — see [data-reveal] in js/main.js.
Opacity is set directly per word on every scroll frame, so this is
just a smoothing transition between those steps, not the effect itself. */
.sc-reveal__word {
display: inline-block;
vertical-align: top;
}
.sc-reveal__word-inner {
display: inline-block;
opacity: 1;
transition: opacity .08s linear;
}
.sc-capability__grid {
margin-top: 32px;
display: grid;
grid-template-columns: 555px 1fr;
gap: 42px;
align-items: start;
}
.sc-capability__left { display: flex; flex-direction: column; height: 100%; }
.sc-minicards {
margin-top: auto; /* bottom-align the pair with the showcase image */
padding-top: 44px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.sc-minicard {
background: rgba(255,255,255,.72);
border: 1px solid #ecebe5;
border-radius: 8px;
padding: 24px 22px 26px;
}
.sc-minicard__icon {
width: 44px; height: 44px;
border-radius: 50%;
background: #fff;
border: 1px solid #ecebe5;
color: var(--sc-brand);
display: grid;
place-items: center;
overflow: hidden;
}
.sc-minicard__icon .sc-i { font-size: 19px; }
.sc-home .sc-minicard__icon img {
width: 30px; height: 30px;
object-fit: contain;
}
.sc-minicard h3 {
margin-top: 42px;
font-size: 17.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sc-minicard p {
margin-top: 11px;
font-size: 14.5px;
line-height: 1.62;
color: var(--sc-ink-3);
}
.sc-showcase {
position: relative;
border-radius: 8px;
overflow: hidden;
aspect-ratio: 743 / 428;
}
.sc-home .sc-showcase__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.15s ease;
}
.sc-home .sc-showcase__img--on { opacity: 1; }
.sc-showcase__caption {
position: absolute;
inset: auto 0 0 0;
padding: 90px 32px 28px;
background: linear-gradient(to top, rgba(7,10,38,.88) 22%, rgba(7,10,38,0));
color: #fff;
}
.sc-showcase__caption p {
font-size: 16.5px;
line-height: 1.5;
max-width: 400px;
color: rgba(255,255,255,.95);
}
.sc-showcase__caption p::before { content: "\201C"; }
.sc-showcase__caption p::after { content: "\201D"; }
.sc-progress {
margin-top: 26px;
display: flex;
align-items: center;
gap: 18px;
font-size: 13.5px;
color: rgba(255,255,255,.8);
font-variant-numeric: tabular-nums;
}
.sc-progress__track {
flex: 1;
height: 2px;
background: rgba(255,255,255,.28);
position: relative;
}
.sc-progress__fill {
position: absolute;
inset: 0 auto 0 0;
width: 17%;
background: var(--sc-accent);
}
/* ==========================================================================
3. SERVICES
========================================================================== */
.sc-services { background: #fff; padding: 104px 0 108px; }
.sc-sechead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.sc-nav { display: flex; gap: 10px; }
.sc-nav__btn {
width: 46px; height: 46px;
border-radius: 50%;
background: #f1f2f7;
color: var(--sc-ink-3);
display: grid;
place-items: center;
transition: background-color .2s ease, color .2s ease;
}
.sc-nav__btn .sc-i { font-size: 18px; }
.sc-nav__btn--on { background: var(--sc-brand); color: #fff; }
.sc-nav__btn:hover { background: var(--sc-brand-dark); color: #fff; }
.sc-nav__btn:disabled { opacity: .4; cursor: default; }
.sc-nav__btn:disabled:hover { background: #f1f2f7; color: var(--sc-ink-3); }
.sc-tabs {
margin-top: 34px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.sc-tab {
padding: 13px 24px;
border-radius: 8px;
background: #f4f5f9;
color: var(--sc-ink-3);
font-size: 15px;
font-weight: 500;
transition: background-color .2s ease, color .2s ease;
}
.sc-tab:hover { background: var(--sc-brand-tint); color: var(--sc-brand); }
.sc-tab--on,
.sc-tab--on:hover {
background: var(--sc-brand);
color: #fff;
box-shadow: 0 10px 20px -10px rgba(38,42,173,.65);
}
/* `touch-action: pan-y` is load-bearing, not a polish detail: the track is
transform-driven inside overflow:hidden, so a horizontal gesture has no
native scrolling to do here and the browser would otherwise claim it and
cancel the pointer stream that the swipe handler in js/main.js listens to.
Vertical gestures stay with the page, so the carousel never eats a scroll. */
.sc-carousel {
margin-top: 30px;
overflow: hidden;
touch-action: pan-y;
cursor: grab;
}
/* Only while a drag is actually in flight — a permanent user-select:none would
make the card descriptions unselectable for the sake of a gesture. */
.sc-carousel--dragging { cursor: grabbing; user-select: none; }
.sc-carousel__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 320px;
gap: 20px;
transition: transform .55s cubic-bezier(.4,.05,.2,1);
}
.sc-scard {
position: relative;
height: 430px;
border-radius: 8px;
overflow: hidden;
background: #f4f5f9;
isolation: isolate;
}
.sc-home .sc-scard img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .7s cubic-bezier(.2,.6,.2,1);
}
.sc-home .sc-scard:hover img { transform: scale(1.05); }
/* front/back faces — swapped by the pixel-dissolve transition on hover/tap */
.sc-scard__face { position: absolute; inset: 0; }
.sc-scard__face--front { z-index: 1; }
.sc-scard__face--front::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(7,10,38,.62) 0%, rgba(7,10,38,.05) 42%, rgba(7,10,38,.22) 100%);
}
.sc-scard__face--back {
z-index: 1;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
padding: 32px 28px;
text-align: center;
opacity: 0;
pointer-events: none;
}
.sc-scard__desc {
font-size: 15px;
line-height: 1.62;
color: var(--sc-ink-2);
}
.sc-scard__viewmore {
font-size: 16px;
font-weight: 600;
color: var(--sc-ink);
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 1.5px;
letter-spacing: -0.005em;
transition: color .2s ease;
}
.sc-scard__viewmore:hover { color: var(--sc-brand); }
/* pixel-dissolve overlay — see [data-pixel-card] in js/main.js */
.sc-scard__pixels {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
}
.sc-scard__pixel {
position: absolute;
background: #fff;
opacity: 0;
transition: opacity .05s linear;
}
.sc-scard__pixel--show { opacity: 1; }
.sc-scard__flag,
.sc-scard__idx {
position: absolute;
top: 16px;
z-index: 2;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
padding: 8px 13px;
}
.sc-scard__flag { left: 16px; background: var(--sc-accent); color: #fff; }
.sc-scard__idx { right: 16px; background: rgba(255,255,255,.94); color: var(--sc-ink); letter-spacing: .06em; }
.sc-scard__foot {
position: absolute;
inset: auto 16px 16px 16px;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.sc-scard__label {
background: #fff;
color: var(--sc-ink);
font-size: 14.5px;
font-weight: 500;
padding: 11px 18px;
border-radius: 8px;
}
.sc-scard__plus {
width: 38px; height: 38px;
border-radius: 50%;
background: #fff;
color: var(--sc-brand);
display: grid;
place-items: center;
flex: none;
transition: background-color .2s ease, color .2s ease;
}
.sc-scard__plus .sc-i { font-size: 17px; }
.sc-scard:hover .sc-scard__plus { background: var(--sc-brand); color: #fff; }
/* ==========================================================================
4. WHY CHOOSE US
========================================================================== */
/* Full-bleed photographic backdrop; the panel on top is frosted glass, so the
water texture stays readable through it. */
.sc-why {
position: relative;
padding: 88px 0;
background: url("../assets/img/why-bg.webp") center / cover no-repeat #0d2b52;
isolation: isolate;
}
.sc-why::before {
content: "";
position: absolute;
inset: 0;
background: transparent;
z-index: -1;
}
/* Same glass recipe as the hero stats bar: barely-there white fill, hairline
border, blur behind. Sits on a dark photo, so all text inside runs white. */
/* Tinted DARK, not the usual barely-there white glass. The backdrop photo was
replaced with a bright daylight frame (2026-08-14); over it, white body text
at .68 alpha measured 2.1:1 — below the 4.5:1 AA floor. Darkening the panel
rather than the photo keeps the water bright around the edges, which is the
whole point of the brighter image, and puts the contrast where the text is. */
.sc-why__panel {
background: rgba(7,10,38,.52);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.14);
border-radius: 8px;
padding: 30px;
}
.sc-why__body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
/* stretch, not center: the photograph and the card grid are the two halves
of one block, so their top and bottom edges have to line up. Centred, the
shorter of the two floated in the middle of the row and neither edge
matched. */
align-items: stretch;
}
/* NO aspect-ratio on the two-column layout, and the image is taken OUT of the
flow — both on purpose.
The figure has to end up exactly as tall as the card grid beside it. An
aspect-ratio fixes its height from its own width instead, so it could only
match the cards by coincidence. Absolutely positioning the then drops
the figure's content height to zero, which leaves the grid row — i.e. the
cards — as the only thing setting the height. The photo covers whatever
that turns out to be.
The trade-off is that the figure has nothing of its own to stand on, so the
stacked layout below 1200px MUST put an aspect-ratio back or it collapses
to a 0px-tall strip. That rule is in the 1200px block; don't remove one
without the other. */
.sc-why__visual {
position: relative;
border-radius: 8px;
overflow: hidden;
background: #f5f6fa;
}
.sc-home .sc-why__visual img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.sc-why__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.sc-why .sc-feat {
background: rgba(7,10,38,.30);
border: 1px solid rgba(255,255,255,.14);
border-radius: 8px;
padding: 22px;
}
.sc-feat__icon {
width: 46px; height: 46px;
border-radius: 50%;
background: rgba(255,255,255,.1);
color: #fff;
display: grid;
place-items: center;
}
.sc-feat__icon .sc-i { font-size: 20px; }
.sc-feat h3 {
margin-top: 18px;
font-size: 21px;
letter-spacing: -0.012em;
}
.sc-why .sc-feat h3 { color: #fff; }
.sc-why .sc-feat p { color: rgba(255,255,255,.68); }
.sc-feat p {
margin-top: 9px;
font-size: 14.5px;
line-height: 1.65;
color: var(--sc-ink-3);
}
/* ==========================================================================
5. PROCESS
========================================================================== */
.sc-process { background: #fff; padding: 104px 0 110px; }
.sc-process__grid {
display: grid;
grid-template-columns: 500px 1fr;
gap: 80px;
}
.sc-process__left { position: sticky; top: 32px; align-self: start; }
.sc-process__left .sc-h2 { margin-top: 14px; max-width: 340px; letter-spacing: 0; }
.sc-process__figure {
margin-top: 28px;
width: 340px;
border-radius: 8px;
overflow: hidden;
aspect-ratio: 340 / 400;
}
.sc-home .sc-process__figure img { width: 100%; height: 100%; object-fit: cover; }
.sc-accordion { margin-top: 0; }
.sc-acc { border-bottom: 1px solid var(--sc-line); }
.sc-acc:first-child { border-top: 1px solid var(--sc-line); }
.sc-acc__head {
width: 100%;
display: flex;
align-items: center;
gap: 18px;
padding: 22px 0;
text-align: left;
}
.sc-acc__step {
font-size: 13px;
font-weight: 600;
letter-spacing: .08em;
color: var(--sc-ink-3);
font-variant-numeric: tabular-nums;
flex: none;
transition: color .2s ease;
}
.sc-acc__title {
flex: 1;
font-family: "Archivo", sans-serif;
font-size: 14.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .075em;
color: var(--sc-ink-3);
transition: color .22s ease, font-size .22s ease, letter-spacing .22s ease;
}
.sc-acc__toggle {
width: 34px; height: 34px;
border-radius: 50%;
border: 1px solid var(--sc-line);
color: var(--sc-ink-3);
display: grid;
place-items: center;
flex: none;
transition: transform .28s ease, background-color .22s ease,
color .22s ease, border-color .22s ease;
}
.sc-acc__toggle .sc-i { font-size: 15px; }
.sc-acc:hover .sc-acc__title { color: var(--sc-ink); }
.sc-acc:hover .sc-acc__toggle { border-color: var(--sc-brand); color: var(--sc-brand); }
.sc-acc--open .sc-acc__step { color: var(--sc-accent); }
.sc-acc--open .sc-acc__title {
font-size: 27px;
font-weight: 600;
text-transform: none;
letter-spacing: -0.018em;
color: var(--sc-ink);
}
.sc-acc--open .sc-acc__toggle {
transform: rotate(45deg);
background: var(--sc-brand);
border-color: var(--sc-brand);
color: #fff;
}
.sc-acc__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .34s ease;
}
.sc-acc__panel > p { overflow: hidden; }
.sc-acc--open .sc-acc__panel { grid-template-rows: 1fr; }
.sc-acc__panel p {
font-size: 15px;
line-height: 1.72;
color: var(--sc-ink-3);
max-width: 640px;
}
.sc-acc--open .sc-acc__panel p { padding-bottom: 26px; }
/* ==========================================================================
6. CONTACT
========================================================================== */
.sc-contact { background: var(--sc-cream); padding: 88px 0 92px; }
.sc-contact__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
/* The icon well is absolutely positioned at bottom:26px and is 48px tall, so it
reaches 74px up from the bottom edge — the bottom padding is what keeps the
copy off it. 96px leaves ~22px of clearance, which the four-line Ampang
address needs; at 78px it sat almost on top of the icon. */
.sc-ccard {
position: relative;
background: #fff;
border-radius: 8px;
padding: 30px 28px 96px;
min-height: 232px;
box-shadow: 0 2px 10px -4px rgba(14, 17, 48, .08);
}
.sc-ccard h3 { font-size: 24px; letter-spacing: -0.015em; }
.sc-ccard p {
margin-top: 12px;
font-size: 14.5px;
line-height: 1.72;
color: var(--sc-ink-3);
word-break: break-word;
}
.sc-ccard__icon {
position: absolute;
left: 28px;
bottom: 26px;
width: 48px; height: 48px;
border-radius: 8px;
background: var(--sc-brand-tint);
color: var(--sc-brand);
display: grid;
place-items: center;
}
.sc-ccard__icon .sc-i { font-size: 21px; }
.sc-ccard__plus {
position: absolute;
right: 22px;
bottom: 22px;
width: 34px; height: 34px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--sc-line);
color: var(--sc-ink-3);
display: grid;
place-items: center;
box-shadow: 0 4px 10px -4px rgba(14, 17, 48, .16);
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.sc-ccard__plus .sc-i { font-size: 15px; }
.sc-ccard:hover .sc-ccard__plus {
background: var(--sc-brand);
border-color: var(--sc-brand);
color: #fff;
}
/* ==========================================================================
Responsive — the design width is 1340px; these keep it usable below that
========================================================================== */
@media (max-width: 1200px) {
.sc-hero__title { font-size: 58px; }
.sc-statement, .sc-h2 { font-size: 38px; }
.sc-capability__grid { grid-template-columns: 1fr; gap: 46px; }
.sc-minicards { padding-top: 40px; }
.sc-showcase { aspect-ratio: 16 / 9; }
.sc-why__body { grid-template-columns: 1fr; gap: 30px; }
/* Stacked, there is no card column to borrow a height from, and the image is
out of flow — without this the figure collapses to nothing. */
.sc-why__visual { aspect-ratio: 600 / 430; }
.sc-process__grid { grid-template-columns: 1fr; gap: 48px; }
.sc-process__left { position: static; }
.sc-process__figure { margin-top: 36px; }
}
@media (max-width: 900px) {
.sc-hero { min-height: 0; padding-top: 98px; padding-bottom: 56px; }
.sc-hero__title { font-size: 50px; }
.sc-hero__lead { font-size: 16px; margin-top: 18px; }
.sc-home .sc-hero__media img { object-position: 70% 50%; }
.sc-hero__actions { flex-wrap: wrap; gap: 22px; }
.sc-heronav { margin-top: 30px; }
.sc-stats { grid-template-columns: 1fr 1fr; }
/* The desktop cells are narrow enough that flex + margin-left:auto reads fine,
but once the cells get wide the divider lands at a different x in every row —
it's pushed leftwards by each label's own width, and the labels end up
right-ragged with it. A fixed 3-column grid pins the number, divider and
label to the same positions in all four rows. */
.sc-stat {
display: grid;
grid-template-columns: 84px 1px 1fr;
align-items: center;
gap: 16px;
}
.sc-stat__rule { margin-left: 0; height: 38px; }
.sc-minicards, .sc-why__grid, .sc-contact__grid { grid-template-columns: 1fr; }
.sc-why { padding: 48px 0; }
.sc-why__panel { padding: 20px; }
.sc-ccard { min-height: 0; }
}
@media (max-width: 620px) {
.sc-hero__title { font-size: 40px; }
.sc-hero__lead { font-size: 15px; }
/* The arrows are the first thing to go when the row stops fitting — the dots
already do everything they do, and stay a 34px-wide tap target. */
.sc-heronav__arrows { display: none; }
.sc-statement, .sc-h2 { font-size: 30px; }
/* 2×2 rather than a single column, so the block stays compact. Each cell is
only ~150px wide at 390px, which can't hold the number-divider-label row, so
the tiles stack and the divider turns horizontal between the two. */
.sc-stats { grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }
.sc-stat {
grid-template-columns: 1fr;
align-items: start;
gap: 9px;
padding: 15px 14px 16px;
}
.sc-stat__num { font-size: 31px; }
.sc-stat__rule { width: 22px; height: 1px; }
.sc-stat__label { font-size: 13px; }
.sc-carousel__track { grid-auto-columns: 268px; }
.sc-process__figure { width: 100%; }
.sc-acc--open .sc-acc__title { font-size: 23px; }
}
/* ==========================================================================
ENTRANCE ANIMATION
[data-anim] elements rise/fade in as they scroll into view. The resting
state here is fully VISIBLE — the hidden state only exists under
.sc-anim-on, which js/main.js adds. So with JS off, JS broken, or
IntersectionObserver missing, every element just renders normally.
Stagger comes from --sc-d, set per element by the same module.
========================================================================== */
/* No will-change here on purpose: promoting these to their own compositing
layer stops them painting at all inside .sc-why__panel, which uses
backdrop-filter. The animation is cheap enough without the hint. */
.sc-home.sc-anim-on [data-anim] {
opacity: 0;
}
.sc-home.sc-anim-on [data-anim="up"] { transform: translateY(22px); }
.sc-home.sc-anim-on [data-anim="left"] { transform: translateX(-26px); }
.sc-home.sc-anim-on [data-anim="scale"] { transform: scale(.965); }
/* Transition lives on the "in" state only, so applying the hidden state at
startup can't animate backwards from visible. */
.sc-home.sc-anim-on [data-anim].sc-anim-in {
opacity: 1;
transform: none;
transition:
opacity .72s cubic-bezier(.22,.61,.36,1) var(--sc-d, 0ms),
transform .72s cubic-bezier(.22,.61,.36,1) var(--sc-d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
.sc-home *, .sc-home *::before, .sc-home *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
}
/* Never leave anything hidden waiting on a transition that won't run. */
.sc-home.sc-anim-on [data-anim] {
opacity: 1 !important;
transform: none !important;
}
}
/* ==========================================================================
SITE HEADER
Overlays the hero, so it is genuinely transparent — backdrop-filter blurs
the hero photograph behind it rather than a copy painted inside the header.
Same glass recipe as the hero stats bar: barely-there white fill, hairline
white border, blur(10px). Ready to move into css/style.css as-is.
========================================================================== */
.sc-header {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 20;
color: #fff;
background: rgba(255,255,255,.06);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255,255,255,.14);
}
/* Full width, NOT the 1340px .sc-container — the bar spans edge to edge and so do
its contents, so the logo plate and CTA sit flush in the corners. That means
they don't share a left edge with the hero headline below (the container is
centred, so its inset moves with the window while a flush bar stays at 0);
the flush corners are the intended look here.
position:relative anchors the absolutely-centred nav below. */
.sc-header__inner {
position: relative;
display: flex;
align-items: center;
gap: 34px;
min-height: 104px;
width: 100%;
padding-inline: 0;
}
/* Full stacked lockup on a square-cornered white plate, flush to the left edge
of the bar — the plate lifts the navy wordmark off the dark glass.
The vertical padding and .sc-header__inner's min-height are a pair: the plate
has to come out exactly the height of the bar or it floats with dark glass
above and below it, which reads as a mistake. 96px logo + 4px + 4px = 104px,
so the bar is 104px too, and .sc-hero__inner's clearance below matches. Change
one and all three move. */
.sc-header__brand {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 120px;
padding: 4px;
background: #fff;
}
.sc-home .sc-header__brand img {
height: 96px;
width: auto;
}
/* Centred on the bar itself, not in the space left over between the logo plate
and the button — those two have very different widths, so flex auto-margins
would sit the links noticeably off-centre. */
.sc-header__nav {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 34px;
}
.sc-header__nav a {
font-size: 15px;
font-weight: 500;
letter-spacing: -0.005em;
color: rgba(255,255,255,.74);
transition: color .2s ease;
}
.sc-header__nav a:hover,
.sc-header__nav a:focus-visible { color: #fff; }
/* --------------------------------------------------- Who Needs Us dropdown
A button, not a link — "Who Needs Us" is a category, not a page. Reveals on
hover AND :focus-within, so tabbing onto the button opens it for keyboard
users without a script; js/main.js's nav() module ALSO toggles .is-open on
click, because Safari does not focus a