/* ═══════════════════════════════════════════════════════════════════════════
EVIZ — mobile.css
Mobile-first overrides for index.html + style.css
─────────────────────────────────────────────────────────────────────────
RULES:
• Every rule lives inside @media (max-width: 768px) or a narrower query.
• No desktop layout is touched. No existing selector is changed outside
a media query.
• Link in AFTER style.css so cascade order is correct:
─────────────────────────────────────────────────────────────────────────
VIEWPORT NOTE:
The existing viewport meta tag is already correct:
No HTML change needed.
═══════════════════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────────────────
SECTION 1 — GLOBAL / BASE (≤ 768 px)
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Prevent horizontal scroll from overflowing fixed children */
body {
overflow-x: hidden;
/* Reduce body top-padding to match the slimmer mobile header height */
padding-top: 108px;
}
/* Smooth scroll already declared in style.css; keep it here for mobile too */
html {
scroll-behavior: smooth;
}
/* Global image safeguard — no image ever bleeds past its container */
img {
max-width: 100%;
height: auto;
}
/* ── Universal section side padding on mobile ── */
.wia-section,
.about-section,
.hiw-section,
.tdb-section,
.moa-section,
.whyus-section,
.ecosystems-section,
.services-section,
.pcat-section {
padding-left: 16px;
padding-right: 16px;
}
}
/* ───────────────────────────────────────────────────────────────────────
SECTION 2 — SITE HEADER (≤ 768 px)
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Tighten the logo row */
.nav-logo {
padding: 10px 16px;
}
/* Scale logo box down so it fits on narrow screens */
.logo-box {
padding: 7px 16px;
font-size: 16px;
letter-spacing: 3px;
min-width: 88px;
/* Reduce the 3-D shadow so it doesn't clip */
box-shadow:
3px 3px 0 var(--blue-deep),
4px 4px 0 rgba(27,58,107,0.25),
3px 3px 12px rgba(27,58,107,0.20);
transform: translate(-1px, -1px);
}
/* Mega-nav: full-width, repositioned from top */
.mega-nav {
position: fixed;
top: 108px; /* sits below the mobile header */
left: 0;
right: 0;
width: 100%;
border-radius: 0 0 14px 14px;
max-height: calc(100dvh - 108px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Stack the 3-column grid to 1 column on mobile */
.mega-nav-grid {
grid-template-columns: 1fr;
}
/* Remove side borders that were for multi-column layout */
.mega-nav-col:first-child,
.mega-nav-col:nth-child(2) {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mega-nav-col {
padding: 16px 20px;
}
/* Larger tap targets for nav links (min 44 px touch height) */
.mega-nav-col a {
padding: 12px 10px;
font-size: 14px;
}
/* Submenu links */
.mega-submenu a {
padding: 10px 10px 10px 24px;
font-size: 13px;
}
/* Footer CTA row inside mega-nav */
.mega-nav-footer {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 16px 20px;
}
.mega-nav-cta-btn {
width: 100%;
text-align: center;
padding: 13px 20px;
font-size: 12px;
}
/* Nav categories — scrollable strip */
.nav-cats {
padding: 0 8px;
}
.nav-cats a {
font-size: 10px;
padding: 12px 14px;
white-space: nowrap;
}
/* Nav products — scrollable strip */
.nav-products a {
font-size: 10px;
padding: 10px 16px;
white-space: nowrap;
}
}
/* ───────────────────────────────────────────────────────────────────────
SECTION 3 — HERO (≤ 768 px)
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Stack left text + canvas vertically */
.hero {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
}
.hero-left {
padding: 40px 20px 32px;
/* Keep dark bg but remove desktop min-width constraint */
min-width: 0;
}
/* Remove the vertical divider line — it floats oddly stacked */
.hero-left::after {
display: none;
}
.tagline {
font-size: 10px;
max-width: 100%;
margin-bottom: 20px;
}
.hero-headline {
font-size: clamp(36px, 11vw, 56px);
}
.hero-sub {
font-size: 13px;
margin-top: 12px;
}
/* Canvas visual: full width, fixed aspect ratio */
.hero-visual {
width: 100%;
aspect-ratio: 16 / 9;
min-height: 220px;
}
#roomCanvas {
width: 100% !important;
height: 100% !important;
}
.stage-label {
font-size: 9px;
padding: 4px 10px;
bottom: 12px;
left: 12px;
}
}
/* ───────────────────────────────────────────────────────────────────────
SECTION 4 — CONTACT STRIP (≤ 768 px)
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.contact-strip {
flex-direction: column;
align-items: flex-start;
gap: 14px;
padding: 16px 20px;
}
.contact-text {
font-size: 15px;
}
.contact-btn {
width: 100%;
text-align: center;
padding: 14px 20px;
font-size: 12px;
}
}
/* ───────────────────────────────────────────────────────────────────────
SECTION 5 — WORK IN ACTION (≤ 768 px)
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.wia-section {
padding-top: 60px;
padding-bottom: 64px;
}
/* Headline + sub copy: stack, full width */
.wia-headline-row {
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 32px;
}
.wia-headline {
font-size: clamp(28px, 8vw, 40px);
}
.wia-sub {
font-size: 13px;
max-width: 100%;
}
/* Filter tabs: wrapping row, full stretch */
.wia-tabs {
gap: 8px;
margin-bottom: 28px;
}
.wia-tab {
padding: 10px 16px;
font-size: 11px;
/* Ensure min 44px touch height */
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* Projects grid: single column on phones */
.wia-grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 16px;
margin-bottom: 36px;
}
/* Cancel the featured card's 2-row span — pointless when single column */
.wia-card--featured {
grid-row: auto;
}
/* All card images: consistent height */
.wia-card-img {
min-height: 220px;
}
.wia-card--featured .wia-card-img {
min-height: 240px;
}
.wia-card-body {
padding: 16px;
}
/* Always show expand hint on touch (no hover on mobile) */
.wia-expand-hint {
opacity: 1;
transform: scale(1) translateY(0);
}
/* CTA row: column on mobile */
.wia-cta-row {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.wia-cta-btn {
width: 100%;
text-align: center;
padding: 15px;
}
/* Overlay modal: full screen on mobile */
#wiaOverlay {
padding: 0;
align-items: flex-end;
}
#wiaOverlay .wia-ov-card {
max-width: 100%;
width: 100%;
height: min(520px, 80dvh);
border-radius: 18px 18px 0 0;
}
.wia-ov-close {
width: 44px;
height: 44px;
}
.wia-ov-content {
padding: 20px 20px 24px;
}
}
/* ───────────────────────────────────────────────────────────────────────
SECTION 6 — ABOUT / ESTIMATE FORM (≤ 768 px)
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.about-section {
padding: 56px 16px 64px;
gap: 40px;
}
.about-title {
font-size: clamp(26px, 7vw, 36px);
text-align: center;
}
.about-subtitle {
font-size: 13px;
}
/* Stack the two-column layout vertically */
.about-body {
grid-template-columns: 1fr;
gap: 20px;
}
.about-card-dark {
padding: 32px 24px;
}
/* Stats strip: 2 × 2 grid on mobile */
.about-stats {
grid-template-columns: 1fr 1fr;
}
.about-stat {
padding: 24px 16px;
border-right: none;
border-bottom: 1px solid var(--border-blue);
}
.about-stat:nth-child(odd) {
border-right: 1px solid var(--border-blue);
}
.about-stat:last-child,
.about-stat:nth-last-child(2):nth-child(odd) {
border-bottom: none;
}
/* Form: collapse email/phone split */
.about-form-row-split {
grid-template-columns: 1fr;
gap: 16px;
}
.about-form-body {
padding: 20px 16px;
}
/* Prevent iOS zoom on focus (font-size < 16px triggers zoom) */
.about-form-row input,
.about-form-row select,
.about-form-row textarea {
font-size: 16px;
padding: 13px 14px;
}
.about-form-submit {
padding: 16px;
font-size: 13px;
min-height: 52px; /* comfortable touch target */
}
}
/* ───────────────────────────────────────────────────────────────────────
SECTION 7 — EVIZ SOLUTIONS CAROUSEL (≤ 768 px)
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Stack left panel above the card stage */
.eviz-section {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
min-height: auto;
}
.eviz-left {
width: 100%;
padding: 36px 20px 28px;
border-right: none;
border-bottom: 1px solid rgba(76,142,247,0.10);
}
/* Show progress dots — they were partially hidden at 360px */
.eviz-stage {
padding: 28px 16px 32px;
}
.eviz-stage-header {
margin-bottom: 20px;
}
.eviz-stage-headline {
font-size: clamp(22px, 6vw, 32px);
}
/* Narrower cards on phone so partial peek is visible */
.eviz-card {
width: 260px;
height: 440px;
}
/* Arrow buttons: slightly larger tap area */
.eviz-arrow {
width: 48px;
height: 48px;
}
/* Always show card body info (no hover on touch) */
.eviz-card-body {
opacity: 1;
transform: translateY(0);
}
}
/* ───────────────────────────────────────────────────────────────────────
SECTION 8 — ECOSYSTEMS GRID (≤ 768 px)
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.ecosystems-section {
padding-top: 64px;
padding-bottom: 56px;
}
/* Single-column card stack (overrides the existing 2-col at 768px) */
.eco-header {
grid-template-columns: 1fr;
margin-bottom: 40px;
}
.eco-headline {
font-size: clamp(28px, 8vw, 40px);
}
.eco-subline {
grid-column: 1;
padding-top: 0;
max-width: 100%;
font-size: 13px;
}
/* Card media: shorter on phone */
.eco-card-media {
height: 200px;
}
/* Show the CTA always visible (no hover on touch) */
.eco-card-cta {
color: rgba(200, 218, 255, 0.85);
}
/* Integration proof bar: stack items */
.eco-proof-inner {
flex-direction: column;
gap: 24px;
padding: 24px 20px;
}
.eco-proof-divider {
display: none;
}
.eco-proof-item {
padding: 0;
}
}
/* ───────────────────────────────────────────────────────────────────────
SECTION 9 — TURNKEY DESIGN & BUILD (TDB) (≤ 768 px)
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.tdb-section {
padding-top: 52px;
}
.tdb-headline {
font-size: clamp(28px, 8vw, 42px);
}
/* Rows: wrap so category label appears below cards */
.tdb-row {
flex-wrap: wrap;
}
/* Cards: always 2-column grid on phone */
.tdb-cards,
.tdb-cards--4,
.tdb-cards--3 {
grid-template-columns: repeat(2, 1fr);
flex: none;
width: 100%;
padding-right: 0;
padding-bottom: 14px;
border-bottom: none;
}
/* Category label: full-width row at bottom */
.tdb-cat {
flex: 0 0 100%;
padding-left: 0;
padding-top: 8px;
padding-bottom: 14px;
border-bottom: none;
border-top: 1.5px solid rgba(22,22,26,0.09);
}
.tdb-cat-name {
font-size: clamp(20px, 5vw, 28px);
}
/* Thumbnails: consistent height */
.tdb-thumb {
height: 150px;
border-radius: 12px;
}
/* CTA belt: stacked */
.tdb-cta-belt {
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding-bottom: 48px;
}
.tdb-cta-btn {
width: 100%;
justify-content: center;
padding: 15px 24px;
}
}
/* ───────────────────────────────────────────────────────────────────────
SECTION 10 — HOW IT WORKS (≤ 768 px)
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Stack the pill image above the carousel slides */
.hiw-section {
flex-direction: column;
gap: 0;
padding-top: 56px;
padding-bottom: 64px;
min-height: auto;
}
/* Pill image: full-width, reasonable height */
.hiw-left {
flex: none;
width: 100%;
}
.hiw-pill {
min-height: 240px;
border-radius: 14px;
margin-bottom: 24px;
}
/* Right side: full width */
.hiw-right {
flex: none;
width: 100%;
}
/* Carousel slides: single-column layout */
.hiw-slide {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
gap: 14px;
padding-right: 0;
}
.hiw-text-block {
grid-column: 1;
grid-row: 1;
padding: 0;
}
.hiw-card-top {
grid-column: 1;
grid-row: 2;
min-height: 160px;
border-radius: 14px;
}
.hiw-card-bottom {
grid-column: 1;
grid-row: 3;
min-height: 160px;
border-radius: 14px;
}
/* Slide title: larger touch-friendly size */
.hiw-slide-title {
font-size: clamp(20px, 6vw, 28px);
}
/* Dots + nav: larger touch targets */
.hiw-dot {
width: 8px;
height: 8px;
min-width: 8px; /* prevent shrinking */
}
.hiw-dot.active {
width: 28px;
}
.hiw-nav-btn {
width: 44px;
height: 44px;
}
.hiw-controls {
padding: 8px 0 0;
}
}
/* ───────────────────────────────────────────────────────────────────────
SECTION 11 — MEET OUR ARCHITECTS (≤ 768 px)
Note: existing .moa-section rule at @media (max-width: 820px) handles
the column → row flip already. These rules fine-tune below 768 px.
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.moa-section {
min-height: auto;
}
/* Left title block: horizontal, compact */
.moa-left {
flex: none;
padding: 32px 20px;
gap: 14px;
}
.moa-title {
font-size: clamp(32px, 8vw, 44px);
}
/* Right cards area */
.moa-right {
padding: 24px 16px 40px;
}
/* All cards in a single column */
.moa-grid {
grid-template-columns: 1fr;
gap: 16px;
}
/* Cancel the spanning side card */
.moa-card--side {
grid-row: auto;
grid-column: auto;
}
/* Taller photo for side card (was 200px+) */
.moa-card-photo--tall {
flex: 0 0 200px;
min-height: 200px;
}
.moa-card {
padding: 14px;
}
}
/* ───────────────────────────────────────────────────────────────────────
SECTION 12 — WHY US (≤ 768 px)
Note: existing style.css already has a @media (max-width:768px) block
for .whyus-section and .whyus-grid. These rules extend/correct it.
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.whyus-section {
padding: 64px 16px 72px;
}
/* Single column on mobile — overrides any 2-col intermediate state */
.whyus-grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 16px;
}
/* Constrain the tall image card so the page doesn't scroll forever */
.tall {
min-height: 280px;
grid-row: auto; /* cancel span 2 in single-column context */
}
.why-card {
padding: 24px 20px;
min-height: 180px;
}
.why-card h3 {
font-size: clamp(40px, 10vw, 56px);
}
.why-card p {
font-size: 16px;
}
.why-card.accent p {
font-size: 28px;
letter-spacing: -1px;
}
.why-small-text {
position: relative;
bottom: auto;
left: auto;
margin-top: 20px;
font-size: 13px;
}
.whyus-title {
font-size: clamp(44px, 12vw, 72px);
letter-spacing: -2px;
}
}
/* ───────────────────────────────────────────────────────────────────────
SECTION 13 — SERVICES SECTION (≤ 768 px)
Note: style.css already sets grid to 1fr by default (mobile-first).
This block patches section padding and card sizing.
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.services-section {
padding: 56px 16px 64px;
}
/* Fix the two-tone background split ratio for mobile */
.services-section {
background:
linear-gradient(
180deg,
#0f1726 0%,
#111827 38%,
#f8f8f8 38%,
#f8f8f8 100%
);
}
.services-grid {
grid-template-columns: 1fr;
gap: 20px;
}
/* Aspect ratio: portrait → landscape on phone */
.service-media {
aspect-ratio: 4 / 3;
}
.services-cta {
width: 100%;
padding: 15px 24px;
min-height: 52px;
}
}
/* ───────────────────────────────────────────────────────────────────────
SECTION 14 — FOOTER (≤ 768 px)
Note: style.css already has @media (max-width: 640px) for footer.
These rules add improvements between 640–768 px and fix small phones.
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.footer-top {
grid-template-columns: 1fr;
gap: 32px;
padding: 48px 20px 36px;
}
.footer-links-grid {
grid-template-columns: 1fr 1fr;
gap: 100px;
grid-gap: 65px;
}
.footer-contact-bar {
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 20px 20px;
}
/* CTA button: full width in stacked footer */
.footer-cta-btn {
margin-left: 0;
width: 100%;
text-align: center;
padding: 14px 24px;
min-height: 52px;
}
.footer-bottom {
padding: 16px 20px 28px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.footer-divider {
margin: 0 20px;
}
}
/* ───────────────────────────────────────────────────────────────────────
SECTION 15 — PORTFOLIO CATALOG (PCAT) (≤ 768 px)
Note: style.css has an existing @media (max-width: 768px) block for
.pcat-section. This block adjusts thumbnail sizes.
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Force all pcat item grids to a single column */
.pcat-items,
.pcat-items--4,
.pcat-items--3 {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.pcat-thumb {
border-radius: 14px 2px 2px 2px;
}
.pcat-consult-cta {
width: 100%;
padding: 14px 20px;
text-align: center;
min-height: 52px;
}
}
/* ───────────────────────────────────────────────────────────────────────
SECTION 16 — VERY SMALL PHONES (≤ 390 px)
Extra compression for devices like iPhone SE, Galaxy A-series
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 390px) {
body {
padding-top: 100px;
}
/* Logo: even tighter */
.logo-box {
padding: 6px 12px;
font-size: 15px;
min-width: 76px;
}
/* Hero text: don't go below 28px */
.hero-headline {
font-size: clamp(28px, 9vw, 40px);
}
/* WIA cards: single column (already applied above) */
.wia-card-body {
padding: 12px 14px;
}
/* Stats: single column on very small screens */
.about-stats {
grid-template-columns: 1fr;
}
.about-stat {
border-right: none;
border-bottom: 1px solid var(--border-blue);
}
.about-stat:nth-child(odd) {
border-right: none;
}
/* TDB cards: single column on very small phones */
.tdb-cards,
.tdb-cards--4,
.tdb-cards--3 {
grid-template-columns: 1fr;
}
/* Pcat: also single column */
.pcat-items,
.pcat-items--4,
.pcat-items--3 {
grid-template-columns: 1fr;
}
/* Eviz card: narrower */
.eviz-card {
width: 230px;
height: 380px;
}
/* Footer links: single column */
.footer-links-grid {
grid-template-columns: 1fr;
}
}
/* ───────────────────────────────────────────────────────────────────────
SECTION 17 — TOUCH-SPECIFIC INTERACTION IMPROVEMENTS
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Remove hover transforms on touch — they can get "stuck" on tap */
.wia-card:hover,
.eviz-card:hover,
.eco-card:hover,
.why-card:hover,
.moa-card:hover,
.tdb-card:hover,
.service-card:hover {
transform: none;
}
/* Keep box-shadow hover on cards for visual feedback, just no lift */
.wia-card:hover {
box-shadow:
0 4px 0 rgba(30,34,40,0.08),
0 6px 24px rgba(27,58,107,0.12),
0 0 0 1.5px rgba(76,142,247,0.2);
}
/* Always-visible card content overlays (no hover needed) */
.eco-card-cta {
color: rgba(200, 218, 255, 0.75);
}
/* Ensure all interactive buttons meet 44 × 44 px minimum tap target */
.contact-btn,
.wia-cta-btn,
.mega-nav-cta-btn,
.hiw-nav-btn,
.eviz-arrow,
.wia-ov-close,
.about-form-submit,
.tdb-cta-btn,
.footer-cta-btn,
.services-cta {
min-height: 44px;
}
/* Hamburger: larger touch area */
.hamburger {
padding: 10px;
}
.hamburger span {
width: 26px;
height: 2px;
}
/* Social icon links in footer */
.footer-social {
width: 44px;
height: 44px;
}
}
/* ───────────────────────────────────────────────────────────────────────
SECTION 18 — ACCESSIBILITY: REDUCED MOTION
─────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
/* Disable all CSS animations and transitions site-wide */
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Keep the opacity: 0 → 1 entrance animations functional
(they're needed for visibility), just instant */
.eviz-card,
.service-card,
.nav-logo,
.nav-cats,
.nav-products,
.tagline,
.contact-strip {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
}
/* ───────────────────────────────────────────────────────────────────────
MOBILE FOOTER DIRECT PORT (Optimized 4-Column Responsive Layout)
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Restrict outer boundaries to prevent horizontal page scrolling */
footer, .footer-container {
padding: 32px 8px 20px !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Rebalanced column distribution matrix to protect text boundaries */
.footer-top,
.footer-links-grid,
footer .main-wrapper {
display: grid !important;
grid-template-columns: 1.1fr 1fr 1.1fr 0.9fr !important; /* Re-weighted columns */
gap: 8px !important;
align-items: flex-start !important;
text-align: left !important;
width: 100% !important;
}
/* --- COLUMN 1: BRAND SECTOR --- */
.footer-brand {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100% !important;
}
.footer-logo,
.footer-brand h2 {
font-size: 15px !important;
font-weight: bold;
margin-bottom: 6px !important;
display: block !important;
}
.footer-description,
.footer-brand p {
display: block !important;
font-size: 8.5px !important;
line-height: 1.3 !important;
margin-bottom: 10px !important;
opacity: 0.7;
white-space: normal !important; /* Permits beautiful, multi-line paragraph wrapping */
word-break: break-word !important;
}
/* Social Links Row */
.footer-socials {
display: flex !important;
flex-direction: row !important;
gap: 4px !important;
margin-bottom: 12px !important;
}
.footer-socials a,
.footer-social-icon {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 18px !important;
height: 18px !important;
font-size: 8px !important;
text-align: center;
}
/* Contact Links */
.footer-contact-list {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
margin-top: 4px !important;
width: 100% !important;
}
.footer-contact-item,
.footer-contact-list a,
.footer-contact-list span {
font-size: 8.5px !important;
white-space: nowrap !important; /* Protects data values from breaking onto new lines */
}
/* --- COLUMNS 2, 3, & 4: NAVIGATION LINKS --- */
.footer-col {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
width: 100% !important;
}
/* Section Title Headings (SECTORS, SOLUTIONS, COMPANY) */
.footer-col h3,
.footer-col .column-title {
font-size: 9px !important;
letter-spacing: 0.04em;
margin-bottom: 10px !important;
white-space: nowrap !important; /* Keeps structural titles cleanly layout-aligned */
}
/* Individual Navigation Anchor Items */
.footer-col a {
font-size: 10px !important;
padding: 2px 0 !important;
line-height: 1.25 !important;
white-space: normal !important; /* Resolves horizontal layout spill by allowing wrap */
text-align: left !important;
word-break: break-word !important;
display: inline-block !important;
width: 100% !important;
}
/* --- BOTTOM ROW: LEGAL & COPYRIGHT --- */
.footer-bottom {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
margin-top: 24px !important;
padding-top: 12px !important;
border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
width: 100% !important;
}
.footer-legal-links {
display: flex !important;
flex-direction: row !important;
gap: 8px !important;
}
.footer-bottom p,
.footer-legal-links a {
font-size: 8px !important;
white-space: nowrap !important;
}
/* ── Eco-grid: force single column on mobile ── */
.eco-grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
padding: 0 16px !important;
}
/* Group titles: stack vertically, remove column spans */
.eco-group-title,
.eco-group-title--security,
.eco-group-title--space {
grid-column: 1 / -1 !important;
grid-row: auto !important;
}
/* Cards: full width, no squishing */
.eco-card {
min-width: 0 !important;
width: 100% !important;
}
.eco-card-title {
font-size: 1.4rem !important;
}
.eco-card-desc {
font-size: 0.85rem !important;
}
.eco-card-tag {
font-size: 0.65rem !important;
}
/* Fix photos of the staff cropped */
.mot-team-card img,
.moa-photo-img,
.mot-founder-image img {
object-fit: contain !important;
object-position: top center !important;
height: auto !important;
max-height: 400px !important;
}
/* Fix sections alterations */
.mot-founder {
grid-template-columns: 1fr !important;
margin-bottom: 60px !important;
}
.mot-founder.reverse {
direction: ltr !important;
}
.mot-founder-content,
.mot-founder.reverse .mot-founder-content {
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: -30px !important;
padding: 30px !important;
}
.mot-founder:before,
.mot-founder.reverse:before {
display: none !important;
}
}