/* ============================================================
CNT Network Technology — Main Stylesheet
============================================================ */
/* ---- CSS Custom Properties (Brand Tokens) ---- */
:root {
--color-primary: #E31E24;
/* CNT red */
--color-secondary: #1B6EC2;
/* Network Technology blue */
--color-navy-dark: #0D1524;
/* Fact Sheets band background */
--color-text-dark: #1a1a1a;
--color-text-gray: #4a4a4a;
--color-light-bg: #f8f9fa;
--color-white: #ffffff;
/* Spacing scale */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 4rem;
--space-xl: 6rem;
/* Typography */
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-display: 'Poppins', 'Inter', system-ui, sans-serif;
--font-stats: 'Montserrat', 'Inter', system-ui, sans-serif;
--font-size-base: 1rem;
--line-height-base: 1.7;
/* Effects */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-md: 0 6px 24px rgba(0, 0, 0, 0.12);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);
/* Transitions */
--transition-fast: 0.2s ease;
--transition-base: 0.3s ease;
/* Navbar */
--navbar-height: 140px;
}
/* ============================================================
RESET & BASE
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: var(--font-sans);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
color: var(--color-text-dark);
background: var(--color-white);
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
display: block;
}
img[hidden] {
display: none;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
/* ============================================================
ARABIC / RTL
============================================================
Scoped entirely under html[dir="rtl"] so English pages are
completely unaffected. The Cairo font is only ever loaded (its
tag) when this is active — see base.html. Most of the site
already mirrors correctly for free (CSS Grid `order`, flexbox,
`padding-inline`, `inset: 0`), since the base stylesheet already
uses logical properties in most places; the handful of remaining
physical left/right rules (navbar dropdowns, card accent borders,
bullet/icon spacing) were converted to their logical equivalents
directly rather than duplicated here. */
html[dir="rtl"] body {
font-family: 'Cairo', var(--font-sans);
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
font-family: 'Cairo', var(--font-display);
}
/* A right-pointing submenu chevron (▸) needs to visually point the
other way once the submenu itself opens toward the opposite edge. */
html[dir="rtl"] .chevron-right {
transform: scaleX(-1);
}
/* Standalone "CNT" badges/logos (footer, hero, image-fallback badges) —
isolate them from the surrounding bidi context so the Unicode bidi
algorithm never visually reorders the Latin text. A no-op on English
pages (already LTR), so this applies unconditionally rather than only
under html[dir="rtl"]. */
.logo-cnt,
.hero__cnt,
.event-card__cover-placeholder span {
unicode-bidi: isolate;
direction: ltr;
}
/* .hero__logo-line and .footer__brand are flex containers holding "CNT"
and "Network Technology" as two SEPARATE sibling spans — isolating
each span's own text (above) stops letters within each word from
reordering, but under dir="rtl" the FLEX CONTAINER itself still lays
its items out start-to-end along the RTL axis, visually swapping
which span appears first. Fixing that requires direction: ltr on the
container, not just its children. */
.hero__logo-line,
.footer__brand {
direction: ltr;
unicode-bidi: isolate;
}
/* ============================================================
LAYOUT UTILITIES
============================================================ */
.container {
width: 100%;
max-width: 1200px;
margin-inline: auto;
padding-inline: var(--space-md);
}
.section {
padding-block: calc(var(--space-xl) * 1.25);
}
/* ============================================================
LOGO (text version — swap for ![]()
when asset is ready)
============================================================ */
.logo-text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.logo-cnt {
font-size: 1.6rem;
font-weight: 900;
letter-spacing: 0.04em;
color: var(--color-primary);
text-transform: uppercase;
}
.logo-subtitle {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--color-secondary);
text-transform: uppercase;
}
/* ============================================================
NAVBAR
============================================================ */
.navbar {
position: sticky;
top: 0;
z-index: 1000;
height: var(--navbar-height);
padding-block: 0.625rem;
background: var(--color-white);
border-bottom: 2px solid #e5e5e5;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-base);
}
.navbar.scrolled {
box-shadow: var(--shadow-md);
}
.navbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
gap: 0.5rem;
padding-inline: 0.5rem;
height: 100%;
}
.navbar__logo {
flex-shrink: 0;
display: flex;
align-items: center;
}
.navbar__logo .logo-img {
max-height: 76px;
width: auto;
object-fit: contain;
display: block;
}
.navbar__nav {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 0 0 auto;
min-width: 0;
flex-wrap: nowrap;
gap: 0.75rem;
}
.navbar__list {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 0.75rem;
}
.navbar__linkedin {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 32px;
height: 32px;
margin-inline-start: 0;
padding: 0;
color: var(--color-white);
background: #0A66C2;
border-radius: 6px;
transition: background var(--transition-fast), transform var(--transition-fast);
line-height: 0;
}
.navbar__linkedin:hover {
background: #0757A3;
transform: translateY(-1px);
}
.navbar__linkedin .fa-linkedin-in {
font-size: 20px;
color: var(--color-white);
background: transparent;
}
.navbar__link,
.nav-link {
display: inline-block;
padding: 0.5rem;
font-size: 0.94rem;
font-weight: 500;
color: var(--color-secondary);
border-radius: 6px;
transition: color var(--transition-fast), background var(--transition-fast);
white-space: nowrap;
}
.navbar__link:hover,
.navbar__link.active,
.nav-link:hover,
.nav-link.active {
color: var(--color-primary);
background: rgba(227, 30, 36, 0.08);
}
.navbar__lang-switch {
border: 1px solid var(--color-secondary);
color: var(--color-secondary);
font-weight: 600;
}
.navbar__lang-switch:hover {
color: var(--color-white);
background: var(--color-secondary);
}
/* ===== Dropdowns ===== */
.nav-item {
position: relative;
}
.nav-link {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.chevron {
font-size: 0.8rem;
transition: transform var(--transition-fast);
}
.chevron.rotate {
transform: rotate(180deg);
}
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
margin-top: 0;
inset-inline-start: 0;
min-width: 220px;
background: var(--color-white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 0.5rem 0;
z-index: 1200;
}
/* Invisible hover-bridge: extends the dropdown's hoverable hit area up
to (and slightly past) the trigger, so the pointer never crosses a
non-descendant element while moving from the link into the menu. */
.dropdown-menu::before {
content: '';
position: absolute;
top: -12px;
left: 0;
right: 0;
height: 12px;
}
.dropdown-item {
padding: 0;
}
.dropdown-item>a {
display: block;
padding: 0.5rem 1rem;
color: var(--color-text-gray);
}
.dropdown-item>a:hover {
background: rgba(27, 110, 194, 0.04);
color: var(--color-secondary);
}
.has-submenu {
position: relative;
}
.chevron-right {
margin-inline-start: auto;
transition: transform var(--transition-fast);
}
.submenu {
display: none;
position: absolute;
top: 0;
inset-inline-start: 100%;
margin-inline-start: 0;
min-width: 220px;
background: var(--color-white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 0.25rem 0;
}
/* Same hover-bridge treatment for the nested submenu: bridges the
trigger-to-panel boundary so entering the submenu doesn't close it
(or the parent dropdown) mid-hover. */
.submenu::before {
content: '';
position: absolute;
top: 0;
inset-inline-start: -12px;
width: 12px;
height: 100%;
}
.submenu a {
padding: 0.5rem 1rem;
display: block;
color: var(--color-text-gray);
}
.submenu a:hover {
background: rgba(227, 30, 36, 0.04);
color: var(--color-secondary);
}
/* State helpers (controlled by JS) */
.dropdown-open>.dropdown-menu {
display: block;
}
.submenu-open>.submenu {
display: block;
}
.disabled {
opacity: 0.5;
pointer-events: none;
}
/* Hamburger (hidden on desktop) */
.navbar__toggle {
display: none;
flex-direction: column;
justify-content: space-between;
width: 28px;
height: 20px;
background: none;
border: none;
cursor: pointer;
padding: 0;
flex-shrink: 0;
}
.navbar__toggle span {
display: block;
height: 2px;
background: var(--color-text-dark);
border-radius: 2px;
transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.navbar__toggle.open span:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.navbar__toggle.open span:nth-child(2) {
opacity: 0;
}
.navbar__toggle.open span:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
/* ============================================================
HERO + CAROUSEL
============================================================ */
.hero {
position: relative;
min-height: 90vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 900px) {
.hero {
min-height: 60vh;
}
}
/* ---- Carousel container ---- */
.carousel {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* ---- Individual slides (stack on top of each other) ---- */
.carousel__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.5s ease-in-out;
pointer-events: none;
}
.carousel__slide.active {
opacity: 1;
pointer-events: auto;
}
/* ---- Slide backgrounds (real photos, set inline per slide via
style="background-image: url(...)" in home.html) ---- */
.slide__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #0a1628;
/* Ken Burns zoom starts here; animates in on .active (see below) */
transform: scale(1);
transform-origin: center;
}
/* Slow zoom on the active slide only — restarts each time a slide
becomes active since toggling the class re-triggers the animation.
Duration is intentionally longer than the 5s auto-advance interval
so the zoom never visibly resets mid-slide, just keeps drifting. */
@keyframes heroKenBurns {
from { transform: scale(1); }
to { transform: scale(1.12); }
}
.carousel__slide.active .slide__bg {
animation: heroKenBurns 15s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
.carousel__slide.active .slide__bg {
animation: none;
}
}
/* Uniform dark wash + vignette over every slide so the CNT / Network
Technology / tagline text stays readable regardless of how bright
or busy the underlying photo is. */
.slide__bg::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(5, 10, 20, 0.62) 0%, rgba(5, 10, 20, 0.5) 45%, rgba(5, 10, 20, 0.72) 100%),
radial-gradient(ellipse 90% 70% at 50% 50%, transparent 40%, rgba(5, 10, 20, 0.35) 100%);
}
/* ---- Overlay text (always on top of the carousel) ---- */
.hero__content {
position: absolute;
z-index: 10;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 760px;
text-align: center;
padding: var(--space-lg) var(--space-md);
}
.hero__logo-line {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.5rem;
margin-bottom: var(--space-sm);
flex-wrap: wrap;
}
.hero__cnt {
font-size: clamp(3rem, 10vw, 6rem);
font-weight: 900;
color: var(--color-primary);
letter-spacing: 0.05em;
line-height: 1;
text-shadow: 0 4px 24px rgba(227, 30, 36, 0.4);
}
.hero__network {
font-size: clamp(1.4rem, 4vw, 2.6rem);
font-weight: 700;
color: var(--color-secondary);
letter-spacing: 0.04em;
line-height: 1;
text-shadow: 0 4px 20px rgba(27, 110, 194, 0.35);
}
.hero__tagline {
font-size: clamp(1.1rem, 3vw, 1.6rem);
font-weight: 600;
color: var(--color-white);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: var(--space-xs);
opacity: 0.95;
}
.hero__sub {
font-size: clamp(0.95rem, 2vw, 1.15rem);
color: rgba(255, 255, 255, 0.65);
font-weight: 400;
letter-spacing: 0.02em;
}
/* ---- Dot indicators ---- */
.carousel__dots {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.6rem;
z-index: 10;
}
.carousel__dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.35);
border: none;
cursor: pointer;
padding: 0;
transition: background var(--transition-base), transform var(--transition-base);
}
.carousel__dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
/* ---- Arrow buttons ---- */
.carousel__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.25);
background: rgba(0, 0, 0, 0.28);
color: var(--color-white);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background var(--transition-fast),
border-color var(--transition-fast),
transform var(--transition-fast);
}
.carousel__arrow svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.carousel__arrow--prev {
left: 1.5rem;
}
.carousel__arrow--next {
right: 1.5rem;
}
.carousel__arrow:hover,
.carousel__arrow:focus-visible {
background: rgba(227, 30, 36, 0.75);
border-color: var(--color-primary);
transform: translateY(-50%) scale(1.1);
outline: none;
}
.carousel__arrow:active {
transform: translateY(-50%) scale(0.96);
}
@media (max-width: 600px) {
.carousel__arrow {
width: 38px;
height: 38px;
}
.carousel__arrow svg {
width: 18px;
height: 18px;
}
.carousel__arrow--prev {
left: 0.75rem;
}
.carousel__arrow--next {
right: 0.75rem;
}
}
/* ============================================================
ABOUT SECTION
============================================================ */
.about {
background: var(--color-light-bg);
}
.section__label {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.section__title {
font-size: clamp(1.6rem, 4vw, 2.4rem);
font-weight: 800;
color: var(--color-secondary);
margin-bottom: var(--space-md);
line-height: 1.2;
}
/* Single-header variant used in About section */
.about .section__title {
font-size: clamp(1.8rem, 4vw, 2.6rem);
margin-bottom: var(--space-md);
}
.about__body {
font-size: 1.0625rem;
color: var(--color-text-gray);
max-width: 820px;
margin-bottom: calc(var(--space-lg) * 1.25);
line-height: 2;
letter-spacing: 0.01em;
}
/* Mission / Vision cards */
.mv-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-lg);
}
.mv-card {
background: var(--color-white);
border-radius: var(--radius-lg);
padding: calc(var(--space-md) * 1.5) calc(var(--space-md) * 1.5) calc(var(--space-md) * 1.75);
box-shadow: var(--shadow-sm);
border-top: 4px solid var(--color-secondary);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.mv-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.mv-card__icon {
width: 56px;
height: 56px;
margin-bottom: calc(var(--space-sm) * 1.25);
color: var(--color-secondary);
}
.mv-card__title {
font-size: 1.3rem;
font-weight: 700;
color: var(--color-navy-dark);
margin-bottom: 0.9rem;
}
.mv-card__text {
font-size: 1.125rem;
color: var(--color-text-gray);
line-height: 1.9;
}
/* ============================================================
FACT SHEETS SECTION (compact)
============================================================ */
.fact-sheets {
background: var(--color-navy-dark);
padding-block: calc(var(--space-lg) * 0.85);
}
.fact-sheets__title {
font-family: var(--font-stats);
font-size: clamp(0.9rem, 2vw, 1.15rem);
font-weight: 500;
color: #E5E5E5;
text-align: center;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: calc(var(--space-md) * 0.85);
}
.stats-grid {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: stretch;
}
.stat-item {
position: relative;
text-align: center;
flex: 1 1 0;
padding: var(--space-sm) var(--space-md);
}
/* Vertical divider: thin line before every stat except the first */
.stat-item+.stat-item::before {
content: '';
position: absolute;
left: 0;
top: 10%;
height: 80%;
width: 1px;
background: rgba(255, 255, 255, 0.15);
pointer-events: none;
}
.stat-item__number {
font-family: var(--font-stats);
font-size: clamp(1.9rem, 4vw, 2.6rem);
font-weight: 700;
color: #ffffff;
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.stat-item__label {
margin-top: 0.35rem;
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* ============================================================
FOOTER
============================================================ */
.footer {
background: var(--color-white);
padding-block: calc(var(--space-md) * 1.75);
}
.footer__inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-sm);
}
.footer__brand {
display: flex;
align-items: baseline;
gap: 0.4rem;
}
.footer__brand .logo-cnt {
font-size: 1.1rem;
}
.footer__brand-sub {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--color-secondary);
text-transform: uppercase;
}
.footer__copy {
font-size: 0.82rem;
color: var(--color-text-gray);
}
/* ============================================================
SCROLL REVEAL
============================================================ */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.reveal--visible {
opacity: 1;
transform: translateY(0);
}
/* Directional variants (set via data-reveal-class) for content that
should slide in from a side instead of fading up from below. */
.reveal-left {
transform: translateX(-32px);
}
.reveal-right {
transform: translateX(32px);
}
.reveal-left.reveal--visible,
.reveal-right.reveal--visible {
transform: translateX(0);
}
/* Scale-in variant: fades up slightly *and* scales from 0.95 to 1,
for showcase imagery rather than a plain slide. */
.reveal-scale {
transform: scale(0.95);
}
.reveal-scale.reveal--visible {
transform: scale(1);
}
/* Stagger delay helpers (applied via JS) */
.reveal--d1 {
transition-delay: 0ms;
}
.reveal--d2 {
transition-delay: 100ms;
}
.reveal--d3 {
transition-delay: 200ms;
}
.reveal--d4 {
transition-delay: 300ms;
}
.reveal--d5 {
transition-delay: 400ms;
}
/* ============================================================
STAGE 2 — STATIC PAGES
============================================================ */
.page-hero {
position: relative;
overflow: hidden;
padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
color: var(--color-white);
background: linear-gradient(120deg, var(--color-navy-dark), #12396b 58%, var(--color-secondary));
}
.page-hero::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 85% 20%, rgba(227, 30, 36, 0.32), transparent 36%);
}
.page-hero .container {
position: relative;
z-index: 1;
max-width: 900px;
margin-inline: auto;
}
.page-hero .section__label {
color: #ffb4b7;
}
.page-hero h1 {
max-width: 760px;
font-family: var(--font-display);
font-size: clamp(1.8rem, 3.6vw, 2.75rem);
line-height: 1.15;
margin-bottom: 0.6rem;
}
.page-hero p:not(.section__label) {
max-width: 640px;
color: rgba(255, 255, 255, 0.82);
font-size: 1.08rem;
}
.page-hero--clients,
.page-hero--partners {
background: linear-gradient(120deg, #10213c, #1B6EC2);
}
/* Partners hero: shorter and more proportional, with a rounded bottom
edge instead of a hard flat cutoff into the white section below */
/* .page-hero--partners {
padding-block: clamp(1.5rem, 3vw, 2.25rem);
border-radius: 0 0 40px 40px;
box-shadow: 0 24px 40px -28px rgba(13, 21, 36, 0.35);
} */
.page-hero--awards {
background: linear-gradient(120deg, #0D1524, #5b1e25 55%, #E31E24);
}
.page-hero--events {
background: linear-gradient(120deg, var(--color-navy-dark), #10396b 55%, var(--color-secondary));
}
.page-hero--join {
background: linear-gradient(120deg, #0D1524, #123a2c 55%, #1B6EC2);
}
.section-heading {
max-width: 720px;
margin-bottom: var(--space-lg);
}
.about-page__intro {
max-width: 820px;
margin-bottom: var(--space-lg);
}
.about-page__intro>p:last-child {
color: var(--color-text-gray);
font-size: 1.08rem;
line-height: 2;
}
.about-page__approach {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.approach-card {
padding: var(--space-md);
border: 1px solid rgba(27, 110, 194, 0.14);
border-radius: var(--radius-md);
background: var(--color-light-bg);
}
.approach-card__number {
display: block;
color: var(--color-primary);
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 800;
margin-bottom: var(--space-sm);
}
.approach-card h3 {
color: var(--color-navy-dark);
font-size: 1.1rem;
margin-bottom: 0.65rem;
}
.approach-card p {
color: var(--color-text-gray);
font-size: 0.94rem;
line-height: 1.8;
}
.about-page__mv {
margin-top: var(--space-lg);
}
.project-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-md);
}
.project-card {
overflow: hidden;
border-radius: var(--radius-md);
background: var(--color-white);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.project-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
/* ============================================================
PROJECT SHOWCASE (alternating photo/copy sections)
============================================================ */
.project-showcase,
.team-showcase,
.acc-showcase,
.ns-showcase,
.tp-showcase,
.ps-showcase,
.es-showcase {
position: relative;
background-color: var(--color-white);
background-image: repeating-linear-gradient(135deg,
rgba(13, 21, 36, 0.035) 0px,
rgba(13, 21, 36, 0.035) 1px,
transparent 1px,
transparent 16px);
}
.project-row {
padding-block: clamp(3rem, 6vw, 5rem);
}
.project-row__inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
gap: clamp(2rem, 5vw, 4rem);
}
.project-row--reverse .project-row__copy {
order: 2;
}
.project-row--reverse .project-row__media {
order: 1;
}
.project-row__copy h2 {
font-family: var(--font-display);
color: var(--color-navy-dark);
font-size: clamp(1.6rem, 3vw, 2.2rem);
line-height: 1.2;
margin-bottom: 1.1rem;
}
.project-row__copy p {
color: var(--color-text-gray);
font-size: 1.02rem;
line-height: 1.8;
margin-bottom: 0.9rem;
}
.project-row__copy p:last-child {
margin-bottom: 0;
}
.project-row__image {
aspect-ratio: 4 / 3;
border-radius: 20px;
box-shadow: var(--shadow-md);
}
/* Placeholder projects with no real photo yet: a branded gradient panel
that a real ![]()
can drop into later with no markup changes. */
.project-row__image--placeholder {
display: grid;
place-items: center;
padding: 1.5rem;
text-align: center;
color: rgba(255, 255, 255, 0.85);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.15rem;
letter-spacing: 0.02em;
}
.project-row__image--a {
background: linear-gradient(135deg, var(--color-navy-dark), var(--color-secondary) 70%);
}
.project-row__image--b {
background: linear-gradient(210deg, var(--color-secondary), var(--color-navy-dark) 60%, var(--color-primary));
}
/* Projects with two photos: shown side by side within the same media
column, each keeping the same rounded-corner/shadow treatment. */
.project-row__image-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.project-row__image-group .project-row__image {
aspect-ratio: 1 / 1;
}
/* Fill the square box completely (both source photos are tall portrait
shots), cropped from the bottom so the work being shown — the trench
and fiber cable, not empty sky at the top of the frame — stays fully
visible in both photos. Positioned absolutely (rather than relying on
percentage height) so it fills the aspect-ratio box correctly instead
of falling back to the image's intrinsic ratio. */
.project-row__image-group .project-row__image img {
position: absolute;
inset: 0;
object-fit: cover;
object-position: center bottom;
}
@media (max-width: 640px) {
.project-row__image-group {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.project-row__inner {
grid-template-columns: 1fr;
}
.project-row--reverse .project-row__copy,
.project-row--reverse .project-row__media {
order: initial;
}
}
/* ============================================================
OUR TEAM
============================================================ */
.team-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-lg) var(--space-md);
}
.team-member {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.team-member__photo {
width: 160px;
height: 160px;
border-radius: 50%;
overflow: hidden;
margin-bottom: 1.1rem;
background: var(--color-navy-dark);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.team-member:hover .team-member__photo {
transform: scale(1.05);
box-shadow: var(--shadow-md);
}
.team-member__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.team-member__name {
font-size: 1.05rem;
font-weight: 700;
color: var(--color-navy-dark);
margin-bottom: 0.25rem;
}
.team-member__role {
font-size: 0.88rem;
color: var(--color-text-gray);
}
@media (max-width: 900px) {
.team-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
.team-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
CONTACT
============================================================ */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
align-items: start;
}
.contact-info {
margin-block: var(--space-md) var(--space-sm);
}
.contact-info__item {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.4rem;
}
.contact-info__icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
color: var(--color-white);
font-size: 1.05rem;
box-shadow: var(--shadow-sm);
}
.contact-info__label {
font-size: 0.76rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-gray);
margin-bottom: 0.2rem;
}
.contact-info__value {
font-size: 1.02rem;
font-weight: 600;
color: var(--color-navy-dark);
}
.contact-info__value a {
color: inherit;
}
.contact-info__value a:hover {
color: var(--color-secondary);
}
.contact-map {
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.contact-map iframe {
width: 100%;
height: 320px;
border: 0;
display: block;
}
.contact-form-card {
background: var(--color-white);
border: 1px solid rgba(13, 21, 36, 0.06);
border-radius: 16px;
box-shadow: var(--shadow-sm);
padding: var(--space-lg);
}
.form-field {
position: relative;
margin-bottom: 1.4rem;
}
.form-field input,
.form-field textarea {
width: 100%;
padding: 0.9rem 1rem;
border: 1.5px solid rgba(13, 21, 36, 0.15);
border-radius: 8px;
font-family: var(--font-sans);
font-size: 0.98rem;
color: var(--color-text-dark);
background: var(--color-white);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-field textarea {
min-height: 130px;
resize: vertical;
}
.form-field input:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--color-secondary);
box-shadow: 0 0 0 3px rgba(27, 110, 194, 0.14);
}
.form-field label {
position: absolute;
left: 1rem;
top: 0.9rem;
font-size: 0.98rem;
color: var(--color-text-gray);
background: var(--color-white);
padding-inline: 0.3rem;
pointer-events: none;
transition: top var(--transition-fast), font-size var(--transition-fast), color var(--transition-fast);
}
.form-field input:focus+label,
.form-field input:not(:placeholder-shown)+label,
.form-field textarea:focus+label,
.form-field textarea:not(:placeholder-shown)+label {
top: -0.55rem;
left: 0.75rem;
font-size: 0.76rem;
color: var(--color-secondary);
}
.form-field__error {
display: none;
color: var(--color-primary);
font-size: 0.78rem;
margin-top: 0.4rem;
}
.form-field.has-error input,
.form-field.has-error textarea {
border-color: var(--color-primary);
}
.form-field.has-error input:focus,
.form-field.has-error textarea:focus {
box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.14);
}
.form-field.has-error .form-field__error {
display: block;
}
.contact-form__submit {
width: 100%;
padding: 0.95rem 1.5rem;
border: none;
border-radius: 8px;
background: var(--color-primary);
color: var(--color-white);
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.contact-form__submit:hover {
background: #c41a1f;
transform: scale(1.02);
box-shadow: var(--shadow-sm);
}
.contact-form__submit:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.contact-form--fading {
opacity: 0;
transform: translateY(-8px);
transition: opacity 300ms ease, transform 300ms ease;
}
.contact-success {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.85rem;
padding: 2.5rem 1rem;
opacity: 0;
transform: translateY(12px);
transition: opacity 500ms ease, transform 500ms ease;
}
.contact-success.is-visible {
opacity: 1;
transform: translateY(0);
}
.contact-success__icon {
width: 64px;
height: 64px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--color-secondary);
color: var(--color-white);
font-size: 1.6rem;
}
.contact-success p {
font-size: 1.05rem;
font-weight: 600;
color: var(--color-navy-dark);
}
@media (max-width: 900px) {
.contact-grid {
grid-template-columns: 1fr;
}
}
.asset-frame {
position: relative;
display: grid;
place-items: center;
overflow: hidden;
color: rgba(255, 255, 255, 0.88);
background: linear-gradient(135deg, var(--color-navy-dark), var(--color-secondary) 65%, var(--color-primary));
}
.asset-frame::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(125deg, transparent 30%, rgba(255, 255, 255, 0.13), transparent 70%);
}
.asset-frame:has(img:not([hidden])) .asset-frame__fallback {
display: none;
}
.asset-frame__fallback {
grid-area: 1 / 1;
position: relative;
z-index: 0;
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 800;
letter-spacing: 0.12em;
}
.asset-frame img {
grid-area: 1 / 1;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
background: var(--color-white);
}
.project-card__media {
aspect-ratio: 16 / 9;
}
.project-card__body {
padding: var(--space-md);
}
.project-card h3,
.service-card h3 {
color: var(--color-navy-dark);
font-size: 1.15rem;
margin-bottom: 0.55rem;
}
.project-card p,
.service-card p {
color: var(--color-text-gray);
font-size: 0.94rem;
line-height: 1.8;
}
.logo-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--space-sm);
}
.logo-card {
min-height: 128px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: var(--space-sm);
border: 1px solid rgba(13, 21, 36, 0.08);
border-radius: var(--radius-md);
background: var(--color-light-bg);
color: var(--color-text-gray);
font-size: 0.78rem;
font-weight: 600;
text-align: center;
transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.logo-card__media {
width: 160px;
max-width: 100%;
height: 80px;
background: linear-gradient(135deg, #edf4fc, #dbeafa);
}
.logo-card__media img {
object-fit: contain;
filter: grayscale(100%);
transition: filter var(--transition-base);
}
.logo-card:hover .logo-card__media img {
filter: grayscale(0%);
}
.logo-card--link:hover {
transform: scale(1.03);
box-shadow: var(--shadow-sm);
border-color: rgba(27, 110, 194, 0.3);
}
/* Partner & client cards: richer, unboxed logo presentation */
.logo-grid.logo-grid--partners,
.logo-grid.logo-grid--clients {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-md);
}
@media (max-width: 900px) {
.logo-grid.logo-grid--partners,
.logo-grid.logo-grid--clients {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.logo-grid.logo-grid--partners,
.logo-grid.logo-grid--clients {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 420px) {
.logo-grid.logo-grid--partners,
.logo-grid.logo-grid--clients {
grid-template-columns: 1fr;
}
}
.logo-grid--partners .logo-card,
.logo-grid--clients .logo-card {
gap: 1rem;
padding: var(--space-md) var(--space-sm);
border-radius: 16px;
border-color: rgba(13, 21, 36, 0.06);
background: linear-gradient(180deg, var(--color-white), var(--color-light-bg));
box-shadow: var(--shadow-sm);
transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.logo-grid--partners .logo-card:hover,
.logo-grid--clients .logo-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: rgba(27, 110, 194, 0.25);
}
/* No boxed container — logo/placeholder sits directly on the card */
.logo-grid--partners .logo-card__media,
.logo-grid--clients .logo-card__media {
width: 100%;
height: 88px;
background: transparent;
padding: 0;
overflow: visible;
transition: transform var(--transition-base);
}
.logo-grid--partners .logo-card:hover .logo-card__media,
.logo-grid--clients .logo-card:hover .logo-card__media {
transform: scale(1.05);
}
.logo-grid--partners .asset-frame::after,
.logo-grid--clients .asset-frame::after {
display: none;
}
/* Real logos: true color, natural size, no filter */
.logo-grid--partners .logo-card__media img,
.logo-grid--clients .logo-card__media img {
width: auto;
height: 64px;
max-width: 100%;
object-fit: contain;
filter: none;
background: transparent;
}
/* Placeholder logos: gradient badge instead of a flat rectangle */
.logo-grid--partners .asset-frame__fallback,
.logo-grid--clients .asset-frame__fallback {
width: 72px;
height: 72px;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
color: var(--color-white);
box-shadow: var(--shadow-sm);
font-size: 1rem;
letter-spacing: 0.08em;
}
/* ============================================================
AWARDS (featured showcase — one or more entries)
============================================================ */
.awards-showcase {
position: relative;
background-color: var(--color-white);
background-image: repeating-linear-gradient(135deg,
rgba(13, 21, 36, 0.035) 0px,
rgba(13, 21, 36, 0.035) 1px,
transparent 1px,
transparent 16px);
padding-block: clamp(3rem, 6vw, 5rem);
}
.award-card {
display: grid;
grid-template-columns: 1.1fr 1fr;
align-items: center;
gap: clamp(2rem, 5vw, 3.5rem);
background: var(--color-white);
border: 1px solid rgba(13, 21, 36, 0.06);
border-radius: 20px;
box-shadow: var(--shadow-md);
padding: clamp(1.5rem, 4vw, 3rem);
}
.award-card+.award-card {
margin-top: var(--space-lg);
}
.award-card__image {
aspect-ratio: 4 / 3;
border-radius: 16px;
box-shadow: var(--shadow-sm);
transition: transform var(--transition-base);
}
.award-card:hover .award-card__image {
transform: scale(1.03);
}
.award-card__badge {
display: inline-grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(227, 30, 36, 0.1);
color: var(--color-primary);
font-size: 1.4rem;
margin-bottom: 1rem;
}
.award-card__title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.1rem);
font-weight: 800;
line-height: 1.2;
color: var(--color-secondary);
margin-bottom: 0.75rem;
}
.award-card__accent {
display: block;
width: 64px;
height: 4px;
border-radius: 2px;
margin-bottom: 1.25rem;
background: linear-gradient(90deg, #d4af37, #f5d67d);
}
.award-card__note {
max-width: 46ch;
font-size: 1.02rem;
line-height: 1.85;
color: var(--color-text-gray);
}
@media (max-width: 860px) {
.award-card {
grid-template-columns: 1fr;
}
}
/* ============================================================
EVENTS
============================================================ */
.events-showcase {
position: relative;
background-color: var(--color-white);
background-image: repeating-linear-gradient(135deg,
rgba(13, 21, 36, 0.035) 0px,
rgba(13, 21, 36, 0.035) 1px,
transparent 1px,
transparent 16px);
padding-block: clamp(3rem, 6vw, 5rem);
}
.event-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-md);
}
@media (max-width: 900px) {
.event-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.event-grid {
grid-template-columns: 1fr;
}
}
.event-card {
overflow: hidden;
background: var(--color-white);
border: 1px solid rgba(13, 21, 36, 0.06);
border-radius: 20px;
box-shadow: var(--shadow-md);
cursor: pointer;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.event-card:hover,
.event-card:focus-visible {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.event-card:focus-visible {
outline: 2px solid var(--color-secondary);
outline-offset: 2px;
}
.event-card__cover {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: linear-gradient(135deg, var(--color-navy-dark), var(--color-secondary) 65%, var(--color-primary));
}
.event-card__cover img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.event-card:hover .event-card__cover img {
transform: scale(1.05);
}
.event-card__cover-placeholder {
display: grid;
place-items: center;
width: 100%;
height: 100%;
color: rgba(255, 255, 255, 0.85);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 0.12em;
}
.event-card__badge {
position: absolute;
bottom: 0.75rem;
right: 0.75rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: rgba(13, 21, 36, 0.65);
backdrop-filter: blur(4px);
color: var(--color-white);
font-size: 0.8rem;
font-weight: 600;
}
.event-card__body {
padding: clamp(1.1rem, 3vw, 1.5rem);
}
.event-card__header {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.6rem;
margin-bottom: 0.6rem;
}
.event-card__title {
font-family: var(--font-display);
color: var(--color-navy-dark);
font-size: 1.2rem;
line-height: 1.3;
}
.event-card__date {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.7rem;
border-radius: 999px;
background: rgba(27, 110, 194, 0.1);
color: var(--color-secondary);
font-size: 0.78rem;
font-weight: 600;
}
.event-card__description {
color: var(--color-text-gray);
font-size: 0.95rem;
line-height: 1.75;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.events-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: clamp(3rem, 8vw, 5rem) var(--space-md);
text-align: center;
color: var(--color-text-gray);
background: var(--color-light-bg);
border: 1px dashed rgba(13, 21, 36, 0.14);
border-radius: 20px;
}
.events-empty i {
font-size: 2.5rem;
color: var(--color-secondary);
}
.events-empty p {
font-size: 1.1rem;
font-weight: 500;
}
/* ============================================================
EVENT LIGHTBOX
============================================================ */
.lightbox {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
}
.lightbox.is-open {
display: flex;
}
.lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(8, 12, 20, 0.9);
opacity: 0;
transition: opacity 0.25s ease;
}
.lightbox.is-visible .lightbox__backdrop {
opacity: 1;
}
.lightbox__dialog {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
width: min(1000px, 94vw);
max-height: 92vh;
max-height: 92dvh;
transform: scale(0.94);
opacity: 0;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.lightbox__content {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
/* A tall/portrait photo plus caption plus thumbnail strip can add up
to more than fits on a short mobile viewport — let this inner
wrapper scroll in that case. It's a flex child of a flex column
(.lightbox__dialog), so it needs min-height: 0 to actually be
allowed to shrink below its content's natural size and scroll,
rather than just growing the dialog past the viewport. The close/
nav buttons live outside this wrapper (see .lightbox__dialog's
markup) so they stay reachable at a fixed spot regardless of
scroll position. The page behind the lightbox stays locked via
body.lightbox-open below — unchanged. */
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.lightbox.is-visible .lightbox__dialog {
transform: scale(1);
opacity: 1;
}
.lightbox__close {
position: absolute;
top: -0.5rem;
right: -0.5rem;
z-index: 2;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: rgba(13, 21, 36, 0.7);
color: var(--color-white);
font-size: 1.1rem;
cursor: pointer;
transition: background var(--transition-fast);
}
.lightbox__close:hover {
background: var(--color-primary);
}
.lightbox__nav {
position: absolute;
top: 40%;
transform: translateY(-50%);
z-index: 2;
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: rgba(13, 21, 36, 0.55);
color: var(--color-white);
font-size: 1.2rem;
cursor: pointer;
transition: background var(--transition-fast), transform var(--transition-fast);
}
.lightbox__nav:hover {
background: var(--color-primary);
}
.lightbox__nav--prev {
left: -1.5rem;
}
.lightbox__nav--next {
right: -1.5rem;
}
.lightbox__stage {
position: relative;
width: 100%;
max-height: 62vh;
display: grid;
place-items: center;
border-radius: 16px;
overflow: hidden;
background: rgba(0, 0, 0, 0.25);
}
.lightbox__image {
max-width: 100%;
max-height: 62vh;
object-fit: contain;
border-radius: 16px;
box-shadow: var(--shadow-lg);
opacity: 0;
transition: opacity 0.2s ease;
}
.lightbox__image.is-loaded {
opacity: 1;
}
.lightbox__caption {
width: 100%;
padding: 1rem 0.25rem 0.5rem;
text-align: center;
color: var(--color-white);
}
.lightbox__title {
font-family: var(--font-display);
font-size: 1.2rem;
margin-bottom: 0.35rem;
}
.lightbox__description {
max-width: 60ch;
margin: 0 auto 0.4rem;
color: rgba(255, 255, 255, 0.78);
font-size: 0.95rem;
line-height: 1.7;
}
.lightbox__date {
display: inline-flex;
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.6);
font-weight: 600;
}
.lightbox__thumbs {
display: flex;
gap: 0.6rem;
margin-top: 0.75rem;
padding-bottom: 0.25rem;
max-width: 100%;
overflow-x: auto;
}
.lightbox__thumb {
flex: 0 0 auto;
width: 60px;
height: 60px;
border-radius: 10px;
overflow: hidden;
border: 2px solid transparent;
cursor: pointer;
opacity: 0.6;
transition: opacity var(--transition-fast), border-color var(--transition-fast);
padding: 0;
background: none;
}
.lightbox__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lightbox__thumb:hover {
opacity: 0.85;
}
.lightbox__thumb.is-active {
opacity: 1;
border-color: var(--color-white);
}
body.lightbox-open {
overflow: hidden;
}
@media (max-width: 640px) {
.lightbox__nav {
width: 40px;
height: 40px;
font-size: 1rem;
}
.lightbox__nav--prev {
left: 0.35rem;
}
.lightbox__nav--next {
right: 0.35rem;
}
.lightbox__close {
top: 0.5rem;
right: 0.5rem;
background: rgba(13, 21, 36, 0.85);
}
.lightbox__dialog {
width: 100vw;
max-height: 100vh;
height: 100vh;
/* dvh accounts for mobile browser chrome (address bar showing/
hiding) that plain vh doesn't — without it, "100vh" can be
taller than what's actually visible, pushing content past the
real viewport with no way to reach it. Browsers that don't
support dvh yet just ignore this line and keep the vh value
above. */
max-height: 100dvh;
height: 100dvh;
justify-content: center;
padding: 3.5rem 0.75rem 1rem;
}
.lightbox__stage {
max-height: 48vh;
}
.lightbox__image {
max-height: 48vh;
}
}
/* ============================================================
ACCORDION PRODUCT CARDS (Cabling and Data Centers, etc.)
============================================================ */
.acc-card {
background: var(--color-white);
border: 1px solid rgba(13, 21, 36, 0.06);
border-radius: 16px;
box-shadow: var(--shadow-sm);
padding: clamp(1.25rem, 3vw, 2rem);
transition: box-shadow var(--transition-base);
}
.acc-card:hover {
box-shadow: var(--shadow-md);
}
.acc-card+.acc-card {
margin-top: var(--space-md);
}
.acc-card__header {
display: flex;
align-items: center;
gap: 1.5rem;
}
.acc-card__thumb {
flex-shrink: 0;
width: 140px;
height: 140px;
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.acc-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.acc-card__intro {
flex: 1;
min-width: 0;
}
.acc-card__title {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 800;
color: var(--color-navy-dark);
margin-bottom: 0.2rem;
}
.acc-card__subtitle {
font-size: 0.88rem;
font-weight: 700;
color: var(--color-secondary);
margin-bottom: 0.4rem;
}
.acc-card__teaser {
color: var(--color-text-gray);
font-size: 0.95rem;
line-height: 1.6;
}
.acc-card__toggle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.25rem;
padding: 0.55rem 1.1rem;
border: 1.5px solid var(--color-secondary);
border-radius: 999px;
background: transparent;
color: var(--color-secondary);
font-family: var(--font-sans);
font-weight: 700;
font-size: 0.88rem;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.acc-card__toggle:hover {
background: var(--color-secondary);
color: var(--color-white);
}
.acc-card__toggle-label--open {
display: none;
}
.acc-card__toggle[aria-expanded="true"] .acc-card__toggle-label--closed {
display: none;
}
.acc-card__toggle[aria-expanded="true"] .acc-card__toggle-label--open {
display: inline;
}
.acc-card__toggle i {
font-size: 0.78rem;
transition: transform 300ms ease;
}
.acc-card__toggle[aria-expanded="true"] i {
transform: rotate(180deg);
}
.acc-card__panel {
display: grid;
grid-template-rows: minmax(0, 0fr);
transition: grid-template-rows 300ms ease;
}
.acc-card__panel>.acc-card__panel-inner {
overflow: hidden;
}
.acc-card__panel.is-open {
grid-template-rows: minmax(0, 1fr);
}
.acc-card__panel-inner {
padding-top: 1.5rem;
margin-top: 1.5rem;
border-top: 1px solid rgba(13, 21, 36, 0.08);
}
.acc-card__panel-inner p {
color: var(--color-text-gray);
font-size: 0.98rem;
line-height: 1.8;
margin-bottom: 0.9rem;
}
.acc-card__specs {
display: grid;
gap: 0.5rem;
margin-bottom: 1.25rem;
color: var(--color-text-gray);
font-size: 0.95rem;
}
.acc-card__specs li::before {
content: '•';
color: var(--color-primary);
margin-inline-end: 0.5rem;
}
.acc-card__gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.acc-card__gallery-item {
aspect-ratio: 4 / 3;
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.acc-card__gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 600px) {
.acc-card__header {
flex-direction: column;
align-items: flex-start;
}
.acc-card__thumb {
width: 100%;
height: 180px;
}
.acc-card__gallery {
grid-template-columns: 1fr;
}
}
/* ============================================================
NETWORK SECURITY PRODUCT CARDS
============================================================ */
.ns-card {
display: grid;
grid-template-columns: 1.15fr 1fr;
align-items: center;
gap: clamp(2rem, 5vw, 3rem);
background: var(--color-white);
border-radius: 16px;
border-inline-start: 4px solid var(--color-primary);
box-shadow: var(--shadow-sm);
padding: clamp(1.5rem, 3.5vw, 2.5rem);
transition: box-shadow var(--transition-base);
}
.ns-card:hover {
box-shadow: var(--shadow-md);
}
.ns-card+.ns-card {
margin-top: var(--space-md);
}
.ns-card__icon {
display: inline-grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(227, 30, 36, 0.1);
color: var(--color-primary);
font-size: 1.3rem;
margin-bottom: 1rem;
}
.ns-card__title {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 800;
color: var(--color-navy-dark);
margin-bottom: 0.35rem;
}
.ns-card__subtitle {
font-size: 0.95rem;
font-weight: 700;
color: var(--color-secondary);
margin-bottom: 0.9rem;
}
.ns-card__desc {
color: var(--color-text-gray);
font-size: 0.98rem;
line-height: 1.8;
margin-bottom: 1.15rem;
}
.ns-card__features-label {
font-weight: 700;
color: var(--color-navy-dark);
font-size: 0.92rem;
margin-bottom: 0.65rem;
}
.ns-card__features {
display: grid;
gap: 0.5rem;
}
.ns-card__features li {
display: flex;
align-items: center;
gap: 0.6rem;
color: var(--color-text-gray);
font-size: 0.92rem;
}
.ns-card__features i {
color: var(--color-secondary);
font-size: 0.82rem;
}
.ns-card__image {
aspect-ratio: 4 / 3;
border-radius: 16px;
box-shadow: var(--shadow-md);
}
@media (max-width: 860px) {
.ns-card {
grid-template-columns: 1fr;
}
}
/* ============================================================
TRIPLE PLAY
============================================================ */
.tp-intro {
display: grid;
grid-template-columns: 1.1fr 1fr;
align-items: center;
gap: clamp(2rem, 5vw, 3.5rem);
padding-block: clamp(2rem, 5vw, 3.5rem);
}
.tp-intro__title {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
font-weight: 800;
color: var(--color-navy-dark);
margin-bottom: 1rem;
}
.tp-intro__copy p {
color: var(--color-text-gray);
font-size: 1.02rem;
line-height: 1.85;
margin-bottom: 1rem;
}
.tp-intro__copy p:last-child {
margin-bottom: 0;
}
.tp-collage {
position: relative;
aspect-ratio: 1 / 1;
}
.tp-collage__img {
position: absolute;
width: 62%;
aspect-ratio: 4 / 3;
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow-lg);
background: var(--color-light-bg);
}
.tp-collage__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tp-collage__img--back {
top: 0;
right: 0;
z-index: 1;
animation: tp-float 7s ease-in-out infinite;
animation-delay: 0.4s;
}
.tp-collage__img--front {
bottom: 0;
left: 0;
z-index: 2;
animation: tp-float 6s ease-in-out infinite;
}
@keyframes tp-float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.tp-cards {
padding-top: var(--space-sm);
}
.tp-card {
background: var(--color-white);
border-inline-start: 4px solid var(--color-primary);
border-radius: 16px;
box-shadow: var(--shadow-sm);
padding: clamp(1.5rem, 3.5vw, 2.5rem);
transition: box-shadow var(--transition-base);
}
.tp-card:hover {
box-shadow: var(--shadow-md);
}
.tp-card+.tp-card {
margin-top: var(--space-md);
}
.tp-card__title {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 800;
color: var(--color-navy-dark);
margin-bottom: 0.75rem;
}
.tp-card__desc {
color: var(--color-text-gray);
font-size: 0.98rem;
line-height: 1.8;
}
@media (max-width: 860px) {
.tp-intro {
grid-template-columns: 1fr;
}
.tp-collage {
order: -1;
max-width: 420px;
margin-inline: auto;
}
}
/* Small phones: the diagonal offset has too little room to read clearly,
so fall back to two full-width images stacked in normal flow. */
@media (max-width: 480px) {
.tp-collage {
position: static;
aspect-ratio: auto;
display: flex;
flex-direction: column;
gap: 1rem;
max-width: none;
}
.tp-collage__img {
position: static;
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.tp-collage__img--back,
.tp-collage__img--front {
animation: none;
}
}
/* ============================================================
PHYSICAL SECURITY
============================================================ */
.ps-badges {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: clamp(1.5rem, 5vw, 4rem);
padding-block: clamp(1.5rem, 4vw, 2.5rem);
}
.ps-badge {
display: flex;
align-items: center;
gap: 0.6rem;
color: var(--color-navy-dark);
font-weight: 700;
}
.ps-badge i {
color: var(--color-primary);
font-size: 1.3rem;
}
.ps-badge span {
text-decoration: underline;
text-underline-offset: 3px;
}
.ps-cards {
padding-top: var(--space-sm);
}
.ps-card {
background: var(--color-white);
border-inline-start: 4px solid var(--color-primary);
border-radius: 16px;
box-shadow: var(--shadow-sm);
padding: clamp(1.25rem, 3vw, 2rem);
transition: box-shadow var(--transition-base);
}
.ps-card:hover {
box-shadow: var(--shadow-md);
}
.ps-card+.ps-card {
margin-top: var(--space-md);
}
.ps-card__header {
display: flex;
align-items: center;
gap: 1.25rem;
}
.ps-card__icon {
flex-shrink: 0;
display: inline-grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(227, 30, 36, 0.1);
color: var(--color-primary);
font-size: 1.3rem;
}
.ps-card__intro {
flex: 1;
min-width: 0;
}
.ps-card__title {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 800;
color: var(--color-navy-dark);
margin-bottom: 0.2rem;
}
.ps-card__teaser {
color: var(--color-text-gray);
font-size: 0.95rem;
line-height: 1.6;
}
.ps-card__toggle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.25rem;
padding: 0.55rem 1.1rem;
border: 1.5px solid var(--color-secondary);
border-radius: 999px;
background: transparent;
color: var(--color-secondary);
font-family: var(--font-sans);
font-weight: 700;
font-size: 0.88rem;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.ps-card__toggle:hover {
background: var(--color-secondary);
color: var(--color-white);
}
.ps-card__toggle-label--open {
display: none;
}
.ps-card__toggle[aria-expanded="true"] .ps-card__toggle-label--closed {
display: none;
}
.ps-card__toggle[aria-expanded="true"] .ps-card__toggle-label--open {
display: inline;
}
.ps-card__toggle i {
font-size: 0.78rem;
transition: transform 300ms ease;
}
.ps-card__toggle[aria-expanded="true"] i {
transform: rotate(180deg);
}
.ps-card__panel {
display: grid;
grid-template-rows: minmax(0, 0fr);
transition: grid-template-rows 300ms ease;
}
.ps-card__panel>.ps-card__panel-inner {
overflow: hidden;
}
.ps-card__panel.is-open {
grid-template-rows: minmax(0, 1fr);
}
.ps-card__panel-inner {
padding-top: 1.5rem;
margin-top: 1.5rem;
border-top: 1px solid rgba(13, 21, 36, 0.08);
}
.ps-card__panel-inner>p {
color: var(--color-text-gray);
font-size: 0.98rem;
line-height: 1.8;
margin-bottom: 1.1rem;
}
.ps-card__features-label {
font-weight: 700;
color: var(--color-navy-dark);
font-size: 0.92rem;
margin-bottom: 0.65rem;
}
.ps-card__features {
display: grid;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.ps-card__features li {
display: flex;
align-items: center;
gap: 0.6rem;
color: var(--color-text-gray);
font-size: 0.92rem;
}
.ps-card__features i {
color: var(--color-secondary);
font-size: 0.82rem;
}
.ps-card__image {
aspect-ratio: 16 / 9;
max-width: 420px;
margin-inline: auto;
border-radius: 12px;
box-shadow: var(--shadow-sm);
}
/* Some product photos are product-shot flat-lays with their own padding
baked in rather than a full-bleed scene, at an aspect ratio far from
16:9 — cropping (or even contain-fitting into the same wide box)
leaves the subject tiny in a sea of empty space. Instead, drop the
fixed box and size to the image's own natural proportions, capped by
a max-height, centered on a light background with breathing room. */
.ps-card__image--contain {
aspect-ratio: auto;
height: auto;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
background: var(--color-light-bg);
}
.ps-card__image--contain img {
position: static;
width: auto;
height: auto;
max-width: 100%;
max-height: 320px;
object-fit: contain;
}
@media (max-width: 600px) {
.ps-card__header {
flex-direction: column;
align-items: flex-start;
}
}
/* ============================================================
EXECUTION SERVICES
============================================================ */
.es-layout {
display: grid;
grid-template-columns: 1.15fr 1fr;
align-items: stretch;
gap: clamp(2rem, 5vw, 3.5rem);
padding-block: clamp(2rem, 5vw, 3.5rem);
}
.es-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.5rem, 3vw, 2.25rem);
align-content: start;
}
.es-block {
padding: 1.1rem;
border-radius: 12px;
border-inline-start: 3px solid transparent;
transition: border-color var(--transition-base), background var(--transition-base);
}
.es-block:hover {
border-inline-start-color: var(--color-secondary);
background: var(--color-light-bg);
}
.es-block__badge {
display: inline-grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: rgba(227, 30, 36, 0.1);
color: var(--color-primary);
font-size: 1.15rem;
margin-bottom: 0.9rem;
}
.es-block__title {
font-family: var(--font-display);
font-size: 1.08rem;
font-weight: 800;
color: var(--color-navy-dark);
margin-bottom: 0.5rem;
line-height: 1.3;
}
.es-block__desc {
color: var(--color-text-gray);
font-size: 0.92rem;
line-height: 1.75;
}
.es-media__image {
height: 100%;
min-height: 340px;
border-radius: 16px;
box-shadow: var(--shadow-md);
transition: transform var(--transition-base);
}
.es-media:hover .es-media__image {
transform: scale(1.03);
}
@media (max-width: 900px) {
.es-layout {
grid-template-columns: 1fr;
}
.es-grid {
grid-template-columns: 1fr;
}
.es-media {
order: -1;
}
.es-media__image {
min-height: 260px;
}
}
.service-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-md);
}
.service-card {
overflow: hidden;
border: 1px solid rgba(13, 21, 36, 0.08);
border-radius: var(--radius-md);
background: var(--color-white);
box-shadow: var(--shadow-sm);
}
.service-card__media {
aspect-ratio: 21 / 9;
}
.service-card__body {
padding: var(--space-md);
}
.service-card__toggle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: var(--space-sm);
border: 0;
padding: 0;
background: transparent;
color: var(--color-secondary);
font: inherit;
font-weight: 700;
cursor: pointer;
}
.service-card__toggle span {
font-size: 1.2rem;
transition: transform 300ms ease;
}
.service-card__toggle[aria-expanded="true"] span {
transform: rotate(45deg);
}
.service-card__details {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 300ms ease;
}
.service-card__details>div {
overflow: hidden;
}
.service-card__details ul {
margin-top: var(--space-sm);
display: grid;
gap: 0.35rem;
color: var(--color-text-gray);
font-size: 0.92rem;
}
.service-card__details li::before {
content: '•';
color: var(--color-primary);
margin-inline-end: 0.5rem;
}
.service-card__details.is-open {
grid-template-rows: 1fr;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 900px) {
:root {
--navbar-height: 90px;
}
.navbar__logo .logo-img {
max-height: 65px;
}
.navbar__toggle {
display: flex;
}
.navbar__nav {
display: none;
position: absolute;
top: var(--navbar-height);
left: 0;
right: 0;
background: var(--color-white);
border-bottom: 2px solid var(--color-primary);
box-shadow: var(--shadow-md);
padding: var(--space-sm);
}
.navbar__nav.open {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.navbar__list {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
width: 100%;
}
.navbar__link {
width: 100%;
padding: 0.65rem var(--space-sm);
}
.navbar__linkedin {
margin-inline-start: 0;
margin-top: 0.35rem;
padding: 0;
}
.footer__inner {
flex-direction: column;
align-items: flex-start;
}
.about-page__approach,
.project-grid,
.service-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.logo-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stats-grid {
flex-wrap: wrap;
gap: var(--space-md) var(--space-lg);
}
.stat-item {
flex: 1 1 130px;
min-width: 130px;
}
/* Hide dividers when items wrap onto new rows */
.stat-item+.stat-item::before {
display: none;
}
}
@media (max-width: 480px) {
.hero__logo-line {
flex-direction: column;
gap: 0.25rem;
}
.mv-grid {
grid-template-columns: 1fr;
}
.about-page__approach,
.project-grid,
.service-grid,
.logo-grid {
grid-template-columns: 1fr;
}
.logo-card__media {
width: 160px;
}
}
/* Move the first Network Security card down */
.ns-showcase {
padding-top: 60px !important;
}
.acc-showcase {
padding-top: 60px !important;
}
/* =========================================
PAGE LOAD FADE ANIMATION
========================================= */
#main-content {
opacity: 0;
animation: pageFade 1s ease-out forwards;
}
@keyframes pageFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ============================================================
JOIN CNT (open positions + chat widget)
============================================================ */
.jobs-showcase {
position: relative;
background-color: var(--color-white);
background-image: repeating-linear-gradient(135deg,
rgba(13, 21, 36, 0.035) 0px,
rgba(13, 21, 36, 0.035) 1px,
transparent 1px,
transparent 16px);
padding-block: clamp(3rem, 6vw, 5rem);
}
.job-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-md);
}
@media (max-width: 760px) {
.job-grid {
grid-template-columns: 1fr;
}
}
.job-card {
background: var(--color-white);
border: 1px solid rgba(13, 21, 36, 0.06);
border-radius: 20px;
box-shadow: var(--shadow-md);
padding: clamp(1.4rem, 3vw, 2rem);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.job-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.job-card__header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.6rem;
}
.job-card__title {
font-family: var(--font-display);
color: var(--color-navy-dark);
font-size: 1.2rem;
line-height: 1.3;
}
.job-card__badge {
flex-shrink: 0;
padding: 0.3rem 0.75rem;
border-radius: 999px;
background: rgba(227, 30, 36, 0.1);
color: var(--color-primary);
font-size: 0.78rem;
font-weight: 700;
}
.job-card__meta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 0.85rem;
color: var(--color-secondary);
font-size: 0.85rem;
font-weight: 600;
}
.job-card__meta i {
margin-inline-end: 0.35rem;
}
.job-card__description {
color: var(--color-text-gray);
font-size: 0.95rem;
line-height: 1.75;
margin-bottom: 1rem;
}
.job-card__apply {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 1.1rem;
border: none;
border-radius: 999px;
background: var(--color-primary);
color: var(--color-white);
font-family: var(--font-sans);
font-size: 0.88rem;
font-weight: 700;
cursor: pointer;
transition: background var(--transition-fast), transform var(--transition-fast);
}
.job-card__apply:hover {
background: #c41a1f;
transform: translateX(2px);
}
.job-card__apply i {
font-size: 0.8rem;
transition: transform var(--transition-fast);
}
.job-card__apply:hover i {
transform: translateX(3px);
}
.general-apply {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
margin-top: var(--space-lg);
padding: clamp(1.5rem, 4vw, 2.25rem);
border-radius: 20px;
background: linear-gradient(120deg, var(--color-navy-dark), var(--color-secondary));
color: var(--color-white);
}
.general-apply__text h3 {
font-family: var(--font-display);
font-size: 1.3rem;
margin-bottom: 0.4rem;
}
.general-apply__text p {
color: rgba(255, 255, 255, 0.8);
font-size: 0.95rem;
max-width: 46ch;
}
.general-apply__button {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.8rem 1.5rem;
border: none;
border-radius: 999px;
background: var(--color-white);
color: var(--color-navy-dark);
font-family: var(--font-sans);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.general-apply__button:hover {
transform: scale(1.03);
box-shadow: var(--shadow-md);
}
.jobs-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: clamp(3rem, 8vw, 5rem) var(--space-md);
text-align: center;
color: var(--color-text-gray);
background: var(--color-light-bg);
border: 1px dashed rgba(13, 21, 36, 0.14);
border-radius: 20px;
}
.jobs-empty i {
font-size: 2.5rem;
color: var(--color-secondary);
}
.jobs-empty p {
font-size: 1.1rem;
font-weight: 500;
}
/* ---- Apply modal ---- */
.apply-modal {
position: fixed;
inset: 0;
z-index: 1600;
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
}
.apply-modal.is-open {
display: flex;
}
.apply-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(8, 12, 20, 0.72);
opacity: 0;
transition: opacity 0.25s ease;
}
.apply-modal.is-visible .apply-modal__backdrop {
opacity: 1;
}
.apply-modal__dialog {
position: relative;
z-index: 1;
width: min(460px, 100%);
max-height: 90vh;
overflow-y: auto;
background: var(--color-white);
border-radius: 20px;
box-shadow: var(--shadow-lg);
padding: clamp(1.75rem, 4vw, 2.5rem);
transform: scale(0.94);
opacity: 0;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.apply-modal.is-visible .apply-modal__dialog {
transform: scale(1);
opacity: 1;
}
.apply-modal__close {
position: absolute;
top: 1rem;
right: 1rem;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: var(--color-light-bg);
color: var(--color-text-gray);
display: grid;
place-items: center;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.apply-modal__close:hover {
background: rgba(227, 30, 36, 0.1);
color: var(--color-primary);
}
.apply-modal__title {
font-family: var(--font-display);
color: var(--color-navy-dark);
font-size: 1.4rem;
margin-bottom: 0.35rem;
padding-right: 2rem;
}
.apply-modal__subtitle {
color: var(--color-text-gray);
font-size: 0.92rem;
margin-bottom: 1.5rem;
}
.apply-modal__subtitle strong {
color: var(--color-secondary);
}
.apply-form__file-field {
margin-bottom: 1rem;
}
.apply-form__file-label {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.9rem 1rem;
border: 1.5px dashed rgba(13, 21, 36, 0.2);
border-radius: 8px;
color: var(--color-text-gray);
font-size: 0.92rem;
cursor: pointer;
transition: border-color var(--transition-fast), background var(--transition-fast);
}
.apply-form__file-label:hover {
border-color: var(--color-secondary);
background: rgba(27, 110, 194, 0.04);
}
.apply-form__file-label i {
font-size: 1.1rem;
color: var(--color-secondary);
flex-shrink: 0;
}
.apply-form__file-field.has-file .apply-form__file-label {
border-style: solid;
border-color: var(--color-secondary);
color: var(--color-navy-dark);
}
.apply-form__file-field input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.apply-form__file-field .form-field__error {
display: none;
color: var(--color-primary);
font-size: 0.78rem;
margin-top: 0.4rem;
}
.apply-form__file-field.has-error .form-field__error {
display: block;
}
.apply-form__file-field.has-error .apply-form__file-label {
border-color: var(--color-primary);
}
.apply-form__note {
margin: -0.4rem 0 1rem;
font-size: 0.82rem;
color: var(--color-text-muted, #6b7280);
}
.apply-form__error {
padding: 0.65rem 0.9rem;
margin-bottom: 1rem;
border-radius: 8px;
background: rgba(227, 30, 36, 0.08);
color: var(--color-primary);
font-size: 0.86rem;
}
.apply-modal__success {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.85rem;
padding: 1rem 0.5rem 0.5rem;
}
/* The [hidden] attribute's default `display: none` loses to the class rule
above (same specificity, author CSS always wins the tie) unless we
restate it here — otherwise the success panel stays visible even while
`hidden` is set, showing before the form is actually submitted. */
.apply-modal__success[hidden] {
display: none;
}
.apply-modal__success-icon {
width: 56px;
height: 56px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(16, 185, 129, 0.12);
color: #10b981;
font-size: 1.4rem;
}
.apply-modal__success h2 {
font-family: var(--font-display);
color: var(--color-navy-dark);
font-size: 1.25rem;
}
.apply-modal__success p {
color: var(--color-text-gray);
font-size: 0.95rem;
max-width: 34ch;
}
.apply-modal__success .contact-form__submit {
width: auto;
padding: 0.7rem 1.75rem;
margin-top: 0.5rem;
}
/* ---- Chat widget ---- */
.chat-widget {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 1500;
}
.chat-widget__toggle {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
color: var(--color-white);
font-size: 1.4rem;
box-shadow: var(--shadow-lg);
cursor: pointer;
transition: transform var(--transition-fast);
}
.chat-widget__toggle:hover {
transform: scale(1.06);
}
.chat-widget__toggle i {
position: absolute;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.chat-widget__toggle .fa-xmark {
opacity: 0;
transform: scale(0.5) rotate(-45deg);
}
.chat-widget.is-open .chat-widget__toggle .fa-comment-dots {
opacity: 0;
transform: scale(0.5) rotate(45deg);
}
.chat-widget.is-open .chat-widget__toggle .fa-xmark {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.chat-panel {
position: absolute;
bottom: 76px;
right: 0;
/* Wider than a typical chat bubble needs on its own — tables (job
listings, comparisons, etc.) need real horizontal room, or every
column gets squeezed down to one word per line. */
width: min(460px, calc(100vw - 2rem));
height: min(560px, calc(100vh - 160px));
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--color-white);
border-radius: 20px;
box-shadow: var(--shadow-lg);
transform-origin: bottom right;
transform: scale(0.92) translateY(12px);
opacity: 0;
pointer-events: none;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.chat-widget.is-open .chat-panel {
transform: scale(1) translateY(0);
opacity: 1;
pointer-events: auto;
}
.chat-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 1rem 1.1rem;
background: linear-gradient(120deg, var(--color-navy-dark), var(--color-secondary));
color: var(--color-white);
flex-shrink: 0;
}
.chat-panel__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
}
.chat-panel__subtitle {
font-size: 0.76rem;
color: rgba(255, 255, 255, 0.75);
}
.chat-panel__close {
border: none;
background: rgba(255, 255, 255, 0.12);
color: var(--color-white);
width: 30px;
height: 30px;
border-radius: 50%;
display: grid;
place-items: center;
cursor: pointer;
flex-shrink: 0;
transition: background var(--transition-fast);
}
.chat-panel__close:hover {
background: rgba(255, 255, 255, 0.24);
}
.chat-panel__messages {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1rem;
background: var(--color-light-bg);
}
.chat-message {
display: flex;
}
.chat-message--user {
justify-content: flex-end;
}
.chat-message--assistant {
justify-content: flex-start;
}
.chat-message__bubble {
max-width: 82%;
padding: 0.6rem 0.9rem;
border-radius: 14px;
font-size: 0.88rem;
line-height: 1.55;
white-space: pre-wrap;
word-break: break-word;
}
.chat-message--assistant .chat-message__bubble {
background: var(--color-white);
border: 1px solid rgba(13, 21, 36, 0.08);
color: var(--color-text-dark);
border-bottom-left-radius: 4px;
}
.chat-message--user .chat-message__bubble {
background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
color: var(--color-white);
border-bottom-right-radius: 4px;
}
/* ---- Rendered Markdown inside assistant bubbles ---- */
.chat-message__bubble p {
margin: 0 0 0.5rem;
}
.chat-message__bubble p:last-child {
margin-bottom: 0;
}
.chat-message__bubble ul,
.chat-message__bubble ol {
margin: 0 0 0.5rem 1.1rem;
padding: 0;
}
.chat-message__bubble ul:last-child,
.chat-message__bubble ol:last-child {
margin-bottom: 0;
}
.chat-message__bubble li {
margin-bottom: 0.2rem;
}
.chat-message__bubble strong {
font-weight: 700;
}
.chat-message__bubble code {
background: rgba(13, 21, 36, 0.08);
padding: 0.1rem 0.35rem;
border-radius: 4px;
font-size: 0.85em;
}
.chat-message--user .chat-message__bubble code {
background: rgba(255, 255, 255, 0.2);
}
.chat-message__bubble a {
color: inherit;
text-decoration: underline;
}
/* Tables are wider than the bubble can comfortably fit, so the wrapper
scrolls horizontally instead of the table squeezing its columns down
to the point where every word wraps onto its own line. */
.chat-table-wrap {
max-width: 100%;
overflow-x: auto;
margin: 0 0 0.5rem;
border-radius: 8px;
border: 1px solid rgba(13, 21, 36, 0.12);
-webkit-overflow-scrolling: touch;
}
.chat-table-wrap:last-child {
margin-bottom: 0;
}
.chat-message__bubble table.chat-table {
width: 100%;
min-width: max-content;
border-collapse: collapse;
font-size: 0.85em;
}
.chat-message__bubble table.chat-table th,
.chat-message__bubble table.chat-table td {
border: 1px solid rgba(13, 21, 36, 0.12);
padding: 0.4rem 0.65rem;
text-align: left;
white-space: nowrap;
}
.chat-message__bubble table.chat-table th {
background: rgba(13, 21, 36, 0.05);
font-weight: 700;
}
.chat-message__bubble table.chat-table tbody tr:nth-child(even) {
background: rgba(13, 21, 36, 0.02);
}
.chat-panel__typing {
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0 1rem 0.6rem;
background: var(--color-light-bg);
flex-shrink: 0;
}
.chat-panel__typing span {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(13, 21, 36, 0.35);
animation: chatTypingBounce 1.2s infinite ease-in-out;
}
.chat-panel__typing span:nth-child(2) {
animation-delay: 0.15s;
}
.chat-panel__typing span:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes chatTypingBounce {
0%,
60%,
100% {
transform: translateY(0);
opacity: 0.5;
}
30% {
transform: translateY(-4px);
opacity: 1;
}
}
.chat-panel__input-row {
display: flex;
gap: 0.5rem;
padding: 0.75rem;
border-top: 1px solid rgba(13, 21, 36, 0.08);
background: var(--color-white);
flex-shrink: 0;
}
.chat-panel__input-row input {
flex: 1;
min-width: 0;
border: 1px solid rgba(13, 21, 36, 0.14);
border-radius: 999px;
padding: 0.55rem 1rem;
font-size: 0.88rem;
font-family: var(--font-sans);
color: var(--color-text-dark);
}
.chat-panel__input-row input:focus {
outline: none;
border-color: var(--color-secondary);
}
.chat-panel__send {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: var(--color-primary);
color: var(--color-white);
display: grid;
place-items: center;
cursor: pointer;
transition: background var(--transition-fast);
}
.chat-panel__send:hover {
background: #c2181d;
}
.chat-panel__send:disabled {
opacity: 0.5;
cursor: not-allowed;
}
@media (max-width: 480px) {
.chat-widget {
bottom: 1rem;
right: 1rem;
}
.chat-panel {
width: calc(100vw - 2rem);
height: min(72vh, 560px);
}
}
/* Execution Services image gallery */
.es-media__gallery {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px !important;
width: 100% !important;
}
.es-media__gallery .es-media__image {
position: relative !important;
width: 100% !important;
height: 240px !important;
min-height: 0 !important;
aspect-ratio: auto !important;
overflow: hidden !important;
border-radius: 16px !important;
}
.es-media__gallery .es-media__image img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.es-media__gallery .es-media__image .asset-frame__fallback {
position: absolute !important;
inset: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 0 !important;
}
.es-media__gallery .es-media__image img {
position: relative !important;
z-index: 1 !important;
}