/* ───────────────────────────────────────────────────────────────────────── SM Synergy — Redesign tokens Three directions live in this one stylesheet, gated by [data-look=…] on . ALL three share the same brand palette (only --sm-accent #b15dfd). What changes between them is rhythm, density, radius, and motion. ───────────────────────────────────────────────────────────────────────── */ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap"); @import url("../colors_and_type.css"); * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--sm-bg); color: var(--sm-fg); } body { font-family: var(--sm-font); line-height: 1.55; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: var(--sm-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--sm-accent-light); } .rx-nolink { color: inherit !important; text-decoration: none !important; } .rx-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; } .rx-muted { color: var(--sm-text-muted); } .rx-strong { color: var(--sm-fg-strong); font-weight: 600; } /* ─── Shared semantic primitives ───────────────────────────────────────── */ .rx-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sm-accent-light); margin: 0; } .rx-kicker-dot::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--sm-accent); } .rx-btn { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--sm-font); padding: 12px 18px; border-radius: var(--rx-btn-radius, 8px); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background 150ms var(--sm-ease), border-color 150ms var(--sm-ease), color 150ms var(--sm-ease), transform 150ms var(--sm-ease), box-shadow 150ms var(--sm-ease); will-change: transform; } .rx-btn--accent { background: var(--sm-accent); color: var(--sm-bg); border-color: var(--sm-accent); } .rx-btn--accent:hover { background: var(--sm-accent-hover); border-color: var(--sm-accent-hover); } .rx-btn--accent:active { background: var(--sm-accent-active); border-color: var(--sm-accent-active); transform: translateY(1px); } .rx-btn--outline { background: transparent; color: var(--sm-fg-strong); border-color: var(--sm-line-strong); } .rx-btn--outline:hover { background: rgba(255,255,255,0.06); border-color: var(--sm-fg); } .rx-btn--ghost { background: transparent; color: var(--sm-fg-strong); padding: 12px 8px; } .rx-btn--ghost:hover { color: var(--sm-accent-light); } .rx-btn--lg { padding: 16px 24px; font-size: 15px; } .rx-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--sm-bg), 0 0 0 5px var(--sm-accent); } a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--sm-bg), 0 0 0 5px var(--sm-accent); border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* ─── Scroll reveal — used in all three directions ───────────────────────── Default state is VISIBLE so the page never depends on JS to render. JS adds `.rx-reveal-armed` on mount, then IntersectionObserver swaps in `.is-visible` as elements enter the viewport. If JS / IO never fire (background tab, screenshot capture, print-to-PDF), content stays visible. ─────────────────────────────────────────────────────────────────────── */ .rx-reveal { opacity: 1; transform: none; transition: opacity 600ms var(--sm-ease), transform 600ms var(--sm-ease); } .rx-reveal-armed { opacity: 0; transform: translateY(12px); } .rx-reveal-armed.is-visible { opacity: 1; transform: none; } /* ═══════════════════════════════════════════════════════════════════════ LOOK 1 · CLEAN ENTERPRISE EDGE Stripe / Linear / Vercel — low density, high whitespace, hairlines. ═══════════════════════════════════════════════════════════════════════ */ body[data-look="clean"] { --rx-section-y: 112px; --rx-card-radius: 10px; --rx-btn-radius: 8px; --rx-card-bg: rgba(255,255,255,0.025); --rx-card-bg-hover: rgba(255,255,255,0.04); --rx-card-pad: 28px; --rx-divider: 1px solid var(--sm-line); --rx-h1: clamp(2.5rem, 4.5vw + 1rem, 3.75rem); --rx-h1-weight: 600; --rx-h2: clamp(1.75rem, 2.4vw + 0.5rem, 2.25rem); --rx-h2-weight: 600; --rx-h3: 1.25rem; --rx-lead: 1.125rem; --rx-grid-gap: 20px; } /* ═══════════════════════════════════════════════════════════════════════ LOOK 2 · MODERN FLUID SOFT AI SaaS / premium automation — medium density, soft glass, layered depth. ═══════════════════════════════════════════════════════════════════════ */ body[data-look="fluid"] { --rx-section-y: 88px; --rx-card-radius: 16px; --rx-btn-radius: 10px; --rx-card-bg: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)); --rx-card-bg-hover: linear-gradient(160deg, rgba(177,93,253,0.08), rgba(255,255,255,0.02)); --rx-card-pad: 24px; --rx-divider: 1px solid var(--sm-line); --rx-h1: clamp(2.25rem, 4vw + 1rem, 3.25rem); --rx-h1-weight: 700; --rx-h2: clamp(1.5rem, 2.2vw + 0.5rem, 2rem); --rx-h2-weight: 700; --rx-h3: 1.25rem; --rx-lead: 1.125rem; --rx-grid-gap: 16px; } /* ═══════════════════════════════════════════════════════════════════════ LOOK 3 · BOLD TYPOGRAPHY & HIGHLIGHTS Editorial SaaS — dynamic density, type-driven, asymmetric, high contrast. ═══════════════════════════════════════════════════════════════════════ */ body[data-look="bold"] { --rx-section-y: 96px; --rx-card-radius: 4px; --rx-btn-radius: 0px; --rx-card-bg: transparent; --rx-card-bg-hover: rgba(177,93,253,0.04); --rx-card-pad: 32px 0; --rx-divider: 1px solid var(--sm-line); --rx-h1: clamp(3rem, 7.5vw + 1rem, 6rem); --rx-h1-weight: 800; --rx-h2: clamp(2rem, 4vw + 0.5rem, 3rem); --rx-h2-weight: 800; --rx-h3: 1.5rem; --rx-lead: 1.25rem; --rx-grid-gap: 0px; } /* ─── Headings (shared, driven by direction vars) ──────────────────────── */ .rx-h1 { font-size: var(--rx-h1); font-weight: var(--rx-h1-weight); line-height: 1.05; letter-spacing: -0.02em; color: var(--sm-fg-strong); margin: 0; text-wrap: balance; } .rx-h2 { font-size: var(--rx-h2); font-weight: var(--rx-h2-weight); line-height: 1.15; letter-spacing: -0.015em; color: var(--sm-fg-strong); margin: 0; text-wrap: balance; } .rx-h3 { font-size: var(--rx-h3); font-weight: 700; line-height: 1.3; color: var(--sm-fg-strong); margin: 0; } .rx-lead { font-size: var(--rx-lead); line-height: 1.55; color: var(--sm-text-muted); max-width: 56ch; text-wrap: pretty; } /* Section vertical rhythm */ .rx-section { padding-top: var(--rx-section-y); padding-bottom: var(--rx-section-y); } .rx-section + .rx-section { border-top: var(--rx-divider); } /* Card */ .rx-card { background: var(--rx-card-bg); border: 1px solid var(--sm-line); border-radius: var(--rx-card-radius); padding: var(--rx-card-pad); transition: border-color 200ms var(--sm-ease), background 200ms var(--sm-ease), transform 200ms var(--sm-ease), box-shadow 200ms var(--sm-ease); } .rx-card:hover { border-color: var(--sm-accent-dim); background: var(--rx-card-bg-hover); } /* ─── Direction-specific overrides ─────────────────────────────────────── */ /* CLEAN: minimal hover lift, no gradient bg, hairline emphasis */ body[data-look="clean"] .rx-card:hover { transform: none; box-shadow: none; } body[data-look="clean"] .rx-grid { gap: 20px; } /* FLUID: lift + soft purple shadow on hover, more elevation */ body[data-look="fluid"] .rx-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgba(177,93,253,0.25), 0 12px 30px rgba(0,0,0,0.3); } body[data-look="fluid"] .rx-grid { gap: 16px; } /* BOLD: cards are dividers, not boxes */ body[data-look="bold"] .rx-card { border-radius: 0; border: 0; border-top: 1px solid var(--sm-line); padding: 32px 0; } body[data-look="bold"] .rx-card:hover { background: transparent; border-color: var(--sm-accent-dim); } /* Header look-specific tweaks */ .rx-header { position: sticky; top: 0; z-index: 50; background: rgba(10,10,12,0.84); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--sm-line); } body[data-look="clean"] .rx-header { background: rgba(10,10,12,0.92); } body[data-look="bold"] .rx-header { background: var(--sm-bg); border-bottom: 2px solid var(--sm-line); } /* Focus ring re-emphasis to make sure AA contrast on dark */ ::selection { background: var(--sm-accent-dim); color: var(--sm-fg-strong); } /* ─── Partner marquee — infinite, hover-pause, edge-faded ──────────────── */ .rx-marquee { position: relative; overflow: hidden; padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .rx-marquee__track { display: flex; gap: 64px; width: max-content; animation: rx-marquee-scroll 45s linear infinite; } .rx-marquee:hover .rx-marquee__track { animation-play-state: paused; } .rx-marquee__item { flex: 0 0 auto; display: grid; place-items: center; min-width: 140px; height: 56px; } .rx-marquee__item img { max-height: 36px; max-width: 140px; width: auto; filter: grayscale(1) brightness(1.4) contrast(0.9); opacity: 0.55; transition: filter 240ms var(--sm-ease), opacity 240ms var(--sm-ease), transform 240ms var(--sm-ease); } .rx-marquee__item:hover img { filter: grayscale(0) brightness(1) contrast(1); opacity: 1; transform: scale(1.06); } @keyframes rx-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .rx-marquee__track { animation: none !important; } } /* ---- ROI Calculator (FluidROI) ---- */ .ais-calc-grid { display: grid; gap: 16px; grid-template-columns: 1fr; } .ais-calc-inputs { grid-template-columns: 1fr; } .ais-calc-result { position: static; } @media (min-width: 900px) { .ais-calc-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: 24px; } .ais-calc-inputs { grid-template-columns: 1fr 1fr; } .ais-calc-inputs > article:last-child { grid-column: 1 / -1; } .ais-calc-result { position: sticky; top: 80px; } } /* ---- Brand mark pulse (AISPulseDecor) ---- */ @keyframes aisPulse { 0% { transform: scale(0.85); opacity: 0.0; } 20% { opacity: 0.6; } 100% { transform: scale(1.45); opacity: 0; } } @media (prefers-reduced-motion: reduce) { [style*="aisPulse"], [style*="aisPulse"] * { animation: none !important; } } @media (max-width: 720px) { /* Trim the hero ambient pulse on small screens — keeps focus on H1/CTA */ .rx-header + section svg[width="420"] { display: none; } } /* Primary wordmark — keep edges crisp when downsampled from 1024px source */ .ais-brand img, footer img[alt="AI Signals"] { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } /* ---- Voices / testimonials grid ---- */ .ais-voices-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 720px) { .ais-voices-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1080px) { .ais-voices-grid { grid-template-columns: 1fr 1fr 1fr; } } /* =========================================================================== Dynamic motion layer — live signals, radar sweep, count-up bands. All gated by prefers-reduced-motion at the bottom of this block. =========================================================================== */ /* Live pulse dot (used in kickers / "updating live" labels) */ .ais-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sm-success-trend, #9dffb8); box-shadow: 0 0 0 0 rgba(157, 255, 184, 0.6); animation: aisLivePulse 1.8s ease-out infinite; flex-shrink: 0; } @keyframes aisLivePulse { 0% { box-shadow: 0 0 0 0 rgba(157,255,184,0.55); } 70% { box-shadow: 0 0 0 7px rgba(157,255,184,0); } 100% { box-shadow: 0 0 0 0 rgba(157,255,184,0); } } /* Radar sweep + blips (FluidLiveSignals) */ @keyframes aisRadarSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes aisBlip { 0%, 100% { transform: scale(0.4); opacity: 0; } 18% { transform: scale(1); opacity: 1; } 60% { opacity: 0.5; } } /* Signal rows slide in as the feed rotates */ .ais-signal-row { animation: aisSignalIn 520ms cubic-bezier(0.22,1,0.36,1) both; } @keyframes aisSignalIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Live-signals responsive grid */ .ais-live-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 880px) { .ais-live-grid { grid-template-columns: 1.5fr 1fr; } } /* Card hover lift — gives the deck tactile depth */ .ais-card-lift { transition: transform 280ms cubic-bezier(0.22,1,0.36,1), box-shadow 280ms ease, border-color 280ms ease; } .ais-card-lift:hover { transform: translateY(-4px); border-color: var(--sm-accent-dim); box-shadow: 0 22px 48px -24px rgba(177,93,253,0.55); } /* Mid-page CTA band — slow ambient gradient drift */ .ais-cta-band { background-size: 160% 160% !important; animation: aisGradientDrift 14s ease-in-out infinite; } @keyframes aisGradientDrift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @media (max-width: 860px) { .ais-cta-band { grid-template-columns: 1fr !important; } .ais-cta-band > div:last-child { border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--sm-line); padding-top: 24px; } } /* Signal field — dotted "+" grid backdrop + twinkling demand-signal blips */ .ais-signal-grid { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg stroke='%23ffffff' stroke-opacity='0.10' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='22' y1='19' x2='22' y2='25'/%3E%3Cline x1='19' y1='22' x2='25' y2='22'/%3E%3C/g%3E%3C/svg%3E"); background-size: 44px 44px; background-position: center; -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 55%, transparent 100%); } .ais-signal-blip { opacity: 0; animation-name: aisBlipTwinkle; animation-timing-function: ease-in-out; animation-iteration-count: infinite; will-change: opacity, transform; } @keyframes aisBlipTwinkle { 0%, 100% { opacity: 0; transform: scale(0.55); } 10% { opacity: 0.95; transform: scale(1.15); } 28% { opacity: 0.45; transform: scale(1); } 48% { opacity: 0; transform: scale(0.6); } } /* Respect user motion preference — kill all of the above */ @media (prefers-reduced-motion: reduce) { .ais-live-dot, .ais-signal-row, .ais-cta-band, .ais-signal-blip, [style*="aisRadarSpin"], [style*="aisBlip"] { animation: none !important; } .ais-signal-blip { opacity: 0.4 !important; } .ais-card-lift:hover { transform: none; } } /* ===================================================================== RESPONSIVE LAYER (mobile / tablet — top Android & iOS devices 2026) Strategy: most layouts use INLINE `style` grids. Author rules with !important override inline non-important styles per CSS cascade, so we collapse multi-column inline grids globally without editing 22 files. ===================================================================== */ /* ---- Global overflow + media guard ---- */ html, body { max-width: 100%; overflow-x: hidden; } img, svg, video, canvas { max-width: 100%; height: auto; } /* ---- Header: hamburger hidden on desktop, shown on mobile ---- */ .rx-burger { display: none; } .rx-mobile-menu { display: flex; flex-direction: column; gap: 4px; padding: 14px 20px 22px; border-top: 1px solid var(--sm-line); background: rgba(10,10,12,0.98); backdrop-filter: blur(14px); } .rx-mobile-link { padding: 13px 12px; font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.9); border-radius: 12px; cursor: pointer; } .rx-mobile-link:active { background: rgba(255,255,255,0.08); } @media (max-width: 860px) { .rx-nav-desktop, .rx-cta-desktop { display: none !important; } .rx-burger { display: inline-flex !important; } } @media (min-width: 861px) { .rx-mobile-menu { display: none !important; } } /* ---- Tablet: collapse heavy multi-column grids (4/5/6/12 cols) ---- */ @media (max-width: 992px) { [style*="repeat(4,"], [style*="repeat(5,"], [style*="repeat(6,"], [style*="repeat(12,"], [style*="2fr repeat(5,"] { grid-template-columns: repeat(2, 1fr) !important; } } /* ---- Phone: collapse essentially everything to a single column ---- */ @media (max-width: 768px) { /* Grid/flex children default to min-width:auto, so a wide child expands the collapsed 1fr track past the viewport (text then clips under overflow-x). Force them to shrink to the available track. */ [style*="grid-template-columns"] > *, [style*="display: flex"] > *, [style*="display:flex"] > * { min-width: 0 !important; } /* Bento children carry `grid-column: span N`. Once the grid is collapsed to a single column, a leftover span fabricates implicit columns and squashes the card into a sliver — reset every spanning child to one column. */ [style*="grid-column"] { grid-column: auto !important; } [style*="repeat(2,"], [style*="repeat(3,"], [style*="repeat(4,"], [style*="repeat(5,"], [style*="repeat(6,"], [style*="repeat(12,"], [style*="2fr repeat(5,"], [style*="1fr 1fr"], [style*="fr 1fr;"], [style*="1fr 2fr"], [style*="2fr 1fr"], [style*="1.2fr"], [style*="1.3fr"], [style*="1.4fr"], [style*="1.5fr"], [style*="minmax(0,"] { grid-template-columns: 1fr !important; } /* Keep small label/icon rows two-column — they must NOT collapse */ [style*="auto 1fr"], [style*="120px 1fr"], [style*="32px 1fr"], [style*="28px 1fr"], [style*="24px 1fr"], [style*="40px 1fr"], [style*="44px 1fr"], [style*="48px 1fr"], [style*="56px 1fr"] { grid-template-columns: var(--rx-keep, auto 1fr) !important; } /* …but 3-column rows ending in `auto` (icon · text · CTA pins) must fully stack — keeping them 2-col forces the nowrap CTA into the auto column and crushes the text. Declared AFTER the keep rule so it wins. */ [style*="auto 1fr auto"] { grid-template-columns: 1fr !important; } /* Tame oversized type / padding on phones */ .rx-container { padding-left: 18px !important; padding-right: 18px !important; } section { padding-left: 0 !important; padding-right: 0 !important; } h1, .rx-h1 { font-size: clamp(30px, 8vw, 44px) !important; line-height: 1.1 !important; } h2, .rx-h2 { font-size: clamp(24px, 6vw, 34px) !important; } .rx-h3 { font-size: clamp(19px, 5vw, 24px) !important; } .rx-lead { font-size: clamp(15px, 4vw, 18px) !important; max-width: 100% !important; } /* never let a long word force horizontal overflow */ .rx-h1, .rx-h2, .rx-h3, h1, h2, h3 { overflow-wrap: break-word; word-break: break-word; } } /* ---- Small phones (≤390px: iPhone 15/16, Pixel 9, Galaxy S24) ---- */ @media (max-width: 400px) { .rx-container { padding-left: 14px !important; padding-right: 14px !important; } h1, .rx-h1 { font-size: clamp(26px, 9vw, 36px) !important; } } /* ---- Contact / booking modals (Contact.jsx) ---- */ @keyframes ais-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes ais-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { [style*="ais-fade"], [style*="ais-pop"] { animation: none !important; } } /* ---- Data → Value visualization showcase (Fluid.jsx FluidDataValue) ---- */ .rx-viz-frame { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--sm-accent-dim, rgba(177,93,253,0.35)); background: radial-gradient(120% 100% at 50% 0%, rgba(177,93,253,0.10), transparent 60%), var(--sm-bg, #0b0b10); box-shadow: 0 24px 70px -30px rgba(177,93,253,0.55), 0 2px 0 rgba(255,255,255,0.03) inset; } .rx-viz-frame::after { /* soft top accent line */ content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset; } .rx-viz-frame img, .rx-viz-frame video { border-radius: 16px; } .rx-viz-motion { margin: 0; } .rx-viz-cap { font-size: 12.5px; color: var(--sm-muted, #9aa0ad); text-align: center; padding: 12px 16px 14px; margin: 0; } .rx-viz-stages { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .rx-viz-stage { position: relative; padding: 16px 14px; border-radius: 12px; border: 1px solid var(--sm-line, rgba(255,255,255,0.08)); background: rgba(255,255,255,0.02); } .rx-viz-stage__n { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--sm-accent-light, #c89bff); margin-bottom: 6px; } .rx-viz-stage__t { display: block; font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; } .rx-viz-stage__d { display: block; font-size: 12.5px; line-height: 1.45; color: var(--sm-muted, #9aa0ad); } .rx-viz-stage__arrow { position: absolute; right: -11px; top: 50%; transform: translateY(-50%); z-index: 2; font-size: 16px; color: var(--sm-accent, #b15dfd); } @media (max-width: 860px) { .rx-viz-stages { grid-template-columns: repeat(2, 1fr); } .rx-viz-stage__arrow { display: none; } } @media (max-width: 460px) { .rx-viz-stages { grid-template-columns: 1fr; } .rx-viz-frame { border-radius: 12px; } } @media (prefers-reduced-motion: reduce) { .rx-viz-motion video { display: none; } } /* ---- Team band (Fluid.jsx FluidTeamBand) ---- */ .rx-team-band { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: center; } .rx-team-band__copy { max-width: 460px; } @media (max-width: 860px) { .rx-team-band { grid-template-columns: 1fr; gap: 24px; } .rx-team-band__copy { max-width: none; } } /* ---- In-the-field gallery (Fluid.jsx FluidUseCases) ---- */ .rx-field-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .rx-field-item img { border-radius: 16px 16px 0 0; } @media (max-width: 720px) { .rx-field-gallery { grid-template-columns: 1fr; } } /* ---- Co-funding / grant logo strip (Fluid.jsx FluidFunding) ---- */ .rx-funding__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 48px; } .rx-funding__logo { height: 56px; width: auto; max-width: 280px; object-fit: contain; } @media (max-width: 480px) { .rx-funding__row { gap: 20px 28px; } .rx-funding__logo { height: 44px; max-width: 220px; } }