/* =========================================================================
MERIDIAN INSIGHTS — Core Stylesheet
A design system for a premium market research & consulting firm.
========================================================================= */
/* -------------------------------------------------------------------------
1. TOKENS
------------------------------------------------------------------------- */
:root {
/* Color: Deep Navy / Royal Blue / Teal system */
--navy-950:#081527;
--navy-900:#0A1F3D;
--navy-800:#102A4C;
--navy-700:#173A63;
--royal-600:#14509A;
--royal-500:#1B62B8;
--royal-400:#2E7AD1;
--teal-600:#F97316;
--teal-500:#FB923C;
--teal-400:#FACC15;
--teal-100:#FEF3C7;
--bg:#FBFCFD;
--bg-alt:#F2F5F8;
--bg-navy-tint:#EEF3F9;
--white:#FFFFFF;
--text-900:#111A2B;
--text-700:#1D2939;
--text-500:#4A5A70;
--text-400:#6B7B90;
--border:#E1E8EF;
--border-strong:#CBD6E2;
/* Typography */
--font-display:'Newsreader', Georgia, serif;
--font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono:'IBM Plex Mono', 'Courier New', monospace;
/* Layout */
--container:1280px;
--container-narrow:860px;
--radius-sm:8px;
--radius-md:14px;
--radius-lg:22px;
--shadow-sm:0 1px 3px rgba(10,31,61,0.06), 0 1px 2px rgba(10,31,61,0.04);
--shadow-md:0 8px 24px rgba(10,31,61,0.08), 0 2px 6px rgba(10,31,61,0.04);
--shadow-lg:0 20px 50px rgba(10,31,61,0.14), 0 6px 16px rgba(10,31,61,0.06);
--shadow-navy:0 20px 45px rgba(8,21,39,0.35);
--ease:cubic-bezier(.22,.61,.36,1);
--dur:.5s;
}
/* -------------------------------------------------------------------------
2. RESET & BASE
------------------------------------------------------------------------- */
*,*::before,*::after {
box-sizing:border-box;
}
html {
scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto;
}
*,*::before,*::after {
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
}
body {
margin:0;
font-family:var(--font-body);
color:var(--text-700);
background:var(--bg);
font-size:16px;
line-height:1.65;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img {
max-width:100%;
width:100%;
height:auto;
display:block;
}
a {
color:inherit;
text-decoration:none;
}
ul,ol {
padding:0;
margin:0;
list-style:none;
}
button {
font-family:inherit;
cursor:pointer;
}
input,textarea,select {
font-family:inherit;
font-size:1rem;
}
h1,h2,h3,h4,h5,h6 {
font-family:var(--font-display);
color:var(--navy-900);
font-weight:600;
line-height:1.15;
margin:0 0 .5em;
letter-spacing:-.01em;
}
p {
margin:0 0 1em;
}
h1 {
font-size:clamp(2.4rem,4.4vw,4rem);
font-weight:500;
}
h2 {
font-size:clamp(1.9rem,3.2vw,2.75rem);
font-weight:500;
}
h3 {
font-size:clamp(1.25rem,1.8vw,1.55rem);
}
h4 {
font-size:1.15rem;
}
:focus-visible {
outline:2px solid var(--teal-500);
outline-offset:3px;
border-radius:4px;
}
.container {
width:100%;
max-width:var(--container);
margin:0 auto;
padding:0 24px;
}
.container-narrow {
width:100%;
max-width:var(--container-narrow);
margin:0 auto;
padding:0 24px;
}
section {
position:relative;
}
.section {
padding:104px 0;
}
.section-sm {
padding:64px 0;
}
@media (max-width:991px) {
.section {
padding:76px 0;
}
}
@media (max-width:575px) {
.section {
padding:56px 0;
}
.section-sm {
padding:44px 0;
}
}
.bg-alt {
background:var(--bg-alt);
}
.bg-navy {
background:var(--navy-900);
color:#CBD9EC;
}
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4 {
color:#fff;
}
.bg-navy-tint {
background:var(--bg-navy-tint);
}
/* -------------------------------------------------------------------------
3. TYPE UTILITIES
------------------------------------------------------------------------- */
.eyebrow {
font-family:var(--font-mono);
font-size:.72rem;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--teal-600);
display:inline-flex;
align-items:center;
gap:10px;
font-weight:600;
margin-bottom:16px;
}
.eyebrow::before {
content:"";
width:22px;
height:1px;
background:var(--teal-500);
display:inline-block;
}
.bg-navy .eyebrow {
color:var(--teal-400);
}
.section-head {
max-width:680px;
margin-bottom:56px;
}
.section-head.center {
margin-left:auto;
margin-right:auto;
text-align:center;
}
.lede {
font-size:1.15rem;
color:var(--text-500);
}
.text-muted {
color:var(--text-500);
}
.text-teal {
color:var(--teal-600);
}
.mono-num {
font-family:var(--font-mono);
}
/* -------------------------------------------------------------------------
4. BUTTONS
------------------------------------------------------------------------- */
.btn {
background:transparent;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
font-family:var(--font-body);
font-weight:600;
font-size:.95rem;
padding:14px 30px;
border-radius:100px;
border:1.5px solid transparent;
transition:all .3s var(--ease);
white-space:nowrap;
}
.btn-primary {
background:var(--teal-500);
color:var(--navy-950);
}
.btn-primary:hover {
background:var(--teal-400);
transform:translateY(-2px);
box-shadow:var(--shadow-md);
color:var(--navy-950);
}
.btn-outline-light {
border-color:rgba(255,255,255,.4);
color:#fff;
}
.btn-outline-light:hover {
background:rgba(255,255,255,.1);
border-color:#fff;
transform:translateY(-2px);
color:#fff;
}
.btn-navy {
background:var(--navy-900);
color:#fff;
}
.btn-navy:hover {
background:var(--navy-800);
transform:translateY(-2px);
box-shadow:var(--shadow-md);
color:#fff;
}
.btn-outline-navy {
border-color:var(--border-strong);
color:var(--navy-900);
}
.btn-outline-navy:hover {
border-color:var(--navy-900);
background:var(--navy-900);
color:#fff;
}
.btn-sm {
padding:10px 20px;
font-size:.85rem;
}
.btn-link-arrow {
display:inline-flex;
align-items:center;
gap:8px;
font-weight:600;
color:var(--royal-600);
font-size:.92rem;
transition:gap .25s var(--ease);
}
.btn-link-arrow i {
transition:transform .25s var(--ease);
font-size:.8em;
}
.btn-link-arrow:hover {
gap:13px;
color:var(--teal-600);
}
/* -------------------------------------------------------------------------
5. HEADER / NAV
------------------------------------------------------------------------- */
.site-header {
position:fixed;
top:0;
left:0;
right:0;
z-index:1000;
padding:20px 0;
transition:all .35s var(--ease);
background:transparent;
}
.site-header.is-scrolled {
background:rgba(251,252,253,.9);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
box-shadow:0 1px 0 var(--border), var(--shadow-sm);
padding:12px 0;
}
.site-header .navbar {
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
}
.brand {
display:flex;
align-items:center;
gap:10px;
font-family:var(--font-display);
font-weight:600;
font-size:1.35rem;
color:#fff;
}
.site-header.is-scrolled .brand {
color:var(--navy-900);
}
.brand .mark {
width:38px;
height:38px;
border-radius:9px;
background:var(--teal-500);
display:flex;
align-items:center;
justify-content:center;
color:var(--navy-950);
font-family:var(--font-mono);
font-weight:700;
font-size:1rem;
flex-shrink:0;
}
.brand span {
letter-spacing:-.01em;
}
.brand small {
display:block;
font-family:var(--font-mono);
font-size:.55rem;
letter-spacing:.16em;
color:var(--teal-400);
font-weight:600;
text-transform:uppercase;
}
.site-header.is-scrolled .brand small {
color:var(--teal-600);
}
/* Image wordmark logo: white silhouette over the transparent/dark hero header,
original color once the header is solid (scrolled); always white in the footer. */
.brand-logo {
height:50px;
width:auto;
display:block;
filter:brightness(0) invert(1);
transition:filter .3s var(--ease), height .3s var(--ease);
}
.site-header.is-scrolled .brand-logo {
filter:none;
height:44px;
}
.footer-logo {
height:40px;
filter:brightness(0) invert(1);
}
@media (max-width:575px) {
.brand-logo {
height:42px;
}
.site-header.is-scrolled .brand-logo {
height:36px;
}
}
.nav-links {
display:flex;
align-items:center;
gap:2px;
}
.nav-links a {
padding:10px 16px;
font-size:.92rem;
font-weight:500;
color:rgba(255,255,255,.85);
border-radius:100px;
transition:all .25s var(--ease);
position:relative;
}
.site-header.is-scrolled .nav-links a {
color:var(--text-700);
}
.nav-links a:hover,.nav-links a.active {
background:rgba(255,255,255,.12);
color:#fff;
}
.site-header.is-scrolled .nav-links a:hover,.site-header.is-scrolled .nav-links a.active {
background:var(--bg-navy-tint);
color:var(--navy-900);
}
.nav-toggle {
display:none;
width:44px;
height:44px;
border-radius:10px;
border:1px solid rgba(255,255,255,.3);
background:transparent;
align-items:center;
justify-content:center;
color:#fff;
font-size:1.2rem;
}
.site-header.is-scrolled .nav-toggle {
color:var(--navy-900);
border-color:var(--border-strong);
}
@media (max-width:991px) {
.nav-links {
position:fixed;
top:0;
right:-100%;
height:100vh;
height:100dvh;
width:min(340px,86vw);
background:var(--navy-950);
flex-direction:column;
align-items:stretch;
padding:100px 28px 40px;
gap:4px;
transition:right .4s var(--ease);
z-index:1001;
box-shadow:-20px 0 60px rgba(0,0,0,.3);
}
.nav-links.is-open {
right:0;
}
.nav-links a {
color:#fff;
padding:14px 16px;
font-size:1.05rem;
}
.nav-links a:hover,.nav-links a.active {
background:rgba(255,255,255,.08);
}
.nav-toggle {
display:flex;
}
.nav-backdrop {
position:fixed;
inset:0;
background:rgba(8,21,39,.55);
opacity:0;
pointer-events:none;
transition:opacity .35s var(--ease);
z-index:1000;
}
.nav-backdrop.is-open {
opacity:1;
pointer-events:auto;
}
}
/* -------------------------------------------------------------------------
6. HERO
------------------------------------------------------------------------- */
.hero {
position:relative;
min-height:92vh;
display:flex;
align-items:center;
padding:160px 0 100px;
color:#fff;
overflow:hidden;
background:linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
}
.hero-bg {
position:absolute;
inset:0;
z-index:0;
}
.hero-bg img {
width:100%;
height:100%;
object-fit:cover;
}
.hero-bg::after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(115deg, rgba(8,21,39,.88) 20%, rgba(10,31,61,.82) 55%, rgba(14,42,79,.55) 100%);
}
.hero-grid-texture {
position:absolute;
inset:0;
z-index:1;
opacity:.35;
pointer-events:none;
background-image:radial-gradient(rgba(47,199,189,.35) 1px, transparent 1px);
background-size:26px 26px;
-webkit-mask-image:linear-gradient(180deg, transparent, black 40%, black 70%, transparent);
mask-image:linear-gradient(180deg, transparent, black 40%, black 70%, transparent);
}
.hero-row {
display:flex;
flex-direction:row;
align-items:center;
gap:56px;
}
.hero-col-text {
flex:1 1 56%;
min-width:0;
}
.hero-col-chart {
flex:1 1 44%;
width:auto;
min-width:0;
}
@media (max-width:991px) {
.hero-row {
flex-direction:column;
align-items:stretch;
gap:32px;
}
.hero-col-text,.hero-col-chart {
flex:0 0 auto;
width:100%;
min-width:0;
}
.hero-chart {
max-width:100%;
margin-top:32px;
}
}
.hero-content {
position:relative;
z-index:2;
max-width:760px;
}
.hero .eyebrow {
color:var(--teal-400);
}
.hero h1 {
color:#fff;
margin-bottom:26px;
}
.hero-sub {
font-size:1.2rem;
color:rgba(255,255,255,.78);
max-width:620px;
margin-bottom:40px;
}
.hero-actions {
display:flex;
gap:16px;
flex-wrap:wrap;
margin-bottom:64px;
}
.hero-chart {
position:relative;
z-index:2;
max-width:500px;
margin-top:8px;
}
.hero-chart svg {
width:100%;
height:auto;
overflow:visible;
}
.hero-chart-path {
stroke-dasharray:1000;
stroke-dashoffset:1000;
animation:drawline 2.4s linear .5s forwards;
}
@keyframes drawline {
to {
stroke-dashoffset:0;
}
}
.hero-chart-dot {
opacity:0;
animation:popdot .4s linear forwards;
}
@keyframes popdot {
to {
opacity:1;
}
}
.hero-chart-label {
font-family:var(--font-mono);
font-size:11px;
fill:rgba(255,255,255,.6);
}
.hero-chart-value {
font-family:var(--font-mono);
font-size:13px;
fill:var(--teal-400);
font-weight:700;
}
/* Sub-page hero (shorter, for interior pages) */
.page-hero {
position:relative;
padding:172px 0 84px;
color:#fff;
overflow:hidden;
background:linear-gradient(120deg, var(--navy-950), var(--navy-800));
}
.page-hero .hero-grid-texture {
opacity:.25;
}
.page-hero h1 {
color:#fff;
margin-bottom:16px;
}
.page-hero .lede {
color:rgba(255,255,255,.75);
max-width:640px;
}
.breadcrumb {
font-family:var(--font-mono);
font-size:.75rem;
letter-spacing:.06em;
color:rgba(255,255,255,.55);
margin-bottom:18px;
}
.breadcrumb a {
color:rgba(255,255,255,.8);
}
.breadcrumb a:hover {
color:var(--teal-400);
}
/* -------------------------------------------------------------------------
7. STATS
------------------------------------------------------------------------- */
.stats-strip {
background:var(--navy-950);
color:#fff;
padding:56px 0;
}
.stats-row {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}
.stat-item {
text-align:center;
border-left:1px solid rgba(255,255,255,.12);
padding-left:20px;
}
.stat-item:first-child {
border-left:none;
}
.stat-num {
font-family:var(--font-mono);
font-size:clamp(1.9rem,3.4vw,2.9rem);
font-weight:700;
color:var(--teal-400);
display:flex;
justify-content:center;
align-items:baseline;
gap:2px;
}
.stat-label {
font-size:.85rem;
color:rgba(255,255,255,.65);
margin-top:6px;
}
@media (max-width:767px) {
.stats-row {
grid-template-columns:repeat(2,1fr);
row-gap:36px;
}
.stat-item:nth-child(3) {
border-left:none;
}
}
/* -------------------------------------------------------------------------
8. CARDS
------------------------------------------------------------------------- */
.card {
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius-md);
transition:transform .6s ease-out, box-shadow .6s ease-out, border-color .6s ease-out;
}
.card:hover {
transform:translateY(-6px);
box-shadow:var(--shadow-lg);
border-color:transparent;
}
.service-card {
padding:44px 34px;
height:100%;
display:flex;
flex-direction:column;
}
.service-card .svc-icon {
width:56px;
height:56px;
border-radius:14px;
background:var(--bg-navy-tint);
display:flex;
align-items:center;
justify-content:center;
color:var(--royal-600);
font-size:1.35rem;
margin-bottom:22px;
transition:all .35s linear;
}
.service-card:hover .svc-icon {
background:var(--navy-900);
color:var(--teal-400);
}
.service-card h3 {
margin-bottom:10px;
}
.service-card p {
color:var(--text-500);
font-size:.95rem;
flex-grow:1;
}
.service-card .btn-link-arrow {
margin-top:12px;
}
.svc-num {
font-family:var(--font-mono);
font-size:.72rem;
color:var(--text-400);
letter-spacing:.08em;
margin-bottom:12px;
display:block;
}
.industry-card {
position:relative;
border-radius:var(--radius-md);
overflow:hidden;
aspect-ratio:4/1;
display:flex;
align-items:flex-end;
color:#fff;
}
.industry-card img {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
transition:transform .6s var(--ease);
}
.industry-card:hover img {
transform:scale(1.08);
}
.industry-card::after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(0deg, rgba(8,21,39,.92) 0%, rgba(8,21,39,.35) 55%, rgba(8,21,39,.15) 100%);
}
.industry-card .ic-body {
position:relative;
z-index:2;
padding:22px;
}
.industry-card i {
color:var(--teal-400);
font-size:1.2rem;
margin-bottom:8px;
display:block;
}
.industry-card h4 {
color:#fff;
margin-bottom:4px;
font-size:1.05rem;
}
.industry-card p {
font-size:.82rem;
color:rgba(255,255,255,.72);
margin:0;
}
.insight-card {
overflow:hidden;
display:flex;
flex-direction:column;
height:100%;
}
.insight-card .ic-img {
aspect-ratio:16/10;
overflow:hidden;
}
.insight-card .ic-img img {
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s var(--ease);
}
.insight-card:hover .ic-img img {
transform:scale(1.07);
}
.insight-card .ic-body {
padding:26px 26px 30px;
flex-grow:1;
display:flex;
flex-direction:column;
}
.insight-meta {
display:flex;
align-items:center;
gap:12px;
font-family:var(--font-mono);
font-size:.72rem;
color:var(--teal-600);
text-transform:uppercase;
letter-spacing:.06em;
margin-bottom:12px;
}
.insight-meta .dot {
width:3px;
height:3px;
border-radius:50%;
background:var(--text-400);
}
.insight-card h3 {
font-size:1.2rem;
margin-bottom:10px;
}
.insight-card p {
color:var(--text-500);
font-size:.92rem;
flex-grow:1;
}
/* Homepage Featured Insights Grid */
.home-insights-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 991px) {
.home-insights-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 575px) {
.home-insights-grid {
grid-template-columns: 1fr;
}
}
.feature-item {
display:flex;
gap:18px;
padding:28px 0;
border-top:1px solid var(--border);
}
.feature-item:last-child {
padding-bottom:0;
}
.feature-item .fi-icon {
width:48px;
height:48px;
border-radius:12px;
background:var(--teal-100);
color:var(--teal-600);
display:flex;
align-items:center;
justify-content:center;
font-size:1.15rem;
flex-shrink:0;
}
.feature-item > div:last-child {
flex:1;
min-width:0;
}
.feature-item h4 {
margin-bottom:6px;
}
.feature-item p {
color:var(--text-500);
font-size:.92rem;
margin:0;
}
/* Percentage / progress stat (About page "why choose us") */
.progress-stat {
margin-bottom:26px;
}
.progress-stat:last-child {
margin-bottom:0;
}
.progress-stat .ps-head {
display:flex;
justify-content:space-between;
align-items:baseline;
margin-bottom:10px;
}
.progress-stat .ps-head h4 {
margin:0;
font-size:1rem;
}
.progress-stat .ps-val {
font-family:var(--font-mono);
font-weight:700;
color:var(--teal-600);
}
.progress-track {
height:8px;
border-radius:100px;
background:var(--bg-navy-tint);
overflow:hidden;
}
.progress-fill {
height:100%;
border-radius:100px;
background:linear-gradient(90deg, var(--royal-600), var(--teal-500));
width:0;
transition:width 1.4s var(--ease);
}
.progress-fill.is-visible {
width:var(--target,0%);
}
/* Global presence region cards */
.region-card {
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius-md);
padding:26px 24px;
height:100%;
}
.region-card h4 {
font-size:.95rem;
color:var(--navy-900);
margin-bottom:14px;
display:flex;
align-items:center;
gap:10px;
}
.region-card h4 i {
color:var(--teal-600);
}
.region-card ul {
display:flex;
flex-wrap:wrap;
gap:8px;
}
.region-card li {
font-size:.78rem;
color:var(--text-500);
background:var(--bg-alt);
border:1px solid var(--border);
padding:5px 12px;
border-radius:100px;
}
/* Methodology pillar card (Data Processing / Actionable Reporting / Quality Assurance) */
.pillar-card {
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius-md);
padding:28px 24px;
height:100%;
}
.pillar-card .pc-icon {
width:52px;
height:52px;
border-radius:14px;
background:var(--navy-900);
color:var(--teal-400);
display:flex;
align-items:center;
justify-content:center;
font-size:1.25rem;
margin-bottom:16px;
}
.pillar-card ul {
margin-top:16px;
}
.pillar-card ul li {
display:flex;
gap:10px;
padding:8px 0;
font-size:.9rem;
color:var(--text-500);
border-top:1px solid var(--border);
}
.pillar-card ul li:first-child {
border-top:none;
}
.pillar-card ul li i {
color:var(--teal-600);
margin-top:3px;
flex-shrink:0;
font-size:.8rem;
}
.row.pillars-grid {
display:grid !important;
grid-template-columns:repeat(3,1fr) !important;
gap:24px !important;
}
.row.pillars-grid > [class*="col-"] {
width:100% !important;
max-width:none !important;
flex:none !important;
}
@media (max-width:991px) {
.row.pillars-grid {
grid-template-columns:1fr !important;
}
}
/* -------------------------------------------------------------------------
9. PROCESS / METHODOLOGY
------------------------------------------------------------------------- */
.process-steps {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:28px;
}
.process-step {
position:relative;
padding:34px 26px 30px;
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius-md);
}
.process-step .ps-num {
font-family:var(--font-mono);
font-size:2.4rem;
font-weight:700;
color:var(--bg-navy-tint);
-webkit-text-stroke:1.5px var(--border-strong);
color:transparent;
display:block;
margin-bottom:18px;
}
.process-step h3 {
font-size:1.1rem;
margin-bottom:10px;
}
.process-step p {
color:var(--text-500);
font-size:.9rem;
margin:0;
}
@media (max-width:991px) {
.process-steps {
grid-template-columns:repeat(2,1fr);
}
}
@media (max-width:575px) {
.process-steps {
grid-template-columns:1fr;
}
}
.timeline {
position:relative;
max-width:900px;
margin:0 auto;
}
.timeline::before {
content:"";
position:absolute;
left:23px;
top:6px;
bottom:6px;
width:1px;
background:var(--border-strong);
}
.timeline-item {
position:relative;
padding:0 0 44px 74px;
}
.timeline-item:last-child {
padding-bottom:0;
}
.timeline-item .tl-num {
position:absolute;
left:0;
top:0;
width:48px;
height:48px;
border-radius:50%;
background:var(--navy-900);
color:var(--teal-400);
font-family:var(--font-mono);
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
font-size:.95rem;
z-index:2;
}
.timeline-item h3 {
margin-bottom:8px;
font-size:1.15rem;
}
.timeline-item p {
color:var(--text-500);
margin:0;
}
/* -------------------------------------------------------------------------
10. ABOUT / SPLIT SECTIONS
------------------------------------------------------------------------- */
.split {
display:grid;
grid-template-columns:1fr 1fr;
gap:72px;
align-items:center;
}
@media (max-width:991px) {
.split {
grid-template-columns:1fr;
gap:40px;
}
}
.split-media {
position:relative;
}
.split-media img {
border-radius:var(--radius-lg);
width:100%;
max-width:700px;
box-shadow:var(--shadow-md);
}
.split-stretch {
align-items:stretch;
}
@media (min-width:992px) {
.split-media-lg {
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
.split-media-lg img {
display:block;
width:100%;
height:50%;
min-height:400px;
object-fit:cover;
object-position:center 30%;
}
}
.split-media .media-badge {
position:absolute;
bottom:-28px;
left:-28px;
background:#fff;
border-radius:var(--radius-md);
box-shadow:var(--shadow-lg);
padding:20px 26px;
display:flex;
align-items:center;
gap:14px;
}
@media (max-width:575px) {
.split-media .media-badge {
left:0;
bottom:-20px;
padding:14px 18px;
}
}
.media-badge .mb-num {
font-family:var(--font-mono);
font-size:1.6rem;
font-weight:700;
color:var(--navy-900);
}
.media-badge .mb-label {
font-size:.78rem;
color:var(--text-500);
max-width:120px;
line-height:1.3;
}
/* -------------------------------------------------------------------------
11. CTA BAND
------------------------------------------------------------------------- */
.cta-band {
background:var(--navy-950);
color:#fff;
border-radius:var(--radius-lg);
padding:72px 60px;
text-align:center;
position:relative;
overflow:hidden;
}
.cta-band::before {
content:"";
position:absolute;
inset:0;
background-image:radial-gradient(rgba(47,199,189,.25) 1px, transparent 1px);
background-size:24px 24px;
opacity:.5;
-webkit-mask-image:radial-gradient(circle at 80% 30%, black, transparent 70%);
mask-image:radial-gradient(circle at 80% 30%, black, transparent 70%);
}
.cta-band > * {
position:relative;
z-index:1;
}
.cta-band h2 {
color:#fff;
margin-bottom:14px;
}
.cta-band p {
color:rgba(255,255,255,.72);
max-width:560px;
margin:0 auto 32px;
}
@media (max-width:575px) {
.cta-band {
padding:52px 26px;
}
}
/* -------------------------------------------------------------------------
12. FOOTER
------------------------------------------------------------------------- */
.site-footer {
background:var(--navy-950);
color:rgba(255,255,255,.65);
padding:88px 0 0;
}
.footer-grid {
display:grid;
grid-template-columns:2fr 1fr 1fr 1.3fr;
gap:48px;
padding-bottom:64px;
}
@media (max-width:991px) {
.footer-grid {
grid-template-columns:1fr 1fr;
row-gap:44px;
}
}
@media (max-width:575px) {
.footer-grid {
grid-template-columns:1fr;
}
}
.footer-brand .brand {
color:#fff;
margin-bottom:16px;
}
.footer-brand p {
max-width:300px;
font-size:.92rem;
}
.footer-col h5 {
font-family:var(--font-mono);
font-size:.72rem;
text-transform:uppercase;
letter-spacing:.1em;
color:#fff;
margin-bottom:20px;
}
.footer-col ul li {
margin-bottom:12px;
}
.footer-col a {
font-size:.92rem;
transition:color .25s;
}
.footer-col a:hover {
color:var(--teal-400);
}
.footer-contact li {
display:flex;
gap:12px;
font-size:.9rem;
margin-bottom:16px;
align-items:flex-start;
}
.footer-contact i {
color:var(--teal-400);
margin-top:3px;
}
.social-row {
display:flex;
gap:10px;
margin-top:22px;
}
.social-row a {
width:38px;
height:38px;
border-radius:50%;
border:1px solid rgba(255,255,255,.2);
display:flex;
align-items:center;
justify-content:center;
transition:all .25s;
}
.social-row a:hover {
background:var(--teal-500);
border-color:var(--teal-500);
color:var(--navy-950);
}
.footer-legal-row {
display:flex;
justify-content:flex-end;
padding-bottom:16px;
border-bottom:1px solid rgba(255,255,255,.1);
font-size:.82rem;
}
.footer-legal-row .legal-links {
display:flex;
gap:32px;
}
.footer-bottom {
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 0 26px;
font-size:.82rem;
flex-wrap:wrap;
gap:12px;
}
.footer-bottom .legal-links {
display:flex;
gap:22px;
}
.footer-legal-row .legal-links a {
color:inherit;
transition:color .2s ease;
}
.footer-legal-row .legal-links a:hover {
color:#fff;
text-decoration:underline;
}
.footer-bottom .legal-links a:hover {
color:#fff;
}
.footer-credit {
color:var(--text-500);
}
.footer-credit a {
color:inherit;
text-decoration:underline;
}
.footer-credit a:hover {
color:#fff;
}
/* -------------------------------------------------------------------------
13. FORMS
------------------------------------------------------------------------- */
.form-control,.form-select {
background:#fff;
border:1.5px solid var(--border-strong);
border-radius:var(--radius-sm);
padding:13px 16px;
width:100%;
color:var(--text-700);
transition:border-color .25s, box-shadow .25s;
}
.form-control:focus,.form-select:focus {
border-color:var(--teal-500);
box-shadow:0 0 0 4px var(--teal-100);
outline:none;
}
.form-label {
font-size:.85rem;
font-weight:600;
color:var(--navy-900);
margin-bottom:8px;
display:block;
}
.form-group {
margin-bottom:22px;
}
.invalid-feedback {
display:none;
color:#C4432B;
font-size:.8rem;
margin-top:6px;
}
.was-validated .form-control:invalid ~ .invalid-feedback, .form-control.is-invalid ~ .invalid-feedback {
display:block;
}
.form-control.is-invalid,.form-select.is-invalid {
border-color:#C4432B;
}
.form-control.is-valid,.form-select.is-valid {
border-color:var(--teal-500);
}
.form-success {
display:none;
background:var(--teal-100);
color:var(--teal-600);
border-radius:var(--radius-sm);
padding:18px 22px;
align-items:center;
gap:12px;
font-weight:600;
margin-top:20px;
}
.form-success.is-visible {
display:flex;
}
/* -------------------------------------------------------------------------
14. ACCORDION (FAQ)
------------------------------------------------------------------------- */
.faq-item {
border-bottom:1px solid var(--border);
}
.faq-q {
width:100%;
text-align:left;
background:none;
border:none;
padding:24px 4px;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
font-family:var(--font-display);
font-size:1.1rem;
color:var(--navy-900);
font-weight:500;
}
.faq-q i {
transition:transform .3s var(--ease);
color:var(--teal-600);
flex-shrink:0;
}
.faq-item.is-open .faq-q i {
transform:rotate(45deg);
}
.faq-a {
max-height:0;
overflow:hidden;
transition:max-height .4s var(--ease);
}
.faq-a-inner {
padding:0 4px 24px;
color:var(--text-500);
}
/* -------------------------------------------------------------------------
15. MISC UTILITIES
------------------------------------------------------------------------- */
.badge-pill {
display:inline-block;
padding:6px 14px;
border-radius:100px;
background:var(--teal-100);
color:var(--teal-600);
font-size:.76rem;
font-weight:700;
font-family:var(--font-mono);
text-transform:uppercase;
letter-spacing:.04em;
}
.divider {
height:1px;
background:var(--border);
border:none;
margin:0;
}
.tag-filter {
padding:9px 20px;
border-radius:100px;
border:1.5px solid var(--border-strong);
background:#fff;
font-size:.88rem;
font-weight:600;
color:var(--text-500);
transition:all .25s;
}
.tag-filter:hover {
border-color:var(--navy-900);
color:var(--navy-900);
}
.tag-filter.active {
background:var(--navy-900);
border-color:var(--navy-900);
color:#fff;
}
/* Scroll reveal */
.reveal {
opacity:0;
transform:translateY(28px);
transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible {
opacity:1;
transform:none;
}
.reveal-stagger > * {
transition-delay:calc(var(--i,0) * 80ms);
}
/* Back to top */
.back-to-top {
position:fixed;
bottom:28px;
right:28px;
width:48px;
height:48px;
border-radius:50%;
background:var(--navy-900);
color:#fff;
border:none;
display:flex;
align-items:center;
justify-content:center;
box-shadow:var(--shadow-lg);
opacity:0;
pointer-events:none;
transform:translateY(10px);
transition:all .35s var(--ease);
z-index:900;
font-size:1rem;
}
.back-to-top.is-visible {
opacity:1;
pointer-events:auto;
transform:none;
}
.back-to-top:hover {
background:var(--teal-500);
color:var(--navy-950);
}
/* WhatsApp float */
.whatsapp-float {
position:fixed;
bottom:28px;
left:28px;
width:56px;
height:56px;
border-radius:50%;
background:#25D366;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:1.5rem;
box-shadow:var(--shadow-lg);
z-index:900;
transition:transform .3s var(--ease);
}
.whatsapp-float:hover {
transform:scale(1.08);
color:#fff;
}
@media (max-width:575px) {
.whatsapp-float {
width:48px;
height:48px;
font-size:1.3rem;
bottom:18px;
left:18px;
}
.back-to-top {
width:42px;
height:42px;
bottom:18px;
right:18px;
}
}
/* Cookie banner */
.cookie-banner {
position:fixed;
bottom:0;
left:0;
right:0;
background:var(--navy-950);
color:rgba(255,255,255,.85);
padding:20px 24px;
z-index:1100;
display:flex;
align-items:center;
justify-content:center;
gap:24px;
flex-wrap:wrap;
transform:translateY(100%);
transition:transform .5s var(--ease);
box-shadow:0 -10px 30px rgba(0,0,0,.2);
}
.cookie-banner.is-visible {
transform:translateY(0);
}
/* Prevent cookie banner from covering the floating action buttons */
body.cookie-visible .whatsapp-float,
body.cookie-visible .back-to-top {
bottom:100px;
transition:bottom .35s var(--ease), transform .3s var(--ease);
}
@media (max-width:575px) {
body.cookie-visible .whatsapp-float,
body.cookie-visible .back-to-top {
bottom:110px;
}
}
.cookie-banner p {
margin:0;
font-size:.88rem;
max-width:640px;
}
.cookie-actions {
display:flex;
gap:12px;
flex-shrink:0;
}
/* Pagination */
.pagination-custom {
display:flex;
justify-content:center;
gap:8px;
margin-top:56px;
}
.pagination-custom a {
width:42px;
height:42px;
border-radius:10px;
border:1.5px solid var(--border);
display:flex;
align-items:center;
justify-content:center;
font-weight:600;
font-size:.9rem;
color:var(--text-500);
transition:all .25s;
}
.pagination-custom a.active,.pagination-custom a:hover {
background:var(--navy-900);
border-color:var(--navy-900);
color:#fff;
}
/* Team / leadership */
.team-card {
text-align:center;
}
.team-card .tc-img {
border-radius:var(--radius-md);
overflow:hidden;
aspect-ratio:1/1;
margin-bottom:18px;
}
/* Individual override: same square frame, fills it edge-to-edge like every
other team card (no letterbox background), but anchors the crop to the
top of the photo so it trims from the chest down instead of through
the hair/head. */
.team-card .tc-img.tc-img--full img {
object-position:top center;
}
.team-card .tc-img img {
width:100%;
height:100%;
object-fit:cover;
}
.team-card h4 {
margin-bottom:2px;
}
.team-card .tc-role {
font-family:var(--font-mono);
font-size:.76rem;
color:var(--teal-600);
text-transform:uppercase;
letter-spacing:.06em;
}
/* Values grid */
.value-card {
padding:32px 28px;
border-radius:var(--radius-md);
border:1px solid var(--border);
height:100%;
background:#fff;
}
.value-card .v-num {
font-family:var(--font-mono);
color:var(--teal-500);
font-weight:700;
font-size:.85rem;
margin-bottom:16px;
display:block;
}
/* Career openings */
.job-row {
display:flex;
justify-content:space-between;
align-items:center;
gap:24px;
padding:26px 30px;
border:1px solid var(--border);
border-radius:var(--radius-md);
background:#fff;
margin-bottom:16px;
transition:all .3s var(--ease);
flex-wrap:wrap;
}
.job-row:hover {
border-color:var(--teal-500);
box-shadow:var(--shadow-sm);
}
.job-row .jr-meta {
display:flex;
gap:16px;
flex-wrap:wrap;
font-size:.85rem;
color:var(--text-500);
margin-top:6px;
}
.job-row .jr-meta span {
display:flex;
align-items:center;
gap:6px;
}
/* Sidebar (blog) */
.sidebar-card {
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius-md);
padding:28px;
margin-bottom:24px;
}
.sidebar-card h5 {
font-family:var(--font-mono);
font-size:.76rem;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--navy-900);
margin-bottom:18px;
}
.cat-list li {
display:flex;
justify-content:space-between;
padding:10px 0;
border-bottom:1px solid var(--border);
font-size:.92rem;
}
.cat-list li:last-child {
border-bottom:none;
}
.cat-list a:hover {
color:var(--teal-600);
}
.cat-list .count {
font-family:var(--font-mono);
color:var(--text-400);
font-size:.8rem;
}
/* Service detail page */
.detail-block {
padding:64px 0;
border-bottom:1px solid var(--border);
}
.detail-block:last-of-type {
border-bottom:none;
}
.check-list li {
display:flex;
gap:12px;
padding:10px 0;
align-items:flex-start;
}
.check-list i {
color:var(--teal-600);
margin-top:5px;
flex-shrink:0;
}
.expertise-box {
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius-md);
padding:40px 44px;
}
.expertise-box .check-list {
display:grid;
grid-template-columns:1fr 1fr;
column-gap:36px;
}
.expertise-box .check-list li {
padding:16px 0;
border-bottom:1px solid var(--border);
font-size:1rem;
}
.expertise-box .check-list li:nth-last-child(-n+2) {
border-bottom:none;
}
.expertise-box .check-list i {
font-size:1.1rem;
}
@media (max-width:767px) {
.expertise-box .check-list {
grid-template-columns:1fr;
}
.expertise-box .check-list li:nth-last-child(-n+2) {
border-bottom:1px solid var(--border);
}
.expertise-box .check-list li:last-child {
border-bottom:none;
}
}
.method-chip {
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 18px;
border-radius:100px;
background:var(--bg-navy-tint);
color:var(--navy-900);
font-size:.86rem;
font-weight:600;
margin:0 8px 8px 0;
}
.method-chip i {
color:var(--teal-600);
}
/* Map placeholder */
.map-placeholder {
border-radius:var(--radius-md);
overflow:hidden;
height:100%;
min-height:340px;
position:relative;
background:var(--bg-navy-tint) url('data:image/svg+xml;utf8,');
}
.map-placeholder iframe {
width:100%;
height:100%;
min-height:340px;
border:0;
filter:grayscale(.2) contrast(1.05);
}
/* Skip link */
.skip-link {
position:absolute;
left:-999px;
top:0;
background:var(--teal-500);
color:var(--navy-950);
padding:14px 22px;
z-index:2000;
font-weight:700;
border-radius:0 0 8px 0;
}
.skip-link:focus {
left:0;
}
/* Utility spacing */
.mt-0 {
margin-top:0 !important;
}
.mb-0 {
margin-bottom:0 !important;
}
/* ===== FULL WEBSITE RESPONSIVE ===== */
@media (max-width: 768px) {
body {
overflow-x: hidden;
}
.container {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
.hero {
min-height: auto;
margin-top: 0;
border-radius: 0;
}
.hero-content {
padding: 40px 0;
width: 100%;
max-width: 100%;
}
.hero h1 {
font-size: 36px;
line-height: 1.15;
}
.hero-sub {
font-size: 16px;
line-height: 1.6;
max-width: 100%;
}
.hero-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.hero-actions .btn {
width: 100%;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
.row {
margin-left: 0;
margin-right: 0;
}
[class*="col-"] {
width: 100%;
max-width: 100%;
flex: 0 0 100%;
}
.site-header {
width: 100%;
}
.hero-bg {
width: 100%;
max-width: 100%;
overflow: hidden;
}
.hero-bg img {
width: 100%;
object-fit: cover;
}
}
/* <-- ADD THIS: closes @media (max-width: 768px) from line 618 */
/* ===== TABLET ===== */
@media (min-width: 769px) and (max-width: 1024px) {
.container {
width: 100%;
padding-left: 30px;
padding-right: 30px;
}
.hero h1 {
font-size: 56px;
}
img {
max-width: 100%;
height: auto;
}
}
/* ================================================================
TASK 1: TESTIMONIALS + TRUST
================================================================ */
.testimonial-card {
height: 100%;
padding: 32px;
}
.testimonial-card blockquote {
margin: 0;
color: var(--text-700);
font-size: 1rem;
line-height: 1.75;
}
.testimonial-card__quote {
color: var(--teal-500);
font-size: 1.25rem;
margin-bottom: 20px;
}
.testimonial-author {
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid var(--border);
}
.testimonial-author h4, .testimonial-author p {
margin-bottom: 0;
}
.trust-section .lede {
max-width: 720px;
}
@media (max-width: 767px) {
.testimonial-card {
padding: 24px;
}
}
/* ================================================================
TASK 1: WORLD OFFICES
================================================================ */
.office-card {
height: 100%;
padding: 32px 28px;
}
.office-card h3 {
margin: 14px 0 22px;
}
.office-card ul {
margin: 0;
padding: 0;
}
.office-card li {
margin-bottom: 12px;
color: var(--text-500);
font-size: .92rem;
line-height: 1.65;
}
.office-card li:last-child {
margin-bottom: 0;
}
@media (max-width: 767px) {
.office-card {
padding: 26px 22px;
}
}
/* TEAM GRID: force 3 columns */
.team-card {
width: 100%;
}
/* Mission & Vision section */
.bg-navy > .container {
width:100% !important;
max-width:1300px !important;
}
.bg-navy .team-grid {
display:grid !important;
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:28px !important;
width:100% !important;
}
.bg-navy .team-grid > .col-md-6 {
width:auto !important;
max-width:none !important;
}
/* Homepage Industries Grid */
.industry-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}
.industry-grid > .col-md-4 {
width:100%;
}
@media (max-width:767px) {
.industry-grid {
grid-template-columns:1fr;
}
}
/* Industries: 3 x 2 grid */
.industry-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.industry-grid > .col-md-4 {
width: 100%;
}
@media (max-width: 767px) {
.industry-grid {
grid-template-columns: 1fr;
}
}
.industry-cta {
text-align:center;
margin-top:48px;
}
/* Homepage Services Grid */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.services-grid > [class*="col-"] {
width: 100%;
max-width: none;
}
.services-grid .center-card {
grid-column: 2 / 3;
}
@media (max-width: 991px) and (min-width: 768px) {
.services-grid .center-card {
grid-column: 1 / 3;
}
}
@media (max-width: 767px) {
.services-grid .center-card {
grid-column: 1 / 2;
}
}
@media (max-width: 991px) and (min-width: 768px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Quality Assurance layout */
.qa-layout {
display:grid;
grid-template-columns:5fr 7fr;
gap:48px;
align-items:center;
}
.qa-layout > .col-lg-5, .qa-layout > .col-lg-7 {
width:auto;
max-width:none;
}
.qa-features {
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:repeat(3, auto);
grid-auto-flow:column;
gap:24px 32px;
}
.qa-features > .col-md-6 {
display:contents;
}
.qa-features > .col-md-6:first-child .feature-item {
margin-right:-16px;
padding-right:16px;
}
.qa-features > .col-md-6:last-child .feature-item {
margin-left:-16px;
padding-left:16px;
}
@media (max-width:991px) {
.qa-layout {
grid-template-columns:1fr;
}
}
@media (max-width:767px) {
.qa-features {
grid-template-columns:1fr;
grid-template-rows:none;
grid-auto-flow:row;
}
}
/* Insights 4-column grid */
.insights-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.insights-grid > .col-md-4 {
width: auto;
max-width: none;
}
@media (max-width: 991px) {
.insights-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.insights-grid {
grid-template-columns: 1fr;
}
}
/* FINAL TEAM SECTION ALIGNMENT */
.team-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
width: 100%;
max-width: none;
margin: 0 auto;
}
.team-card-center {
grid-column: 2 / 3;
}
.team-grid > [class*="col-"] {
width: auto;
max-width: none;
}
.team-card {
width: 100%;
text-align: center;
}
.team-card .tc-img {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.team-card .tc-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
/* ========================================================================
RESPONSIVE HARDENING - FINAL
Mobile/tablet only. No HTML structure, content or desktop grid changes.
======================================================================== */
@media (max-width: 991px) {
.container, .container-narrow {
width: 100%;
max-width: 100%;
}
.split {
grid-template-columns: 1fr;
gap: 40px;
}
.split-media img {
width: 100%;
max-width: 100%;
}
.footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stats-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
html, body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.container, .container-narrow {
width: 100%;
max-width: 100%;
padding-left: 20px;
padding-right: 20px;
}
.section {
padding: 56px 0;
}
/* Every custom grid becomes a single readable column. */
.team-grid, .bg-navy .team-grid, .industry-grid, .services-grid, .insights-grid, .home-insights-grid, .process-steps, .qa-features {
grid-template-columns: minmax(0, 1fr) !important;
width: 100%;
max-width: 100%;
}
.qa-features {
grid-template-rows: none !important;
grid-auto-flow: row !important;
}
.team-grid > [class*="col-"], .industry-grid > [class*="col-"], .services-grid > [class*="col-"], .insights-grid > [class*="col-"], .home-insights-grid > [class*="col-"] {
width: 100%;
max-width: 100%;
min-width: 0;
}
.team-card, .service-card, .industry-card, .insight-card {
width: 100%;
max-width: 100%;
min-width: 0;
}
.team-card .tc-img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
}
.hero {
min-height: auto;
padding: 128px 0 64px;
}
.page-hero {
padding: 128px 0 64px;
}
.hero-content {
width: 100%;
max-width: 100%;
}
.hero h1, .page-hero h1 {
font-size: clamp(2rem, 9vw, 2.75rem);
line-height: 1.12;
overflow-wrap: anywhere;
}
.hero-sub, .lede {
max-width: 100%;
font-size: 1rem;
}
.hero-actions {
width: 100%;
flex-direction: column;
gap: 12px;
margin-bottom: 36px;
}
.hero-actions .btn {
width: 100%;
max-width: 100%;
}
.hero-chart {
width: 130%;
max-width: 130%;
margin-left: -15%;
overflow: visible;
}
.hero-chart svg {
width: 100%;
}
.stats-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 16px;
}
.stat-item {
min-width: 0;
padding-left: 12px;
}
.stat-num, .stat-label, .eyebrow, .breadcrumb {
overflow-wrap: anywhere;
}
.feature-item, .footer-contact li {
min-width: 0;
}
.footer-grid {
grid-template-columns: minmax(0, 1fr);
gap: 36px;
}
.footer-bottom, .footer-bottom .legal-links {
flex-direction: column;
align-items: flex-start;
}
.footer-bottom .legal-links {
gap: 10px;
}
.site-footer {
padding-bottom: 70px;
}
.cookie-banner {
padding: 16px 20px;
gap: 14px;
}
.cookie-actions {
width: 100%;
}
.cookie-actions .btn {
flex: 1 1 0;
min-width: 0;
}
.pagination-custom {
flex-wrap: wrap;
}
/* Long strings, URLs and form controls must never create page overflow. */
p, li, a, h1, h2, h3, h4, h5, h6, label, input, textarea, select, button {
overflow-wrap: anywhere;
}
input, textarea, select {
max-width: 100%;
}
table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 575px) {
.container, .container-narrow {
padding-left: 16px;
padding-right: 16px;
}
.stats-row {
grid-template-columns: 1fr;
}
.stat-item, .stat-item:nth-child(3) {
border-left: 0;
padding-left: 0;
}
.section-head {
margin-bottom: 36px;
}
.section-head.center {
text-align: left;
}
.btn {
white-space: normal;
}
.whatsapp-float {
left: 16px;
bottom: 16px;
}
.back-to-top {
right: 16px;
bottom: 16px;
}
}
/* ================================================================
FINAL POLISH: SERVICES / QUALITY / REGIONAL HUBS
Preserves existing HTML, content and component structure.
================================================================ */
/* Data Collection: 3-column / 2-row editorial card grid */
section[aria-labelledby="collection-title"] .row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin: 0;
}
section[aria-labelledby="collection-title"] .row > [class*="col-"] {
width: auto;
max-width: none;
padding: 0;
}
section[aria-labelledby="collection-title"] .value-card {
position: relative;
min-height: 100%;
padding: 30px 28px 28px;
overflow: hidden;
border: 1px solid rgba(10,31,61,.10);
border-radius: var(--radius-md);
background: #fff;
box-shadow: 0 8px 24px rgba(8,21,39,.08);
transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
section[aria-labelledby="collection-title"] .value-card::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(180deg, var(--teal-400), var(--teal-600));
transform: scaleY(0);
transform-origin: bottom;
transition: transform .35s var(--ease);
}
section[aria-labelledby="collection-title"] .value-card:hover {
transform: translateY(-7px);
border-color: rgba(249,115,22,.35);
box-shadow: 0 18px 42px rgba(8,21,39,.18);
}
section[aria-labelledby="collection-title"] .value-card:hover::before {
transform: scaleY(1);
}
/* The parent .bg-navy makes all h4s white. These cards are white, so
explicitly restore the intended dark heading colour. */
section[aria-labelledby="collection-title"] .value-card h4 {
color: var(--navy-900);
font-size: 1.08rem;
line-height: 1.3;
margin-bottom: 14px;
}
section[aria-labelledby="collection-title"] .value-card p {
color: var(--text-500);
font-size: .92rem;
line-height: 1.7;
}
section[aria-labelledby="collection-title"] .value-card .v-num {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
border-radius: 50%;
background: var(--teal-100);
color: var(--teal-600);
font-size: .72rem;
letter-spacing: .06em;
transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
section[aria-labelledby="collection-title"] .value-card:hover .v-num {
transform: translateY(-2px) scale(1.05);
background: var(--navy-900);
color: var(--teal-400);
}
/* Quality Assurance: 3-column premium feature cards */
section[aria-labelledby="quality-title"] .row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin: 0;
}
section[aria-labelledby="quality-title"] .row > [class*="col-"] {
width: auto;
max-width: none;
padding: 0;
}
section[aria-labelledby="quality-title"] .feature-item {
position: relative;
height: 100%;
min-height: 220px;
display: flex;
flex-direction: column;
gap: 22px;
padding: 28px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: #fff;
box-shadow: var(--shadow-sm);
transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
section[aria-labelledby="quality-title"] .feature-item:hover {
transform: translateY(-7px);
border-color: rgba(249,115,22,.35);
box-shadow: var(--shadow-lg);
}
section[aria-labelledby="quality-title"] .feature-item .fi-icon {
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--teal-100);
color: var(--teal-600);
transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
section[aria-labelledby="quality-title"] .feature-item:hover .fi-icon {
transform: translateY(-3px) rotate(-3deg);
background: var(--navy-900);
color: var(--teal-400);
}
section[aria-labelledby="quality-title"] .feature-item h4 {
color: var(--navy-900);
font-size: 1.05rem;
line-height: 1.3;
margin-bottom: 9px;
}
section[aria-labelledby="quality-title"] .feature-item p {
color: var(--text-500);
font-size: .9rem;
line-height: 1.7;
}
/* Regional hubs: 2-column / 2-row grid */
section[aria-labelledby="regional-title"] .row.g-4 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
margin: 0;
}
section[aria-labelledby="regional-title"] .row.g-4 > [class*="col-"] {
width: auto;
max-width: none;
padding: 0;
}
section[aria-labelledby="regional-title"] .office-card {
position: relative;
min-height: 240px;
padding: 30px 28px;
overflow: hidden;
transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
section[aria-labelledby="regional-title"] .office-card::after {
content: "";
position: absolute;
right: 24px;
bottom: 20px;
width: 42px;
height: 2px;
background: var(--teal-500);
transform: scaleX(.35);
transform-origin: right;
transition: transform .35s var(--ease);
}
section[aria-labelledby="regional-title"] .office-card:hover {
transform: translateY(-7px);
border-color: rgba(249,115,22,.35);
box-shadow: var(--shadow-lg);
}
section[aria-labelledby="regional-title"] .office-card:hover::after {
transform: scaleX(1);
}
section[aria-labelledby="regional-title"] .office-card h3 {
transition: color .35s var(--ease);
}
section[aria-labelledby="regional-title"] .office-card:hover h3 {
color: var(--teal-600);
}
/* Responsive behaviour for the three upgraded grids */
@media (max-width: 991px) {
section[aria-labelledby="collection-title"] .row, section[aria-labelledby="quality-title"] .row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
section[aria-labelledby="collection-title"] .row, section[aria-labelledby="quality-title"] .row, section[aria-labelledby="regional-title"] .row.g-4 {
grid-template-columns: minmax(0, 1fr);
}
section[aria-labelledby="collection-title"] .value-card, section[aria-labelledby="quality-title"] .feature-item, section[aria-labelledby="regional-title"] .office-card {
min-height: 0;
}
}
/* RFQ CTA spacing */
.rfq-cta {
margin-top: 56px !important;
}
@media (max-width: 767px) {
.rfq-cta {
margin-top: 40px !important;
}
}
/* =========================================================
INSIGHT WITH INTENT — HEADER + VISUAL
========================================================= */
.intent-head-left {
display:grid;
grid-template-columns:minmax(0, 1.15fr) minmax(320px, .85fr);
align-items:center;
gap:96px;
max-width:none;
margin-bottom:82px;
}
/* left content */
.intent-head-copy {
max-width:720px;
}
/* right illustration */
.intent-head-visual {
display:flex;
align-items:center;
justify-content:center;
min-height:100%;
padding:8px 0;
}
/* illustration itself */
.intent-head-visual img {
display:block;
width:100%;
max-width:430px;
height:auto;
margin:0 auto;
mix-blend-mode:multiply;
opacity:.92;
pointer-events:none;
}
/* ---------------------------------------------------------
RESPONSIVE
--------------------------------------------------------- */
@media (max-width:991px) {
.intent-head-left {
grid-template-columns:minmax(0, 1fr) minmax(250px, .65fr);
gap:40px;
}
.intent-head-visual {
min-height:0px;
}
.intent-head-visual img {
max-width:340px;
}
}
@media (max-width:767px) {
.intent-head-left {
grid-template-columns:1fr;
gap:20px;
margin-bottom:52px;
}
.intent-head-copy {
max-width:none;
}
.intent-head-visual {
min-height:0px;
justify-content:center;
}
.intent-head-visual img {
max-width:300px;
}
}
/* =========================================================
INSIGHT WITH INTENT
========================================================= */
.intent-head-left {
display:grid;
grid-template-columns:minmax(0, 1.15fr) minmax(320px, .85fr);
align-items:center;
gap:96px;
max-width:none;
margin-bottom:86px;
}
.intent-head-copy {
max-width:720px;
}
.intent-head-visual {
display:flex;
align-items:center;
justify-content:center;
min-height:100%;
padding:8px 0;
}
.intent-head-visual img {
display:block;
width:100%;
max-width:430px;
height:auto;
margin:0 auto;
mix-blend-mode:multiply;
opacity:.92;
pointer-events:none;
}
/* =========================================================
OUR APPROACH
========================================================= */
.intent-approach {
display:grid;
grid-template-columns:minmax(0, 1.05fr) minmax(380px, .95fr);
gap:100px;
align-items:start;
margin-top:8px;
margin-bottom:88px;
}
.intent-approach-copy {
max-width:680px;
}
.intent-approach-copy p {
margin:0 0 24px;
color:var(--ink-700);
font-size:.96rem;
line-height:1.8;
}
.intent-approach-copy p:last-child {
margin-bottom:0;
}
/* =========================================================
OUR APPROACH — EDITORIAL PRINCIPLES
========================================================= */
/* ---------------------------------------------------------
PRINCIPLE ROW
--------------------------------------------------------- */
.intent-feature-card {
position:relative;
display:grid;
grid-template-columns:40px minmax(0,1fr) 90px;
grid-template-areas: "icon title number" "icon text number";
align-items:start;
column-gap:20px;
padding:30px 0 30px 0;
border-top:1px solid rgba(10,31,61,.12);
border-left:2px solid transparent;
background:transparent;
transition: padding-left .3s ease, border-color .3s ease;
}
.intent-feature-card:first-child {
padding-top:2px;
border-top:none;
}
/* last row closes the list */
.intent-feature-card:last-child {
border-bottom:1px solid rgba(10,31,61,.12);
}
/* ---------------------------------------------------------
NUMBER
--------------------------------------------------------- */
.intent-feature-card::before {
content:"";
grid-area:number;
display:flex;
align-items:flex-start;
justify-content:flex-end;
font-family:var(--font-display);
font-size:2.75rem;
font-weight:500;
line-height:1;
color:rgba(10,31,61,.12);
pointer-events:none;
}
.intent-feature-card:nth-child(1)::before {
content:"01";
}
.intent-feature-card:nth-child(2)::before {
content:"02";
}
.intent-feature-card:nth-child(3)::before {
content:"03";
}
/* ---------------------------------------------------------
ICON
--------------------------------------------------------- */
.intent-feature-icon {
grid-area:icon;
display:flex;
align-items:flex-start;
justify-content:flex-start;
margin-top:6px;
color:var(--teal-500);
font-size:1.35rem;
transition:color .3s ease, transform .3s ease;
}
/* ---------------------------------------------------------
TITLE
--------------------------------------------------------- */
.intent-feature-card h3 {
grid-area:title;
margin:0 0 8px;
color:var(--navy-900);
font-family:var(--font-display);
font-size:1.65rem;
font-weight:500;
line-height:1.15;
}
/* ---------------------------------------------------------
DESCRIPTION
--------------------------------------------------------- */
.intent-feature-card p {
grid-area:text;
margin:0;
max-width:470px;
color:var(--ink-700);
font-size:.82rem;
line-height:1.65;
}
/* ---------------------------------------------------------
HOVER
--------------------------------------------------------- */
.intent-feature-card:hover {
padding-left:10px;
border-left-color:var(--teal-500);
}
.intent-feature-card:hover::before {
color:rgba(10,31,61,.28);
}
.intent-feature-card:hover .intent-feature-icon {
color:var(--navy-900);
transform:translateX(2px);
}
/* =========================================================
AI-POWERED DATA ENGINEERING
========================================================= */
.intent-engineering {
position:relative;
overflow:hidden;
padding:38px 40px;
border:1px solid rgba(10,31,61,.10);
border-left:4px solid var(--teal-500);
border-radius:16px;
background:#fff;
box-shadow:0 12px 30px rgba(10,31,61,.055);
}
.intent-engineering::after {
content:"";
position:absolute;
right:-100px;
bottom:-100px;
width:220px;
height:220px;
border-radius:50%;
background:rgba(249,115,22,.045);
pointer-events:none;
}
.intent-engineering-content {
position:relative;
z-index:1;
max-width:1120px;
}
.intent-engineering-kicker {
display:flex;
align-items:center;
gap:12px;
margin-bottom:18px;
font-family:var(--font-mono);
font-size:.68rem;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--navy-900);
}
.intent-engineering-kicker span:first-child {
width:26px;
height:2px;
background:var(--teal-500);
}
.intent-engineering-content > p {
max-width:1050px;
margin:0 0 24px;
color:var(--ink-700);
font-size:.92rem;
line-height:1.75;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width:991px) {
.intent-head-left {
grid-template-columns:minmax(0, 1fr) minmax(250px, .65fr);
gap:40px;
}
.intent-approach {
grid-template-columns:1fr;
gap:40px;
}
}
@media (max-width:767px) {
.intent-head-left {
grid-template-columns:1fr;
gap:20px;
margin-bottom:52px;
}
.intent-head-copy {
max-width:none;
}
.intent-head-visual {
min-height:0;
}
.intent-head-visual img {
max-width:300px;
}
.intent-approach {
gap:32px;
margin-bottom:48px;
}
.intent-feature-card {
grid-template-columns:30px minmax(0,1fr);
grid-template-areas: "icon title" "icon text";
column-gap:12px;
padding:20px 0;
}
.intent-feature-card::before {
grid-area:unset;
position:absolute;
top:20px;
right:0;
font-size:1.8rem;
}
.intent-engineering {
padding:30px 24px;
}
}
@media (max-width:480px) {
.intent-tab {
padding:36px 22px;
}
.intent-kicker {
margin-bottom:18px;
}
.intent-tab h3 {
font-size:1.8rem;
}
.intent-tab > p {
font-size:.9rem;
}
.intent-point span {
font-size:.75rem;
}
.intent-cover {
min-height:260px;
height:260px;
}
.intent-image-label {
padding:12px 14px;
}
.intent-image-label span:first-child {
font-size:.58rem;
}
}
/* =========================================================
CUSTOM GRID SYSTEM (Bootstrap-free replacement)
Mirrors .row / .col-* / .g-* / flex & spacing utilities
Breakpoints: sm 576px, md 768px, lg 992px
========================================================= */
.row:where(:not(.services-grid):not(.industry-grid):not(.team-grid):not(.home-insights-grid)) {
display:flex;
flex-wrap:wrap;
margin-right:-12px;
margin-left:-12px;
}
.row > [class*="col-"] {
padding-right:12px;
padding-left:12px;
box-sizing:border-box;
}
.g-4:not(.services-grid):not(.industry-grid):not(.home-insights-grid):not(.team-grid):not(.pillars-grid) {
row-gap:24px;
}
.g-5 {
row-gap:32px;
}
.col-12 {
flex:0 0 auto;
width:100%;
}
.col-sm-4,.col-md-4,.col-md-6,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-12 {
flex:0 0 auto;
width:100%;
}
@media (min-width:576px) {
.col-sm-4 {
flex:0 0 auto;
width:33.3333%;
}
}
@media (min-width:768px) {
.col-md-4 {
flex:0 0 auto;
width:33.3333%;
}
.col-md-6 {
flex:0 0 auto;
width:50%;
}
}
.d-none {
display:none;
}
@media (min-width:992px) {
.col-lg-3 {
flex:0 0 auto;
width:25%;
}
.col-lg-4 {
flex:0 0 auto;
width:33.3333%;
}
.col-lg-5 {
flex:0 0 auto;
width:41.6667%;
}
.col-lg-6 {
flex:0 0 auto;
width:50%;
}
.col-lg-7 {
flex:0 0 auto;
width:58.3333%;
}
.col-lg-8 {
flex:0 0 auto;
width:66.6667%;
}
.col-lg-9 {
flex:0 0 auto;
width:75%;
}
.col-lg-12 {
flex:0 0 auto;
width:100%;
}
.offset-lg-2 {
margin-left:16.6667%;
}
.d-lg-block {
display:block;
}
}
/* Flex utilities */
.d-flex {
display:flex;
}
.d-inline-flex {
display:inline-flex;
}
.align-items-center {
align-items:center;
}
.justify-content-center {
justify-content:center;
}
.flex-wrap {
flex-wrap:wrap;
}
.flex-column {
flex-direction:column;
}
.flex-grow-1 {
flex-grow:1;
}
@media (min-width:576px) {
.flex-sm-row {
flex-direction:row;
}
}
/* Spacing utilities (rem-based, matches Bootstrap's 0.25rem step * n) */
.mt-2 {
margin-top:.5rem !important;
}
.mt-4 {
margin-top:1.5rem !important;
}
.mt-5 {
margin-top:3rem !important;
}
.mb-0 {
margin-bottom:0 !important;
}
.mb-1 {
margin-bottom:.25rem !important;
}
.mb-3 {
margin-bottom:1rem !important;
}
.mb-4 {
margin-bottom:1.5rem !important;
}
.mb-5 {
margin-bottom:3rem !important;
}
/* Text utilities */
.text-center {
text-align:center !important;
}
.text-lg {
font-size:1.125rem;
}
.text-white {
color:#fff !important;
}
/* Tighter spacing for homepage About/Insight section */
.about-intro {
padding:64px 0;
}
.about-intro .split {
gap:56px;
}
.about-intro .lede {
font-size:1.05rem;
line-height:1.7;
}
.about-intro .section-head, .about-intro .eyebrow {
margin-bottom:10px;
}
/* ===== Missing Bootstrap-replacement utilities ===== */
.h-100 {
height:100%;
}
.w-100 {
width:100%;
}
.p-4 {
padding:1.5rem;
}
.position-relative {
position:relative;
}
.gap-2 {
gap:.5rem;
}
.gap-3 {
gap:1rem;
}
.list-unstyled {
list-style:none;
padding-left:0;
margin:0;
}
.rounded-4 {
border-radius:1rem;
}
.shadow-sm {
box-shadow:0 .125rem .25rem rgba(0,0,0,.075);
}
.text-white-50 {
color:rgba(255,255,255,.5) !important;
}
.visually-hidden {
position:absolute !important;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
@media (min-width:768px) {
.p-md-5 {
padding:3rem;
}
}
@media (min-width:992px) {
.text-lg-end {
text-align:right !important;
}
}
.home-insights-grid > [class*="col-"] {
width:100%;
max-width:none;
padding:0;
}
/* =========================================================================
MOBILE HARDENING LAYER (appended last on purpose)
This section deliberately sits at the very end of the file so it wins
the cascade over any earlier same-specificity rules (incl. leftover
patches from previous fix attempts) without disturbing the existing
desktop grid, theme, spacing or content. Nothing here changes anything
above 992px. Goal: guarantee no horizontal overflow / broken layout on
phones and small tablets, no matter what a specific page's custom block
does.
========================================================================= */
/* Global overflow guard */
html, body {
max-width:100%;
overflow-x:hidden;
}
img, svg, video, iframe, embed, object, canvas {
max-width:100%;
height:auto;
}
/* Give flex/grid text columns room to wrap normally instead of shrinking
to their content's min-width, but only inside flex/grid containers,
never globally (a blanket min-width:0 on * breaks icon+text rows like
.feature-item by letting the text column collapse to near 0). */
.feature-item > div:last-child, .job-row > div:first-child, .check-list li > span, .testimonial-card blockquote {
min-width:0;
flex:1 1 auto;
}
table {
display:block;
max-width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
pre, code {
max-width:100%;
overflow-x:auto;
}
/* Tap targets & inputs shouldn't force zoom/overflow on iOS */
input, select, textarea, button {
max-width:100%;
font-size:16px;
}
.btn {
max-width:100%;
white-space:normal;
}
@media (max-width:991px) {
/* Any custom fixed/min-width flex or grid column collapses safely unless
the page already defines its own tablet/mobile rule for it (those win
due to higher specificity or later, more specific selectors above). */
.hero-col-text {
min-width:0;
}
.hero-col-chart {
min-width:0;
}
}
@media (max-width:767px) {
.container, .container-narrow {
padding-left:20px;
padding-right:20px;
}
h1 {
font-size:clamp(2rem,8vw,2.6rem);
}
h2 {
font-size:clamp(1.6rem,7vw,2.1rem);
}
h3 {
font-size:clamp(1.15rem,5vw,1.35rem);
}
/* Any two/three/four column grid or flex row that hasn't already been
given an explicit mobile rule earlier in this file falls back to a
single readable column instead of squeezing or overflowing. */
.stats-row, .footer-grid, .process-steps, .split, .industry-grid, .services-grid, .qa-layout, .bg-navy .team-grid, .row.pillars-grid, .intent-approach, .expertise-box .check-list {
gap:24px;
}
.qa-layout {
grid-template-columns:1fr !important;
}
.qa-layout > .col-lg-5, .qa-layout > .col-lg-7 {
width:100% !important;
}
.services-grid .center-card {
grid-column:auto !important;
}
/* Flex rows that don't already wrap on mobile */
.job-row {
flex-direction:column;
align-items:flex-start;
padding:22px 20px;
}
.job-row > a, .job-row > .btn {
width:100%;
text-align:center;
}
.cookie-banner {
flex-direction:column;
text-align:center;
padding:18px 20px;
gap:16px;
}
/* Section head / lede blocks shouldn't rely on a wide max-width on
narrow screens */
.section-head, .lede, .trust-section .lede {
max-width:100%;
}
/* Sidebar (blog) stacks under content naturally via column flow, just
make sure nothing pins it to a fixed width */
.sidebar-card {
width:100%;
}
/* Map / embeds */
.map-placeholder {
min-height:260px;
}
.map-placeholder iframe {
min-height:260px;
}
}
@media (max-width:575px) {
.container, .container-narrow {
padding-left:16px;
padding-right:16px;
}
.section {
padding:44px 0;
}
.expertise-box {
padding:28px 22px;
}
.value-card {
padding:26px 22px;
}
.cta-band {
padding:44px 20px;
}
}
/* RESPONSIVE FIX: Team grid must stay single-column on phones. */
@media (max-width: 767px) {
.team-grid {
grid-template-columns:minmax(0, 1fr) !important;
}
/* The final team member is intentionally centered on desktop. On mobile,
reset that desktop-only grid-column so it cannot create an implicit
second column and squeeze the entire team section. */
.team-grid > .team-card-center {
grid-column:auto !important;
}
.team-grid > [class*="col-"] {
grid-column:auto !important;
}
.team-card h4, .team-card .tc-role, .team-card p {
max-width:100%;
overflow-wrap:anywhere;
}
.team-card .tc-role {
display:block;
}
}
/* FINAL MOBILE VISUAL HARDENING */
@media (max-width: 991px) {
.split-media .media-badge {
left:0;
}
}
@media (max-width: 767px) {
.hero-chart {
width:100%;
max-width:100%;
margin-left:0;
overflow:hidden;
}
.hero-chart svg {
width:100%;
}
}
/* ========================================================================
MOBILE NAV — SCROLLED STATE + STACKING FIX
Keep the off-canvas menu above page content at every scroll position.
The earlier .site-header.is-scrolled .nav-links a selector was more
specific than the mobile rule, making the menu text dark on navy.
======================================================================== */
@media (max-width: 991px) {
.site-header {
z-index:5000;
isolation:isolate;
}
.site-header .nav-backdrop {
z-index:5000;
}
.site-header .nav-links {
z-index:5001;
}
.site-header.is-scrolled .nav-links a, .site-header.is-scrolled .nav-links a:hover, .site-header.is-scrolled .nav-links a:focus-visible, .site-header.is-scrolled .nav-links a.active {
color:#fff !important;
}
.site-header.is-scrolled .nav-links a:hover, .site-header.is-scrolled .nav-links a:focus-visible, .site-header.is-scrolled .nav-links a.active {
background:rgba(255,255,255,.08);
}
}
/* ========================================================================
BLOG / INSIGHTS MOBILE SIDEBAR FIX
Keep the desktop two-card sidebar intact, but stack the cards vertically
on phones so each block has a comfortable readable width.
Scoped to the insights section so other pages are unaffected.
======================================================================== */
@media (max-width:767px) {
.sidebar-card {
width:100% !important;
max-width:100%;
margin-bottom:0;
}
.col-lg-12 > aside[style*="display:flex"] {
display:flex !important;
flex-direction:column !important;
width:100%;
max-width:100%;
gap:20px !important;
align-items:stretch;
}
.col-lg-12 > aside[style*="display:flex"] > .sidebar-card {
flex:0 0 auto;
}
}
/* ============================================================
SITE PRELOADER — Venus loading sequence
============================================================ */
#site-preloader {
position: fixed;
inset: 0;
z-index: 99999;
display: grid;
place-items: center;
min-height: 100svh;
height: 100dvh;
padding: env(safe-area-inset-top, 0px)
env(safe-area-inset-right, 0px)
env(safe-area-inset-bottom, 0px)
env(safe-area-inset-left, 0px);
overflow: hidden;
isolation: isolate;
color: var(--white);
background:
radial-gradient(circle at 50% 46%, rgba(23, 58, 99, 0.2), transparent 38%),
linear-gradient(180deg, #071424 0%, #081A30 58%, #071321 100%);
opacity: 1;
visibility: visible;
transition:
opacity 1.3s cubic-bezier(0.45, 0, 0.2, 1) 0.25s,
visibility 0s linear 1.55s;
}
#site-preloader::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background:
linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
background-size: 64px 64px;
opacity: 0.7;
}
#site-preloader::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
width: min(70vw, 720px);
aspect-ratio: 1;
border-radius: 50%;
background:
radial-gradient(circle at 34% 42%, rgba(13, 175, 166, 0.06), transparent 28%),
radial-gradient(circle at 67% 58%, rgba(249, 115, 22, 0.035), transparent 30%);
filter: blur(32px);
transform: translate(-50%, -50%) scale(0.94);
animation: preloaderAmbientPulse 3.6s ease-in-out infinite;
pointer-events: none;
}
#site-preloader.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Exit sequence ("curtain lift"):
1. the logo stage softens away first,
2. then the deep-navy curtain dissolves to reveal the fully rendered page.
The page itself is never faded, so no light/white wash can appear
mid-transition: the blend is always navy -> website. */
.preloader-stage {
transition:
transform 0.9s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
#site-preloader.is-hidden .preloader-stage {
opacity: 0;
transform: scale(1.05);
}
/* Lock scrolling only while the loader is on screen. */
html.preloader-active {
overflow: hidden;
}
.preloader-stage {
position: relative;
width: min(430px, calc(100vw - 32px));
aspect-ratio: 1;
display: grid;
place-items: center;
isolation: isolate;
contain: layout paint;
}
.preloader-grid {
position: absolute;
inset: 7%;
z-index: -1;
border-radius: 50%;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.17) 1px, transparent 1.2px);
background-size: 22px 22px;
opacity: 0.075;
}
.preloader-orbit {
position: absolute;
border-radius: 50%;
pointer-events: none;
will-change: transform;
}
/* ------------------------------------------------------------
Outer rotating arcs
- The spinning element is a plain (not the