/* * Ogopogo non-home parity layer. * * This file is deliberately inert until site-enhancements.js adds * `cms-ogopogo-subpage` and one of the route classes below to . * Do not broaden these selectors: the homepage is intentionally excluded. */ @font-face { font-family: Sriracha; src: url("/fonts/sriracha.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; } html.cms-ogopogo-subpage { --og-blue: #0763a4; --og-blue-hover: #06558d; --og-pink: #e9609c; --og-purple: #ab5db2; --og-purple-deep: #835eb5; --og-ink: #111; --og-copy: #fff; --og-content: min(1712px, calc(100vw - 208px)); --og-reading: min(980px, calc(100vw - 64px)); --blue: var(--og-blue); --accent-color: var(--og-blue); --pink: var(--og-pink); --purple: var(--og-purple); scroll-padding-top: 65px; } html.cms-ogopogo-subpage, html.cms-ogopogo-subpage body { max-width: 100%; overflow-x: clip; } html.cms-ogopogo-subpage body { color: #fff; background: var(--og-purple); } /* Saved reveal/entrance state must never leave a real section invisible. */ html.cms-ogopogo-subpage .reveal, html.cms-ogopogo-subpage .reveal.visible, html.cms-ogopogo-subpage [class*="animate-"] { opacity: 1 !important; visibility: visible !important; animation: none !important; } html.cms-ogopogo-subpage .reveal, html.cms-ogopogo-subpage .reveal.visible { transform: none !important; } html.cms-ogopogo-subpage .sub-hero, html.cms-ogopogo-subpage .sub-hero-shade::before { animation: none !important; } html.cms-ogopogo-subpage .sub-hero-shade { display: none !important; } html.cms-ogopogo-subpage main, html.cms-ogopogo-subpage #cms-page-order-host { width: 100%; min-height: 0; } /* Shared subpage scale and media behavior. */ html.cms-ogopogo-subpage .content-wide, html.cms-ogopogo-subpage .process-grid, html.cms-ogopogo-subpage .reason-grid, html.cms-ogopogo-subpage .sub-photo-grid, html.cms-ogopogo-subpage .sub-film-gallery, html.cms-ogopogo-subpage .campaign, html.cms-ogopogo-subpage .inspiration-grid, html.cms-ogopogo-subpage .editorial-list { width: var(--og-content); max-width: none; margin-inline: auto; } html.cms-ogopogo-subpage .sub-light, html.cms-ogopogo-subpage .sub-dark, html.cms-ogopogo-subpage .sub-intro, html.cms-ogopogo-subpage .quote { height: auto !important; min-height: 0 !important; } html.cms-ogopogo-subpage .sub-light, html.cms-ogopogo-subpage .sub-dark { padding-block: clamp(64px, 5.2vw, 100px); } html.cms-ogopogo-subpage .sub-light > h2, html.cms-ogopogo-subpage .sub-dark > h2, html.cms-ogopogo-subpage .quote h2 { color: #fff; font-family: Chelsea, cursive; font-size: clamp(38px, 3vw, 58px); line-height: 1.05; text-shadow: none; } html.cms-ogopogo-subpage .sub-lede, html.cms-ogopogo-subpage .section-lede, html.cms-ogopogo-subpage .process-grid p, html.cms-ogopogo-subpage .reason-grid p, html.cms-ogopogo-subpage .campaign p, html.cms-ogopogo-subpage .editorial-list p, html.cms-ogopogo-subpage .local-video-card small { color: inherit; } html.cms-ogopogo-subpage .sub-intro { padding: clamp(54px, 4.4vw, 84px) 24px; } html.cms-ogopogo-subpage .sub-intro p { width: var(--og-reading); color: #fff; font-size: clamp(16px, 1.05vw, 20px); line-height: 1.68; } html.cms-ogopogo-subpage .process-grid, html.cms-ogopogo-subpage .reason-grid { gap: clamp(24px, 2.2vw, 44px); } html.cms-ogopogo-subpage .process-grid h3, html.cms-ogopogo-subpage .reason-grid h3, html.cms-ogopogo-subpage .editorial-list h3 { color: #fff; } html.cms-ogopogo-subpage .sub-film-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 2.25vw, 44px) clamp(14px, 1.4vw, 28px); } html.cms-ogopogo-subpage .sub-photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.3vw, 24px); } html.cms-ogopogo-subpage .sub-film-gallery .local-video-card, html.cms-ogopogo-subpage .sub-film-gallery .local-video-card strong, html.cms-ogopogo-subpage .sub-film-gallery .local-video-card small { color: #fff; } html.cms-ogopogo-subpage .sub-film-gallery .local-video-card strong { font-family: Chelsea, cursive; font-size: clamp(20px, 1.55vw, 30px); } html.cms-ogopogo-subpage .local-video-card, html.cms-ogopogo-subpage .local-video-card:hover, html.cms-ogopogo-subpage .sub-photo-grid, html.cms-ogopogo-subpage .film-photo-grid, html.cms-ogopogo-subpage .poster-grid { box-shadow: none; } html.cms-ogopogo-subpage .local-video-card .video-thumb img, html.cms-ogopogo-subpage .sub-photo-grid img, html.cms-ogopogo-subpage .process-grid img, html.cms-ogopogo-subpage .editorial-list img, html.cms-ogopogo-subpage .cms-media-box > img, html.cms-ogopogo-subpage .cms-media-box > video { width: 100%; height: 100%; object-fit: cover !important; object-position: var(--cms-object-position, 50% 50%); } html.cms-ogopogo-subpage .local-video-card .video-thumb { aspect-ratio: 16 / 9; } html.cms-ogopogo-subpage .local-video-card .video-thumb i { width: 48px; height: 48px; color: #fff; background: rgba(0, 0, 0, .38); border-color: #fff; } html.cms-ogopogo-subpage .cms-round-crop, html.cms-ogopogo-subpage .cms-crop-circle, html.cms-ogopogo-subpage [data-crop-shape="circle"] { aspect-ratio: 1 / 1 !important; border-radius: 50% !important; object-fit: cover !important; overflow: hidden; } /* Stop-motion and 2D have a centered 979 x 551 original hero. */ html.cms-route-stop-motion .sub-hero.framed, html.cms-route-2d .sub-hero.framed { height: auto !important; min-height: 0 !important; padding: 0 0 clamp(34px, 3vw, 58px); background: var(--og-purple); } html.cms-route-stop-motion .sub-hero.framed > video, html.cms-route-2d .sub-hero.framed > video { aspect-ratio: 979 / 551; width: min(979px, 100%); height: auto !important; margin-inline: auto; object-fit: cover !important; } html.cms-route-stop-motion .sub-hero.framed h1, html.cms-route-2d .sub-hero.framed h1 { position: static !important; width: auto; margin: clamp(30px, 2.5vw, 48px) auto 0; padding: 0 20px !important; color: #fff; font-size: clamp(42px, 3.2vw, 62px); transform: none !important; } /* Stop-motion: original colored bands and full four-across film gallery. */ html.cms-route-stop-motion .sub-intro, html.cms-route-stop-motion main section:nth-of-type(4), html.cms-route-stop-motion main section:nth-of-type(6), html.cms-route-stop-motion main section:nth-of-type(10) { color: #fff; background: var(--og-purple); } html.cms-route-stop-motion main section:nth-of-type(3), html.cms-route-stop-motion main section:nth-of-type(5), html.cms-route-stop-motion main section:nth-of-type(7), html.cms-route-stop-motion main section:nth-of-type(11) { color: #fff; background: var(--og-pink); } html.cms-route-stop-motion main section:nth-of-type(8) { color: #fff; background: var(--og-purple-deep); } html.cms-route-stop-motion main section:nth-of-type(9) { color: #fff; background: radial-gradient(circle at 8% 28%, #dc9b4e 0 6%, transparent 6.4%), radial-gradient(ellipse at 27% 74%, #eb8d44 0 10%, transparent 10.4%), radial-gradient(ellipse at 58% 24%, #d49d56 0 12%, transparent 12.4%), radial-gradient(ellipse at 82% 74%, #ef994e 0 9%, transparent 9.4%), #a86e67; background-size: 410px 330px; } html.cms-route-stop-motion main section:nth-of-type(9) .sub-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } html.cms-route-stop-motion main section:nth-of-type(8) .sub-photo-grid img { aspect-ratio: 1 / 1; height: auto; border-radius: 50%; } html.cms-route-stop-motion main section:nth-of-type(9) .sub-photo-grid img { aspect-ratio: 4 / 5; height: auto; } html.cms-route-stop-motion .campaign { grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr); width: min(920px, var(--og-content)); gap: clamp(30px, 3vw, 58px); } html.cms-route-stop-motion .process-grid, html.cms-route-stop-motion .reason-grid { width: min(1120px, var(--og-content)); } html.cms-route-stop-motion .wide-video { width: min(920px, calc(100% - 40px)); } html.cms-route-stop-motion .video-gallery { width: var(--og-content); gap: 14px; margin-inline: auto; overflow: hidden; } /* 2D: alternate the original Ogopogo blue, pink and purple bands. */ html.cms-route-2d .sub-intro, html.cms-route-2d main section:nth-of-type(3), html.cms-route-2d main section:nth-of-type(6) { color: #fff; background: var(--og-blue); } html.cms-route-2d main section:nth-of-type(4), html.cms-route-2d main section:nth-of-type(7) { color: #fff; background: var(--og-pink); } html.cms-route-2d main section:nth-of-type(5), html.cms-route-2d main section:nth-of-type(8) { color: #fff; background: var(--og-purple); } html.cms-route-2d .two-d-work { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; } html.cms-route-2d .wide-art-grid img { height: auto; min-height: 0; aspect-ratio: 4 / 3; } html.cms-route-2d .poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(1120px, var(--og-content)); } html.cms-route-2d .poster-grid img { height: auto; max-height: none; object-fit: contain !important; } /* Miniatures: large original still, then its title and pink introduction. */ html.cms-route-miniatures .sub-hero, html.cms-route-toys .sub-hero { display: flex; flex-direction: column; align-items: center; height: auto !important; min-height: 0 !important; padding: clamp(34px, 3vw, 58px) 0; overflow: visible; background: var(--og-purple); } html.cms-route-miniatures .sub-hero > img { order: 1; width: min(1265px, var(--og-content)); height: auto !important; object-fit: contain !important; } html.cms-route-miniatures .sub-hero h1, html.cms-route-toys .sub-hero h1 { order: 2; position: static !important; width: auto; margin: clamp(30px, 2.8vw, 52px) auto 0; padding: 0 20px; color: #fff; font-size: clamp(44px, 3.2vw, 62px); transform: none !important; } html.cms-route-miniatures .sub-intro, html.cms-route-miniatures .quote, html.cms-route-toys .sub-intro, html.cms-route-toys .quote { color: #fff; background: var(--og-pink); } html.cms-route-miniatures .sub-light, html.cms-route-toys .sub-light { color: #fff; background: var(--og-purple); } html.cms-route-miniatures .editorial-list { gap: clamp(44px, 4vw, 78px); } html.cms-route-miniatures .editorial-list article { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: clamp(30px, 3vw, 60px); } html.cms-route-miniatures .editorial-list img { aspect-ratio: 16 / 10; height: auto; } /* Toys: the original 791 x 472 hero is never stretched. */ html.cms-route-toys .sub-hero > img { order: 1; aspect-ratio: 791 / 472; width: min(791px, var(--og-content)); height: auto !important; border-radius: 16px; object-fit: cover !important; } html.cms-route-toys main section:nth-of-type(3) { color: #fff; background: var(--og-purple); } html.cms-route-toys main section:nth-of-type(4) { color: #fff; background: var(--og-blue); } html.cms-route-toys .reason-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* * Desktop hero geometry measured from the live Wix pages at 1440px. * Editor-saved dimensions are inline `!important`, so this exact parity layer * must also win with `!important`. */ @media (min-width: 801px) { html.cms-route-stop-motion .sub-hero.framed, html.cms-route-2d .sub-hero.framed { padding-bottom: 0 !important; } html.cms-route-stop-motion .sub-hero.framed > video, html.cms-route-2d .sub-hero.framed > video { aspect-ratio: 979 / 551 !important; width: 979px !important; max-width: 100% !important; height: auto !important; object-fit: cover !important; } html.cms-route-stop-motion .sub-hero.framed h1, html.cms-route-2d .sub-hero.framed h1, html.cms-route-miniatures .sub-hero h1, html.cms-route-toys .sub-hero h1 { width: min(600px, calc(100% - 32px)) !important; padding: 0 !important; font: 400 83px/1.2 Chelsea, cursive !important; text-align: center !important; text-shadow: none !important; } html.cms-route-stop-motion .sub-hero.framed h1, html.cms-route-2d .sub-hero.framed h1 { margin: 51px auto 0 !important; } html.cms-route-stop-motion .sub-hero.framed h1 { color: #ff789a !important; } html.cms-route-2d .sub-hero.framed h1 { color: #ff688c !important; } html.cms-route-miniatures .sub-hero { padding: 20px 0 0 !important; overflow: hidden !important; background: linear-gradient(to bottom, #fff 0 20px, var(--og-purple) 20px) !important; } html.cms-route-miniatures .sub-hero > img { aspect-ratio: 1425 / 1166 !important; width: 100% !important; max-width: none !important; height: auto !important; margin-top: 0 !important; border-radius: 0 !important; object-fit: cover !important; } html.cms-route-miniatures .sub-hero h1 { margin: 22px auto 0 !important; color: #fa82a6 !important; } html.cms-route-toys .sub-hero { padding: 84px 0 0 !important; } html.cms-route-toys .sub-hero > img { aspect-ratio: 791 / 472 !important; width: 791px !important; max-width: calc(100% - 32px) !important; height: auto !important; border-radius: 16px !important; object-fit: cover !important; } html.cms-route-toys .sub-hero h1 { margin: 58px auto 0 !important; color: #fffcb3 !important; } html.cms-route-stop-motion .sub-intro, html.cms-route-2d .sub-intro, html.cms-route-miniatures .sub-intro, html.cms-route-toys .sub-intro { padding-top: 34px !important; } } /* The two IP pages retain the supplied artwork's native aspect ratios. */ html.cms-route-adventuresinmayapur body, html.cms-route-adventuresinmayapur .visual-story.adventuresinmayapur { background: #3cad89; } html.cms-route-thebadelves body, html.cms-route-thebadelves .visual-story.thebadelves { background: #1e054b; } html.cms-route-adventuresinmayapur .visual-story, html.cms-route-thebadelves .visual-story { gap: 0; min-height: 0; padding: 0 0 34px; overflow: hidden; } html.cms-route-adventuresinmayapur .visual-story > img, html.cms-route-adventuresinmayapur .story-frame, html.cms-route-thebadelves .visual-story > img { width: min(979px, calc(100% - 40px)); max-width: none; height: auto !important; margin-inline: auto; object-fit: contain !important; } html.cms-route-adventuresinmayapur .visual-story > img:first-child { width: min(1459px, 100%); box-shadow: 0 0 0 100vmax #4a2b3f; clip-path: inset(0 -100vmax); } html.cms-route-adventuresinmayapur .story-frame img { width: 100%; max-width: none !important; } html.cms-route-thebadelves .visual-story > img:first-child { width: min(1422px, 100%); } /* The original Bad Elves page ends with seven overlapping artwork layers. Preserve that composition instead of stretching every layer to 979px. */ html.cms-route-thebadelves .visual-story.cms-bad-elves-layout { display: flex; flex-direction: column; align-items: center; gap: 75px; overflow: hidden; } html.cms-route-thebadelves .visual-story.cms-bad-elves-layout > img { width: auto !important; max-width: calc(100% - 40px); flex: none; } html.cms-route-thebadelves .visual-story.cms-bad-elves-layout > img:first-child { width: 1422px !important; max-width: none; } html.cms-route-thebadelves .cms-bad-elves-panel { position: relative; width: min(979px, calc(100% - 40px)); aspect-ratio: 979 / 546; flex: none; transform: translateY(-37px); } html.cms-route-thebadelves .cms-bad-elves-panel > img { position: absolute; display: block; height: auto !important; object-fit: contain !important; max-width: none !important; } html.cms-route-thebadelves .cms-bad-elves-panel > img:nth-child(1) { inset: 0 auto auto 0; width: 99.285%; } html.cms-route-thebadelves .cms-bad-elves-panel > img:nth-child(2) { top: 6.227%; left: 0; width: 49.847%; } html.cms-route-thebadelves .cms-bad-elves-panel > img:nth-child(3) { top: 2.198%; left: 0; width: 49.847%; } html.cms-route-thebadelves .cms-bad-elves-collage { position: relative; width: min(1002px, calc(100% - 40px)); aspect-ratio: 1002 / 2035; flex: none; } html.cms-route-thebadelves .cms-bad-elves-collage > img { position: absolute; display: block; height: auto !important; max-width: none; object-fit: contain !important; } html.cms-route-thebadelves .cms-bad-elves-collage > img:nth-child(1) { top: 20.197%; left: 0; width: 45.908%; } html.cms-route-thebadelves .cms-bad-elves-collage > img:nth-child(2) { top: 0; left: 38.323%; width: 61.677%; } html.cms-route-thebadelves .cms-bad-elves-collage > img:nth-child(3) { top: 0.246%; left: 1.297%; width: 38.224%; } html.cms-route-thebadelves .cms-bad-elves-collage > img:nth-child(4) { top: 34.496%; left: 55.788%; width: 44.212%; } html.cms-route-thebadelves .cms-bad-elves-collage > img:nth-child(5) { top: 44.816%; left: 3.792%; width: 50.898%; } html.cms-route-thebadelves .cms-bad-elves-collage > img:nth-child(6) { top: 62.752%; left: 54.691%; width: 41.118%; } html.cms-route-thebadelves .cms-bad-elves-collage > img:nth-child(7) { top: 23.047%; left: 48.703%; width: 25.150%; } html.cms-route-adventuresinmayapur .story-contact { color: #123a34; background: #3cad89; } html.cms-route-thebadelves .story-contact { color: #fff; background: #1e054b; } html.cms-ogopogo-subpage .story-contact.cms-original-ip-contact-exact p { margin: 0; } html.cms-route-adventuresinmayapur .story-contact a, html.cms-route-thebadelves .story-contact a { color: inherit; } /* Native gallery/carousel shell created after CMS decoration. */ html.cms-ogopogo-subpage .cms-carousel-shell, html.cms-ogopogo-subpage .cms-native-carousel-shell { position: relative; width: var(--og-content); max-width: 100%; margin-inline: auto; padding-inline: 0; overflow: hidden; box-sizing: border-box; } /* The late-injected runtime stylesheet must not widen Stop-Motion rails. */ html.cms-route-stop-motion .cms-native-carousel-shell { width: var(--og-content) !important; max-width: 100% !important; margin-inline: auto !important; padding-inline: 0 !important; } html.cms-ogopogo-subpage .cms-native-carousel { display: flex !important; grid-template-columns: none !important; gap: clamp(12px, 1.2vw, 22px) !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-behavior: smooth; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: none; -ms-overflow-style: none; } html.cms-ogopogo-subpage .cms-native-carousel::-webkit-scrollbar, html.cms-ogopogo-subpage .bts-row::-webkit-scrollbar, html.cms-ogopogo-subpage .character-strip::-webkit-scrollbar, html.cms-ogopogo-subpage .video-gallery::-webkit-scrollbar { display: none; width: 0; height: 0; } html.cms-ogopogo-subpage .bts-row, html.cms-ogopogo-subpage .character-strip, html.cms-ogopogo-subpage .video-gallery { scrollbar-width: none; -ms-overflow-style: none; } html.cms-ogopogo-subpage .cms-native-carousel > * { flex: 0 0 calc((100% - 66px) / 4); min-width: 0; scroll-snap-align: start; } /* Stop-Motion's original featured video galleries: hero media + thumbnail rail. */ html.cms-route-stop-motion .cms-stop-feature-gallery { display: block !important; width: min(980px, var(--og-content)) !important; max-width: 100% !important; margin-inline: auto !important; } html.cms-route-stop-motion .cms-stop-feature-frame { position: relative; width: 100%; padding: 20px; color: #111; background: #fff; overflow: hidden; } html.cms-route-stop-motion .cms-stop-feature-stage { aspect-ratio: 16 / 9; width: 100%; background: #000; overflow: hidden; } html.cms-route-stop-motion .cms-stop-feature-play { position: relative; display: block; width: 100%; height: 100%; padding: 0; color: #fff; background: #000; border: 0; cursor: pointer; overflow: hidden; } html.cms-route-stop-motion .cms-stop-feature-play > img { width: 100%; height: 100%; object-fit: cover; } html.cms-route-stop-motion .cms-stop-feature-play > span { position: absolute; inset: 0; display: grid; grid-template-columns: auto auto; place-content: center; align-items: center; gap: 12px; padding: 24px; background: rgba(0, 0, 0, .28); text-align: center; } html.cms-route-stop-motion .cms-stop-feature-play strong { grid-column: 1 / -1; font: 34px/1.15 Chelsea, cursive; } html.cms-route-stop-motion .cms-stop-feature-play i { display: grid; place-items: center; width: 42px; height: 42px; padding-left: 3px; border: 2px solid #fff; border-radius: 50%; font-style: normal; } html.cms-route-stop-motion .cms-stop-feature-play em { font: 17px/1.2 Din, Arial, sans-serif; font-style: normal; } html.cms-route-stop-motion .cms-stop-feature-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 28px; } html.cms-route-stop-motion .cms-stop-feature-thumb { min-width: 0; padding: 0; color: #111; background: transparent; border: 0; text-align: left; cursor: pointer; } html.cms-route-stop-motion .cms-stop-feature-thumb img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; opacity: .78; } html.cms-route-stop-motion .cms-stop-feature-thumb small { display: block; padding-top: 7px; font: 13px/1.25 Din, Arial, sans-serif; } html.cms-route-stop-motion .cms-stop-feature-thumb[aria-current="true"] img { opacity: 1; outline: 3px solid var(--og-pink); outline-offset: -3px; } html.cms-route-stop-motion .cms-stop-feature-frame > .cms-native-carousel-arrow { position: absolute; z-index: 5; top: 40%; display: grid; place-items: center; width: 46px; height: 70px; padding: 0; color: #fff; background: rgba(0, 0, 0, .32); border: 0; border-radius: 3px; box-shadow: none; translate: 0 -50%; } html.cms-route-stop-motion .cms-stop-feature-frame > .cms-native-carousel-arrow[data-prev] { left: 20px; } html.cms-route-stop-motion .cms-stop-feature-frame > .cms-native-carousel-arrow[data-next] { right: 20px; } html.cms-route-stop-motion .cms-stop-feature-frame > .cms-native-carousel-arrow:disabled, html.cms-route-stop-motion .cms-stop-feature-next-label:disabled { opacity: .25; } html.cms-route-stop-motion .cms-stop-feature-next-label { display: flex; align-items: center; gap: 14px; margin: 28px 0 0 auto; padding: 0; color: #111; background: transparent; border: 0; font: 14px/1 Din, Arial, sans-serif; cursor: pointer; } html.cms-route-stop-motion .cms-stop-feature-next-label span { font-size: 28px; } /* Six faithful "Choose your look" cards, including the original captions. */ html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(10) .cms-native-carousel-shell { width: min(900px, var(--og-content)) !important; } html.cms-route-stop-motion .cms-stop-look-grid { grid-template-columns: repeat(3, 280px) !important; justify-content: center; gap: 30px !important; } html.cms-route-stop-motion .cms-stop-look-card { min-width: 0; text-align: center; } html.cms-route-stop-motion .cms-stop-look-card > img { aspect-ratio: 280 / 351 !important; width: 280px !important; height: 351px !important; object-fit: cover !important; } html.cms-route-stop-motion .cms-stop-look-copy { position: relative; width: 88%; min-height: 96px; margin: -49px auto 0; padding: 10px 14px 13px; color: #222; background: #fff; } html.cms-route-stop-motion .cms-stop-look-copy h3 { margin: 0 0 5px; color: #7d42ff; font: 700 23px/1.12 Din, Arial, sans-serif; } html.cms-route-stop-motion .cms-stop-look-copy p { margin: 0; font: 16px/1.25 Din, Arial, sans-serif; } html.cms-ogopogo-subpage .cms-carousel-arrow, html.cms-ogopogo-subpage .cms-carousel-shell > .cms-carousel-prev, html.cms-ogopogo-subpage .cms-carousel-shell > .cms-carousel-next, html.cms-ogopogo-subpage .cms-carousel-shell > button[data-carousel-direction] { z-index: 20; position: absolute; top: 50%; display: grid; place-items: center; width: 48px; height: 68px; padding: 0; color: #fff; background: rgba(0, 0, 0, .2); border: 0; border-radius: 4px; cursor: pointer; transform: translateY(-50%); box-shadow: none; } html.cms-ogopogo-subpage .cms-carousel-prev, html.cms-ogopogo-subpage [data-carousel-direction="prev"] { left: 8px; } html.cms-ogopogo-subpage .cms-carousel-next, html.cms-ogopogo-subpage [data-carousel-direction="next"] { right: 8px; } html.cms-ogopogo-subpage .cms-carousel-arrow:hover, html.cms-ogopogo-subpage .cms-carousel-arrow:focus-visible, html.cms-ogopogo-subpage .cms-carousel-shell > button[data-carousel-direction]:hover, html.cms-ogopogo-subpage .cms-carousel-shell > button[data-carousel-direction]:focus-visible { color: #fff; background: rgba(0, 0, 0, .52); transform: translateY(-50%); } html.cms-ogopogo-subpage .contact-pill { min-width: 198px; min-height: 56px; padding: 14px 26px; color: #fff; background: #7d42ff; border-radius: 999px; font-family: Chelsea, cursive; font-size: 16px; } html.cms-ogopogo-subpage .quote-form { width: min(980px, calc(100% - 40px)); } html.cms-ogopogo-subpage .quote-form h2 { color: #fff; } html.cms-ogopogo-subpage .quote-form label { color: #fff; } html.cms-ogopogo-subpage .quote-form input, html.cms-ogopogo-subpage .quote-form textarea { color: #111; background: #fff; } html.cms-ogopogo-subpage .quote-form > button { color: #fff; background: var(--og-purple); border: 2px solid #fff; border-radius: 999px; } /* * editor-runtime moves the decorated sections into a body-level ordering host. * Keep the route bands and desktop grid geometry valid after that move; the * earlier `main section` selectors intentionally cover the pre-decoration * first paint, while these selectors cover the stable rendered state. */ html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(1), html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(2), html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(4), html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(6), html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(10) { color: #fff !important; background: var(--og-purple) !important; } html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(3), html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(5), html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(7), html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(11) { color: #fff !important; background: var(--og-pink) !important; } html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(8) { color: #fff !important; background: var(--og-purple-deep) !important; } html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(9) { color: #fff !important; background: radial-gradient(circle at 8% 28%, #dc9b4e 0 6%, transparent 6.4%), radial-gradient(ellipse at 27% 74%, #eb8d44 0 10%, transparent 10.4%), radial-gradient(ellipse at 58% 24%, #d49d56 0 12%, transparent 12.4%), radial-gradient(ellipse at 82% 74%, #ef994e 0 9%, transparent 9.4%), #a86e67 !important; background-size: 410px 330px !important; } html.cms-route-stop-motion .sub-hero.framed h1 { color: #ff295d !important; font-family: Chelsea, cursive !important; font-size: clamp(56px, 4.32vw, 83px); } html.cms-route-stop-motion #cms-page-order-host > .sub-light > h2, html.cms-route-stop-motion #cms-page-order-host > .sub-dark > h2 { color: #ff295d; font-family: Chelsea, cursive; font-size: clamp(48px, 3.4vw, 65px); } html.cms-route-stop-motion .sub-film-gallery .local-video-card strong { font-family: Din, Arial, sans-serif; font-size: clamp(23px, 1.46vw, 28px); font-weight: 700; } html.cms-route-stop-motion .sub-film-gallery .local-video-card small { margin-top: 9px; font: 16px/1.35 Din, Arial, sans-serif; } /* * The source capture uses intentionally tall desktop bands. Interpolate the * two measured desktop reference widths so 1440px and 1920px land on the * original section rhythm without imposing those heights on tablet/mobile. */ @media (min-width: 1280px) { html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(3) { padding-block: 32px; } html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(8) { padding-block: 75px; } html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(11) { padding-block: 46px; } html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(12) { padding-block: 56px 70px; } html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(4) { min-height: clamp(1343px, calc(983px + 25vw), 1463px) !important; } html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(5) { min-height: clamp(958px, calc(910px + 3.333vw), 974px) !important; } html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(6) { min-height: 1216px !important; } html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(7) { min-height: clamp(1170px, calc(1116px + 3.75vw), 1188px) !important; } html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(8) { min-height: 680px !important; } html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(9) { min-height: clamp(797px, calc(937px - 7.292vw), 832px) !important; } html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(10) { min-height: clamp(1336px, calc(1246px + 6.25vw), 1366px) !important; } html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(11) { min-height: clamp(1016px, calc(1001px + 1.042vw), 1021px) !important; } html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(12) { min-height: 848px !important; } } html.cms-route-2d #cms-page-order-host > section:nth-of-type(1), html.cms-route-2d #cms-page-order-host > section:nth-of-type(2), html.cms-route-2d #cms-page-order-host > section:nth-of-type(3), html.cms-route-2d #cms-page-order-host > section:nth-of-type(6) { color: #fff !important; background: var(--og-blue) !important; } html.cms-route-2d #cms-page-order-host > section:nth-of-type(4), html.cms-route-2d #cms-page-order-host > section:nth-of-type(7), html.cms-route-2d #cms-page-order-host > section:nth-of-type(8) { color: #fff !important; background: var(--og-pink) !important; } html.cms-route-2d #cms-page-order-host > section:nth-of-type(5) { color: #fff !important; background: var(--og-purple) !important; } @media (min-width: 801px) { html.cms-ogopogo-subpage .cms-native-carousel-shell[data-carousel-mode="mobile"] > .cms-native-carousel { display: grid !important; overflow: visible !important; scroll-snap-type: none !important; } html.cms-route-stop-motion .cms-native-carousel-shell[data-carousel-mode="mobile"] > .sub-film-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } html.cms-route-2d .cms-native-carousel-shell[data-carousel-mode="mobile"] > .two-d-work { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html.cms-route-stop-motion .cms-native-carousel-shell[data-carousel-mode="mobile"] > .sub-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html.cms-route-stop-motion .cms-native-carousel-shell[data-carousel-mode="mobile"] > .video-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (max-width: 1279px) { html.cms-ogopogo-subpage { --og-content: min(1120px, calc(100vw - 64px)); } html.cms-route-toys .reason-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 800px) { html.cms-ogopogo-subpage { --og-content: calc(100vw - 32px); --og-reading: calc(100vw - 40px); scroll-padding-top: 70px; } html.cms-ogopogo-subpage .sub-light, html.cms-ogopogo-subpage .sub-dark { padding-block: 50px; } html.cms-route-stop-motion .cms-stop-feature-gallery { width: calc(100vw - 24px) !important; } html.cms-route-stop-motion .cms-stop-feature-frame { padding: 10px; } html.cms-route-stop-motion .cms-stop-feature-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } html.cms-route-stop-motion .cms-stop-feature-play strong { font-size: clamp(22px, 7vw, 30px); } html.cms-route-stop-motion .cms-stop-feature-play > span { padding: 14px; } html.cms-route-stop-motion .cms-stop-feature-frame > .cms-native-carousel-arrow { top: 36%; width: 36px; height: 56px; } html.cms-route-stop-motion .cms-stop-feature-frame > .cms-native-carousel-arrow[data-prev] { left: 10px; } html.cms-route-stop-motion .cms-stop-feature-frame > .cms-native-carousel-arrow[data-next] { right: 10px; } html.cms-route-stop-motion .cms-stop-feature-next-label { margin-top: 16px; } html.cms-route-stop-motion #cms-page-order-host > section:nth-of-type(10) .cms-native-carousel-shell { width: var(--og-content) !important; } html.cms-route-stop-motion .cms-stop-look-grid { justify-content: start; gap: 14px !important; } html.cms-route-stop-motion .cms-stop-look-card > img { width: 100% !important; height: auto !important; } html.cms-ogopogo-subpage .sub-light > h2, html.cms-ogopogo-subpage .sub-dark > h2, html.cms-ogopogo-subpage .quote h2 { margin-bottom: 32px; padding-inline: 18px; font-size: clamp(34px, 10vw, 44px); } html.cms-ogopogo-subpage .sub-intro { padding: 48px 20px; } html.cms-ogopogo-subpage .process-grid, html.cms-ogopogo-subpage .reason-grid, html.cms-ogopogo-subpage .editorial-list, html.cms-route-miniatures .editorial-list article, html.cms-ogopogo-subpage .campaign { grid-template-columns: 1fr; } html.cms-ogopogo-subpage .sub-photo-grid, html.cms-ogopogo-subpage .sub-film-gallery, html.cms-ogopogo-subpage .two-d-work, html.cms-route-toys .reason-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.cms-route-stop-motion .sub-hero.framed, html.cms-route-2d .sub-hero.framed { padding-bottom: 38px; } html.cms-route-stop-motion .sub-hero.framed > video, html.cms-route-2d .sub-hero.framed > video { width: 100%; } html.cms-route-stop-motion .sub-hero.framed h1, html.cms-route-2d .sub-hero.framed h1 { margin-top: 32px; font-size: clamp(38px, 10vw, 46px); } html.cms-route-stop-motion main section:nth-of-type(9) .sub-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.cms-route-2d .poster-grid { grid-template-columns: 1fr; } html.cms-route-miniatures .sub-hero, html.cms-route-toys .sub-hero { padding: 34px 0 38px; } html.cms-route-miniatures .sub-hero > img { width: min(308px, calc(100vw - 32px)); border-radius: 16px; } html.cms-route-toys .sub-hero > img { width: min(280px, calc(100vw - 32px)); } html.cms-route-miniatures .sub-hero h1, html.cms-route-toys .sub-hero h1 { margin-top: 30px; font-size: clamp(38px, 10vw, 46px); } html.cms-route-stop-motion .sub-hero.framed h1, html.cms-route-2d .sub-hero.framed h1, html.cms-route-miniatures .sub-hero h1, html.cms-route-toys .sub-hero h1 { font-family: Sriracha, cursive !important; font-weight: 400 !important; } html.cms-route-stop-motion .sub-hero.framed h1 { color: #ff789a !important; } html.cms-route-2d .sub-hero.framed h1 { color: #ff688c !important; } html.cms-route-miniatures .sub-hero h1 { color: #fa82a6 !important; } html.cms-route-toys .sub-hero h1 { color: #fffcb3 !important; } html.cms-route-miniatures .editorial-list article { gap: 22px; } html.cms-route-adventuresinmayapur .visual-story > img:not(:first-child), html.cms-route-adventuresinmayapur .story-frame, html.cms-route-thebadelves .visual-story > img:not(:first-child) { width: min(560px, calc(100% - 40px)); } html.cms-ogopogo-subpage .cms-native-carousel > * { flex-basis: calc((100% - 16px) / 2); } html.cms-route-stop-motion .sub-film-gallery.cms-native-carousel > *, html.cms-route-2d .two-d-work.cms-native-carousel > * { flex-basis: 100%; } html.cms-route-stop-motion main section:nth-of-type(8) .cms-native-carousel > *, html.cms-route-stop-motion main section:nth-of-type(9) .cms-native-carousel > * { flex-basis: min(78vw, 350px); } html.cms-ogopogo-subpage .cms-carousel-arrow, html.cms-ogopogo-subpage .cms-carousel-shell > .cms-carousel-prev, html.cms-ogopogo-subpage .cms-carousel-shell > .cms-carousel-next, html.cms-ogopogo-subpage .cms-carousel-shell > button[data-carousel-direction] { width: 42px; height: 60px; } html.cms-ogopogo-subpage .contact-pill { min-width: 126px; min-height: 46px; padding: 11px 18px; font-family: Din, Arial, sans-serif; font-size: 15px; } } @media (max-width: 480px) { html.cms-ogopogo-subpage { --og-content: calc(100vw - 26px); } html.cms-ogopogo-subpage .sub-photo-grid, html.cms-ogopogo-subpage .sub-film-gallery, html.cms-ogopogo-subpage .two-d-work, html.cms-route-toys .reason-grid, html.cms-route-stop-motion main section:nth-of-type(9) .sub-photo-grid { grid-template-columns: 1fr; } html.cms-ogopogo-subpage .sub-photo-grid:not(.cms-native-carousel) img { height: auto; max-height: none; } html.cms-route-adventuresinmayapur .visual-story > img:first-child, html.cms-route-thebadelves .visual-story > img:first-child { width: 100%; } html.cms-route-adventuresinmayapur .visual-story > img:not(:first-child), html.cms-route-adventuresinmayapur .story-frame, html.cms-route-thebadelves .visual-story > img:not(:first-child) { width: min(280px, calc(100% - 32px)); } html.cms-route-thebadelves .visual-story.cms-bad-elves-layout { gap: 24px; } html.cms-route-thebadelves .visual-story.cms-bad-elves-layout > img:first-child { width: 100% !important; } html.cms-route-thebadelves .visual-story.cms-bad-elves-layout > img, html.cms-route-thebadelves .cms-bad-elves-panel, html.cms-route-thebadelves .cms-bad-elves-collage { width: calc(100% - 24px) !important; max-width: none; } html.cms-route-thebadelves .cms-bad-elves-panel { transform: none; } html.cms-route-adventuresinmayapur .story-trailer { bottom: 12px; padding: 9px 16px; font-size: 14px; } html.cms-ogopogo-subpage .story-contact { padding: 42px 20px; font-size: 17px; } html.cms-ogopogo-subpage .cms-native-carousel > *, html.cms-route-stop-motion .sub-film-gallery.cms-native-carousel > *, html.cms-route-2d .two-d-work.cms-native-carousel > * { flex-basis: 100%; } html.cms-route-stop-motion main section:nth-of-type(8) .cms-native-carousel > *, html.cms-route-stop-motion main section:nth-of-type(9) .cms-native-carousel > * { flex-basis: min(82vw, 320px); } } /* * Recording-matched semantic layouts. * These selectors intentionally follow the runtime classes added by * site-enhancements.js; they remain stable when the editor reorders sections. */ html.cms-ogopogo-subpage #cms-page-order-host > section > h2, html.cms-ogopogo-subpage #cms-page-order-host > section > h1, html.cms-ogopogo-subpage .quote-form > h2 { font-family: Sriracha, Chelsea, cursive !important; font-weight: 400 !important; } html.cms-ogopogo-subpage #cms-page-order-host > .quote { color: #111 !important; background: #edd8fb !important; } html.cms-ogopogo-subpage #cms-page-order-host > .quote h2 { color: #e94f8f !important; } html.cms-ogopogo-subpage #cms-page-order-host > .quote label { color: #111 !important; } html.cms-ogopogo-subpage #cms-page-order-host > .quote .quote-form > button { color: #fff !important; background: #ec4f8f !important; } html.cms-ogopogo-subpage .cms-ogopogo-footer { display: grid; place-items: center; min-height: 110px; padding: 24px; color: #fff; background: #050505; font-size: 14px; text-align: center; box-sizing: border-box; } /* ------------------------------ 2D animation ------------------------------ */ html.cms-route-2d #cms-page-order-host > .cms-2d-work { color: #fff !important; background: #aa55b2 !important; } html.cms-route-2d #cms-page-order-host > .cms-2d-why { color: #fff !important; background: #e45198 !important; } html.cms-route-2d #cms-page-order-host > .cms-2d-art { color: #fff !important; background: #aa55b2 !important; } html.cms-route-2d #cms-page-order-host > .cms-2d-story { color: #fff !important; background: #835eb5 !important; } html.cms-route-2d #cms-page-order-host > .cms-2d-production { color: #fff !important; background: #e45198 !important; } html.cms-route-2d #cms-page-order-host > .cms-2d-clients { color: #7f409f !important; background: #fff !important; } html.cms-route-2d #cms-page-order-host > .cms-2d-clients h2 { color: #7f409f !important; } html.cms-route-2d .cms-2d-why .sub-lede, html.cms-route-2d .cms-2d-art .sub-lede, html.cms-route-2d .cms-2d-story .sub-lede { width: min(584px, calc(100% - 40px)); margin: 0 auto 64px; color: #fff; font-size: 18px; line-height: 1.55; } html.cms-route-2d .cms-2d-why .reason-grid { width: min(980px, calc(100% - 40px)); grid-template-columns: repeat(3, 1fr); align-items: start; gap: 30px; } html.cms-route-2d .cms-2d-why .reason-grid article { text-align: left; } html.cms-route-2d .cms-2d-why .reason-grid img { display: block; width: 307px; max-width: 100%; height: 200px; margin: 0 0 22px; object-fit: cover !important; } html.cms-route-2d .cms-2d-why .reason-grid h3 { margin: 0 0 14px; font-size: 21px; } html.cms-route-2d .cms-2d-art-composition { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; width: min(1120px, calc(100% - 40px)); margin: 0 auto; } html.cms-route-2d .cms-2d-art-panel { min-width: 0; margin: 0; } html.cms-route-2d .cms-2d-art-panel img { display: block; width: 100%; height: auto !important; object-fit: contain !important; } html.cms-route-2d .cms-2d-art-panel-1 { grid-column: 1 / -1; width: min(979px, 100%); justify-self: center; } html.cms-route-2d .cms-2d-art-panel-2, html.cms-route-2d .cms-2d-art-panel-3 { width: min(530px, 100%); justify-self: center; } html.cms-route-2d .cms-2d-art-divider { grid-column: 1 / -1; display: block; width: 608px; max-width: 72%; height: 10px; margin: 40px auto 54px; background: #e9609c; } html.cms-route-2d .cms-2d-art-panel-4, html.cms-route-2d .cms-2d-art-panel-5, html.cms-route-2d .cms-2d-art-panel-6 { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 796px) 270px; align-items: center; gap: 16px; width: 1082px; max-width: 100%; justify-self: center; } html.cms-route-2d .cms-2d-art-panel-5 { grid-template-columns: 270px minmax(0, 788px); } html.cms-route-2d .cms-2d-art-panel-5 figcaption { grid-column: 1; grid-row: 1; } html.cms-route-2d .cms-2d-art-panel-5 img { grid-column: 2; grid-row: 1; } html.cms-route-2d .cms-2d-art-panel-7 { grid-column: 1 / -1; width: min(803px, 100%); justify-self: center; } html.cms-route-2d .cms-2d-art-panel figcaption, html.cms-route-2d .cms-2d-story-panel figcaption { width: fit-content; max-width: 270px; padding: 2px 8px 4px; color: #fff; background: #e9609c; font: 700 38px/1.28 Din, Arial, sans-serif; white-space: pre-line; text-transform: uppercase; } html.cms-route-2d .cms-2d-story-composition { display: grid; gap: 40px; width: min(1108px, calc(100% - 40px)); margin: 0 auto; } html.cms-route-2d .cms-2d-story-panel { display: grid; grid-template-columns: 220px minmax(0, 720px); align-items: start; gap: 14px; width: 954px; max-width: 100%; margin: 0; justify-self: center; } html.cms-route-2d .cms-2d-story-panel:nth-child(2) { grid-template-columns: minmax(0, 720px) 220px; } html.cms-route-2d .cms-2d-story-panel:nth-child(2) figcaption { grid-column: 2; grid-row: 1; } html.cms-route-2d .cms-2d-story-panel:nth-child(2) img { grid-column: 1; grid-row: 1; } html.cms-route-2d .cms-2d-story-panel img { display: block; width: 720px; max-width: 100%; height: auto !important; object-fit: contain !important; } html.cms-route-2d .cms-2d-story-panel-4 { display: flex; width: 100%; max-width: 1068px; flex-direction: column; align-items: center; gap: 34px; } html.cms-route-2d .cms-2d-story-panel-4 .cms-2d-story-equation { color: #fff; font: 700 97px/1 Din, Arial, sans-serif; } html.cms-route-2d .cms-2d-story-panel-4 figcaption { max-width: none; font-size: 58px; text-align: center; } html.cms-route-2d .cms-2d-story-panel-4 img { width: 1068px; } html.cms-route-2d .cms-2d-production .poster-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; width: min(1080px, calc(100% - 40px)); margin: 0 auto; } html.cms-route-2d .cms-2d-production-card { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 20px; min-width: 0; } html.cms-route-2d .cms-2d-production-card > img { display: block; width: 100%; height: 600px !important; object-fit: contain !important; object-position: center bottom; } html.cms-route-2d .cms-2d-production-copy { width: 100%; color: #fff; text-align: left; } html.cms-route-2d .cms-2d-production-copy h3 { margin: 0 0 12px; color: #fff; font-size: 20px; } html.cms-route-2d .cms-2d-production-copy ul { margin: 0 0 16px; padding: 0; list-style: none; line-height: 1.55; } html.cms-route-2d .cms-2d-production-copy a { color: #fff; font-weight: 700; text-decoration: underline; } html.cms-route-2d .cms-2d-client-collage { position: relative; display: block; width: min(980px, calc(100% - 40px)); height: 460px; margin: 0 auto; } html.cms-route-2d .cms-2d-client-collage img { position: absolute; width: auto !important; height: auto !important; object-fit: contain !important; } html.cms-route-2d .cms-2d-client-collage img:nth-child(1) { top: 124px; left: -30px; width: 372px !important; } html.cms-route-2d .cms-2d-client-collage img:nth-child(2) { top: 85px; left: 440px; width: 242px !important; } html.cms-route-2d .cms-2d-client-collage img:nth-child(3) { top: 180px; left: 187px; width: 242px !important; } html.cms-route-2d .cms-2d-client-collage img:nth-child(4) { top: 0; left: 715px; width: 271px !important; } html.cms-route-2d .cms-2d-client-collage img:nth-child(5) { top: 33px; left: 510px; width: 226px !important; } /* ------------------------------- Miniatures ------------------------------- */ html.cms-route-miniatures :is(#cms-page-order-host, main) > .sub-hero { padding: 0 !important; background: #ab5db2 !important; } html.cms-route-miniatures :is(#cms-page-order-host, main) > .sub-hero > img { display: block; width: 100vw !important; max-width: none !important; height: min(61vw, 1166px) !important; margin: 0 !important; border-radius: 0 !important; object-fit: cover !important; } html.cms-route-miniatures :is(#cms-page-order-host, main) > .cms-miniatures-opening { display: flex; flex-direction: column; align-items: center; padding: 68px 20px 84px !important; color: #fff !important; background: #ab5db2 !important; } html.cms-route-miniatures .cms-miniatures-opening > h1 { margin: 0 auto 54px; color: #fa82a6; font-size: 78px; line-height: 1.1; text-align: center; } html.cms-route-miniatures .cms-miniatures-opening > p { width: min(710px, calc(100% - 20px)); margin: 0 auto 60px; color: #fff; font-size: 19px; line-height: 1.85; } html.cms-route-miniatures .cms-miniatures-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(920px, 100%); margin: 0 auto; } html.cms-route-miniatures .cms-miniatures-mosaic img { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto !important; border-radius: 16px; object-fit: cover !important; } html.cms-route-miniatures :is(#cms-page-order-host, main) > .cms-miniatures-services { padding: 84px 20px 90px !important; color: #fff !important; background: #835eb5 !important; } html.cms-route-miniatures .cms-miniatures-services > h2 { margin-bottom: 80px; } html.cms-route-miniatures .cms-miniatures-services .editorial-list { display: grid; gap: 72px; width: min(1100px, 100%); } html.cms-route-miniatures .cms-miniature-service-row { display: grid !important; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr) !important; align-items: center; gap: 58px !important; min-height: 410px; } html.cms-route-miniatures .cms-miniature-service-row > div:not(.cms-miniature-service-media) { grid-column: 1; grid-row: 1; } html.cms-route-miniatures .cms-miniature-service-media { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); align-items: center; gap: 14px; min-width: 0; } html.cms-route-miniatures .cms-miniature-service-media img { display: block; width: 100%; height: 390px !important; object-fit: contain !important; } html.cms-route-miniatures .cms-miniatures-service-carousel { gap: 8px !important; } html.cms-route-miniatures .cms-miniatures-service-carousel img { display: block; width: 100%; aspect-ratio: 277 / 208; height: auto !important; object-fit: cover !important; } html.cms-route-miniatures .cms-native-carousel-shell[data-carousel-kind="miniatures"] { width: min(1120px, calc(100% - 20px)); margin-top: 74px; } html.cms-route-miniatures .cms-native-carousel-shell[data-carousel-kind="miniatures"] .cms-native-carousel > * { flex-basis: calc((100% - 24px) / 4); } /* ---------------------------------- Toys ---------------------------------- */ html.cms-route-toys :is(#cms-page-order-host, main) > .cms-toys-opening { display: flex; flex-direction: column; align-items: center; padding: 84px 20px 90px !important; color: #fff !important; background: #ab5db2 !important; } html.cms-route-toys .cms-toys-opening > img:first-child { display: block; aspect-ratio: 791 / 472; width: min(791px, 100%); height: auto !important; margin: 0 auto 56px; border-radius: 16px; object-fit: cover !important; } html.cms-route-toys .cms-toys-opening > h1 { margin: 0 auto 44px; color: #fffcb3; font-size: 78px; line-height: 1.1; text-align: center; } html.cms-route-toys .cms-toys-opening > p { width: min(760px, calc(100% - 20px)); margin: 0 auto 58px; color: #fff; font-size: 18px; line-height: 1.72; } html.cms-route-toys .cms-toys-intro-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(920px, 100%); margin: 0 auto; } html.cms-route-toys .cms-toys-intro-mosaic img { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto !important; border-radius: 16px; object-fit: cover !important; } html.cms-route-toys #cms-page-order-host > .cms-toys-materials { padding: 86px 20px 100px !important; color: #fff !important; background: #71b1e7 !important; } html.cms-route-toys .cms-toys-materials .reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 80px; width: min(1050px, 100%); } html.cms-route-toys .cms-toys-material-card { display: grid; grid-template-rows: 320px auto auto 320px; align-items: start; gap: 20px; text-align: left; } html.cms-route-toys .cms-toys-material-card > img { display: block; width: 100%; height: 320px !important; border-radius: 16px; object-fit: cover !important; } html.cms-route-toys .cms-toys-material-card h3, html.cms-route-toys .cms-toys-premium-card h3 { margin: 0; color: #fff; font-size: 22px; } html.cms-route-toys .cms-toys-material-card p, html.cms-route-toys .cms-toys-premium-card p { margin: 0; color: #fff; line-height: 1.6; } html.cms-route-toys #cms-page-order-host > .cms-toys-premium { padding: 88px 20px 110px !important; color: #fff !important; background: #835eb5 !important; } html.cms-route-toys .cms-toys-premium .reason-grid { display: grid; grid-template-columns: 1fr; gap: 90px; width: min(980px, 100%); } html.cms-route-toys .cms-toys-premium-card { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr); align-items: center; gap: 56px; text-align: left; } html.cms-route-toys .cms-toys-premium-card:nth-child(even) { grid-template-columns: minmax(0, 1.3fr) minmax(250px, .7fr); } html.cms-route-toys .cms-toys-premium-card:nth-child(even) .cms-toys-premium-copy { grid-column: 2; grid-row: 1; } html.cms-route-toys .cms-toys-premium-card:nth-child(even) .cms-toys-premium-media { grid-column: 1; grid-row: 1; } html.cms-route-toys .cms-toys-premium-media { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 14px; } html.cms-route-toys .cms-toys-premium-media img { display: block; width: 100%; height: 360px !important; border-radius: 16px; object-fit: contain !important; } @media (min-width: 1280px) { html.cms-route-2d #cms-page-order-host > .sub-hero.framed { height: 702px !important; min-height: 702px !important; box-sizing: border-box; } html.cms-route-2d #cms-page-order-host > .sub-intro { height: 448px !important; min-height: 448px !important; box-sizing: border-box; } html.cms-route-2d #cms-page-order-host > .cms-2d-work { height: 1141px !important; min-height: 1141px !important; box-sizing: border-box; } html.cms-route-2d #cms-page-order-host > .cms-2d-why { height: 954px !important; min-height: 954px !important; box-sizing: border-box; } html.cms-route-2d #cms-page-order-host > .cms-2d-art { height: 2395px !important; min-height: 2395px !important; padding-block: 84px !important; box-sizing: border-box; } html.cms-route-2d #cms-page-order-host > .cms-2d-story { height: 1891px !important; min-height: 1891px !important; padding-block: 75px !important; box-sizing: border-box; } html.cms-route-2d #cms-page-order-host > .cms-2d-production { height: 1038px !important; min-height: 1038px !important; padding-block: 70px !important; box-sizing: border-box; } html.cms-route-2d #cms-page-order-host > .cms-2d-clients { height: 798px !important; min-height: 798px !important; padding-block: 77px !important; box-sizing: border-box; } html.cms-route-2d #cms-page-order-host > .quote { height: 847px !important; min-height: 847px !important; box-sizing: border-box; } html.cms-route-miniatures :is(#cms-page-order-host, main) > .quote, html.cms-route-toys :is(#cms-page-order-host, main) > .quote { height: 886px !important; min-height: 886px !important; box-sizing: border-box; } html.cms-route-miniatures :is(#cms-page-order-host, main) > .cms-miniatures-opening { min-height: 1224px !important; } html.cms-route-miniatures :is(#cms-page-order-host, main) > .cms-miniatures-services { min-height: 2755px !important; } html.cms-route-toys :is(#cms-page-order-host, main) > .cms-toys-opening { min-height: 2009px !important; } html.cms-route-toys :is(#cms-page-order-host, main) > .cms-toys-materials { min-height: 1346px !important; } html.cms-route-toys :is(#cms-page-order-host, main) > .cms-toys-premium { min-height: 1310px !important; } } @media (max-width: 800px) { html.cms-route-2d .cms-2d-why .reason-grid, html.cms-route-2d .cms-2d-art-composition, html.cms-route-2d .cms-2d-production .poster-grid, html.cms-route-miniatures .cms-miniatures-mosaic, html.cms-route-toys .cms-toys-intro-mosaic, html.cms-route-toys .cms-toys-materials .reason-grid { grid-template-columns: 1fr !important; } html.cms-route-2d .cms-2d-art-panel, html.cms-route-2d .cms-2d-story-panel { display: flex !important; width: 100% !important; flex-direction: column !important; align-items: flex-start; gap: 12px; } html.cms-route-2d .cms-2d-art-panel img, html.cms-route-2d .cms-2d-story-panel img { grid-area: auto !important; width: 100% !important; } html.cms-route-2d .cms-2d-art-panel figcaption, html.cms-route-2d .cms-2d-story-panel figcaption { grid-area: auto !important; max-width: 100%; font-size: 28px; } html.cms-route-2d .cms-2d-story-panel-4 { align-items: center; } html.cms-route-2d .cms-2d-story-panel-4 figcaption { font-size: 38px; } html.cms-route-2d .cms-2d-client-collage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; height: auto; } html.cms-route-2d .cms-2d-client-collage img { position: static !important; width: 100% !important; height: 150px !important; } html.cms-route-miniatures :is(#cms-page-order-host, main) > .sub-hero > img { width: 100% !important; height: 62vw !important; border-radius: 0 !important; } html.cms-route-miniatures .cms-miniatures-opening > h1, html.cms-route-toys .cms-toys-opening > h1 { font-size: clamp(42px, 13vw, 62px); } html.cms-route-miniatures .cms-miniatures-mosaic, html.cms-route-toys .cms-toys-intro-mosaic { grid-template-columns: repeat(2, 1fr) !important; } html.cms-route-miniatures .cms-miniature-service-row, html.cms-route-toys .cms-toys-premium-card, html.cms-route-toys .cms-toys-premium-card:nth-child(even) { display: grid !important; grid-template-columns: 1fr !important; min-height: 0; gap: 24px !important; } html.cms-route-miniatures .cms-miniature-service-row > div, html.cms-route-toys .cms-toys-premium-card > * { grid-column: 1 !important; grid-row: auto !important; } html.cms-route-miniatures .cms-miniature-service-media img, html.cms-route-toys .cms-toys-premium-media img { height: auto !important; max-height: 420px; } html.cms-route-miniatures .cms-native-carousel-shell[data-carousel-kind="miniatures"] .cms-native-carousel > * { flex-basis: 82%; } html.cms-route-toys .cms-toys-material-card { grid-template-rows: none; gap: 18px; } html.cms-route-toys .cms-toys-material-card > img { height: auto !important; max-height: 420px; } } /* ========================================================================== Safe repair layer (2026-07-23) -------------------------------------------------------------------------- The rules above are retained as a compatibility baseline for older saved content. These final rules remove the fixed canvas heights that caused blank areas and section overlap. A section with an explicit editor height keeps that authored value through data-cms-explicit-size. ========================================================================== */ html.cms-ogopogo-subpage #cms-page-order-host > section:not([data-cms-explicit-size="true"]), html.cms-ogopogo-subpage main > section:not([data-cms-explicit-size="true"]) { height: auto !important; min-height: 0 !important; max-height: none !important; box-sizing: border-box; } html.cms-ogopogo-subpage #cms-page-order-host > section:not(.sub-hero):not(.visual-story):not([data-cms-explicit-size="true"]), html.cms-ogopogo-subpage main > section:not(.sub-hero):not(.visual-story):not([data-cms-explicit-size="true"]) { padding-block: clamp(58px, 6vw, 92px) !important; } html.cms-ogopogo-subpage .sub-hero-shade, html.cms-ogopogo-subpage .sub-hero-shade::before { display: none !important; content: none !important; opacity: 0 !important; background: transparent !important; animation: none !important; filter: none !important; pointer-events: none !important; } html.cms-ogopogo-subpage .sub-hero { animation: none !important; } html.cms-ogopogo-subpage :is(.client-grid, .cms-2d-client-collage, [data-cms-logo-grid]) img, html.cms-ogopogo-subpage img[data-cms-media-role="logo"] { max-width: 100% !important; object-fit: contain !important; object-position: center !important; background: transparent !important; transform: none !important; } /* 2D work: exact independent 3 x 2 media grid; no carousel on desktop. */ html.cms-route-2d .cms-2d-work .two-d-work, html.cms-route-2d .cms-2d-work .sub-film-gallery { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 44px 22px !important; width: min(1120px, calc(100% - 40px)) !important; margin: 0 auto !important; overflow: visible !important; } html.cms-route-2d .cms-2d-work .local-video-card { width: auto !important; min-width: 0 !important; transform: none !important; } html.cms-route-2d .cms-2d-work .video-thumb, html.cms-route-2d .cms-2d-work .video-thumb img { display: block; width: 100% !important; aspect-ratio: 16 / 9; } html.cms-route-2d .cms-2d-work .video-thumb img { height: 100% !important; object-fit: cover !important; } /* Client/brand logos are independent, evenly spaced, and never cropped. */ html.cms-ogopogo-subpage.cms-route-2d #cms-page-order-host > .cms-2d-clients { color: #7f409f !important; background: #fff !important; background-color: #fff !important; } html.cms-route-2d .cms-2d-client-collage { position: static !important; display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; align-items: center !important; gap: clamp(18px, 2.4vw, 42px) !important; width: min(1040px, calc(100% - 40px)) !important; height: auto !important; min-height: 0 !important; margin: 0 auto !important; } html.cms-route-2d .cms-2d-client-collage img { position: static !important; inset: auto !important; display: block !important; grid-column: span 2; width: 100% !important; height: clamp(170px, 18vw, 250px) !important; margin: 0 auto !important; padding: 12px !important; object-fit: contain !important; object-position: center !important; box-sizing: border-box; } html.cms-route-2d .cms-2d-client-collage img:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; } html.cms-route-2d .cms-2d-client-collage img:nth-child(2) { grid-column: 3 / span 2; grid-row: 1; } html.cms-route-2d .cms-2d-client-collage img:nth-child(3) { grid-column: 2 / span 2; grid-row: 2; } html.cms-route-2d .cms-2d-client-collage img:nth-child(4) { grid-column: 5 / span 2; grid-row: 1; } html.cms-route-2d .cms-2d-client-collage img:nth-child(5) { grid-column: 4 / span 2; grid-row: 2; } /* Stop-motion structural repair. */ html.cms-route-stop-motion .cms-stop-process .process-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: start !important; gap: clamp(24px, 3vw, 42px) !important; width: min(1120px, calc(100% - 40px)) !important; margin: 0 auto !important; } html.cms-route-stop-motion .cms-stop-process .process-grid article { min-width: 0; text-align: center; } html.cms-route-stop-motion .cms-stop-process .process-grid img, html.cms-route-stop-motion .cms-stop-process .process-grid video { display: block; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover !important; background: transparent !important; border-radius: 20px !important; } html.cms-route-stop-motion .cms-stop-why .reason-grid { position: relative; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: start !important; gap: clamp(24px, 2.4vw, 40px) !important; width: min(1000px, calc(100% - 40px)) !important; margin: 52px auto 0 !important; } html.cms-route-stop-motion .cms-stop-why .reason-grid article:nth-child(2) { margin-top: 186px; } html.cms-route-stop-motion .cms-stop-why .reason-grid article:nth-child(3) { margin-top: 352px; } html.cms-route-stop-motion .cms-stop-why { position: relative !important; min-height: 980px !important; padding-top: 26px !important; padding-bottom: 70px !important; overflow: hidden !important; } html.cms-route-stop-motion .cms-stop-why > h2 { margin: 0 auto 24px !important; } html.cms-route-stop-motion .cms-stop-why__lede { position: absolute !important; z-index: 1; top: 168px !important; left: calc(50% - 120px) !important; width: min(590px, calc(50% - 28px)) !important; margin: 0 !important; color: #fff !important; font-size: clamp(18px, 1.7vw, 24px) !important; line-height: 1.8 !important; text-align: left !important; } html.cms-route-stop-motion .cms-stop-why__card { display: flex !important; min-width: 0 !important; flex-direction: column !important; align-items: stretch !important; text-align: left !important; } html.cms-route-stop-motion .cms-stop-why__image { display: block !important; order: -1; width: 100% !important; height: auto !important; aspect-ratio: 307 / 200; margin: 0 0 52px !important; object-fit: cover !important; object-position: center !important; background: transparent !important; } html.cms-route-stop-motion .cms-stop-why__card :is(h3, p) { color: #fff !important; text-align: left !important; } html.cms-route-stop-motion .cms-stop-why__card h3 { width: max-content; max-width: 100%; margin: 0 0 14px !important; padding: 2px 5px; background: rgba(128, 58, 150, .78); } html.cms-route-stop-motion .cms-stop-why__card p { margin: 0 !important; line-height: 1.65 !important; } html.cms-route-stop-motion .cms-stop-campaign .campaign { display: grid !important; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important; align-items: center !important; gap: clamp(28px, 4vw, 64px) !important; width: min(920px, calc(100% - 40px)) !important; margin: 0 auto !important; } html.cms-route-stop-motion .cms-stop-campaign .campaign :is(video, img) { display: block; width: 100% !important; height: auto !important; object-fit: contain !important; background: #000; } /* Toys Premium Package: two alternating copy/media rows with editable images. */ html.cms-route-toys .cms-toys-premium .reason-grid { display: grid !important; grid-template-columns: 1fr !important; gap: clamp(58px, 7vw, 100px) !important; width: min(1060px, calc(100% - 40px)) !important; margin: 0 auto !important; } html.cms-route-toys .cms-toys-premium-card, html.cms-route-toys .cms-toys-premium-card:nth-child(even) { display: grid !important; grid-template-columns: minmax(240px, .68fr) minmax(0, 1.32fr) !important; align-items: center !important; gap: clamp(30px, 4vw, 64px) !important; } html.cms-route-toys .cms-toys-premium-card:nth-child(even) { grid-template-columns: minmax(0, 1.32fr) minmax(240px, .68fr) !important; } html.cms-route-toys .cms-toys-premium-media { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: center !important; gap: 14px !important; } html.cms-route-toys .cms-toys-premium-media img { display: block !important; width: 100% !important; height: auto !important; max-height: 440px; object-fit: contain !important; } /* One shared quote formation across every Ogopogo route. */ html.cms-ogopogo-subpage .cms-shared-quote, html.cms-ogopogo-subpage #cms-page-order-host > .quote { padding: 44px 20px 88px !important; color: #111 !important; background: #e95a99 !important; } html.cms-ogopogo-subpage .cms-shared-quote .quote-form, html.cms-ogopogo-subpage #cms-page-order-host > .quote .quote-form { display: grid !important; width: min(662px, 100%) !important; margin: 0 auto !important; } html.cms-ogopogo-subpage .cms-shared-quote .quote-form > h2, html.cms-ogopogo-subpage #cms-page-order-host > .quote .quote-form > h2 { margin: 0 0 19px !important; color: #fff !important; font-size: 38px !important; line-height: 1.1 !important; text-align: center !important; } html.cms-ogopogo-subpage .cms-shared-quote .form-grid, html.cms-ogopogo-subpage #cms-page-order-host > .quote .form-grid { display: grid !important; grid-template-columns: 250px 394px !important; grid-template-rows: repeat(6, auto) !important; align-items: stretch !important; gap: 13px 18px !important; } html.cms-ogopogo-subpage .cms-shared-quote .form-grid > label, html.cms-ogopogo-subpage #cms-page-order-host > .quote .form-grid > label { grid-column: 1 !important; grid-row: auto !important; gap: 7px !important; color: #111 !important; font-size: 14px !important; line-height: 1.05 !important; } html.cms-ogopogo-subpage .cms-shared-quote .form-grid > label:last-child, html.cms-ogopogo-subpage #cms-page-order-host > .quote .form-grid > label:last-child { grid-column: 2 !important; grid-row: 1 / 7 !important; } html.cms-ogopogo-subpage .cms-shared-quote .form-grid > label:last-child textarea, html.cms-ogopogo-subpage #cms-page-order-host > .quote .form-grid > label:last-child textarea { height: 100% !important; min-height: 434px !important; } html.cms-ogopogo-subpage .cms-shared-quote .quote-form :is(input:not([type="file"]), textarea), html.cms-ogopogo-subpage #cms-page-order-host > .quote .quote-form :is(input:not([type="file"]), textarea) { box-sizing: border-box !important; width: 100% !important; border: 1px solid #222 !important; border-radius: 0 !important; background: #fff !important; color: #111 !important; } html.cms-ogopogo-subpage .cms-shared-quote .quote-form input:not([type="file"]), html.cms-ogopogo-subpage #cms-page-order-host > .quote .quote-form input:not([type="file"]) { height: 41px !important; min-height: 41px !important; padding: 8px 10px !important; } html.cms-ogopogo-subpage .cms-shared-quote .quote-form .file-label input[type="file"], html.cms-ogopogo-subpage #cms-page-order-host > .quote .quote-form .file-label input[type="file"] { box-sizing: border-box !important; width: 100% !important; min-height: 41px !important; padding: 8px 10px !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; color: #555 !important; } html.cms-ogopogo-subpage .cms-shared-quote .quote-form > button, html.cms-ogopogo-subpage #cms-page-order-host > .quote .quote-form > button { width: 100% !important; min-height: 42px !important; margin-top: 36px !important; padding: 8px 24px !important; border: 2px solid #fff !important; border-radius: 999px !important; background: #ad58b7 !important; color: #fff !important; } @media (max-width: 1024px) { html.cms-route-2d .cms-2d-work .two-d-work, html.cms-route-2d .cms-2d-work .sub-film-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html.cms-route-2d .cms-2d-client-collage { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html.cms-route-2d .cms-2d-client-collage img, html.cms-route-2d .cms-2d-client-collage img:nth-child(1), html.cms-route-2d .cms-2d-client-collage img:nth-child(2), html.cms-route-2d .cms-2d-client-collage img:nth-child(3), html.cms-route-2d .cms-2d-client-collage img:nth-child(4), html.cms-route-2d .cms-2d-client-collage img:nth-child(5) { grid-column: auto; grid-row: auto; } } @media (max-width: 800px) { html.cms-ogopogo-subpage #cms-page-order-host > section:not(.sub-hero):not(.visual-story):not([data-cms-explicit-size="true"]), html.cms-ogopogo-subpage main > section:not(.sub-hero):not(.visual-story):not([data-cms-explicit-size="true"]) { padding: 50px 16px 58px !important; } html.cms-route-2d .cms-2d-work .two-d-work, html.cms-route-2d .cms-2d-work .sub-film-gallery, html.cms-route-stop-motion .cms-stop-process .process-grid, html.cms-route-stop-motion .cms-stop-why .reason-grid { grid-template-columns: 1fr !important; width: min(100%, 620px) !important; } html.cms-route-2d .cms-2d-client-collage { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; width: 100% !important; } html.cms-route-2d .cms-2d-client-collage img { grid-column: auto !important; height: 132px !important; padding: 6px !important; } html.cms-route-2d .cms-2d-client-collage img:last-child { grid-column: 1 / -1 !important; width: 50% !important; } html.cms-route-stop-motion .cms-stop-why .reason-grid article:nth-child(2) { margin-top: 0; } html.cms-route-stop-motion .cms-stop-why .reason-grid article:nth-child(3) { margin-top: 0; } html.cms-route-stop-motion .cms-stop-why { min-height: 0 !important; overflow: visible !important; } html.cms-route-stop-motion .cms-stop-why__lede { position: static !important; width: min(100%, 620px) !important; margin: 0 auto 34px !important; font-size: 18px !important; line-height: 1.6 !important; text-align: center !important; } html.cms-route-stop-motion .cms-stop-why .reason-grid { margin-top: 0 !important; gap: 48px !important; } html.cms-route-stop-motion .cms-stop-why__image { margin-bottom: 22px !important; } html.cms-route-stop-motion .cms-stop-campaign .campaign { grid-template-columns: 1fr !important; width: min(100%, 680px) !important; } html.cms-route-toys .cms-toys-premium-card, html.cms-route-toys .cms-toys-premium-card:nth-child(even) { grid-template-columns: 1fr !important; gap: 28px !important; } html.cms-route-toys .cms-toys-premium-card > *, html.cms-route-toys .cms-toys-premium-card:nth-child(even) > * { grid-column: 1 !important; grid-row: auto !important; } html.cms-route-toys .cms-toys-premium-media { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html.cms-ogopogo-subpage .cms-shared-quote .form-grid, html.cms-ogopogo-subpage #cms-page-order-host > .quote .form-grid { grid-template-columns: 1fr !important; grid-template-rows: auto !important; } html.cms-ogopogo-subpage .cms-shared-quote .form-grid > *, html.cms-ogopogo-subpage #cms-page-order-host > .quote .form-grid > * { grid-column: 1 !important; grid-row: auto !important; } html.cms-ogopogo-subpage .cms-shared-quote .form-grid > label:last-child textarea, html.cms-ogopogo-subpage #cms-page-order-host > .quote .form-grid > label:last-child textarea { min-height: 240px !important; } } @media (max-width: 480px) { html.cms-route-toys .cms-toys-premium-media { grid-template-columns: 1fr !important; } html.cms-route-2d .cms-2d-client-collage img { height: 116px !important; } } /* Final route guards: these rules intentionally come last so legacy exported dimensions cannot override responsive flow or crop authored artwork. */ html.cms-route-miniatures :is(#cms-page-order-host, main) > .sub-hero { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1265 / 1166 !important; overflow: hidden !important; } html.cms-route-miniatures :is(#cms-page-order-host, main) > .sub-hero > img { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: contain !important; object-position: center !important; } html.cms-route-thebadelves .visual-story.cms-bad-elves-layout > img:first-child { position: relative !important; left: 50% !important; align-self: flex-start !important; width: 1422px !important; max-width: none !important; margin-inline: 0 !important; translate: -50% 0 !important; transform: none !important; } @media (max-width: 800px) { html.cms-route-2d .cms-2d-art-composition { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; } html.cms-route-2d .cms-2d-art-composition > *, html.cms-route-2d .cms-2d-art-panel, html.cms-route-2d .cms-2d-art-panel-1, html.cms-route-2d .cms-2d-art-panel-2, html.cms-route-2d .cms-2d-art-panel-3, html.cms-route-2d .cms-2d-art-panel-4, html.cms-route-2d .cms-2d-art-panel-5, html.cms-route-2d .cms-2d-art-panel-6, html.cms-route-2d .cms-2d-art-panel-7 { grid-column: 1 !important; grid-row: auto !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: hidden !important; } html.cms-route-2d .cms-2d-art-panel img, html.cms-route-2d .cms-2d-art-panel figcaption { grid-column: 1 !important; grid-row: auto !important; width: 100% !important; max-width: 100% !important; } html.cms-route-2d .cms-2d-art-divider { grid-column: 1 !important; width: min(72%, 608px) !important; } html.cms-ogopogo-subpage .cms-shared-quote .quote-form, html.cms-ogopogo-subpage #cms-page-order-host > .quote .quote-form { width: min(312px, 100%) !important; } html.cms-ogopogo-subpage .cms-shared-quote .form-grid, html.cms-ogopogo-subpage #cms-page-order-host > .quote .form-grid { display: flex !important; flex-direction: column !important; width: 100% !important; } html.cms-ogopogo-subpage .cms-shared-quote .form-grid > label, html.cms-ogopogo-subpage .cms-shared-quote .form-grid > label:last-child, html.cms-ogopogo-subpage #cms-page-order-host > .quote .form-grid > label, html.cms-ogopogo-subpage #cms-page-order-host > .quote .form-grid > label:last-child { display: grid !important; width: 100% !important; max-width: 100% !important; grid-column: 1 !important; grid-row: auto !important; } html.cms-ogopogo-subpage .cms-shared-quote .form-grid > label:last-child textarea, html.cms-ogopogo-subpage #cms-page-order-host > .quote .form-grid > label:last-child textarea { height: auto !important; min-height: 240px !important; } } /* Toys Materials: equal editable cards with uncropped media. These final guards override malformed legacy dimensions from the exported page. */ html.cms-route-toys :is(#cms-page-order-host, main) > .cms-toys-materials { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: clamp(64px, 6vw, 92px) 20px clamp(72px, 7vw, 104px) !important; overflow: visible !important; box-sizing: border-box !important; } html.cms-route-toys .cms-toys-materials .reason-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: start !important; gap: clamp(28px, 4vw, 64px) !important; width: min(1180px, calc(100% - 40px)) !important; max-width: 1180px !important; margin: 0 auto !important; } html.cms-route-toys .cms-toys-material-card { position: relative !important; inset: auto !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: auto auto auto !important; align-items: start !important; gap: 18px 14px !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; transform: none !important; translate: none !important; box-sizing: border-box !important; } html.cms-route-toys .cms-toys-material-card > img { position: static !important; inset: auto !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: clamp(210px, 19vw, 270px) !important; min-height: 210px !important; max-height: 270px !important; margin: 0 !important; border-radius: 16px !important; object-fit: contain !important; object-position: 50% 50% !important; transform: none !important; translate: none !important; } html.cms-route-toys .cms-toys-material-card > img:first-of-type { grid-column: 1 !important; grid-row: 1 !important; } html.cms-route-toys .cms-toys-material-card > img:last-of-type { grid-column: 2 !important; grid-row: 1 !important; } html.cms-route-toys .cms-toys-material-card > h3 { grid-column: 1 / -1 !important; grid-row: 2 !important; } html.cms-route-toys .cms-toys-material-card > p { grid-column: 1 / -1 !important; grid-row: 3 !important; } @media (max-width: 1024px) { html.cms-route-toys .cms-toys-materials .reason-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html.cms-route-toys .cms-toys-material-card:nth-child(3) { grid-column: 1 / -1 !important; width: min(560px, 100%) !important; justify-self: center !important; } } @media (max-width: 700px) { html.cms-route-toys .cms-toys-materials .reason-grid { grid-template-columns: minmax(0, 1fr) !important; width: min(100%, 440px) !important; } html.cms-route-toys .cms-toys-material-card:nth-child(3) { grid-column: auto !important; width: 100% !important; } html.cms-route-toys .cms-toys-material-card > img { height: clamp(180px, 52vw, 250px) !important; min-height: 180px !important; } }