html {
font-size: 100%; /* 1rem = 16px */
/* Belt-and-suspenders against the edge-to-edge portfolio slider's
100vw breakout (see .portfolio-viewport) triggering a horizontal
scrollbar. overflow-x:hidden alone on body is sometimes not
enough — some browsers key the viewport's scrollability off
instead. overflow-x:clip is the stronger, modern
guarantee (never creates a scrollbar even if content
technically overflows); hidden is the fallback for older
browsers that don't support clip. */
overflow-x: hidden;
overflow-x: clip;
}
body {
/* Was declared twice — a duplicate "DM Sans" override further down
silently made every OTHER use of var(--font-primary) elsewhere
on the site (e.g. the contact form's inputs) render in Arial
instead, since that variable still pointed to Arial. Fixed at
the source: --font-primary itself is now "DM Sans" (see
variables.css), so this one declaration is the single source
of truth for the whole site. */
font-family: var(--font-primary);
background: var(--color-white);
color: var(--color-black);
font-size: 1rem;
/* Guards against the edge-to-edge portfolio slider (which
intentionally breaks out to 100vw) triggering a horizontal
scrollbar/page shift. */
overflow-x: hidden;
overflow-x: clip;
}
/* =========================
CONTAINER
========================= */
.container {
width: min(
100% - 64px,
var(--container-width)
);
margin-inline: auto;
}
/* =========================
BUTTONS
========================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding:
0
28px;
font-size: 0.875rem;
text-transform: uppercase;
border-radius: var(--radius-small);
/* Scoped to ONLY background-color/color — never opacity or transform.
The hero "Get Started" button is directly animated by GSAP on page
load (opacity 0 -> 1, plus a y-transform), so if this transition
also covers opacity/transform, the CSS transition and GSAP fight
over the same property every animation frame and the button gets
stuck instead of fading in. */
transition:
background-color var(--transition),
color var(--transition);
}
.btn-dark {
background: var(--color-black);
color: var(--color-white);
}
.btn-red {
background: var(--color-red);
color: var(--color-white);
/* No transition override here — inherits the safe background-color/color
transition from .btn above. Do not add opacity/transform here. */
}
.btn-red:hover {
background: var(--color-white);
transform: translateY(-2px);
/* Scoped to this hover rule only — see the note on the base .btn
transition above for why opacity/transform must never be added
there directly (it would fight the hero button's GSAP entrance
animation on page load). By the time a hover is possible that
entrance animation has already finished, so this is safe. */
transition: background-color var(--transition), color var(--transition), transform var(--transition);
}
.btn-hover-black:hover{background-color: var(--color-black);border: 1px solid #fff;color: var(--color-white);}
/* Lets any .btn stretch full-width — used on the contact form's
submit button so it matches the site's other buttons exactly
(same shape, color, hover) while still spanning the form. */
.btn-full {
display: flex;
width: 100%;
}
.btn-dark:hover {
opacity: 0.8;
/* Scoped to this hover rule only, so the base .btn-dark state never
carries an opacity transition (this button isn't GSAP-animated
directly, but keeping the pattern consistent avoids this bug
recurring if that ever changes). */
transition: opacity var(--transition);
}
.btn-light {
background: var(--color-white);
color: var(--color-black);
}
.btn-light:hover {
transform:
translateY(-2px);
/* Scoped to hover only — see note on .btn-dark:hover above. */
transition: transform var(--transition);
}
/* =========================
HEADER
========================= */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: transparent;
border-bottom: 1px solid transparent;
transition:
background var(--transition),
border-color var(--transition),
box-shadow var(--transition);
}
.header.scrolled {
background: var(--color-bg-yellow);
border-bottom-color: var(--color-border);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
.logo-scrolled { display: none; }
.header.scrolled .logo-default { display: none; }
.header.scrolled .logo-scrolled { display: inline-block; }
.header-container {
/* Explicit height (not just min-height) so the fixed header can
never balloon in size regardless of what image gets dropped
into the logo — this is what was pushing the header to
150–200px tall on mobile and covering hero content / making
the sticky nav feel broken. */
height: 80px;
display: flex;
align-items: center;
justify-content:
space-between;
gap: var(--space-md);
overflow: hidden;
}
.logo {
display: inline-flex;
align-items: center;
height: 100%;
}
.logo img {
/* Height-based, not width-based — this is the fix. A width-only
constraint left the logo's height to follow its own aspect
ratio, and a tall stacked logo (icon-over-wordmark) blew the
fixed header out to 150–200px tall on mobile. */
height: 75px;
width: auto;
max-width: 140px;
object-fit: contain;
transition: filter var(--transition);
}
/* White silhouette logo while the header floats transparently over the hero
(scoped to the top bar only — the mobile drawer always has a white background,
so its logo must keep its original colors) */
.header:not(.scrolled) .header-container .logo img {
/* filter: brightness(0) invert(1); */
}
.nav-list {
display: flex;
align-items: center;
gap: 32px;margin-bottom: 0;
}
.nav-list a {
position: relative;
display: inline-block;
font-size: 0.9375rem;
color: var(--color-white);
transition: color var(--transition), opacity var(--transition);
}
.nav-list a::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.35s ease;
}
.nav-list a:hover::after {
transform: scaleX(1);
transform-origin: left;
}
.nav-list a:hover {
opacity: 0.85;
}
.header-actions {
display: flex;
align-items: center;
gap: 24px;
}
.login-btn {
font-size: 0.9375rem;
color: var(--color-white);
transition: color var(--transition), opacity var(--transition);
}
.login-btn:hover {
opacity: 0.7;
}
.header .btn-light {
background: var(--color-white);
color: var(--color-black);
}
.header.scrolled .nav-list a,
.header.scrolled .login-btn {
color: var(--color-black);
}
.header.scrolled .btn-light {
background: var(--color-black);
color: var(--color-white);
}
.header.scrolled .btn-light:hover {
opacity: 0.8;
transform: none;
}
/* =========================
MOBILE MENU BUTTON
========================= */
.mobile-menu-btn {
display: none;
position: relative;
width: 32px;
height: 32px;
z-index: 1201;
}
/* The drawer has its own dedicated close button (.mobile-nav-close),
so once it's open, hide the header's hamburger-turned-X entirely —
otherwise both sit near the same top-right corner and show as two
overlapping X icons. */
body.menu-open .mobile-menu-btn {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.hamburger,
.hamburger::before,
.hamburger::after {
position: absolute;
left: 0;
width: 28px;
height: 2px;
background: var(--color-white);
transition: var(--transition);
}
.header.scrolled .hamburger,
.header.scrolled .hamburger::before,
.header.scrolled .hamburger::after {
background: var(--color-black);
}
.hamburger {
top: 50%;
transform: translateY(-50%);
}
.hamburger::before,
.hamburger::after {
content: "";
}
.hamburger::before {
top: -9px;
}
.hamburger::after {
top: 9px;
}
body.menu-open .mobile-menu-btn .hamburger {
background: transparent;
}
body.menu-open .mobile-menu-btn .hamburger::before {
top: 0;
transform: rotate(45deg);
background: var(--color-black);
}
body.menu-open .mobile-menu-btn .hamburger::after {
top: 0;
transform: rotate(-45deg);
background: var(--color-black);
}
/* =========================
MOBILE NAVIGATION DRAWER
========================= */
.mobile-nav-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
z-index: 1100;
transition:
opacity var(--transition),
visibility var(--transition);
}
body.menu-open .mobile-nav-overlay {
opacity: 1;
visibility: visible;
}
.mobile-nav {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: min(85%, 380px);
background: var(--color-white);
color: var(--color-black);
z-index: 1200;
display: flex;
flex-direction: column;
padding: var(--space-md) var(--space-md) var(--space-lg);
box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
}
body.menu-open .mobile-nav {
transform: translateX(0);
}
body.menu-open {
overflow: hidden;
}
.mobile-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-lg);
}
.mobile-nav-header .logo img {
height: 40px;
width: auto;
max-width: 120px;
object-fit: contain;
}
.mobile-nav-close {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: 1.75rem;
line-height: 1;
color: var(--color-black);
}
.mobile-nav-links ul {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.mobile-nav-links a {
font-size: 1.25rem;
font-weight: 500;
}
.mobile-nav-actions {
margin-top: auto;
padding-top: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.login-btn-mobile {
text-align: center;
padding: 14px;
font-size: 0.9375rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-small);
}
.mobile-nav-actions .btn {
width: 100%;
}
/* =========================
HERO
========================= */
.hero {
position: relative;
min-height: 850px;
padding-top: 160px;
background:
var(--color-black);
color:
var(--color-white);
overflow: hidden;
}
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.6) 0%,
rgba(0, 0, 0, 0.3) 45%,
rgba(0, 0, 0, 0.7) 100%
);
z-index: 1;
}
.hero > .container {
position: relative;
z-index: 2;
}
.hero-content {
max-width: 900px;
margin:
0 auto;
text-align:
center;
}
.hero-label,
.eyebrow {
font-size: 0.75rem;
letter-spacing: 2px;
text-transform:
uppercase;
color: var(--color-accent-red);
margin-bottom:
var(--space-md);
}
.hero h1 {
font-size: clamp( 3.75rem, 10vw, 4.375rem );
line-height: 1;
letter-spacing: 0;
font-weight: 500;
margin-bottom: var(--space-lg);
}
.hero-text {
margin-top:
var(--space-sm);
font-size: 0.875rem;
opacity: 0.7;
}
/* Hero Showcase Slider */
.hero-showcase {
position: relative;
z-index: 2;
width: 100%;
margin: 100px 0 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(
90deg,
transparent,
black 8%,
black 92%,
transparent
);
mask-image: linear-gradient(
90deg,
transparent,
black 8%,
black 92%,
transparent
);
}
.showcase-track {
display: flex;
align-items: flex-end;
gap: var(--showcase-gap);
width: max-content;
animation: showcase-scroll 20s linear infinite;
}
.hero-showcase:hover .showcase-track {
/* animation-play-state: paused; */
}
@keyframes showcase-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* ---------------------------------------------------------------
SHOWCASE CARD SIZING — self-adjusting box count
-----------------------------------------------------------------
The card width is calculated from the viewport width so that
however many boxes --showcase-visible is set to, that many boxes
(roughly) fit across the screen — you don't need to hand-tune
pixel widths every time a box is added or removed.
Formula: (100vw minus the gaps between visible boxes) ÷ number
of visible boxes.
HOW TO CHANGE THE NUMBER OF BOXES SHOWN IN FUTURE:
1. Open css/variables.css and change --showcase-visible
(currently 5) to whatever number you want to show on desktop.
Non-whole numbers are fine on purpose — e.g. 4.5 shows 4 full
boxes plus a "peek" of the next one, which reads as an
intentional slider rather than a cut-off box.
2. If you add/remove an actual
in
index.html (i.e. add/remove images, not just how many show at
once), you don't need to touch any CSS at all — the marquee
loop (js/slider.js duplicates the track once for a seamless
infinite scroll) and this sizing formula both work with any
number of cards automatically.
3. min-width / max-width below are safety rails so cards never
get uncomfortably small on narrow screens or absurdly huge on
ultra-wide monitors — adjust those two values if a box looks
too small/large at a screen size you care about.
4. The three breakpoints in responsive.css each set their own
--showcase-visible so mobile/tablet can intentionally show
fewer boxes at once than desktop — edit those the same way.
------------------------------------------------------------- */
.showcase-card {
position: relative;
flex: 0 0 auto;
width: calc(
(100vw - (var(--showcase-visible) - 1) * var(--showcase-gap))
/ var(--showcase-visible)
);
min-width: 230px;
max-width: 400px;
height: 420px;
border-radius: var(--radius-medium);
overflow: hidden;
box-shadow:
0 20px 60px
rgba(0, 0, 0, 0.35);
}
.showcase-card-offset {
margin-bottom: 40px;
}
.showcase-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* =========================
MARQUEE STRIP
========================= */
.marquee-strip {
overflow: hidden;
background: var(--color-black);
border-block: 1px solid rgba(255, 255, 255, 0.08);
}
.marquee-track {
display: flex;
align-items: center;
width: max-content;
animation: marquee-scroll 26s linear infinite;
}
.marquee-set {
display: flex;
align-items: center;
flex: 0 0 auto;
}
.marquee-set span {
flex: 0 0 auto;
padding: var(--space-md) var(--space-md);
font-size: clamp(1.25rem, 2.4vw, 2rem);
font-weight: 500;
white-space: nowrap;
text-transform: uppercase;
color: var(--color-white);
}
.marquee-set .marquee-dot {
padding: 0 var(--space-sm);
font-size: 0.9em;
color: var(--color-accent-red);
}
@keyframes marquee-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* =========================
STATISTICS
========================= */
.statistics {
padding:
var(--space-2xl)
0;
background:
var(--color-light-yellow);
}
.section-intro {
max-width: 600px;
font-size: 1.75rem;
line-height: 1.3;
margin-bottom:
var(--space-2xl);
}
.statistics-grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: var(--space-lg);
}
.stat-item {
border-top:
1px solid
var(--color-black);
padding-top:
var(--space-md);
}
.stat-item h2 {
font-size:
clamp(
3rem,
6vw,
5.625rem
);
font-weight: 500;
letter-spacing:
-0.05em;
margin-bottom:
var(--space-sm);
}
/* =========================
OUR SERVICES
Scroll-pinned "one at a time" reveal on desktop (≥1025px);
falls back to a normal stacked list on tablet/mobile (≤1024px).
The pin, image crossfade and text-ticker slide are handled by
GSAP ScrollTrigger in js/services.js — this file only lays out
the two states via CSS.
Desktop uses TWO markup blocks that are never shown at the same
time (.services-desktop-stage vs .services-mobile-stack, toggled
in responsive.css) rather than one that's repurposed per
breakpoint — this keeps the desktop "image fades / text slides"
behaviour and the mobile "plain stacked pairs" behaviour fully
independent, so tuning one can't accidentally break the other.
========================= */
.services-section {
padding: var(--space-2xl) 0 0;
background: var(--color-dark-bg);
color: var(--color-white);
}
.services-heading {
margin-inline: auto;
margin-bottom: var(--space-2xl);
}
.services-heading .eyebrow {
color: var(--color-accent-yellow);
}
.services-pin {
/* Height matches the viewport so the pinned stage feels like a
dedicated "moment" rather than an ordinary section — this is
overridden to auto/none on mobile (see responsive.css) since
the pin is switched off there. padding-top offsets the fixed
80px header so the stage centers in the visible area below
it, not the full (partly hidden) 100vh. */
height: 100vh;
min-height: 560px;
padding-top: 80px;
box-sizing: border-box;
display: flex;
align-items: center;
overflow: hidden;
}
.services-stage {
position: relative;
width: 100%;
height: min(600px, 78vh);
}
/* ---- Desktop split stage: media column | text-ticker column ---- */
.services-desktop-stage {
display: grid;
grid-template-columns: 1fr 1fr;
/* Must be "stretch" (the default), not "center" — both columns
need to actually fill the full row height so the text
column's overflow:hidden "ticker window" (see
.service-text-viewport) has a real, definite height to clip
against. Centering the columns' *content* is handled inside
each column instead (.service-text-item uses
justify-content:center on itself). */
align-items: stretch;
gap: var(--space-2xl);
width: 100%;
height: 100%;
}
.services-track {
position: relative;
width: 100%;
height: 100%;
}
.service-media-item {
position: absolute;
inset: 0;
border-radius: var(--radius-medium);
overflow: hidden;
opacity: 0;
}
.service-media-item.is-active {
opacity: 1;
}
.service-media-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* The text "ticker": a fixed-height window with overflow hidden,
and a track of all 6 text blocks stacked in normal flow inside
it. js/services.js translateY's the track so exactly one item
sits inside the window at a time — the old line slides out the
top while the new one slides in from the bottom, so unlike a
crossfade the two can never visually overlap. */
.service-text-viewport {
position: relative;
height: 100%;
overflow: hidden;
}
.service-text-track {
/* Explicit height (not auto) is required: GSAP's yPercent moves
the track by a percentage of the TRACK's own box, so the box
itself must equal exactly one item-slot's height for
"yPercent: -100 * index" to land on the right item. The 6
items then overflow that box on purpose — flex-basis:100%
below sizes each one to a full slot regardless, and the
parent .service-text-viewport's overflow:hidden clips
whatever spills past. */
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.service-text-item {
flex: 0 0 100%;
height: 100%;
max-width: 460px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* ---- Mobile/tablet stack is hidden by default (desktop); see
responsive.css for the ≤1024px swap ---- */
.services-mobile-stack {
display: none;
}
/* Shared typography — used by both the desktop ticker
(.service-text-item) and the mobile stacked pairs
(.service-item-content), so both stay visually consistent. */
.service-tag {
display: inline-block;
margin-bottom: var(--space-md);
font-size: 0.875rem;
letter-spacing: 2px;
color: var(--color-accent-red);
}
.service-text-item h3,
.service-item-content h3 {
font-size: clamp(1.75rem, 3vw, 2.75rem);
font-weight: 500;
line-height: 1.15;
margin-bottom: var(--space-md);
}
.service-text-item p,
.service-item-content p {
font-size: 1.0625rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.68);
}
/* ---- Mobile stack items (only ever visible ≤1024px — see
.services-mobile-stack / .services-desktop-stage swap in
responsive.css, which also resets these to a static, stacked
layout there) ---- */
.service-item {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: var(--space-2xl);
opacity: 0;
pointer-events: none;
}
.service-item.is-active {
opacity: 1;
pointer-events: auto;
}
.service-item-media {
position: relative;
height: 100%;
max-height: 520px;
border-radius: var(--radius-medium);
overflow: hidden;
}
.service-item-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.service-item-content {
max-width: 460px;
}
.services-progress {
position: absolute;
left: 0;
bottom: calc(-1 * var(--space-xl));
display: flex;
gap: 10px;
}
.progress-dot {
width: 28px;
height: 3px;
border-radius: var(--radius-pill);
background: var(--color-dark-line);
transition: background-color var(--transition), width var(--transition);
}
.progress-dot.is-active {
width: 48px;
background: var(--color-accent-red);
}
/* =========================
GENERAL SECTIONS
========================= */
.section-heading {
max-width: 850px;
margin-bottom:
var(--space-xl);
}
.section-heading h2 {
font-size:
clamp(
3rem,
6vw,
5.625rem
);
font-weight: 500;
line-height: 0.95;
letter-spacing:
0;
margin-bottom:
var(--space-md);
}
.section-heading > p:not(.eyebrow) {
max-width: 600px;
font-size: 1.125rem;
line-height: 1.6;
color: var(--color-gray);
}
.center {
margin-inline: auto;
text-align: center;
}
/* =========================
BUSINESS SECTION
========================= */
.business-section {
padding:
var(--space-2xl)
0;
}
.business-tabs {
display: flex;
flex-wrap: nowrap;
gap: 14px;
/* Horizontally scrollable — works on mobile today, and keeps
working on desktop automatically if more tabs get added
later than fit on one line. */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
padding-bottom: 8px;
margin-bottom:
var(--space-xl);
}
.business-tabs::-webkit-scrollbar {
height: 4px;
}
.business-tabs::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: 50px;
}
.tab-btn {
flex: 0 0 auto;
white-space: nowrap;
padding:
12px 18px;
font-size: 0.9375rem;
border:
1px solid
var(--color-border);
border-radius:
50px;
transition: var(--transition), transform 0.25s ease;
}
.tab-btn:hover {
transform: translateY(-2px);
border-color: var(--color-black);
}
.tab-btn.active {
background:
var(--color-red);
color:
var(--color-white);
}
/* Portfolio Slider (per-tab project carousel) — powered by Slick,
showing 3 vertical (portrait) cards per view. */
.portfolio-viewport {
position: relative;
/* Full-bleed: break out of .container so the slider runs edge
to edge, while Slick's centerPadding (set in slider.js) keeps
an even "stage padding" gap on both sides. */
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
/* Breathing room above the cards, below the tabs — this is what
was making the section feel cramped, since the cards used to
sit almost flush under the tab row. */
padding: 8px 56px 0;
}
.portfolio-track {
/* Slick manages layout once initialized. This flex rule is only
a fallback in case the Slick script fails to load. */
display: flex;
gap: 32px;
}
.portfolio-track.slick-initialized {
display: block;
}
.portfolio-slide {
display: block;
outline: none;
/* .portfolio-slide is a plain