/* ==================================================================== Compoze Labs · AI Services page module -------------------------------------------------------------------- Font dependency (add to theme if not already loaded): All selectors are scoped under .cl-ai-services to avoid CMS conflicts. ==================================================================== */ .cl-ai-services, .cl-ai-services *, .cl-ai-services *::before, .cl-ai-services *::after { box-sizing: border-box; margin: 0; padding: 0; } .cl-ai-services { --cl-navy: #000589; --cl-navy-deep: #00046B; --cl-orange: #EE952F; --cl-dark: #1A1A1A; --cl-gray-50: #F7F8FB; --cl-gray-200: #E2E5EF; --cl-gray-500: #5A5F75; --cl-white: #FFFFFF; --cl-light: #EEEEEE; --cl-focus: #000589; --cl-font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --cl-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } @media (prefers-reduced-motion: reduce) { .cl-ai-services *, .cl-ai-services *::before, .cl-ai-services *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .cl-ai-services a:focus-visible, .cl-ai-services button:focus-visible { outline: 3px solid var(--cl-focus); outline-offset: 3px; border-radius: 4px; } .cl-ai-services .cl-btn:focus-visible { outline-offset: 4px; } .cl-ai-services *, .cl-ai-services *::before, .cl-ai-services *::after { box-sizing: border-box; margin: 0; padding: 0; } .cl-ai-services { scroll-behavior: smooth; } .cl-ai-services { font-family: var(--cl-font-body); color: var(--cl-dark); background: var(--cl-white); -webkit-font-smoothing: antialiased; line-height: 1.6; } .cl-ai-services .cl-container { max-width: 1380px; margin: 0 auto; padding: 0 40px; } .cl-ai-services section { padding: 100px 0; } .cl-ai-services h1, .cl-ai-services h2, .cl-ai-services h3, .cl-ai-services h4 { font-family: var(--cl-font-heading); color: var(--cl-dark); letter-spacing: -0.01em; } .cl-ai-services h2 { font-size: 44px; font-weight: 700; line-height: 1.15; } .cl-ai-services h3 { font-size: 22px; font-weight: 700; line-height: 1.3; } .cl-ai-services p { color: var(--cl-dark); } /* Forced line break inside a heading (used in "How We Work") */ .cl-ai-services .cl-h2-line { display: block; } .cl-ai-services .cl-hero { background: radial-gradient(900px 500px at 100% 0%, rgba(238,149,47,0.10), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(0,5,137,0.10), transparent 60%), var(--cl-white); padding: 100px 0 90px; border-bottom: 1px solid var(--cl-gray-200); position: relative; overflow: hidden; } .cl-ai-services .cl-hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; } .cl-ai-services .cl-hero h1 { font-size: 60px; font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 24px; text-wrap: balance; } .cl-ai-services .cl-hero h1 .accent { color: var(--cl-navy); display: inline-block; } .cl-ai-services .cl-hero-sub { font-size: 19px; line-height: 1.55; color: var(--cl-dark); margin-bottom: 36px; max-width: none; } .cl-ai-services .cl-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; } .cl-ai-services .cl-btn { display: inline-flex; align-items: center; gap: 8px; padding: 16px 28px; border-radius: 999px; font-family: var(--cl-font-heading); font-weight: 700; font-size: 15px; text-decoration: none; transition: all 0.2s ease; border: 2px solid transparent; cursor: pointer; } .cl-ai-services .cl-btn-primary { background: var(--cl-navy); color: var(--cl-white); } .cl-ai-services .cl-btn-primary:hover { background: var(--cl-navy-deep); transform: translateY(-1px); } .cl-ai-services .cl-btn-secondary { background: transparent; color: var(--cl-dark); border-color: var(--cl-dark); } .cl-ai-services .cl-btn-secondary:hover { background: var(--cl-dark); color: var(--cl-white); } .cl-ai-services .cl-btn-orange { background: var(--cl-orange); color: var(--cl-dark); } .cl-ai-services .cl-btn-orange:hover { background: #d8801a; color: var(--cl-dark); } .cl-ai-services .cl-hero-visual { position: relative; aspect-ratio: 1 / 1; max-width: 520px; justify-self: end; width: 100%; } .cl-ai-services .cl-hero-card { position: absolute; background: var(--cl-white); border: 1px solid var(--cl-gray-200); border-radius: 18px; padding: 22px 24px; box-shadow: 0 30px 60px -20px rgba(0,5,137,0.18); font-family: var(--cl-font-body); transform-origin: center center; } .cl-ai-services .cl-hc-1 { top: 6%; left: 0; width: 75%; transform: rotate(-3deg); } .cl-ai-services .cl-hc-2 { bottom: 6%; right: 0; width: 80%; transform: rotate(2deg); } .cl-ai-services .cl-hc-3 { top: 42%; right: 4%; width: 62%; background: var(--cl-navy); color: var(--cl-white); transform: rotate(-1deg); border-color: var(--cl-navy); } .cl-ai-services .cl-hc-label { font-family: var(--cl-font-heading); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--cl-navy); margin-bottom: 8px; } .cl-ai-services .cl-hc-3 .cl-hc-label { color: var(--cl-orange); } .cl-ai-services .cl-hc-title { font-family: var(--cl-font-heading); font-weight: 700; font-size: 16px; margin-bottom: 6px; color: var(--cl-dark); } .cl-ai-services .cl-hc-3 .cl-hc-title { color: var(--cl-white); } .cl-ai-services .cl-hc-meta { font-size: 13px; color: var(--cl-gray-500); } .cl-ai-services .cl-hc-3 .cl-hc-meta { color: rgba(255,255,255,0.75); } .cl-ai-services .cl-hc-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .cl-ai-services .cl-hc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cl-orange); } .cl-ai-services .cl-hc-dot-green { background: #34D399; } .cl-ai-services .cl-intro { background: var(--cl-light); padding: 70px 0; } .cl-ai-services .cl-intro-text { max-width: 1040px; margin: 0 auto; font-family: var(--cl-font-heading); font-size: 26px; font-weight: 600; line-height: 1.4; color: var(--cl-dark); letter-spacing: -0.01em; text-align: center; } .cl-ai-services .cl-intro-text .em { color: var(--cl-navy); } /* Keeps a trailing word from stranding on its own line */ .cl-ai-services .cl-nowrap { white-space: nowrap; } .cl-ai-services .cl-build { background: var(--cl-white); } .cl-ai-services .cl-build-header { margin-bottom: 60px; } .cl-ai-services .cl-build-header h2 { margin-bottom: 16px; max-width: 880px; } .cl-ai-services .cl-build-header p { font-size: 18px; color: var(--cl-dark); line-height: 1.6; } .cl-ai-services .cl-pillar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .cl-ai-services .cl-pillar { background: var(--cl-gray-50); border: 1px solid var(--cl-gray-200); border-radius: 18px; padding: 36px 32px 32px; transition: all 0.25s ease; position: relative; overflow: hidden; } .cl-ai-services .cl-pillar:hover { border-color: var(--cl-navy); transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgba(0,5,137,0.15); } .cl-ai-services .cl-pillar-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--cl-navy); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; color: var(--cl-white); } .cl-ai-services .cl-pillar:nth-child(2) .cl-pillar-icon { background: var(--cl-orange); color: var(--cl-dark); } .cl-ai-services .cl-pillar:nth-child(3) .cl-pillar-icon { background: var(--cl-dark); } .cl-ai-services .cl-pillar:nth-child(4) .cl-pillar-icon { background: var(--cl-white); border: 2px solid var(--cl-navy); color: var(--cl-navy); } .cl-ai-services .cl-pillar h3 { margin-bottom: 12px; font-size: 22px; } .cl-ai-services .cl-pillar-body { color: var(--cl-dark); font-size: 15px; line-height: 1.65; margin-bottom: 20px; } .cl-ai-services .cl-pillar-fit { border-top: 1px solid var(--cl-gray-200); padding-top: 16px; font-size: 13px; color: var(--cl-gray-500); line-height: 1.55; } .cl-ai-services .cl-pillar-fit strong { display: block; color: var(--cl-dark); text-transform: uppercase; font-size: 11px; letter-spacing: 0.12em; margin-bottom: 6px; font-family: var(--cl-font-heading); } .cl-ai-services .cl-pillar-num { position: absolute; top: 28px; right: 32px; font-family: var(--cl-font-heading); font-size: 14px; font-weight: 700; color: var(--cl-gray-500); letter-spacing: 0.1em; } .cl-ai-services .cl-stack { background: var(--cl-white); } .cl-ai-services .cl-stack-header { margin-bottom: 56px; } .cl-ai-services .cl-stack-header h2 { margin-bottom: 18px; max-width: 880px; } .cl-ai-services .cl-stack-header p { font-size: 18px; color: var(--cl-dark); line-height: 1.6; max-width: 920px; } .cl-ai-services .cl-layers { display: flex; flex-direction: column; gap: 24px; } .cl-ai-services .cl-layer { display: grid; grid-template-columns: 220px 1fr; gap: 48px; background: var(--cl-gray-50); border: 1px solid var(--cl-gray-200); border-radius: 18px; padding: 44px; position: relative; transition: all 0.25s ease; } .cl-ai-services .cl-layer:nth-child(2) { background: var(--cl-white); border-color: var(--cl-gray-200); } .cl-ai-services .cl-layer:nth-child(3) { background: var(--cl-light); } .cl-ai-services .cl-layer:hover { border-color: var(--cl-navy); box-shadow: 0 20px 40px -20px rgba(0,5,137,0.15); } .cl-ai-services .cl-layer-num { font-family: var(--cl-font-heading); font-size: 13px; font-weight: 700; color: var(--cl-navy); text-transform: uppercase; letter-spacing: 0.16em; padding-top: 12px; border-top: 4px solid var(--cl-orange); align-self: start; width: fit-content; } .cl-ai-services .cl-layer:nth-child(2) .cl-layer-num { border-top-color: var(--cl-navy); } .cl-ai-services .cl-layer:nth-child(3) .cl-layer-num { border-top-color: var(--cl-dark); } .cl-ai-services .cl-layer-content h3 { font-size: 26px; margin-bottom: 14px; font-weight: 700; line-height: 1.2; } .cl-ai-services .cl-layer-desc { font-size: 17px; line-height: 1.6; margin-bottom: 28px; color: var(--cl-dark); max-width: 760px; } .cl-ai-services .cl-layer-services { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 36px; margin-bottom: 28px; padding: 0; } .cl-ai-services .cl-layer-services li { font-size: 14px; line-height: 1.55; color: var(--cl-dark); padding-left: 18px; position: relative; } .cl-ai-services .cl-layer-services li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--cl-orange); } .cl-ai-services .cl-layer-services li strong { display: block; font-family: var(--cl-font-heading); font-size: 15px; font-weight: 700; color: var(--cl-dark); margin-bottom: 3px; } .cl-ai-services .cl-layer-fit { border-top: 1px solid var(--cl-gray-200); padding-top: 18px; font-size: 13px; color: var(--cl-gray-500); line-height: 1.6; } .cl-ai-services .cl-layer-fit strong { display: block; font-family: var(--cl-font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.12em; color: var(--cl-dark); margin-bottom: 6px; } .cl-ai-services .cl-case { background: var(--cl-navy); color: var(--cl-white); position: relative; overflow: hidden; } .cl-ai-services .cl-case::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(238,149,47,0.18), transparent 70%); pointer-events: none; } .cl-ai-services .cl-case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; } .cl-ai-services .cl-case h2 { color: var(--cl-white); font-size: 48px; font-weight: 800; line-height: 1.1; margin-bottom: 28px; } .cl-ai-services .cl-case p { color: var(--cl-white); font-size: 17px; line-height: 1.65; margin-bottom: 22px; } .cl-ai-services .cl-case-cta { margin-top: 12px; } .cl-ai-services .cl-case-visual { background: var(--cl-white); border-radius: 22px; padding: 32px; color: var(--cl-dark); box-shadow: 0 40px 80px -20px rgba(0,0,0,0.4); } .cl-ai-services .cl-chat-header { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--cl-gray-200); margin-bottom: 20px; } .cl-ai-services .cl-chat-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--cl-navy), var(--cl-orange)); display: flex; align-items: center; justify-content: center; color: var(--cl-white); font-family: var(--cl-font-heading); font-weight: 700; font-size: 14px; } .cl-ai-services .cl-chat-name { font-family: var(--cl-font-heading); font-weight: 700; font-size: 14px; } .cl-ai-services .cl-chat-status { font-size: 12px; color: var(--cl-gray-500); display: flex; align-items: center; gap: 6px; } .cl-ai-services .cl-chat-status::before { content: ''; width: 7px; height: 7px; background: #34D399; border-radius: 50%; } .cl-ai-services .cl-chat-msg { padding: 12px 16px; border-radius: 14px; font-size: 13px; line-height: 1.5; margin-bottom: 12px; max-width: 85%; } .cl-ai-services .cl-chat-user { background: var(--cl-navy); color: var(--cl-white); margin-left: auto; border-bottom-right-radius: 4px; } .cl-ai-services .cl-chat-bot { background: var(--cl-light); color: var(--cl-dark); border-bottom-left-radius: 4px; } .cl-ai-services .cl-chat-source { font-size: 12px; color: var(--cl-dark); margin-top: 6px; display: flex; align-items: center; gap: 6px; } .cl-ai-services .cl-chat-source::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cl-orange); } .cl-ai-services .cl-how { background: var(--cl-light); } .cl-ai-services .cl-how-header { margin-bottom: 56px; } .cl-ai-services .cl-how-header h2 { margin-bottom: 18px; max-width: 880px; } .cl-ai-services .cl-how-header p { font-size: 17px; line-height: 1.65; color: var(--cl-dark); margin-bottom: 14px; } .cl-ai-services .cl-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; } .cl-ai-services .cl-phase { background: var(--cl-white); padding: 32px 28px; border-radius: 18px; border-left: 4px solid var(--cl-orange); position: relative; } .cl-ai-services .cl-phase:nth-child(2) { border-left-color: var(--cl-navy); } .cl-ai-services .cl-phase:nth-child(3) { border-left-color: var(--cl-dark); } .cl-ai-services .cl-phase-num { font-family: var(--cl-font-heading); font-size: 12px; font-weight: 700; color: var(--cl-gray-500); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 10px; } .cl-ai-services .cl-phase h3 { font-size: 19px; margin-bottom: 8px; } .cl-ai-services .cl-phase-time { font-family: var(--cl-font-heading); font-weight: 700; color: var(--cl-navy); font-size: 14px; margin-bottom: 14px; } .cl-ai-services .cl-phase p { font-size: 14px; line-height: 1.6; color: var(--cl-dark); } .cl-ai-services .cl-industries { background: var(--cl-white); } .cl-ai-services .cl-ind-header { margin-bottom: 48px; } .cl-ai-services .cl-ind-header h2 { margin-bottom: 14px; max-width: none; } .cl-ai-services .cl-ind-header p { font-size: 17px; color: var(--cl-dark); } /* Keep the functions headline on a single line at desktop widths */ @media (min-width: 1025px) { .cl-ai-services .cl-ind-header h2 { white-space: nowrap; font-size: clamp(32px, 3.05vw, 44px); } } .cl-ai-services .cl-ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .cl-ai-services .cl-ind-card { background: var(--cl-gray-50); border: 1px solid var(--cl-gray-200); border-radius: 16px; padding: 28px 24px; transition: all 0.25s ease; } .cl-ai-services .cl-ind-card:hover { border-color: var(--cl-orange); background: var(--cl-white); } .cl-ai-services .cl-ind-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--cl-white); border: 1px solid var(--cl-gray-200); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .cl-ai-services .cl-ind-icon svg { display: block; } .cl-ai-services .cl-ind-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; line-height: 1.3; } .cl-ai-services .cl-ind-card p { font-size: 13px; color: var(--cl-dark); line-height: 1.6; } .cl-ai-services .cl-eng { background: var(--cl-gray-50); } .cl-ai-services .cl-eng-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; } .cl-ai-services .cl-eng-content h2 { margin-bottom: 22px; text-wrap: balance; } .cl-ai-services .cl-eng-content h2 .accent { color: var(--cl-navy); display: inline-block; } .cl-ai-services .cl-eng-lede { font-size: 18px; line-height: 1.6; color: var(--cl-dark); margin-bottom: 16px; max-width: 560px; } .cl-ai-services .cl-eng-body { font-size: 16px; line-height: 1.65; color: var(--cl-dark); margin-bottom: 30px; max-width: 560px; } .cl-ai-services .cl-eng-cta { margin-top: 4px; } .cl-ai-services .cl-eng-visual { background: var(--cl-navy); color: var(--cl-white); border-radius: 22px; padding: 36px 32px 32px; box-shadow: 0 30px 60px -20px rgba(0,5,137,0.3); position: relative; overflow: hidden; } .cl-ai-services .cl-eng-visual::before { content: ''; position: absolute; top: -80px; right: -80px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(238,149,47,0.18), transparent 70%); pointer-events: none; } .cl-ai-services .cl-eng-ladder-header { margin-bottom: 22px; position: relative; z-index: 1; } .cl-ai-services .cl-eng-ladder-label { font-family: var(--cl-font-heading); font-size: 12px; font-weight: 700; color: var(--cl-orange); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 6px; } .cl-ai-services .cl-eng-ladder-sub { font-family: var(--cl-font-heading); font-weight: 700; font-size: 18px; color: var(--cl-white); } .cl-ai-services .cl-eng-ladder { display: flex; flex-direction: column; gap: 0; position: relative; z-index: 1; } .cl-ai-services .cl-eng-rung { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.12); position: relative; } .cl-ai-services .cl-eng-rung:last-child { border-bottom: none; } .cl-ai-services .cl-eng-rung-num { font-family: var(--cl-font-heading); font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.45); letter-spacing: 0.12em; } .cl-ai-services .cl-eng-rung-name { font-family: var(--cl-font-heading); font-size: 16px; font-weight: 700; color: var(--cl-white); margin-bottom: 2px; } .cl-ai-services .cl-eng-rung-meta { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.5; } .cl-ai-services .cl-eng-rung-active { background: linear-gradient(90deg, rgba(238,149,47,0.12), transparent 75%); margin: 6px -12px 0; padding: 14px 12px; border-radius: 10px; border: 1px solid rgba(238,149,47,0.4); } .cl-ai-services .cl-eng-rung-active .cl-eng-rung-num { color: var(--cl-orange); } .cl-ai-services .cl-trust { background: var(--cl-light); } .cl-ai-services .cl-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .cl-ai-services .cl-trust h2 { margin-bottom: 18px; } .cl-ai-services .cl-trust-body { font-size: 17px; line-height: 1.65; color: var(--cl-dark); } .cl-ai-services .cl-compliance { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cl-ai-services .cl-comp-item { background: var(--cl-white); padding: 20px 22px; border-radius: 14px; border: 1px solid var(--cl-gray-200); } .cl-ai-services .cl-comp-label { font-family: var(--cl-font-heading); font-size: 12px; font-weight: 700; color: var(--cl-navy); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 6px; } .cl-ai-services .cl-comp-name { font-family: var(--cl-font-heading); font-weight: 700; font-size: 18px; color: var(--cl-dark); } /* CTA — Compoze navy */ .cl-ai-services .cl-cta { background: var(--cl-navy); color: var(--cl-white); padding: 110px 0; position: relative; overflow: hidden; } .cl-ai-services .cl-cta::before { content: ''; position: absolute; bottom: -200px; left: -100px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0,4,107,0.85), transparent 65%); pointer-events: none; } .cl-ai-services .cl-cta::after { content: ''; position: absolute; top: -100px; right: -100px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(238,149,47,0.22), transparent 65%); pointer-events: none; } .cl-ai-services .cl-cta-inner { position: relative; z-index: 1; text-align: center; max-width: 760px; margin: 0 auto; } .cl-ai-services .cl-cta h2 { color: var(--cl-white); font-size: 48px; font-weight: 800; margin-bottom: 20px; line-height: 1.1; } .cl-ai-services .cl-cta-sub { color: var(--cl-white); font-size: 18px; line-height: 1.6; margin-bottom: 36px; } .cl-ai-services .cl-cta-row { width: 100%; max-width: 720px; margin: 0 auto; text-align: left; } /* HubSpot embedded form — two-column layout */ .cl-ai-services .cl-cta-row form.hs-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; } .cl-ai-services .cl-cta-row form.hs-form > * { grid-column: span 1; min-width: 0; } .cl-ai-services .cl-cta-row form.hs-form .hs-fieldtype-textarea, .cl-ai-services .cl-cta-row form.hs-form .hs-fieldtype-textarea.field, .cl-ai-services .cl-cta-row form.hs-form .hs_submit, .cl-ai-services .cl-cta-row form.hs-form .hs-submit, .cl-ai-services .cl-cta-row form.hs-form .legal-consent-container, .cl-ai-services .cl-cta-row form.hs-form .hs-richtext, .cl-ai-services .cl-cta-row form.hs-form .hs-recaptcha { grid-column: 1 / -1; } .cl-ai-services .cl-cta-row form.hs-form input[type="text"], .cl-ai-services .cl-cta-row form.hs-form input[type="email"], .cl-ai-services .cl-cta-row form.hs-form input[type="tel"], .cl-ai-services .cl-cta-row form.hs-form input[type="number"], .cl-ai-services .cl-cta-row form.hs-form input[type="url"], .cl-ai-services .cl-cta-row form.hs-form select, .cl-ai-services .cl-cta-row form.hs-form textarea { width: 100% !important; box-sizing: border-box; } .cl-ai-services .cl-cta .cl-btn-secondary { color: var(--cl-white); border-color: rgba(255,255,255,0.4); } .cl-ai-services .cl-cta .cl-btn-secondary:hover { background: var(--cl-white); color: var(--cl-navy); border-color: var(--cl-white); } @media (max-width: 1180px) { .cl-ai-services .cl-hero { padding: 80px 0 84px; } .cl-ai-services .cl-hero-grid { grid-template-columns: 1fr; gap: 56px; } .cl-ai-services .cl-hero h1 { font-size: 52px; } .cl-ai-services .cl-hero-visual { position: static; aspect-ratio: auto; height: auto; max-width: 600px; width: 100%; margin: 0 auto; justify-self: center; display: flex; flex-direction: column; gap: 20px; padding: 8px 0; } .cl-ai-services .cl-hero-card { position: static; width: auto; box-shadow: 0 24px 44px -18px rgba(0,5,137,0.22); } .cl-ai-services .cl-hc-1, .cl-ai-services .cl-hc-2, .cl-ai-services .cl-hc-3 { transform: none; align-self: stretch; width: 100%; max-width: 100%; top: auto; left: auto; bottom: auto; right: auto; } } @media (max-width: 1024px) { .cl-ai-services section { padding: 80px 0; } .cl-ai-services h2 { font-size: 36px; } .cl-ai-services .cl-case h2 { font-size: 38px; } .cl-ai-services .cl-cta h2 { font-size: 40px; } .cl-ai-services .cl-pillar-grid { gap: 20px; } .cl-ai-services .cl-ind-grid { grid-template-columns: repeat(2, 1fr); } .cl-ai-services .cl-phases { grid-template-columns: 1fr; } .cl-ai-services .cl-case-grid { gap: 56px; grid-template-columns: 1fr; } .cl-ai-services .cl-trust-grid { gap: 48px; } .cl-ai-services .cl-layer { grid-template-columns: 1fr; gap: 24px; padding: 32px; } .cl-ai-services .cl-layer-services { grid-template-columns: 1fr; gap: 14px; } .cl-ai-services .cl-layer-content h3 { font-size: 26px; } .cl-ai-services .cl-eng-grid { grid-template-columns: 1fr; gap: 48px; } .cl-ai-services .cl-eng-lede, .cl-ai-services .cl-eng-body { max-width: none; } } @media (max-width: 768px) { .cl-ai-services .cl-container { padding: 0 32px; } .cl-ai-services section { padding: 64px 0; } .cl-ai-services .cl-hero { padding: 56px 0 64px; } .cl-ai-services .cl-hero-grid { gap: 48px; } .cl-ai-services .cl-hero h1 { font-size: 40px; } .cl-ai-services .cl-hero-sub { font-size: 16px; } .cl-ai-services .cl-hero-visual { gap: 16px; max-width: 100%; } .cl-ai-services .cl-hero-card { padding: 16px 18px; } .cl-ai-services .cl-hc-1, .cl-ai-services .cl-hc-2, .cl-ai-services .cl-hc-3 { max-width: 100%; } .cl-ai-services .cl-hc-title { font-size: 14px; } .cl-ai-services .cl-hc-meta { font-size: 12px; } .cl-ai-services .cl-hc-label { font-size: 11px; letter-spacing: 0.14em; } .cl-ai-services .cl-intro-text { font-size: 21px; } .cl-ai-services h2 { font-size: 30px; } .cl-ai-services .cl-pillar-grid { grid-template-columns: 1fr; } .cl-ai-services .cl-layer { padding: 28px; } .cl-ai-services .cl-layer-content h3 { font-size: 24px; } .cl-ai-services .cl-layer-desc { font-size: 16px; } .cl-ai-services .cl-case-grid { grid-template-columns: 1fr; gap: 40px; } .cl-ai-services .cl-case h2 { font-size: 34px; } .cl-ai-services .cl-trust-grid { grid-template-columns: 1fr; } .cl-ai-services .cl-compliance { grid-template-columns: 1fr 1fr; } .cl-ai-services .cl-cta { padding: 80px 0; } .cl-ai-services .cl-cta h2 { font-size: 34px; } .cl-ai-services .cl-cta-row form.hs-form { grid-template-columns: 1fr; } .cl-ai-services .cl-btn { padding: 14px 22px; font-size: 14px; } .cl-ai-services .cl-eng-visual { padding: 28px 24px 24px; } .cl-ai-services .cl-eng-rung { grid-template-columns: 36px 1fr; gap: 12px; padding: 12px 0; } .cl-ai-services .cl-eng-rung-num { font-size: 13px; } .cl-ai-services .cl-eng-rung-name { font-size: 15px; } .cl-ai-services .cl-eng-rung-meta { font-size: 12px; } } @media (max-width: 480px) { .cl-ai-services .cl-container { padding: 0 24px; } .cl-ai-services .cl-hero h1 { font-size: 32px; } .cl-ai-services .cl-intro-text { font-size: 18px; } .cl-ai-services h2 { font-size: 26px; } .cl-ai-services .cl-case h2 { font-size: 26px; } .cl-ai-services .cl-cta h2 { font-size: 28px; } .cl-ai-services .cl-pillar { padding: 28px 22px; } .cl-ai-services .cl-ind-grid { grid-template-columns: 1fr; } .cl-ai-services .cl-hero-card { padding: 14px 16px; border-radius: 14px; } .cl-ai-services .cl-hc-1, .cl-ai-services .cl-hc-2, .cl-ai-services .cl-hc-3 { max-width: 100%; transform: none; } } /* ================================================================= COMPOZE BRAND ACCENTS — shared base ================================================================= */ .scroll-mark { opacity: var(--target-opacity, 1); pointer-events: none; display: block; /* --flip-x: -1 mirrors a mark horizontally; --rot rotates it. Both default to a no-op and are threaded through the reveal transforms. */ transform: rotate(var(--rot, 0deg)) scaleX(var(--flip-x, 1)); } img.scroll-mark { max-width: none; object-fit: contain; } div.scroll-mark { background-repeat: no-repeat; background-position: center; background-size: contain; } html.js-anim .scroll-mark { opacity: 0; /* No transition on the hidden state — elements hide instantly, then animate only when .is-visible is added */ will-change: opacity, transform; } html.js-anim .scroll-mark.from-left { transform: translateX(-120px) translateY(var(--ty, 0)) rotate(var(--rot, 0deg)) scaleX(var(--flip-x, 1)); } html.js-anim .scroll-mark.from-right { transform: translateX(120px) translateY(var(--ty, 0)) rotate(var(--rot, 0deg)) scaleX(var(--flip-x, 1)); } html.js-anim .scroll-mark.from-top { transform: translateY(-100px) translateX(var(--tx, 0)) rotate(var(--rot, 0deg)) scaleX(var(--flip-x, 1)); } html.js-anim .scroll-mark.from-bottom { transform: translateY(100px) translateX(var(--tx, 0)) rotate(var(--rot, 0deg)) scaleX(var(--flip-x, 1)); } html.js-anim .scroll-mark.from-fade { transform: scale(.92) rotate(var(--rot, 0deg)) scaleX(var(--flip-x, 1)); } html.js-anim .scroll-mark.is-visible { opacity: var(--target-opacity, 1); transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0deg)) scaleX(var(--flip-x, 1)); transition: opacity 1.2s cubic-bezier(.2,.7,.2,1) var(--mark-delay, 180ms), transform 1.2s cubic-bezier(.2,.7,.2,1) var(--mark-delay, 180ms); } @media (prefers-reduced-motion: reduce) { html.js-anim .scroll-mark { transition: none; opacity: var(--target-opacity, 1); transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0deg)) scaleX(var(--flip-x, 1)) !important; } } /* ================================================================= CONTENT REVEAL — fade-up on scroll for page elements (applied via JS; .cl-reveal classes are added at runtime) ================================================================= */ html.js-anim .cl-reveal { opacity: 0; transform: translateY(36px); will-change: opacity, transform; } html.js-anim .cl-reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 200ms), transform .9s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 200ms); } @media (prefers-reduced-motion: reduce) { html.js-anim .cl-reveal { transition: none; opacity: 1; transform: none !important; } } /* Z-index: marks behind content */ .cl-ai-services .cl-container, .cl-ai-services .cl-hero-grid, .cl-ai-services .cl-stack-header, .cl-ai-services .cl-how-header, .cl-ai-services .cl-ind-header, .cl-ai-services .cl-case-grid, .cl-ai-services .cl-eng-grid, .cl-ai-services .cl-trust-grid, .cl-ai-services .cl-cta-inner, .cl-ai-services .cl-phases, .cl-ai-services .cl-layers, .cl-ai-services .cl-ind-grid, .cl-ai-services .cl-compliance { position: relative; z-index: 2; } /* Hero bottom-right mark. The source art is yellow, so it's painted in brand orange via a mask — hence --mark-src instead of background-image. */ .m-hero-br { position: absolute; bottom: 0; right: 0; width: 1180px; height: 1180px; z-index: 1; --target-opacity: .9; --mark-delay: 600ms; background-image: var(--mark-src); } @supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) { .m-hero-br { background-image: none; background-color: var(--cl-orange, #EE952F); -webkit-mask-image: var(--mark-src); mask-image: var(--mark-src); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } } /* Edge peeks */ .m-edge-left { position: absolute; left: 0; top: 50%; --ty: -50%; width: 900px; height: 696px; z-index: 1; --target-opacity: 1; } .m-edge-right { position: absolute; right: 0; top: 50%; --ty: -50%; width: 900px; height: 696px; z-index: 1; --target-opacity: 1; } /* Dark section corner burst */ .m-dark-br { position: absolute; bottom: 0; right: 0; width: 1000px; height: 1000px; z-index: 1; filter: brightness(0) invert(1); --target-opacity: .42; --mark-delay: 600ms; } .m-dark-tl { position: absolute; top: 0; left: 0; width: 1000px; height: 1000px; z-index: 1; filter: brightness(0) invert(1); --target-opacity: .42; --mark-delay: 200ms; } /* Card watermarks */ .m-card-mark { position: absolute; width: 600px; height: 465px; z-index: 1; --target-opacity: .55; } .m-card-mark.tr { top: 0; right: 0; } .m-card-mark.bl { bottom: 0; left: 0; } /* Responsive */ @media (max-width: 1180px) { .m-hero-br { --target-opacity: .78; } .m-edge-left, .m-edge-right { --target-opacity: .9; } .m-dark-tl, .m-dark-br { --target-opacity: .38; } } @media (max-width: 880px) { .m-hero-br { --target-opacity: .55; } .m-edge-left, .m-edge-right { --target-opacity: .55; } .m-card-mark { --target-opacity: .35; } .m-dark-tl, .m-dark-br { --target-opacity: .3; } } @media (max-width: 560px) { .m-hero-br { --target-opacity: .42; } .m-edge-left, .m-edge-right { --target-opacity: .42; } .m-card-mark { --target-opacity: .25; } .m-dark-tl, .m-dark-br { --target-opacity: .22; } } /* === Compoze design-standard patch (audit June 2026) === */ @media (min-width: 769px) and (max-width: 1024px) { .cl-ai-services .cl-hero h1 { font-size: 46px; } } @media (max-width: 480px) { .cl-ai-services section { padding: 48px 0; } } /* Shared CTA arrow: decorative, never in the accessible label */ .cl-arr{display:inline-block;margin-left:7px;transition:transform .25s ease} a:hover>.cl-arr,button:hover>.cl-arr{transform:translateX(4px)}