body { font-family: 'Manrope', sans-serif; } /* Smooth scroll for in-page anchors (e.g. #contact-booking jump from CTAs). */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Offset scroll targets by the sticky nav height so they aren't hidden behind it after jumping. */ #contact-booking, #contact-form, #contact-info, #contact-next-steps { scroll-margin-top: 6rem; } /* ── Brand theme tokens ───────────────────────────────────── Defaults match the original hardcoded palette. When the admin enables the theme, shared.js sets data-theme-active="true" on and overrides these variables with the CMS values, which cascades via the attribute-selector layer further down. */ :root { --brand-primary: #0a2540; --brand-secondary: #1a6b6e; --brand-tertiary: #00c2cb; --brand-heading: #0a2540; --brand-body: #64748b; --brand-muted: #94a3b8; --brand-surface: #f7f9fb; --brand-surface-alt:#f2f4f7; } .architect-gradient { background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-tertiary) 100%); } .primary-secondary-gradient { background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%); } .glass-nav { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px); } .text-gradient { background: linear-gradient( 90deg, var(--brand-primary) 0%, var(--brand-tertiary) 50%, var(--brand-primary) 100% ); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; /* Descender breathing room so letters like g/p/y don't clip inside inline-block gradient text with tight line-heights. */ padding-bottom: 0.18em; line-height: 1.2; } @media (prefers-reduced-motion: no-preference) { .text-gradient { animation: gradient-shift 8s linear infinite; } } @keyframes gradient-shift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* Admin panel utility */ .admin-sidebar-active { background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-tertiary) 100%); color: #ffffff; } /* ── Theme override layer ─────────────────────────────────── Only activates when . Targets the small set of hex values the renderers use so admins can re-skin the site without us rewriting every inline style. Matches are case-insensitive; both "color:#XXX" and "color: #XXX" are covered. !important is required to beat inline styles. */ html[data-theme-active="true"] [style*="color:#0a2540"], html[data-theme-active="true"] [style*="color: #0a2540"] { color: var(--brand-heading) !important; } html[data-theme-active="true"] [style*="color:#1a6b6e"], html[data-theme-active="true"] [style*="color: #1a6b6e"] { color: var(--brand-secondary) !important; } html[data-theme-active="true"] [style*="color:#00c2cb"], html[data-theme-active="true"] [style*="color: #00c2cb"] { color: var(--brand-tertiary) !important; } html[data-theme-active="true"] [style*="color:#64748b"], html[data-theme-active="true"] [style*="color: #64748b"] { color: var(--brand-body) !important; } html[data-theme-active="true"] [style*="color:#94a3b8"], html[data-theme-active="true"] [style*="color: #94a3b8"] { color: var(--brand-muted) !important; } html[data-theme-active="true"] [style*="background:#0a2540"], html[data-theme-active="true"] [style*="background: #0a2540"], html[data-theme-active="true"] [style*="background-color:#0a2540"] { background-color: var(--brand-primary) !important; } html[data-theme-active="true"] [style*="background:#1a6b6e"], html[data-theme-active="true"] [style*="background: #1a6b6e"], html[data-theme-active="true"] [style*="background-color:#1a6b6e"] { background-color: var(--brand-secondary) !important; } html[data-theme-active="true"] [style*="background:#00c2cb"], html[data-theme-active="true"] [style*="background: #00c2cb"], html[data-theme-active="true"] [style*="background-color:#00c2cb"] { background-color: var(--brand-tertiary) !important; } html[data-theme-active="true"] [style*="background:#f7f9fb"], html[data-theme-active="true"] [style*="background: #f7f9fb"], html[data-theme-active="true"] [style*="background-color:#f7f9fb"] { background-color: var(--brand-surface) !important; } html[data-theme-active="true"] [style*="background:#f2f4f7"], html[data-theme-active="true"] [style*="background: #f2f4f7"], html[data-theme-active="true"] [style*="background-color:#f2f4f7"] { background-color: var(--brand-surface-alt) !important; } html[data-theme-active="true"] [style*="border-color:#1a6b6e"], html[data-theme-active="true"] [style*="border-color: #1a6b6e"] { border-color: var(--brand-secondary) !important; } /* SVG fill/stroke — rare but used for checkmark circles etc. */ html[data-theme-active="true"] circle[fill="#0a2540"], html[data-theme-active="true"] rect[fill="#0a2540"], html[data-theme-active="true"] path[fill="#0a2540"] { fill: var(--brand-primary) !important; } html[data-theme-active="true"] circle[fill="#1a6b6e"], html[data-theme-active="true"] rect[fill="#1a6b6e"], html[data-theme-active="true"] path[fill="#1a6b6e"] { fill: var(--brand-secondary) !important; } html[data-theme-active="true"] circle[fill="#00c2cb"], html[data-theme-active="true"] rect[fill="#00c2cb"], html[data-theme-active="true"] path[fill="#00c2cb"] { fill: var(--brand-tertiary) !important; } /* ── Scroll-reveal animations ─────────────────────────────── */ @media (prefers-reduced-motion: no-preference) { [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } [data-reveal="fade"] { transform: none; } [data-reveal="left"] { transform: translateX(-32px); } [data-reveal="right"] { transform: translateX(32px); } [data-reveal="scale"] { transform: scale(0.94); } [data-reveal].is-visible { opacity: 1; transform: none; } [data-reveal-delay="100"] { transition-delay: 100ms; } [data-reveal-delay="200"] { transition-delay: 200ms; } [data-reveal-delay="300"] { transition-delay: 300ms; } [data-reveal-delay="400"] { transition-delay: 400ms; } [data-reveal-delay="500"] { transition-delay: 500ms; } [data-reveal-delay="600"] { transition-delay: 600ms; } } /* Subtle hover lift for reveal cards */ .reveal-card { transition: transform 0.35s ease, box-shadow 0.35s ease; transform-style: preserve-3d; } .reveal-card:hover { box-shadow: 0 20px 40px -15px rgba(10, 37, 64, 0.18); } /* 3D tilt container (applied by shared.js) — disables default hover lift when active so JS-set transform wins smoothly. */ .tilt-card { transition: transform 0.12s ease-out, box-shadow 0.35s ease; will-change: transform; } @media (prefers-reduced-motion: reduce) { .tilt-card { transition: transform 0.35s ease; transform: none !important; } } /* ── "Book a Discovery Call" attention animation ────────────── Pulse + shimmer to draw the eye. Respects reduced-motion. */ @media (prefers-reduced-motion: no-preference) { .cta-attention { position: relative; overflow: hidden; animation: cta-pulse 2.8s ease-in-out infinite; transition: transform 0.25s ease, box-shadow 0.25s ease; } .cta-attention::after { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.32) 50%, transparent 100%); animation: cta-shimmer 3.5s ease-in-out infinite; pointer-events: none; } .cta-attention:hover { transform: translateY(-2px) scale(1.02); animation-play-state: paused; box-shadow: 0 14px 32px -8px rgba(0, 194, 203, 0.55); } .cta-attention:active { transform: translateY(0) scale(0.97); } } @keyframes cta-pulse { 0%, 100% { box-shadow: 0 8px 20px -6px rgba(0, 194, 203, 0.32), 0 0 0 0 rgba(0, 194, 203, 0.42); } 60% { box-shadow: 0 8px 20px -6px rgba(0, 194, 203, 0.45), 0 0 0 12px rgba(0, 194, 203, 0); } } @keyframes cta-shimmer { 0% { left: -100%; } 55%, 100% { left: 160%; } } /* ── Scroll progress bar ────────────────────────────────────── Thin cyan indicator at top that tracks scroll depth. Width is set inline via JS. */ #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--brand-primary), var(--brand-tertiary)); z-index: 100; pointer-events: none; transition: width 0.08s linear; } /* ── Hero SVG ambient animations ────────────────────────────── Clock hands tick, chart bars breathe, ambient dots twinkle. */ @media (prefers-reduced-motion: no-preference) { .hero-clock-hour { transform-origin: 400px 82px; animation: clock-tick 120s linear infinite; } .hero-clock-minute { transform-origin: 400px 82px; animation: clock-tick 10s linear infinite; } .hero-chart-bar { transform-box: fill-box; transform-origin: bottom; animation: bar-breathe 3.6s ease-in-out infinite; } .hero-chart-bar-2 { animation-delay: 0.4s; } .hero-chart-bar-3 { animation-delay: 0.8s; } .hero-dot { animation: dot-twinkle 4.5s ease-in-out infinite; } .hero-dot-2 { animation-delay: 0.9s; } .hero-dot-3 { animation-delay: 1.8s; } .hero-dot-4 { animation-delay: 2.7s; } .hero-dot-5 { animation-delay: 3.6s; } } @keyframes clock-tick { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes bar-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.75); } } @keyframes dot-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } /* ── Hero monitor "live screen" animations ─────────────────── */ @media (prefers-reduced-motion: no-preference) { .hero-screen-scan { animation: screen-scan 5s ease-in-out infinite; } .hero-screen-cursor { animation: screen-cursor-blink 1.1s steps(1) infinite; } .hero-screen-status { transform-box: fill-box; transform-origin: center; animation: screen-status-pulse 2.2s ease-in-out infinite; } } @keyframes screen-scan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 0.85; } 50% { transform: translateY(130px); opacity: 0.45; } 90% { opacity: 0.1; } 100% { transform: translateY(0); opacity: 0; } } @keyframes screen-cursor-blink { 0%, 45% { opacity: 0.95; } 46%, 100% { opacity: 0.1; } } @keyframes screen-status-pulse { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } } /* ── About hero: strategic command center animations ──────── */ @media (prefers-reduced-motion: no-preference) { /* Slow orbital rotations — dashes appear to march around the hub */ .ah-orbital-outer, .ah-orbital-mid { transform-box: fill-box; transform-origin: center; } .ah-orbital-outer { animation: ah-orbital-cw 40s linear infinite; } .ah-orbital-mid { animation: ah-orbital-ccw 55s linear infinite; } /* Central cyan core — gentle scale + opacity pulse */ .ah-core-pulse { transform-box: fill-box; transform-origin: center; animation: ah-core 2.6s ease-in-out infinite; } /* Inner ring (r=22) — softly breathes */ .ah-inner-ring { transform-box: fill-box; transform-origin: center; animation: ah-inner 3.2s ease-in-out infinite; } /* Sonar ping — expanding ring emitted from hub */ .ah-sonar { transform-box: fill-box; transform-origin: center; animation: ah-sonar 3s ease-out infinite; } /* Node outer rings — staggered breath */ .ah-node-ring { transform-box: fill-box; transform-origin: center; animation: ah-node-ring 3s ease-in-out infinite; } .ah-node-ring-2 { animation-delay: 0.75s; } .ah-node-ring-3 { animation-delay: 1.5s; } .ah-node-ring-4 { animation-delay: 2.25s; } /* Weak connections flicker — reinforces "drifting / failing" narrative */ .ah-weak-line { animation: ah-weak-flicker 3.8s ease-in-out infinite; } /* Drifting dim nodes — subtle opacity fade */ .ah-drift { animation: ah-drift-fade 4.2s ease-in-out infinite; } /* Data pulses — emitted from hub, travel outward along strong connections. */ .ah-pulse { opacity: 0; } .ah-pulse-tl { animation: ah-pulse-tl 3s ease-in-out infinite; } .ah-pulse-tr { animation: ah-pulse-tr 3s ease-in-out infinite 0.75s; } .ah-pulse-bl { animation: ah-pulse-bl 3s ease-in-out infinite 1.5s; } .ah-pulse-br { animation: ah-pulse-br 3s ease-in-out infinite 2.25s; } } @keyframes ah-orbital-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes ah-orbital-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @keyframes ah-core { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.22); opacity: 0.85; } } @keyframes ah-inner { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.07); opacity: 0.75; } } @keyframes ah-sonar { 0% { transform: scale(1); opacity: 0.55; } 70% { opacity: 0.1; } 100% { transform: scale(2.5); opacity: 0; } } @keyframes ah-node-ring { 0%, 100% { transform: scale(1); opacity: 0.35; } 50% { transform: scale(1.35); opacity: 0.08; } } @keyframes ah-weak-flicker { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.65; } } @keyframes ah-drift-fade { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } } /* Pulse travel: translate from hub (0,0) to each target node position */ @keyframes ah-pulse-tl { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate(-155px, -102px); opacity: 0; } } @keyframes ah-pulse-tr { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate(155px, -95px); opacity: 0; } } @keyframes ah-pulse-bl { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate(-145px, 110px); opacity: 0; } } @keyframes ah-pulse-br { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate(145px, 105px); opacity: 0; } } /* ── Contact hero cityscape animations ─────────────────────── */ /* Base opacities so the scene is legible with reduced-motion */ .cb-win { opacity: 0.55; } .cb-win-bright { opacity: 0.72; } .cb-spark { opacity: 0.65; } @media (prefers-reduced-motion: no-preference) { .cb-win { animation: cb-window-twinkle 4.8s ease-in-out infinite; } .cb-win-bright { animation: cb-window-bright 3.6s ease-in-out infinite; } .cb-moon { transform-box: fill-box; transform-origin: center; animation: cb-moon-pulse 5s ease-in-out infinite; } .cb-moon-halo { transform-box: fill-box; transform-origin: center; animation: cb-halo-breathe 6s ease-in-out infinite; } .cb-spark { transform-box: fill-box; transform-origin: center; animation: cb-spark-drift 5.5s ease-in-out infinite; } .cb-spark-2 { animation-delay: 1.1s; } .cb-spark-3 { animation-delay: 2.2s; } .cb-spark-4 { animation-delay: 3.3s; } .cb-spark-5 { animation-delay: 4.4s; } .cb-reflect { animation: cb-reflect-shimmer 4.5s ease-in-out infinite; } .cb-reflect-2 { animation-delay: 2s; } } @keyframes cb-window-twinkle { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.22; } } @keyframes cb-window-bright { 0%, 100% { opacity: 0.75; } 50% { opacity: 0.35; } } @keyframes cb-moon-pulse { 0%, 100% { opacity: 0.18; transform: scale(1); } 50% { opacity: 0.38; transform: scale(1.08); } } @keyframes cb-halo-breathe { 0%, 100% { opacity: 0.9; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } } @keyframes cb-spark-drift { 0%, 100% { opacity: 0.4; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } } @keyframes cb-reflect-shimmer { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.18; } } /* Booking empty-state — left-pointing arrow bounces toward the calendar, telling the user exactly where to click next. */ @media (prefers-reduced-motion: no-preference) { .cb-nudge-left { display: inline-block; animation: cb-nudge-left 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; } } @keyframes cb-nudge-left { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-8px); } } /* First-available date — breathing teal ring draws the user's eye to the earliest slot they can book, before they've picked a date. */ @media (prefers-reduced-motion: no-preference) { .cb-date-pulse { animation: cb-date-pulse 2.2s ease-in-out infinite; } } @keyframes cb-date-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 194, 203, 0.55), 0 2px 8px -2px rgba(0, 194, 203, 0.35); } 50% { box-shadow: 0 0 0 6px rgba(0, 194, 203, 0), 0 2px 8px -2px rgba(0, 194, 203, 0.35); } } /* ── Services hero orbit — brand-reactive fills/strokes ────── */ .srv-fill-tertiary { fill: var(--brand-tertiary); } .srv-fill-white { fill: #ffffff; } .srv-stroke-tertiary { stroke: var(--brand-tertiary); } .srv-stroke-white { stroke: #ffffff; } .srv-stop-white-90 { stop-color: #ffffff; stop-opacity: 0.9; } .srv-stop-white-18 { stop-color: #ffffff; stop-opacity: 0.18; } .srv-stop-white-0 { stop-color: #ffffff; stop-opacity: 0; } .srv-stop-tertiary-55 { stop-color: var(--brand-tertiary); stop-opacity: 0.55; } .srv-stop-tertiary-0 { stop-color: var(--brand-tertiary); stop-opacity: 0; } /* ── Services hero orbit — nodes travel on static ellipses ─── Each orbit's ellipse is static; the two node circles (halo + dot) travel along the same elliptical motion path. Paths for orbit 2 and 3 are pre-rotated 60°/120° in their arc parameters so they match the SVG transform="rotate(...)" on their ellipses. */ .srv-node { offset-path: path('M 425,188 A 175,58 0 1,1 75,188 A 175,58 0 1,1 425,188'); offset-rotate: 0deg; } .srv-node-2 { offset-path: path('M 337.5,339.55 A 175,58 60 1,1 162.5,36.45 A 175,58 60 1,1 337.5,339.55'); } .srv-node-3 { offset-path: path('M 162.5,339.55 A 175,58 120 1,1 337.5,36.45 A 175,58 120 1,1 162.5,339.55'); } @media (prefers-reduced-motion: no-preference) { .srv-node-1 { animation: srv-travel 14s linear infinite; } .srv-node-2 { animation: srv-travel 18s linear infinite; } .srv-node-3 { animation: srv-travel 15s linear infinite; } .srv-core-pulse { transform-origin: 250px 188px; transform-box: view-box; animation: srv-core-glow 3.2s ease-in-out infinite; } } @keyframes srv-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } } @keyframes srv-core-glow { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.28); } } /* ── Portfolio hero — "outcomes" illustration ──────────────── Fully rendered on first paint. Earlier revisions staggered the path, milestones, and KPI cards in over ~3s, which produced a visible "empty shell → filled image" sequence that read as an old-image-then-new-image flash. Entrance animations removed; only continuous, looping motion remains (target pulse + ripples), so every element is already at final state on load. */ @media (prefers-reduced-motion: no-preference) { .ptf-target-core { transform-origin: 365px 180px; transform-box: view-box; animation: ptf-core-pulse 2.6s ease-in-out infinite; } .ptf-ripple { transform-origin: 365px 180px; transform-box: view-box; opacity: 0; } .ptf-ripple-1 { animation: ptf-ripple 3s ease-out 0s infinite; } .ptf-ripple-2 { animation: ptf-ripple 3s ease-out 1.5s infinite; } } @keyframes ptf-core-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } @keyframes ptf-ripple { 0% { transform: scale(0.5); opacity: 0.85; } 80% { opacity: 0.08; } 100% { transform: scale(2.4); opacity: 0; } } /* ── Audience checkmark stroke-draw ────────────────────────── */ @media (prefers-reduced-motion: no-preference) { .check-draw { stroke-dasharray: 14; stroke-dashoffset: 14; } [data-reveal].is-visible .check-draw { animation: check-stroke 0.55s ease-out 0.15s forwards; } } @keyframes check-stroke { to { stroke-dashoffset: 0; } } /* ── Word-by-word hero headline reveal ────────────────────── */ @media (prefers-reduced-motion: no-preference) { .word-reveal, .word-reveal-block { opacity: 0; transform: translateY(18px); animation: word-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .word-reveal { display: inline-block; } /* .word-reveal-block leaves display untouched so it can wrap a gradient-text child (where inner spans would otherwise go invisible due to -webkit-text-fill-color: transparent). */ } @keyframes word-in { to { opacity: 1; transform: translateY(0); } } /* ── Pricing comparison table row hover ─────────────────── */ .comparison-row > td { transition: background-color 0.2s ease; } .comparison-row:hover > td { background-color: #f8fafc; } /* Keep the featured column's teal tint stronger than the hover */ .comparison-row:hover > td[data-featured="1"], .comparison-row > td[data-featured="1"] { background-color: rgba(0, 194, 203, 0.09); } /* ── Mobile responsive overrides ─────────────────────────── */ /* Pricing plans: 3 col → 1 col on mobile */ .pricing-plans-grid { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .pricing-plans-grid { grid-template-columns: 1fr !important; } } @media (max-width: 767px) { /* Contact: booking calendar stacks to single column */ .booking-cal-grid { grid-template-columns: 1fr !important; } /* On mobile the calendar is ABOVE the prompt, so a left-pointing arrow no longer indicates anything meaningful. Hide it. */ .cb-nudge-left { display: none !important; } /* Contact: form name+company row stacks to single column */ .form-row-grid { grid-template-columns: 1fr !important; } /* Services: hide decorative 220px widget on mobile */ .pillar-widget { display: none !important; } /* About: principle cards with image placeholder stack vertically */ .principle-card-row { flex-direction: column !important; } .principle-placeholder { display: none !important; } } /* Strategic Product Ownership: responsive overrides */ @media (max-width: 960px) { .spo-hero-grid { grid-template-columns: 1fr !important; } .spo-hero-visual { min-height: 14rem !important; } .spo-approach-grid { grid-template-columns: 1fr !important; } .spo-deliverables-grid { grid-template-columns: 1fr !important; } } @media (max-width: 860px) { .spo-gap-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 560px) { .spo-gap-grid { grid-template-columns: 1fr !important; } .spo-deliverables-items { grid-template-columns: 1fr !important; } } /* Services: pillar-approach blocks stack on narrow screens */ @media (max-width: 960px) { .srv-approach-grid { grid-template-columns: 1fr !important; } } /* Business & Technology Translation: responsive overrides */ @media (max-width: 960px) { .btt-hero-grid { grid-template-columns: 1fr !important; } .btt-hero-visual { min-height: 14rem !important; } .btt-approach-grid { grid-template-columns: 1fr !important; } .btt-deliverables-grid { grid-template-columns: 1fr !important; } .btt-success-card { grid-template-columns: 1fr !important; } } @media (max-width: 860px) { .btt-gap-grid { grid-template-columns: repeat(2, 1fr) !important; } .btt-deliv-inner { grid-template-columns: 1fr !important; } } @media (max-width: 560px) { .btt-gap-grid { grid-template-columns: 1fr !important; } .btt-success-stats { grid-template-columns: 1fr !important; gap: 1.25rem !important; } } /* Digital & AI Integration: responsive overrides */ @media (max-width: 960px) { .dai-hero-grid { grid-template-columns: 1fr !important; } .dai-hero-visual { min-height: 14rem !important; } .dai-approach-grid { grid-template-columns: 1fr !important; } .dai-deliverables-grid { grid-template-columns: 1fr !important; } } @media (max-width: 860px) { .dai-gap-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 560px) { .dai-gap-grid { grid-template-columns: 1fr !important; } } /* ── Business & Technology Translation hero animations ─────── Animated monitor screen, breathing chart bars, twinkling ambient dots, sweeping scan line. Honors reduced-motion. */ @media (prefers-reduced-motion: no-preference) { .btt-hero-dot { animation: btt-dot-twinkle 4.4s ease-in-out infinite; } .btt-hero-dot-2 { animation-delay: 0.8s; } .btt-hero-dot-3 { animation-delay: 1.6s; } .btt-hero-dot-4 { animation-delay: 2.4s; } .btt-hero-dot-5 { animation-delay: 3.2s; } .btt-hero-bar { transform-box: fill-box; transform-origin: bottom; animation: btt-bar-breathe 3.6s ease-in-out infinite; } .btt-hero-bar-2 { animation-delay: 0.18s; } .btt-hero-bar-3 { animation-delay: 0.36s; } .btt-hero-bar-4 { animation-delay: 0.54s; } .btt-hero-bar-5 { animation-delay: 0.72s; } .btt-hero-bar-6 { animation-delay: 0.90s; } .btt-hero-bar-7 { animation-delay: 1.08s; } .btt-hero-bar-8 { animation-delay: 1.26s; } .btt-hero-line-dot { transform-box: fill-box; transform-origin: center; animation: btt-line-dot 2.4s ease-in-out infinite; } .btt-hero-line-dot-2 { animation-delay: 1.2s; } .btt-hero-status { transform-box: fill-box; transform-origin: center; animation: btt-status-pulse 2.2s ease-in-out infinite; } .btt-hero-scan { animation: btt-screen-scan 5s ease-in-out infinite; } /* Deliverables chart */ .btt-chart-bar { transform-box: fill-box; transform-origin: bottom; animation: btt-bar-breathe 3.8s ease-in-out infinite; } .btt-chart-bar-2 { animation-delay: 0.2s; } .btt-chart-bar-3 { animation-delay: 0.4s; } .btt-chart-bar-4 { animation-delay: 0.6s; } .btt-chart-bar-5 { animation-delay: 0.8s; } .btt-chart-bar-6 { animation-delay: 1.0s; } .btt-chart-bar-7 { animation-delay: 1.2s; } .btt-chart-bar-8 { animation-delay: 1.4s; } .btt-chart-pulse { transform-box: fill-box; transform-origin: center; animation: btt-status-pulse 2.4s ease-in-out infinite; } .btt-chart-scan { animation: btt-chart-scan 6s ease-in-out infinite; } /* Success-story skyscrapers */ .btt-moon-halo { transform-box: fill-box; transform-origin: center; animation: btt-moon-breathe 6s ease-in-out infinite; } .btt-spark { animation: btt-spark-drift 5.5s ease-in-out infinite; } .btt-spark-2 { animation-delay: 1.1s; } .btt-spark-3 { animation-delay: 2.2s; } .btt-spark-4 { animation-delay: 3.3s; } .btt-spark-5 { animation-delay: 4.4s; } .btt-win { opacity: 0.55; animation: btt-window-twinkle 5s ease-in-out infinite; } .btt-win-1 { animation-delay: 0.6s; } .btt-win-2 { animation-delay: 1.2s; } .btt-win-3 { animation-delay: 1.8s; } .btt-win-4 { animation-delay: 2.4s; } .btt-fg-win { opacity: 0.45; animation: btt-window-twinkle 4.5s ease-in-out infinite; } .btt-fg-win-1 { animation-delay: 0.5s; } .btt-fg-win-2 { animation-delay: 1.0s; } .btt-fg-win-3 { animation-delay: 1.5s; } .btt-fg-win-4 { animation-delay: 2.0s; } .btt-bg-win { opacity: 0.6; animation: btt-window-twinkle 4.8s ease-in-out infinite; } .btt-bg-win-2 { animation-delay: 0.7s; } .btt-bg-win-3 { animation-delay: 1.4s; } .btt-bg-win-4 { animation-delay: 2.1s; } .btt-bg-win-5 { animation-delay: 2.8s; } .btt-bg-win-6 { animation-delay: 3.5s; } .btt-bg-win-7 { animation-delay: 0.3s; } .btt-bg-win-8 { animation-delay: 1.7s; } .btt-reflect { animation: btt-reflect-shimmer 5s ease-in-out infinite; } } /* Static fallback opacities for reduced-motion */ .btt-win { opacity: 0.55; } .btt-fg-win { opacity: 0.45; } .btt-bg-win { opacity: 0.6; } @keyframes btt-dot-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.25; transform: scale(0.65); } } @keyframes btt-bar-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.78); } } @keyframes btt-line-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.45); opacity: 0.6; } } @keyframes btt-status-pulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } } @keyframes btt-screen-scan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 0.85; } 50% { transform: translateY(180px); opacity: 0.5; } 90% { opacity: 0.1; } 100% { transform: translateY(0); opacity: 0; } } @keyframes btt-chart-scan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 0.7; } 50% { transform: translateY(140px); opacity: 0.4; } 90% { opacity: 0.1; } 100% { transform: translateY(0); opacity: 0; } } @keyframes btt-moon-breathe { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } } @keyframes btt-spark-drift { 0%, 100% { opacity: 0.4; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } } @keyframes btt-window-twinkle { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.18; } } @keyframes btt-reflect-shimmer { 0%, 100% { opacity: 0.06; } 50% { opacity: 0.16; } } /* ── Digital & AI Integration hero animations ───────────────── Pulsing concentric rings, drifting shimmer, twinkling data points. Honors prefers-reduced-motion. */ @media (prefers-reduced-motion: no-preference) { .dai-hero-arc { transform-box: fill-box; transform-origin: center; animation: dai-arc-breathe 7s ease-in-out infinite; } .dai-hero-shimmer { transform-box: fill-box; transform-origin: center; animation: dai-shimmer-drift 9s ease-in-out infinite; } .dai-hero-ring { transform-box: fill-box; transform-origin: 620px 200px; animation: dai-ring-pulse 4.5s ease-in-out infinite; } .dai-hero-ring-2 { animation-delay: 1.5s; } .dai-hero-ring-3 { animation-delay: 3s; } .dai-hero-dot { animation: dai-dot-twinkle 4s ease-in-out infinite; } .dai-hero-dot-2 { animation-delay: 0.6s; } .dai-hero-dot-3 { animation-delay: 1.4s; } .dai-hero-dot-4 { animation-delay: 2.2s; } .dai-hero-dot-5 { animation-delay: 3.0s; } } @keyframes dai-arc-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.02); opacity: 0.95; } } @keyframes dai-shimmer-drift { 0% { transform: translate(-90px, 40px); opacity: 0.4; } 50% { transform: translate(-30px, -30px); opacity: 0.9; } 100% { transform: translate(-90px, 40px); opacity: 0.4; } } @keyframes dai-ring-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: 0.5; } } @keyframes dai-dot-twinkle { 0%, 100% { opacity: 0.95; transform: scale(1); } 50% { opacity: 0.25; transform: scale(0.6); } }