/* ================================================================== R&M Professional Cleaning — Design System ------------------------------------------------------------------ Loaded AFTER rmcleaning.css and custom.css, so it wins. Two jobs: PART A Tokens + sitewide lift. Retunes the Webflow classes that already exist on every page (buttons, nav, footer, forms, headings) so untouched pages inherit the premium feel. PART B Component library for the rebuilt pages (.rm-* classes). Fully self-contained — never inherits Webflow colors, so it can't hit the invisible-text bug the location pages did. ================================================================== */ /* ================================================================== PART A — TOKENS ================================================================== */ :root { /* Brand */ --rm-red: #C8102E; --rm-red-deep: #9B0B22; --rm-red-bright: #E8203F; --rm-red-wash: rgba(200, 16, 46, .08); /* Ink — cool near-black, not pure black. Reads as expensive. */ --rm-ink: #0B1017; --rm-ink-2: #151D28; --rm-ink-3: #263140; --rm-body: #4A5567; --rm-muted: #6B7688; /* Surfaces */ --rm-white: #FFFFFF; --rm-bone: #F7F5F2; /* warm neutral, softer than grey */ --rm-mist: #F1F4F8; /* cool neutral */ --rm-line: rgba(11, 16, 23, .10); --rm-line-soft: rgba(11, 16, 23, .06); --rm-line-dark: rgba(255, 255, 255, .12); /* Type */ --rm-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --rm-serif: 'Instrument Serif', 'Vollkorn', Georgia, serif; /* Fluid type scale — clamp() so it breathes without breakpoints */ --rm-t-display: clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem); --rm-t-h1: clamp(2.25rem, 1.4rem + 3.4vw, 4rem); --rm-t-h2: clamp(1.75rem, 1.25rem + 2vw, 2.85rem); --rm-t-h3: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); --rm-t-h4: clamp(1.08rem, 1rem + .4vw, 1.28rem); --rm-t-body: clamp(1rem, .96rem + .18vw, 1.09rem); --rm-t-lead: clamp(1.09rem, 1rem + .45vw, 1.3rem); --rm-t-small: .875rem; --rm-t-eyebrow: .74rem; /* Space */ --rm-gutter: clamp(1.25rem, .6rem + 2.4vw, 2.5rem); --rm-section: clamp(4.5rem, 2.5rem + 7vw, 9rem); --rm-max: 1240px; --rm-max-narrow: 820px; /* Radius */ --rm-r-sm: 8px; --rm-r: 14px; --rm-r-lg: 22px; --rm-r-xl: 32px; /* Elevation — layered, low-opacity. One big blurry shadow reads cheap. */ --rm-sh-sm: 0 1px 2px rgba(11,16,23,.05), 0 2px 6px rgba(11,16,23,.04); --rm-sh: 0 2px 4px rgba(11,16,23,.04), 0 8px 20px rgba(11,16,23,.07); --rm-sh-lg: 0 4px 8px rgba(11,16,23,.04), 0 18px 44px rgba(11,16,23,.10); --rm-sh-xl: 0 8px 16px rgba(11,16,23,.05), 0 34px 80px rgba(11,16,23,.14); --rm-sh-red: 0 6px 16px rgba(200,16,46,.22), 0 18px 40px rgba(200,16,46,.16); /* Height of the sticky/fixed navbar. Measured and rewritten by site-motion.js; this value is the no-JS fallback. */ --rm-nav-h: 116px; /* Motion — these mirror the Motion/Framer easing curves used in JS so CSS-driven and JS-driven transitions feel like one system. */ --rm-ease: cubic-bezier(.22, 1, .36, 1); /* expo-out-ish */ --rm-ease-out: cubic-bezier(.16, 1, .3, 1); --rm-ease-in-out: cubic-bezier(.65, 0, .35, 1); --rm-dur-fast: .18s; --rm-dur: .32s; --rm-dur-slow: .55s; } /* ------------------------------------------------------------------ A1. Base — smooth anchor scrolling that respects the sticky nav ------------------------------------------------------------------ */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Guard against stray horizontal overflow. Deliberately `clip` on , NOT `overflow-x: hidden` on : `hidden` computes the other axis to `auto`, which turns the element into a scroll container. On that moves the page's scrollport off the viewport — window scroll events stop firing and position: sticky descendants break. `clip` never establishes a scrollport. */ html { overflow-x: clip; } :where(h1, h2, h3, h4, h5) { text-wrap: balance; } :where(p, li) { text-wrap: pretty; } /* Visible, on-brand focus ring everywhere — accessibility + polish. */ :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--rm-red); outline-offset: 3px; border-radius: 4px; } /* Keyboard-only skip link */ .rm-skip { position: absolute; left: 50%; top: -100px; transform: translateX(-50%); z-index: 4000; padding: 12px 22px; background: var(--rm-ink); color: #fff; font: 700 14px/1 var(--rm-sans); border-radius: 0 0 var(--rm-r-sm) var(--rm-r-sm); text-decoration: none; transition: top var(--rm-dur) var(--rm-ease); } .rm-skip:focus { top: 0; } /* Selection */ ::selection { background: var(--rm-red); color: #fff; } /* Custom scrollbar (desktop only) */ @media (min-width: 992px) { * { scrollbar-width: thin; scrollbar-color: rgba(11,16,23,.28) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(11,16,23,.22); border: 3px solid #fff; border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: rgba(11,16,23,.38); } } /* ------------------------------------------------------------------ A2. Scroll progress bar (driven by Motion's scroll()) ------------------------------------------------------------------ */ .rm-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--rm-red), var(--rm-red-bright)); z-index: 3000; pointer-events: none; will-change: transform; } /* ------------------------------------------------------------------ A3. Sitewide lift of the existing Webflow buttons Every page uses .button-2 / .submit-button / .w-button. ------------------------------------------------------------------ */ .button-2.w-button, .submit-button.w-button, a.button-2, input.submit-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 34px; border: 0; border-radius: 999px; background: var(--rm-red); background-image: linear-gradient(180deg, var(--rm-red-bright), var(--rm-red)); color: #fff !important; font-family: var(--rm-sans); font-size: 14px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; text-decoration: none; line-height: 1; box-shadow: var(--rm-sh-red); cursor: pointer; overflow: hidden; isolation: isolate; transition: transform var(--rm-dur) var(--rm-ease), box-shadow var(--rm-dur) var(--rm-ease), filter var(--rm-dur) var(--rm-ease); will-change: transform; } /* Sheen sweep on hover — one subtle highlight, not a rainbow. */ .button-2.w-button::after, .submit-button.w-button::after, a.button-2::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.30) 48%, transparent 66%); transform: translateX(-110%); transition: transform .7s var(--rm-ease); } .button-2.w-button:hover, .submit-button.w-button:hover, a.button-2:hover, input.submit-button:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(200,16,46,.28), 0 26px 56px rgba(200,16,46,.20); filter: saturate(1.06); color: #fff !important; } .button-2.w-button:hover::after, .submit-button.w-button:hover::after, a.button-2:hover::after { transform: translateX(110%); } .button-2.w-button:active, .submit-button.w-button:active, a.button-2:active, input.submit-button:active { transform: translateY(0) scale(.975); box-shadow: var(--rm-sh-sm); transition-duration: .08s; } /* ------------------------------------------------------------------ A4. Sitewide lift of the existing Webflow form fields ------------------------------------------------------------------ */ .w-input, .w-select, .text-field.w-input, textarea.w-input { font-family: var(--rm-sans); font-size: 15px; color: var(--rm-ink); background: var(--rm-white); border: 1px solid var(--rm-line); border-radius: var(--rm-r-sm); padding: 14px 16px; box-shadow: inset 0 1px 2px rgba(11,16,23,.03); transition: border-color var(--rm-dur) var(--rm-ease), box-shadow var(--rm-dur) var(--rm-ease), background-color var(--rm-dur) var(--rm-ease); } .w-input::placeholder, textarea.w-input::placeholder { color: #9AA3B2; } .w-input:hover, .w-select:hover { border-color: rgba(11,16,23,.22); } .w-input:focus, .w-select:focus, textarea.w-input:focus { border-color: var(--rm-red); box-shadow: 0 0 0 4px var(--rm-red-wash); outline: none; } /* Form status messages */ .w-form-done, .w-form-fail { border-radius: var(--rm-r); padding: 18px 22px; font-family: var(--rm-sans); font-size: 15px; font-weight: 600; border: 1px solid transparent; } .w-form-done { background: #ECF8F0; color: #14663A; border-color: #BFE5CD; } .w-form-fail { background: #FDF0F2; color: #96122A; border-color: #F5CBD3; } /* ------------------------------------------------------------------ A5. Sitewide lift of the existing Webflow navbar ------------------------------------------------------------------ */ .navbar-2.w-nav { background-color: #fff; border-bottom: 1px solid transparent; /* Webflow shipped a heavy permanent drop shadow. At rest the bar should sit flat against the page; the shadow earns its place only once content is scrolling underneath it. */ box-shadow: none; transition: box-shadow var(--rm-dur) var(--rm-ease), border-color var(--rm-dur) var(--rm-ease); } /* .rm-scrolled is toggled by site-motion.js past ~40px */ body.rm-scrolled .navbar-2.w-nav { background-color: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom-color: var(--rm-line-soft); box-shadow: 0 1px 0 rgba(11,16,23,.04), 0 10px 30px rgba(11,16,23,.07); } /* Collapse the tall utility bar once the visitor starts reading, so the header drops from ~215px to just the nav strip. ------------------------------------------------------------------ This MUST NOT change layout. The obvious implementation — animating max-height on the utility bar — shrinks a sticky, in-flow header and so drags the entire document up, forcing a full relayout on every frame and triggering Chrome's scroll anchoring, which then fights the user's scroll. The result is visible stuttering for the whole transition. Instead: take the navbar out of flow (fixed), reserve its full height once on
, and slide the whole bar up by the utility-bar height with a transform. Transform is compositor-only — zero layout, zero reflow, no scroll anchoring, no stutter. The navbar's box never changes size, which also makes the measurements below stable. */ @media screen and (min-width: 992px) { .navbar-2.w-nav { position: fixed; top: 0; left: 0; right: 0; width: 100%; transform: translateY(0); transition: transform var(--rm-dur) var(--rm-ease), box-shadow var(--rm-dur) var(--rm-ease), border-color var(--rm-dur) var(--rm-ease), background-color var(--rm-dur) var(--rm-ease); will-change: transform; } /* Reserve the header's full height so nothing sits underneath it. This value never changes, so the page never reflows. */ main { padding-top: var(--rm-nav-full-h, 215px); } body.rm-scrolled .navbar-2.w-nav { transform: translateY(calc(-1 * var(--rm-util-h, 163px))); } /* Once the bar has slid away, drop it out of the focus order too — delayed so it stays visible for the length of the transition. */ .navbar-2.w-nav .div-block-7 { visibility: visible; transition: visibility 0s; } body.rm-scrolled .navbar-2.w-nav .div-block-7 { visibility: hidden; transition: visibility 0s var(--rm-dur); } } /* Scroll anchoring exists to keep your place when content above you resizes. Here it has nothing useful to do and can only interfere with the header transition. */ body { overflow-anchor: none; } /* Nav links — animated underline that grows from the left */ .navlink.w-nav-link, .navlink.drop { position: relative; font-family: var(--rm-sans); font-weight: 600; letter-spacing: .04em; transition: color var(--rm-dur-fast) var(--rm-ease); } .navlink.w-nav-link::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 10px; height: 2px; background: var(--rm-red); border-radius: 2px; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--rm-dur) var(--rm-ease); } .navlink.w-nav-link:hover::after, .navlink.w-nav-link.w--current::after { transform: scaleX(1); } .navlink.w-nav-link:hover { color: var(--rm-red); } /* Dropdown panel */ .dropdown-list-3.w-dropdown-list { border-radius: var(--rm-r); border: 1px solid var(--rm-line-soft); box-shadow: var(--rm-sh-lg); overflow: hidden; padding: 8px; } .navlink.submenu.w-dropdown-link { border-radius: var(--rm-r-sm); font-family: var(--rm-sans); font-weight: 600; transition: background-color var(--rm-dur-fast) var(--rm-ease), color var(--rm-dur-fast) var(--rm-ease), padding-left var(--rm-dur-fast) var(--rm-ease); } .navlink.submenu.w-dropdown-link:hover { background: var(--rm-red-wash); color: var(--rm-red); padding-left: 26px; } /* Top utility bar links */ .top-menu-links { transition: color var(--rm-dur-fast) var(--rm-ease), opacity var(--rm-dur-fast) var(--rm-ease); } .top-menu-links:hover { color: var(--rm-red); } .call strong, a.call { transition: color var(--rm-dur-fast) var(--rm-ease); } a.call:hover strong { color: var(--rm-red); } /* Logo — gentle lift, no cartoon bounce */ .image-78, .mobilelogo { transition: transform var(--rm-dur-slow) var(--rm-ease); } .w-nav-brand:hover .image-78, .w-nav-brand:hover .mobilelogo { transform: scale(1.025); } /* ------------------------------------------------------------------ A6. Sitewide lift — footer, mobile CTA bar, trust badges ------------------------------------------------------------------ */ .section-8 { border-top: 1px solid var(--rm-line-soft); } .section-8 .link, .section-8 .link-2 { position: relative; transition: color var(--rm-dur-fast) var(--rm-ease), padding-left var(--rm-dur-fast) var(--rm-ease); } .section-8 .link:hover, .section-8 .link-2:hover { color: var(--rm-red); padding-left: 6px; } .trust-badges span { padding: 7px 13px; background: var(--rm-bone); border: 1px solid var(--rm-line-soft); border-radius: 999px; transition: transform var(--rm-dur) var(--rm-ease), border-color var(--rm-dur) var(--rm-ease); } .trust-badges span:hover { transform: translateY(-2px); border-color: rgba(200,16,46,.32); } .footer-areas { background: var(--rm-ink); } .footer-areas a { transition: color var(--rm-dur-fast) var(--rm-ease); } .mobile-cta-bar { box-shadow: 0 -1px 0 rgba(255,255,255,.08), 0 -8px 28px rgba(11,16,23,.28); padding-bottom: env(safe-area-inset-bottom); } .mobile-cta-bar .cta-call { background: linear-gradient(180deg, var(--rm-red-bright), var(--rm-red)); } .mobile-cta-bar .cta-quote { background: var(--rm-ink); } /* ------------------------------------------------------------------ A7. Images — remove the flat Webflow look ------------------------------------------------------------------ */ .image-90, .image-94, .homeimg { border-radius: var(--rm-r-lg); box-shadow: var(--rm-sh-lg); } .image-90 { transition: transform var(--rm-dur-slow) var(--rm-ease), box-shadow var(--rm-dur-slow) var(--rm-ease); } .image-90:hover { transform: translateY(-4px); box-shadow: var(--rm-sh-xl); } /* Feature cards used across several template pages */ .div-block-45 { border-radius: var(--rm-r); transition: transform var(--rm-dur) var(--rm-ease), box-shadow var(--rm-dur) var(--rm-ease); } .div-block-45:hover { transform: translateY(-4px); box-shadow: var(--rm-sh-lg); } /* Blog / location cards already defined in custom.css — upgrade them */ .blog-card { border-color: var(--rm-line-soft); border-radius: var(--rm-r); background: var(--rm-white); transition: transform var(--rm-dur) var(--rm-ease), box-shadow var(--rm-dur) var(--rm-ease), border-color var(--rm-dur) var(--rm-ease); } .blog-card:hover { transform: translateY(-4px); box-shadow: var(--rm-sh-lg); border-color: rgba(200,16,46,.24); } .loc-cta { background: linear-gradient(160deg, var(--rm-bone), #fff); border: 1px solid var(--rm-line-soft); border-radius: var(--rm-r-lg); box-shadow: var(--rm-sh); } /* ================================================================== PART B — COMPONENT LIBRARY (.rm-*) Self-contained. Colors are always explicit so nothing inherits Webflow's base text color and disappears. ================================================================== */ .rm { font-family: var(--rm-sans); color: var(--rm-body); } .rm *, .rm *::before, .rm *::after { box-sizing: border-box; } /* ---- Layout ------------------------------------------------------ */ .rm-section { position: relative; padding: var(--rm-section) var(--rm-gutter); background: var(--rm-white); } .rm-section--bone { background: var(--rm-bone); } .rm-section--mist { background: var(--rm-mist); } .rm-section--ink { background: var(--rm-ink); } .rm-section--tight { padding-top: clamp(3rem, 1.5rem + 4vw, 5rem); } .rm-wrap { max-width: var(--rm-max); margin: 0 auto; } .rm-wrap--narrow { max-width: var(--rm-max-narrow); margin: 0 auto; } /* Hairline separators between stacked light sections */ .rm-section + .rm-section:not(.rm-section--ink)::before { content: ""; position: absolute; top: 0; left: var(--rm-gutter); right: var(--rm-gutter); height: 1px; background: var(--rm-line-soft); } .rm-section--bone + .rm-section--bone::before, .rm-section--ink + .rm-section::before { display: none; } /* ---- Typography -------------------------------------------------- */ .rm-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; font-size: var(--rm-t-eyebrow); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--rm-red); } .rm-eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; } .rm-eyebrow--center { justify-content: center; } .rm-display, .rm-h1 { font-size: var(--rm-t-h1); } .rm-display { font-size: var(--rm-t-display); } .rm-h2 { font-size: var(--rm-t-h2); } .rm-h3 { font-size: var(--rm-t-h3); } .rm-h4 { font-size: var(--rm-t-h4); } .rm-display, .rm-h1, .rm-h2, .rm-h3, .rm-h4 { margin: 0 0 .5em; font-family: var(--rm-sans); font-weight: 800; line-height: 1.04; letter-spacing: -.032em; color: var(--rm-ink); } .rm-h3, .rm-h4 { line-height: 1.2; letter-spacing: -.02em; font-weight: 700; } /* The one flourish: serif italic accent inside a headline. */ .rm-accent { font-family: var(--rm-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--rm-red); } .rm-lead { font-size: var(--rm-t-lead); line-height: 1.6; color: var(--rm-body); margin: 0 0 28px; max-width: 62ch; } .rm-p { font-size: var(--rm-t-body); line-height: 1.75; color: var(--rm-body); margin: 0 0 20px; max-width: 70ch; } .rm-p:last-child, .rm-lead:last-child { margin-bottom: 0; } .rm-p a, .rm-lead a, .rm-li a { color: var(--rm-red); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--rm-dur) var(--rm-ease); font-weight: 600; } .rm-p a:hover, .rm-lead a:hover, .rm-li a:hover { background-size: 100% 1.5px; } .rm-center { text-align: center; } .rm-center .rm-lead, .rm-center .rm-p { margin-left: auto; margin-right: auto; } .rm-head { max-width: 760px; margin: 0 0 clamp(2.5rem, 1.5rem + 2vw, 4rem); } .rm-head.rm-center { margin-left: auto; margin-right: auto; } /* Dark-section text */ .rm-section--ink .rm-display, .rm-section--ink .rm-h1, .rm-section--ink .rm-h2, .rm-section--ink .rm-h3, .rm-section--ink .rm-h4 { color: #fff; } .rm-section--ink .rm-lead, .rm-section--ink .rm-p { color: rgba(255,255,255,.72); } .rm-section--ink .rm-eyebrow { color: var(--rm-red-bright); } /* ---- Buttons ----------------------------------------------------- */ .rm-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 34px; border: 1px solid transparent; border-radius: 999px; font-family: var(--rm-sans); font-size: 14px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; line-height: 1; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; white-space: nowrap; transition: transform var(--rm-dur) var(--rm-ease), box-shadow var(--rm-dur) var(--rm-ease), background-color var(--rm-dur) var(--rm-ease), border-color var(--rm-dur) var(--rm-ease), color var(--rm-dur) var(--rm-ease); will-change: transform; } .rm-btn--primary { background-image: linear-gradient(180deg, var(--rm-red-bright), var(--rm-red)); color: #fff; box-shadow: var(--rm-sh-red); } .rm-btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.3) 48%, transparent 66%); transform: translateX(-110%); transition: transform .7s var(--rm-ease); } .rm-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(200,16,46,.28), 0 26px 56px rgba(200,16,46,.20); color: #fff; } .rm-btn--primary:hover::after { transform: translateX(110%); } .rm-btn--ghost { background: transparent; border-color: var(--rm-line); color: var(--rm-ink); } .rm-btn--ghost:hover { transform: translateY(-2px); border-color: var(--rm-ink); background: var(--rm-ink); color: #fff; box-shadow: var(--rm-sh); } .rm-btn--onink { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .rm-btn--onink:hover { transform: translateY(-2px); background: #fff; color: var(--rm-ink); border-color: #fff; } .rm-btn:active { transform: translateY(0) scale(.975); transition-duration: .08s; } .rm-btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .rm-center .rm-btn-row { justify-content: center; } /* The arrow glyph used on buttons, cards and links */ .rm-arrow { display: inline-flex; align-items: center; flex: 0 0 auto; } .rm-arrow svg { display: block; } .rm-btn .rm-arrow { transition: transform var(--rm-dur) var(--rm-ease); } .rm-btn:hover .rm-arrow { transform: translateX(4px); } /* Text link with an arrow that slides on hover */ .rm-link { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; letter-spacing: .03em; color: var(--rm-red); text-decoration: none; } .rm-link svg, .rm-link .rm-arrow { transition: transform var(--rm-dur) var(--rm-ease); } .rm-link:hover svg, .rm-link:hover .rm-arrow { transform: translateX(5px); } /* ---- Hero -------------------------------------------------------- */ .rm-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(560px, 82vh, 860px); padding: clamp(7rem, 5rem + 8vw, 11rem) var(--rm-gutter) clamp(3.5rem, 2rem + 4vw, 6rem); overflow: hidden; background: var(--rm-ink); isolation: isolate; } .rm-hero__media { position: absolute; inset: -4% 0 0; /* extra top room for the parallax shift */ z-index: -2; background-position: center 40%; background-size: cover; background-repeat: no-repeat; will-change: transform; } .rm-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,16,23,.72) 0%, rgba(11,16,23,.38) 34%, rgba(11,16,23,.86) 100%), linear-gradient(96deg, rgba(11,16,23,.70) 0%, rgba(11,16,23,.14) 62%); } .rm-hero__inner { max-width: var(--rm-max); margin: 0 auto; width: 100%; } .rm-hero__col { max-width: 1000px; } .rm-hero .rm-eyebrow { color: #fff; opacity: .85; } .rm-hero__kicker { margin: 0 0 14px; font-size: clamp(1rem, .92rem + .4vw, 1.2rem); font-weight: 600; letter-spacing: -.01em; color: rgba(255,255,255,.86); } .rm-hero h1 { margin: 0 0 22px; font-size: var(--rm-t-display); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.35); } .rm-hero h1 .rm-accent { color: #fff; opacity: .96; } .rm-hero__sub { max-width: 60ch; margin: 0 0 34px; font-size: var(--rm-t-lead); line-height: 1.6; color: rgba(255,255,255,.82); } .rm-hero__sub strong { color: #fff; font-weight: 700; } /* Reassurance line under the hero CTAs */ .rm-hero__note { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; padding: 0; list-style: none; } .rm-hero__note li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.78); } .rm-hero__note li::before { content: ""; width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; background: var(--rm-red); box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 0 0 3px rgba(200,16,46,.25); } /* Homepage hero art. Kept in CSS rather than an inline style so the smaller variant can be served to phones — this is the LCP image. */ .rm-hero--home .rm-hero__media { background-image: url('../images/mj-p-1600.jpg'); background-position: center 42%; } @media (max-width: 767px) { .rm-hero--home .rm-hero__media { background-image: url('../images/mj-p-800.jpg'); background-position: center 30%; } } @media (min-width: 1800px) { .rm-hero--home .rm-hero__media { background-image: url('../images/mj-p-2000.jpg'); } } /* This photo is bright and the subject sits centre-frame, so the headline side needs a heavier scrim than the default hero. */ .rm-hero--home .rm-hero__scrim { background: linear-gradient(180deg, rgba(11,16,23,.62) 0%, rgba(11,16,23,.30) 30%, rgba(11,16,23,.90) 100%), linear-gradient(94deg, rgba(11,16,23,.86) 0%, rgba(11,16,23,.55) 38%, rgba(11,16,23,.08) 74%); } /* ---- Mosaic gallery --------------------------------------------- An asymmetric bento so a set of similar photos reads as an edited composition rather than a row of thumbnails. */ /* Three columns, the first wider: two full-height panels beside a stacked pair. The client's photos are a mix of landscape and portrait, so the layout gives each orientation a slot that suits it rather than forcing everything through the same crop. */ .rm-mosaic { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: clamp(150px, 13vw, 218px); gap: clamp(.7rem, .4rem + .8vw, 1.1rem); } .rm-mosaic__tile { position: relative; overflow: hidden; border-radius: var(--rm-r); background: var(--rm-mist); box-shadow: var(--rm-sh); transition: box-shadow var(--rm-dur) var(--rm-ease), transform var(--rm-dur) var(--rm-ease); } .rm-mosaic__tile:hover { box-shadow: var(--rm-sh-lg); transform: translateY(-3px); } /* Both full-height panels simply span two rows; normal auto-placement then drops the remaining pair into the third column. */ .rm-mosaic__tile--tall, .rm-mosaic__tile--portrait { grid-row: span 2; } .rm-mosaic__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--rm-ease); will-change: transform; } .rm-mosaic__tile:hover img { transform: scale(1.06); } /* Captions stay visible — they carry real information, so hiding them behind hover would lose it entirely on touch devices. */ .rm-mosaic__cap { position: absolute; inset: auto 0 0 0; padding: 34px 18px 14px; background: linear-gradient(transparent, rgba(11,16,23,.72)); color: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: -.005em; line-height: 1.35; transition: transform var(--rm-dur) var(--rm-ease); } .rm-mosaic__cap span { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); } .rm-mosaic__tile:hover .rm-mosaic__cap { transform: translateY(-3px); } .rm-mosaic__tile--tall .rm-mosaic__cap { padding: 56px 24px 20px; font-size: 16px; } @media (max-width: 900px) { .rm-mosaic { grid-template-columns: 1fr 1fr; } .rm-mosaic__tile--tall { grid-column: span 2; grid-row: span 2; } .rm-mosaic__tile--portrait { grid-column: span 1; grid-row: span 2; } } @media (max-width: 560px) { .rm-mosaic { grid-template-columns: 1fr; grid-auto-rows: 210px; } .rm-mosaic__tile--tall { grid-column: span 1; grid-row: span 1; } /* The portrait shot keeps its extra height — squashing it into a landscape box is what made it crop badly in the first place. */ .rm-mosaic__tile--portrait { grid-column: span 1; grid-row: span 2; } .rm-mosaic__tile--tall .rm-mosaic__cap { font-size: 14px; padding: 44px 18px 16px; } } /* Scroll cue */ .rm-hero__cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.35); border-radius: 99px; z-index: 2; pointer-events: none; } .rm-hero__cue span { position: absolute; left: 50%; top: 8px; margin-left: -2px; width: 4px; height: 7px; border-radius: 2px; background: #fff; } @media (max-width: 767px) { .rm-hero__cue { display: none; } } /* ---- Trust / marquee strip --------------------------------------- */ .rm-strip { background: var(--rm-ink-2); border-block: 1px solid var(--rm-line-dark); padding: 20px var(--rm-gutter); overflow: hidden; } .rm-strip__track { display: flex; align-items: center; gap: 56px; width: max-content; will-change: transform; } .rm-strip__item { display: flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); white-space: nowrap; } .rm-strip__item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rm-red-bright); box-shadow: 0 0 0 4px rgba(232,32,63,.16); } /* ---- Stats ------------------------------------------------------- */ .rm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rm-line-soft); border: 1px solid var(--rm-line-soft); border-radius: var(--rm-r-lg); overflow: hidden; } .rm-stat { background: var(--rm-white); padding: clamp(1.75rem, 1rem + 2vw, 2.75rem) clamp(1.25rem, .75rem + 1vw, 2rem); text-align: center; transition: background-color var(--rm-dur) var(--rm-ease); } .rm-stat:hover { background: var(--rm-bone); } .rm-stat__num { display: block; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -.045em; color: var(--rm-ink); font-variant-numeric: tabular-nums; } .rm-stat__num i { font-style: normal; color: var(--rm-red); } .rm-stat__label { display: block; margin-top: 11px; font-size: 12.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--rm-muted); } .rm-section--ink .rm-stats { background: var(--rm-line-dark); border-color: var(--rm-line-dark); } .rm-section--ink .rm-stat { background: var(--rm-ink); } .rm-section--ink .rm-stat:hover { background: var(--rm-ink-2); } .rm-section--ink .rm-stat__num { color: #fff; } .rm-section--ink .rm-stat__label { color: rgba(255,255,255,.55); } @media (max-width: 860px) { .rm-stats { grid-template-columns: repeat(2, 1fr); } } /* ---- Card grid --------------------------------------------------- */ .rm-grid { display: grid; gap: clamp(1rem, .5rem + 1.2vw, 1.5rem); } .rm-grid--2 { grid-template-columns: repeat(2, 1fr); } .rm-grid--3 { grid-template-columns: repeat(3, 1fr); } .rm-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .rm-grid--4 { grid-template-columns: repeat(2, 1fr); } .rm-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .rm-grid--2, .rm-grid--3, .rm-grid--4 { grid-template-columns: 1fr; } } .rm-card { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 1rem + 1.4vw, 2.15rem); background: var(--rm-white); border: 1px solid var(--rm-line-soft); border-radius: var(--rm-r); text-decoration: none; overflow: hidden; isolation: isolate; transition: transform var(--rm-dur) var(--rm-ease), box-shadow var(--rm-dur) var(--rm-ease), border-color var(--rm-dur) var(--rm-ease); will-change: transform; } /* Red wash that wipes up from the bottom on hover */ .rm-card::before { content: ""; position: absolute; inset: auto 0 0 0; height: 100%; z-index: -1; background: linear-gradient(180deg, transparent, var(--rm-red-wash)); transform: translateY(100%); transition: transform var(--rm-dur-slow) var(--rm-ease); } .rm-card:hover { transform: translateY(-5px); box-shadow: var(--rm-sh-lg); border-color: rgba(200,16,46,.24); } .rm-card:hover::before { transform: translateY(0); } .rm-card__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 14px; background: linear-gradient(160deg, var(--rm-red), var(--rm-red-deep)); box-shadow: 0 6px 16px rgba(200,16,46,.24); transition: transform var(--rm-dur) var(--rm-ease); } .rm-card__icon svg { width: 25px; height: 25px; stroke: #fff; fill: none; stroke-width: 1.7; } .rm-card:hover .rm-card__icon { transform: scale(1.07) rotate(-4deg); } .rm-card__title { margin: 0 0 10px; font-size: 1.16rem; font-weight: 700; line-height: 1.28; letter-spacing: -.018em; color: var(--rm-ink); } .rm-card__text { margin: 0; font-size: 15px; line-height: 1.68; color: var(--rm-body); flex: 1 1 auto; } /* Small meta line above a card title (blog listing, related posts) */ .rm-card__date { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rm-muted); } .rm-card__more { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-red); } .rm-card__more .rm-arrow { transition: transform var(--rm-dur) var(--rm-ease); } .rm-card:hover .rm-card__more .rm-arrow { transform: translateX(5px); } /* Numbered process card */ .rm-step { position: relative; padding: clamp(1.5rem, 1rem + 1.4vw, 2.15rem); background: var(--rm-white); border: 1px solid var(--rm-line-soft); border-radius: var(--rm-r); overflow: hidden; } .rm-step__n { display: block; margin-bottom: 16px; font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.05em; color: var(--rm-red); opacity: .22; font-variant-numeric: tabular-nums; transition: opacity var(--rm-dur) var(--rm-ease), transform var(--rm-dur) var(--rm-ease); } .rm-step:hover .rm-step__n { opacity: .5; transform: translateY(-2px); } .rm-step__title { margin: 0 0 9px; font-size: 1.1rem; font-weight: 700; letter-spacing: -.015em; color: var(--rm-ink); } .rm-step__text { margin: 0; font-size: 14.5px; line-height: 1.66; color: var(--rm-body); } /* ---- Split (text + media) ---------------------------------------- */ .rm-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; } .rm-split--reverse .rm-split__media { order: -1; } @media (max-width: 900px) { .rm-split { grid-template-columns: 1fr; gap: 2.5rem; } .rm-split--reverse .rm-split__media { order: 0; } } .rm-split__media { position: relative; border-radius: var(--rm-r-lg); overflow: hidden; box-shadow: var(--rm-sh-xl); aspect-ratio: 4 / 3; background: var(--rm-mist); } .rm-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--rm-ease); will-change: transform; } .rm-split__media:hover img { transform: scale(1.045); } /* Floating stat badge over the image */ .rm-badge { position: absolute; left: 22px; bottom: 22px; padding: 16px 22px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: var(--rm-r); box-shadow: var(--rm-sh-lg); } .rm-badge strong { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--rm-ink); } .rm-badge span { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rm-muted); } /* ---- Checklist --------------------------------------------------- */ .rm-checks { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 13px; } .rm-checks--2 { grid-template-columns: 1fr 1fr; gap: 13px 30px; } @media (max-width: 620px) { .rm-checks--2 { grid-template-columns: 1fr; } } .rm-li { position: relative; display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.55; font-weight: 600; color: var(--rm-ink); } .rm-li::before { content: ""; flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--rm-red-wash); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: 12px; background-position: center; background-repeat: no-repeat; } .rm-li a { color: inherit; font-weight: 600; } .rm-li a:hover { color: var(--rm-red); } .rm-section--ink .rm-li { color: rgba(255,255,255,.88); } .rm-section--ink .rm-li::before { background-color: rgba(232,32,63,.18); } /* ---- Pills (area / tag links) ------------------------------------ */ .rm-pills { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; } .rm-pill { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; background: var(--rm-white); border: 1px solid var(--rm-line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--rm-ink); text-decoration: none; transition: transform var(--rm-dur) var(--rm-ease), border-color var(--rm-dur) var(--rm-ease), background-color var(--rm-dur) var(--rm-ease), color var(--rm-dur) var(--rm-ease), box-shadow var(--rm-dur) var(--rm-ease); } .rm-pill:hover { transform: translateY(-2px); background: var(--rm-red); border-color: var(--rm-red); color: #fff; box-shadow: var(--rm-sh-red); } .rm-section--ink .rm-pill { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.86); } .rm-section--ink .rm-pill:hover { background: #fff; color: var(--rm-ink); border-color: #fff; } /* ---- Quote / testimonial ----------------------------------------- */ .rm-quote { position: relative; padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); background: var(--rm-white); border: 1px solid var(--rm-line-soft); border-radius: var(--rm-r); transition: transform var(--rm-dur) var(--rm-ease), box-shadow var(--rm-dur) var(--rm-ease); } .rm-quote:hover { transform: translateY(-4px); box-shadow: var(--rm-sh-lg); } .rm-quote__stars { display: flex; gap: 3px; margin-bottom: 16px; color: var(--rm-red); } .rm-quote__stars svg { width: 17px; height: 17px; fill: currentColor; } .rm-quote__text { margin: 0 0 20px; font-size: 16px; line-height: 1.68; color: var(--rm-ink-3); } .rm-quote__who { display: flex; align-items: center; gap: 12px; } .rm-quote__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(160deg, var(--rm-ink-3), var(--rm-ink)); color: #fff; font-size: 14px; font-weight: 700; } .rm-quote__name { font-size: 14.5px; font-weight: 700; color: var(--rm-ink); line-height: 1.3; } .rm-quote__role { font-size: 12.5px; color: var(--rm-muted); line-height: 1.3; } /* ---- FAQ accordion ----------------------------------------------- */ .rm-faq { border-top: 1px solid var(--rm-line-soft); } .rm-faq__item { border-bottom: 1px solid var(--rm-line-soft); } .rm-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 24px 4px; background: none; border: 0; text-align: left; font-family: var(--rm-sans); font-size: clamp(1rem, .95rem + .3vw, 1.12rem); font-weight: 700; letter-spacing: -.012em; color: var(--rm-ink); cursor: pointer; transition: color var(--rm-dur-fast) var(--rm-ease); } .rm-faq__q:hover { color: var(--rm-red); } .rm-faq__icon { position: relative; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rm-line); transition: background-color var(--rm-dur) var(--rm-ease), border-color var(--rm-dur) var(--rm-ease); } .rm-faq__icon::before, .rm-faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--rm-ink); transition: transform var(--rm-dur) var(--rm-ease), background-color var(--rm-dur) var(--rm-ease); } .rm-faq__icon::after { transform: rotate(90deg); } .rm-faq__q:hover .rm-faq__icon { border-color: var(--rm-red); } .rm-faq__q[aria-expanded="true"] .rm-faq__icon { background: var(--rm-red); border-color: var(--rm-red); } .rm-faq__q[aria-expanded="true"] .rm-faq__icon::before, .rm-faq__q[aria-expanded="true"] .rm-faq__icon::after { background: #fff; } .rm-faq__q[aria-expanded="true"] .rm-faq__icon::after { transform: rotate(0deg); } /* Height is animated by JS; overflow hidden keeps it clipped. */ .rm-faq__a { overflow: hidden; height: 0; } .rm-faq__a-inner { padding: 0 4px 26px; } .rm-faq__a-inner p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.75; color: var(--rm-body); max-width: 74ch; } .rm-faq__a-inner p:last-child { margin-bottom: 0; } .rm-faq__a-inner a { color: var(--rm-red); font-weight: 600; text-decoration: none; } .rm-faq__a-inner a:hover { text-decoration: underline; } /* ---- CTA band ---------------------------------------------------- */ .rm-cta { position: relative; padding: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(1.5rem, 1rem + 3vw, 4.5rem); border-radius: var(--rm-r-xl); background: radial-gradient(120% 140% at 85% 0%, rgba(200,16,46,.42) 0%, transparent 58%), linear-gradient(150deg, var(--rm-ink-2), var(--rm-ink)); overflow: hidden; isolation: isolate; } .rm-cta::after { /* faint grid — texture without noise files */ content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(85% 85% at 50% 40%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(85% 85% at 50% 40%, #000 30%, transparent 100%); } .rm-cta__inner { max-width: 720px; } .rm-cta__inner.rm-center { max-width: 760px; margin: 0 auto; } .rm-cta h2 { color: #fff; margin-bottom: 16px; } .rm-cta p { color: rgba(255,255,255,.74); font-size: var(--rm-t-lead); line-height: 1.6; margin: 0 0 30px; } .rm-cta .rm-eyebrow { color: var(--rm-red-bright); } .rm-cta__phone { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; letter-spacing: -.03em; color: #fff; text-decoration: none; transition: color var(--rm-dur) var(--rm-ease); } .rm-cta__phone:hover { color: var(--rm-red-bright); } .rm-cta__phone svg { width: 22px; height: 22px; stroke: var(--rm-red-bright); fill: none; stroke-width: 1.9; flex: 0 0 auto; } /* ---- Forms ------------------------------------------------------- */ .rm-form { padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); background: var(--rm-white); border: 1px solid var(--rm-line-soft); border-radius: var(--rm-r-lg); box-shadow: var(--rm-sh-lg); } .rm-form__title { margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; letter-spacing: -.025em; color: var(--rm-ink); } .rm-form__sub { margin: 0 0 26px; font-size: 14.5px; line-height: 1.6; color: var(--rm-muted); } .rm-field { margin: 0 0 16px; } .rm-field--half { margin: 0; } .rm-fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 16px; } @media (max-width: 560px) { .rm-fields-2 { grid-template-columns: 1fr; } } .rm-label { display: block; margin: 0 0 7px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--rm-muted); } .rm-label .rm-req { color: var(--rm-red); } /* Scoped so these never leak onto Webflow's own inputs elsewhere. */ .rm-form .rm-input, .rm-form select.rm-input, .rm-form textarea.rm-input { display: block; width: 100%; padding: 14px 16px; font-family: var(--rm-sans); font-size: 15px; line-height: 1.4; color: var(--rm-ink); background: var(--rm-white); border: 1px solid var(--rm-line); border-radius: var(--rm-r-sm); box-shadow: inset 0 1px 2px rgba(11,16,23,.03); transition: border-color var(--rm-dur) var(--rm-ease), box-shadow var(--rm-dur) var(--rm-ease), transform var(--rm-dur) var(--rm-ease); -webkit-appearance: none; appearance: none; } .rm-form textarea.rm-input { min-height: 140px; resize: vertical; } .rm-form select.rm-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7688' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 17px; padding-right: 42px; } .rm-form .rm-input::placeholder { color: #9AA3B2; } .rm-form .rm-input:hover { border-color: rgba(11,16,23,.22); } .rm-form .rm-input:focus { border-color: var(--rm-red); box-shadow: 0 0 0 4px var(--rm-red-wash); outline: none; } /* Consent checkbox */ .rm-check { display: flex; align-items: flex-start; gap: 11px; margin: 20px 0 24px; font-size: 13.5px; line-height: 1.55; color: var(--rm-body); cursor: pointer; } .rm-check input { flex: 0 0 19px; width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--rm-red); cursor: pointer; } .rm-form .rm-btn { width: 100%; } /* Status banners */ .rm-alert { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 22px; padding: 16px 20px; border-radius: var(--rm-r-sm); border: 1px solid transparent; font-size: 14.5px; line-height: 1.55; font-weight: 600; } .rm-alert--ok { background: #ECF8F0; color: #14663A; border-color: #BFE5CD; } .rm-alert--bad { background: #FDF0F2; color: #96122A; border-color: #F5CBD3; } /* Contact detail rows */ .rm-contact-list { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 20px; } .rm-contact-item { display: flex; align-items: flex-start; gap: 15px; } .rm-contact-item__icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; background: var(--rm-red-wash); color: var(--rm-red); } .rm-contact-item__icon svg { width: 21px; height: 21px; } .rm-contact-item__label { font-size: 11.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--rm-muted); margin: 0 0 3px; } .rm-contact-item__value { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--rm-ink); text-decoration: none; margin: 0; } a.rm-contact-item__value:hover { color: var(--rm-red); } .rm-section--ink .rm-contact-item__icon { background: rgba(232,32,63,.16); color: var(--rm-red-bright); } .rm-section--ink .rm-contact-item__label { color: rgba(255,255,255,.5); } .rm-section--ink .rm-contact-item__value { color: #fff; } .rm-section--ink a.rm-contact-item__value:hover { color: var(--rm-red-bright); } /* ---- Breadcrumbs ------------------------------------------------- */ .rm-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; font-size: 13px; color: rgba(255,255,255,.6); } .rm-crumbs li { display: flex; align-items: center; gap: 8px; } .rm-crumbs li + li::before { content: "/"; opacity: .45; } .rm-crumbs a { color: inherit; text-decoration: none; transition: color var(--rm-dur-fast) var(--rm-ease); } .rm-crumbs a:hover { color: #fff; } .rm-crumbs [aria-current] { color: #fff; font-weight: 600; } .rm-crumbs--light { color: var(--rm-muted); } .rm-crumbs--light a:hover { color: var(--rm-red); } .rm-crumbs--light [aria-current] { color: var(--rm-ink); } /* ---- Page hero (inner pages) ------------------------------------- */ .rm-phero { position: relative; padding: clamp(8rem, 6rem + 7vw, 12rem) var(--rm-gutter) clamp(3.5rem, 2.5rem + 3vw, 5.5rem); background: var(--rm-ink); overflow: hidden; isolation: isolate; } .rm-phero__media { position: absolute; inset: 0; z-index: -2; background-position: center; background-size: cover; will-change: transform; } .rm-phero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,16,23,.78), rgba(11,16,23,.60) 50%, rgba(11,16,23,.90)), linear-gradient(100deg, rgba(11,16,23,.72), transparent 70%); } .rm-phero__inner { max-width: var(--rm-max); margin: 0 auto; } .rm-phero h1 { max-width: 20ch; margin: 0 0 18px; font-size: var(--rm-t-h1); font-weight: 800; line-height: 1.05; letter-spacing: -.034em; color: #fff; } .rm-phero__sub { max-width: 62ch; margin: 0 0 30px; font-size: var(--rm-t-lead); line-height: 1.6; color: rgba(255,255,255,.78); } /* Article byline row */ .rm-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.66); } .rm-post-meta span[aria-hidden] { opacity: .45; } /* Post heroes carry a long title, so they need less vertical padding. */ .rm-phero--post { padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); } .rm-phero--post h1 { max-width: 24ch; margin-bottom: 14px; } /* ---- Table of contents / jump links ------------------------------ */ .rm-toc { padding: 22px 26px; background: var(--rm-bone); border: 1px solid var(--rm-line-soft); border-radius: var(--rm-r); margin: 0 0 40px; } .rm-toc h2 { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rm-muted); } .rm-toc ol { margin: 0; padding: 0 0 0 20px; display: grid; gap: 7px; } .rm-toc li { font-size: 15px; color: var(--rm-body); } .rm-toc a { color: var(--rm-ink); text-decoration: none; font-weight: 600; } .rm-toc a:hover { color: var(--rm-red); text-decoration: underline; } /* ---- Prose (long-form SEO copy) ---------------------------------- */ .rm-prose h2 { margin: clamp(2.5rem, 2rem + 1.5vw, 3.5rem) 0 .6em; font-size: var(--rm-t-h2); font-weight: 800; line-height: 1.12; letter-spacing: -.028em; color: var(--rm-ink); scroll-margin-top: 140px; } .rm-prose h2:first-child { margin-top: 0; } .rm-prose h3 { margin: 2rem 0 .5em; font-size: var(--rm-t-h3); font-weight: 700; letter-spacing: -.02em; color: var(--rm-ink); } .rm-prose p { font-size: var(--rm-t-body); line-height: 1.78; color: var(--rm-body); margin: 0 0 20px; } .rm-prose ul { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 11px; } .rm-prose ul li { position: relative; padding-left: 26px; font-size: var(--rm-t-body); line-height: 1.7; color: var(--rm-body); } .rm-prose ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--rm-red); } .rm-prose ol { margin: 0 0 22px; padding-left: 22px; display: grid; gap: 11px; } .rm-prose ol li { font-size: var(--rm-t-body); line-height: 1.7; color: var(--rm-body); padding-left: 4px; } .rm-prose a { color: var(--rm-red); font-weight: 600; text-decoration: none; } .rm-prose a:hover { text-decoration: underline; } .rm-prose strong { color: var(--rm-ink); font-weight: 700; } .rm-prose table { width: 100%; border-collapse: collapse; margin: 0 0 26px; font-size: 15px; } .rm-prose th, .rm-prose td { padding: 13px 16px; border-bottom: 1px solid var(--rm-line-soft); text-align: left; color: var(--rm-body); } .rm-prose th { font-weight: 700; color: var(--rm-ink); background: var(--rm-bone); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; } .rm-table-scroll { overflow-x: auto; } /* Callout box */ .rm-note { padding: 22px 26px; margin: 0 0 26px; background: var(--rm-red-wash); border-left: 3px solid var(--rm-red); border-radius: 0 var(--rm-r-sm) var(--rm-r-sm) 0; } .rm-note p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--rm-ink-3); } .rm-note strong { color: var(--rm-ink); } /* ================================================================== PART C — MOTION SUPPORT Reveal elements start hidden ONLY when JS is available and motion is allowed. If JS fails, .rm-reveal never gets initialised and the :not(.rm-motion-ready) guard keeps everything visible. ================================================================== */ /* The pre-hide state is scoped with :not(.rm-revealed) so that the moment an element is revealed these rules stop matching entirely. That matters: if the hidden state stayed matched we would need a counter-rule to undo it, and that counter-rule would out-specify every :hover transform on cards and tiles. Letting the rule drop out hands the element cleanly back to the normal cascade. */ html.rm-motion-ready [data-reveal]:not(.rm-revealed) { opacity: 0; will-change: transform, opacity; } html.rm-motion-ready [data-reveal="up"]:not(.rm-revealed) { transform: translateY(26px); } html.rm-motion-ready [data-reveal="down"]:not(.rm-revealed) { transform: translateY(-22px); } html.rm-motion-ready [data-reveal="left"]:not(.rm-revealed) { transform: translateX(30px); } html.rm-motion-ready [data-reveal="right"]:not(.rm-revealed) { transform: translateX(-30px); } html.rm-motion-ready [data-reveal="scale"]:not(.rm-revealed) { transform: scale(.94); } html.rm-motion-ready [data-reveal="blur"]:not(.rm-revealed) { filter: blur(9px); transform: translateY(16px); } /* Once revealed, drop the will-change hint so we stop holding layers. */ [data-reveal].rm-revealed { will-change: auto; } /* Media wipe. Same contract as [data-reveal]: the hidden state exists only while html.rm-motion-ready is set, so the header failsafe (or a JS failure, or reduced motion) leaves the image plainly visible. The clip goes on the INNER , never on the observed [data-wipe] frame. An element clipped to zero height reports an empty intersection rectangle, so IntersectionObserver would never fire and the image would stay hidden forever. Clipping the child keeps the frame itself fully observable. */ html.rm-motion-ready [data-wipe] > img { clip-path: inset(0 0 100% 0); } html.rm-motion-ready [data-wipe].rm-wiped > img { clip-path: none; } @media (prefers-reduced-motion: reduce) { html.rm-motion-ready [data-reveal], html.rm-motion-ready [data-reveal]:not(.rm-revealed) { opacity: 1 !important; transform: none !important; filter: none !important; } .rm-progress { display: none; } .rm-strip__track { transform: none !important; } html.rm-motion-ready [data-wipe] > img { clip-path: none !important; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ================================================================== PART D — RESPONSIVE ================================================================== */ /* Below 480px the Webflow navbar switches from sticky to position:fixed, which lifts it out of flow — so hero content must reserve room for it or the first line renders behind the bar. */ @media screen and (max-width: 479px) { .rm-hero, .rm-phero { padding-top: calc(var(--rm-nav-h) + 2.25rem); } } @media (max-width: 767px) { .rm-hero { min-height: 0; align-items: flex-start; } .rm-hero__col { max-width: none; } .rm-btn, .button-2.w-button, .submit-button.w-button { padding: 16px 26px; font-size: 13px; } .rm-btn-row .rm-btn { flex: 1 1 100%; } .rm-cta { border-radius: var(--rm-r-lg); } .rm-badge { left: 14px; bottom: 14px; padding: 13px 17px; } /* Room for the sticky call bar */ .rm-section:last-of-type { padding-bottom: calc(var(--rm-section) + 20px); } } /* ================================================================== PART E — SITEWIDE FOOTER INDUSTRY STRIP ================================================================== */ .footer-industries { background: var(--rm-bone); border-top: 1px solid var(--rm-line-soft); padding: clamp(2.25rem, 1.5rem + 2vw, 3.25rem) var(--rm-gutter); } .footer-industries-inner { max-width: var(--rm-max); margin: 0 auto; } .footer-industries-title { margin: 0 0 18px; font-family: var(--rm-sans); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rm-muted); } .footer-industries-list .rm-pill { font-size: 13.5px; padding: 9px 17px; } .footer-industries-list .rm-pill strong { font-weight: 700; } /* Cursor-tracked highlight for [data-spotlight] cards. The --rm-mx / --rm-my custom properties are written by site-motion.js. */ [data-spotlight] { --rm-mx: 50%; --rm-my: 0%; } [data-spotlight]::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: radial-gradient(340px circle at var(--rm-mx) var(--rm-my), rgba(200,16,46,.10), transparent 62%); transition: opacity var(--rm-dur) var(--rm-ease); pointer-events: none; } [data-spotlight]:hover::after { opacity: 1; } /* Print — strip the decoration */ @media print { .rm-progress, .rm-hero__cue, .mobile-cta-bar, .navbar-2, .rm-strip { display: none !important; } .rm-section { padding: 1.5rem 0; } [data-reveal] { opacity: 1 !important; transform: none !important; } }