/* ============================================================
GLOBAL STYLES — Techno4S Smartomation P Ltd Theme
Typography: Sarabun (Google Fonts)
Brand Colors: Magenta #A02D57 | Burgundy #79333A | Pink #C52671
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&display=swap');
/* --- Base Reset --- */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* --- CSS Custom Properties (Design Tokens) --- */
:root {
/* ---- Typography ---- */
--font-primary: 'Sarabun', sans-serif;
/* Heading sizes (H1 = 32px globally) */
--fs-h1: 2rem;
/* 32px */
--fs-h2: 1.75rem;
/* 28px */
--fs-h3: 1.5rem;
/* 24px */
--fs-h4: 1.25rem;
/* 20px */
--fs-h5: 1.125rem;
/* 18px */
--fs-h6: 1rem;
/* 16px */
--fs-p: 1rem;
/* 16px */
/* Line heights */
--lh-heading: 1.2;
--lh-body: 1.7;
/* ---- Brand Colors ---- */
/* Primary — Magenta */
--color-primary: #A02D57;
/* Buttons, links, active menu, icons, highlights */
--color-primary-hover: #79333A;
/* Hover state for primary */
/* Secondary — Deep Burgundy */
--color-secondary: #79333A;
/* Hero overlays, card hovers, footer, sec. buttons */
--color-secondary-hover: #5a2229;
/* Accent — Bright Pink */
--color-accent: #C52671;
/* Hover states, CTA highlights, badges */
/* Gradients */
--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
--gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
/* ---- Neutral / UI Colors ---- */
--color-bg: #FFFFFF;
/* White background */
--color-surface: #FFFFFF;
/* Cards, modals, panels */
--color-heading: #000000;
/* Black headings */
--color-body: #000000;
/* Black body text */
--color-border: #E5E7EB;
/* Dividers, input borders */
--color-white: #FFFFFF;
/* ---- Transitions ---- */
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
/* ---- Border Radius ---- */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 50px;
}
/* --- Body Base --- */
body {
font-family: var(--font-primary);
font-size: var(--fs-p);
line-height: var(--lh-body);
color: var(--color-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* --- Headings --- */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-primary);
color: var(--color-heading);
line-height: var(--lh-heading);
font-weight: 700;
margin-top: 0;
margin-bottom: 0.5em;
letter-spacing: -0.02em;
}
h1 {
font-size: var(--fs-h1);
font-weight: 800;
letter-spacing: -0.03em;
}
h2 {
font-size: var(--fs-h2);
font-weight: 700;
letter-spacing: -0.025em;
}
h3 {
font-size: var(--fs-h3);
font-weight: 700;
letter-spacing: -0.02em;
}
h4 {
font-size: var(--fs-h4);
font-weight: 600;
letter-spacing: -0.015em;
}
h5 {
font-size: var(--fs-h5);
font-weight: 600;
letter-spacing: -0.01em;
}
h6 {
font-size: var(--fs-h6);
font-weight: 600;
letter-spacing: 0;
}
/* --- Paragraphs --- */
p {
font-family: var(--font-primary);
font-size: var(--fs-p);
font-weight: 400;
line-height: var(--lh-body);
color: var(--color-body);
margin-top: 0;
margin-bottom: 1em;
}
p:last-child {
margin-bottom: 0;
}
/* --- Lead / Large paragraph --- */
p.lead {
font-size: clamp(1rem, 2vw, 1.2rem);
font-weight: 400;
color: #6b7280;
line-height: 1.8;
}
/* --- Small text --- */
small,
.text-sm {
font-size: 0.875rem;
line-height: 1.5;
}
/* ============================================================
GLOBAL COLOR PALETTE UTILITIES
============================================================ */
/* --- Page defaults --- */
body {
background-color: var(--color-bg);
}
/* --- Links --- */
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-accent);
}
/* ============================================================
BUTTON STYLES
Usage: Click
Click
Click
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.75rem;
font-family: var(--font-primary);
font-size: 0.9375rem;
/* 15px */
font-weight: 600;
line-height: 1;
border-radius: var(--radius-pill);
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background var(--transition-fast),
color var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast);
white-space: nowrap;
}
/* --- Primary Button --- */
.btn-primary {
background: var(--gradient-primary);
color: var(--color-white);
border-color: transparent;
}
.btn-primary:hover,
.btn-primary:focus {
background: var(--gradient-secondary);
border-color: transparent;
color: var(--color-white);
box-shadow: 0 4px 20px rgba(160, 45, 87, 0.35);
}
/* --- Secondary Button (Outlined) --- */
.btn-secondary {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn-secondary:hover,
.btn-secondary:focus {
background: var(--gradient-primary);
color: var(--color-white);
border-color: transparent;
box-shadow: 0 4px 20px rgba(160, 45, 87, 0.25);
}
/* --- Gradient Button (Recommended) --- */
.btn-gradient {
background: var(--gradient-primary);
color: var(--color-white);
border-color: transparent;
}
.btn-gradient:hover,
.btn-gradient:focus {
background: var(--gradient-secondary);
color: var(--color-white);
box-shadow: 0 6px 24px rgba(160, 45, 87, 0.4);
transform: translateY(-1px);
}
/* --- Button Sizes --- */
.btn-sm {
padding: 0.5rem 1.25rem;
font-size: 0.8125rem;
}
.btn-lg {
padding: 1rem 2.25rem;
font-size: 1.0625rem;
}
/* ============================================================
GRADIENT UTILITY CLASSES
============================================================ */
/* Gradient backgrounds */
.bg-gradient-primary {
background: var(--gradient-primary);
}
.bg-gradient-secondary {
background: var(--gradient-secondary);
}
/* Gradient text */
.text-gradient {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Solid brand backgrounds */
.bg-primary {
background-color: var(--color-primary);
color: var(--color-white);
}
.bg-secondary {
background-color: var(--color-secondary);
color: var(--color-white);
}
.bg-accent {
background-color: var(--color-accent);
color: var(--color-white);
}
.bg-surface {
background-color: var(--color-surface);
}
.bg-light {
background-color: var(--color-bg);
}
/* Text color utilities */
.text-primary {
color: var(--color-primary);
}
.text-secondary {
color: var(--color-secondary);
}
.text-accent {
color: var(--color-accent);
}
.text-muted {
color: var(--color-body);
}
.text-white {
color: var(--color-white);
}
.text-heading {
color: var(--color-heading);
}
/* Border utility */
.border-primary {
border-color: var(--color-primary);
}
/* ============================================================
BADGE / PILL UTILITY
============================================================ */
.badge {
display: inline-block;
padding: 0.25em 0.75em;
font-size: 0.75rem;
font-weight: 600;
border-radius: var(--radius-pill);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.badge-primary {
background-color: var(--color-primary);
color: #fff;
}
.badge-accent {
background-color: var(--color-accent);
color: #fff;
}
.badge-light {
background-color: rgba(160, 45, 87, 0.1);
color: var(--color-primary);
}
/* ============================================================
HEADER
Transparent on load → solid on scroll
============================================================ */
#site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
padding: 0 2rem;
background: transparent;
transition: background var(--transition-normal),
box-shadow var(--transition-normal),
padding var(--transition-normal);
}
#site-header.scrolled {
background: rgba(15, 15, 15, 0.95);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
#site-header.scrolled .header-inner {
height: 64px;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1280px;
margin: 0 auto;
height: 72px;
}
.header-nav {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.header-cta {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
}
/* Logo */
.site-logo {
flex: 0 0 auto;
display: flex;
align-items: center;
text-decoration: none;
}
.site-logo img,
.site-logo .logo-img {
height: 44px;
width: auto;
max-width: 180px;
display: block;
object-fit: contain;
transition: height var(--transition-normal);
}
#site-header.scrolled .site-logo img,
#site-header.scrolled .site-logo .logo-img {
height: 36px;
}
.logo-text {
font-family: var(--font-primary);
font-size: 1.375rem;
font-weight: 800;
letter-spacing: -0.03em;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Primary Nav */
.primary-nav {
display: flex;
align-items: center;
gap: 0.25rem;
list-style: none;
margin: 0;
padding: 0;
}
.primary-nav li {
position: relative;
}
.primary-nav li a {
display: block;
padding: 0.5rem 1rem;
font-family: var(--font-primary);
font-size: 0.9375rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
border-radius: var(--radius-md);
transition: color var(--transition-fast), background var(--transition-fast);
white-space: nowrap;
}
.primary-nav li a:hover,
.primary-nav li.current-menu-item>a {
color: #ffffff;
background: rgba(255, 255, 255, 0.12);
}
/* Scrolled nav overrides removed for dark header */
/* Absolutely positioned so it sits identically whether the link is
a plain block or the flex container used by dropdown parents —
and so a current item is never taller than its neighbours. */
.primary-nav li a {
position: relative;
}
.primary-nav li.current-menu-item>a::after {
content: '';
position: absolute;
left: 1rem;
right: 1rem;
bottom: 0.25rem;
height: 2px;
background: var(--gradient-primary);
border-radius: 2px;
}
/* ---- Dropdown caret on parent items ---- */
.primary-nav .nav-caret {
display: inline-flex;
align-items: center;
margin-left: 0.375rem;
transition: transform var(--transition-normal);
}
.primary-nav .nav-caret svg {
width: 11px;
height: 11px;
display: block;
}
.primary-nav li.menu-item-has-children:hover > a .nav-caret,
.primary-nav li.menu-item-has-children:focus-within > a .nav-caret,
.primary-nav li.menu-item-has-children.is-open > a .nav-caret {
transform: rotate(180deg);
}
.primary-nav li.menu-item-has-children > a {
display: flex;
align-items: center;
}
/* ---- Dropdown panel ----
Animated with opacity/visibility rather than display, which
cannot be transitioned. visibility is included so the hidden
panel stays out of the tab order and off the accessibility tree. */
.primary-nav li ul {
position: absolute;
top: calc(100% + 0.75rem);
left: 0;
min-width: 244px;
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06),
0 18px 44px -12px rgba(0, 0, 0, 0.22);
border: 1px solid rgba(0, 0, 0, 0.05);
list-style: none;
margin: 0;
padding: 0.5rem;
z-index: 100;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-10px) scale(0.97);
transform-origin: 20% 0;
transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0.28s;
}
/* Bridges the gap between the trigger and the panel, so the cursor
can travel down without the panel closing under it. */
.primary-nav li ul::before {
content: '';
position: absolute;
top: -0.75rem;
left: 0;
right: 0;
height: 0.75rem;
}
/* Pointer tying the panel to its trigger. */
.primary-nav li ul::after {
content: '';
position: absolute;
top: -6px;
left: 1.75rem;
width: 12px;
height: 12px;
background: #fff;
border-left: 1px solid rgba(0, 0, 0, 0.05);
border-top: 1px solid rgba(0, 0, 0, 0.05);
transform: rotate(45deg);
border-radius: 2px 0 0 0;
}
.primary-nav li:hover > ul,
.primary-nav li:focus-within > ul {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0s;
}
/* ---- Dropdown items ---- */
.primary-nav li ul li a {
position: relative;
color: var(--color-heading);
border-radius: 10px;
font-size: 0.9rem;
font-weight: 500;
padding: 0.625rem 0.875rem 0.625rem 1.125rem;
transition: color 0.25s ease, background 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Accent bar that grows in from the left edge on hover. */
.primary-nav li ul li a::before {
content: '';
position: absolute;
left: 0.5rem;
top: 50%;
width: 3px;
height: 0;
border-radius: 3px;
background: var(--gradient-primary);
transform: translateY(-50%);
transition: height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.primary-nav li ul li a:hover,
.primary-nav li ul li a:focus-visible {
color: var(--color-primary);
background: rgba(160, 45, 87, 0.06);
transform: translateX(4px);
}
.primary-nav li ul li a:hover::before,
.primary-nav li ul li a:focus-visible::before {
height: 60%;
}
.primary-nav li ul li.current-menu-item > a {
color: var(--color-primary);
background: rgba(160, 45, 87, 0.06);
}
.primary-nav li ul li.current-menu-item > a::before {
height: 60%;
}
/* The current-page underline is for top-level items only. */
.primary-nav li ul li.current-menu-item > a::after {
display: none;
}
/* CTA button */
.header-cta .btn-outline-white {
background: transparent;
color: #ffffff;
border: 2px solid rgba(255, 255, 255, 0.65);
border-radius: var(--radius-pill);
padding: 0.6rem 1.5rem;
font-size: 0.9rem;
font-weight: 600;
font-family: var(--font-primary);
text-decoration: none;
transition: background var(--transition-fast), border-color var(--transition-fast),
box-shadow var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}
.header-cta .btn-outline-white:hover {
background: rgba(255, 255, 255, 0.15);
border-color: #ffffff;
transform: translateY(-1px);
}
#site-header.scrolled .header-cta .btn-outline-white {
background: var(--gradient-primary);
border-color: transparent;
color: #ffffff;
}
#site-header.scrolled .header-cta .btn-outline-white:hover {
background: var(--gradient-secondary);
box-shadow: 0 4px 16px rgba(160, 45, 87, 0.3);
}
/* The drawer backdrop is a mobile-only element — header.js appends
it on every viewport, so keep it out of the way above 768px. */
.nav-backdrop {
display: none;
}
/* Hamburger — glass chip that morphs into a close icon */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.14);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
padding: 0;
z-index: 10;
transition: background var(--transition-normal),
border-color var(--transition-normal),
transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-toggle:active {
transform: scale(0.93);
}
.nav-toggle.is-open {
background: rgba(255, 255, 255, 0.13);
border-color: rgba(255, 255, 255, 0.26);
}
.nav-toggle span {
display: block;
width: 20px;
height: 2px;
border-radius: 2px;
background: #ffffff;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.25s ease,
width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Short middle bar that fills out on hover — a small signal that
the control is interactive. */
.nav-toggle span:nth-child(2) {
width: 13px;
}
.nav-toggle:hover span:nth-child(2) {
width: 20px;
}
/* Bars sit at -7 / 0 / +7 (2px tall, 5px gap), so these translate
values bring the outer two onto the centre line before rotating. */
.nav-toggle.is-open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
opacity: 0;
width: 0;
}
.nav-toggle.is-open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Header Responsive */
@media (max-width: 1024px) {
#site-header {
padding: 0 1.25rem;
}
}
@media (max-width: 768px) {
.nav-toggle {
display: flex;
}
.desktop-cta {
display: none;
}
/* ---- Critical: no backdrop-filter on the header ----
backdrop-filter (like transform and filter) makes an element
the containing block for its position:fixed descendants. With
it on, the scrolled header captured the drawer, so top:0 /
bottom:0 resolved against the 64px header box instead of the
viewport and the panel collapsed into a strip. The scrolled
header is already 95% opaque, so the blur was contributing
almost nothing here. */
#site-header.scrolled {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(15, 15, 15, 0.97);
}
/* ============================================================
MOBILE DRAWER
A full-height panel that slides in from the right, rather
than a block that appears under the header. The logo and the
hamburger stay above it (see z-index below) so the X that
closes it sits exactly where the icon that opened it was.
============================================================ */
.header-nav {
display: flex;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: min(86vw, 380px);
z-index: 5;
flex-direction: column;
align-items: stretch;
padding: 6rem 1.5rem 2.5rem;
overflow-y: auto;
overscroll-behavior: contain;
background:
radial-gradient(120% 60% at 100% 0%, rgba(197, 38, 113, 0.22), transparent 60%),
linear-gradient(200deg, #1c1418 0%, #120f11 55%, #0d0b0c 100%);
box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.65);
border-left: 1px solid rgba(255, 255, 255, 0.07);
/* Slides rather than appears. visibility is delayed off so
the panel stays out of the tab order while closed. */
transform: translateX(100%);
visibility: hidden;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0.45s;
}
.header-nav.is-open {
transform: translateX(0);
visibility: visible;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0s;
}
/* Keep the logo and hamburger clickable above the open drawer. */
.site-logo,
.nav-toggle {
position: relative;
z-index: 10;
}
/* ---- Backdrop (created by header.js) ---- */
.nav-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: 998;
background: rgba(8, 6, 8, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.nav-backdrop.is-open {
opacity: 1;
visibility: visible;
transition: opacity 0.4s ease, visibility 0s linear 0s;
}
/* ---- Menu list ---- */
.primary-nav {
flex-direction: column;
align-items: stretch;
gap: 0;
width: 100%;
}
.primary-nav > li {
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
/* Each row eases in behind the panel. The delay ladder is
applied per item below. */
opacity: 0;
transform: translateX(18px);
transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.header-nav.is-open .primary-nav > li {
opacity: 1;
transform: translateX(0);
}
.header-nav.is-open .primary-nav > li:nth-child(1) { transition-delay: 0.10s; }
.header-nav.is-open .primary-nav > li:nth-child(2) { transition-delay: 0.16s; }
.header-nav.is-open .primary-nav > li:nth-child(3) { transition-delay: 0.22s; }
.header-nav.is-open .primary-nav > li:nth-child(4) { transition-delay: 0.28s; }
.header-nav.is-open .primary-nav > li:nth-child(5) { transition-delay: 0.34s; }
.header-nav.is-open .primary-nav > li:nth-child(6) { transition-delay: 0.40s; }
.header-nav.is-open .primary-nav > li:nth-child(7) { transition-delay: 0.46s; }
.primary-nav li a {
position: relative;
color: rgba(255, 255, 255, 0.88);
padding: 1rem 0.25rem;
border-bottom: 0;
border-radius: 0;
font-size: 1.0625rem;
font-weight: 500;
letter-spacing: -0.01em;
background: transparent;
transition: color 0.25s ease, padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Accent bar that slides out from the left edge on the active
and pressed states. */
.primary-nav > li > a::before {
content: '';
position: absolute;
left: -1.5rem;
top: 50%;
width: 3px;
height: 0;
border-radius: 0 3px 3px 0;
background: var(--gradient-primary);
transform: translateY(-50%);
transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.primary-nav li a:hover,
.primary-nav li a:active,
.primary-nav li.current-menu-item > a {
color: #ffffff;
background: transparent;
padding-left: 0.75rem;
}
.primary-nav > li > a:hover::before,
.primary-nav > li.current-menu-item > a::before,
.primary-nav > li.is-open > a::before {
height: 55%;
}
.primary-nav li.current-menu-item > a::after {
display: none;
}
/* ---- Parent items: label and caret are separate tap zones ----
Tapping the label navigates to the page (e.g. /services);
only the caret opens the submenu. Sized to a real touch
target so the split is reliable, and given its own hairline
so it reads as a control rather than decoration. */
.primary-nav li.menu-item-has-children > a {
padding-right: 0;
}
.primary-nav .nav-caret {
margin-left: auto;
width: 52px;
height: 52px;
justify-content: center;
color: rgba(255, 255, 255, 0.55);
border-left: 1px solid rgba(255, 255, 255, 0.08);
transition: color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.primary-nav .nav-caret svg {
width: 14px;
height: 14px;
}
.primary-nav li.menu-item-has-children.is-open > a .nav-caret {
color: var(--color-accent);
}
/* ---- Submenu accordion ----
The desktop panel's hidden state has to be unwound here, or
the submenu would stay invisible when .is-open is applied. */
.primary-nav li ul {
position: static;
min-width: 0;
box-shadow: none;
border: none;
border-radius: 0;
transform: none;
background: rgba(255, 255, 255, 0.03);
padding: 0 0 0 1.125rem;
margin: 0 0 0 0.25rem;
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.3s ease,
visibility 0s linear 0.4s;
}
/* No hover bridge or pointer in the accordion. */
.primary-nav li ul::before,
.primary-nav li ul::after {
display: none;
}
/* Touch devices fire :hover on tap — the accordion must be
driven only by .is-open, which the caret handler toggles. */
.primary-nav li:hover > ul,
.primary-nav li:focus-within > ul {
opacity: 0;
visibility: hidden;
pointer-events: none;
max-height: 0;
transform: none;
}
.primary-nav li.menu-item-has-children.is-open > ul {
max-height: 60rem;
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.35s ease 0.05s,
visibility 0s linear 0s;
}
/* Rail tying the sub-items back to their parent. */
.primary-nav li ul li {
position: relative;
padding-left: 0.875rem;
}
.primary-nav li ul li::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255, 255, 255, 0.12);
}
.primary-nav li ul li:last-child::before {
bottom: 50%;
}
/* The connector tick into each sub-item. */
.primary-nav li ul li::after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 9px;
height: 1px;
background: rgba(255, 255, 255, 0.12);
}
.primary-nav li ul li a {
padding: 0.75rem 0.5rem;
padding-left: 0.5rem;
font-size: 0.9375rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.7);
transform: none;
}
.primary-nav li ul li a:hover,
.primary-nav li ul li a:active,
.primary-nav li ul li.current-menu-item > a {
color: #ffffff;
background: transparent;
transform: none;
padding-left: 0.875rem;
}
/* ---- Drawer CTA ----
Sits directly under the last menu item rather than being
pushed to the bottom of the panel, so it stays in view with
the links instead of stranded below the fold. */
.mobile-cta {
margin-top: 1.75rem;
width: 100%;
opacity: 0;
transform: translateY(14px);
transition: opacity 0.45s ease 0.4s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}
.header-nav.is-open .mobile-cta {
opacity: 1;
transform: translateY(0);
}
.mobile-cta .btn-outline-white {
display: block;
width: 100%;
text-align: center;
padding: 0.95rem 1.5rem;
font-size: 1rem;
font-weight: 700;
background: var(--gradient-primary);
color: #fff;
border-color: transparent;
border-radius: var(--radius-pill);
box-shadow: 0 14px 30px -14px rgba(160, 45, 87, 0.9);
}
}
@media (min-width: 769px) {
.mobile-cta {
display: none;
}
}
body {
padding-top: 0;
}
/* Scroll lock while the mobile drawer is open. Applied by
header.js; the drawer itself scrolls internally. */
body.nav-open {
overflow: hidden;
}
/* ============================================================
HERO SECTION
============================================================ */
.hero-section {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
background-color: #0f0f1a;
background-image: linear-gradient(135deg, #0f0f1a 0%, #1a0a12 40%, #2a0d1a 70%, #1a0f1a 100%);
}
/* Left-side readability scrim: darkens the area where the hero content
sits (left) and fades to fully clear on the right, so text stays
legible over any background image without dimming the whole photo. */
.hero-section::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
90deg,
rgba(8, 6, 12, 0.78) 0%,
rgba(8, 6, 12, 0.55) 32%,
rgba(8, 6, 12, 0.18) 62%,
rgba(8, 6, 12, 0) 100%
);
pointer-events: none;
}
/* On mobile the hero content is full-width/centered, so use an even
top-to-bottom scrim instead of a left-biased one for readability. */
@media (max-width: 768px) {
.hero-section::before {
background: linear-gradient(
180deg,
rgba(8, 6, 12, 0.5) 0%,
rgba(8, 6, 12, 0.68) 100%
);
}
}
/* --- Hero Carousel (background layer) --- */
.hero-carousel {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-carousel-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #0f0f1a;
opacity: 0;
transition: opacity 1.2s ease-in-out;
}
.hero-carousel-slide.is-active {
opacity: 1;
}
/* --- Carousel Controls (dots + arrows) --- */
.hero-carousel-controls {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
align-items: center;
gap: 1.25rem;
}
.hero-carousel-dots {
display: flex;
align-items: center;
gap: 0.5rem;
}
.hero-carousel-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.5);
background: transparent;
cursor: pointer;
padding: 0;
transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.hero-carousel-dot.is-active {
background: #ffffff;
border-color: #ffffff;
transform: scale(1.3);
width: 28px;
border-radius: var(--radius-pill);
}
.hero-carousel-dot:hover:not(.is-active) {
background: rgba(255, 255, 255, 0.4);
border-color: rgba(255, 255, 255, 0.8);
}
.hero-carousel-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
padding: 0;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.hero-carousel-arrow svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.hero-carousel-arrow:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.7);
color: #ffffff;
transform: scale(1.1);
}
/* --- Built-in fallback slides (no ACF images uploaded) --- */
.hero-slide-default-1 {
background-image: url('../images/hero-bg.png'),
linear-gradient(135deg, #0f0f1a 0%, #2a0d1a 50%, #1a0a12 100%);
}
.hero-slide-default-2 {
background-image: linear-gradient(155deg, #0d0f2a 0%, #160a3a 45%, #2a1045 70%, #1a0d2e 100%);
background-color: #0d0f2a;
}
.hero-slide-default-3 {
background-image: linear-gradient(125deg, #1a0a0a 0%, #2a0f12 40%, #3a1020 70%, #1f0a15 100%);
background-color: #1a0a0a;
}
.hero-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.25;
pointer-events: none;
z-index: 0;
animation: blobFloat 8s ease-in-out infinite alternate;
}
.hero-blob-1 {
width: 500px;
height: 500px;
background: radial-gradient(circle, #A02D57, transparent 70%);
top: -100px;
right: 5%;
}
.hero-blob-2 {
width: 350px;
height: 350px;
background: radial-gradient(circle, #C52671, transparent 70%);
bottom: -80px;
right: 30%;
animation-delay: -3s;
}
@keyframes blobFloat {
from {
transform: translateY(0) scale(1);
}
to {
transform: translateY(40px) scale(1.08);
}
}
.hero-inner {
position: relative;
z-index: 2;
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 5rem 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.hero-content {
display: flex;
flex-direction: column;
gap: 2rem;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(197, 38, 113, 0.15);
border: 1px solid rgba(197, 38, 113, 0.4);
color: #f472b6;
font-size: 0.8125rem;
font-weight: 600;
font-family: var(--font-primary);
padding: 0.4rem 1rem;
border-radius: var(--radius-pill);
letter-spacing: 0.06em;
text-transform: uppercase;
width: fit-content;
animation: fadeInUp 0.6s ease both;
}
.hero-badge svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.hero-heading {
font-family: var(--font-primary);
font-size: 42px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.03em;
color: #ffffff;
margin: 0;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
animation: fadeInUp 0.6s 0.1s ease both;
}
.hero-heading .highlight {
position: relative;
display: inline-block;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 50%, #FFFFFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
padding-bottom: 4px;
/* Space for the underline */
}
.hero-heading .highlight::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 50%, #FFFFFF 100%);
border-radius: 2px;
}
.hero-subtext {
font-size: clamp(0.95rem, 1.5vw, 1.1rem);
font-weight: 400;
line-height: 1.75;
color: rgba(255, 255, 255, 0.82);
margin: 0;
max-width: 520px;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
animation: fadeInUp 0.6s 0.2s ease both;
}
.hero-cta-group {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
animation: fadeInUp 0.6s 0.3s ease both;
}
.hero-btn-primary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--gradient-primary);
color: #ffffff;
font-family: var(--font-primary);
font-size: 0.9375rem;
font-weight: 600;
padding: 0.85rem 2rem;
border-radius: var(--radius-pill);
text-decoration: none;
border: 2px solid transparent;
transition: box-shadow 0.25s ease, transform 0.25s ease;
white-space: nowrap;
}
.hero-btn-primary:hover {
box-shadow: 0 8px 28px rgba(160, 45, 87, 0.5);
transform: translateY(-2px);
color: #ffffff;
}
.hero-btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: transparent;
color: rgba(255, 255, 255, 0.85);
font-family: var(--font-primary);
font-size: 0.9375rem;
font-weight: 500;
padding: 0.85rem 1.75rem;
border-radius: var(--radius-pill);
border: 1.5px solid rgba(255, 255, 255, 0.3);
text-decoration: none;
transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
white-space: nowrap;
}
.hero-btn-secondary:hover {
border-color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
.hero-btn-secondary svg,
.hero-btn-primary svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.hero-trust {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
animation: fadeInUp 0.6s 0.4s ease both;
}
.hero-trust-item {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.6);
font-weight: 500;
}
.hero-trust-item svg {
width: 16px;
height: 16px;
color: #C52671;
flex-shrink: 0;
}
.hero-trust-divider {
width: 1px;
height: 16px;
background: rgba(255, 255, 255, 0.2);
}
.hero-visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
animation: fadeInRight 0.8s 0.2s ease both;
}
.hero-image-wrap {
position: relative;
width: 100%;
max-width: 520px;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.hero-image-wrap img {
width: 100%;
height: 480px;
object-fit: cover;
display: block;
}
.hero-float-card {
position: absolute;
bottom: -1.5rem;
left: -1.5rem;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
border-radius: 16px;
padding: 1rem 1.25rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 200px;
}
.hero-float-card-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hero-float-card-icon svg {
width: 22px;
height: 22px;
color: #fff;
}
.hero-float-card-text strong {
display: block;
font-size: 1.125rem;
font-weight: 800;
color: var(--color-heading);
line-height: 1;
}
.hero-float-card-text span {
font-size: 0.75rem;
color: var(--color-body);
font-weight: 500;
}
.hero-float-card-2 {
top: -1.5rem;
right: -1.5rem;
left: auto;
bottom: auto;
min-width: 160px;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(32px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Hero Responsive */
@media (max-width: 1024px) {
.hero-inner {
gap: 2.5rem;
padding: 4rem 1.5rem;
}
}
@media (max-width: 768px) {
.hero-section {
min-height: 100vh;
min-height: 100svh;
/* safe area for mobile browsers */
}
.hero-inner {
grid-template-columns: 1fr;
padding: 9rem 1.25rem 4rem;
gap: 2rem;
text-align: center;
min-height: 100vh;
min-height: 100svh;
align-items: center;
}
.hero-badge {
margin: 0 auto;
}
.hero-heading {
font-size: 30px;
}
.hero-subtext {
max-width: 100%;
font-size: 0.95rem;
}
.hero-cta-group {
justify-content: center;
}
.hero-trust {
justify-content: center;
}
.hero-visual {
display: none;
}
.hero-carousel-controls {
bottom: 1.25rem;
gap: 0.75rem;
}
.hero-carousel-arrow {
width: 30px;
height: 30px;
}
.hero-carousel-arrow svg {
width: 15px;
height: 15px;
}
}
/* Extra-small phones — trim the hero title further */
@media (max-width: 480px) {
.hero-heading {
font-size: 26px;
}
}
/* ============================================================
SHARED PAGE UTILITIES
============================================================ */
/* Max-width container */
.sc {
max-width: 1280px;
margin: 0 auto;
padding: 0 2rem;
}
/* Eyebrow label */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-primary);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 1rem;
}
.eyebrow::before {
content: '';
display: inline-block;
flex: 0 0 auto;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #ffffff url('../images/tracknumber.jpg') center / cover no-repeat;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.eyebrow--light {
color: rgba(255, 255, 255, 0.7);
}
.eyebrow--light::before {
border-color: rgba(255, 255, 255, 0.3);
}
/* Section header block */
.section-hdr {
text-align: center;
max-width: 680px;
margin: 0 auto 3.5rem;
}
.section-hdr h2 {
color: var(--color-heading);
margin-bottom: 0.75rem;
font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.section-hdr--light h2 {
color: #ffffff;
}
.section-sub {
font-size: 1.0625rem;
color: var(--color-body);
line-height: 1.75;
margin-bottom: 0;
}
/* CTA row */
.section-cta-row {
text-align: center;
margin-top: 3rem;
}
/* Page buttons */
.pg-btn-primary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 2rem;
background: var(--gradient-primary);
color: #fff;
font-family: var(--font-primary);
font-size: 0.9375rem;
font-weight: 600;
border-radius: var(--radius-pill);
text-decoration: none;
transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.pg-btn-primary:hover {
color: #fff;
box-shadow: 0 8px 28px rgba(160, 45, 87, 0.4);
transform: translateY(-2px);
}
.pg-btn-primary svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.pg-btn-outline {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 2rem;
background: transparent;
color: var(--color-primary);
border: 2px solid var(--color-primary);
font-family: var(--font-primary);
font-size: 0.9375rem;
font-weight: 600;
border-radius: var(--radius-pill);
text-decoration: none;
transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.pg-btn-outline:hover {
background: var(--color-primary);
color: #fff;
transform: translateY(-2px);
}
.pg-btn-outline--light {
border-color: rgba(255, 255, 255, 0.65);
color: #fff;
}
.pg-btn-outline--light:hover {
background: rgba(255, 255, 255, 0.15);
border-color: #fff;
color: #fff;
}
/* ============================================================
SECTION 2 — STATS STRIP (Premium Dark Glassmorphism)
============================================================ */
/* --- Section shell --- */
.stats-cross-section {
padding: 4rem 0;
background: #ffffff;
color: #000;
min-height: 100vh;
display: flex;
align-items: center;
width: 100%;
}
.stats-cross-section .sc {
width: 100%;
position: relative;
z-index: 1;
}
.stats-cross-wrapper {
position: relative;
max-width: 700px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
/* Cross lines */
.stats-cross-wrapper::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #d1d5db; /* gray-300 */
z-index: 1;
}
.stats-cross-wrapper::after {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: #d1d5db;
z-index: 1;
}
/* Center Logo */
.stats-cross-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: #ffffff;
border: 1px solid #d1d5db;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
padding: 16px;
}
.stats-cross-center img {
max-width: 100%;
height: auto;
}
/* Quadrants */
.stats-cross-quad {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2.5rem 1.5rem;
text-align: center;
position: relative;
z-index: 2;
}
/* Icons */
.quad-icon {
width: 56px;
height: 56px;
border-radius: 50%;
border: 1px solid #d1d5db;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
background: #ffffff;
}
.quad-icon svg {
width: 28px;
height: 28px;
color: #4b5563; /* gray-600 */
}
/* Text */
.stats-cross-quad strong {
font-size: 2.25rem;
font-weight: 800;
color: #000;
line-height: 1.1;
margin-bottom: 0.5rem;
}
.stats-cross-quad span {
font-size: 1rem;
color: #000;
font-weight: 500;
}
/* ============================================================
SECTION 3 — ABOUT (Premium Redesign)
============================================================ */
/* --- Section shell --- */
.about-section {
position: relative;
padding: 7rem 0;
background: var(--color-surface);
overflow: hidden;
isolation: isolate;
}
/* --- Container override for about --- */
.about-sc {
position: relative;
z-index: 1;
}
/* --- Two-column grid (55 / 45 asymmetric) --- */
.about-grid {
display: grid;
grid-template-columns: 55fr 45fr;
gap: 5rem;
align-items: center;
}
/* ========================
LEFT — Content Column
======================== */
/* Heading */
.about-h2 {
font-size: clamp(1.625rem, 3vw, 2.25rem);
font-weight: 800;
color: var(--color-heading);
line-height: 1.2;
letter-spacing: -0.025em;
margin-bottom: 2rem;
}
.about-h2-highlight {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Info cards */
.about-card {
display: flex;
align-items: flex-start;
gap: 1.25rem;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 20px;
padding: 1.5rem;
margin-bottom: 1.25rem;
transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.about-card:hover {
box-shadow: 0 8px 32px rgba(160, 45, 87, 0.1);
border-color: rgba(160, 45, 87, 0.2);
transform: translateY(-2px);
}
.about-card-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, rgba(160, 45, 87, 0.12) 0%, rgba(197, 38, 113, 0.08) 100%);
border: 1px solid rgba(160, 45, 87, 0.15);
color: var(--color-primary);
margin-top: 0.125rem;
}
.about-card-icon svg {
width: 22px;
height: 22px;
}
.about-card-body {
flex: 1;
min-width: 0;
}
.about-card-title {
font-size: 0.9375rem;
font-weight: 700;
color: var(--color-heading);
margin: 0 0 0.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.about-card-text {
font-size: 0.9375rem;
color: var(--color-body);
line-height: 1.75;
margin: 0 0 0.875rem;
}
/* Gradient pills inside card */
.about-pills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.about-pill {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.3rem 0.85rem;
border-radius: var(--radius-pill);
background: linear-gradient(135deg, rgba(160, 45, 87, 0.1), rgba(197, 38, 113, 0.08));
border: 1px solid rgba(160, 45, 87, 0.2);
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary);
}
.about-pill strong {
font-weight: 800;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* CTA button */
.about-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.625rem;
margin-top: 0.75rem;
padding: 0.85rem 2rem;
font-family: var(--font-primary);
font-size: 0.9375rem;
font-weight: 700;
color: #fff;
background: var(--gradient-primary);
border-radius: var(--radius-pill);
text-decoration: none;
box-shadow: 0 4px 20px rgba(160, 45, 87, 0.3);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.about-cta-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
transition: transform 0.25s ease;
}
.about-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(160, 45, 87, 0.45);
color: #fff;
}
.about-cta-btn:hover svg {
transform: translateX(4px);
}
/* ========================
RIGHT — Visual Column
======================== */
.about-visual {
position: relative;
}
/* Glow blob behind image */
.about-img-glow {
position: absolute;
inset: -40px;
border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(160, 45, 87, 0.12) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
}
/* Image frame */
.about-img-frame {
position: relative;
z-index: 1;
border-radius: 24px;
overflow: visible;
}
.about-img {
width: 100%;
height: 500px;
object-fit: cover;
border-radius: 24px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
display: block;
}
.about-img-ph {
width: 100%;
height: 460px;
border-radius: 24px;
background: linear-gradient(135deg, #f3e8ed, #fce4ef);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
border: 2px dashed rgba(160, 45, 87, 0.25);
color: var(--color-primary);
font-size: 0.875rem;
font-weight: 500;
}
.about-img-ph svg {
width: 48px;
height: 48px;
opacity: 0.5;
}
/* Floating stat chips */
.about-chip {
position: absolute;
display: flex;
align-items: center;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(160, 45, 87, 0.15);
border-radius: 16px;
padding: 0.75rem 1.125rem;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
z-index: 2;
animation: chipFloat 4s ease-in-out infinite alternate;
min-width: 160px;
}
.about-chip--1 {
top: 1.5rem;
left: -2.5rem;
animation-delay: 0s;
}
.about-chip--2 {
bottom: 3.5rem;
right: -2rem;
animation-delay: -1.5s;
}
.about-chip--3 {
bottom: -1.5rem;
left: 1.5rem;
animation-delay: -3s;
}
.about-chip-icon {
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 50%;
background: linear-gradient(135deg, rgba(160, 45, 87, 0.15), rgba(197, 38, 113, 0.1));
border: 1px solid rgba(160, 45, 87, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
}
.about-chip-icon svg {
width: 18px;
height: 18px;
}
.about-chip>div:not(.about-chip-icon) {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.about-chip strong {
font-size: 1.125rem;
font-weight: 800;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.about-chip span {
font-size: 0.75rem;
font-weight: 500;
color: var(--color-body);
}
@keyframes chipFloat {
from {
transform: translateY(0px);
}
to {
transform: translateY(-8px);
}
}
/* Decorative security icons */
.about-deco-icons {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
border-radius: 24px;
overflow: hidden;
}
.about-deco-icon {
position: absolute;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
opacity: 0.06;
}
.about-deco-icon svg {
width: 100%;
height: 100%;
}
.about-deco-icon--1 {
top: 20%;
right: 8%;
}
.about-deco-icon--2 {
bottom: 25%;
left: 6%;
}
/* ========================
SCROLL ANIMATIONS
======================== */
[data-anim] {
opacity: 0;
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-anim="fade-up"] {
transform: translateY(36px);
}
[data-anim="fade-right"] {
transform: translateX(40px);
}
[data-anim].anim-done {
opacity: 1;
transform: none;
}
/* ========================
RESPONSIVE
======================== */
@media (max-width: 1024px) {
.about-grid {
grid-template-columns: 1fr;
gap: 3.5rem;
}
.about-visual {
order: -1;
}
.about-chip--1 {
left: 0;
}
.about-chip--2 {
right: 0;
}
}
@media (max-width: 768px) {
.about-section {
padding: 4.5rem 0;
}
.about-img {
height: 320px;
}
.about-img-ph {
height: 300px;
}
.about-chip {
min-width: 130px;
padding: 0.6rem 0.875rem;
}
.about-chip--1 {
top: 0.75rem;
left: -0.5rem;
}
.about-chip--2 {
bottom: 2.5rem;
right: -0.5rem;
}
.about-chip--3 {
display: none;
}
.about-card {
flex-direction: column;
gap: 0.75rem;
}
}
/* ============================================================
SECTION 4 — SOLUTIONS
============================================================ */
.solutions-section {
padding: 3.5rem 0;
background: #F6F6F6;
overflow: hidden;
}
/* Split Header */
.sol-header-split {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4rem;
margin-bottom: 3.5rem;
}
.sol-header-left {
flex: 1;
max-width: 500px;
}
.sol-header-left h2 {
color: var(--color-heading);
margin: 0;
font-size: clamp(2rem, 3.5vw, 2.5rem);
line-height: 1.1;
letter-spacing: -0.02em;
}
.sol-header-right {
flex: 1;
max-width: 600px;
border-left: 1px solid var(--color-border);
padding-left: 2.5rem;
}
.sol-header-right .section-sub {
margin: 0;
font-size: 1.0625rem;
color: var(--color-body);
line-height: 1.75;
}
/* Horizontal Scroller */
.solutions-scroller-wrap {
width: 100%;
}
.solutions-scroller {
display: flex;
gap: 1.5rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 2rem;
scrollbar-width: none;
/* Firefox */
cursor: grab;
}
.solutions-scroller.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
}
.solutions-scroller::-webkit-scrollbar {
display: none;
/* Chrome/Safari */
}
/* Premium Solution Card */
.sol-card-premium {
position: relative;
/* Exactly 4 cards visible at once (so we can center 3 and have 2 halves) */
flex: 0 0 calc(25vw - 1.125rem);
height: 480px;
border-radius: 16px;
overflow: hidden;
scroll-snap-align: center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
border: 1px solid var(--color-border);
}
.sol-card-premium:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
border-color: transparent;
}
.sol-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.9) 100%);
z-index: 1;
transition: opacity 0.4s ease, background 0.4s ease;
}
.sol-card-premium:hover .sol-card-overlay {
opacity: 0.95;
}
.sol-card-content {
position: relative;
z-index: 2;
padding: 2rem;
width: 100%;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.sol-card-title {
font-size: 1.5rem;
font-weight: 700;
color: #fff;
margin: 0;
line-height: 1.2;
letter-spacing: -0.01em;
}
.sol-card-desc {
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.75);
line-height: 1.6;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.3s ease;
}
.sol-card-premium:hover .sol-card-desc {
color: rgba(255, 255, 255, 1);
}
.sol-card-btn {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0.5rem;
padding: 0.75rem 1.25rem;
background: #111;
color: #fff;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
border-radius: 8px;
transition: background 0.3s ease, color 0.3s ease;
}
.sol-card-premium:hover .sol-card-btn {
background: #fff;
color: var(--color-primary);
}
/* ============================================================
SECTION 5 — WHY CHOOSE US
============================================================ */
.why-section {
padding: 6rem 0;
background: var(--color-bg);
}
.why-section .section-hdr {
text-align: center;
margin-bottom: 4rem;
}
.why-section .section-hdr h2 {
color: var(--color-heading);
font-size: clamp(2rem, 4vw, 2.5rem);
}
.why-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem 2rem;
}
.why-card {
display: flex;
align-items: flex-start;
gap: 1.5rem;
background: transparent;
border: none;
padding: 0;
}
.why-icon {
flex: 0 0 72px;
width: 72px;
height: 72px;
background: #f8f9fa;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
display: flex;
align-items: center;
justify-content: center;
color: #444;
/* Dark grey icon */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.why-card:hover .why-icon {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
.why-icon svg {
width: 32px;
height: 32px;
stroke-width: 1.5;
}
.why-card-content {
flex: 1;
}
.why-card h3 {
font-size: 1.125rem;
color: var(--color-heading);
margin-bottom: 0.5rem;
font-weight: 700;
}
.why-card p {
font-size: 0.9375rem;
color: var(--color-body);
line-height: 1.6;
margin-bottom: 0;
}
/* ============================================================
SECTION 6 — INDUSTRIES
============================================================ */
.industries-section {
padding: 6rem 0;
background: #F6F6F6;
overflow: hidden;
}
.ind-header-split {
display: flex;
align-items: center;
gap: 3rem;
margin-bottom: 4rem;
}
.ind-header-left {
flex: 0 0 40%;
}
.ind-header-left .eyebrow {
color: #4b5563;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1rem;
}
.ind-header-left h2 {
font-size: clamp(2rem, 4vw, 2.75rem);
line-height: 1.1;
color: #111;
margin: 0;
}
.ind-header-divider {
width: 1px;
height: 120px;
background: #e5e7eb;
}
.ind-header-right {
flex: 1;
}
.ind-header-right p {
font-size: 1.05rem;
color: #4b5563;
line-height: 1.6;
margin-bottom: 0;
max-width: 600px;
}
.ind-scroller-wrap {
width: 100%;
}
.ind-scroller {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem 1.5rem;
padding: 1rem 0 2rem 0;
}
.ind-card-new {
width: 100%;
height: 380px;
border-radius: 16px;
position: relative;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ind-card-new:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.ind-card-pill {
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
background: #fff;
border-radius: 50px;
padding: 0.5rem 0.5rem 0.5rem 1rem;
display: flex;
flex-direction: column;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
width: 90%;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
max-height: 44px;
}
.ind-card-pill-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.ind-card-pill-body {
opacity: 0;
margin-top: 1.25rem;
transition: opacity 0.3s ease;
}
.ind-card-pill-body p {
font-size: 0.85rem;
color: #4b5563;
line-height: 1.6;
margin: 0;
white-space: normal;
}
.ind-card-new:hover .ind-card-pill {
border-radius: 16px;
padding: 1.25rem;
max-height: 250px;
}
.ind-card-new:hover .ind-card-pill-body {
opacity: 1;
transition-delay: 0.15s;
}
.ind-card-title {
font-size: 0.95rem;
font-weight: 600;
color: #111;
white-space: nowrap;
/* Take the remaining space and ellipsis-truncate long titles
instead of pushing the arrow out of the pill. */
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 0.5rem;
}
.ind-card-arrow {
/* Keep the arrow at a fixed size so it is never cropped. */
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.ind-card-arrow svg {
width: 28px;
height: 28px;
color: #000;
display: block;
}
/* ============================================================
SECTION 7 — OUR PROCESS
============================================================ */
.process-section {
padding: 8rem 0;
background: #F8FAFC;
position: relative;
overflow: hidden;
}
.proc-bg-accent {
position: absolute;
inset: 0;
/* Subtle dot/circuit pattern */
background-image: radial-gradient(var(--color-primary) 1px, transparent 1px), radial-gradient(var(--color-secondary) 1px, transparent 1px);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
opacity: 0.03;
pointer-events: none;
z-index: 0;
}
.process-section .sc {
position: relative;
z-index: 1;
}
.proc-header-split {
display: flex;
align-items: center;
gap: 3rem;
margin-bottom: 5rem;
}
.proc-header-left {
flex: 1;
max-width: 500px;
}
.proc-header-left .eyebrow {
font-weight: 700;
letter-spacing: 0.1em;
font-size: 0.875rem;
margin-bottom: 0.75rem;
}
.proc-header-left h2 {
color: var(--color-heading);
font-size: clamp(2rem, 4vw, 3rem);
margin: 0;
line-height: 1.1;
letter-spacing: -0.02em;
}
.proc-header-divider {
width: 1px;
height: 80px;
background: var(--color-border);
}
.proc-header-right {
flex: 1;
max-width: 600px;
}
.proc-header-right p {
margin: 0;
font-size: 1.0625rem;
color: var(--color-body);
line-height: 1.75;
}
.process-flow-wrap {
position: relative;
padding: 2rem 0;
}
.proc-animated-line {
position: absolute;
top: 50%;
left: 2rem;
right: 2rem;
height: 2px;
background: rgba(0, 0, 0, 0.05);
transform: translateY(-50%);
z-index: 0;
border-radius: 2px;
overflow: hidden;
}
.proc-line-glow {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0%;
background: linear-gradient(90deg, transparent, var(--color-primary), var(--color-secondary));
box-shadow: 0 0 10px var(--color-primary);
transition: width 2s cubic-bezier(0.22, 1, 0.36, 1);
}
.process-flow-wrap.anim-done .proc-line-glow {
width: 100%;
}
.process-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1.5rem;
position: relative;
z-index: 1;
}
.proc-step-glass {
/* Opaque face: the connector line runs behind this row, and a
translucent card would let it show through the card body.
The section background is flat #F8FAFC, so solid white reads
identically to the old 60% glass — minus the bleed-through. */
background: #FFFFFF;
border-radius: 20px;
padding: 2.5rem 1.5rem;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.proc-step-glass:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06), 0 0 30px rgba(160, 45, 87, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
background: #FFFFFF;
border-color: rgba(255, 255, 255, 1);
}
.proc-badge-wrap {
position: absolute;
top: -1.25rem;
left: 50%;
transform: translateX(-50%);
}
.proc-badge {
background: var(--gradient-primary);
color: #fff;
font-weight: 800;
font-size: 1rem;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.2);
border: 3px solid #F8FAFC;
}
.proc-icon-wrap {
margin-top: 1rem;
margin-bottom: 1.5rem;
}
.proc-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.proc-step-glass:hover .proc-icon {
transform: scale(1.12);
color: var(--color-secondary);
}
.proc-icon svg {
width: 28px;
height: 28px;
}
.proc-step-glass h3 {
font-size: 1.125rem;
color: var(--color-heading);
margin-bottom: 0.75rem;
font-weight: 700;
}
.proc-step-glass p {
font-size: 0.875rem;
color: #596778;
line-height: 1.6;
margin-bottom: 0;
}
/* Premium Pill Button */
.proc-btn-pill {
display: inline-flex;
align-items: center;
gap: 1rem;
background: var(--gradient-primary);
color: #fff;
padding: 0.75rem 1rem 0.75rem 1.75rem;
border-radius: 50px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
overflow: hidden;
white-space: nowrap;
}
.proc-btn-pill:hover {
transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(160, 45, 87, 0.2);
color: #fff;
}
.proc-btn-arrow {
background: #fff;
color: var(--color-primary);
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.proc-btn-pill:hover .proc-btn-arrow {
transform: translateX(4px);
}
.proc-btn-arrow svg {
width: 18px;
height: 18px;
}
/* ============================================================
SECTION 8 — FEATURED PROJECTS (BENTO GRID)
============================================================ */
.projects-section {
padding: 8rem 0;
background: #F8FAFC;
position: relative;
overflow: hidden;
}
.proj-bg-pattern {
position: absolute;
inset: 0;
background-image: radial-gradient(var(--color-primary) 1px, transparent 1px);
background-size: 40px 40px;
opacity: 0.04;
pointer-events: none;
z-index: 0;
}
.projects-section .sc {
position: relative;
z-index: 1;
}
.proj-header-split {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4rem;
margin-bottom: 3rem;
}
.proj-header-left {
flex: 1;
max-width: 500px;
}
.proj-header-left .eyebrow {
font-weight: 700;
letter-spacing: 0.1em;
font-size: 0.875rem;
margin-bottom: 0.75rem;
}
.proj-header-left h2 {
color: var(--color-heading);
font-size: clamp(2rem, 4vw, 3rem);
margin: 0;
line-height: 1.1;
letter-spacing: -0.02em;
}
.proj-header-divider {
width: 1px;
height: 80px;
background: var(--color-border);
}
.proj-header-right {
flex: 1;
max-width: 600px;
}
.proj-header-right p {
margin: 0;
font-size: 1.0625rem;
color: var(--color-body);
line-height: 1.75;
}
/* Filter Bar */
.proj-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-bottom: 4rem;
}
.proj-filter-btn {
background: #fff;
color: var(--color-body);
border: 1px solid rgba(0, 0, 0, 0.08);
padding: 0.6rem 1.25rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}
.proj-filter-btn:hover {
border-color: rgba(11, 94, 215, 0.3);
color: var(--color-primary);
}
.proj-filter-btn.is-active {
background: var(--gradient-primary);
color: #fff;
border-color: transparent;
box-shadow: 0 8px 20px rgba(11, 94, 215, 0.25);
}
/* Bento Grid */
.bento-grid {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding-bottom: 2rem;
gap: 1.5rem;
scrollbar-width: none;
cursor: grab;
padding-left: max(2rem, calc(50% - 640px + 2rem));
padding-right: max(2rem, calc(50% - 640px + 2rem));
}
.bento-grid::-webkit-scrollbar {
display: none;
}
.bento-grid.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
}
.bento-arrow {
position: absolute;
top: calc(50% - 1rem);
transform: translateY(-50%);
width: 48px;
height: 48px;
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
color: var(--color-primary);
}
.bento-arrow:hover {
background: var(--color-primary);
color: #fff;
transform: translateY(-50%) scale(1.1);
}
.bento-arrow svg {
width: 24px;
height: 24px;
}
.bento-prev {
left: 1.5rem;
}
.bento-next {
right: 1.5rem;
}
@media (max-width: 1024px) {
.bento-arrow {
display: none;
}
}
.bento-card {
position: relative;
border-radius: 24px;
overflow: hidden;
background: #08121E;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
border: 1px solid transparent;
display: flex;
flex-direction: column;
justify-content: flex-end;
flex: 0 0 calc(25vw - 1.125rem);
min-height: 480px;
scroll-snap-align: center;
}
.bento-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 0 2px var(--color-primary);
}
.bento-img-wrap {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.bento-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.bento-card:hover .bento-img {
transform: scale(1.08);
}
.bento-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(8, 18, 30, 0.95) 0%, rgba(8, 18, 30, 0.2) 60%, transparent 100%);
z-index: 1;
}
.bento-tag {
position: absolute;
top: 1.5rem;
left: 1.5rem;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.4rem 1rem;
border-radius: 50px;
z-index: 2;
transition: transform 0.3s ease;
}
.bento-card:hover .bento-tag {
transform: scale(1.05);
}
.bento-info {
position: relative;
z-index: 2;
padding: 2rem;
/* Glassmorphism for the text area */
border-radius: 0 0 24px 24px;
}
.bento-info h3 {
color: #fff;
font-size: clamp(1.1rem, 2.5vw, 1.25rem);
margin-bottom: 0.75rem;
line-height: 1.3;
}
.bento-info p {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 1.25rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bento-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #fff;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: color 0.3s ease;
}
.bento-link:hover {
color: var(--color-secondary);
}
.bento-link svg {
width: 16px;
height: 16px;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-link:hover svg {
transform: translateX(4px);
}
/* Used for JS filtering */
.proj-item-filtered {
transition: opacity 0.4s ease, transform 0.4s ease;
}
.proj-item-filtered.is-hidden {
display: none;
}
/* ============================================================
SECTION 9 — TESTIMONIALS (MARQUEE)
============================================================ */
.testi-section {
padding: 6rem 0;
background: #160C15;
overflow: hidden;
}
.testi-section .section-hdr h2 {
color: #ffffff;
}
.testi-section .section-hdr .eyebrow--light {
color: #f59e0b;
}
/* ── Marquee outer wrapper — clips overflow & applies bilateral blur ── */
.testi-marquee-wrap {
position: relative;
width: 100%;
overflow: hidden;
padding: 1rem 0 1.5rem;
/* Fade mask: transparent → solid → solid → transparent */
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
#000 15%,
#000 85%,
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0%,
#000 15%,
#000 85%,
transparent 100%
);
}
/* ── Scrolling track ── */
.testi-marquee-track {
display: flex;
gap: 1.75rem;
width: max-content;
}
.testi-marquee-track:not(:last-child) {
margin-bottom: 1.75rem;
}
.testi-marquee-track--left {
animation: testi-scroll-left 40s linear infinite;
}
.testi-marquee-track--right {
animation: testi-scroll-right 45s linear infinite;
}
/* Pause entire track when any card inside is hovered */
.testi-marquee-wrap:hover .testi-marquee-track {
animation-play-state: paused;
}
@keyframes testi-scroll-left {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes testi-scroll-right {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
/* ── Individual card ── */
.testi-card {
width: 380px;
flex-shrink: 0;
padding: 2.25rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 3px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
transition: transform 0.35s ease, background 0.35s ease,
border-color 0.35s ease, box-shadow 0.35s ease;
cursor: default;
}
.testi-card:hover {
background: rgba(255, 255, 255, 0.10);
border-top-color: var(--color-primary);
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
/* ── Stars ── */
.testi-stars {
display: flex;
gap: 0.25rem;
margin-bottom: 1.25rem;
}
.testi-stars svg {
width: 20px;
height: 20px;
color: #f59e0b;
}
/* ── Quote ── */
.testi-card blockquote {
font-size: 1rem;
color: #d1d5db;
line-height: 1.75;
margin: 0 0 1.75rem;
border: none;
padding: 0;
flex-grow: 1;
}
/* ── Author row ── */
.testi-author {
display: flex;
align-items: center;
gap: 1rem;
margin-top: auto;
}
.testi-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 700;
color: #fff;
flex-shrink: 0;
}
.testi-author strong {
display: block;
color: #ffffff;
font-size: 0.95rem;
margin-bottom: 0.15rem;
}
.testi-author span {
color: #9ca3af;
font-size: 0.82rem;
}
/* ── CTA pill on dark bg ── */
.testi-cta-pill {
background: rgba(255, 255, 255, 0.08);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.testi-cta-pill:hover {
background: var(--color-primary);
border-color: var(--color-primary);
}
/* ── MOBILE RESPONSIVE ── */
@media (max-width: 768px) {
/* Narrow the blur fade zones */
.testi-marquee-wrap {
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
#000 8%,
#000 92%,
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0%,
#000 8%,
#000 92%,
transparent 100%
);
}
/* Hide the second row on mobile to save vertical space */
.testi-marquee-track--right {
display: none;
}
.testi-card {
width: 82vw;
padding: 1.75rem;
}
}
@media (max-width: 480px) {
.testi-card {
width: 88vw;
}
}
/* ============================================================
SECTION 10 — BRAND PARTNERS
============================================================ */
.partners-section {
padding: 6rem 0 5rem;
background: #F8FAFC;
position: relative;
overflow: hidden;
border-top: 1px solid var(--color-border);
}
.partners-bg-pattern {
position: absolute;
inset: 0;
background-image: radial-gradient(#0B5ED7 1px, transparent 1px);
background-size: 32px 32px;
opacity: 0.03;
pointer-events: none;
z-index: 0;
}
.partners-zigzag-wrap {
margin-top: 4rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
overflow: hidden;
}
.partners-marquee-row {
overflow: hidden;
mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.partners-marquee-track {
display: flex;
gap: 1.5rem;
width: max-content;
}
.pmt-left {
animation: marquee-left 40s linear infinite;
}
.pmt-right {
animation: marquee-right 45s linear infinite;
}
.partners-marquee-row:hover .partners-marquee-track {
animation-play-state: paused;
}
@keyframes marquee-left {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes marquee-right {
0% { transform: translateX(-50%); }
100% { transform: translateX(0); }
}
.partner-logo-img {
flex-shrink: 0;
width: 180px;
height: 90px;
background: #fff;
border: 1px solid rgba(0,0,0,0.07);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 1.25rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.partner-logo-img:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(0,0,0,0.1);
}
.partner-logo-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
opacity: 1;
transition: filter 0.3s ease, opacity 0.3s ease;
}
.partner-logo-img:hover img {
opacity: 1;
}
/* keep old single-track styles for any legacy elements */
.partners-marquee-container {
display: none;
}
/* ============================================================
SECTION 11 — FAQ
============================================================ */
.faq-section {
padding: 6rem 0;
background: var(--color-bg);
}
.faq-layout {
display: grid;
grid-template-columns: 340px 1fr;
gap: 5rem;
align-items: start;
}
.faq-sidebar h2 {
font-size: clamp(1.6rem, 2.5vw, 2rem);
color: var(--color-heading);
margin-bottom: 1rem;
}
.faq-sidebar p {
color: var(--color-body);
line-height: 1.75;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 0;
}
.faq-item {
border-bottom: 1px solid var(--color-border);
}
.faq-item:first-child {
border-top: 1px solid var(--color-border);
}
.faq-q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 0;
background: none;
border: none;
cursor: pointer;
font-family: var(--font-primary);
font-size: 1rem;
font-weight: 600;
color: var(--color-heading);
text-align: left;
transition: color var(--transition-fast);
}
.faq-q:hover {
color: var(--color-primary);
}
.faq-chevron {
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--color-body);
transition: transform var(--transition-fast);
}
.faq-item.is-open .faq-chevron {
transform: rotate(180deg);
}
.faq-item.is-open .faq-q {
color: var(--color-primary);
}
.faq-a {
padding-bottom: 1.25rem;
}
.faq-a p {
font-size: 0.9375rem;
color: var(--color-body);
line-height: 1.75;
margin-bottom: 0;
}
/* ============================================================
SECTION 12 — FINAL CTA
============================================================ */
.cta-premium-section {
padding: 7rem 0;
background: var(--gradient-primary);
position: relative;
overflow: hidden;
color: #fff;
}
.cta-bg-glow {
position: absolute;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
top: -100px;
right: -100px;
border-radius: 50%;
z-index: 0;
pointer-events: none;
}
.cta-bg-pattern {
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 40px 40px;
z-index: 1;
pointer-events: none;
opacity: 0.3;
}
.cta-split-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.cta-content-col h2 {
font-size: clamp(2rem, 4vw, 3rem);
color: #fff;
margin-bottom: 1.25rem;
line-height: 1.2;
}
.cta-desc {
font-size: 1.125rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.7;
margin-bottom: 2.5rem;
max-width: 540px;
}
.cta-btns {
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
margin-bottom: 3rem;
}
.cta-btn-outline {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1.75rem;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
color: #fff;
font-weight: 600;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(8px);
transition: all 0.3s ease;
text-decoration: none;
}
.cta-btn-outline:hover {
background: rgba(255, 255, 255, 0.15);
border-color: #fff;
transform: translateY(-2px);
}
.cta-btn-outline svg {
width: 20px;
height: 20px;
}
.cta-visual-col {
position: relative;
}
.cta-image-wrapper {
position: relative;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.cta-image-wrapper img {
width: 100%;
height: auto;
display: block;
border-radius: 24px;
}
/* ---- CTA icon grid (replaces the photo on service detail pages) ---- */
.cta-icon-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.cta-icon-item {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 16px;
padding: 1.75rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.85rem;
text-align: center;
transition: transform 0.3s ease, background 0.3s ease;
}
.cta-icon-item:hover {
transform: translateY(-4px);
background: rgba(255, 255, 255, 0.14);
}
.cta-icon-item-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.12);
display: flex;
align-items: center;
justify-content: center;
color: #f9a8d4;
flex-shrink: 0;
}
.cta-icon-item-icon svg {
width: 28px;
height: 28px;
}
.cta-icon-item span {
font-size: 0.8125rem;
font-weight: 700;
color: #fff;
line-height: 1.3;
}
@media (max-width: 640px) {
.cta-icon-grid { grid-template-columns: repeat(2, 1fr); }
}
.float-card {
position: absolute;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 0.75rem 1.25rem;
border-radius: 16px;
display: flex;
align-items: center;
gap: 0.75rem;
color: #fff;
font-weight: 600;
font-size: 0.9375rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
animation: float-anim 6s ease-in-out infinite;
}
.fc-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
}
.fc-icon svg {
width: 16px;
height: 16px;
color: #fff;
}
.float-card-1 {
top: -20px;
right: -20px;
animation-delay: 0s;
}
.float-card-2 {
bottom: 40px;
left: -30px;
animation-delay: 2s;
}
.float-card-3 {
bottom: -20px;
right: 20px;
animation-delay: 4s;
}
@keyframes float-anim {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
/* ============================================================
RESPONSIVE — ALL NEW SECTIONS
============================================================ */
@media (max-width: 1024px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.about-grid {
gap: 3rem;
}
.sol-header-split {
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
.sol-header-right {
border-left: none;
padding-left: 0;
}
.sol-card-premium {
/* On tablet, show 3 cards total (2 full + 2 halves) */
flex: 0 0 calc(33.333vw - 1.5rem);
}
.process-row {
grid-template-columns: repeat(3, 1fr);
gap: 4rem 2rem;
}
.proc-animated-line {
display: none;
}
.bento-grid {
grid-template-columns: repeat(2, 1fr);
}
.faq-layout {
grid-template-columns: 280px 1fr;
gap: 3rem;
}
.stats-cross-section {
padding: 3rem 0 !important;
min-height: auto !important;
}
}
@media (max-width: 768px) {
.sc {
padding: 0 1.25rem;
}
.sol-card-premium {
/* On mobile, show 1 full and part of next */
flex: 0 0 calc(80vw - 1.5rem);
}
.stats-section {
padding: 3.5rem 0;
}
.about-section,
.why-section,
.industries-section,
.process-section,
.projects-section,
.testi-section,
.partners-section,
.faq-section {
padding: 4rem 0;
}
.cta-premium-section {
padding: 5rem 0;
}
.stats-cross-section {
padding: 2rem 0 !important;
min-height: auto !important;
}
.stats-cross-section .stats-header {
margin-bottom: 2rem !important;
}
.stats-cross-center {
width: 60px;
height: 60px;
padding: 10px;
}
.stats-cross-quad {
padding: 1.5rem 0.5rem;
}
.quad-icon {
width: 48px;
height: 48px;
margin-bottom: 0.5rem;
}
.quad-icon svg {
width: 24px;
height: 24px;
}
.stats-cross-quad strong {
font-size: 1.5rem;
}
.stats-cross-quad span {
font-size: 0.875rem;
}
.about-grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.about-badge-pill {
left: 0.5rem;
bottom: -1rem;
}
.solutions-grid {
grid-template-columns: 1fr;
}
.why-grid {
grid-template-columns: 1fr;
}
.ind-header-split,
.proc-header-split,
.proj-header-split {
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
.ind-header-divider,
.proc-header-divider,
.proj-header-divider {
display: none;
}
.ind-scroller-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding-bottom: 1rem;
margin-left: -1.25rem;
margin-right: -1.25rem;
width: calc(100% + 2.5rem);
padding-left: 10vw;
padding-right: 10vw;
scrollbar-width: none;
}
.ind-scroller-wrap::-webkit-scrollbar {
display: none;
}
.ind-scroller {
display: flex;
flex-wrap: nowrap;
gap: 1.25rem;
}
.ind-card-new {
flex: 0 0 80vw;
scroll-snap-align: center;
}
.process-row {
grid-template-columns: 1fr;
gap: 3rem;
}
.proc-animated-line {
display: block;
width: 2px;
height: 100%;
top: 0;
bottom: 0;
left: 2rem;
right: auto;
transform: none;
}
.proc-line-glow {
width: 100%;
height: 0%;
background: linear-gradient(180deg, transparent, var(--color-primary), var(--color-secondary));
transition: height 2s cubic-bezier(0.22, 1, 0.36, 1);
}
.process-flow-wrap.anim-done .proc-line-glow {
height: 100%;
width: 100%;
/* Reset width for vertical line */
}
.proc-step-glass {
margin-left: 4rem;
text-align: left;
align-items: flex-start;
padding-left: 2rem;
}
.proc-badge-wrap {
left: -4rem;
top: 1.5rem;
transform: none;
}
.bento-grid {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding-bottom: 1rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
scrollbar-width: none;
gap: 1.25rem;
}
.bento-grid::-webkit-scrollbar {
display: none;
}
.bento-card {
flex: 0 0 80vw;
scroll-snap-align: center;
min-height: 420px;
}
.faq-layout {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.cta-split-layout {
grid-template-columns: 1fr;
gap: 4rem;
text-align: center;
}
.cta-desc {
margin-left: auto;
margin-right: auto;
}
.cta-btns {
flex-direction: column;
align-items: stretch;
}
.cta-btns a {
justify-content: center;
}
.partners-marquee-container {
margin-top: 1.5rem;
}
.partner-logo {
padding: 0.75rem 2rem;
font-size: 0.9375rem;
}
}
@media (max-width: 480px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.process-row {
grid-template-columns: 1fr;
}
.proc-step-glass {
margin-left: 3rem;
padding-left: 1.5rem;
}
.proc-badge-wrap {
left: -3rem;
top: 1rem;
}
.proc-animated-line {
left: 1.5rem;
}
.bento-card {
flex: 0 0 calc(90vw - 1.25rem);
}
.ind-card-new {
flex: 0 0 calc(90vw - 1.25rem);
}
}
/* ============================================================
FOOTER
============================================================ */
.site-footer {
background: #000000;
color: #ffffff;
padding: 5rem 0 0;
font-size: 0.9375rem;
position: relative;
z-index: 10;
}
.site-footer p,
.site-footer span,
.site-footer li {
color: #ffffff;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 3rem;
margin-bottom: 4rem;
}
.footer-logo img {
margin-bottom: 1.5rem;
display: block;
}
.footer-tagline {
margin-bottom: 2rem;
line-height: 1.6;
max-width: 320px;
}
.footer-socials {
display: flex;
gap: 1rem;
}
.footer-socials a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
color: #fff;
transition: all 0.3s ease;
}
.footer-socials a:hover {
background: var(--color-primary);
transform: translateY(-3px);
}
.footer-socials svg {
width: 18px;
height: 18px;
}
.footer-heading {
color: #fff;
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
.footer-col-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-col-links li {
margin-bottom: 0.875rem;
}
.footer-col-links a {
color: #ffffff;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
}
.footer-col-links a:hover {
color: var(--color-primary);
transform: translateX(5px);
}
.footer-view-all {
color: var(--color-primary) !important;
font-weight: 600;
margin-top: 0.5rem;
}
.contact-list {
list-style: none;
padding: 0;
margin: 0;
}
.contact-list li {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.25rem;
line-height: 1.5;
}
.contact-list svg {
width: 20px;
height: 20px;
color: var(--color-primary);
flex-shrink: 0;
margin-top: 2px;
}
.contact-list a {
color: #ffffff;
text-decoration: none;
transition: color 0.3s ease;
}
.contact-list a:hover {
color: #fff;
}
.footer-bottom {
background: rgba(0, 0, 0, 0.2);
padding: 1.5rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.fb-inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.fb-inner p {
margin: 0;
font-size: 0.875rem;
}
.fb-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 1.5rem;
}
.fb-links a {
color: #ffffff;
text-decoration: none;
font-size: 0.875rem;
transition: color 0.3s ease;
}
.fb-links a:hover {
color: #fff;
}
/* Contact list links */
.contact-list a {
color: #ffffff;
text-decoration: none;
transition: color 0.3s ease;
}
.contact-list a:hover {
color: var(--color-primary);
}
/* ============================================================
FOOTER OFFICE CARDS
============================================================ */
.footer-offices {
margin-top: 0;
padding-top: 2rem;
padding-bottom: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-offices-heading {
color: #fff;
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 1rem;
opacity: 0.7;
}
.office-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
.office-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
padding: 0.875rem 1rem;
transition: border-color 0.3s ease, background 0.3s ease;
}
.office-card:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.18);
}
.office-card-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.office-card-header svg {
width: 15px;
height: 15px;
color: var(--color-primary);
flex-shrink: 0;
}
.office-state {
font-size: 0.8125rem;
font-weight: 700;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.office-card p {
font-size: 0.8125rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.75);
margin: 0;
}
/* ============================================================
STICKY MOBILE ACTION BAR
============================================================ */
.mobile-action-bar {
display: none;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-top: 1px solid var(--color-border);
z-index: 9999;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
}
.mab-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 0.5rem;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
transition: background 0.3s;
}
.mab-call {
color: #fff;
background: var(--gradient-primary);
}
.mab-whatsapp {
color: #fff;
background: #25D366;
/* WhatsApp Green */
}
.mab-btn svg {
width: 20px;
height: 20px;
}
/* ============================================================
FOOTER RESPONSIVE
============================================================ */
@media (max-width: 1199px) {
.footer-grid {
grid-template-columns: 2fr 1fr 1fr;
gap: 2.5rem;
}
.footer-col-company {
grid-column: 1 / -1;
}
.office-cards {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 991px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
}
.footer-col-company {
grid-column: 1 / -1;
}
.office-cards {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.mobile-action-bar {
display: flex;
transition: opacity 0.3s ease,
transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* It sits at z-index 9999 — above the drawer and its backdrop —
so leaving it up would put a bright, sharp bar on top of the
dimmed overlay. Drop it out of the way while the menu is open;
the drawer carries its own CTA. */
body.nav-open .mobile-action-bar {
opacity: 0;
transform: translateY(100%);
pointer-events: none;
}
/* Add bottom padding to body to prevent content from being hidden by sticky bar */
body {
padding-bottom: 60px;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.footer-col-company {
grid-column: auto;
}
.site-footer {
padding: 4rem 0 2rem;
}
.fb-inner {
flex-direction: column;
text-align: center;
justify-content: center;
}
.fb-links {
justify-content: center;
}
.office-cards {
grid-template-columns: 1fr;
}
}