/* ============================================================ FINE EDGE INDUSTRIES LLC — Design System Brand: Black #0D0D0D · Yellow #F5C400 · White #FFFFFF ============================================================ */ /* ── Google Fonts ── */ /* Fonts now loaded async via in (perf: removed render-blocking @import) */ /* ── Skip to content (WCAG 2.4.1) ── */ .skip-to-content { position: absolute; top: -100px; left: 16px; background: var(--color-accent); color: var(--color-bg); padding: 10px 20px; font-weight: 700; font-size: 14px; z-index: 9999; text-decoration: none; transition: top 0.2s; } .skip-to-content:focus { top: 16px; } /* ── iOS / Mobile touch optimizations ── */ html { -webkit-text-size-adjust: 100%; } body { -webkit-overflow-scrolling: touch; } a, button, [role="button"] { touch-action: manipulation; } input, select, textarea { font-size: 16px; } /* Prevents iOS auto-zoom on focus */ /* ── Filter bar wrapping on small screens ── */ @media (max-width: 640px) { .filter-bar { flex-wrap: wrap; gap: 8px; } .filter-btn { font-size: 11px; padding: 8px 14px; } .gallery-grid { columns: 1; gap: 12px; } .blog-grid { grid-template-columns: 1fr; } .commercial-callout { padding: 40px 24px; } .hero__btns .btn { font-size: 13px; } .page-header__inner { padding: 48px 20px; } .count-badge { font-size: 12px; padding: 8px 16px; } } /* ── CSS Custom Properties ── */ :root { --color-bg: #0D0D0D; --color-surface: #1A1A1A; --color-surface2: #222222; --color-accent: #F5C400; --color-accent-dark: #C49A00; --color-text: #FFFFFF; --color-muted: #A0A0A0; --color-border: #333333; --font-display: 'Barlow Condensed', sans-serif; --font-body: 'Inter', sans-serif; --radius: 0px; /* Sharp edges — industrial */ --transition: 0.25s ease; --max-width: 1280px; --section-pad: 96px 24px; --section-pad-sm: 64px 24px; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button, input, select, textarea { font-family: inherit; } /* ── Utility ── */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } .section { padding: var(--section-pad); } .section--sm { padding: var(--section-pad-sm); } .text-accent { color: var(--color-accent); } .text-muted { color: var(--color-muted); } .text-center { text-align: center; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } .label-tag { display: inline-block; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 12px; } .divider { width: 56px; height: 3px; background: var(--color-accent); margin: 16px 0 28px; } .divider--center { margin: 16px auto 28px; } /* ── Typography ── */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.02em; } h1 { font-size: clamp(52px, 7vw, 100px); } h2 { font-size: clamp(36px, 4.5vw, 64px); } h3 { font-size: clamp(24px, 3vw, 36px); } h4 { font-size: clamp(18px, 2vw, 24px); } p { font-size: 16px; line-height: 1.75; color: var(--color-muted); } p.lead { font-size: 18px; color: #CCCCCC; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border: 2px solid transparent; transition: all var(--transition); white-space: nowrap; } .btn-primary { background: var(--color-accent); color: #0D0D0D; border-color: var(--color-accent); } .btn-primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); transform: translateY(-2px); } .btn-outline { background: transparent; color: var(--color-text); border-color: rgba(255,255,255,0.5); } .btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-2px); } .btn-dark { background: var(--color-bg); color: var(--color-text); border-color: var(--color-bg); } .btn-dark:hover { background: #222; transform: translateY(-2px); } .btn-ghost { background: transparent; color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.25); } .btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-2px); } .btn-lg { padding: 18px 44px; font-size: 18px; } /* ── Navigation ── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(13,13,13,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); transition: all var(--transition); } .nav.scrolled { background: rgba(13,13,13,0.98); box-shadow: 0 4px 24px rgba(0,0,0,0.5); } .nav__inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; height: 76px; gap: 16px; } .nav__logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .nav__logo img { display: block; height: 64px; width: auto; max-width: none; } .nav__logo-text { font-family: var(--font-display); font-weight: 900; font-size: 26px; letter-spacing: 0.04em; line-height: 1.05; display: none; color: var(--color-text); } .nav__logo-text span { color: var(--color-accent); display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; } .nav__links { display: flex; align-items: center; gap: 22px; } .nav__links a { font-size: 12.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-muted); transition: color var(--transition); position: relative; } .nav__links a::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: var(--color-accent); transform: scaleX(0); transition: transform var(--transition); } .nav__links a:hover, .nav__links a.active { color: var(--color-text); } .nav__links a:hover::after, .nav__links a.active::after { transform: scaleX(1); } .nav__cta { display: flex; align-items: center; gap: 16px; } .nav__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; } .nav__hamburger span { display: block; width: 24px; height: 2px; background: var(--color-text); transition: all var(--transition); } /* Mobile Nav */ .nav__mobile { display: none; position: fixed; inset: 0; background: var(--color-bg); z-index: 999; flex-direction: column; align-items: center; justify-content: flex-start; /* top-aligned so first items clear the fixed header */ gap: 18px; padding: 92px 32px 96px; /* top pad clears the 76px fixed nav; bottom pad for the CTA */ overflow-y: auto; /* scroll when the full menu is taller than the screen */ -webkit-overflow-scrolling: touch; } .nav__mobile.open { display: flex; } .nav__mobile a { font-family: var(--font-display); font-size: 28px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; transition: color var(--transition); } .nav__mobile a:hover { color: var(--color-accent); } .nav__mobile-close { position: absolute; top: 24px; right: 24px; background: none; border: none; color: var(--color-text); font-size: 32px; cursor: pointer; line-height: 1; } /* ── Hero ── */ .hero { position: relative; min-height: 100vh; min-height: -webkit-fill-available; /* iOS Safari: excludes browser chrome */ display: flex; align-items: center; overflow: hidden; } /* ── Background video ── */ .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; pointer-events: none; /* Perf: removed per-frame filter (was contrast/saturate/brightness) — it forced costly main-thread rendering on every video frame on slow mobile CPUs. The dark hero gradient already provides the contrast. Keep GPU compositing only. */ will-change: transform; transform: translateZ(0); } .hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 1; } .hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13,13,13,0.88) 0%, rgba(13,13,13,0.70) 55%, rgba(13,13,13,0.55) 100%); } /* ── Mobile: portrait video plays on all screen sizes (1080x1920 — perfect for mobile) ── */ /* object-fit:cover handles both portrait phones and landscape desktops */ @media (max-width: 1024px) { /* Video stays visible — portrait format is optimised for mobile */ .hero__video { display: block; } .hero__bg { background-image: none; } } /* Reduce motion (desktop too): same static fallback */ @media (prefers-reduced-motion: reduce) { .hero__video { display: none !important; } .hero__bg { background-image: url('../images/portfolio/final/videos/hero-montage-jun2026-poster.webp'); background-size: cover; background-position: center; } } /* JS fallback class if desktop video also fails to play */ .hero--video-blocked .hero__video { display: none !important; } .hero--video-blocked .hero__bg { background-image: url('../images/portfolio/final/videos/hero-montage-jun2026-poster.webp'); background-size: cover; background-position: center; } .hero__content { position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; padding: 120px 24px 80px; width: 100%; } .hero__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; } .hero__eyebrow::before { content: ''; display: block; width: 32px; height: 2px; background: var(--color-accent); } .hero h1 { max-width: 940px; margin-bottom: 24px; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.1; } .hero__tagline { font-family: var(--font-display); text-transform: uppercase; color: var(--color-accent); font-weight: 700; font-size: clamp(18px, 2.3vw, 26px); letter-spacing: 0.02em; line-height: 1.2; margin: 14px 0 24px; max-width: 940px; } .hero__sub { font-size: 20px; color: #CCCCCC; max-width: 520px; margin-bottom: 48px; line-height: 1.5; } .hero__btns { display: flex; gap: 16px; flex-wrap: wrap; } /* ── Hero Trust Strip ── */ .hero-trust-strip { background: #111111; border-bottom: 1px solid var(--color-border); padding: 14px 24px; overflow-x: auto; } .hero-trust-strip__inner { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; max-width: var(--max-width); margin: 0 auto; } .hero-trust-strip span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #CCCCCC; white-space: nowrap; } @media (max-width: 640px) { .hero-trust-strip__inner { gap: 20px; justify-content: flex-start; } .hero-trust-strip { padding: 12px 16px; } } /* Ticker */ .ticker { position: relative; z-index: 1; background: var(--color-accent); padding: 12px 0; overflow: hidden; white-space: nowrap; } .ticker__track { display: inline-flex; animation: ticker 24s linear infinite; } .ticker__item { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-bg); padding: 0 32px; } .ticker__item::after { content: '·'; margin-left: 32px; opacity: 0.5; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── Service Tiles ── */ .services-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--color-border); } .service-tile { background: var(--color-surface); padding: 36px 28px; cursor: pointer; transition: all var(--transition); border: 2px solid transparent; position: relative; overflow: hidden; } .service-tile::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--color-accent); transform: scaleX(0); transition: transform var(--transition); } .service-tile:hover { background: var(--color-surface2); transform: translateY(-4px); } .service-tile:hover::before { transform: scaleX(1); } .service-tile__icon { width: 44px; height: 44px; margin-bottom: 20px; color: var(--color-accent); } .service-tile__icon svg { width: 100%; height: 100%; } .service-tile h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: var(--color-text); letter-spacing: 0.05em; } .service-tile p { font-size: 13px; color: var(--color-muted); line-height: 1.5; } /* ── Why Choose ── */ .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--color-border); margin-top: 48px; } .why-item { background: var(--color-surface); padding: 48px 40px; position: relative; overflow: hidden; } .why-item::after { content: attr(data-num); position: absolute; top: -10px; right: 20px; font-family: var(--font-display); font-size: 120px; font-weight: 900; color: rgba(245,196,0,0.04); line-height: 1; pointer-events: none; } .why-item__num { font-family: var(--font-display); font-size: 48px; font-weight: 900; color: var(--color-accent); line-height: 1; margin-bottom: 16px; } .why-item h3 { font-size: 22px; margin-bottom: 12px; color: var(--color-text); } .why-item p { font-size: 14px; } /* ── Portfolio Grid ── */ .portfolio-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin: 48px 0; } .portfolio-card { position: relative; overflow: hidden; cursor: pointer; } .portfolio-card:nth-child(1) { grid-column: span 7; grid-row: span 2; } .portfolio-card:nth-child(2) { grid-column: span 5; } .portfolio-card:nth-child(3) { grid-column: span 5; } .portfolio-card:nth-child(4) { grid-column: span 4; } .portfolio-card:nth-child(5) { grid-column: span 4; } .portfolio-card:nth-child(6) { grid-column: span 4; } .portfolio-card img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; transition: transform 0.5s ease; display: block; } /* Vibrancy boost on background-image divs (homepage featured section .p1/.p2/.p6) */ .portfolio-card .p1, .portfolio-card .p2, .portfolio-card .p3, .portfolio-card .p4, .portfolio-card .p5, .portfolio-card .p6 { -webkit-filter: saturate(1.25) contrast(1.06); filter: saturate(1.25) contrast(1.06); } .portfolio-card:nth-child(1) img { min-height: 520px; } .portfolio-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,13,0.9) 0%, transparent 60%); opacity: 0; transition: opacity var(--transition); display: flex; align-items: flex-end; padding: 24px; } .portfolio-card:hover img { transform: scale(1.06); } .portfolio-card:hover .portfolio-card__overlay { opacity: 1; } .portfolio-card__overlay span { font-family: var(--font-display); font-size: 18px; font-weight: 700; text-transform: uppercase; color: var(--color-text); letter-spacing: 0.05em; } .portfolio-card__cat { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 4px; } /* Gallery Page Grid */ .gallery-grid { columns: 3; column-gap: 4px; margin-top: 40px; } .gallery-grid .gallery-item { break-inside: avoid; margin-bottom: 4px; position: relative; overflow: hidden; cursor: pointer; } .gallery-grid .gallery-item img { width: 100%; height: auto; display: block; transition: transform 0.4s ease; } .gallery-grid .gallery-item:hover img { transform: scale(1.05); } .gallery-item__overlay { position: absolute; inset: 0; background: rgba(13,13,13,0.75); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition); } .gallery-item:hover .gallery-item__overlay { opacity: 1; } .gallery-item__overlay span { font-family: var(--font-display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); } /* Filter Bar */ .filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; } .filter-btn { padding: 8px 20px; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; background: var(--color-surface); color: var(--color-muted); border: 1px solid var(--color-border); cursor: pointer; transition: all var(--transition); } .filter-btn:hover, .filter-btn.active { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); } /* ── Testimonials ── */ .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--color-border); margin: 48px 0; } .testimonial-card { background: var(--color-surface); padding: 40px 36px; } .testimonial-card__stars { display: flex; gap: 4px; margin-bottom: 20px; } .testimonial-card__stars svg { width: 16px; height: 16px; fill: var(--color-accent); } .testimonial-card blockquote { font-size: 15px; line-height: 1.75; color: #CCCCCC; margin-bottom: 24px; font-style: italic; } .testimonial-card__author { font-weight: 600; font-size: 14px; color: var(--color-text); } .testimonial-card__author span { display: block; font-weight: 400; font-size: 13px; color: var(--color-muted); margin-top: 2px; } /* Trust bar */ .trust-bar { display: flex; align-items: center; justify-content: center; gap: 48px; padding: 32px 24px; border-top: 1px solid var(--color-border); flex-wrap: wrap; } .trust-item { display: flex; align-items: center; gap: 12px; color: var(--color-muted); font-size: 14px; font-weight: 500; } .trust-item svg { width: 28px; height: 28px; color: var(--color-accent); } /* ── CTA Banner ── */ .cta-banner { background: var(--color-accent); padding: 80px 24px; text-align: center; } .cta-banner h2 { color: var(--color-bg); margin-bottom: 16px; } .cta-banner p { color: rgba(13,13,13,0.7); font-size: 18px; margin-bottom: 36px; } /* ── Services Page ── */ .service-section { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; border-bottom: 1px solid var(--color-border); } .service-section.reverse { direction: rtl; } .service-section.reverse > * { direction: ltr; } .service-section__img { position: relative; overflow: hidden; min-height: 480px; } .service-section__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .service-section:hover .service-section__img img { transform: scale(1.04); } .service-section__content { background: var(--color-surface); padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; } .service-section__content h2 { margin-bottom: 20px; } .service-section__content p { margin-bottom: 28px; } .service-features { list-style: none; margin-bottom: 36px; } .service-features li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; color: #CCCCCC; } .service-features li::before { content: ''; width: 6px; height: 6px; background: var(--color-accent); flex-shrink: 0; } /* Process steps */ .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; gap: 0; } .process-steps::before { content: ''; position: absolute; top: 32px; left: 12.5%; right: 12.5%; height: 2px; background: var(--color-border); z-index: 0; } .step { text-align: center; padding: 0 24px; position: relative; z-index: 1; } .step__num { width: 64px; height: 64px; background: var(--color-surface); border: 2px solid var(--color-accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-family: var(--font-display); font-size: 28px; font-weight: 900; color: var(--color-accent); } .step h4 { font-size: 18px; margin-bottom: 12px; } .step p { font-size: 13px; } /* ── About Page ── */ .about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .about-quote { border-left: 4px solid var(--color-accent); padding: 24px 32px; background: var(--color-surface); margin: 32px 0; } .about-quote p { font-size: 20px; font-style: italic; color: var(--color-text); line-height: 1.6; } .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--color-border); margin: 64px 0; } .stat-item { background: var(--color-surface); padding: 40px 32px; text-align: center; } .stat-item__num { font-family: var(--font-display); font-size: 64px; font-weight: 900; color: var(--color-accent); line-height: 1; margin-bottom: 8px; } .stat-item p { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--color-border); } .value-card { background: var(--color-surface); padding: 48px 40px; text-align: center; } .value-card__icon { width: 56px; height: 56px; margin: 0 auto 24px; color: var(--color-accent); } .value-card__icon svg { width: 100%; height: 100%; } .value-card h3 { font-size: 28px; margin-bottom: 16px; } .value-card p { font-size: 14px; } /* ── Contact Page ── */ .contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0; background: var(--color-surface); min-height: 600px; } .contact-info { padding: 56px 48px; background: var(--color-surface2); border-right: 1px solid var(--color-border); } .contact-info h3 { margin-bottom: 32px; font-size: 28px; } .contact-item { display: flex; gap: 16px; margin-bottom: 28px; align-items: flex-start; } .contact-item__icon { width: 40px; height: 40px; background: var(--color-surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-accent); } .contact-item__icon svg { width: 18px; height: 18px; } .contact-item__text { font-size: 14px; } .contact-item__text strong { display: block; color: var(--color-text); margin-bottom: 2px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; } .contact-item__text a { color: var(--color-muted); transition: color var(--transition); } .contact-item__text a:hover { color: var(--color-accent); } .contact-form-wrap { padding: 56px 48px; } .contact-form-wrap h3 { margin-bottom: 32px; font-size: 28px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 8px; } .form-group input, .form-group select, .form-group textarea { width: 100%; background: var(--color-surface2); border: 1px solid var(--color-border); color: var(--color-text); padding: 12px 16px; font-size: 15px; transition: border-color var(--transition); outline: none; resize: vertical; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--color-accent); } .form-group select option { background: var(--color-surface2); } .form-group textarea { min-height: 120px; } .form-submit { width: 100%; margin-top: 8px; justify-content: center; } /* Map embed placeholder */ .map-embed { width: 100%; height: 260px; background: var(--color-surface); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; margin-top: 32px; color: var(--color-muted); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; overflow: hidden; } .map-embed iframe { width: 100%; height: 100%; border: none; filter: grayscale(1) invert(0.9) contrast(0.8); } /* Social links */ .social-links { display: flex; gap: 12px; margin-top: 24px; } .social-link { width: 40px; height: 40px; background: var(--color-surface); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-muted); transition: all var(--transition); } .social-link svg { width: 18px; height: 18px; } .social-link:hover { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); } /* ══════════════════════════════════════════ FLOATING CTA BAR (sticky bottom, all pages) ══════════════════════════════════════════ */ .floating-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9000; display: flex; height: 56px; box-shadow: 0 -2px 20px rgba(0,0,0,0.5); } .floating-cta__btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: filter 0.15s, transform 0.15s; -webkit-tap-highlight-color: transparent; } .floating-cta__btn:hover { filter: brightness(1.15); transform: translateY(-1px); } .floating-cta__btn svg { flex-shrink: 0; } .floating-cta__call { background: var(--color-accent); color: var(--color-bg); } .floating-cta__email { background: #1a73e8; color: #fff; } .floating-cta__upload { background: var(--color-surface2); color: var(--color-text); border-top: 2px solid var(--color-border); } /* Dividers between buttons */ .floating-cta__btn + .floating-cta__btn { border-left: 1px solid rgba(0,0,0,0.2); } /* Hide text label on very small screens, show icon only */ @media (max-width: 380px) { .floating-cta__btn span { display: none; } .floating-cta { height: 52px; } } /* Add bottom padding to body so content is not hidden under the bar */ body { padding-bottom: 56px; } @media (max-width: 380px) { body { padding-bottom: 52px; } } /* Push Tidio chat bubble above the floating CTA bar */ #tidio-chat-iframe, #tidio-chat-code, #tidio-chat { bottom: 64px !important; } @media (max-width: 380px) { #tidio-chat-iframe, #tidio-chat-code, #tidio-chat { bottom: 60px !important; } } /* ── Footer ── */ .footer { background: var(--color-bg); border-top: 3px solid var(--color-accent); padding: 64px 24px 0; } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 64px; max-width: var(--max-width); margin: 0 auto; padding-bottom: 56px; } .footer__brand img { display: block; height: 110px; width: auto; margin-bottom: 16px; } .footer__brand-name { display: block; font-family: var(--font-display); font-weight: 900; font-size: 32px; letter-spacing: 0.04em; line-height: 1.05; color: var(--color-text); margin-bottom: 4px; } .footer__brand-name span { color: var(--color-accent); display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 16px; } .footer__brand p { font-size: 14px; max-width: 300px; } .footer__col h5 { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text); margin-bottom: 20px; } .footer__col ul li { margin-bottom: 12px; } .footer__col ul li a { font-size: 14px; color: var(--color-muted); transition: color var(--transition); } .footer__col ul li a:hover { color: var(--color-accent); } .footer__col address { font-style: normal; font-size: 14px; color: var(--color-muted); line-height: 1.8; } .footer__bottom { border-top: 1px solid var(--color-border); padding: 20px 0; max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer__bottom p { font-size: 13px; color: var(--color-muted); } .footer__bottom a { color: var(--color-muted); transition: color var(--transition); } .footer__bottom a:hover { color: var(--color-accent); } /* ── WhatsApp Float ── */ .whatsapp-float { position: fixed; bottom: 28px; right: 28px; z-index: 999; width: 56px; height: 56px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,0.4); transition: transform var(--transition), box-shadow var(--transition); } .whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,0.55); } .whatsapp-float svg { width: 28px; height: 28px; fill: white; } /* ── Page Header (inner pages) ── */ .page-header { background: var(--color-surface); padding: 140px 24px 60px; border-bottom: 1px solid var(--color-border); position: relative; overflow: hidden; } .page-header::before { content: attr(data-title); position: absolute; top: 50%; right: -20px; transform: translateY(-50%); font-family: var(--font-display); font-size: 160px; font-weight: 900; color: rgba(245,196,0,0.03); letter-spacing: 0.05em; pointer-events: none; white-space: nowrap; } .page-header__inner { max-width: var(--max-width); margin: 0 auto; } .breadcrumb { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 16px; display: flex; gap: 8px; align-items: center; } .breadcrumb a { color: var(--color-accent); } .breadcrumb span::before { content: '/'; margin-right: 8px; } /* ── Lightbox ── */ .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 9999; display: none; align-items: center; justify-content: center; flex-direction: column; padding: 40px; } .lightbox.open { display: flex; } .lightbox img { max-width: 90vw; max-height: 80vh; object-fit: contain; } .lightbox__close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: white; font-size: 36px; cursor: pointer; line-height: 1; } .lightbox__caption { margin-top: 16px; font-family: var(--font-display); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); } /* ── Scroll-reveal animation ── */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } /* ── Responsive ── */ @media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } .why-grid { grid-template-columns: 1fr 1fr; } .portfolio-grid { grid-template-columns: repeat(2, 1fr); } .portfolio-card:nth-child(n) { grid-column: span 1 !important; grid-row: span 1 !important; } .portfolio-card img, .portfolio-card:nth-child(1) img { min-height: 260px; } .testimonials-grid { grid-template-columns: 1fr; } .about-story { grid-template-columns: 1fr !important; gap: 48px !important; } .stats-row { grid-template-columns: repeat(2, 1fr); } .values-grid { grid-template-columns: 1fr 1fr; } .contact-grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; } .footer__brand { grid-column: span 2; } .service-section { grid-template-columns: 1fr; } .service-section.reverse { direction: ltr; } .service-section__img { min-height: 320px; } .process-steps { grid-template-columns: repeat(2, 1fr); } .process-steps::before { display: none; } } @media (max-width: 768px) { h1 { font-size: 48px; } h2 { font-size: 36px; } .nav__links, .nav__cta .btn { display: none; } .nav__hamburger { display: flex; } .nav__cta .btn:last-child { display: inline-flex; padding: 10px 20px; font-size: 13px; } .services-grid { grid-template-columns: repeat(2, 1fr); } .why-grid { grid-template-columns: 1fr; } .gallery-grid { columns: 2; } .testimonials-grid { grid-template-columns: 1fr; } .stats-row { grid-template-columns: repeat(2, 1fr); } .values-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .contact-info, .contact-form-wrap { padding: 40px 28px; } .footer__grid { grid-template-columns: 1fr; } .footer__brand { grid-column: auto; } .service-section__content { padding: 40px 32px; } .process-steps { grid-template-columns: 1fr 1fr; } .trust-bar { gap: 24px; } .hero__btns { flex-direction: column; } .hero__btns .btn { width: 100%; justify-content: center; } } @media (max-width: 480px) { .services-grid { grid-template-columns: 1fr; } .gallery-grid { columns: 1; } .stats-row { grid-template-columns: 1fr 1fr; } .process-steps { grid-template-columns: 1fr; } } /* ════════════════════════════════════════ PREMIUM EFFECTS ════════════════════════════════════════ */ /* 1. Custom scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #0D0D0D; } ::-webkit-scrollbar-thumb { background: #F5C400; } ::-webkit-scrollbar-thumb:hover { background: #C49A00; } /* 2. Selection highlight */ ::selection { background: #F5C400; color: #0D0D0D; } /* 3. Nav active link underline — animated yellow slide-in */ .nav__links a { position: relative; } .nav__links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: #F5C400; transition: width 0.25s ease; } .nav__links a:hover::after, .nav__links a.active::after { width: 100%; } /* 4. Service tile icon pulse on hover */ .service-tile:hover .service-tile__icon svg { animation: iconSpin 0.4s ease forwards; } @keyframes iconSpin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(-8deg) scale(1.15); } 100% { transform: rotate(0) scale(1.1); } } /* 5. Blog card image zoom cursor */ .blog-card__img-wrap { cursor: zoom-in; } /* 6. Smooth focus rings (accessibility + style) */ :focus-visible { outline: 2px solid #F5C400; outline-offset: 3px; } button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; } /* 7. Testimonial card hover lift */ .testimonial-card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(245, 196, 0, 0.12); } /* 8. Footer link hover animation */ .footer__col a { position: relative; transition: color 0.2s, padding-left 0.2s; } .footer__col a:hover { color: var(--color-accent); padding-left: 8px; } /* 9. CTA banner text shimmer effect */ .cta-banner h2 { background: linear-gradient(90deg, #fff 0%, #F5C400 50%, #fff 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer 4s linear infinite; } @keyframes shimmer { to { background-position: 200% center; } } /* 10. Gallery item overlay slide up on hover */ .gallery-item__overlay { transition: opacity 0.3s ease, transform 0.3s ease; transform: translateY(8px); opacity: 0; } .gallery-item:hover .gallery-item__overlay { opacity: 1; transform: translateY(0); } /* 11. Back-to-top button */ #backToTop { position: fixed; bottom: 90px; right: 24px; width: 44px; height: 44px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-accent); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 999; opacity: 0; transform: translateY(16px); transition: opacity 0.3s, transform 0.3s; } #backToTop.visible { opacity: 1; transform: translateY(0); } #backToTop:hover { background: var(--color-accent); color: var(--color-bg); } /* 12. Page load fade-in — REMOVED: body opacity:0 start caused Lighthouse NO_FCP on mobile (CSS animations pause when the page is backgrounded/headless, leaving body invisible). */ body { opacity: 1; } /* 13. Label tag entrance */ .label-tag { animation: labelSlide 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-play-state: paused; } .label-tag.visible { animation-play-state: running; } @keyframes labelSlide { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } /* 14. WhatsApp float pulse */ .whatsapp-float { animation: waPulse 3s ease-in-out infinite; } @keyframes waPulse { 0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3); } 50% { box-shadow: 0 4px 32px rgba(37, 211, 102, 0.6); } } /* ═══════════════════════════════════════════ 15. Mobile Sticky CTA Bar ════════════════════════════════════════════ */ .mobile-cta-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: #0a0a0a; border-top: 2px solid var(--color-accent); grid-template-columns: 1fr 1fr 1fr; height: 62px; } .mobile-cta-bar__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #ccc; text-decoration: none; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-right: 1px solid #1e1e1e; transition: background 0.2s, color 0.2s; -webkit-tap-highlight-color: transparent; } .mobile-cta-bar__btn:last-child { border-right: none; } .mobile-cta-bar__btn:active { background: #1a1a1a; color: #fff; } .mobile-cta-bar__btn--accent { background: var(--color-accent); color: var(--color-bg); } .mobile-cta-bar__btn--accent:active { background: #d4a800; color: var(--color-bg); } @media (max-width: 768px) { .mobile-cta-bar { display: grid; } body { padding-bottom: 62px; } .whatsapp-float { bottom: 78px; } #backToTop { bottom: 154px; } } /* ═══════════════════════════════════════════ 16. Portfolio Industry Cards (Landing Page) ════════════════════════════════════════════ */ .industry-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 4px; margin-top: 0; } .industry-grid__row { display: grid; gap: 4px; } .industry-grid__row--2 { grid-template-columns: 2fr 3fr; } .industry-grid__row--3 { grid-template-columns: 1fr 1fr 1fr; } .industry-card { position: relative; overflow: hidden; display: block; text-decoration: none; background: #111; height: 460px; } .industry-card--wide { height: 340px; } .industry-card--tall { height: 540px; } .industry-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: block; } .industry-card:hover img { transform: scale(1.07); } .industry-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.08) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; transition: background 0.4s ease; } .industry-card:hover .industry-card__overlay { background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.12) 100%); } .industry-card__tag { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 8px; } .industry-card__title { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; margin-bottom: 10px; } .industry-card--wide .industry-card__title { font-size: 28px; } .industry-card__desc { font-size: 12px; color: rgba(255,255,255,0.6); letter-spacing: 0.04em; margin-bottom: 14px; line-height: 1.5; } .industry-card__cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; } .industry-card:hover .industry-card__cta { opacity: 1; transform: translateY(0); } .industry-card__cta::after { content: '\2192'; margin-left: 4px; } @media (max-width: 768px) { .industry-grid { grid-template-columns: 1fr; gap: 3px; } .industry-grid__row--2, .industry-grid__row--3 { grid-template-columns: 1fr; gap: 3px; } .industry-card, .industry-card--wide, .industry-card--tall { height: 260px; } .industry-card__title { font-size: 26px; } .industry-card__overlay { padding: 22px; } .industry-card__cta { opacity: 1; transform: translateY(0); } } @media (max-width: 480px) { .industry-card, .industry-card--wide, .industry-card--tall { height: 220px; } .industry-card__title { font-size: 22px; } } /* ═══════════════════════════════════════════ 17. Portfolio Sub-Page Gallery (Fancybox) ════════════════════════════════════════════ */ .fb-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 40px; } .fb-gallery-item { position: relative; overflow: hidden; display: block; text-decoration: none; background: #111; aspect-ratio: 4/3; } .fb-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; } .fb-gallery-item:hover img { transform: scale(1.08); } .fb-gallery-item__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; transition: background 0.3s ease; opacity: 0; } .fb-gallery-item:hover .fb-gallery-item__overlay { background: rgba(0,0,0,0.68); opacity: 1; } .fb-gallery-item__cat { font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 4px; } .fb-gallery-item__title { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.06em; } .fb-gallery-item.hidden { display: none; } @media (max-width: 768px) { .fb-gallery { grid-template-columns: repeat(2, 1fr); gap: 3px; } .fb-gallery-item__overlay { opacity: 1; background: rgba(0,0,0,0.5); } } @media (max-width: 480px) { .fb-gallery { grid-template-columns: 1fr; } } /* ── Hero photo slideshow ──────────────────────────────────────────────── */ .hero--slideshow .hero__slides { position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* explicit — iOS Safari <15 doesn't support inset shorthand */ z-index: 2; overflow: hidden; /* NO filter here — applying filter to the slides container creates a CSS stacking context that prevents child opacity transitions from compositing correctly on iOS Safari. Dark overlay is handled by the ::after pseudo-element instead. */ } /* div-based slides — background-image fills the frame with no layout side effects */ .hero--slideshow .hero__slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; opacity: 0; -webkit-transition: opacity 1.2s ease-in-out; transition: opacity 1.2s ease-in-out; -webkit-transform: translateZ(0); /* force GPU layer on iOS — prevents compositing drop */ transform: translateZ(0); will-change: opacity; /* Vibrancy boost on individual slides — safe here, unlike the container which would break opacity transitions */ -webkit-filter: saturate(1.25) contrast(1.08) brightness(1.04); filter: saturate(1.25) contrast(1.08) brightness(1.04); } .hero--slideshow .hero__slide.active { opacity: 1; } /* Dark gradient overlay sits above the photo slides */ .hero--slideshow .hero__slides::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; pointer-events: none; background: linear-gradient(135deg, rgba(13,13,13,0.60) 0%, rgba(13,13,13,0.38) 55%, rgba(13,13,13,0.20) 100%); } /* Hero bg div not needed — hide it */ .hero--slideshow .hero__bg { display: none !important; } /* Text content above everything */ .hero--slideshow .hero__content { position: relative; z-index: 20; } /* -- Nav Dropdown: hover + focus-within + fade animation ------------------ */ .nav__dropdown { position: relative; } /* Switched from display:none → visibility/opacity so that: 1. CSS transitions can animate the menu in/out (display is not animatable) 2. :focus-within works correctly — keyboard focus inside the menu keeps the menu visible, and the hidden items are unreachable until open. visibility:hidden removes items from the tab order just like display:none but lets the transition play when re-opening. */ .nav__dropdown-menu { display: block; visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; /* delay visibility on close */ position: absolute; top: 100%; left: -16px; background: #111; border: 1px solid #222; border-top: 2px solid #F5C400; min-width: 252px; z-index: 2000; list-style: none; padding: 14px 0 8px; /* 14px top padding bridges the hover gap */ margin: 0; } /* Open on hover OR when any child has keyboard focus */ .nav__dropdown:hover .nav__dropdown-menu, .nav__dropdown:focus-within .nav__dropdown-menu { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s; /* visibility instant on open */ } .nav__dropdown-menu li a { display: block; padding: 10px 20px; color: #bbb; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color 0.2s, background 0.2s; } .nav__dropdown-menu li a:hover { color: #F5C400; background: #1a1a1a; } /* Keyboard focus indicator inside open dropdown */ .nav__dropdown-menu li a:focus { outline: 2px solid #F5C400; outline-offset: -2px; color: #F5C400; background: #1a1a1a; } /* ── Nav dropdown arrow (CSS-driven; ▼ removed from HTML) ─────────── Overrides the underline ::after on dropdown trigger links (specificity 0,2,1 beats the generic .nav__links a::after at 0,1,1). Trigger links show a small rotatable chevron instead of the underline sweep. ── */ .nav__links .nav__dropdown > a { display: inline-flex; align-items: center; gap: 5px; } .nav__links .nav__dropdown > a::after { content: '\25BE'; /* ▾ small downward triangle */ font-size: 9px; font-weight: 400; letter-spacing: 0; opacity: 0.55; position: static; /* cancels absolute underline positioning */ background: none; height: auto; width: auto; transform: none; transition: opacity 0.2s ease, transform 0.22s ease; flex-shrink: 0; margin-top: 1px; /* optical vertical alignment with uppercase text */ } .nav__links .nav__dropdown:hover > a::after, .nav__links .nav__dropdown:focus-within > a::after { opacity: 0.9; transform: rotate(180deg); } .nav__links .nav__dropdown.active > a::after { opacity: 0.9; } /* -- Outline button variant ------------------------------------------- */ .btn-outline { background: transparent; border: 2px solid #F5C400; color: #F5C400; padding: 12px 28px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; display: inline-block; transition: background 0.2s, color 0.2s; } .btn-outline:hover { background: #F5C400; color: #0D0D0D; } /* ════════════════════════════════════════════════════════════════ MOBILE RESPONSIVE — Full audit pass (April 18 2026) iPhone-first fixes: nav, hero, sections, grids, typography ════════════════════════════════════════════════════════════════ */ /* ── 1. Nav — shrink height and logo on mobile ── */ @media (max-width: 768px) { .nav__inner { height: 64px; padding: 0 16px; } .nav__logo img { height: 56px; } .nav__cta { gap: 8px; } .nav__cta .btn:last-child { padding: 8px 14px; font-size: 11px; letter-spacing: 0.06em; } } /* ── 2. Section padding — reduce from 96px to human-scale ── */ @media (max-width: 768px) { .section { padding: 56px 20px !important; } .section--sm { padding: 40px 20px !important; } .container { padding: 0 16px; } } @media (max-width: 480px) { .section { padding: 40px 16px !important; } .section--sm { padding: 28px 16px !important; } } /* ── 3. Page header — reduce top padding (fixed nav is 64px on mobile) ── */ @media (max-width: 768px) { .page-header { padding: 96px 20px 36px !important; } .page-header::before { font-size: 80px; } } @media (max-width: 480px) { .page-header { padding: 80px 16px 28px !important; } } /* ── 4. Hero content — reduce top padding on mobile ── */ @media (max-width: 768px) { .hero__content { padding: 96px 20px 56px; } .hero__sub { font-size: 16px; margin-bottom: 32px; } } @media (max-width: 480px) { .hero__content { padding: 80px 16px 80px; } /* Show the FULL hero intro on phones (was clamped to 4 lines, which cut off the text) */ .hero__sub { font-size: 14px; margin-bottom: 24px; } /* Hide 3rd hero CTA (Call Now) — duplicates the sticky mobile CTA bar */ .hero__btn-tertiary { display: none !important; } } /* ── 5. Typography — scale down headings on phones ── */ @media (max-width: 768px) { h1 { font-size: clamp(38px, 10vw, 52px); } h2 { font-size: clamp(28px, 8vw, 40px); } h3 { font-size: clamp(20px, 6vw, 28px); } p.lead { font-size: 16px; } } /* ── 5b. Homepage featured-project section — mobile redesign ── */ @media (max-width: 768px) { /* Single-column stack — no more narrow reel slices */ .portfolio-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .portfolio-card:nth-child(n) { grid-column: span 1 !important; grid-row: span 1 !important; } /* Ensure image divs have solid height on mobile */ .portfolio-card .p1, .portfolio-card .p2, .portfolio-card .p3, .portfolio-card .p4, .portfolio-card .p5, .portfolio-card .p6 { min-height: 220px !important; /* Vibrancy boost — richer, less washed-out */ -webkit-filter: saturate(1.3) contrast(1.08); filter: saturate(1.3) contrast(1.08); } /* On touch devices there is no hover — always show overlay */ .portfolio-card__overlay { opacity: 1 !important; background: linear-gradient(to top, rgba(13,13,13,0.95) 0%, rgba(13,13,13,0.68) 45%, transparent 100%) !important; } /* Disable hover scale on mobile — prevents flash on tap */ .portfolio-card:hover img { transform: none !important; } } @media (max-width: 480px) { h1 { font-size: clamp(34px, 9vw, 44px); } h2 { font-size: clamp(26px, 7.5vw, 36px); } } /* ── 6. 2-col inline-style grids — force single column on mobile ── .about-story grids use inline style="grid-template-columns:1fr 1fr" which overrides CSS. !important wins it back. ── */ @media (max-width: 768px) { .about-story { grid-template-columns: 1fr !important; gap: 32px !important; } /* Any generic 2-col grid with class applied inline */ [class*="story"] { grid-template-columns: 1fr !important; } } /* ── 7. Service page — fix image fixed heights on mobile ── */ @media (max-width: 768px) { .service-section__content { padding: 36px 24px; } .service-section__img { min-height: 240px; } /* Inline height:420px on video/img inside service sections */ .service-section video, .service-section img[style*="height:420px"], .service-section img[style*="height: 420px"] { height: 260px !important; } } @media (max-width: 480px) { .service-section__content { padding: 28px 16px; } .service-section__img { min-height: 200px; } .service-section video, .service-section img[style*="height:420px"], .service-section img[style*="height: 420px"] { height: 220px !important; } } /* ── 8. CTA Banner — reduce padding ── */ @media (max-width: 768px) { .cta-banner { padding: 48px 20px; } .cta-banner p { font-size: 15px; } } @media (max-width: 480px) { .cta-banner { padding: 36px 16px; } } /* ── 9. Stat items ── */ @media (max-width: 480px) { .stat-item { padding: 28px 16px; } .stat-item__num { font-size: 48px; } } /* ── 10. Footer ── */ @media (max-width: 480px) { .footer { padding: 40px 0 0; } .footer__grid { padding-bottom: 40px; } } /* ── 11. Masonry gallery (portfolio detail pages) ── */ @media (max-width: 768px) { .masonry-gallery { columns: 2 !important; gap: 8px !important; } } @media (max-width: 480px) { .masonry-gallery { columns: 1 !important; } } /* ── 12. Segment feature & callout grids (in