/* Polish overrides — loaded after the Webflow stylesheet (injected by scrape.mjs). Edit design tweaks HERE, not in wf/css/*, so they survive a re-scrape. Uses calc(var(--vh, 1vh) * N) to match the vh->calc rewrite applied to the Webflow CSS, so a mobile toolbar resize doesn't reflow these. */ /* AVIF: to-avif.mjs wraps each in to offer an AVIF , which makes the (not the ) the grid item. Webflow places grid children by grid-area keyed to the element, so placement must land on the : - #w-node grids: to-avif moves the #w-node id onto the (see that script). - .grid-11 mosaics: keyed by the img's .image-NN class (which also carries object-position + Webflow float/height, so it must stay on the ); the picture:has(> .image-NN) companion rules below place the instead. NOTE: picture{display:contents} (to keep the as the grid item) was tried and reverted: it works in Blink but NOT WebKit/Safari, which scrambles the grids. */ /* Block-level wrapper, so the inline doesn't add phantom descender space below each image (which otherwise shifts everything below it down). The inner keeps all its own styles, so this matches the bare- baseline. */ picture { display: block; } /* Grid-item images were blockified (no descender) as bare ; inside a the inline-block reintroduces a line-box descender that makes the cell taller. Block-ify the inner for grid children to match baseline. */ .w-layout-grid > picture > img { display: block; } @media (min-width: 992px) { /* Carrotmob location slider: taller frame at wide widths so `cover` crops less off the top/bottom, preserving the per-slide background-position composition. */ .carrotmob-slider { height: calc(var(--vh, 1vh) * 70); } /* Per-photo framing nudges at wide widths. Munich/Portland show a bit more of the lower (interesting) content; Chicago shows more of the top. */ .cm-munich { background-position: 50% 20%; } .cm-portland { background-position: 50% 35%; } .cm-chicago { background-position: 50% 70%; } /* Business-quotes slider (MoneyVoice / Lyft): more height + bottom buffer so a long quote clears the slide-indicator dots. (.cmob-only NYT slider keeps its own fixed height via higher specificity.) */ .slider---cmob-quotes { height: calc(var(--vh, 1vh) * 58); } .slider-div-for-quotes { height: calc(var(--vh, 1vh) * 58); padding-top: 56px; padding-bottom: 72px; } } /* Contact page (its has class "body"): on mobile the heading shrinks to 12px and the top spacing differs from the Speaking page. Match Speaking's 30px title and top spacing. Desktop already matches and is left untouched. */ body.body .heading { font-size: 30px; line-height: 30px; } @media (max-width: 991px) { body.body .heading { margin-top: 0; margin-bottom: 30px; } body.body .contact-form { padding-top: 115px; padding-bottom: 60px; } } /* ============================================================================ PHOTO MOSAICS — desktop rebuild (>=992px). The home-page collages were hand-sized for one screen shape, so they re-flowed and opened white gaps at other window shapes (no responsive logic). Here each photo is pinned to fixed cells of the 8-col x 4-row grid and cover-fills its cell (the same approach the mobile view uses). Result: gap-free at EVERY desktop window shape, no per-aspect tuning. Trade-off: photos crop to fill. Tablet/mobile keep the Webflow layout (handled separately below). ============================================================================ */ @media (min-width: 992px) { #carrotmob .grid-11 img, #the-spring .grid-11 img, #moneyvoice .grid-11 img, #climate .grid-11 img, #rc .grid-11 img, #community .grid-11 img { width: 100% !important; height: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; float: none !important; object-fit: cover !important; } /* The AVIF wrapper is the grid item; make it a plain block that fills its cell and clips, so the inner (width/height:100% + object-fit:cover above) cover-fills exactly as the bare did. */ #carrotmob .grid-11 picture, #the-spring .grid-11 picture, #moneyvoice .grid-11 picture, #climate .grid-11 picture, #rc .grid-11 picture, #community .grid-11 picture { display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; } /* Place each wrapped tile by its inner img's class (companion to the per-photo grid-area rules below, which stay on the for object-position). Bare tiles, where AVIF was not smaller, keep being placed by those rules. */ #carrotmob .grid-11 picture:has(> .image-21) { grid-area: 1/1/3/3 !important; } #carrotmob .grid-11 picture:has(> .image-23) { grid-area: 1/3/2/5 !important; } #carrotmob .grid-11 picture:has(> .image-33) { grid-area: 2/3/3/4 !important; } #carrotmob .grid-11 picture:has(> .image-34) { grid-area: 2/4/3/5 !important; } #carrotmob .grid-11 picture:has(> .image-24) { grid-area: 1/5/2/7 !important; } #carrotmob .grid-11 picture:has(> .image-28) { grid-area: 2/5/3/7 !important; } #carrotmob .grid-11 picture:has(> .image-31) { grid-area: 1/7/2/9 !important; } #carrotmob .grid-11 picture:has(> .image-35) { grid-area: 2/7/3/8 !important; } #carrotmob .grid-11 picture:has(> .image-36) { grid-area: 2/8/3/9 !important; } #carrotmob .grid-11 picture:has(> .image-25) { grid-area: 3/1/5/3 !important; } #carrotmob .grid-11 picture:has(> .image-27) { grid-area: 3/3/5/4 !important; } #carrotmob .grid-11 picture:has(> .image-37) { grid-area: 3/4/4/5 !important; } #carrotmob .grid-11 picture:has(> .image-29) { grid-area: 3/5/4/6 !important; } #carrotmob .grid-11 picture:has(> .image-38) { grid-area: 3/6/4/7 !important; } #carrotmob .grid-11 picture:has(> .image-26) { grid-area: 3/7/5/9 !important; } #carrotmob .grid-11 picture:has(> .image-30) { grid-area: 4/4/5/5 !important; } #carrotmob .grid-11 picture:has(> .image-32) { grid-area: 4/5/5/6 !important; } #carrotmob .grid-11 picture:has(> .image-39) { grid-area: 4/6/5/7 !important; } #the-spring .grid-11 picture:has(> .image-21) { grid-area: 1/1/3/3 !important; } #the-spring .grid-11 picture:has(> .image-23) { grid-area: 1/3/3/4 !important; } #the-spring .grid-11 picture:has(> .image-48) { grid-area: 1/4/2/6 !important; } #the-spring .grid-11 picture:has(> .image-51) { grid-area: 2/4/3/5 !important; } #the-spring .grid-11 picture:has(> .image-40) { grid-area: 2/5/3/6 !important; } #the-spring .grid-11 picture:has(> .image-52) { grid-area: 1/6/2/7 !important; } #the-spring .grid-11 picture:has(> .image-44) { grid-area: 2/6/3/7 !important; } #the-spring .grid-11 picture:has(> .image-49) { grid-area: 1/7/2/9 !important; } #the-spring .grid-11 picture:has(> .image-123) { grid-area: 2/7/3/9 !important; } #the-spring .grid-11 picture:has(> .image-43) { grid-area: 3/1/5/2 !important; } #the-spring .grid-11 picture:has(> .image-53) { grid-area: 3/2/4/3 !important; } #the-spring .grid-11 picture:has(> .image-46) { grid-area: 4/2/5/3 !important; } #the-spring .grid-11 picture:has(> .image-50) { grid-area: 3/3/4/5 !important; } #the-spring .grid-11 picture:has(> .image-47) { grid-area: 4/3/5/4 !important; } #the-spring .grid-11 picture:has(> .image-45) { grid-area: 4/4/5/5 !important; } #the-spring .grid-11 picture:has(> .image-42) { grid-area: 3/5/5/7 !important; } #the-spring .grid-11 picture:has(> .image-54) { grid-area: 3/7/4/9 !important; } #the-spring .grid-11 picture:has(> .image-41) { grid-area: 4/7/5/9 !important; } #moneyvoice .grid-11 picture:has(> .image-21) { grid-area: 1/1/3/3 !important; } #moneyvoice .grid-11 picture:has(> .image-66) { grid-area: 1/3/2/5 !important; } #moneyvoice .grid-11 picture:has(> .image-64) { grid-area: 2/3/3/4 !important; } #moneyvoice .grid-11 picture:has(> .image-63) { grid-area: 2/4/3/5 !important; } #moneyvoice .grid-11 picture:has(> .image-23) { grid-area: 1/5/3/6 !important; } #moneyvoice .grid-11 picture:has(> .image-59) { grid-area: 1/6/2/7 !important; } #moneyvoice .grid-11 picture:has(> .image-68) { grid-area: 2/6/3/7 !important; } #moneyvoice .grid-11 picture:has(> .image-124) { grid-area: 1/7/2/9 !important; } #moneyvoice .grid-11 picture:has(> .image-56) { grid-area: 2/7/3/9 !important; } #moneyvoice .grid-11 picture:has(> .image-60) { grid-area: 3/1/5/2 !important; } #moneyvoice .grid-11 picture:has(> .image-65) { grid-area: 3/2/4/3 !important; } #moneyvoice .grid-11 picture:has(> .image-57) { grid-area: 4/2/5/3 !important; } #moneyvoice .grid-11 picture:has(> .image-58) { grid-area: 3/3/4/5 !important; } #moneyvoice .grid-11 picture:has(> .image-62) { grid-area: 3/5/4/6 !important; } #moneyvoice .grid-11 picture:has(> .image-69) { grid-area: 3/6/4/7 !important; } #moneyvoice .grid-11 picture:has(> .image-67) { grid-area: 4/3/5/4 !important; } #moneyvoice .grid-11 picture:has(> .image-55) { grid-area: 4/4/5/7 !important; } #moneyvoice .grid-11 picture:has(> .image-61) { grid-area: 3/7/5/9 !important; } #climate .grid-11 picture:has(> .image-21) { grid-area: 1/1/3/3 !important; } #climate .grid-11 picture:has(> .image-23) { grid-area: 1/3/3/4 !important; } #climate .grid-11 picture:has(> .image-80) { grid-area: 1/4/2/5 !important; } #climate .grid-11 picture:has(> .image-82) { grid-area: 2/4/3/5 !important; } #climate .grid-11 picture:has(> .image-76) { grid-area: 1/5/3/6 !important; } #climate .grid-11 picture:has(> .image-81) { grid-area: 1/6/2/7 !important; } #climate .grid-11 picture:has(> .image-73) { grid-area: 2/6/3/7 !important; } #climate .grid-11 picture:has(> .image-72) { grid-area: 1/7/2/9 !important; } #climate .grid-11 picture:has(> .image-79) { grid-area: 2/7/3/9 !important; } #climate .grid-11 picture:has(> .image-78) { grid-area: 3/1/5/2 !important; } #climate .grid-11 picture:has(> .image-83) { grid-area: 3/2/4/3 !important; } #climate .grid-11 picture:has(> .image-74) { grid-area: 4/2/5/3 !important; } #climate .grid-11 picture:has(> .image-75) { grid-area: 3/3/4/5 !important; } #climate .grid-11 picture:has(> .image-71) { grid-area: 4/3/5/4 !important; } #climate .grid-11 picture:has(> .image-77) { grid-area: 4/4/5/5 !important; } #climate .grid-11 picture:has(> .image-70) { grid-area: 3/5/5/7 !important; } #climate .grid-11 picture:has(> .image-84) { grid-area: 3/7/5/8 !important; } #climate .grid-11 picture:has(> .image-122) { grid-area: 3/8/5/9 !important; } #rc .grid-11 picture:has(> .image-21) { grid-area: 1/1/3/3 !important; } #rc .grid-11 picture:has(> .image-23) { grid-area: 1/3/3/4 !important; } #rc .grid-11 picture:has(> .image-93) { grid-area: 1/4/2/5 !important; } #rc .grid-11 picture:has(> .image-95) { grid-area: 2/4/3/5 !important; } #rc .grid-11 picture:has(> .image-91) { grid-area: 1/5/3/6 !important; } #rc .grid-11 picture:has(> .image-86) { grid-area: 1/6/2/8 !important; } #rc .grid-11 picture:has(> .image-94) { grid-area: 1/8/2/9 !important; } #rc .grid-11 picture:has(> .image-87) { grid-area: 2/6/3/8 !important; } #rc .grid-11 picture:has(> .image-98) { grid-area: 2/8/3/9 !important; } #rc .grid-11 picture:has(> .image-90) { grid-area: 3/1/5/2 !important; } #rc .grid-11 picture:has(> .image-99) { grid-area: 3/2/4/3 !important; } #rc .grid-11 picture:has(> .image-88) { grid-area: 4/2/5/3 !important; } #rc .grid-11 picture:has(> .image-89) { grid-area: 3/3/4/5 !important; } #rc .grid-11 picture:has(> .image-100) { grid-area: 4/3/5/5 !important; } #rc .grid-11 picture:has(> .image-85) { grid-area: 3/5/5/7 !important; } #rc .grid-11 picture:has(> .image-92) { grid-area: 3/7/5/8 !important; } #rc .grid-11 picture:has(> .image-97) { grid-area: 3/8/4/9 !important; } #rc .grid-11 picture:has(> .image-96) { grid-area: 4/8/5/9 !important; } #community .grid-11 picture:has(> .image-21) { grid-area: 1/1/3/3 !important; } #community .grid-11 picture:has(> .image-23) { grid-area: 1/3/3/4 !important; } #community .grid-11 picture:has(> .image-109) { grid-area: 1/4/2/5 !important; } #community .grid-11 picture:has(> .image-111) { grid-area: 2/4/3/5 !important; } #community .grid-11 picture:has(> .image-103) { grid-area: 1/5/3/6 !important; } #community .grid-11 picture:has(> .image-102) { grid-area: 1/6/2/8 !important; } #community .grid-11 picture:has(> .image-114) { grid-area: 1/8/2/9 !important; } #community .grid-11 picture:has(> .image-106) { grid-area: 2/6/3/8 !important; } #community .grid-11 picture:has(> .image-115) { grid-area: 2/8/3/9 !important; } #community .grid-11 picture:has(> .image-105) { grid-area: 3/1/5/2 !important; } #community .grid-11 picture:has(> .image-116) { grid-area: 3/2/4/3 !important; } #community .grid-11 picture:has(> .image-108) { grid-area: 4/2/5/3 !important; } #community .grid-11 picture:has(> .image-107) { grid-area: 3/3/4/5 !important; } #community .grid-11 picture:has(> .image-112) { grid-area: 4/3/5/5 !important; } #community .grid-11 picture:has(> .image-101) { grid-area: 3/5/5/7 !important; } #community .grid-11 picture:has(> .image-104) { grid-area: 3/7/5/8 !important; } #community .grid-11 picture:has(> .image-110) { grid-area: 3/8/4/9 !important; } #community .grid-11 picture:has(> .image-113) { grid-area: 4/8/5/9 !important; } /* Carrotmob */ #carrotmob .image-21 { grid-area: 1/1/3/3 !important; object-position: 50% 40% !important; } #carrotmob .image-23 { grid-area: 1/3/2/5 !important; object-position: 50% 50% !important; } #carrotmob .image-33 { grid-area: 2/3/3/4 !important; object-position: 50% 50% !important; } #carrotmob .image-34 { grid-area: 2/4/3/5 !important; object-position: 50% 40% !important; } #carrotmob .image-24 { grid-area: 1/5/2/7 !important; object-position: 50% 50% !important; } #carrotmob .image-28 { grid-area: 2/5/3/7 !important; object-position: 50% 50% !important; } #carrotmob .image-31 { grid-area: 1/7/2/9 !important; object-position: 0% 20% !important; } #carrotmob .image-35 { grid-area: 2/7/3/8 !important; object-position: 50% 40% !important; } #carrotmob .image-36 { grid-area: 2/8/3/9 !important; object-position: 50% 40% !important; } #carrotmob .image-25 { grid-area: 3/1/5/3 !important; object-position: 0% 0% !important; } #carrotmob .image-27 { grid-area: 3/3/5/4 !important; object-position: 50% 0% !important; } #carrotmob .image-37 { grid-area: 3/4/4/5 !important; object-position: 50% 35% !important; } #carrotmob .image-29 { grid-area: 3/5/4/6 !important; object-position: 50% 40% !important; } #carrotmob .image-38 { grid-area: 3/6/4/7 !important; object-position: 50% 50% !important; } #carrotmob .image-26 { grid-area: 3/7/5/9 !important; object-position: 42% 38% !important; } #carrotmob .image-30 { grid-area: 4/4/5/5 !important; object-position: 50% 50% !important; } #carrotmob .image-32 { grid-area: 4/5/5/6 !important; object-position: 50% 40% !important; } #carrotmob .image-39 { grid-area: 4/6/5/7 !important; object-position: 50% 40% !important; } /* The Spring */ #the-spring .image-21 { grid-area: 1/1/3/3 !important; object-position: 50% 30% !important; } #the-spring .image-23 { grid-area: 1/3/3/4 !important; object-position: 50% 0% !important; } #the-spring .image-48 { grid-area: 1/4/2/6 !important; object-position: 50% 50% !important; } #the-spring .image-51 { grid-area: 2/4/3/5 !important; object-position: 50% 50% !important; } #the-spring .image-40 { grid-area: 2/5/3/6 !important; object-position: 50% 0% !important; } #the-spring .image-52 { grid-area: 1/6/2/7 !important; object-position: 50% 50% !important; } #the-spring .image-44 { grid-area: 2/6/3/7 !important; object-position: 50% 0% !important; } #the-spring .image-49 { grid-area: 1/7/2/9 !important; object-position: 50% 50% !important; } #the-spring .image-123 { grid-area: 2/7/3/9 !important; object-position: 50% 50% !important; } #the-spring .image-43 { grid-area: 3/1/5/2 !important; object-position: 50% 0% !important; } #the-spring .image-53 { grid-area: 3/2/4/3 !important; object-position: 50% 50% !important; } #the-spring .image-46 { grid-area: 4/2/5/3 !important; object-position: 50% 50% !important; } #the-spring .image-50 { grid-area: 3/3/4/5 !important; object-position: 50% 35% !important; } #the-spring .image-47 { grid-area: 4/3/5/4 !important; object-position: 50% 40% !important; } #the-spring .image-45 { grid-area: 4/4/5/5 !important; object-position: 50% 35% !important; } #the-spring .image-42 { grid-area: 3/5/5/7 !important; object-position: 50% 18% !important; } #the-spring .image-54 { grid-area: 3/7/4/9 !important; object-position: 50% 50% !important; } #the-spring .image-41 { grid-area: 4/7/5/9 !important; object-position: 0% 0% !important; } /* MoneyVoice */ #moneyvoice .image-21 { grid-area: 1/1/3/3 !important; object-position: 50% 50% !important; } #moneyvoice .image-66 { grid-area: 1/3/2/5 !important; object-position: 50% 35% !important; } #moneyvoice .image-64 { grid-area: 2/3/3/4 !important; object-position: 50% 40% !important; } #moneyvoice .image-63 { grid-area: 2/4/3/5 !important; object-position: 50% 35% !important; } #moneyvoice .image-23 { grid-area: 1/5/3/6 !important; object-position: 50% 30% !important; } #moneyvoice .image-59 { grid-area: 1/6/2/7 !important; object-position: 50% 50% !important; } #moneyvoice .image-68 { grid-area: 2/6/3/7 !important; object-position: 50% 40% !important; } #moneyvoice .image-124 { grid-area: 1/7/2/9 !important; object-position: 50% 35% !important; } #moneyvoice .image-56 { grid-area: 2/7/3/9 !important; object-position: 50% 50% !important; } #moneyvoice .image-60 { grid-area: 3/1/5/2 !important; object-position: 50% 0% !important; } #moneyvoice .image-65 { grid-area: 3/2/4/3 !important; object-position: 50% 35% !important; } #moneyvoice .image-57 { grid-area: 4/2/5/3 !important; object-position: 50% 50% !important; } #moneyvoice .image-58 { grid-area: 3/3/4/5 !important; object-position: 50% 35% !important; } #moneyvoice .image-62 { grid-area: 3/5/4/6 !important; object-position: 50% 35% !important; } #moneyvoice .image-69 { grid-area: 3/6/4/7 !important; object-position: 50% 40% !important; } #moneyvoice .image-67 { grid-area: 4/3/5/4 !important; object-position: 50% 30% !important; } #moneyvoice .image-55 { grid-area: 4/4/5/7 !important; object-position: 50% 0% !important; } #moneyvoice .image-61 { grid-area: 3/7/5/9 !important; object-position: 50% 0% !important; } /* Climate */ #climate .image-21 { grid-area: 1/1/3/3 !important; object-position: 50% 35% !important; } #climate .image-23 { grid-area: 1/3/3/4 !important; object-position: 50% 0% !important; } #climate .image-80 { grid-area: 1/4/2/5 !important; object-position: 50% 30% !important; } #climate .image-82 { grid-area: 2/4/3/5 !important; object-position: 50% 35% !important; } #climate .image-76 { grid-area: 1/5/3/6 !important; object-position: 50% 30% !important; } #climate .image-81 { grid-area: 1/6/2/7 !important; object-position: 50% 50% !important; } #climate .image-73 { grid-area: 2/6/3/7 !important; object-position: 50% 40% !important; } #climate .image-72 { grid-area: 1/7/2/9 !important; object-position: 50% 50% !important; } #climate .image-79 { grid-area: 2/7/3/9 !important; object-position: 50% 35% !important; } #climate .image-78 { grid-area: 3/1/5/2 !important; object-position: 50% 35% !important; } #climate .image-83 { grid-area: 3/2/4/3 !important; object-position: 50% 30% !important; } #climate .image-74 { grid-area: 4/2/5/3 !important; object-position: 50% 35% !important; } #climate .image-75 { grid-area: 3/3/4/5 !important; object-position: 50% 40% !important; } #climate .image-71 { grid-area: 4/3/5/4 !important; object-position: 50% 40% !important; } #climate .image-77 { grid-area: 4/4/5/5 !important; object-position: 50% 35% !important; } #climate .image-70 { grid-area: 3/5/5/7 !important; object-position: 50% 40% !important; } #climate .image-84 { grid-area: 3/7/5/8 !important; object-position: 50% 30% !important; } #climate .image-122 { grid-area: 3/8/5/9 !important; object-position: 50% 50% !important; } /* Rhyme Combinator */ #rc .image-21 { grid-area: 1/1/3/3 !important; object-position: 50% 0% !important; } #rc .image-23 { grid-area: 1/3/3/4 !important; object-position: 50% 30% !important; } #rc .image-93 { grid-area: 1/4/2/5 !important; object-position: 50% 40% !important; } #rc .image-95 { grid-area: 2/4/3/5 !important; object-position: 50% 40% !important; } #rc .image-91 { grid-area: 1/5/3/6 !important; object-position: 50% 30% !important; } #rc .image-86 { grid-area: 1/6/2/8 !important; object-position: 50% 35% !important; } #rc .image-94 { grid-area: 1/8/2/9 !important; object-position: 50% 35% !important; } #rc .image-87 { grid-area: 2/6/3/8 !important; object-position: 50% 40% !important; } #rc .image-98 { grid-area: 2/8/3/9 !important; object-position: 50% 50% !important; } #rc .image-90 { grid-area: 3/1/5/2 !important; object-position: 50% 25% !important; } #rc .image-99 { grid-area: 3/2/4/3 !important; object-position: 50% 0% !important; } #rc .image-88 { grid-area: 4/2/5/3 !important; object-position: 50% 40% !important; } #rc .image-89 { grid-area: 3/3/4/5 !important; object-position: 50% 35% !important; } #rc .image-100 { grid-area: 4/3/5/5 !important; object-position: 50% 30% !important; } #rc .image-85 { grid-area: 3/5/5/7 !important; object-position: 50% 0% !important; } #rc .image-92 { grid-area: 3/7/5/8 !important; object-position: 50% 40% !important; } #rc .image-97 { grid-area: 3/8/4/9 !important; object-position: 50% 0% !important; } #rc .image-96 { grid-area: 4/8/5/9 !important; object-position: 50% 40% !important; } /* Community */ #community .image-21 { grid-area: 1/1/3/3 !important; object-position: 50% 35% !important; } #community .image-23 { grid-area: 1/3/3/4 !important; object-position: 50% 50% !important; } #community .image-109 { grid-area: 1/4/2/5 !important; object-position: 50% 35% !important; } #community .image-111 { grid-area: 2/4/3/5 !important; object-position: 50% 30% !important; } #community .image-103 { grid-area: 1/5/3/6 !important; object-position: 50% 30% !important; } #community .image-102 { grid-area: 1/6/2/8 !important; object-position: 50% 40% !important; } #community .image-114 { grid-area: 1/8/2/9 !important; object-position: 50% 35% !important; } #community .image-106 { grid-area: 2/6/3/8 !important; object-position: 50% 40% !important; } #community .image-115 { grid-area: 2/8/3/9 !important; object-position: 50% 35% !important; } #community .image-105 { grid-area: 3/1/5/2 !important; object-position: 50% 30% !important; } #community .image-116 { grid-area: 3/2/4/3 !important; object-position: 50% 50% !important; } #community .image-108 { grid-area: 4/2/5/3 !important; object-position: 50% 50% !important; } #community .image-107 { grid-area: 3/3/4/5 !important; object-position: 50% 40% !important; } #community .image-112 { grid-area: 4/3/5/5 !important; object-position: 50% 30% !important; } #community .image-101 { grid-area: 3/5/5/7 !important; object-position: 50% 35% !important; } #community .image-104 { grid-area: 3/7/5/8 !important; object-position: 50% 50% !important; } #community .image-110 { grid-area: 3/8/4/9 !important; object-position: 50% 30% !important; } #community .image-113 { grid-area: 4/8/5/9 !important; object-position: 50% 35% !important; } } /* ---------------------------------------------------------------------------- MoneyVoice — tablet (768-991px). The Webflow tablet layout clips the portrait face tiles at the bottom (foreheads shown, mouths cut). Fill each tile and aim the crop at the face. (Desktop is handled by the rebuild above.) ---------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 991px) { #moneyvoice .image-63, #moneyvoice .image-65, #moneyvoice .image-62, #moneyvoice .image-124, #moneyvoice .image-66, #moneyvoice .image-67 { object-fit: cover !important; height: 100% !important; object-position: 50% 38% !important; } } /* MoneyVoice — mobile landscape (480-767px). The two-men photo (left) leaves white to its right; grow it to fill, cropping top & bottom evenly. */ @media (min-width: 480px) and (max-width: 767px) { #moneyvoice .image-23 { object-fit: cover !important; width: 25.7vw !important; object-position: 50% 50% !important; } } /* Climate — mobile portrait (<=479px): nudge the #COP21 photo up ~30px so the sign text clears the bottom of its cell. */ @media (max-width: 479px) { #climate .image-72 { transform: translateY(-30px) !important; } } /* Climate intro — the Newton's-cradle diagram PNG has ~7% built-in white side padding, which makes the already-small diagram hard to read on phones. Crop that padding (fill at the content's 334:202 aspect ratio) so the diagram reaches the same side margins as the body text. Phones only. */ @media (max-width: 767px) { .container-for-paragraph .image-4 { width: 100% !important; height: auto !important; aspect-ratio: 334 / 202 !important; object-fit: cover !important; object-position: center !important; } } /* ============================================================================ "IN SUMMARY" FINALE (.unlimited-section) — enlarge the figure on phones. The four overlays (businesses=left hand, creative=head-tree, movements=right hand, heart=chest) are top-anchored PNG bands of DIFFERENT heights stacked on the base image; Webflow's IX2 scroll interaction fades each one's opacity. On phones the figure was a sliver of a tall viewport, so we scale the whole stack up. We transform the shared parent .unlimited-image-div — NOT the individual imgs — because the bands differ in height, so a per-img percentage origin would shift them by different amounts and break registration. One transform on the common ancestor scales every layer about a single shared point, so base, overlays, and thought-bubble stay locked together. IX2 never writes transform on these nodes, so there is no conflict. ============================================================================ */ @media (max-width: 767px) { .unlimited-image-div { transform: scale(1.32); transform-origin: 50% 0; } /* The sticky wrapper clips at .unlimited-content-div's height (445px on phones, overflow:hidden). The enlarged figure's image — and the white beam that tapers below it — is taller than that window, so the beam was cut off. Grow the window to fit the words plus the scaled image, so the full beam shows with section black below it. Width-relative (image height tracks viewport width). The red overlays fade on section scroll position, not on this block's height, so the fade timing is unchanged. */ .unlimited-content-div { min-height: calc(140px + 118vw); max-height: calc(140px + 118vw); } }