/* REALPRO_SERVICES_CLIENT_FINAL_V2_20260923 */ html body.rp-page-services main#main { overflow: clip; background: #f6f2ea; } html body.rp-page-services main#main > .rp-services-client-service { position: relative !important; margin: 0 !important; padding: clamp(78px, 8vw, 124px) 0 !important; } html body.rp-page-services .rp-services-client-service--light { background: #f6f2ea !important; color: #102330 !important; } html body.rp-page-services .rp-services-client-service--dark { background: radial-gradient( circle at 80% 20%, rgba(110,58,76,.18), transparent 34% ), linear-gradient( 135deg, #061521 0%, #0a1d2b 100% ) !important; color: #fff !important; } html body.rp-page-services .rp-services-client-service__grid { display: grid !important; grid-template-columns: minmax(0,.92fr) minmax(420px,1.08fr) !important; align-items: center !important; gap: clamp(48px,7vw,105px) !important; width: min(1280px,calc(100% - 80px)) !important; max-width: 1280px !important; margin: 0 auto !important; } html body.rp-page-services .rp-services-client-service--reverse .rp-services-client-service__copy { order: 2 !important; } html body.rp-page-services .rp-services-client-service--reverse .rp-services-client-service__media { order: 1 !important; } html body.rp-page-services .rp-services-client-service__copy .eyebrow { margin: 0 0 14px !important; color: #e63d4b !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .17em !important; text-transform: uppercase !important; } html body.rp-page-services .rp-services-client-service__copy h2 { max-width: 11ch !important; margin: 0 0 28px !important; font-size: clamp(42px,5vw,70px) !important; line-height: .96 !important; letter-spacing: -.05em !important; } html body.rp-page-services .rp-services-client-service--light .rp-services-client-service__copy h2 { color: #102330 !important; } html body.rp-page-services .rp-services-client-service--dark .rp-services-client-service__copy h2 { color: #fff !important; } html body.rp-page-services .rp-services-client-service__list { display: grid !important; width: 100% !important; max-width: 550px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; border-top: 1px solid rgba(16,35,48,.14) !important; } html body.rp-page-services .rp-services-client-service--dark .rp-services-client-service__list { border-top-color: rgba(255,255,255,.14) !important; } html body.rp-page-services .rp-services-client-service__list li { position: relative !important; margin: 0 !important; padding: 12px 0 12px 18px !important; border-bottom: 1px solid rgba(16,35,48,.11) !important; font-size: 15px !important; line-height: 1.45 !important; } html body.rp-page-services .rp-services-client-service--dark .rp-services-client-service__list li { color: rgba(255,255,255,.75) !important; border-bottom-color: rgba(255,255,255,.10) !important; } html body.rp-page-services .rp-services-client-service__list li::before { content: "" !important; position: absolute !important; left: 0 !important; top: 20px !important; width: 5px !important; height: 5px !important; border-radius: 50% !important; background: #e63d4b !important; } html body.rp-page-services .rp-services-client-service__action { margin-top: 30px !important; } html body.rp-page-services main#main a[data-rp-open-form="project"] { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 48px !important; padding: 0 24px !important; overflow: hidden !important; border: 1px solid #e63d4b !important; border-radius: 999px !important; background: #e63d4b !important; background-image: none !important; color: #fff !important; text-decoration: none !important; box-shadow: 0 12px 28px rgba(230,61,75,.20) !important; transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease !important; } html body.rp-page-services main#main a[data-rp-open-form="project"]::before, html body.rp-page-services main#main a[data-rp-open-form="project"]::after { content: none !important; display: none !important; } html body.rp-page-services main#main a[data-rp-open-form="project"]:hover { transform: translateY(-2px) !important; border-color: #cc3340 !important; background: #cc3340 !important; box-shadow: 0 16px 34px rgba(204,51,64,.25) !important; } html body.rp-page-services main#main a[data-rp-open-form="project"]:focus-visible { outline: 3px solid rgba(230,61,75,.35) !important; outline-offset: 3px !important; } html body.rp-page-services .rp-services-client-service__media { position: relative !important; width: 100% !important; aspect-ratio: 1.34 / 1 !important; margin: 0 !important; overflow: hidden !important; border-radius: 18px !important; background: #d9d7d2 !important; box-shadow: 0 25px 62px rgba(7,24,34,.15) !important; } html body.rp-page-services .rp-services-client-service--dark .rp-services-client-service__media { border: 1px solid rgba(255,255,255,.09) !important; box-shadow: 0 28px 66px rgba(0,0,0,.26) !important; } html body.rp-page-services .rp-services-client-service__media img { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center !important; opacity: 1 !important; transform: none !important; } html body.rp-page-services .rp-services-client-final { padding: clamp(76px,8vw,116px) 0 !important; background: #061521 !important; color: #fff !important; } html body.rp-page-services .rp-services-client-final__inner { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-items: end !important; gap: 48px !important; width: min(1180px,calc(100% - 80px)) !important; margin: 0 auto !important; } html body.rp-page-services .rp-services-client-final .eyebrow { color: #e63d4b !important; } html body.rp-page-services .rp-services-client-final h2 { max-width: 12ch !important; margin: 12px 0 17px !important; color: #fff !important; font-size: clamp(42px,5vw,68px) !important; line-height: .97 !important; letter-spacing: -.05em !important; } html body.rp-page-services .rp-services-client-final p:not(.eyebrow) { max-width: 56ch !important; margin: 0 !important; color: rgba(255,255,255,.65) !important; line-height: 1.65 !important; } @media (max-width:1024px) { html body.rp-page-services .rp-services-client-service__grid { grid-template-columns: minmax(0,1fr) minmax(340px,.9fr) !important; width: calc(100% - 52px) !important; gap: 38px !important; } } @media (max-width:760px) { html body.rp-page-services main#main > .rp-services-client-service { padding: 68px 0 !important; } html body.rp-page-services .rp-services-client-service__grid { grid-template-columns: 1fr !important; width: calc(100% - 32px) !important; gap: 32px !important; } html body.rp-page-services .rp-services-client-service__copy, html body.rp-page-services .rp-services-client-service--reverse .rp-services-client-service__copy { order: 1 !important; } html body.rp-page-services .rp-services-client-service__media, html body.rp-page-services .rp-services-client-service--reverse .rp-services-client-service__media { order: 2 !important; } html body.rp-page-services .rp-services-client-service__copy h2 { max-width: 11ch !important; font-size: clamp(38px,10.5vw,52px) !important; } html body.rp-page-services .rp-services-client-service__media { aspect-ratio: 1.1 / 1 !important; border-radius: 15px !important; } html body.rp-page-services .rp-services-client-final__inner { grid-template-columns: 1fr !important; align-items: start !important; width: calc(100% - 32px) !important; gap: 30px !important; } html body.rp-page-services .rp-services-client-final h2 { font-size: clamp(39px,10.5vw,52px) !important; } } @media (prefers-reduced-motion:reduce) { html body.rp-page-services main#main a[data-rp-open-form="project"] { transition: none !important; transform: none !important; } } /* REALPRO_SERVICES_PREMIUM_MEDIA_V3_START ======================================================================== REAL.PRO · SERVICES PREMIUM MEDIA SYSTEM Scope: /services/ only Goals: - one consistent media scale across all eight services - larger editorial visual presence - controlled crop regardless of original source ratio - sophisticated depth without decorative excess - stronger responsive behavior - preserve approved structure/content/form behavior ======================================================================== */ /* ------------------------------------------------------------------------ ANCHOR UX Legacy service URLs land directly on these sections. Give every target breathing room below the fixed header. ------------------------------------------------------------------------ */ html body.rp-page-services main#main > section.rp-services-client-service { scroll-margin-top: clamp( 92px, 8vw, 126px ) !important; padding: clamp( 92px, 8vw, 132px ) 0 !important; } /* ------------------------------------------------------------------------ LARGE EDITORIAL GRID Media receives intentionally more visual weight than copy. ------------------------------------------------------------------------ */ html body.rp-page-services .rp-services-client-service__grid { grid-template-columns: minmax(340px, .82fr) minmax(520px, 1.18fr) !important; align-items: center !important; gap: clamp( 54px, 6.5vw, 104px ) !important; width: min( 1360px, calc(100% - 80px) ) !important; max-width: 1360px !important; margin: 0 auto !important; } /* ------------------------------------------------------------------------ COPY RHYTHM Keep text visually compact beside a larger media surface. ------------------------------------------------------------------------ */ html body.rp-page-services .rp-services-client-service__copy { position: relative !important; z-index: 2 !important; width: 100% !important; max-width: 560px !important; } html body.rp-page-services .rp-services-client-service__copy h2 { margin-bottom: 30px !important; } html body.rp-page-services .rp-services-client-service__list { max-width: 520px !important; } html body.rp-page-services .rp-services-client-service__action { margin-top: 32px !important; } /* ------------------------------------------------------------------------ CANONICAL MEDIA FRAME Every service gets exactly the same visual height at a given viewport. ------------------------------------------------------------------------ */ html body.rp-page-services .rp-services-client-service__media { position: relative !important; isolation: isolate !important; display: block !important; width: 100% !important; height: clamp( 460px, 39vw, 600px ) !important; min-height: 460px !important; max-height: 600px !important; aspect-ratio: auto !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: 24px !important; background: #d9d7d2 !important; border: 1px solid rgba( 15, 35, 48, .09 ) !important; box-shadow: 0 34px 76px rgba( 8, 26, 38, .16 ) !important; transform: translate3d( 0, 0, 0 ) !important; transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1) !important; } /* subtle premium inner frame */ html body.rp-page-services .rp-services-client-service__media::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; border: 1px solid rgba( 255, 255, 255, .12 ) !important; border-radius: inherit !important; box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .025 ) !important; pointer-events: none !important; } /* dark sections receive a slightly deeper frame */ html body.rp-page-services .rp-services-client-service--dark .rp-services-client-service__media { border-color: rgba( 255, 255, 255, .11 ) !important; background: #081723 !important; box-shadow: 0 38px 84px rgba( 0, 0, 0, .28 ) !important; } /* ------------------------------------------------------------------------ IMAGE CROP AUTHORITY Original aspect ratios no longer control presentation. ------------------------------------------------------------------------ */ html body.rp-page-services .rp-services-client-service__media > img { position: absolute !important; inset: 0 !important; z-index: 1 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center center !important; opacity: 1 !important; transform: scale(1.001) !important; filter: none !important; transition: transform .7s cubic-bezier(.22,.61,.36,1) !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } /* Website screenshots are strongest when their top UI remains visible. */ html body.rp-page-services #website-experiences .rp-services-client-service__media > img { object-position: center top !important; } /* Real-estate imagery benefits from a centered architectural crop. */ html body.rp-page-services #real-estate-media .rp-services-client-service__media > img { object-position: center 52% !important; } /* ------------------------------------------------------------------------ DESKTOP MICRO-INTERACTION No aggressive zoom; just controlled depth. ------------------------------------------------------------------------ */ @media (hover:hover) and (pointer:fine) { html body.rp-page-services .rp-services-client-service__media:hover { transform: translate3d( 0, -5px, 0 ) !important; box-shadow: 0 42px 92px rgba( 8, 26, 38, .20 ) !important; } html body.rp-page-services .rp-services-client-service--dark .rp-services-client-service__media:hover { box-shadow: 0 44px 96px rgba( 0, 0, 0, .33 ) !important; } html body.rp-page-services .rp-services-client-service__media:hover > img { transform: scale( 1.018 ) !important; } } /* ------------------------------------------------------------------------ TABLET ------------------------------------------------------------------------ */ @media (max-width: 1100px) { html body.rp-page-services .rp-services-client-service__grid { grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr) !important; width: calc( 100% - 52px ) !important; gap: 42px !important; } html body.rp-page-services .rp-services-client-service__media { height: clamp( 420px, 46vw, 540px ) !important; min-height: 420px !important; max-height: 540px !important; border-radius: 21px !important; } } /* ------------------------------------------------------------------------ MOBILE / SMALL TABLET Text remains first for scanability; imagery stays large and immersive. ------------------------------------------------------------------------ */ @media (max-width: 760px) { html body.rp-page-services main#main > section.rp-services-client-service { scroll-margin-top: 88px !important; padding: 72px 0 78px !important; } html body.rp-page-services .rp-services-client-service__grid { grid-template-columns: 1fr !important; width: calc( 100% - 32px ) !important; gap: 36px !important; } html body.rp-page-services .rp-services-client-service__copy, html body.rp-page-services .rp-services-client-service--reverse .rp-services-client-service__copy { order: 1 !important; max-width: none !important; } html body.rp-page-services .rp-services-client-service__media, html body.rp-page-services .rp-services-client-service--reverse .rp-services-client-service__media { order: 2 !important; width: 100% !important; height: clamp( 360px, 108vw, 520px ) !important; min-height: 360px !important; max-height: 520px !important; border-radius: 18px !important; box-shadow: 0 24px 54px rgba( 8, 26, 38, .15 ) !important; } html body.rp-page-services .rp-services-client-service__list { max-width: none !important; } } /* ------------------------------------------------------------------------ SMALL MOBILE ------------------------------------------------------------------------ */ @media (max-width: 390px) { html body.rp-page-services .rp-services-client-service__media { height: 360px !important; min-height: 360px !important; } } /* ------------------------------------------------------------------------ REDUCED MOTION ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html body.rp-page-services .rp-services-client-service__media, html body.rp-page-services .rp-services-client-service__media > img { transition: none !important; transform: none !important; } } /* REALPRO_SERVICES_PREMIUM_MEDIA_V3_END */ /* REALPRO_SERVICES_MEDIA_UNIFORM_V4_START ======================================================================== REAL.PRO SERVICES · UNIFORM MEDIA SYSTEM V4 Brand Identity is the reference: - all desktop media = same visual column width - all media frames = exact 4:3 format - reverse sections mirror the TRACKS, not only element order - image sources never distort - mobile media also use one unified responsive format ======================================================================== */ /* ------------------------------------------------------------------------ DESKTOP GRID COPY = smaller track MEDIA = larger track Brand Identity: copy | MEDIA Reverse service: MEDIA | copy This guarantees that the media is ALWAYS on the large track. ------------------------------------------------------------------------ */ html body.rp-page-services main#main > section.rp-services-client-service:not( .rp-services-client-service--reverse ) .rp-services-client-service__grid { display: grid !important; grid-template-columns: minmax(340px, .82fr) minmax(520px, 1.18fr) !important; align-items: center !important; gap: clamp( 54px, 6.5vw, 104px ) !important; width: min( 1360px, calc(100% - 80px) ) !important; max-width: 1360px !important; margin: 0 auto !important; } html body.rp-page-services main#main > section.rp-services-client-service.rp-services-client-service--reverse .rp-services-client-service__grid { display: grid !important; grid-template-columns: minmax(520px, 1.18fr) minmax(340px, .82fr) !important; align-items: center !important; gap: clamp( 54px, 6.5vw, 104px ) !important; width: min( 1360px, calc(100% - 80px) ) !important; max-width: 1360px !important; margin: 0 auto !important; } /* Explicit column ownership. Removes any ambiguity from historical order/grid rules. */ html body.rp-page-services main#main > section.rp-services-client-service:not( .rp-services-client-service--reverse ) .rp-services-client-service__copy { grid-column: 1 !important; grid-row: 1 !important; order: initial !important; } html body.rp-page-services main#main > section.rp-services-client-service:not( .rp-services-client-service--reverse ) .rp-services-client-service__media { grid-column: 2 !important; grid-row: 1 !important; order: initial !important; } html body.rp-page-services main#main > section.rp-services-client-service.rp-services-client-service--reverse .rp-services-client-service__media { grid-column: 1 !important; grid-row: 1 !important; order: initial !important; } html body.rp-page-services main#main > section.rp-services-client-service.rp-services-client-service--reverse .rp-services-client-service__copy { grid-column: 2 !important; grid-row: 1 !important; order: initial !important; } /* ------------------------------------------------------------------------ CANONICAL FRAME EXACT SAME FORMAT AS THE BRAND IDENTITY SYSTEM ------------------------------------------------------------------------ */ html body.rp-page-services main#main > section.rp-services-client-service .rp-services-client-service__media { position: relative !important; isolation: isolate !important; justify-self: stretch !important; align-self: center !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 4 / 3 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: 24px !important; border: 1px solid rgba( 17, 35, 48, .10 ) !important; background: #d9d7d2 !important; box-shadow: 0 34px 76px rgba( 8, 26, 38, .16 ) !important; transform: none !important; } /* Same frame depth in dark sections */ html body.rp-page-services main#main > section.rp-services-client-service--dark .rp-services-client-service__media { border-color: rgba( 255, 255, 255, .10 ) !important; background: #081723 !important; box-shadow: 0 36px 80px rgba( 0, 0, 0, .28 ) !important; } /* ------------------------------------------------------------------------ IMAGE NORMALIZATION ALL source proportions render inside the same 4:3 frame. ------------------------------------------------------------------------ */ html body.rp-page-services main#main > section.rp-services-client-service .rp-services-client-service__media > img { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center center !important; transform: scale(1.001) !important; opacity: 1 !important; filter: none !important; } /* ------------------------------------------------------------------------ CONTROLLED CROPS Frame size NEVER changes. Only focal point changes when needed. ------------------------------------------------------------------------ */ html body.rp-page-services #brand-identity .rp-services-client-service__media > img { object-position: center center !important; } html body.rp-page-services #brand-services .rp-services-client-service__media > img { object-position: center center !important; } html body.rp-page-services #website-experiences .rp-services-client-service__media > img { object-position: center top !important; } html body.rp-page-services #cinematic-production .rp-services-client-service__media > img { object-position: center 42% !important; } html body.rp-page-services #brand-driven-imagery .rp-services-client-service__media > img { object-position: center center !important; } html body.rp-page-services #podcast-production .rp-services-client-service__media > img { object-position: center center !important; } html body.rp-page-services #photography .rp-services-client-service__media > img { object-position: center center !important; } html body.rp-page-services #real-estate-media .rp-services-client-service__media > img { object-position: center 54% !important; } /* ------------------------------------------------------------------------ PREMIUM INTERACTION Does not alter dimensions. ------------------------------------------------------------------------ */ @media (hover:hover) and (pointer:fine) { html body.rp-page-services main#main > section.rp-services-client-service .rp-services-client-service__media { transition: transform .35s ease, box-shadow .35s ease !important; } html body.rp-page-services main#main > section.rp-services-client-service .rp-services-client-service__media > img { transition: transform .6s cubic-bezier( .22, .61, .36, 1 ) !important; } html body.rp-page-services main#main > section.rp-services-client-service .rp-services-client-service__media:hover { transform: translateY( -4px ) !important; } html body.rp-page-services main#main > section.rp-services-client-service .rp-services-client-service__media:hover > img { transform: scale( 1.018 ) !important; } } /* ------------------------------------------------------------------------ TABLET Preserve mirrored large-media track. ------------------------------------------------------------------------ */ @media ( min-width: 761px ) and ( max-width: 1100px ) { html body.rp-page-services main#main > section.rp-services-client-service:not( .rp-services-client-service--reverse ) .rp-services-client-service__grid { grid-template-columns: minmax(280px, .88fr) minmax(390px, 1.12fr) !important; width: calc( 100% - 52px ) !important; gap: 40px !important; } html body.rp-page-services main#main > section.rp-services-client-service.rp-services-client-service--reverse .rp-services-client-service__grid { grid-template-columns: minmax(390px, 1.12fr) minmax(280px, .88fr) !important; width: calc( 100% - 52px ) !important; gap: 40px !important; } html body.rp-page-services main#main > section.rp-services-client-service .rp-services-client-service__media { aspect-ratio: 4 / 3 !important; width: 100% !important; height: auto !important; } } /* ------------------------------------------------------------------------ MOBILE Every service uses exactly the same full-width media frame. ------------------------------------------------------------------------ */ @media (max-width: 760px) { html body.rp-page-services main#main > section.rp-services-client-service .rp-services-client-service__grid { display: grid !important; grid-template-columns: minmax( 0, 1fr ) !important; width: calc( 100% - 32px ) !important; max-width: none !important; gap: 34px !important; } html body.rp-page-services main#main > section.rp-services-client-service .rp-services-client-service__copy, html body.rp-page-services main#main > section.rp-services-client-service.rp-services-client-service--reverse .rp-services-client-service__copy { grid-column: 1 !important; grid-row: 1 !important; order: initial !important; } html body.rp-page-services main#main > section.rp-services-client-service .rp-services-client-service__media, html body.rp-page-services main#main > section.rp-services-client-service.rp-services-client-service--reverse .rp-services-client-service__media { grid-column: 1 !important; grid-row: 2 !important; order: initial !important; justify-self: stretch !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 4 / 3 !important; border-radius: 18px !important; } } /* ------------------------------------------------------------------------ REDUCED MOTION ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html body.rp-page-services main#main > section.rp-services-client-service .rp-services-client-service__media, html body.rp-page-services main#main > section.rp-services-client-service .rp-services-client-service__media > img { transition: none !important; transform: none !important; } } /* REALPRO_SERVICES_MEDIA_UNIFORM_V4_END */ /* ========================================================= REALPRO_SERVICES_CANONICAL_R3_20260930 Canonical responsive authority. Goals: - consistent section geometry - no horizontal overflow - aligned CTAs - full client-image visibility - consistent media frames - phone / tablet / desktop parity ========================================================= */ /* ========================================================= ALL VIEWPORTS · MEDIA Keep one consistent frame and show the complete artwork. ========================================================= */ html body.rp-page-services .rp-services-client-service__media { position:relative!important; width:100%!important; max-width:100%!important; aspect-ratio:4 / 3!important; margin:0!important; overflow:hidden!important; box-sizing:border-box!important; } html body.rp-page-services .rp-services-client-service__media picture { position:absolute!important; inset:0!important; display:block!important; width:100%!important; height:100%!important; } html body.rp-page-services .rp-services-client-service__media img { position:absolute!important; inset:0!important; display:block!important; width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; margin:0!important; object-fit:contain!important; object-position:center center!important; transform:none!important; box-sizing:border-box!important; } html body.rp-page-services .rp-services-client-service--light .rp-services-client-service__media { background:#eef0f1!important; } html body.rp-page-services .rp-services-client-service--dark .rp-services-client-service__media { background:#071725!important; } /* ========================================================= ALL VIEWPORTS · CTA CONSISTENCY ========================================================= */ html body.rp-page-services .rp-services-client-service__action { width:100%!important; max-width:100%!important; } html body.rp-page-services .rp-services-client-service__action a[data-rp-open-form="project"] { justify-content:center!important; text-align:center!important; white-space:normal!important; box-sizing:border-box!important; } /* ========================================================= TABLET + MOBILE ========================================================= */ @media (max-width:1024px) { html body.rp-page-services { width:100%!important; max-width:100%!important; overflow-x:hidden!important; } html body.rp-page-services main#main { width:100%!important; max-width:100%!important; min-width:0!important; overflow-x:hidden!important; } html body.rp-page-services .rp-services-client-service { width:100%!important; max-width:100%!important; min-width:0!important; padding: clamp(58px,8vw,82px) 0!important; overflow:hidden!important; box-sizing:border-box!important; } html body.rp-page-services .rp-services-client-service__grid { display:grid!important; grid-template-columns: minmax(0,1fr)!important; width:min( 720px, calc(100% - 32px) )!important; max-width:720px!important; min-width:0!important; margin:0 auto!important; padding:0!important; gap: clamp(28px,5vw,40px)!important; align-items:start!important; box-sizing:border-box!important; } /* * Reverse desktop sections return to the same natural * mobile flow as every other section. */ html body.rp-page-services .rp-services-client-service__copy, html body.rp-page-services .rp-services-client-service--reverse .rp-services-client-service__copy { order:1!important; width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; box-sizing:border-box!important; } html body.rp-page-services .rp-services-client-service__media, html body.rp-page-services .rp-services-client-service--reverse .rp-services-client-service__media { order:2!important; width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; box-sizing:border-box!important; } html body.rp-page-services .rp-services-client-service__copy h2 { width:100%!important; max-width:none!important; margin: 0 0 clamp(20px,4vw,28px)!important; overflow-wrap:break-word!important; } html body.rp-page-services .rp-services-client-service__list { width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; padding:0!important; box-sizing:border-box!important; } html body.rp-page-services .rp-services-client-service__list li { width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; overflow-wrap:anywhere!important; } html body.rp-page-services .rp-services-client-service__action { display:block!important; width:100%!important; max-width:100%!important; margin-top: clamp(26px,4vw,34px)!important; box-sizing:border-box!important; } html body.rp-page-services .rp-services-client-service__action a[data-rp-open-form="project"] { display:flex!important; width:100%!important; max-width:100%!important; min-width:0!important; min-height:56px!important; margin:0!important; padding:14px 22px!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; } /* ------------------------------------------------------- Final Services CTA section ------------------------------------------------------- */ html body.rp-page-services .rp-services-client-final__inner { display:grid!important; grid-template-columns: minmax(0,1fr)!important; width:min( 720px, calc(100% - 32px) )!important; max-width:720px!important; margin:0 auto!important; gap:28px!important; align-items:start!important; box-sizing:border-box!important; } html body.rp-page-services .rp-services-client-final__inner a[data-rp-open-form="project"] { display:flex!important; width:100%!important; max-width:100%!important; justify-content:center!important; box-sizing:border-box!important; } } /* ========================================================= PHONE ========================================================= */ @media (max-width:600px) { html body.rp-page-services .rp-services-client-service { padding: 52px 0!important; } html body.rp-page-services .rp-services-client-service__grid, html body.rp-page-services .rp-services-client-final__inner { width: calc(100% - 24px)!important; max-width:none!important; } html body.rp-page-services .rp-services-client-service__copy h2 { font-size: clamp( 36px, 10.5vw, 48px )!important; line-height:.96!important; } html body.rp-page-services .rp-services-client-service__list li { font-size: clamp( 16px, 4.6vw, 20px )!important; line-height:1.35!important; } html body.rp-page-services .rp-services-client-service__action a[data-rp-open-form="project"] { min-height:54px!important; padding: 13px 18px!important; font-size: clamp( 14px, 4vw, 17px )!important; } } /* ========================================================= SMALL DESKTOP ========================================================= */ @media (min-width:1025px) and (max-width:1280px) { html body.rp-page-services .rp-services-client-service__grid { grid-template-columns: minmax(0,.95fr) minmax(320px,1.05fr)!important; width: min( 1180px, calc(100% - 48px) )!important; gap: clamp( 34px, 4vw, 54px )!important; } } /* ========================================================= REALPRO_SERVICES_CANONICAL_R5_FLEX_20260930 Final responsive architecture: responsive Services no longer uses CSS Grid. This deliberately eliminates every inherited desktop grid-column / grid-row placement. ========================================================= */ /* ========================================================= TABLET + MOBILE ========================================================= */ @media (max-width:1024px) { html body.rp-page-services, html body.rp-page-services main#main { width:100%!important; max-width:100%!important; min-width:0!important; overflow-x:hidden!important; } /* ------------------------------------------------------- SECTIONS ------------------------------------------------------- */ html body.rp-page-services section.rp-services-client-service { display:block!important; position:relative!important; width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; padding: clamp(54px,8vw,80px) 0!important; opacity:1!important; visibility:visible!important; transform:none!important; translate:none!important; content-visibility:visible!important; contain:none!important; overflow:hidden!important; box-sizing:border-box!important; } /* ------------------------------------------------------- MASTER RESPONSIVE FLOW IMPORTANT: GRID IS COMPLETELY DISABLED HERE. ------------------------------------------------------- */ html body.rp-page-services section.rp-services-client-service .rp-services-client-service__grid { display:flex!important; flex-direction:column!important; flex-wrap:nowrap!important; align-items:stretch!important; justify-content:flex-start!important; width:min( 720px, calc(100% - 32px) )!important; max-width:720px!important; min-width:0!important; margin:0 auto!important; padding:0!important; gap: clamp(28px,5vw,40px)!important; direction:ltr!important; transform:none!important; translate:none!important; box-sizing:border-box!important; } /* ------------------------------------------------------- COPY + MEDIA Destroy all previous grid positioning. ------------------------------------------------------- */ html body.rp-page-services section.rp-services-client-service .rp-services-client-service__copy, html body.rp-page-services section.rp-services-client-service .rp-services-client-service__media, html body.rp-page-services section.rp-services-client-service--reverse .rp-services-client-service__copy, html body.rp-page-services section.rp-services-client-service--reverse .rp-services-client-service__media { position:relative!important; left:auto!important; right:auto!important; top:auto!important; bottom:auto!important; inset:auto!important; float:none!important; flex: 0 0 auto!important; align-self:stretch!important; width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; padding-left:0!important; padding-right:0!important; grid-column:auto!important; grid-row:auto!important; transform:none!important; translate:none!important; opacity:1!important; visibility:visible!important; box-sizing:border-box!important; } /* Copy must always be above the image. */ html body.rp-page-services section.rp-services-client-service .rp-services-client-service__copy, html body.rp-page-services section.rp-services-client-service--reverse .rp-services-client-service__copy { order:1!important; } html body.rp-page-services section.rp-services-client-service .rp-services-client-service__media, html body.rp-page-services section.rp-services-client-service--reverse .rp-services-client-service__media { order:2!important; } /* ------------------------------------------------------- TITLES ------------------------------------------------------- */ html body.rp-page-services section.rp-services-client-service .rp-services-client-service__copy h2 { display:block!important; width:100%!important; max-width:100%!important; min-width:0!important; margin: 0 0 clamp(22px,4vw,30px)!important; padding:0!important; white-space:normal!important; overflow:visible!important; word-break:normal!important; overflow-wrap:break-word!important; box-sizing:border-box!important; } /* ------------------------------------------------------- LISTS ------------------------------------------------------- */ html body.rp-page-services section.rp-services-client-service .rp-services-client-service__list { display:block!important; width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; padding:0!important; box-sizing:border-box!important; } html body.rp-page-services section.rp-services-client-service .rp-services-client-service__list li { width:100%!important; max-width:100%!important; min-width:0!important; white-space:normal!important; overflow-wrap:anywhere!important; box-sizing:border-box!important; } /* ------------------------------------------------------- CTA ------------------------------------------------------- */ html body.rp-page-services section.rp-services-client-service .rp-services-client-service__action { display:block!important; position:relative!important; width:100%!important; max-width:100%!important; min-width:0!important; margin-top: clamp(28px,5vw,38px)!important; opacity:1!important; visibility:visible!important; transform:none!important; box-sizing:border-box!important; } html body.rp-page-services section.rp-services-client-service .rp-services-client-service__action a[data-rp-open-form="project"] { display:flex!important; width:100%!important; max-width:100%!important; min-width:0!important; min-height:56px!important; margin:0!important; padding: 14px 20px!important; align-items:center!important; justify-content:center!important; border:1px solid #e63d4b!important; border-radius:999px!important; background:#e63d4b!important; background-image:none!important; color:#fff!important; text-align:center!important; text-decoration:none!important; white-space:normal!important; opacity:1!important; visibility:visible!important; box-sizing:border-box!important; } /* ------------------------------------------------------- MEDIA Natural responsive element. No absolute positioning. ------------------------------------------------------- */ html body.rp-page-services section.rp-services-client-service .rp-services-client-service__media { display:block!important; height:auto!important; min-height:0!important; max-height:none!important; aspect-ratio:auto!important; padding:0!important; overflow:hidden!important; border-radius: clamp(18px,3vw,28px)!important; box-sizing:border-box!important; } html body.rp-page-services section.rp-services-client-service .rp-services-client-service__media picture { display:block!important; position:relative!important; inset:auto!important; width:100%!important; max-width:100%!important; height:auto!important; margin:0!important; padding:0!important; } html body.rp-page-services section.rp-services-client-service .rp-services-client-service__media img, html body.rp-page-services section.rp-services-client-service .rp-services-client-service__media img.image-cover { display:block!important; position:relative!important; inset:auto!important; width:100%!important; max-width:100%!important; min-width:0!important; height:auto!important; max-height:none!important; margin:0 auto!important; object-fit:contain!important; object-position:center center!important; transform:none!important; translate:none!important; opacity:1!important; visibility:visible!important; box-sizing:border-box!important; } } /* ========================================================= PHONE ========================================================= */ @media (max-width:600px) { html body.rp-page-services section.rp-services-client-service { padding: 46px 0!important; } html body.rp-page-services section.rp-services-client-service .rp-services-client-service__grid { width: calc(100% - 28px)!important; max-width:none!important; gap:26px!important; } html body.rp-page-services section.rp-services-client-service .rp-services-client-service__copy h2 { font-size: clamp( 32px, 9vw, 42px )!important; line-height:1!important; } html body.rp-page-services section.rp-services-client-service .rp-services-client-service__list li { font-size: clamp( 16px, 4.5vw, 20px )!important; line-height:1.4!important; } html body.rp-page-services section.rp-services-client-service .rp-services-client-service__action a[data-rp-open-form="project"] { min-height:54px!important; padding: 13px 16px!important; font-size: clamp( 14px, 4vw, 17px )!important; } } /* ========================================================= TABLET ========================================================= */ @media (min-width:601px) and (max-width:1024px) { html body.rp-page-services section.rp-services-client-service .rp-services-client-service__grid { width: min( 760px, calc(100% - 48px) )!important; } html body.rp-page-services section.rp-services-client-service .rp-services-client-service__copy h2 { font-size: clamp( 42px, 6vw, 58px )!important; line-height:.98!important; } } /* ========================================================== REALPRO_SERVICES_MOBILE_SPACING_V11 Refined mobile vertical rhythm for Services overview. Mobile only. No content / CTA / functionality changes. ========================================================== */ @media (max-width:760px){ /* ========================================== SERVICE BLOCK RHYTHM ========================================== */ html body.rp-page-services .rp-services-client-service{ padding-top:46px !important; padding-bottom:50px !important; scroll-margin-top:88px !important; } /* ========================================== COPY AREA ========================================== */ html body.rp-page-services .rp-services-client-service__copy{ width:100% !important; } html body.rp-page-services .rp-services-client-service__copy > h2{ margin-top:0 !important; margin-bottom:20px !important; line-height:1.02 !important; text-wrap:balance; } /* ========================================== SERVICE ITEMS ========================================== */ html body.rp-page-services .rp-services-client-service__list{ margin-top:0 !important; margin-bottom:28px !important; } html body.rp-page-services .rp-services-client-service__list > li{ min-height:50px !important; padding-top:13px !important; padding-bottom:13px !important; line-height:1.38 !important; display:flex !important; align-items:center !important; } /* ========================================== CTA SEPARATION ========================================== */ html body.rp-page-services .rp-services-client-service__action{ margin-top:4px !important; margin-bottom:0 !important; } html body.rp-page-services .rp-services-client-service__action .btn{ min-height:52px !important; padding-top:14px !important; padding-bottom:14px !important; display:flex !important; align-items:center !important; justify-content:center !important; line-height:1.15 !important; } /* ========================================== MEDIA SEPARATION ========================================== */ html body.rp-page-services .rp-services-client-service__media{ margin-top:28px !important; } /* prevent image from visually touching the following service section */ html body.rp-page-services .rp-services-client-service__media img{ display:block !important; } /* ========================================== LONG TITLES ========================================== */ html body.rp-page-services #website-experiences .rp-services-client-service__copy > h2, html body.rp-page-services #cinematic-production .rp-services-client-service__copy > h2, html body.rp-page-services #brand-driven-imagery .rp-services-client-service__copy > h2, html body.rp-page-services #podcast-production .rp-services-client-service__copy > h2, html body.rp-page-services #real-estate-media .rp-services-client-service__copy > h2{ margin-bottom:22px !important; } } /* ========================================================== COMPACT PHONES ========================================================== */ @media (max-width:390px){ html body.rp-page-services .rp-services-client-service{ padding-top:42px !important; padding-bottom:46px !important; } html body.rp-page-services .rp-services-client-service__copy > h2{ margin-bottom:18px !important; } html body.rp-page-services .rp-services-client-service__list{ margin-bottom:25px !important; } html body.rp-page-services .rp-services-client-service__list > li{ min-height:48px !important; padding-top:12px !important; padding-bottom:12px !important; line-height:1.4 !important; } html body.rp-page-services .rp-services-client-service__media{ margin-top:25px !important; } } /* ========================================================== REALPRO_SERVICES_MOBILE_SPACING_V12 Refined vertical spacing for Services mobile sections. Staging only. No CTA/functionality/content changes. ========================================================== */ @media (max-width: 760px){ html body.rp-page-services .rp-services-client-service{ padding-top: 52px !important; padding-bottom: 56px !important; } html body.rp-page-services .rp-services-client-service__copy > h2{ margin-bottom: 22px !important; } html body.rp-page-services .rp-services-client-service__list{ margin-bottom: 26px !important; } html body.rp-page-services .rp-services-client-service__list > li{ padding-top: 14px !important; padding-bottom: 14px !important; min-height: 52px !important; line-height: 1.4 !important; display: flex !important; align-items: center !important; } /* Espaço acima e abaixo do botão */ html body.rp-page-services .rp-services-client-service__action{ margin-top: 22px !important; margin-bottom: 30px !important; } html body.rp-page-services .rp-services-client-service__action .btn{ min-height: 56px !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1.12 !important; } /* Espaço da imagem dentro do bloco */ html body.rp-page-services .rp-services-client-service__media{ margin-top: 30px !important; margin-bottom: 8px !important; } html body.rp-page-services .rp-services-client-service__media img{ display: block !important; } } @media (max-width: 390px){ html body.rp-page-services .rp-services-client-service{ padding-top: 48px !important; padding-bottom: 52px !important; } html body.rp-page-services .rp-services-client-service__copy > h2{ margin-bottom: 20px !important; } html body.rp-page-services .rp-services-client-service__list{ margin-bottom: 24px !important; } html body.rp-page-services .rp-services-client-service__list > li{ padding-top: 13px !important; padding-bottom: 13px !important; min-height: 50px !important; } html body.rp-page-services .rp-services-client-service__action{ margin-top: 20px !important; margin-bottom: 28px !important; } html body.rp-page-services .rp-services-client-service__media{ margin-top: 28px !important; margin-bottom: 6px !important; } } /* ========================================================== REALPRO_SERVICES_MOBILE_SPACING_V13 Definitive mobile spacing: title → list → CTA → media → next service ========================================================== */ @media (max-width:760px){ /* ----------------------------------------- SERVICE OUTER BREATHING ROOM ----------------------------------------- */ html body .rp-services-client-service{ padding-top:64px !important; padding-bottom:64px !important; box-sizing:border-box !important; } /* ----------------------------------------- MOBILE STACK ----------------------------------------- */ html body .rp-services-client-service__grid{ row-gap:0 !important; column-gap:0 !important; } /* ----------------------------------------- COPY BLOCK Critical fix: this padding creates guaranteed separation before the separate media grid item. ----------------------------------------- */ html body .rp-services-client-service__copy{ padding-bottom:38px !important; box-sizing:border-box !important; } /* ----------------------------------------- TITLE ----------------------------------------- */ html body .rp-services-client-service__copy > h2{ margin-top:0 !important; margin-bottom:24px !important; line-height:1.02 !important; } /* ----------------------------------------- SERVICES LIST ----------------------------------------- */ html body .rp-services-client-service__list{ margin-top:0 !important; margin-bottom:24px !important; } html body .rp-services-client-service__list > li{ min-height:52px !important; padding-top:14px !important; padding-bottom:14px !important; line-height:1.4 !important; display:flex !important; align-items:center !important; } /* ----------------------------------------- CTA ----------------------------------------- */ html body .rp-services-client-service__action{ margin-top:22px !important; margin-bottom:0 !important; padding-bottom:0 !important; } html body .rp-services-client-service__action .btn{ min-height:56px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding-top:15px !important; padding-bottom:15px !important; line-height:1.12 !important; } /* ----------------------------------------- MEDIA Now receives space from COPY padding. ----------------------------------------- */ html body .rp-services-client-service__media{ margin-top:0 !important; margin-bottom:16px !important; } html body .rp-services-client-service__media img, html body .rp-services-client-service__media picture{ display:block !important; } /* ----------------------------------------- EXTRA SEPARATION BETWEEN SERVICES ----------------------------------------- */ html body .rp-services-client-service + .rp-services-client-service{ margin-top:0 !important; } } /* ========================================== SMALL PHONES ========================================== */ @media (max-width:390px){ html body .rp-services-client-service{ padding-top:56px !important; padding-bottom:58px !important; } html body .rp-services-client-service__copy{ padding-bottom:34px !important; } html body .rp-services-client-service__copy > h2{ margin-bottom:21px !important; } html body .rp-services-client-service__list{ margin-bottom:22px !important; } html body .rp-services-client-service__list > li{ min-height:50px !important; padding-top:13px !important; padding-bottom:13px !important; } html body .rp-services-client-service__action{ margin-top:20px !important; } html body .rp-services-client-service__media{ margin-top:0 !important; margin-bottom:14px !important; } } /* ========================================================== REALPRO_SERVICES_MOBILE_CANONICAL_V14 Canonical mobile geometry: COPY → CTA → GAP → MEDIA Neutralizes legacy grid/order conflicts. ========================================================== */ @media (max-width:760px){ /* ------------------------------------------ SECTION ------------------------------------------ */ html body.rp-page-services .rp-services-client-service{ padding-top:58px !important; padding-bottom:62px !important; overflow:visible !important; } /* ------------------------------------------ CANONICAL MOBILE STACK ------------------------------------------ */ html body.rp-page-services .rp-services-client-service__grid{ display:flex !important; flex-direction:column !important; grid-template-columns:none !important; grid-template-rows:none !important; gap:38px !important; row-gap:38px !important; column-gap:0 !important; width:100% !important; height:auto !important; align-items:stretch !important; overflow:visible !important; } /* ------------------------------------------ COPY ------------------------------------------ */ html body.rp-page-services .rp-services-client-service__copy{ display:block !important; order:1 !important; grid-column:auto !important; grid-row:auto !important; width:100% !important; max-width:none !important; height:auto !important; margin:0 !important; padding-bottom:0 !important; transform:none !important; } html body.rp-page-services .rp-services-client-service__copy > h2{ margin-top:0 !important; margin-bottom:24px !important; } /* ------------------------------------------ LIST ------------------------------------------ */ html body.rp-page-services .rp-services-client-service__list{ margin-top:0 !important; margin-bottom:28px !important; } html body.rp-page-services .rp-services-client-service__list > li{ min-height:52px !important; padding-top:14px !important; padding-bottom:14px !important; line-height:1.4 !important; } /* ------------------------------------------ CTA ------------------------------------------ */ html body.rp-page-services .rp-services-client-service__action{ display:block !important; position:relative !important; width:100% !important; margin:28px 0 0 !important; padding:0 !important; transform:none !important; } html body.rp-page-services .rp-services-client-service__action .btn{ width:100% !important; min-height:56px !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:0 !important; padding:15px 22px !important; transform:none !important; } /* ------------------------------------------ MEDIA Direct flex sibling of COPY. 38px gap above is now structural. ------------------------------------------ */ html body.rp-page-services .rp-services-client-service__media{ display:block !important; position:relative !important; order:2 !important; grid-column:auto !important; grid-row:auto !important; width:100% !important; max-width:none !important; height:auto !important; margin:0 !important; padding:0 !important; transform:none !important; overflow:hidden !important; } html body.rp-page-services .rp-services-client-service__media picture{ display:block !important; width:100% !important; height:auto !important; margin:0 !important; } html body.rp-page-services .rp-services-client-service__media img, html body.rp-page-services .rp-services-client-service__media img.image-cover{ position:relative !important; display:block !important; width:100% !important; height:auto !important; inset:auto !important; margin:0 !important; transform:none !important; } /* ------------------------------------------ REVERSE DESKTOP SECTIONS Still copy → media on mobile ------------------------------------------ */ html body.rp-page-services .rp-services-client-service--reverse .rp-services-client-service__copy{ order:1 !important; } html body.rp-page-services .rp-services-client-service--reverse .rp-services-client-service__media{ order:2 !important; } } /* ========================================== COMPACT PHONES ========================================== */ @media (max-width:390px){ html body.rp-page-services .rp-services-client-service{ padding-top:52px !important; padding-bottom:56px !important; } html body.rp-page-services .rp-services-client-service__grid{ gap:34px !important; row-gap:34px !important; } html body.rp-page-services .rp-services-client-service__list{ margin-bottom:25px !important; } html body.rp-page-services .rp-services-client-service__action{ margin-top:24px !important; } }