/* Canyon Creek - post-Duda static fixes. Duda hides every animated element up front and reveals it with a scroll runtime that does not exist in a static export. #dmRoot is the , so these selectors outrank Duda's class-only rules. Content appears instead of animating in, which is the right trade for a static site. */ #dmRoot [data-anim-extended], #dmRoot [data-anim-desktop]:not([data-anim-desktop='none']), #dmRoot [data-anim-tablet]:not([data-anim-tablet='none']), #dmRoot [data-anim-mobile]:not([data-anim-mobile='none']), #dmRoot .dmNewParagraph[data-anim-extended], #dmRoot .flex-element [data-anim-extended] { visibility: visible !important; opacity: 1 !important; } /* Galleries gate their thumbnails on a .ready class the same runtime adds. */ #dmRoot .dmPhotoGalleryHolder:not(.ready) li.photoGalleryThumbs { visibility: visible !important; display: inline-block !important; } /* --------------------------------------------------------------------------- Header background on scroll. The fixed header is transparent so the hero shows through; once the page scrolls it takes the footer's navy (#0F2048, read off the computed style of the footer's own container rather than guessed) so the nav stays readable over content. The `vg-scrolled` class is applied to #dmRoot by Scripts/vg-header-scroll.js. #dmRoot IS the , so `#dmRoot.vg-scrolled .dmHeaderContainer` puts an id in the selector and outranks Duda's class-only rules -- which is necessary here, because Duda's 900KB stylesheet sets these backgrounds with !important of its own. --------------------------------------------------------------------------- */ #dmRoot .dmHeaderContainer, #dmRoot #hamburger-header-container, #dmRoot #hamburger-header { transition: background-color 280ms ease; } #dmRoot.vg-scrolled .dmHeaderContainer, #dmRoot.vg-scrolled #hamburger-header-container, #dmRoot.vg-scrolled #hamburger-header { background-color: #0F2048 !important; } /* Someone who has asked for less motion still needs the readable background -- they just should not watch it fade in. */ @media (prefers-reduced-motion: reduce) { #dmRoot .dmHeaderContainer, #dmRoot #hamburger-header-container, #dmRoot #hamburger-header { transition: none; } } /* --------------------------------------------------------------------------- Duplicated nav in the hamburger bar. The desktop and tablet builds ship a full inline

INSIDE #hamburger-header, alongside the hamburger button. Duda's runtime hides it and serves the drawer instead; with no runtime, both render at once — six nav links stacked under the logo, plus a dropdown sub-nav rendering permanently expanded, which is what pushes the header to 138px tall. The drawer (#hamburger-drawer) is a separate element outside #hamburger-header and holds its own copy of these links, so hiding this one loses nothing. No media query needed: #hamburger-header-container is .showOnMedium and is already display:none at large widths. The mobile build has no #hamburger-header at all, so this is a no-op there. --------------------------------------------------------------------------- */ #dmRoot #hamburger-header nav.unifiednav, #dmRoot #hamburger-header .main-navigation { display: none !important; } /* --------------------------------------------------------------------------- Heading semantics on the bio and property pages. Those pages shipped a generic

("Our Team" / "Featured Assets") while the actual subject — the person's name, the asset name — sat in a plain
. The tags were swapped so the h1 names the subject. These rules exist ONLY to make that swap invisible: each selector pins the swapped tag to the value measured on the page BEFORE the change. Nothing here is a design decision. Sizes differ per build (desktop/tablet 50px & 30px, mobile 32px & 28px), so they are scoped by body class. A single unscoped !important would have silently rescaled every mobile bio. --------------------------------------------------------------------------- / / The demoted eyebrow: was

, now
. / #dmRoot.dmDesktopBody .vg-eyebrow, #dmRoot.dmDesktopBody .vg-eyebrow span { font-size: 50px !important; } #dmRoot.dmMobileBody .vg-eyebrow, #dmRoot.dmMobileBody .vg-eyebrow span { font-size: 32px !important; } #dmRoot .vg-eyebrow { font-weight: 400 !important; line-height: normal !important; color: #fff !important; display: block !important; margin: 0 !important; padding: 0 !important; } / The promoted subject: was
, now

. / #dmRoot.dmDesktopBody h1.vg-name { font-size: 30px !important; } #dmRoot.dmMobileBody h1.vg-name { font-size: 28px !important; } #dmRoot h1.vg-name { font-weight: 400 !important; line-height: normal !important; color: rgb(15, 32, 72) !important; display: block !important; margin: 0 !important; padding: 0 !important; text-transform: none !important; letter-spacing: normal !important; } / --------------------------------------------------------------------------- DO NOT reset .dmInner's 768px min-width. It looks like the obvious fix for horizontal overflow below 768px and it is actively harmful. Duda's desktop/tablet builds set `.dmInner { min-width: 768px !important }`. Removing that floor does stop the overflow -- and collapses the responsive grid, because the columns are sized for a >=768px canvas. Measured on Canyon Creek at 390px with the floor removed: 34 elements squeezed, columns down to 25px, and an

rendered 25px wide by 1337px tall — every heading wrapped one character per line. Overflow read 0px the whole time, which is exactly why an overflow-only check passed it. A horizontal scrollbar is far better than illegible text, so the floor stays. This only affects a DESKTOP browser resized below 768px. Real phones are served the mobile build, which is correct at 390px (0 overflow, 0 squeezed elements) — device selection is server-side by User-Agent, so a narrow window is not a mobile visitor. If narrow-viewport desktop-build visitors ever need handling, switch them to the mobile BUILD; do not restyle this one. --------------------------------------------------------------------------- */