/* ========================================================================== KONVEL — v2 EXPLORATORY STYLE LAYER ========================================================================== This file is ADDITIVE on top of styles.css. It activates only on pages that include both styles.css AND this file, with . Production (styles.css) is untouched. Purpose: deliver a "tech-savvy, high-end procurement consultancy" feel through code-authored visuals — animated mesh gradients, layered SVG geometry, scroll-reveal motion, magnetic CTAs, editorial typography. No third-party assets, no images required. Photographic imagery from Higgsfield will slot in later via the Higgsfield prompt brief. Author: Konvel Ltd · 2026-05-04 ========================================================================== */ /* === MOTION TOKENS ===================================================== */ .v2 { --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1); --motion-fast: 0.35s; --motion-base: 0.6s; --motion-slow: 1.1s; --teal-glow: rgba(74, 148, 145, 0.35); } /* === FILM GRAIN — subtle editorial finish ============================= */ body.v2 { position: relative; } body.v2::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 50; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.06; mix-blend-mode: multiply; } /* === STICKY HEADER POLISH ============================================= */ .v2 .site-header { background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); transition: padding 0.3s var(--ease-out-quart), box-shadow 0.3s var(--ease-out-quart), background 0.3s var(--ease-out-quart); } .v2 .site-header.is-scrolled { padding: 12px 0; box-shadow: 0 4px 24px -12px rgba(11, 31, 58, 0.15); } .v2 .brand { position: relative; } .v2 .brand::after { content: ''; position: absolute; left: -6px; right: -6px; bottom: -6px; height: 2px; background: linear-gradient(90deg, var(--teal), var(--teal-light)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out-expo); } .v2 .brand:hover::after { transform: scaleX(1); } .v2 .site-nav a { position: relative; padding: 4px 0; border-bottom: none; } .v2 .site-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--teal); transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease-out-expo); } .v2 .site-nav a:hover::after, .v2 .site-nav a.active::after { transform: scaleX(1); transform-origin: left; } .v2 .site-nav a.active { border-bottom: none; padding-bottom: 4px; } /* === HERO V2 ========================================================== */ .v2 .hero-v2 { position: relative; min-height: 78vh; display: flex; align-items: center; background: var(--navy); color: var(--white); overflow: hidden; isolation: isolate; margin-top: -1px; } /* mesh gradient backdrop — animates infinitely, blurred for soft mesh look */ .v2 .hero-v2::before { content: ''; position: absolute; inset: -15%; background: radial-gradient(ellipse 50% 40% at 18% 28%, rgba(31, 92, 90, 0.65), transparent 60%), radial-gradient(ellipse 45% 50% at 82% 22%, rgba(74, 148, 145, 0.50), transparent 60%), radial-gradient(ellipse 60% 45% at 50% 88%, rgba(15, 50, 80, 0.85), transparent 65%), radial-gradient(ellipse 40% 30% at 90% 75%, rgba(31, 92, 90, 0.40), transparent 60%); filter: blur(70px); animation: meshDrift 24s var(--ease-in-out-cubic) infinite alternate; z-index: 0; } @keyframes meshDrift { 0% { transform: translate( 0%, 0%) rotate( 0deg) scale(1.00); } 33% { transform: translate(-3%, 2%) rotate( 4deg) scale(1.05); } 66% { transform: translate( 4%, -3%) rotate( -3deg) scale(1.02); } 100% { transform: translate(-2%, 4%) rotate( 2deg) scale(1.07); } } /* faint hairline grid overlay — "engineered" feel */ .v2 .hero-v2::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 80px 80px; z-index: 1; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%); mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%); } /* floating geometric SVG layer */ .v2 .hero-v2 .hero-shapes { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .v2 .hero-v2 .hero-shapes .shape { position: absolute; opacity: 0.16; transform-origin: center; } .v2 .hero-v2 .hero-shapes .shape-1 { top: 8%; right: 6%; width: 220px; height: 220px; animation: floatA 18s var(--ease-in-out-cubic) infinite alternate; } .v2 .hero-v2 .hero-shapes .shape-2 { bottom: 12%; left: 4%; width: 160px; height: 160px; animation: floatB 22s var(--ease-in-out-cubic) infinite alternate; opacity: 0.12; } .v2 .hero-v2 .hero-shapes .shape-3 { top: 55%; right: 18%; width: 110px; height: 110px; animation: floatC 16s var(--ease-in-out-cubic) infinite alternate; opacity: 0.10; } @keyframes floatA { from { transform: translate(0, 0) rotate( 0deg); } to { transform: translate(-30px, 20px) rotate( 35deg); } } @keyframes floatB { from { transform: translate(0, 0) rotate( 0deg); } to { transform: translate(40px, -15px) rotate(-25deg); } } @keyframes floatC { from { transform: translate(0, 0) rotate( 0deg); } to { transform: translate(-20px, -25px) rotate( 45deg); } } /* hero content surface */ .v2 .hero-v2 .container { position: relative; z-index: 3; padding-top: 100px; padding-bottom: 100px; } .v2 .hero-v2 .eyebrow { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--teal-light); margin-bottom: 28px; opacity: 0; animation: fadeIn 0.9s var(--ease-out-quart) 0.1s forwards; } .v2 .hero-v2 .eyebrow .dot { display: inline-block; width: 6px; height: 6px; background: var(--teal-light); border-radius: 50%; margin-right: 10px; vertical-align: middle; box-shadow: 0 0 12px var(--teal-glow); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.4); } } .v2 .hero-v2 h1 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(48px, 7.5vw, 104px); line-height: 1.02; letter-spacing: -0.02em; color: var(--white); margin: 0 0 36px; max-width: 14ch; } .v2 .hero-v2 h1 .line { display: block; overflow: hidden; padding-bottom: 0.05em; } .v2 .hero-v2 h1 .line > span { display: inline-block; transform: translateY(110%); animation: lineRise 1.1s var(--ease-out-expo) forwards; } .v2 .hero-v2 h1 .line:nth-child(2) > span { animation-delay: 0.18s; } .v2 .hero-v2 h1 .line:nth-child(3) > span { animation-delay: 0.36s; } @keyframes lineRise { from { transform: translateY(110%); } to { transform: translateY(0); } } .v2 .hero-v2 h1 .accent { font-style: italic; background: linear-gradient(110deg, var(--teal-light) 0%, #7BC4C1 40%, var(--teal-light) 60%, #5DA8A5 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradientSlide 6s ease-in-out infinite; } @keyframes gradientSlide { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .v2 .hero-v2 .lead { max-width: 620px; font-size: 19px; line-height: 1.65; color: rgba(255, 255, 255, 0.82); margin-bottom: 40px; opacity: 0; transform: translateY(20px); animation: fadeUp 0.9s var(--ease-out-quart) 0.6s forwards; } .v2 .hero-v2 .ctas { display: flex; gap: 16px; flex-wrap: wrap; opacity: 0; transform: translateY(20px); animation: fadeUp 0.9s var(--ease-out-quart) 0.78s forwards; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { to { opacity: 1; } } /* hero scroll indicator */ .v2 .hero-v2 .scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 3; font-family: var(--font-sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); opacity: 0; animation: fadeIn 0.9s var(--ease-out-quart) 1.2s forwards; display: flex; flex-direction: column; align-items: center; gap: 10px; } .v2 .hero-v2 .scroll-cue .line { width: 1px; height: 36px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.6), transparent); background-size: 100% 200%; animation: scrollPulse 2.4s var(--ease-in-out-cubic) infinite; } @keyframes scrollPulse { 0% { background-position: 0 -100%; } 100% { background-position: 0 200%; } } /* === BUTTONS V2 — magnetic + animated arrow ============================ */ .v2 .btn { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 16px 32px; font-weight: 500; letter-spacing: 0.3px; border-radius: 4px; border: none; overflow: hidden; transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo), background 0.3s var(--ease-out-quart); will-change: transform; } .v2 .btn-primary { background: var(--teal); color: var(--white); box-shadow: 0 6px 24px -8px rgba(31, 92, 90, 0.5); border-bottom: none; } .v2 .btn-primary:hover { background: var(--teal); color: var(--white); box-shadow: 0 16px 40px -12px rgba(31, 92, 90, 0.6), 0 0 0 1px rgba(74, 148, 145, 0.3); border-bottom: none; } .v2 .btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.2), transparent); transform: translateX(-100%); transition: transform 0.7s var(--ease-out-quart); pointer-events: none; } .v2 .btn-primary:hover::before { transform: translateX(100%); } .v2 .btn-ghost { background: transparent; color: var(--white); border: 1px solid rgba(255, 255, 255, 0.3); } .v2 .hero-v2 .btn-ghost { color: var(--white); } .v2 .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.6); color: var(--white); } /* arrow that slides on hover */ .v2 .btn .arrow { display: inline-block; width: 14px; height: 14px; position: relative; transition: transform 0.35s var(--ease-out-expo); } .v2 .btn .arrow::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1.5px; background: currentColor; transform: translateY(-50%); } .v2 .btn .arrow::after { content: ''; position: absolute; top: 50%; right: 0; width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-50%) rotate(45deg); } .v2 .btn:hover .arrow { transform: translateX(6px); } /* === SECTION INTRO + EYEBROW V2 ======================================== */ .v2 .section .eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--teal); margin-bottom: 18px; position: relative; padding-left: 32px; display: inline-block; } .v2 .section .eyebrow::before { content: ''; position: absolute; left: 0; top: 50%; width: 22px; height: 1px; background: var(--teal); } .v2 .section--navy .eyebrow { color: var(--teal-light); } .v2 .section--navy .eyebrow::before { background: var(--teal-light); } .v2 .section h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(32px, 4.5vw, 56px); line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 28px; max-width: 22ch; } .v2 .section h2 .accent-italic { font-style: italic; color: var(--teal); } .v2 .section--navy h2 .accent-italic { color: var(--teal-light); } /* === SCROLL REVEAL =================================================== */ .v2 [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease-out-quart), transform 0.9s var(--ease-out-quart); } .v2 [data-reveal].in-view { opacity: 1; transform: translateY(0); } .v2 [data-reveal="scale"] { transform: translateY(20px) scale(0.96); } .v2 [data-reveal="scale"].in-view { transform: translateY(0) scale(1); } .v2 [data-reveal="left"] { transform: translateX(-30px); } .v2 [data-reveal="left"].in-view { transform: translateX(0); } .v2 [data-reveal="right"] { transform: translateX(30px); } .v2 [data-reveal="right"].in-view { transform: translateX(0); } /* === CARDS V2 — animated border + lift ================================ */ .v2 .card { position: relative; background: var(--white); padding: 32px 28px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo), border-color 0.4s var(--ease-out-quart); overflow: hidden; isolation: isolate; } .v2 .card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(31, 92, 90, 0.04) 0%, transparent 35%, transparent 65%, rgba(11, 31, 58, 0.03) 100%); opacity: 0; transition: opacity 0.5s var(--ease-out-quart); z-index: -1; } .v2 .card::after { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--teal), var(--teal-light)); transition: width 0.6s var(--ease-out-expo); } .v2 .card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -25px rgba(11, 31, 58, 0.18), 0 8px 20px -8px rgba(11, 31, 58, 0.08); border-color: rgba(31, 92, 90, 0.18); } .v2 .card:hover::before { opacity: 1; } .v2 .card:hover::after { width: 100%; } .v2 .card h3 { font-family: var(--font-serif); font-weight: 700; font-size: 21px; line-height: 1.25; margin-bottom: 14px; color: var(--navy); position: relative; padding-left: 0; } /* numbered card variant — tiny numeral marker */ .v2 .card[data-num] { padding-top: 60px; } .v2 .card[data-num]::before { content: attr(data-num); position: absolute; top: 24px; right: 28px; font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--teal); letter-spacing: 1px; opacity: 0.7; background: none; z-index: 0; width: auto; height: auto; inset: auto 28px auto auto; transform: none; } /* === STEP V2 — "How we work" =========================================== */ .v2 .step { display: grid; grid-template-columns: 100px 1fr; gap: 28px; padding: 28px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); position: relative; align-items: start; } .v2 .step:last-child { border-bottom: none; } .v2 .step::before { content: ''; position: absolute; left: 50px; top: 0; width: 1px; height: 100%; background: linear-gradient(to bottom, transparent, rgba(31, 92, 90, 0.18), transparent); z-index: 0; } .v2 .step-number { font-family: var(--font-serif); font-style: italic; font-size: 38px; color: var(--teal); line-height: 1; position: relative; z-index: 1; background: var(--paper); padding: 8px 14px; border-radius: 4px; display: inline-block; width: max-content; } .v2 .section:not(.section--paper) .step-number { background: var(--white); } .v2 .step h3 { font-family: var(--font-serif); font-weight: 700; font-size: 22px; margin-bottom: 8px; color: var(--navy); } .v2 .step p { color: var(--grey); } /* === FLOW V2 — geographic diagram, soft glass ========================= */ .v2 .flow { margin-top: 56px; padding: 56px 32px; background: linear-gradient(135deg, var(--paper) 0%, var(--soft-bg) 100%); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 12px; position: relative; overflow: hidden; } .v2 .flow::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 50%, rgba(31, 92, 90, 0.06), transparent 40%), radial-gradient(circle at 80% 50%, rgba(11, 31, 58, 0.05), transparent 40%); pointer-events: none; } .v2 .flow-konvel .k { background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%); color: var(--white); box-shadow: 0 20px 40px -10px rgba(31, 92, 90, 0.35); position: relative; } .v2 .flow-konvel .k::after { content: ''; position: absolute; inset: -8px; border-radius: inherit; border: 1px solid rgba(31, 92, 90, 0.25); animation: ringExpand 3s var(--ease-in-out-cubic) infinite; pointer-events: none; } @keyframes ringExpand { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.5); opacity: 0; } } /* === ANCHOR PULL-QUOTES =============================================== */ .v2 .anchor { font-family: var(--font-serif); font-style: italic; font-size: clamp(24px, 3vw, 36px); line-height: 1.35; color: var(--navy); max-width: 780px; margin: 56px auto; padding-left: 32px; border-left: 2px solid var(--teal); position: relative; } .v2 .section--navy .anchor { color: var(--white); border-left-color: var(--teal-light); } /* === FOOTER V2 ======================================================== */ .v2 .site-footer { position: relative; background: var(--navy); color: rgba(255, 255, 255, 0.78); overflow: hidden; } .v2 .site-footer::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 10% 0%, rgba(31, 92, 90, 0.18), transparent 50%), radial-gradient(ellipse at 90% 100%, rgba(74, 148, 145, 0.12), transparent 60%); pointer-events: none; } .v2 .footer-brand { font-family: var(--font-serif); font-weight: 700; font-size: 28px; letter-spacing: 2px; background: linear-gradient(120deg, var(--white) 0%, rgba(255,255,255,0.7) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; } .v2 .site-footer a { color: rgba(255, 255, 255, 0.85); border-bottom: 1px solid transparent; transition: color 0.3s, border-color 0.3s; } .v2 .site-footer a:hover { color: var(--teal-light); border-bottom-color: var(--teal-light); } /* === ACCENT — number stat strip (used as optional band) =============== */ .v2 .stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; margin: 56px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .v2 .stat-item-v2 { padding: 32px 24px; border-right: 1px solid rgba(255, 255, 255, 0.08); position: relative; } .v2 .stat-item-v2:last-child { border-right: none; } .v2 .stat-number { font-family: var(--font-serif); font-weight: 700; font-size: 48px; line-height: 1; color: var(--white); letter-spacing: -0.02em; display: block; margin-bottom: 8px; } .v2 .stat-number .suffix { font-size: 0.5em; color: var(--teal-light); font-style: italic; margin-left: 4px; } .v2 .stat-label { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } @media (max-width: 700px) { .v2 .stat-item-v2 { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); } .v2 .stat-item-v2:last-child { border-bottom: none; } .v2 .step { grid-template-columns: 1fr; gap: 12px; } .v2 .step::before { display: none; } } /* === REDUCED MOTION =================================================== */ @media (prefers-reduced-motion: reduce) { .v2 *, .v2 *::before, .v2 *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .v2 .hero-v2 h1 .line > span { transform: translateY(0) !important; } .v2 .hero-v2 .lead, .v2 .hero-v2 .ctas, .v2 .hero-v2 .eyebrow, .v2 .hero-v2 .scroll-cue { opacity: 1 !important; transform: none !important; } .v2 [data-reveal] { opacity: 1 !important; transform: none !important; } } /* ========================================================================== ROUND-2 ADDITIONS — What-we-do wow, visibility fallback, page enhancements ========================================================================== */ /* === REVEAL-READY GATE ================================================ Inline boot script in adds .reveal-ready to immediately. We only hide [data-reveal] elements WHEN the gate has been set, and a 2.5s JS fallback force-shows everything regardless. Result: even if IntersectionObserver fails or never fires, content always becomes visible — no more stuck-hidden text. */ .v2 [data-reveal] { opacity: 1; transform: none; } html.reveal-ready .v2 [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease-out-quart), transform 0.9s var(--ease-out-quart); will-change: opacity, transform; } html.reveal-ready .v2 [data-reveal].in-view, html.reveal-ready .v2 [data-reveal].force-show { opacity: 1; transform: translateY(0); } html.reveal-ready .v2 [data-reveal="scale"] { transform: translateY(20px) scale(0.96); } html.reveal-ready .v2 [data-reveal="scale"].in-view, html.reveal-ready .v2 [data-reveal="scale"].force-show { transform: translateY(0) scale(1); } html.reveal-ready .v2 [data-reveal="left"] { transform: translateX(-30px); } html.reveal-ready .v2 [data-reveal="left"].in-view, html.reveal-ready .v2 [data-reveal="left"].force-show { transform: translateX(0); } html.reveal-ready .v2 [data-reveal="right"] { transform: translateX(30px); } html.reveal-ready .v2 [data-reveal="right"].in-view, html.reveal-ready .v2 [data-reveal="right"].force-show { transform: translateX(0); } /* === WHAT WE DO — wow upgrade ========================================= */ .v2 .section-do { position: relative; background: linear-gradient(180deg, var(--white) 0%, #FCFBF8 100%); overflow: hidden; } .v2 .section-do::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 50% -10%, rgba(31, 92, 90, 0.08), transparent 45%), radial-gradient(circle 1.2px at 50% 50%, rgba(11, 31, 58, 0.10) 100%, transparent 0); background-size: 100% 100%, 28px 28px; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 95%); mask-image: linear-gradient(180deg, black 0%, transparent 95%); z-index: 0; } .v2 .section-do > .container { position: relative; z-index: 1; } /* dramatic divider line */ .v2 .section-do .container::after { content: ''; display: block; margin: 64px auto 0; width: 56px; height: 1px; background: linear-gradient(90deg, transparent, var(--teal), transparent); } /* === CARDS V2 — service-card variant with SVG icon =================== */ .v2 .service-card { position: relative; background: var(--white); padding: 44px 32px 36px; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 10px; transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo), border-color 0.4s var(--ease-out-quart); overflow: hidden; isolation: isolate; transform-style: preserve-3d; } .v2 .service-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(31, 92, 90, 0.06), transparent 40%); opacity: 0; transition: opacity 0.5s var(--ease-out-quart); z-index: -1; } .v2 .service-card::after { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--teal), var(--teal-light)); transition: width 0.6s var(--ease-out-expo); } .v2 .service-card:hover { transform: translateY(-8px); box-shadow: 0 36px 70px -28px rgba(11, 31, 58, 0.22), 0 12px 24px -10px rgba(11, 31, 58, 0.10); border-color: rgba(31, 92, 90, 0.22); } .v2 .service-card:hover::before { opacity: 1; } .v2 .service-card:hover::after { width: 100%; } .v2 .service-card[data-num]::after { /* override the regular ::after for numbered */ } .v2 .service-card .num { position: absolute; top: 22px; right: 26px; font-family: var(--font-serif); font-style: italic; font-size: 13px; letter-spacing: 1.5px; color: var(--teal); opacity: 0.8; } .v2 .service-card .card-icon { width: 44px; height: 44px; margin-bottom: 22px; color: var(--teal); transition: color 0.4s var(--ease-out-quart), transform 0.5s var(--ease-out-expo); } .v2 .service-card:hover .card-icon { color: var(--navy); transform: scale(1.06) rotate(-3deg); } .v2 .service-card h3 { font-family: var(--font-serif); font-weight: 700; font-size: 22px; line-height: 1.25; margin-bottom: 12px; color: var(--navy); } .v2 .service-card p { color: var(--grey); font-size: 15.5px; line-height: 1.62; } /* === SERVICES PAGE — chapter-style sections =========================== */ .v2 .service-section { position: relative; overflow: hidden; } .v2 .service-section .service-marker { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; } .v2 .service-section .service-number { font-family: var(--font-serif); font-style: italic; font-size: 15px; letter-spacing: 2px; color: var(--teal); } .v2 .service-section .service-divider { flex: 1; height: 1px; background: linear-gradient(90deg, var(--teal) 0%, transparent 60%); max-width: 200px; } .v2 .service-section h2 { margin-top: 0; margin-bottom: 18px; } .v2 .service-section h4 { font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--teal); margin: 28px 0 12px; } .v2 .service-section ul { list-style: none !important; padding-left: 0 !important; } .v2 .service-section ul li { position: relative; padding-left: 24px; margin-bottom: 10px; color: var(--charcoal); line-height: 1.6; } .v2 .service-section ul li::before { content: ''; position: absolute; left: 0; top: 11px; width: 12px; height: 1px; background: var(--teal); } .v2 .service-section--paper { background: var(--paper); } .v2 .service-section .timeline-line { margin-top: 18px; font-size: 14px; color: var(--grey); border-top: 1px solid rgba(0, 0, 0, 0.08); padding-top: 14px; } .v2 .service-section .timeline-line strong { color: var(--navy); } /* === INDUSTRIES PAGE — sector tiles =================================== */ .v2 .sector-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } @media (max-width: 700px) { .v2 .sector-grid { grid-template-columns: 1fr; } } .v2 .sector-tile { position: relative; padding: 56px 36px 44px; background: var(--white); border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 10px; overflow: hidden; transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo), border-color 0.4s; isolation: isolate; } .v2 .sector-tile::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--navy), var(--teal)); transition: width 0.7s var(--ease-out-expo); } .v2 .sector-tile::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(31, 92, 90, 0.06), transparent 50%); opacity: 0; transition: opacity 0.5s; z-index: -1; } .v2 .sector-tile:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -28px rgba(11, 31, 58, 0.18); border-color: rgba(31, 92, 90, 0.20); } .v2 .sector-tile:hover::before { width: 100%; } .v2 .sector-tile:hover::after { opacity: 1; } .v2 .sector-tile .sector-icon { width: 48px; height: 48px; color: var(--teal); margin-bottom: 22px; transition: color 0.4s, transform 0.5s var(--ease-out-expo); } .v2 .sector-tile:hover .sector-icon { color: var(--navy); transform: scale(1.06); } .v2 .sector-tile h3 { font-family: var(--font-serif); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--navy); margin-bottom: 12px; } .v2 .sector-tile p { color: var(--grey); font-size: 15.5px; line-height: 1.62; } /* === FEE / CATEGORY ROW V2 ============================================ */ .v2 .fee-row { display: grid; grid-template-columns: 1.2fr 2fr 1.4fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); align-items: start; } .v2 .fee-row:last-child { border-bottom: none; } .v2 .fee-name { font-family: var(--font-serif); font-weight: 700; font-size: 17px; color: var(--navy); } .v2 .fee-when { color: var(--grey); font-size: 14.5px; line-height: 1.55; } .v2 .fee-rate { font-weight: 500; color: var(--teal); font-size: 14.5px; } @media (max-width: 700px) { .v2 .fee-row { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; } } /* === CONTACT PAGE — form refinement =================================== */ .v2 .contact-block { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; margin-top: 56px; align-items: start; } @media (max-width: 800px) { .v2 .contact-block { grid-template-columns: 1fr; gap: 40px; } } .v2 .contact-block dl { display: grid; grid-template-columns: 80px 1fr; gap: 12px 20px; } .v2 .contact-block dt { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--teal); align-self: start; padding-top: 4px; } .v2 .contact-block dd { margin: 0; color: var(--charcoal); line-height: 1.6; } .v2 .contact-form { background: var(--paper); padding: 40px 36px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.06); } .v2 .contact-form > div { margin-bottom: 18px; } .v2 .contact-form label { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; } .v2 .contact-form input[type="text"], .v2 .contact-form input[type="email"], .v2 .contact-form input[type="tel"], .v2 .contact-form select, .v2 .contact-form textarea { width: 100%; padding: 12px 14px; font-family: var(--font-sans); font-size: 15px; background: var(--white); border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 6px; color: var(--charcoal); transition: border-color 0.3s, box-shadow 0.3s; } .v2 .contact-form input:focus, .v2 .contact-form select:focus, .v2 .contact-form textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31, 92, 90, 0.12); } .v2 .contact-form textarea { min-height: 140px; resize: vertical; } .v2 .contact-form .checkbox-row { display: flex; gap: 12px; align-items: flex-start; margin-top: 8px; } .v2 .contact-form .checkbox-row input { margin-top: 6px; } .v2 .contact-form .checkbox-row label { text-transform: none; font-weight: 400; font-size: 13.5px; letter-spacing: 0; color: var(--grey); margin-bottom: 0; line-height: 1.55; } /* === HERO V2 — subtitle / breadcrumb variant for non-home pages ====== */ .v2 .page-hero { position: relative; padding: 120px 0 80px; background: radial-gradient(ellipse 60% 40% at 80% 100%, rgba(31, 92, 90, 0.10), transparent 60%), radial-gradient(ellipse 50% 40% at 20% 0%, rgba(11, 31, 58, 0.06), transparent 60%), var(--white); overflow: hidden; } .v2 .page-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(11, 31, 58, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 31, 58, 0.025) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%); z-index: 0; } .v2 .page-hero > .container { position: relative; z-index: 1; } .v2 .page-hero h1 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(36px, 5.5vw, 64px); line-height: 1.08; letter-spacing: -0.015em; margin-bottom: 22px; max-width: 18ch; color: var(--navy); } .v2 .page-hero h1 .accent-italic { font-style: italic; color: var(--teal); } .v2 .page-hero .lead { max-width: 640px; font-size: 19px; line-height: 1.6; color: var(--grey); } /* === CTA NAVY BAND — v2 ============================================== */ .v2 .section--navy .btn-primary { background: var(--white); color: var(--navy); } .v2 .section--navy .btn-primary:hover { background: var(--white); color: var(--teal); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.4); } /* ========================================================================== ROUND-3 ADDITIONS — Scroll progress, bento, world map, process diagram, decorative artwork, page-load splash, cursor follower ========================================================================== */ /* === SCROLL PROGRESS BAR ============================================== */ .v2 .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--teal), var(--teal-light)); box-shadow: 0 0 12px var(--teal-glow); z-index: 200; transition: width 0.08s linear; pointer-events: none; } /* === PAGE-LOAD SPLASH ================================================ */ .v2 .splash { position: fixed; inset: 0; background: var(--navy); z-index: 500; display: flex; align-items: center; justify-content: center; pointer-events: none; animation: splashOut 1.4s var(--ease-out-expo) 0.3s forwards; } .v2 .splash .splash-mark { font-family: var(--font-serif); font-weight: 700; font-size: clamp(48px, 8vw, 96px); letter-spacing: 8px; color: var(--white); position: relative; overflow: hidden; display: inline-block; } .v2 .splash .splash-mark::after { content: ''; position: absolute; inset: 0; background: var(--navy); animation: splashWipe 0.9s var(--ease-out-expo) 0.2s forwards; } @keyframes splashWipe { from { transform: translateX(0); } to { transform: translateX(101%); } } @keyframes splashOut { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-100%); pointer-events: none; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .v2 .splash { display: none !important; } } /* === CURSOR FOLLOWER (desktop only, non-touch) ====================== */ .v2 .cursor-dot, .v2 .cursor-ring { position: fixed; pointer-events: none; z-index: 9999; border-radius: 50%; top: 0; left: 0; transform: translate(-50%, -50%); mix-blend-mode: difference; opacity: 0; transition: opacity 0.3s, width 0.25s var(--ease-out-quart), height 0.25s var(--ease-out-quart), background 0.25s, border-color 0.25s; } .v2 .cursor-dot { width: 6px; height: 6px; background: var(--white); } .v2 .cursor-ring { width: 36px; height: 36px; border: 1px solid var(--teal-light); background: transparent; } .v2.cursor-active .cursor-dot, .v2.cursor-active .cursor-ring { opacity: 1; } .v2.cursor-hover .cursor-ring { width: 56px; height: 56px; border-color: var(--white); } .v2.cursor-hover .cursor-dot { opacity: 0; } @media (max-width: 800px), (pointer: coarse) { .v2 .cursor-dot, .v2 .cursor-ring { display: none !important; } } @media (prefers-reduced-motion: reduce) { .v2 .cursor-dot, .v2 .cursor-ring { display: none !important; } } /* === BENTO LAYOUT for "What we do" =================================== */ @media (min-width: 900px) { .v2 .grid-bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(220px, auto); gap: 24px; } .v2 .grid-bento > .service-card:nth-child(1) { grid-column: span 4; grid-row: span 2; padding: 56px 44px; background: linear-gradient(135deg, var(--navy) 0%, #0F2C4D 60%, var(--teal) 130%); color: var(--white); border-color: rgba(255, 255, 255, 0.1); overflow: hidden; } .v2 .grid-bento > .service-card:nth-child(1)::before { background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(74, 148, 145, 0.25), transparent 50%); opacity: 1; } .v2 .grid-bento > .service-card:nth-child(1) .num { color: var(--teal-light); opacity: 1; font-size: 14px; } .v2 .grid-bento > .service-card:nth-child(1) h3 { color: var(--white); font-size: 36px; line-height: 1.15; margin-bottom: 18px; margin-top: 14px; } .v2 .grid-bento > .service-card:nth-child(1) p { color: rgba(255, 255, 255, 0.82); font-size: 16.5px; max-width: 50ch; } .v2 .grid-bento > .service-card:nth-child(1) .card-icon { width: 64px; height: 64px; color: var(--teal-light); margin-bottom: 36px; } .v2 .grid-bento > .service-card:nth-child(1):hover .card-icon { color: var(--white); } /* Decorative geometric layer in featured card */ .v2 .grid-bento > .service-card:nth-child(1)::after { content: ''; position: absolute; width: 360px; height: 360px; right: -100px; bottom: -120px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 30% 30%, rgba(74, 148, 145, 0.12), transparent 60%); } .v2 .grid-bento > .service-card:nth-child(2) { grid-column: span 2; grid-row: span 1; } .v2 .grid-bento > .service-card:nth-child(3) { grid-column: span 2; grid-row: span 1; } .v2 .grid-bento > .service-card:nth-child(4) { grid-column: span 2; grid-row: span 1; } .v2 .grid-bento > .service-card:nth-child(5) { grid-column: span 2; grid-row: span 1; } .v2 .grid-bento > .service-card:nth-child(6) { grid-column: span 2; grid-row: span 1; } } .v2 .grid-bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } /* === WORLD MAP — geography flow ====================================== */ .v2 .world-map { position: relative; margin: 56px auto 0; max-width: 1000px; padding: 32px; background: linear-gradient(180deg, var(--paper) 0%, var(--soft-bg) 100%); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 16px; overflow: hidden; } .v2 .world-map svg { width: 100%; height: auto; display: block; } .v2 .world-map .land { fill: rgba(11, 31, 58, 0.06); stroke: rgba(11, 31, 58, 0.12); stroke-width: 0.4; } .v2 .world-map .grid-line { stroke: rgba(11, 31, 58, 0.05); stroke-width: 0.3; } .v2 .world-map .hub-dot { fill: var(--teal); stroke: var(--white); stroke-width: 1.2; } .v2 .world-map .hub-london { fill: var(--navy); stroke: var(--teal-light); stroke-width: 1.5; } .v2 .world-map .hub-pulse { fill: var(--teal); opacity: 0; animation: hubPulse 3s ease-out infinite; transform-box: fill-box; transform-origin: center; } .v2 .world-map .hub-pulse.delay-1 { animation-delay: 0.7s; } .v2 .world-map .hub-pulse.delay-2 { animation-delay: 1.4s; } .v2 .world-map .hub-pulse.delay-3 { animation-delay: 2.1s; } @keyframes hubPulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(4); opacity: 0; } } .v2 .world-map .flow-path { fill: none; stroke: var(--teal); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.7; animation: dashFlow 30s linear infinite; } @keyframes dashFlow { to { stroke-dashoffset: -800; } } .v2 .world-map .flow-label { font-family: var(--font-sans); font-size: 9px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; fill: var(--navy); } .v2 .world-map .map-legend { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin-top: 20px; font-family: var(--font-sans); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--grey); } .v2 .world-map .map-legend span { display: inline-flex; align-items: center; gap: 8px; } .v2 .world-map .map-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .v2 .world-map .map-legend .l-london { background: var(--navy); } .v2 .world-map .map-legend .l-hub { background: var(--teal); } @media (prefers-reduced-motion: reduce) { .v2 .world-map .hub-pulse { animation: none; opacity: 0; } .v2 .world-map .flow-path { animation: none; } } /* === ANIMATED PROCESS DIAGRAM — how-it-works ========================= */ .v2 .process-diagram { position: relative; margin: 48px 0 24px; padding: 56px 24px 40px; background: linear-gradient(180deg, var(--white) 0%, var(--paper) 100%); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 12px; overflow: hidden; } .v2 .process-diagram svg { width: 100%; height: auto; max-height: 220px; display: block; } .v2 .process-diagram .pd-track { stroke: rgba(31, 92, 90, 0.18); stroke-width: 2; fill: none; stroke-dasharray: 5 6; } .v2 .process-diagram .pd-fill { stroke: var(--teal); stroke-width: 2.5; fill: none; } .v2 .process-diagram .pd-station { fill: var(--white); stroke: var(--teal); stroke-width: 2; } .v2 .process-diagram .pd-station-active { fill: var(--teal); } .v2 .process-diagram .pd-num { font-family: var(--font-serif); font-style: italic; font-size: 13px; font-weight: 700; fill: var(--navy); text-anchor: middle; } .v2 .process-diagram .pd-label { font-family: var(--font-sans); font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; fill: var(--charcoal); text-anchor: middle; } .v2 .process-diagram .pd-pulse { fill: var(--teal-light); animation: pdPulse 5s linear infinite; filter: drop-shadow(0 0 4px var(--teal-glow)); } @keyframes pdPulse { 0% { transform: translateX(0); opacity: 1; } 16% { transform: translateX(150px); opacity: 1; } 33% { transform: translateX(300px); opacity: 1; } 50% { transform: translateX(450px); opacity: 1; } 66% { transform: translateX(600px); opacity: 1; } 83% { transform: translateX(750px); opacity: 1; } 99% { transform: translateX(900px); opacity: 1; } 100% { transform: translateX(0); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .v2 .process-diagram .pd-pulse { animation: none; opacity: 0; } } /* === DECORATIVE ARTWORK ZONES ======================================== */ .v2 .art-strip { position: relative; margin: 0; height: 220px; background: var(--navy); overflow: hidden; } .v2 .art-strip svg { position: absolute; inset: 0; width: 100%; height: 100%; } .v2 .art-strip .gradient-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(31, 92, 90, 0.35), transparent 50%), linear-gradient(180deg, rgba(11, 31, 58, 0) 0%, rgba(11, 31, 58, 0.4) 100%); z-index: 2; pointer-events: none; } .v2 .art-strip .label { position: absolute; bottom: 24px; left: 32px; z-index: 3; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); } .v2 .art-strip .label::before { content: ''; display: inline-block; width: 18px; height: 1px; background: var(--teal-light); margin-right: 12px; vertical-align: middle; } /* === BIG PAGE-HERO NUMERALS (services, industries) =================== */ .v2 .page-hero { position: relative; } .v2 .page-hero .page-num { position: absolute; right: -20px; top: 50%; transform: translateY(-50%); font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: clamp(140px, 22vw, 320px); line-height: 1; color: rgba(31, 92, 90, 0.06); letter-spacing: -0.04em; pointer-events: none; z-index: 0; } @media (max-width: 700px) { .v2 .page-hero .page-num { display: none; } } /* === SERVICES PAGE — chapter numerals ================================ */ .v2 .service-section { position: relative; } .v2 .service-section .chapter-num { position: absolute; right: 24px; top: 32px; font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: clamp(90px, 16vw, 200px); line-height: 1; color: rgba(31, 92, 90, 0.05); pointer-events: none; z-index: 0; letter-spacing: -0.03em; } @media (max-width: 800px) { .v2 .service-section .chapter-num { font-size: 80px; right: 12px; top: 12px; } } .v2 .service-section .container { position: relative; z-index: 1; } /* === STAT STRIP — bigger numerals ==================================== */ .v2 .stat-strip { margin-top: 64px; } .v2 .stat-number { font-size: 64px; letter-spacing: -0.03em; } @media (max-width: 700px) { .v2 .stat-number { font-size: 48px; } } /* === REDUCED MOTION FALLBACKS for round 3 ============================ */ @media (prefers-reduced-motion: reduce) { .v2 .scroll-progress { display: none; } .v2 .splash { display: none; } } /* ========================================================================== ROUND-4 ADDITIONS — Photography, particles, premium visual polish ========================================================================== */ /* === HERO — photographic image layer ==================================== */ .v2 .hero-v2 .hero-img { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center 40%; opacity: 0.22; filter: saturate(0.55) contrast(1.15) brightness(0.85); transform: scale(1.06); animation: heroImgDrift 26s ease-in-out infinite alternate; } @keyframes heroImgDrift { from { transform: scale(1.06) translate(0, 0); } to { transform: scale(1.11) translate(-1.5%, -0.6%); } } /* === HERO CANVAS — constellation particle network ======================= */ .v2 .hero-canvas { position: absolute; inset: 0; z-index: 2; pointer-events: none; width: 100%; height: 100%; display: block; } /* === INDUSTRY TICKER BAND =============================================== */ .v2 .ticker-band { background: var(--teal); overflow: hidden; white-space: nowrap; padding: 14px 0; position: relative; z-index: 10; } .v2 .ticker-band::before, .v2 .ticker-band::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .v2 .ticker-band::before { left: 0; background: linear-gradient(90deg, var(--teal), transparent); } .v2 .ticker-band::after { right: 0; background: linear-gradient(-90deg, var(--teal), transparent); } .v2 .ticker-track { display: inline-flex; animation: tickerScroll 44s linear infinite; } .v2 .ticker-item { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.88); padding: 0 36px; white-space: nowrap; } .v2 .ticker-sep { color: rgba(255,255,255,0.35); padding: 0 4px; font-size: 14px; display: inline-block; vertical-align: middle; margin-top: -2px; } @keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* === DARK PAGE HERO — inner pages with background photography =========== */ .v2 .page-hero--dark { background: var(--navy); color: var(--white); padding: 148px 0 100px; position: relative; overflow: hidden; } .v2 .page-hero--dark .hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.16; filter: saturate(0.35) contrast(1.3) brightness(0.8); z-index: 0; } .v2 .page-hero--dark::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 65% 55% at 100% 100%, rgba(31,92,90,0.22), transparent 55%), radial-gradient(ellipse 80% 60% at 0% 0%, rgba(11,31,58,0.65), transparent 55%), linear-gradient(170deg, rgba(11,31,58,0.94) 0%, rgba(11,31,58,0.80) 100%); z-index: 1; } .v2 .page-hero--dark::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%); z-index: 0; } .v2 .page-hero--dark .container { position: relative; z-index: 2; } .v2 .page-hero--dark .eyebrow { color: var(--teal-light); } .v2 .page-hero--dark .eyebrow::before { background: var(--teal-light); } .v2 .page-hero--dark h1 { color: var(--white); max-width: 20ch; } .v2 .page-hero--dark h1 .accent-italic { font-style: italic; background: linear-gradient(110deg, var(--teal-light) 0%, #8DD4D0 40%, var(--teal-light) 80%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradientSlide 7s ease-in-out infinite; } .v2 .page-hero--dark .lead { color: rgba(255,255,255,0.70); max-width: 600px; } .v2 .page-hero--dark .page-num { color: rgba(255,255,255,0.04); position: absolute; right: -10px; top: 50%; transform: translateY(-50%); z-index: 0; } /* === SECTOR TILES — full-bleed photography ============================== */ .v2 .sector-tile--img { position: relative; min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0; border: none; border-radius: 12px; overflow: hidden; isolation: isolate; cursor: default; } .v2 .sector-tile--img .sector-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.9s var(--ease-out-expo); z-index: 0; } .v2 .sector-tile--img .sector-overlay { position: absolute; inset: 0; background: linear-gradient( 0deg, rgba(11,31,58,0.96) 0%, rgba(11,31,58,0.60) 48%, rgba(11,31,58,0.18) 100% ); z-index: 1; transition: background 0.55s var(--ease-out-quart); } .v2 .sector-tile--img:hover .sector-overlay { background: linear-gradient( 0deg, rgba(11,31,58,0.99) 0%, rgba(11,31,58,0.75) 50%, rgba(31,92,90,0.35) 100% ); } .v2 .sector-tile--img:hover .sector-img { transform: scale(1.06); } .v2 .sector-tile--img .sector-content { position: relative; z-index: 2; padding: 40px 36px; } .v2 .sector-tile--img .sector-icon { color: var(--teal-light); transition: transform 0.5s var(--ease-out-expo), color 0.4s; } .v2 .sector-tile--img:hover .sector-icon { transform: scale(1.1); color: rgba(255,255,255,0.9); } .v2 .sector-tile--img h3 { color: rgba(255,255,255,0.95); font-size: 26px; margin-bottom: 10px; } .v2 .sector-tile--img p { color: rgba(255,255,255,0.65); } /* Suppress default sector-tile pseudo-elements */ .v2 .sector-tile--img::before, .v2 .sector-tile--img::after { display: none; } /* === TRUST BAND ========================================================= */ .v2 .trust-band { padding: 36px 0; background: var(--paper); border-bottom: 1px solid rgba(0,0,0,0.05); } .v2 .trust-items { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; } .v2 .trust-item { display: flex; align-items: center; gap: 10px; padding: 8px 28px; border-right: 1px solid rgba(0,0,0,0.08); } .v2 .trust-item:last-child { border-right: none; } .v2 .trust-item-label { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(0,0,0,0.38); white-space: nowrap; } .v2 .trust-item-icon { flex-shrink: 0; color: var(--teal); } @media (max-width: 640px) { .v2 .trust-item { border-right: none; padding: 10px 14px; } } /* === DECORATIVE HEADLINE MARQUEE ======================================= */ .v2 .headline-marquee { overflow: hidden; padding: 64px 0; background: var(--navy); border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); white-space: nowrap; user-select: none; } .v2 .headline-marquee-track { display: inline-flex; animation: marqueeScroll 70s linear infinite; } .v2 .headline-marquee-track span { font-family: var(--font-serif); font-weight: 700; font-style: italic; font-size: clamp(52px, 6.5vw, 88px); color: rgba(255,255,255,0.05); letter-spacing: -0.02em; padding: 0 48px; line-height: 1; } .v2 .headline-marquee-track .hl-accent { color: rgba(74,148,145,0.10); } @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* === NUMBERS BAND — large stat display on dark background ============== */ .v2 .numbers-band { background: var(--navy); padding: 100px 0; position: relative; overflow: hidden; } .v2 .numbers-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 65% at 0% 50%, rgba(31,92,90,0.20), transparent 50%), radial-gradient(ellipse 55% 65% at 100% 50%, rgba(74,148,145,0.13), transparent 50%); } .v2 .numbers-band .container { position: relative; z-index: 1; } .v2 .number-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); margin-top: 48px; } .v2 .number-cell { padding: 52px 32px; border-right: 1px solid rgba(255,255,255,0.06); text-align: center; } .v2 .number-cell:last-child { border-right: none; } .v2 .num-display { font-family: var(--font-serif); font-weight: 700; font-size: clamp(56px, 8vw, 92px); line-height: 1; letter-spacing: -0.04em; color: var(--white); display: block; } .v2 .num-display .num-sfx { font-size: 0.45em; font-style: italic; color: var(--teal-light); vertical-align: super; margin-left: 4px; } .v2 .num-label { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.40); display: block; margin-top: 16px; } @media (max-width: 700px) { .v2 .number-cell { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); } .v2 .number-cell:last-child { border-bottom: none; } } /* === SPLIT SECTION — photography + text ================================= */ .v2 .split-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; overflow: hidden; } @media (max-width: 800px) { .v2 .split-section { grid-template-columns: 1fr; } .v2 .split-image { min-height: 300px; } } .v2 .split-image { position: relative; overflow: hidden; } .v2 .split-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out-expo); } .v2 .split-section:hover .split-image img { transform: scale(1.04); } .v2 .split-image .split-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,31,58,0.18), transparent 60%); pointer-events: none; z-index: 1; } .v2 .split-content { display: flex; flex-direction: column; justify-content: center; padding: 80px 64px; background: var(--paper); } @media (max-width: 1100px) { .v2 .split-content { padding: 64px 48px; } } @media (max-width: 800px) { .v2 .split-content { padding: 56px 32px; } } /* === GLOW DIVIDER ======================================================= */ .v2 .glow-divider { height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(74,148,145,0.5) 25%, rgba(74,148,145,0.9) 50%, rgba(74,148,145,0.5) 75%, transparent 100% ); box-shadow: 0 0 24px rgba(74,148,145,0.18); border: none; margin: 0; } /* === CONTACT — full dark hero section =================================== */ .v2 .contact-dark-hero { background: var(--navy); padding: 130px 0 80px; position: relative; overflow: hidden; } .v2 .contact-dark-hero .hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.12; filter: saturate(0.3) contrast(1.3) brightness(0.8); z-index: 0; } .v2 .contact-dark-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(11,31,58,0.95) 0%, rgba(11,31,58,0.82) 60%, rgba(31,92,90,0.12) 100%); z-index: 1; } .v2 .contact-dark-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%); z-index: 0; } .v2 .contact-dark-hero .container { position: relative; z-index: 2; } .v2 .contact-dark-hero .eyebrow { color: var(--teal-light); } .v2 .contact-dark-hero .eyebrow::before { background: var(--teal-light); } .v2 .contact-dark-hero h1 { color: var(--white); } .v2 .contact-dark-hero h1 .accent-italic { font-style: italic; color: var(--teal-light); } .v2 .contact-dark-hero .lead { color: rgba(255,255,255,0.70); max-width: 580px; } /* contact info on dark bg */ .v2 .contact-dark-hero .contact-block dt { color: var(--teal-light) !important; } .v2 .contact-dark-hero .contact-block dd { color: rgba(255,255,255,0.75) !important; } .v2 .contact-dark-hero .contact-block a { color: var(--teal-light) !important; } .v2 .contact-dark-hero .contact-block a:hover { border-bottom-color: var(--teal-light); } .v2 .contact-dark-hero p[style] { color: rgba(255,255,255,0.45) !important; } /* dark contact form */ .v2 .contact-form--dark { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 48px 40px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .v2 .contact-form--dark label { color: rgba(255,255,255,0.55) !important; } .v2 .contact-form--dark input[type="text"], .v2 .contact-form--dark input[type="email"], .v2 .contact-form--dark input[type="tel"], .v2 .contact-form--dark select, .v2 .contact-form--dark textarea { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.90) !important; } .v2 .contact-form--dark input::placeholder, .v2 .contact-form--dark textarea::placeholder { color: rgba(255,255,255,0.28) !important; } .v2 .contact-form--dark select option { background: var(--navy); color: var(--white); } .v2 .contact-form--dark input:focus, .v2 .contact-form--dark select:focus, .v2 .contact-form--dark textarea:focus { outline: none; border-color: var(--teal-light) !important; box-shadow: 0 0 0 3px rgba(74,148,145,0.22) !important; background: rgba(255,255,255,0.09) !important; } .v2 .contact-form--dark .checkbox-row label { color: rgba(255,255,255,0.45) !important; } .v2 .contact-form--dark .checkbox-row a { color: var(--teal-light); } /* === AMBIENT IMAGE SECTION (for big image-backed navy section) ========== */ .v2 .ambient-section { position: relative; overflow: hidden; } .v2 .ambient-section .ambient-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(0.22) contrast(1.2) brightness(0.75); z-index: 0; } .v2 .ambient-section .ambient-overlay { position: absolute; inset: 0; background: rgba(11,31,58,0.88); z-index: 1; } .v2 .ambient-section .container { position: relative; z-index: 2; } /* === CALLOUT QUOTE ====================================================== */ .v2 .callout-quote { border-left: 2px solid var(--teal); padding: 28px 36px; background: linear-gradient(90deg, rgba(31,92,90,0.06), transparent 75%); border-radius: 0 8px 8px 0; margin: 40px 0; } .v2 .callout-quote p { font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 2.5vw, 26px); line-height: 1.5; color: var(--navy); margin: 0; } /* === PILL TAG =========================================================== */ .v2 .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 100px; background: rgba(31,92,90,0.09); color: var(--teal); font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid rgba(31,92,90,0.18); } .v2 .pill--light { background: rgba(74,148,145,0.14); color: var(--teal-light); border-color: rgba(74,148,145,0.24); } /* === ZOOM REVEAL variant ================================================ */ html.reveal-ready .v2 [data-reveal="zoom"] { opacity: 0; transform: scale(0.93) translateY(20px); transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo); } html.reveal-ready .v2 [data-reveal="zoom"].in-view, html.reveal-ready .v2 [data-reveal="zoom"].force-show { opacity: 1; transform: scale(1) translateY(0); } /* === REDUCED MOTION — round 4 ========================================= */ @media (prefers-reduced-motion: reduce) { .v2 .hero-img { animation: none !important; } .v2 .ticker-track { animation: none !important; } .v2 .headline-marquee-track { animation: none !important; } .v2 .hero-canvas { display: none; } } /* ========================================================================== ROUND-5 — Services Editorial Grid (replaces bento on homepage) ========================================================================== */ /* Override the section-do background for max card contrast */ .v2 .section-do { background: var(--navy) !important; position: relative; } .v2 .section-do::before { background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 100%); mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 100%); } .v2 .section-do .eyebrow { color: var(--teal-light); } .v2 .section-do .eyebrow::before { background: var(--teal-light); } .v2 .section-do h2 { color: var(--white); } .v2 .section-do h2 .accent-italic { color: var(--teal-light); } .v2 .section-do .lead { color: rgba(255,255,255,0.62); } .v2 .section-do .container::after { display: none; } /* === THE EDITORIAL GRID ================================================= */ .v2 .services-editorial { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 310px 310px 280px; gap: 14px; margin-top: 56px; } /* Card placements */ .v2 .svc-card:nth-child(1) { grid-column: span 8; grid-row: span 2; } .v2 .svc-card:nth-child(2) { grid-column: span 4; } .v2 .svc-card:nth-child(3) { grid-column: span 4; } .v2 .svc-card:nth-child(4) { grid-column: span 4; } .v2 .svc-card:nth-child(5) { grid-column: span 4; } .v2 .svc-card:nth-child(6) { grid-column: span 4; } /* === BASE SVC-CARD ====================================================== */ .v2 .svc-card { position: relative; border-radius: 10px; overflow: hidden; isolation: isolate; cursor: default; transform-style: preserve-3d; } /* Photography layer */ .v2 .svc-photo { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.9s var(--ease-out-expo), filter 0.6s var(--ease-out-quart), opacity 0.6s var(--ease-out-quart); transform: scale(1.04); opacity: 0.7; filter: saturate(0.35) contrast(1.15) brightness(0.7); will-change: transform; } .v2 .svc-card:hover .svc-photo { transform: scale(1.09); opacity: 0.85; filter: saturate(0.55) contrast(1.1) brightness(0.65); } /* Gradient overlay — navy at bottom, transparent at top */ .v2 .svc-overlay { position: absolute; inset: 0; background: linear-gradient( 0deg, rgba(11,31,58,0.97) 0%, rgba(11,31,58,0.65) 45%, rgba(11,31,58,0.18) 100% ); transition: background 0.5s var(--ease-out-quart); } .v2 .svc-card:hover .svc-overlay { background: linear-gradient( 0deg, rgba(11,31,58,0.99) 0%, rgba(11,31,58,0.78) 52%, rgba(31,92,90,0.32) 100% ); } /* Animated teal accent line at top */ .v2 .svc-card::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--teal), var(--teal-light), var(--teal)); background-size: 200% 100%; z-index: 4; transition: width 0.7s var(--ease-out-expo); } .v2 .svc-card:hover::before { width: 100%; } /* Featured card always has line */ .v2 .svc-card:nth-child(1)::before { width: 100%; animation: shineSlide 5s ease-in-out infinite; } @keyframes shineSlide { 0%, 100% { background-position: 0% 50%; opacity: 1; } 50% { background-position: 200% 50%; opacity: 0.7; } } /* Large decorative watermark number */ .v2 .svc-watermark { position: absolute; bottom: -8px; right: 16px; font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: 140px; line-height: 1; color: rgba(255,255,255,0.04); letter-spacing: -0.06em; z-index: 2; pointer-events: none; transition: opacity 0.4s, color 0.4s; user-select: none; } .v2 .svc-card:nth-child(1) .svc-watermark { font-size: 220px; bottom: -24px; } .v2 .svc-card:hover .svc-watermark { opacity: 0; } /* SVG icon at top */ .v2 .svc-icon { position: absolute; top: 28px; left: 32px; width: 40px; height: 40px; color: var(--teal-light); z-index: 3; opacity: 0.8; transition: opacity 0.4s, transform 0.5s var(--ease-out-expo); } .v2 .svc-card:nth-child(1) .svc-icon { width: 52px; height: 52px; } .v2 .svc-card:hover .svc-icon { opacity: 1; transform: scale(1.08) rotate(-4deg); } /* Content block — pinned to bottom */ .v2 .svc-body { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; padding: 28px 32px 32px; display: flex; flex-direction: column; } .v2 .svc-card:nth-child(1) .svc-body { padding: 40px 48px 44px; } /* Number badge */ .v2 .svc-num { font-family: var(--font-sans); font-size: 10px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--teal-light); margin-bottom: 10px; display: block; opacity: 0.85; } /* Title */ .v2 .svc-title { font-family: var(--font-serif); font-weight: 700; color: rgba(255,255,255,0.96); margin: 0; line-height: 1.18; transition: transform 0.45s var(--ease-out-expo); } .v2 .svc-card:not(:nth-child(1)) .svc-title { font-size: 20px; } .v2 .svc-card:nth-child(1) .svc-title { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 14px; } .v2 .svc-card:not(:nth-child(1)):hover .svc-title { transform: translateY(-4px); } /* Description — hidden on small cards until hover */ .v2 .svc-desc { font-size: 15.5px; line-height: 1.62; color: rgba(255,255,255,0.70); margin: 0; overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.55s var(--ease-out-expo), opacity 0.40s, margin-top 0.45s var(--ease-out-expo); } /* Featured always shows description */ .v2 .svc-card:nth-child(1) .svc-desc { max-height: 200px; opacity: 1; font-size: 16px; margin-top: 0; } /* Smaller cards reveal on hover */ .v2 .svc-card:not(:nth-child(1)):hover .svc-desc { max-height: 120px; opacity: 1; margin-top: 12px; } /* Animated "See service" link — slides up on hover */ .v2 .svc-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--teal-light); border: none !important; opacity: 0; transform: translateY(10px); transition: opacity 0.38s, transform 0.38s var(--ease-out-expo), color 0.2s, gap 0.3s var(--ease-out-expo); pointer-events: none; } .v2 .svc-card:hover .svc-link { opacity: 1; transform: translateY(0); pointer-events: auto; } .v2 .svc-card:nth-child(1) .svc-link { opacity: 0.8; transform: translateY(0); pointer-events: auto; } .v2 .svc-card:nth-child(1):hover .svc-link { opacity: 1; } .v2 .svc-link:hover { color: white !important; gap: 14px; } .v2 .svc-link svg { flex-shrink: 0; } /* === RESPONSIVE ========================================================= */ @media (max-width: 1100px) { .v2 .services-editorial { grid-template-rows: 280px 280px 250px; gap: 12px; } } @media (max-width: 900px) { .v2 .services-editorial { grid-template-columns: repeat(6, 1fr); grid-template-rows: auto; } .v2 .svc-card:nth-child(1) { grid-column: span 6; grid-row: span 1; min-height: 340px; } .v2 .svc-card:nth-child(2), .v2 .svc-card:nth-child(3) { grid-column: span 3; min-height: 240px; } .v2 .svc-card:nth-child(4), .v2 .svc-card:nth-child(5), .v2 .svc-card:nth-child(6) { grid-column: span 2; min-height: 220px; } .v2 .svc-card:nth-child(1) .svc-body { padding: 28px 32px 32px; } .v2 .svc-watermark { font-size: 100px !important; } } @media (max-width: 640px) { .v2 .services-editorial { grid-template-columns: 1fr 1fr; gap: 10px; } .v2 .svc-card:nth-child(1) { grid-column: span 2; min-height: 300px; } .v2 .svc-card { grid-column: span 1; min-height: 200px; } .v2 .svc-body { padding: 20px 22px 22px; } .v2 .svc-icon { top: 18px; left: 22px; width: 32px; height: 32px; } .v2 .svc-watermark { display: none; } .v2 .svc-card:nth-child(1) .svc-title { font-size: 22px; } } @media (max-width: 400px) { .v2 .services-editorial { grid-template-columns: 1fr; } .v2 .svc-card { grid-column: span 1 !important; min-height: 220px; } } /* Staggered data-reveal for svc-cards */ .v2 .svc-card[data-reveal-stagger] { transition-delay: var(--stagger-delay, 0ms); } /* ===================================================================== ROUND 6 — UX/UI AUDIT FIXES ===================================================================== */ /* 1. FEATURED SERVICE CARD — photo was invisible under heavy filter+overlay Lighten filter and open up the overlay in the upper portion so the photo reads clearly in the card's top half. */ .v2 .svc-card:nth-child(1) .svc-photo { opacity: 0.62; filter: saturate(0.62) contrast(1.08) brightness(0.92); } .v2 .svc-card:nth-child(1) .svc-overlay { background: linear-gradient( 0deg, rgba(11,31,58,0.97) 0%, rgba(11,31,58,0.52) 40%, rgba(11,31,58,0.06) 100% ); } /* 2. INNER PAGE HERO IMAGES — opacity 0.16 made them near-invisible; increase so the photo texture reads through the gradient. */ .v2 .page-hero--dark .hero-img { opacity: 0.28; filter: saturate(0.52) contrast(1.18) brightness(0.84); } /* 3. TRUST BAND — wraps to 2 rows at mid viewport; force single row with proportional shrink so it always sits in one line on desktop. */ .v2 .trust-items { flex-wrap: nowrap; } .v2 .trust-item { flex: 1 1 0; justify-content: center; min-width: 0; } .v2 .trust-item-label { white-space: normal; text-align: left; } /* 4. CONTACT FORM FIELD CONTRAST — labels 55% opacity was too dim to read; inputs need stronger borders so fields are clearly visible. */ .v2 .contact-form--dark label { color: rgba(255,255,255,0.76) !important; font-weight: 500 !important; font-size: 11.5px !important; letter-spacing: 0.9px !important; text-transform: uppercase !important; margin-bottom: 8px !important; } .v2 .contact-form--dark input[type="text"], .v2 .contact-form--dark input[type="email"], .v2 .contact-form--dark input[type="tel"], .v2 .contact-form--dark select, .v2 .contact-form--dark textarea { background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.22) !important; border-radius: 8px !important; padding: 14px 16px !important; font-size: 15px !important; transition: border-color 0.25s, background 0.25s, box-shadow 0.25s !important; } .v2 .contact-form--dark textarea { min-height: 140px !important; resize: vertical !important; } .v2 .contact-form--dark input::placeholder, .v2 .contact-form--dark textarea::placeholder { color: rgba(255,255,255,0.32) !important; font-size: 14px !important; } /* 5. CONTACT PAGE — info block DL needs more visual breathing room */ .v2 .contact-dark-hero .contact-block dt { font-size: 10px !important; letter-spacing: 2px !important; font-weight: 700 !important; margin-top: 28px !important; } .v2 .contact-dark-hero .contact-block dt:first-child { margin-top: 0 !important; } .v2 .contact-dark-hero .contact-block dd { margin-top: 6px !important; line-height: 1.65 !important; font-size: 15px !important; } /* 6. CONTACT FORM — form card gets a subtle top accent line like svc-cards */ .v2 .contact-form--dark { border-top: 3px solid var(--teal) !important; border-radius: 0 0 16px 16px !important; } /* 7. STEP NUMBERS — increase visual weight of step numbers in step list */ .v2 .step-number { font-size: 46px; color: var(--teal); font-style: italic; letter-spacing: -0.03em; } /* 8. STEP ROWS — increase vertical breathing room and improve divider */ .v2 .step { padding: 36px 0; border-bottom: 1px solid rgba(0,0,0,0.065); } .v2 .step h3 { font-size: 24px; margin-bottom: 10px; } /* 9. SECTOR TILES — Manufacturing tile was almost invisible; reduce filter intensity so the photo shows through clearly. */ .v2 .sector-tile--img .sector-img { filter: none; } .v2 .sector-tile--img .sector-overlay { background: linear-gradient( 0deg, rgba(11,31,58,0.94) 0%, rgba(11,31,58,0.52) 46%, rgba(11,31,58,0.14) 100% ); } /* 10. SECTION PADDING — "How we work" steps section needs top breathing */ .v2 .section--paper:has(.step) { padding-top: 100px; padding-bottom: 100px; } /* 11. NAV — subtle glassmorphism when header scrolled on light pages */ .v2 .site-header.is-scrolled { background: rgba(255,255,255,0.92); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 24px rgba(0,0,0,0.04); } /* 12. NAV ACTIVE STATE — make the active underline bolder/more visible */ .v2 .site-nav a.active, .v2 .site-nav a[aria-current="page"] { color: var(--navy) !important; font-weight: 600; text-decoration-color: var(--teal) !important; text-underline-offset: 5px !important; text-decoration-thickness: 2px !important; } /* 13. FOOTER — hide ICO placeholder gracefully; style as pending note */ .v2 .footer-meta span:last-child:empty, .v2 .footer-meta .ico-pending { display: none; } /* 14. CONTACT FORM CHECKBOX ROW — needs better alignment and spacing */ .v2 .contact-form--dark .checkbox-row { display: flex; gap: 14px; align-items: flex-start; padding: 4px 0; } .v2 .contact-form--dark .checkbox-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; } .v2 .contact-form--dark .checkbox-row label { font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.6 !important; font-weight: 400 !important; color: rgba(255,255,255,0.50) !important; } /* 15. CTA GHOST BUTTON — improve contrast on dark hero bg */ .v2 .btn-ghost { border-color: rgba(255,255,255,0.45) !important; color: rgba(255,255,255,0.88) !important; } .v2 .btn-ghost:hover { border-color: rgba(255,255,255,0.85) !important; color: rgba(255,255,255,1) !important; background: rgba(255,255,255,0.08) !important; } /* 16. SCROLL CUE — replace "SCROLL" text with a clean animated dot line */ .v2 .hero-v2 .scroll-cue span:not(.line) { display: none; } .v2 .hero-v2 .scroll-cue { gap: 0; } .v2 .hero-v2 .scroll-cue .line { height: 52px; width: 1px; background: linear-gradient(to bottom, rgba(255,255,255,0.55), transparent); animation: scrollPulse 2s var(--ease-in-out-cubic) infinite; } /* 17. NUMBERS BAND counter typography — ensure counters feel premium */ .v2 .num-display { letter-spacing: -0.04em; } .v2 .num-label { letter-spacing: 2px; opacity: 0.58; } /* 18. GEOGRAPHY SECTION — widen layout, constrain text column */ .v2 .geo-section .container { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } /* 19. FORM SUBMIT BUTTON — full width for prominence */ .v2 .contact-form--dark button[type="submit"] { width: 100%; justify-content: center; padding: 18px 32px !important; font-size: 14px !important; letter-spacing: 1.5px !important; } /* Responsive adjustments */ @media (max-width: 900px) { .v2 .trust-items { flex-wrap: wrap; } .v2 .trust-item { flex: 0 0 auto; } } @media (max-width: 640px) { .v2 .step { grid-template-columns: 64px 1fr; } .v2 .step-number { font-size: 34px; } } /* ============================================================ ROUND 7 — Geography globe, engagement cards, step spacing ============================================================ */ /* Suppress splash on return visits (sessionStorage guard in JS) */ html.splash-skip .splash { display: none !important; } /* === GEO GLOBE SECTION ========================================= */ .v2 .geo-globe-section { position: relative; } .v2 .geo-map-wrap { margin: 56px auto 0; max-width: 1000px; background: rgba(74,148,145,0.04); border: 1px solid rgba(74,148,145,0.16); border-radius: 16px; overflow: hidden; padding: 28px 28px 20px; } .v2 .geo-map-wrap svg { width: 100%; height: auto; display: block; } .v2 .geo-grid { stroke: rgba(74,148,145,0.08); stroke-width: 0.5; } .v2 .geo-land { fill: rgba(74,148,145,0.09); stroke: rgba(74,148,145,0.32); stroke-width: 0.7; stroke-linejoin: round; } .v2 .geo-flow { fill: none; stroke: var(--teal); stroke-width: 1.3; stroke-dasharray: 5 5; opacity: 0.55; animation: dashFlow 28s linear infinite; } .v2 .geo-hub-london { fill: var(--teal-light); stroke: rgba(255,255,255,0.5); stroke-width: 1.5; } .v2 .geo-hub-dot { fill: var(--teal); stroke: rgba(255,255,255,0.3); stroke-width: 1.2; } .v2 .geo-pulse { fill: var(--teal-light); opacity: 0; animation: hubPulse 3.5s ease-out infinite; transform-box: fill-box; transform-origin: center; } .v2 .geo-pulse.geo-pulse-d1 { animation-delay: 1s; } .v2 .geo-pulse.geo-pulse-d2 { animation-delay: 2s; } .v2 .geo-pulse.geo-pulse-d3 { animation-delay: 3s; } .v2 .geo-label { font-family: var(--font-sans); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; fill: rgba(255,255,255,0.58); } .v2 .geo-label-primary { fill: var(--teal-light); font-size: 10px; } /* Region pills */ .v2 .geo-regions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 40px; justify-content: center; } .v2 .geo-region-pill { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 28px; border: 1px solid rgba(74,148,145,0.2); border-radius: 8px; min-width: 160px; background: rgba(74,148,145,0.04); transition: border-color 0.3s, background 0.3s; } .v2 .geo-region-pill:hover { border-color: rgba(74,148,145,0.45); background: rgba(74,148,145,0.09); } .v2 .geo-region-pill--primary { border-color: rgba(74,148,145,0.45); background: rgba(74,148,145,0.08); } .v2 .geo-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); opacity: 0.7; } .v2 .geo-pill-dot--primary { background: var(--teal-light); box-shadow: 0 0 8px rgba(74,148,145,0.6); opacity: 1; } .v2 .geo-pill-name { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--white); text-align: center; } .v2 .geo-pill-role { font-size: 11px; color: rgba(255,255,255,0.38); letter-spacing: 0.5px; text-align: center; } @media (prefers-reduced-motion: reduce) { .v2 .geo-flow { animation: none; } .v2 .geo-pulse { animation: none; opacity: 0; } } /* === ENGAGEMENT CARDS on How It Works ========================== */ .v2 .engagement-card { border-top: 3px solid var(--teal) !important; } .v2 .mode-badge { display: inline-flex; align-items: center; font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--teal); background: rgba(74,148,145,0.08); padding: 4px 12px; border-radius: 4px; margin-bottom: 16px; border: 1px solid rgba(74,148,145,0.22); } /* === FEE ROWS — left accent stripe ============================= */ .v2 .fee-row { padding-left: 20px; border-left: 2px solid rgba(74,148,145,0.15); } .v2 .fee-row:nth-child(1) { border-left-color: rgba(74,148,145,0.55); } .v2 .fee-row:nth-child(2) { border-left-color: rgba(74,148,145,0.35); } .v2 .fee-row:nth-child(3) { border-left-color: rgba(74,148,145,0.18); } /* === STEP SPACING — reduce back to comfortable 28px ============ */ .v2 .step { padding: 28px 0; } @media (max-width: 600px) { .v2 .geo-region-pill { min-width: 140px; padding: 14px 18px; } .v2 .geo-map-wrap { padding: 16px 12px 12px; } } /* === ROUND 8 — Audit fixes ========================================= Accessibility, image fallbacks, lang-switcher, focus styles =================================================================== */ /* M-01 — Image fallback: if Unsplash fails to load, dark bg prevents white-text-on-white-card issue */ .v2 .svc-photo { background-color: var(--navy); } .v2 .sector-img { background-color: var(--navy); } .v2 .hero-img { background-color: var(--navy); } /* M-06 — Keyboard focus-visible styles */ .v2 .site-nav a:focus-visible, .v2 .brand:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; border-radius: 2px; } .v2 .btn:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 4px; } .v2 .lang-toggle:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; border-radius: 2px; } /* H-06 — Language switcher: disabled state for unavailable languages */ .v2 .lang-menu .lang-unavailable { opacity: 0.38; cursor: default; pointer-events: none; } .v2 .lang-menu .lang-unavailable .code::after { content: ' ·'; } .v2 .lang-menu .lang-coming-tag { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--teal); background: rgba(74,148,145,0.12); padding: 1px 6px; border-radius: 3px; margin-left: 6px; vertical-align: middle; } /* L-02 — page-num decorative correction (no visual change, scoping only) */ .v2 .page-num { pointer-events: none; user-select: none; } /* === ROUND 9 FIXES ======================================================= */ /* R9-01 — Service card hover description: increase max-height so longer descriptions (e.g. Procurement Coordination) aren't clipped on reveal */ .v2 .svc-card:not(:nth-child(1)):hover .svc-desc { max-height: 240px; } /* R9-02 — Services page: align service section containers with the page-hero container. hero uses 1100px (global), service sections were 920px — now both use 1100px so their left edges align at all viewport widths. */ .v2 .service-section .container { max-width: 1100px; } /* === ROUND 10 FIXES ======================================================= */ /* R10-01 — Hero text: prevent descender clip (g, p, y cut off at large sizes) by increasing padding-bottom on .line; word-spacing improves readability */ .v2 .hero-v2 h1 { word-spacing: 0.04em; } .v2 .hero-v2 h1 .line { padding-bottom: 0.18em; } /* R10-02 — Featured service card: bump max-height so its always-visible description (especially if long) is never clipped */ .v2 .svc-card:nth-child(1) .svc-desc { max-height: 280px; } /* R10-03 — Map: increase land-fill opacity for better world-map visibility */ .v2 .geo-land path { fill: rgba(74,148,145,0.16); stroke: rgba(74,148,145,0.42); } /* R10-04 — Contact DL alignment: per-item margin-top caused dt/dd offset in grid; replace with row-gap on the dl so labels and values stay aligned */ .v2 .contact-dark-hero .contact-block dl { row-gap: 28px !important; } .v2 .contact-dark-hero .contact-block dt, .v2 .contact-dark-hero .contact-block dt:first-child { margin-top: 0 !important; } .v2 .contact-dark-hero .contact-block dd { margin-top: 0 !important; } /* R10-05 — Process diagram: animated fill line draws left-to-right on scroll */ .v2 .process-diagram .pd-fill { stroke-dasharray: 880; stroke-dashoffset: 880; } .v2 .process-diagram.in-view .pd-fill { animation: pdFill 1.8s var(--ease-out-expo) 0.4s forwards; } @keyframes pdFill { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .v2 .process-diagram .pd-fill { stroke-dashoffset: 0; animation: none; } } /* R10-06 — Steps list: left teal accent bar slides in on hover */ .v2 .step { position: relative; padding-left: 24px; transition: background 0.25s; } .v2 .step::before { content: ''; position: absolute; left: 0; top: 28px; bottom: 28px; width: 3px; background: var(--teal); border-radius: 2px; transform: scaleY(0); transform-origin: top; transition: transform 0.3s var(--ease-out-expo); } .v2 .step:hover::before { transform: scaleY(1); } .v2 .step:hover { background: rgba(74,148,145,0.04); border-radius: 8px; border-bottom-color: transparent; } .v2 .step-number { transition: transform 0.3s var(--ease-out-expo), color 0.3s; } .v2 .step:hover .step-number { transform: translateX(6px); } /* === STEP CARDS — process redesign ======================================= */ .v2 .steps-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px) { .v2 .steps-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 580px) { .v2 .steps-cards { grid-template-columns: 1fr; } } .v2 .step-card { position: relative; background: var(--white); border: 1px solid rgba(0,0,0,0.07); border-radius: 12px; padding: 28px 24px 24px; overflow: hidden; transition: transform 0.32s var(--ease-out-expo), box-shadow 0.32s; cursor: default; } .v2 .step-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--teal) 0%, var(--teal-light) 100%); transform: scaleX(0); transform-origin: left; transition: transform 0.42s var(--ease-out-expo); } .v2 .step-card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(11,31,58,0.10); } .v2 .step-card:hover::before { transform: scaleX(1); } .v2 .step-card-num { font-family: var(--font-serif); font-style: italic; font-size: 58px; font-weight: 700; color: rgba(74,148,145,0.13); line-height: 1; margin-bottom: 12px; letter-spacing: -0.04em; user-select: none; transition: color 0.3s; } .v2 .step-card:hover .step-card-num { color: rgba(74,148,145,0.22); } .v2 .step-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--navy); } .v2 .step-card p { font-size: 14px; line-height: 1.68; color: var(--grey); margin: 0; } /* Map hub diamond markers */ .v2 .geo-hub-diamond { fill: rgba(74,148,145,0.16); stroke: rgba(74,148,145,0.85); stroke-width: 1.5; stroke-linejoin: round; } .v2 .geo-hub-inner { fill: var(--teal-light); } /* ========================================================================== FIX (08-May-2026 sweep): Button hover text visibility Three causes addressed: 1. .btn-primary::before sits above inline text per CSS stacking rules — push text up 2. Cursor follower mix-blend-mode: difference distorts text on button hover 3. Navy-section button hover used teal text (lower contrast) — switch to navy ========================================================================== */ /* 1. Force button text and arrow to sit above any decorative ::before/::after */ .v2 .btn { isolation: isolate; } .v2 .btn > * { position: relative; z-index: 1; } .v2 .btn::before { z-index: 0; } /* 2. Disable mix-blend-mode on cursor follower when hovering interactive elements */ .v2.cursor-hover .cursor-ring, .v2.cursor-hover .cursor-dot { mix-blend-mode: normal; } /* 3. High-contrast navy text on hover for navy-section buttons */ .v2 .section--navy .btn-primary:hover { color: var(--navy); } /* ========================================================================== FIX REVISION 2 (09-May-2026): Button hover text visibility — harder fix First-pass fix did not resolve the issue on Services / How-it-works / Industries pages where the section--navy CTA button still showed text disappearing on hover. Root cause: the .btn-primary::before gradient overlay sits above the inline TEXT NODE per CSS stacking rules (text node can't be given z-index because it's not an element), and the cursor follower's mix-blend-mode: difference creates visual confusion on white buttons. ========================================================================== */ /* Disable the sliding gradient overlay on btn-primary entirely — it was purely decorative and was sitting above the button text node */ .v2 .btn-primary::before { display: none !important; } /* Disable mix-blend-mode on the cursor follower entirely — was creating visual confusion when hovering white buttons */ .v2 .cursor-dot, .v2 .cursor-ring { mix-blend-mode: normal !important; } /* Force navy text on hover for navy-section buttons (highest contrast) */ .v2 .section--navy .btn-primary, .v2 .section--navy .btn-primary:hover { color: var(--navy) !important; } /* ========================================================================== GEO TRIO (09-May-2026) — Replaces world map + region pills. Three-column typographic block: GLOBAL COVERAGE | KONVEL mark | FOR CLIENTS IN. Lives inside .section--navy (dark background); colours adapted accordingly. ========================================================================== */ .v2 .geo-trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; align-items: start; margin-top: 56px; } .v2 .geo-trio-col { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 16px; } .v2 .geo-trio-rule { width: 80px; height: 1px; background: var(--teal-light); opacity: 0.7; margin-bottom: 24px; } .v2 .geo-trio-eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: var(--teal-light); margin: 0 0 18px 0; } .v2 .geo-trio-line { font-family: 'Playfair Display', Georgia, serif; font-size: 19px; font-weight: 600; line-height: 1.45; color: var(--white); margin: 0 0 4px 0; } .v2 .geo-trio-center { padding-top: 0; } .v2 .geo-trio-mark { width: 96px; height: 96px; margin: 0 auto 20px; display: block; } .v2 .geo-trio-mark svg { width: 100%; height: 100%; display: block; } .v2 .geo-trio-wordmark { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 700; letter-spacing: 4px; color: var(--white); margin: 0 0 6px 0; } .v2 .geo-trio-subtitle { font-family: var(--font-sans); font-size: 13px; font-style: italic; color: rgba(255, 255, 255, 0.55); margin: 0; } /* Mobile: stack columns vertically with extra spacing */ @media (max-width: 800px) { .v2 .geo-trio { grid-template-columns: 1fr; gap: 56px; margin-top: 40px; } .v2 .geo-trio-center { order: -1; /* show Konvel mark first on mobile */ } }