/* ============================================================================ scrollcraft.css: the taste floor ---------------------------------------------------------------------------- Two layers, and the split matters: TOKENS what you override per brand. Colour roles, the type ramp, the spacing scale, elevation, motion. A brand is ~12 values. DEVICES what the engine drives. Do not restyle these to taste; they are the mechanism. Style your own markup instead. Nothing here draws a "component". There are no card, badge, or pill classes, because a stylesheet that ships those is how every page built on it ends up with the same shapes. You get a floor and a vocabulary; the composition is yours. ========================================================================== */ /* ---------------------------------------------------------------- tokens -- */ .dw-journey { /* --- colour roles. Override these six and the page is rebranded. -------- */ --sc-canvas: #08090b; /* the page ground. Drift interpolates this. */ --sc-surface: #101217; /* anything raised off the ground */ --sc-ink: #f4f2ef; /* primary text */ --sc-ink-soft: #9a9ba1; /* secondary text. Tinted, never flat gray. */ --sc-accent: #d8ff3e; /* ONE accent. It owns a region, not confetti. */ --sc-accent-ink: #08090b; /* text that sits on the accent */ --sc-hairline: color-mix(in oklab, var(--sc-ink) 12%, transparent); --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent); /* --- type. Two families max. Display carries voice, text carries prose. - */ --sc-font-display: "Instrument Sans", "Geist", system-ui, sans-serif; --sc-font-text: "Geist", system-ui, sans-serif; --sc-font-mono: "Geist Mono", ui-monospace, monospace; /* Fluid ramp. Tracking tightens as size grows because a face set at 6rem with 0 tracking reads loose; this is optical correction, not decoration. */ --sc-t-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem); --sc-t-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem); --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem); --sc-t-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); --sc-t-xl: clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem); --sc-t-2xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem); --sc-t-3xl: clamp(2.8rem, 1.9rem + 4.2vw, 5rem); --sc-t-4xl: clamp(3.4rem, 1.9rem + 6.6vw, 7.5rem); --sc-track-tight: -0.035em; --sc-track-snug: -0.02em; --sc-track-normal: -0.005em; --sc-track-wide: 0.08em; --sc-leading-none: 0.94; --sc-leading-tight: 1.06; --sc-leading-body: 1.62; --sc-measure: 62ch; /* --- space. 4px base: the useful middle steps an 8-only scale misses. --- */ --sc-1: 0.25rem; --sc-2: 0.5rem; --sc-3: 0.75rem; --sc-4: 1rem; --sc-5: 1.5rem; --sc-6: 2rem; --sc-7: 3rem; --sc-8: 4rem; --sc-9: 6rem; --sc-10: 8rem; --sc-11: 12rem; /* Section rhythm is fluid so a phone doesn't inherit desktop air. */ --sc-section: clamp(4.5rem, 9vw, 11rem); --sc-gutter: clamp(1.25rem, 5vw, 5.5rem); --sc-maxw: 82rem; /* --- radius. Pick one scale for the page and hold it. ------------------- */ --sc-r-sm: 6px; --sc-r-md: 12px; --sc-r-lg: 20px; --sc-r-pill: 999px; /* --- elevation. Every shadow has an offset AND a soft blur, and is tinted to the canvas hue. A zero-offset coloured halo is decoration, not depth, so there isn't one here. ---------------------------------- */ --sc-shadow-color: 220 40% 2%; --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.28), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.20); --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24), 0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30); --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.22), 0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.38), 0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.30); /* Edge light: a 1px top highlight sells a raised surface better than any amount of blur, because real raised things catch light on their lip. */ --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent); /* --- motion. Built-in CSS easings are too weak for UI. ------------------ */ --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --sc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --sc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --sc-d-fast: 160ms; --sc-d-base: 240ms; --sc-d-slow: 420ms; --sc-z-stage: 1; --sc-z-copy: 20; --sc-z-chrome: 60; } /* --------------------------------------------------------------- reset -- */ .dw-journey *, .dw-journey *::before, .dw-journey *::after { box-sizing: border-box; } .dw-journey { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { .dw-journey { scroll-behavior: auto; } } .dw-journey { margin: 0; background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); font-size: var(--sc-t-base); line-height: var(--sc-leading-body); letter-spacing: var(--sc-track-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis-weight: none; overflow-x: clip; } .dw-journey img, .dw-journey video, .dw-journey canvas, .dw-journey svg { display: block; max-width: 100%; } .dw-journey button, .dw-journey input, .dw-journey select, .dw-journey textarea { font: inherit; color: inherit; } /* ------------------------------------------------- the browser surfaces -- The parts you did not draw still carry the design. Selection, caret, focus ring, scrollbar and tabular numerals all ship with defaults that belong to no design system. Theming them is the cheapest signal that a page was built rather than assembled, and it is the step that gets skipped most reliably. */ .dw-journey ::selection { background: var(--sc-accent); color: var(--sc-accent-ink); } .dw-journey { caret-color: var(--sc-accent); accent-color: var(--sc-accent); } .dw-journey :focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: var(--sc-r-sm); } .dw-journey :where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; } @supports (scrollbar-color: auto) { .dw-journey { scrollbar-color: color-mix(in oklab, var(--sc-ink) 26%, transparent) transparent; scrollbar-width: thin; } } .dw-journey :where(table, .sc-nums, [data-sc-count]) { font-variant-numeric: tabular-nums; } /* ----------------------------------------------------------- typography -- */ .dw-journey .sc-display { font-family: var(--sc-font-display); font-weight: 500; line-height: var(--sc-leading-none); letter-spacing: var(--sc-track-tight); text-wrap: balance; margin: 0; } .dw-journey .sc-display--xl { font-size: var(--sc-t-4xl); } .dw-journey .sc-display--lg { font-size: var(--sc-t-3xl); } .dw-journey .sc-display--md { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); } .dw-journey .sc-lede { font-size: var(--sc-t-lg); line-height: 1.44; letter-spacing: var(--sc-track-snug); color: var(--sc-ink); max-width: 46ch; text-wrap: pretty; margin: 0; } .dw-journey .sc-.dw-journey { max-width: var(--sc-measure); color: var(--sc-ink-soft); text-wrap: pretty; margin: 0; } .dw-journey .sc-label { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); } /* ---------------------------------------------------------------- layout -- */ .dw-journey .sc-wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); } .dw-journey .sc-section { padding-block: var(--sc-section); } /* More space above a heading than below it: the gap belongs to the boundary, not to the pair. */ .dw-journey .sc-stack > * + * { margin-top: var(--sc-4); } .dw-journey .sc-stack > :is(h1,h2,h3) { margin-top: var(--sc-7); } .dw-journey .sc-stack > :is(h1,h2,h3):first-child { margin-top: 0; } .dw-journey .sc-rule { height: 1px; border: 0; background: var(--sc-hairline); margin: 0; } /* =============================================================== DEVICES == Driven by the engine. Restyle your own markup, not these. */ .dw-journey .sc-act--pinned { position: relative; } .dw-journey .sc-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; z-index: var(--sc-z-stage); } /* scrub / sequence media */ .dw-journey .sc-stage :is(video[data-sc-scrub], canvas[data-sc-sequence], .sc-stage__poster) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .dw-journey video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--sc-ease-out); } .dw-journey .sc-has-clip video[data-sc-scrub] { opacity: 1; } /* The poster is a live frame-holder, not a placeholder: it stays up until a real video frame has painted, which is what stops the blank-stage flash. */ .dw-journey .sc-stage__poster { z-index: 0; transition: opacity 380ms var(--sc-ease-out); } .dw-journey .sc-has-clip .sc-stage__poster { opacity: 0; } /* A scrim only where text sits. A full-frame darkening layer flattens the image everywhere to fix contrast in one corner. */ .dw-journey .sc-scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient( var(--sc-scrim-angle, 180deg), color-mix(in oklab, var(--sc-canvas) var(--sc-scrim-a, 78%), transparent) 0%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%, transparent 68%); } /* Point the scrim at the copy. A scrim gradient that darkens the top while the copy sits at the bottom fixes contrast nowhere and flattens the image everywhere, which is the most common way text-over-video goes wrong. */ .dw-journey .sc-scrim--bottom { --sc-scrim-angle: 0deg; } .dw-journey .sc-scrim--left { --sc-scrim-angle: 90deg; } .dw-journey .sc-scrim--right { --sc-scrim-angle: 270deg; } /* Corner scrims, for copy anchored to a corner. An edge gradient has to darken a whole band across the frame to cover one corner; a corner gradient puts the density where the text is and leaves the rest of the image alone. Pair with .sc-copy--lead / .sc-copy--trail. */ .dw-journey .sc-scrim--lead { background: linear-gradient(to top right, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%, transparent 72%); } .dw-journey .sc-scrim--trail { background: linear-gradient(to top left, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%, transparent 72%); } /* A band across the bottom, for copy that spans the full width of the frame. That is what both corner anchors become below 860px, and it is also the right shape whenever the copy block is wider than a corner. */ .dw-journey .sc-scrim--band { background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%, transparent 58%); } .dw-journey .sc-scrim--vignette { background: radial-gradient(120% 90% at 50% 45%, transparent 40%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 100%); } /* copy over a stage. max-width is in rem, never ch. A `ch` on this container resolves against the CONTAINER's font-size (body size), not the display size of the heading inside it, so `max-width: 20ch` here silently produces a ~180px column and wraps a hero headline to six lines. Set a ch measure on the text element itself. */ .dw-journey .sc-copy { position: absolute; z-index: var(--sc-z-copy); inset-inline: var(--sc-gutter); max-width: min(46rem, 76vw); will-change: opacity, transform; } .dw-journey .sc-copy--lead { left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); } /* inset-inline FIRST. It is the shorthand for left+right, so declaring it after `left: 50%` resets left to auto and the block drifts off the left edge. */ .dw-journey .sc-copy--center { inset-inline: auto; left: 50%; top: 50%; translate: -50% -50%; text-align: center; } .dw-journey .sc-copy--trail { inset-inline: auto; right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); text-align: right; } /* cue defaults: the engine writes opacity/transform inline, these are the pre-paint state so nothing flashes before the first read() */ .dw-journey [data-sc-cue] { opacity: 0; will-change: opacity, transform; } .dw-journey .sc-ready [data-sc-cue] { transition: none; } /* kinetic split */ .dw-journey .sc-split { display: inline-block; overflow: hidden; vertical-align: top; } /* Descenders live below the baseline; a line mask clipped to the line box eats the tails off g, y, p, j. The padding buys them room back. */ .dw-journey .sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; } .dw-journey .sc-split__i { display: inline-block; will-change: transform, opacity; } .dw-journey .sc-is-split { opacity: 1 !important; } /* horizontal rail */ .dw-journey [data-sc-pan] { display: flex; will-change: transform; } /* reveal + parallax */ .dw-journey [data-sc-reveal] { will-change: clip-path; } .dw-journey [data-sc-parallax] { will-change: transform; } /* flow reveal (fires once) */ .dw-journey [data-sc-in], .dw-journey [data-sc-stagger] > * { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out); } .dw-journey [data-sc-in].sc-in, .dw-journey [data-sc-stagger] > .sc-in { opacity: 1; transform: none; } /* pointer devices */ .dw-journey [data-sc-tilt] { transform-style: preserve-3d; will-change: transform; } .dw-journey [data-sc-magnet] { will-change: transform; } /* isolation always; position only if nothing more specific already set it. Written with :where() (zero specificity) on purpose: a plain `position: relative` here has the same weight as `.sc-stage` and, being later in the file, silently wins. A stage carrying both attributes then stops being sticky and the whole act scrolls away instead of pinning. */ .dw-journey [data-sc-spotlight] { isolation: isolate; } .dw-journey :where([data-sc-spotlight]) { position: relative; } .dw-journey [data-sc-spotlight]::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient( 28rem 28rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%), color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 70%); opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out); } .dw-journey [data-sc-spotlight]:hover::after { opacity: 1; } /* =========================================================== WORLDFLIGHT == One fixed stage for the whole page. The only thing in document flow is the spacer, and it is empty. If you find yourself adding a section here, you want act mode instead: the moment a real block scrolls past the fixed stage, the page has a seam again and the whole point is gone. */ .dw-journey [data-sc-mode="worldflight"] { position: relative; } .dw-journey .sc-world { position: fixed; inset: 0; overflow: clip; z-index: var(--sc-z-stage); background: var(--sc-canvas); } /* Every leg is mounted for the life of the page and stacked in the same box. The engine owns opacity, visibility and z-index here; do not set them. */ .dw-journey .sc-world__seg { position: absolute; inset: 0; opacity: 0; will-change: opacity; } .dw-journey .sc-world__seg > :is(video, img, canvas) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* The poster is the frame-holder AND the first camera move: the engine pushes it in slowly until a real decoded frame is available to replace it. */ .dw-journey .sc-world__poster { z-index: 0; transform-origin: 50% 50%; transition: opacity 420ms var(--sc-ease-out); } .dw-journey .sc-world__seg > video { z-index: 1; } .dw-journey .sc-world__seg.sc-has-clip .sc-world__poster { opacity: 0; } /* The act stylesheet lights a clip through its ancestor act. A worldflight leg has no act, so match the class the engine also writes on the clip itself. */ .dw-journey video[data-sc-scrub].sc-has-clip { opacity: 1; } /* The copy layer is fixed too, and inert by default: the engine hands pointer-events back to a block only while it is actually legible. */ .dw-journey .sc-world__copy { position: fixed; inset: 0; z-index: var(--sc-z-copy); pointer-events: none; } .dw-journey .sc-world__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .dw-journey [data-sc-copy] { opacity: 0; pointer-events: none; will-change: opacity, transform; } .dw-journey .sc-ready [data-sc-copy] { transition: none; } /* The track. Empty on purpose. */ .dw-journey .sc-world__spacer { pointer-events: none; } /* scroll progress */ .dw-journey [data-sc-progress] { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--sc-z-chrome); background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; } /* ----------------------------------------------------------- atmosphere -- Depth is not only shadow. Grain keeps a flat dark ground from banding, and it is the difference between "a dark page" and "a lit room". */ .dw-journey .sc-grain { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.045; } .dw-journey .sc-grain::before { content: ""; position: absolute; inset: -50%; background-image: url("data:image/svg+xml;utf8,"); } /* -------------------------------------------------------- reduced motion -- */ @media (prefers-reduced-motion: reduce) { /* Fewer and gentler, not zero. Opacity still carries the reveal so the page is comprehensible; every position change is dropped. */ .dw-journey [data-sc-in], .dw-journey [data-sc-stagger] > * { transform: none; transition-duration: 220ms; } .dw-journey [data-sc-parallax], .dw-journey [data-sc-pan], .dw-journey .sc-split__i { transform: none !important; } /* A wipe is a position change too. Show reveal content settled. */ .dw-journey [data-sc-reveal] { clip-path: none !important; } /* A rail's transform IS its navigation, not decoration. Zeroing it the way parallax and kinetic type are zeroed parks the act on its first screenful and makes everything past the fold unreachable: a device degrading into missing content. Hand the travel back to the reader as an ordinary scroll region instead, so the same items are all still gettable without motion. A build that would rather re-lay the rail out as a grid can still do that; this is the floor, not the ceiling. */ .dw-journey [data-sc-act="pan"] .sc-stage, .dw-journey [data-sc-act="pan"] [data-sc-stage] { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; } .dw-journey [data-sc-pan] > * { scroll-snap-align: center; } .dw-journey [data-sc-spotlight]::after { display: none; } /* A worldflight keeps its whole story here. No clip is ever fetched, so the posters are the film, and they cross-dissolve through exactly the same seams at exactly the same scroll positions. The push-in and the copy drift are the only things that go. */ .dw-journey .sc-world__poster, .dw-journey [data-sc-copy] { transform: none !important; } } /* --------------------------------------------------------------- mobile -- */ @media (max-width: 860px) { .dw-journey .sc-copy { inset-inline: var(--sc-gutter); max-width: none; } .dw-journey .sc-copy--trail { text-align: left; } .dw-journey .sc-stage { height: 100svh; } /* .sc-copy--trail re-anchors to the left and spans the full width here, so a bottom-RIGHT corner gradient darkens the one corner the copy just left and guarantees a contrast failure over any bright clip. Point the density at the copy: the same band .sc-scrim--band paints. */ .dw-journey .sc-scrim--trail { background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%, transparent 58%); } } /* Page-local accessibility overrides; the vendor engine stays unchanged. */ .dw-journey{--sc-font-display:Onest,Arial,sans-serif;--sc-font-text:Onest,Arial,sans-serif;--sc-canvas:#f5f7ef;--sc-surface:#edf1e8;--sc-ink:#243321;--sc-ink-soft:#596650;--sc-accent:#79ba3e;--sc-accent-ink:#172417} .dw-journey:not(.sc-ready) :is([data-sc-cue],[data-sc-in],[data-sc-stagger]>*){opacity:1;transform:none} .dw-journey:not(.sc-ready) [data-sc-reveal]{clip-path:none} .dw-journey:not(.sc-ready) [data-sc-act]{height:auto!important;min-height:0!important} .dw-journey:not(.sc-ready) [data-sc-stage]{position:relative;height:auto;min-height:0} @media(prefers-reduced-motion:reduce){ .dw-journey [data-sc-act]{height:auto!important;min-height:0!important;--sc-p:1!important} .dw-journey [data-sc-stage]{position:relative!important;height:auto!important;min-height:0!important} .dw-journey :is([data-sc-cue],[data-sc-in],[data-sc-stagger]>*){opacity:1!important;transform:none!important} .dw-journey [data-sc-reveal]{clip-path:none!important} .dw-journey [data-sc-count]{font-variant-numeric:tabular-nums} } .dw-journey *{box-sizing:border-box}.dw-journey{scroll-behavior:smooth;scroll-padding-top:100px}.dw-journey{margin:0;font-family:Onest,Arial,sans-serif;color:#20271e;background:#f6f7ef}.dw-journey button,.dw-journey input,.dw-journey select,.dw-journey textarea{font:inherit}.dw-journey button,.dw-journey a{-webkit-tap-highlight-color:transparent}.dw-journey button{cursor:pointer}.dw-journey a{color:inherit}.dw-journey img{display:block;max-width:100%}.dw-journey button:active,.dw-journey .button:active{transform:translateY(1px)}.dw-journey :focus-visible{outline:3px solid #448228;outline-offset:4px}.dw-journey h1,.dw-journey h2,.dw-journey h3,.dw-journey p{margin-top:0}.dw-journey button:disabled{cursor:wait}.dw-journey .brand-logo{width:178px;height:auto}.dw-journey .button{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:17px 23px;border-radius:999px;border:1px solid transparent;background:#263324;color:#fff;text-decoration:none;font-weight:650;font-size:15px;transition:transform .2s,background .2s}.dw-journey .button:hover{background:#3d5137}.dw-journey .demo-note{min-height:32px;display:flex;align-items:center;justify-content:space-between;gap:15px;background:#20271e;color:#e0ebd3;padding:8px 4%;font-size:11px;letter-spacing:.03em}.dw-journey .demo-note a{text-underline-offset:3px}.dw-journey .listing-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,36%);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px}.dw-journey .listing-card{display:block;text-decoration:none;scroll-snap-align:start}.dw-journey .listing-image{aspect-ratio:4/3;overflow:hidden;border-radius:18px;background:#d5d9ce}.dw-journey .listing-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.dw-journey .listing-card:hover img{transform:scale(1.035)}.dw-journey .listing-.dw-journey{padding:18px 2px}.dw-journey .listing-meta{text-transform:uppercase;font-size:11px;letter-spacing:.12em;margin-bottom:10px}.dw-journey .listing-address{font-size:21px;font-weight:550;letter-spacing:-.04em;margin-bottom:12px}.dw-journey .listing-price{font-size:20px}.dw-journey .listing-source{font-size:11px;line-height:1.6;opacity:.75;max-width:780px}.dw-journey .listing-source a{text-underline-offset:3px} .dw-journey .report-dialog{color:#20271e;background:#f7f8f0;border:0;border-radius:24px;padding:0;width:min(920px,calc(100% - 28px));max-height:90dvh;box-shadow:0 28px 120px #111b2040}.dw-journey .report-dialog::backdrop{background:#14231988;backdrop-filter:blur(7px)}.dw-journey .report-dialog header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d7dccf;padding:20px 28px}.dw-journey .report-dialog header span{font-size:12px;letter-spacing:.1em;text-transform:uppercase}.dw-journey .dialog-close{border:1px solid #bac2b4;border-radius:50%;width:40px;height:40px;background:transparent;font-size:24px;line-height:1}.dw-journey .report-dialog .dialog-.dw-journey{padding:34px;max-width:680px;margin:auto}.dw-journey .report-dialog h2{font-size:clamp(27px,4vw,42px);letter-spacing:-.05em;line-height:1.08;margin-bottom:16px}.dw-journey .report-dialog p{font-size:15px;line-height:1.65}.dw-journey .demo-warning{background:#e5ecd8;border-left:3px solid #6b992d;padding:12px 16px;font-size:12px!important}.dw-journey .report-dialog .steps{display:flex;gap:8px;margin-bottom:25px}.dw-journey .report-dialog .step-dot{height:4px;background:#d5dacd;flex:1;border-radius:3px}.dw-journey .report-dialog .step-dot.active{background:#60922b}.dw-journey .report-dialog label{display:block;font-size:13px;font-weight:550;margin:18px 0 8px}.dw-journey .report-dialog input:not([type=checkbox]){width:100%;background:#fff;border:1px solid #bcc6b5;border-radius:9px;padding:14px;min-height:51px;color:#20271e}.dw-journey .report-dialog .field-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}.dw-journey .report-dialog .consent{display:flex;align-items:flex-start;gap:10px;line-height:1.5;font-weight:400}.dw-journey .report-dialog .consent input{margin-top:3px;accent-color:#527829;flex:none}.dw-journey .report-dialog .dialog-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:25px}.dw-journey .report-dialog .text-button{border:0;background:transparent;text-decoration:underline;text-underline-offset:4px;font-size:13px}.dw-journey .report-dialog .report-sheet{border:1px solid #c4ccb9;border-radius:14px;background:#fff;padding:24px;margin-top:20px}.dw-journey .report-dialog .sample-kicker{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#527829}.dw-journey .report-dialog .sample-line{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:17px 0;border-top:1px solid #e4e8df;font-size:13px;line-height:1.5}.dw-journey .report-dialog .sample-line span:last-child{color:#687160}.dw-journey .report-dialog .report-sheet h3{font-size:24px;margin:12px 0 24px}.dw-journey .report-dialog [hidden]{display:none!important}.dw-journey .report-dialog .inline-error{font-size:13px;color:#9a3c21;min-height:20px}.dw-journey .no-js-note{padding:15px;background:#eef2e6;color:#24331f;text-align:center;font-size:13px}@media(max-width:600px){.dw-journey .brand-logo{width:135px}.dw-journey .report-dialog .dialog-.dw-journey{padding:24px 20px}.dw-journey .report-dialog header{padding:15px 20px}.dw-journey .report-dialog .field-pair{grid-template-columns:1fr;gap:0}.dw-journey .report-dialog .sample-line{grid-template-columns:1fr;gap:5px}.dw-journey .demo-note{font-size:10px}.dw-journey .listing-grid{grid-auto-columns:85%}} .dw-journey .report-dialog .dialog-.dw-journey h2{font:550 clamp(27px,4vw,42px)/1.08 Onest,Arial,sans-serif;letter-spacing:-.05em;margin-bottom:16px}.dw-journey .report-dialog .dialog-.dw-journey h3{font:550 24px/1.2 Onest,Arial,sans-serif;letter-spacing:-.04em}.dw-journey .report-dialog .dialog-.dw-journey p{line-height:1.65} @media(prefers-reduced-motion:reduce){.dw-journey{scroll-behavior:auto}.dw-journey *,.dw-journey *::before,.dw-journey *::after{animation:none!important;transition:none!important}} /* Native dialog keeps keyboard focus inside; its own scroll area remains usable with a mobile keyboard or a short landscape viewport. */ .dw-journey.report-preview-open{overflow:hidden} .dw-journey .report-dialog{max-height:90vh;max-height:90dvh;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable} .dw-journey .report-dialog .dialog-close{flex:0 0 44px;min-height:44px} .dw-journey .report-dialog .contact-preferences,.dw-journey .report-dialog .update-preferences{min-width:0;margin:24px 0 0;padding:18px;border:1px solid #ccd5c4;border-radius:14px} .dw-journey .report-dialog legend{font-size:14px;font-weight:650;padding:0 5px;line-height:1.5} .dw-journey .report-dialog legend span{font-weight:400;font-size:12px} .dw-journey .report-dialog .contact-options{display:flex;flex-wrap:wrap;gap:8px} .dw-journey .report-dialog .contact-options label{display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px;min-height:44px;border:1px solid #bdc9b4;border-radius:8px;cursor:pointer;background:#fff;flex:1 1 auto} .dw-journey .report-dialog .contact-options label:has(input:checked){background:#e8f2df;border-color:#527829} .dw-journey .report-dialog input[type=radio]{width:18px;min-height:18px;height:18px;margin:0;padding:0;accent-color:#527829;flex:0 0 18px} .dw-journey .report-dialog input[type=checkbox]{width:18px;height:18px} .dw-journey .report-dialog .preference-clear{min-height:44px;margin-top:4px} .dw-journey .report-dialog .field-note{font-size:12px;line-height:1.5;margin:8px 0 0;color:#526049} .dw-journey .report-dialog .update-preferences .consent{margin:8px 0 16px;min-height:44px} .dw-journey .report-dialog .consent small{display:block;font-size:12px;color:#526049;line-height:1.5;margin-top:4px} .dw-journey .report-dialog .preference-summary{margin-top:20px;padding:18px;background:#eaf0e4;border-radius:12px} .dw-journey .report-dialog .preference-summary p{font-size:13px;margin:8px 0} .dw-journey .report-dialog .preference-summary small{font-size:12px} .dw-journey .report-dialog .dialog-actions{flex-wrap:wrap} .dw-journey .report-dialog .dialog-actions button{min-height:44px} @media(max-width:420px){.dw-journey .report-dialog .dialog-.dw-journey{padding:22px 16px}.dw-journey .report-dialog header{padding:14px 16px;gap:12px}.dw-journey .report-dialog header span{font-size:10px;line-height:1.5}.dw-journey .report-dialog .contact-preferences,.dw-journey .report-dialog .update-preferences{padding:12px}.dw-journey .report-dialog .dialog-actions [data-next]{width:100%;order:3}.dw-journey .report-dialog .report-sheet{padding:18px}.dw-journey .report-dialog .contact-options label{flex:1 1 100%}} .dw-journey.savings-page{--ink:#243321;--muted:#5d6856;--accent:#a9d663;--paper:#f7f8ee;background:var(--paper);color:var(--ink)}.dw-journey.savings-page h1,.dw-journey.savings-page h2,.dw-journey.savings-page h3{font-weight:550;letter-spacing:-.065em}.dw-journey.savings-page h2{font-size:clamp(38px,4.8vw,68px);line-height:1.02}.dw-journey.savings-page em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.065em}.dw-journey.savings-page p{line-height:1.7}.dw-journey.savings-page .eyebrow{font-size:10px;letter-spacing:.13em;font-weight:700;line-height:1.5;margin-bottom:25px}.dw-journey.savings-page .section-wrap{max-width:1500px;margin:auto;padding:110px 5%}.dw-journey.savings-page .site-nav{padding:26px 4%;display:flex;align-items:center;justify-content:space-between;gap:24px}.dw-journey.savings-page .site-nav .brand-logo{filter:brightness(.14)}.dw-journey.savings-page .site-nav nav{display:flex;gap:32px}.dw-journey.savings-page .site-nav a{text-decoration:none;font-size:13px}.dw-journey.savings-page .nav-call{border-bottom:1px solid #64735a;padding-bottom:8px}.dw-journey.savings-page .nav-call span{margin-left:35px}.dw-journey.savings-page .hero{padding:10px 3% 48px 5%;display:grid;grid-template-columns:1.06fr 1fr;gap:5%;max-width:1650px;margin:auto;align-items:center}.dw-journey.savings-page .hero-copy{padding:30px 0 0}.dw-journey.savings-page .hero .eyebrow{display:flex;align-items:center;gap:8px}.dw-journey.savings-page .little-dot{width:6px;height:6px;border-radius:50%;background:#638c34}.dw-journey.savings-page h1{font-size:clamp(48px,5.6vw,87px);line-height:.99;margin-bottom:26px}.dw-journey.savings-page h1 em{color:#527133}.dw-journey.savings-page .hero-intro{font-size:15px;max-width:480px;color:var(--muted);margin-bottom:29px}.dw-journey.savings-page .address-entry label{font-size:12px;font-weight:650;display:block;margin-bottom:11px}.dw-journey.savings-page .address-pill{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d0d7c1;border-radius:100px;padding:7px 7px 7px 18px;max-width:570px;box-shadow:0 8px 20px #55634007}.dw-journey.savings-page .address-pill svg{flex:none}.dw-journey.savings-page .address-pill input{width:100%;min-width:0;padding:10px 0;border:0;background:transparent;font-size:12px}.dw-journey.savings-page .address-pill button{display:flex;align-items:center;gap:13px;flex:none;border:0;border-radius:100px;background:#263921;color:#fff;padding:17px 20px;font-size:11px;font-weight:650}.dw-journey.savings-page .form-assurance{font-size:10px;color:#6e7963;margin:10px 0 25px}.dw-journey.savings-page .hero-agent{border-top:1px solid #d9decd;display:flex;align-items:center;gap:11px;padding-top:20px;max-width:560px}.dw-journey.savings-page .hero-agent img{width:35px;height:37px;object-fit:contain}.dw-journey.savings-page .hero-agent span{font-size:12px}.dw-journey.savings-page .hero-agent strong{font-size:10px;font-weight:400;color:#65705e}.dw-journey.savings-page .hero-agent a{font-size:11px;margin-left:auto;text-decoration:none}.dw-journey.savings-page .hero-art{position:relative;isolation:isolate;min-width:0;margin-top:12px}.dw-journey.savings-page .hero-portrait{width:100%;height:590px;object-fit:cover;object-position:76% center;border-radius:45% 45% 24px 24px}.dw-journey.savings-page .photo-caption{position:absolute;top:39px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:.16em;color:#fff;text-align:center;line-height:1.7;white-space:nowrap;text-shadow:0 1px 5px #182519}.dw-journey.savings-page .commission-seal{position:absolute;left:-35px;bottom:51px;width:185px;height:185px;border:1px solid #537332;background:#b8da85;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-12deg);box-shadow:0 0 0 7px #b8da85;z-index:1}.dw-journey.savings-page .commission-seal>span{font-size:9px;letter-spacing:.13em;font-weight:700}.dw-journey.savings-page .commission-seal strong{font-size:87px;line-height:1.14;letter-spacing:-.1em;font-weight:550;margin-left:-7px}.dw-journey.savings-page .commission-seal small{font-size:48px;vertical-align:top;line-height:1.8}.dw-journey.savings-page .equity-note{position:absolute;right:18px;bottom:26px;background:#fffef0;padding:19px 22px;border-radius:12px;box-shadow:0 7px 30px #1a2e2120;transform:rotate(3deg)}.dw-journey.savings-page .equity-note span{display:block;font-size:8px;letter-spacing:.04em}.dw-journey.savings-page .equity-note strong{display:block;font-size:36px;font-weight:550;letter-spacing:-.07em;line-height:1.4}.dw-journey.savings-page .credentials{border-top:1px solid #d3dcc5;border-bottom:1px solid #d3dcc5;margin:0 5%;display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr;gap:20px;padding:29px 0;align-items:center}.dw-journey.savings-page .credentials strong{display:block;font-size:27px;letter-spacing:-.05em;font-weight:550;margin-bottom:6px}.dw-journey.savings-page .credentials span{font-size:10px;color:#65705c}.dw-journey.savings-page .credentials p{margin:0;font-size:12px;border-left:1px solid #d3dcc5;padding-left:30px}.dw-journey.savings-page .credentials b{font-weight:550}.dw-journey.savings-page .savings-section{display:grid;grid-template-columns:1fr 1.05fr;gap:12%;align-items:center}.dw-journey.savings-page .section-intro>p:not(.eyebrow){max-width:380px;font-size:15px;color:var(--muted)}.dw-journey.savings-page .plain-link{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;font-size:13px;line-height:1.7;border:0;background:transparent;border-bottom:1px solid #89987b;padding:5px 0 8px;text-decoration:none}.dw-journey.savings-page .calculator{background:#fff;border:1px solid #d5ddc9;border-radius:25px;padding:30px;box-shadow:0 15px 65px #57674709}.dw-journey.savings-page .calculator-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.11em;color:#6c7c5d;margin-bottom:27px}.dw-journey.savings-page .calculator label{display:block;font-size:12px;margin-bottom:8px}.dw-journey.savings-page .price-input{display:flex;align-items:center;gap:6px;font-size:40px;letter-spacing:-.07em}.dw-journey.savings-page .price-input input{width:100%;min-width:0;font-size:40px;letter-spacing:-.07em;border:0;color:var(--ink);background:transparent}.dw-journey.savings-page input[type=range]{width:100%;accent-color:#719842;margin:20px 0 3px}.dw-journey.savings-page .range-labels{display:flex;justify-content:space-between;font-size:9px;color:#718065;margin-bottom:23px}.dw-journey.savings-page .fee-row{display:flex;justify-content:space-between;font-size:12px;align-items:center;margin:16px 0 8px}.dw-journey.savings-page .fee-row strong{font-size:15px;font-weight:550}.dw-journey.savings-page .fee-bar{height:9px;border-radius:10px;background:#d4dacb;width:100%}.dw-journey.savings-page .don-fee{background:#8ab94c;width:56%}.dw-journey.savings-page .savings-total{background:#eaf2db;padding:25px;margin-top:24px;border-radius:15px}.dw-journey.savings-page .savings-total>span{font-size:9px;letter-spacing:.13em}.dw-journey.savings-page .savings-total output{display:block;font-size:67px;letter-spacing:-.08em;line-height:1.2;margin:8px 0 20px;font-weight:550}.dw-journey.savings-page .savings-total .button{width:100%;font-size:12px}.dw-journey.savings-page .calculator-fine{font-size:9px;line-height:1.7;color:#6c745f;margin:18px 0 0}.dw-journey.savings-page .service-story{background:#e1ebd1}.dw-journey.savings-page .service-title{padding-bottom:40px}.dw-journey.savings-page .service-title h2{max-width:850px;margin:0}.dw-journey.savings-page .story-layout{padding-top:25px;display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:start}.dw-journey.savings-page .story-visual{position:sticky;top:30px}.dw-journey.savings-page .story-visual img{width:100%;height:370px;object-fit:cover;border-radius:20px}.dw-journey.savings-page .visual-note{background:#f8faef;padding:28px;border-radius:0 0 20px 20px;margin:-20px 18px 0;position:relative}.dw-journey.savings-page .visual-note span{font-size:9px;letter-spacing:.08em}.dw-journey.savings-page .visual-note p{font-size:20px;line-height:1.4;letter-spacing:-.03em;margin:15px 0 18px}.dw-journey.savings-page .chapter{padding:50px 0 65px;border-top:1px solid #b8c6a5;display:grid;grid-template-columns:35px 1fr;gap:20px;min-height:270px}.dw-journey.savings-page .chapter-number{font-size:11px;color:#617849;padding-top:8px}.dw-journey.savings-page .chapter h3{font-size:35px;font-weight:500;line-height:1.1}.dw-journey.savings-page .chapter p{font-size:14px;color:#5c6b50;max-width:390px}.dw-journey.savings-page .report-teaser{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center;overflow:hidden}.dw-journey.savings-page .report-art{min-height:450px;position:relative;display:flex;align-items:center;justify-content:center;background:#e9ecd8;border-radius:50% 50% 25px 25px;padding:30px}.dw-journey.savings-page .report-paper{position:relative;max-width:350px;width:100%;background:#fff;border:1px solid #d2d8c5;padding:30px;border-radius:7px;transform:rotate(-5deg);box-shadow:0 10px 25px #52603a14}.dw-journey.savings-page .paper-back{position:absolute;width:70%;height:330px;border:1px solid #bdc8ac;background:#e1e7d4;transform:rotate(7deg)}.dw-journey.savings-page .report-paper>span{font-size:8px;letter-spacing:.1em}.dw-journey.savings-page .report-paper h3{font-size:46px;line-height:1;margin:24px 0}.dw-journey.savings-page .report-paper>div{border-top:1px solid #e2e8d7;font-size:10px;padding:16px 0}.dw-journey.savings-page .report-paper b{color:#7c9c52;margin-right:10px}.dw-journey.savings-page .report-paper p{font-size:7px;margin:12px 0 0;letter-spacing:.06em}.dw-journey.savings-page .paper-sticker{position:absolute;right:2%;bottom:40px;background:#b9d58e;width:110px;height:110px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:12px;text-align:center;line-height:1.4;transform:rotate(9deg)}.dw-journey.savings-page .report-copy>p:not(.eyebrow){font-size:15px;color:#616d58;max-width:410px}.dw-journey.savings-page .report-copy .sample-disclosure{font-size:10px!important;margin-top:17px}.dw-journey.savings-page .homes-section{background:#fff;padding-top:85px;padding-bottom:85px;max-width:none}.dw-journey.savings-page .section-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:40px}.dw-journey.savings-page .section-heading h2{margin:0}.dw-journey.savings-page .homes-section .listing-grid{grid-auto-columns:37%}.dw-journey.savings-page .guide-section{display:grid;grid-template-columns:1fr 1.35fr;gap:7%}.dw-journey.savings-page .guide-heading h2{font-size:clamp(36px,3.6vw,55px)}.dw-journey.savings-page .guide-heading>p:not(.eyebrow){font-size:14px;color:#68745d}.dw-journey.savings-page .guide-links{display:grid;grid-template-columns:1fr 1fr;gap:25px}.dw-journey.savings-page .guide-links a{text-decoration:none}.dw-journey.savings-page .guide-links a:last-child{margin-top:55px}.dw-journey.savings-page .guide-links img{height:210px;width:100%;object-fit:cover;border-radius:14px}.dw-journey.savings-page .guide-links span{font-size:8px;letter-spacing:.07em;display:block;margin:18px 0 13px}.dw-journey.savings-page .guide-links h3{font-size:25px;line-height:1.18;letter-spacing:-.04em}.dw-journey.savings-page .faq-section{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding-top:15px}.dw-journey.savings-page .faq-section h2{font-size:38px;max-width:360px}.dw-journey.savings-page details{border-bottom:1px solid #d3dac6;padding:21px 0}.dw-journey.savings-page summary{cursor:pointer;font-size:14px;list-style:none;display:flex;justify-content:space-between;gap:15px}.dw-journey.savings-page summary:after{content:'+';font-size:18px}.dw-journey.savings-page details[open] summary:after{content:'−'}.dw-journey.savings-page details p{font-size:13px;margin:18px 0 0;color:#627058}.dw-journey.savings-page .finale{position:relative;isolation:isolate;overflow:hidden;background:#b5d88a;padding:90px 8%;min-height:470px}.dw-journey.savings-page .finale h2{font-size:clamp(43px,5.4vw,78px);max-width:900px;position:relative;z-index:1}.dw-journey.savings-page .finale p:last-of-type{font-size:12px;margin:20px 0}.dw-journey.savings-page .finale-mark{position:absolute;right:-55px;top:30px;font-size:420px;line-height:1;letter-spacing:-.15em;font-weight:500;color:#a4c47d;z-index:-1;transform:rotate(-13deg)}.dw-journey.savings-page .site-footer{background:#202c1e;color:#dfe8d5;display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;padding:50px 5%;font-size:11px}.dw-journey.savings-page .site-footer p{font-size:10px;margin:25px 0 0}.dw-journey.savings-page .site-footer>div:nth-child(2){display:flex;flex-direction:column;align-items:start;gap:15px}.dw-journey.savings-page .site-footer a{text-decoration:none}.dw-journey .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @supports(animation-timeline:view()){ @media(prefers-reduced-motion:no-preference){.dw-journey.savings-page .commission-seal{animation:seal-turn linear both;animation-timeline:view();animation-range:entry 0% exit 100%}@keyframes seal-turn{from{transform:rotate(-19deg)}to{transform:rotate(16deg)}}.dw-journey.savings-page .paper-back{animation:paper-fan linear both;animation-timeline:view();animation-range:entry 0% cover 70%}@keyframes paper-fan{from{transform:rotate(0deg)}to{transform:rotate(10deg)}}}} @media(min-width:1600px){.dw-journey.savings-page .hero-portrait{height:690px}}@media(max-width:1080px){.dw-journey.savings-page .hero{gap:4%}.dw-journey.savings-page h1{font-size:57px}.dw-journey.savings-page .hero-portrait{height:550px}.dw-journey.savings-page .commission-seal{width:145px;height:145px;left:-17px;bottom:100px}.dw-journey.savings-page .commission-seal strong{font-size:65px}.dw-journey.savings-page .commission-seal small{font-size:35px}.dw-journey.savings-page .commission-seal>span{font-size:7px}.dw-journey.savings-page .equity-note{bottom:20px;right:18px}.dw-journey.savings-page .address-pill{flex-wrap:wrap;border-radius:15px;padding:13px}.dw-journey.savings-page .address-pill input{width:80%}.dw-journey.savings-page .address-pill button{width:100%;justify-content:center;padding:14px}.dw-journey.savings-page .section-wrap{padding:80px 5%}.dw-journey.savings-page .savings-section{gap:7%}.dw-journey.savings-page .credentials{grid-template-columns:1fr 1fr 1fr}.dw-journey.savings-page .credentials p{display:none}.dw-journey.savings-page .story-layout{gap:6%;padding-top:0}.dw-journey.savings-page .service-title{padding-bottom:35px}.dw-journey.savings-page .guide-section{gap:5%;grid-template-columns:.8fr 1.2fr}.dw-journey.savings-page .guide-links{gap:15px}.dw-journey.savings-page .guide-links img{height:180px}.dw-journey.savings-page .faq-section{padding-top:0}} @media(max-width:760px){.dw-journey.savings-page .site-nav{padding:23px 5%}.dw-journey.savings-page .site-nav nav{display:none}.dw-journey.savings-page .site-nav .nav-call{font-size:12px}.dw-journey.savings-page .hero{grid-template-columns:1fr;padding:10px 5% 35px;gap:25px}.dw-journey.savings-page .hero-copy{padding-top:7px}.dw-journey.savings-page .hero .eyebrow{font-size:8px;margin-bottom:20px}.dw-journey.savings-page h1{font-size:clamp(43px,9.4vw,69px)}.dw-journey.savings-page .hero-intro{font-size:14px;max-width:520px}.dw-journey.savings-page .address-pill{border-radius:100px;flex-wrap:nowrap;padding:6px 6px 6px 13px;gap:5px}.dw-journey.savings-page .address-pill input{font-size:10px;width:100%}.dw-journey.savings-page .address-pill button{width:auto;font-size:10px;padding:16px 14px;gap:5px}.dw-journey.savings-page .hero-agent{max-width:none}.dw-journey.savings-page .hero-art{margin-left:8%;margin-right:5%;margin-top:6px}.dw-journey.savings-page .hero-portrait{height:420px;border-radius:45% 45% 22px 22px;object-position:78% center}.dw-journey.savings-page .commission-seal{left:-20px;bottom:35px;width:137px;height:137px}.dw-journey.savings-page .equity-note{right:-12px;bottom:22px;padding:15px}.dw-journey.savings-page .equity-note strong{font-size:29px}.dw-journey.savings-page .credentials{gap:14px;padding:25px 0}.dw-journey.savings-page .credentials strong{font-size:19px}.dw-journey.savings-page .credentials span{font-size:8px;line-height:1.5;display:block}.dw-journey.savings-page .section-wrap{padding:65px 6%}.dw-journey.savings-page .savings-section,.dw-journey.savings-page .story-layout,.dw-journey.savings-page .report-teaser,.dw-journey.savings-page .guide-section,.dw-journey.savings-page .faq-section{grid-template-columns:1fr;gap:35px}.dw-journey.savings-page h2{font-size:42px}.dw-journey.savings-page .calculator{padding:23px}.dw-journey.savings-page .savings-total output{font-size:63px}.dw-journey.savings-page .service-title{padding-bottom:25px}.dw-journey.savings-page .story-layout{padding-top:0}.dw-journey.savings-page .story-visual{position:static}.dw-journey.savings-page .story-visual img{height:260px}.dw-journey.savings-page .chapter{padding:30px 0;min-height:auto;gap:12px}.dw-journey.savings-page .chapter h3{font-size:30px}.dw-journey.savings-page .report-art{min-height:420px;margin:0 8px}.dw-journey.savings-page .report-paper{padding:25px}.dw-journey.savings-page .section-heading{display:block}.dw-journey.savings-page .section-heading .plain-link{margin-top:22px}.dw-journey.savings-page .homes-section .listing-grid{grid-auto-columns:88%}.dw-journey.savings-page .guide-links img{height:180px}.dw-journey.savings-page .guide-links h3{font-size:23px}.dw-journey.savings-page .guide-links a:last-child{margin-top:35px}.dw-journey.savings-page .faq-section{padding-top:0}.dw-journey.savings-page .faq-section h2{margin-bottom:0}.dw-journey.savings-page .finale{padding:65px 7%;min-height:440px}.dw-journey.savings-page .finale h2{font-size:45px}.dw-journey.savings-page .finale-mark{right:-50px;font-size:340px;top:140px}.dw-journey.savings-page .site-footer{grid-template-columns:1.2fr 1fr;padding:45px 6%}.dw-journey.savings-page .site-footer>p{grid-column:1/-1;margin-top:0}.dw-journey.savings-page .desktop-note{display:none}} /* Selected direction: clean paper, charcoal identity, deliberate brokerage green. */ .dw-journey.savings-page { --ink: #171b19; --muted: #59615d; --accent: #78be3f; --paper: #f8faf9; background: var(--paper); color: var(--ink); } .dw-journey.savings-page .demo-note { background: #101512; color: #dee6e0; } .dw-journey.savings-page .site-nav { background: #171b19; color: #f5f7f6; padding: 24px 5%; } .dw-journey.savings-page .site-nav .brand-logo { filter: none; } .dw-journey.savings-page .nav-call { color: #a4e370; border-color: #687c6e; } .dw-journey.savings-page .dw-sign-chapter h1 { font-size: clamp(52px, 5.8vw, 89px); letter-spacing: -.067em; line-height: 1.02; margin-bottom: 28px; font-weight: 650; } .dw-journey.savings-page .dw-sign-chapter h1 span { color: #467b24; } .dw-journey.savings-page .dw-sign-chapter h2 { font-size: clamp(40px, 4.8vw, 70px); letter-spacing: -.059em; line-height: 1.06; margin-bottom: 24px; } .dw-journey.savings-page .dw-sign-chapter > p:not(.dw-sign-count):not(.dw-sign-note) { font-size: 17px; color: #505a54; line-height: 1.7; } .dw-journey.savings-page .dw-sign-chapter .address-entry { width: 100%; max-width: 520px; margin-top: 12px; } .dw-journey.savings-page .dw-sign-chapter .address-entry label { font-size: 14px; color: #283b2f; margin-bottom: 12px; } .dw-journey.savings-page .dw-sign-chapter .address-pill { flex-wrap: wrap; border-radius: 12px; background: #fcfefd; padding: 8px; gap: 6px; border: 1px solid #c8d0ca; box-shadow: none; } .dw-journey.savings-page .dw-sign-chapter .address-pill input { width: 100%; padding: 10px 10px; font-size: 16px; min-height: 45px; } .dw-journey.savings-page .dw-sign-chapter .address-pill button { width: 100%; justify-content: space-between; padding: 16px 20px; border-radius: 7px; font-size: 14px; color: #171b19; background: #78be3f; } .dw-journey.savings-page .dw-sign-chapter .form-assurance { font-size: 12px; color: #526157; margin-top: 12px; margin-bottom: 0; } .dw-journey.savings-page .dw-sign-chapter .dw-sign-count { margin-bottom: 22px; font-size: 11px; color: #4f6457; } .dw-journey.savings-page .s-sign-service { list-style: none; margin: 10px 0 30px; padding: 0; width: 100%; max-width: 450px; } .dw-journey.savings-page .s-sign-service li { display: flex; gap: 16px; align-items: baseline; font-size: 17px; padding: 14px 0; border-bottom: 1px solid #d8dfda; } .dw-journey.savings-page .s-sign-service span { font-size: 11px; color: #568632; } .dw-journey.savings-page .s-sign-example { width: 100%; max-width: 490px; margin: 12px 0 25px; } .dw-journey.savings-page .s-sign-example div { display: flex; justify-content: space-between; gap: 15px; border-bottom: 1px solid #d4ddd6; padding: 16px 0; } .dw-journey.savings-page .s-sign-example dt { font-size: 14px; color: #4d5b52; } .dw-journey.savings-page .s-sign-example dd { font-size: 21px; margin: 0; font-weight: 600; } .dw-journey.savings-page .s-sign-example div:last-child { align-items: center; background: #78be3f; color: #171b19; padding: 20px; border: 0; margin-top: 18px; } .dw-journey.savings-page .s-sign-example div:last-child dt { color: #171b19; max-width: 130px; line-height: 1.5; } .dw-journey.savings-page .s-sign-example div:last-child dd { font-size: clamp(32px, 3.2vw, 49px); letter-spacing: -.06em; } .dw-journey.savings-page .button { background: #171b19; color: #f9fbfa; border-radius: 8px; } .dw-journey.savings-page .button:hover { background: #34463b; } .dw-journey.savings-page .credentials { background: #78be3f; margin: 0; padding: 32px 5%; border: 0; color: #171b19; } .dw-journey.savings-page .credentials span { color: #233c18; font-size: 12px; } .dw-journey.savings-page .credentials p { border-color: #558d2c; } .dw-journey.savings-page .calculator { border-color: #d0d7d2; } .dw-journey.savings-page .calculator-fine, .dw-journey.savings-page .calculator-top, .dw-journey.savings-page .range-labels { color: #56655c; } .dw-journey.savings-page input[type=range] { accent-color: #588d30; } .dw-journey.savings-page .savings-total { background: #78be3f; color: #171b19; } .dw-journey.savings-page .don-fee { background: #78be3f; } .dw-journey.savings-page .service-story { background: #191f1b; color: #f2f7f3; } .dw-journey.savings-page .chapter { border-color: #46544b; } .dw-journey.savings-page .chapter p { color: #c8d2cc; } .dw-journey.savings-page .chapter-number { color: #9edd6e; } .dw-journey.savings-page .visual-note { background: #29372f; color: #f0f6f1; } .dw-journey.savings-page .plain-link { border-color: #92a198; } .dw-journey.savings-page .report-art { background: #e8eeea; } .dw-journey.savings-page .paper-back { background: #d8e1db; border-color: #aebcb3; } .dw-journey.savings-page .paper-sticker { background: #78be3f; } .dw-journey.savings-page .finale { background: #78be3f; } .dw-journey.savings-page .finale-mark { display: none; } .dw-journey.savings-page .site-footer { background: #171b19; color: #e6eee9; } .dw-journey.savings-page .report-dialog { background: #f8faf9; } .dw-journey.savings-page .report-dialog .demo-warning { background: #e6eee8; border: 0; border-radius: 8px; } .dw-journey.savings-page .report-dialog .step-dot.active { background: #588d30; } .dw-journey.savings-page :focus-visible { outline-color: #4f842d; } @media (max-width: 760px) { .dw-journey.savings-page .dw-sign-chapter h1 { font-size: clamp(44px, 10.8vw, 71px); } .dw-journey.savings-page .dw-sign-chapter h2 { font-size: clamp(36px, 9.5vw, 58px); } .dw-journey.savings-page .dw-sign-chapter > p:not(.dw-sign-count):not(.dw-sign-note) { font-size: 16px; } .dw-journey.savings-page .credentials { gap: 15px; padding: 28px 6%; } .dw-journey.savings-page .credentials strong { font-size: 22px; } .dw-journey.savings-page .credentials span { font-size: 10px; } } /* One physical sign, one reserved visual column. Copy is never inside WebGL. */ .dw-journey .dw-sign-story { --sign-ink: oklch(22% .008 150); --sign-paper: oklch(98% .004 150); --sign-green: #78be3f; display: grid; grid-template-columns: 51% 49%; align-items: start; position: relative; isolation: isolate; max-width: 1800px; margin-inline: auto; padding-inline: 5%; color: var(--sign-ink); background: var(--sign-paper); } .dw-journey .dw-sign-visual { grid-column: 2; grid-row: 1; position: sticky; top: 28px; height: min(760px, 88svh); width: 100%; align-self: start; z-index: 1; pointer-events: none; } .dw-journey .dw-sign-copy { grid-column: 1; grid-row: 1; min-width: 0; position: relative; z-index: 2; } .dw-journey .dw-sign-chapter { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: max(640px, 86svh); padding: 70px 5% 100px 0; scroll-margin-top: 30px; } .dw-journey .dw-sign-chapter + .dw-sign-chapter { border-top: 1px solid oklch(88% .009 150); } .dw-journey .dw-sign-chapter h1, .dw-journey .dw-sign-chapter h2 { text-wrap: balance; } .dw-journey .dw-sign-chapter > p { max-width: 48ch; } .dw-journey .dw-sign-poster { position: absolute; inset: 3% 0 7%; width: 100%; height: 90%; object-fit: contain; mix-blend-mode: multiply; } .dw-journey .dw-sign-canvas { position: absolute; inset: 0; } .dw-journey .dw-sign-canvas canvas { width: 100%; height: 100%; display: block; } .dw-journey .dw-sign-visual[data-sign-ready="true"] .dw-sign-poster { visibility: hidden; } .dw-journey .dw-sign-caption { position: absolute; bottom: 12px; left: 8%; right: 4%; display: flex; justify-content: space-between; align-items: center; gap: 15px; font: 500 12px/1.5 Onest, sans-serif; color: oklch(42% .012 150); } .dw-journey .dw-sign-caption::before { content: ''; width: 27px; height: 2px; background: var(--sign-green); flex: none; } .dw-journey .dw-sign-step { font-size: 11px; font-variant-numeric: tabular-nums; } .dw-journey .dw-sign-chapter .dw-sign-count { display: block; font-size: 12px; font-weight: 650; letter-spacing: .08em; margin-bottom: 24px; color: oklch(43% .01 150); } .dw-journey .dw-sign-chapter .dw-sign-note { font-size: 12px; line-height: 1.6; color: oklch(44% .008 150); } .dw-journey .dw-sign-chapter .dw-sign-scroll { display: inline-flex; gap: 12px; align-items: center; margin-top: 34px; font-size: 12px; text-decoration: none; } .dw-journey .dw-sign-scroll span { font-size: 22px; } @media (min-width: 761px) and (max-height: 750px) { .dw-journey .dw-sign-chapter { min-height: 700px; padding-top: 48px; } .dw-journey .dw-sign-visual { top: 12px; height: 96svh; } } @media (max-width: 1000px) and (min-width: 761px) { .dw-journey .dw-sign-story { grid-template-columns: 53% 47%; padding-inline: 4%; } .dw-journey .dw-sign-chapter { padding-right: 3%; } } @media (max-width: 760px) { .dw-journey .dw-sign-story { display: grid; grid-template-columns: 1fr; padding-inline: 6%; } .dw-journey .dw-sign-copy { display: contents; } .dw-journey .dw-sign-chapter { grid-column: 1; grid-row: auto; min-height: 0; padding: 58px 0; } .dw-journey .dw-sign-chapter:first-child { grid-row: 1; padding-top: 35px; padding-bottom: 24px; } .dw-journey .dw-sign-visual { grid-column: 1; grid-row: 2; position: relative; top: auto; height: min(115vw, 570px); margin-bottom: 36px; } .dw-journey .dw-sign-chapter:nth-child(2) { grid-row: 3; } .dw-journey .dw-sign-chapter:nth-child(3) { grid-row: 4; } .dw-journey .dw-sign-caption { bottom: 0; left: 4%; right: 4%; font-size: 11px; } .dw-journey .dw-sign-chapter .dw-sign-scroll { display: none; } } @media (prefers-reduced-motion: reduce) { .dw-journey .dw-sign-story { scroll-behavior: auto; } .dw-journey .dw-sign-visual { position: relative; top: auto; } .dw-journey .dw-sign-chapter { min-height: 0; padding-block: 65px; } .dw-journey .dw-sign-chapter .dw-sign-scroll { display: none; } } /* Shared physical object. The page remains readable when this enhancement is off. */ .dw-journey .sign-journey-layer { position: fixed; inset: 0; z-index: 12; pointer-events: none; overflow: hidden; contain: strict; } /* Interactive comparison always paints above decorative traveling artwork. */ #savings .savings-comparison{position:relative;z-index:14;background:var(--dw-surface,#f6f8f4);isolation:isolate;} #seller-guides{position:relative;} @media(min-width:1000px){#seller-guides .a-sign-anchor[data-sign-anchor]{display:block!important;position:absolute!important;right:6%;top:40px;width:300px!important;height:280px!important;min-height:0!important;visibility:visible!important;}} .dw-journey .sign-journey-layer canvas { display: block; width: 100%; height: 100%; } .dw-journey [data-sign-anchor] { position: relative; min-width: 0; pointer-events: none; } .dw-journey .journey-static-art { width: 100%; height: 100%; object-fit: contain; } .dw-journey[data-journey-ready="true"] [data-sign-anchor] .journey-static-art, .dw-journey[data-journey-ready="true"] .mini-sale-sign { visibility: hidden; } .dw-journey .listing-image { position: relative; } .dw-journey .mini-sale-sign { position: absolute; bottom: 7px; right: 7px; width: 68px; height: 90px; pointer-events: none; filter: drop-shadow(1px 3px 3px #17211855); } .dw-journey .mini-sale-sign::before { content: ''; position: absolute; width: 5px; height: 90px; background: #f4f7f2; left: 0; top: 0; } .dw-journey .mini-sale-sign::after { content: ''; position: absolute; width: 68px; height: 5px; background: #f4f7f2; left: 0; top: 5px; } .dw-journey .mini-sale-sign > span { display: flex; align-items: center; justify-content: space-between; flex-direction: column; position: absolute; left: 9px; top: 14px; width: 55px; height: 54px; padding: 5px 2px; background: #78be3f; color: #171b19; font: 800 9px/1.2 Onest,sans-serif; } .dw-journey .mini-sale-sign b { background: #171b19; color: #f4f7f2; font-size: 7px; width: 100%; padding: 6px 0; text-align: center; } .dw-journey .journey-house-scene { position: relative; isolation: isolate; } .dw-journey .journey-house { width: 100%; height: auto; position: relative; display: block; } .dw-journey .report-page .r-footer .brand-logo { filter: brightness(.2); } .dw-journey .journey-planted-anchor { position: absolute; width: 24%; height: 56%; right: 7%; bottom: 4%; z-index: 2; } @media (max-width: 760px), (prefers-reduced-motion: reduce) { .dw-journey .sign-journey-layer { display: none; } .dw-journey[data-journey-ready="true"] [data-sign-anchor] .journey-static-art, .dw-journey[data-journey-ready="true"] .mini-sale-sign { visibility: visible; } } /* Keep More: one sign, eight chapters. The canvas occupies these reserved anchors. */ .dw-journey.savings-page { --ink: oklch(22% .008 150); --muted: oklch(45% .015 150); --paper: oklch(98% .004 150); --a-green: oklch(74% .176 133); --a-green-dark: oklch(45% .119 133); background: var(--paper); } .dw-journey.savings-page h1, .dw-journey.savings-page h2, .dw-journey.savings-page h3 { font-family: Onest, Arial, sans-serif; } .dw-journey.savings-page h2 { font-size: clamp(40px, 4.8vw, 68px); font-weight: 650; line-height: 1.04; letter-spacing: -.065em; margin-bottom: 27px; text-wrap: balance; } .dw-journey.savings-page .a-journey-stop { position: relative; padding: 85px 5%; scroll-margin-top: 20px; } .dw-journey.savings-page .a-journey-inner { width: 100%; max-width: 1320px; margin-inline: auto; min-width: 0; } .dw-journey.savings-page .a-journey-split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr); gap: clamp(40px, 6vw, 100px); align-items: center; } .dw-journey.savings-page .a-journey-copy { min-width: 0; } .dw-journey.savings-page .a-journey-copy > p:not(.a-section-number):not(.a-hero-kicker):not(.a-sample-disclosure):not(.a-award-line) { font-size: 17px; line-height: 1.75; max-width: 49ch; color: var(--muted); } .dw-journey.savings-page .a-section-number { font-size: 11px; font-weight: 650; letter-spacing: .065em; margin-bottom: 24px; color: var(--muted); } .dw-journey.savings-page .a-sign-anchor { width: 100%; height: 550px; position: relative; pointer-events: none; align-self: center; min-width: 0; } .dw-journey.savings-page .journey-static-art { position: absolute; inset: 0; width: auto; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; } .dw-journey.savings-page .journey-static-art > img { width: 100%; height: 100%; object-fit: contain; } .dw-journey.savings-page .journey-hero { padding-top: 20px; padding-bottom: 30px; } .dw-journey.savings-page .journey-hero .a-journey-inner { min-height: 690px; } .dw-journey.savings-page .a-hero-kicker { font-size: 11px; font-weight: 650; letter-spacing: .08em; color: var(--muted); margin-bottom: 25px; } .dw-journey.savings-page .journey-hero h1 { font-size: clamp(54px, 6.2vw, 91px); line-height: 1.02; letter-spacing: -.072em; font-weight: 680; margin-bottom: 29px; } .dw-journey.savings-page .journey-hero h1 span { color: var(--a-green-dark); } .dw-journey.savings-page .a-hero-anchor { height: 630px; } .dw-journey.savings-page .journey-hero .address-entry { max-width: 520px; margin-top: 26px; } .dw-journey.savings-page .journey-hero .address-entry label { font-size: 14px; margin-bottom: 12px; } .dw-journey.savings-page .journey-hero .address-pill { flex-wrap: wrap; border-radius: 12px; padding: 8px; background: oklch(99% .003 150); border: 1px solid oklch(80% .013 150); box-shadow: none; } .dw-journey.savings-page .journey-hero .address-pill input { width: 100%; padding: 12px 10px; font-size: 16px; min-height: 45px; } .dw-journey.savings-page .journey-hero .address-pill button { width: 100%; justify-content: space-between; border-radius: 7px; padding: 17px 19px; background: var(--a-green); color: var(--ink); font-size: 14px; } .dw-journey.savings-page .journey-hero .form-assurance { font-size: 11px; margin: 10px 0 0; color: var(--muted); } .dw-journey.savings-page .a-scroll-link { margin-top: 30px; display: inline-flex; align-items: center; gap: 16px; font-size: 12px; text-decoration: none; color: var(--muted); } .dw-journey.savings-page .a-scroll-link span { font-size: 23px; } .dw-journey.savings-page .a-award-stop { background: oklch(92% .066 133); } .dw-journey.savings-page .a-experience { margin: 30px 0; display: flex; gap: 45px; } .dw-journey.savings-page .a-experience dt { font-size: clamp(33px, 3.7vw, 50px); line-height: 1.1; letter-spacing: -.065em; font-weight: 650; } .dw-journey.savings-page .a-experience dd { margin: 10px 0 0; font-size: 12px; line-height: 1.5; max-width: 150px; } .dw-journey.savings-page .a-award-line { padding-top: 22px; border-top: 1px solid oklch(73% .05 133); font-size: 15px; line-height: 1.55; } .dw-journey.savings-page .a-award-line strong, .dw-journey.savings-page .a-award-line span { display: block; } .dw-journey.savings-page .a-award-line span { font-size: 13px; margin-top: 7px; color: var(--muted); } .dw-journey.savings-page .a-marketing-stop { color: oklch(96% .006 150); background: oklch(23% .013 150); } .dw-journey.savings-page .a-marketing-stop .a-section-number { color: oklch(78% .134 133); } .dw-journey.savings-page .a-marketing-stop .a-journey-copy > p:not(.a-section-number) { color: oklch(79% .01 150); } .dw-journey.savings-page .a-marketing-stop .plain-link { color: oklch(81% .14 133); border-color: oklch(47% .04 133); } .dw-journey.savings-page .a-service-list { list-style: none; padding: 0; margin: 33px 0 20px; } .dw-journey.savings-page .a-service-list li { display: grid; grid-template-columns: 25px 1fr; gap: 17px; padding: 20px 0; border-top: 1px solid oklch(40% .015 150); } .dw-journey.savings-page .a-service-list li > span { font-size: 11px; line-height: 2.3; color: oklch(78% .134 133); } .dw-journey.savings-page .a-service-list h3 { font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -.04em; margin-bottom: 8px; } .dw-journey.savings-page .a-service-list p { color: oklch(78% .01 150); font-size: 14px; line-height: 1.7; margin: 0; } .dw-journey.savings-page .a-chart-split { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 45px; align-items: start; } .dw-journey.savings-page .a-chart-copy { min-width: 0; } .dw-journey.savings-page .a-chart-copy h2 { font-size: clamp(40px, 4.3vw, 61px); } .dw-journey.savings-page .a-chart-copy h2 span { color: var(--a-green-dark); } .dw-journey.savings-page .a-chart-copy > p:not(.a-section-number) { color: var(--muted); max-width: 58ch; font-size: 16px; } .dw-journey.savings-page .a-chart-anchor { height: 450px; align-self: start; position: sticky; top: 150px; margin-top: 160px; } .dw-journey.savings-page .a-chart-slot { margin: 35px 0 24px; } .dw-journey.savings-page .a-report-stop { background: oklch(94% .012 150); } .dw-journey.savings-page .a-report-inclusions { padding: 0; margin: 30px 0; list-style: none; } .dw-journey.savings-page .a-report-inclusions li { display: flex; align-items: center; gap: 12px; padding-block: 11px; font-size: 15px; } .dw-journey.savings-page .a-report-inclusions li::before { content: '✓'; font-size: 18px; color: var(--a-green-dark); } .dw-journey.savings-page .a-sample-disclosure { font-size: 11px; color: var(--muted); line-height: 1.6; max-width: 400px; margin-top: 17px; } .dw-journey.savings-page .homes-section { background: oklch(98.6% .004 150); padding-block: 55px 80px; } .dw-journey.savings-page .a-homes-heading { display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: center; gap: 30px; margin-bottom: 30px; } .dw-journey.savings-page .a-listing-anchor { width: 220px; height: 275px; justify-self: end; } .dw-journey.savings-page .homes-section .listing-grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; gap: 36px 30px; overflow: visible; } .dw-journey.savings-page .listing-image { position: relative; aspect-ratio: 4/3; border-radius: 12px; } .dw-journey.savings-page .listing-.dw-journey { position: relative; padding: 22px 0 10px; } .dw-journey.savings-page .listing-meta { color: var(--muted); font-size: 10px; } .dw-journey.savings-page .listing-address { font-size: clamp(21px, 1.9vw, 28px); max-width: 85%; font-weight: 600; line-height: 1.25; } .dw-journey.savings-page .listing-price { font-size: 20px; font-weight: 600; letter-spacing: -.03em; } .dw-journey.savings-page .listing-source { margin-top: 22px; font-size: 11px; opacity: 1; color: var(--muted); } .dw-journey.savings-page .a-guide-stop { background: oklch(95% .015 150); } .dw-journey.savings-page .a-guide-links { margin: 33px 0 25px; } .dw-journey.savings-page .a-guide-links a { display: grid; grid-template-columns: 125px 1fr; gap: 20px; align-items: center; text-decoration: none; padding: 20px 0; border-top: 1px solid oklch(83% .012 150); } .dw-journey.savings-page .a-guide-links img { width: 125px; height: 105px; object-fit: cover; border-radius: 7px; } .dw-journey.savings-page .a-guide-links span { font-size: 10px; color: var(--muted); } .dw-journey.savings-page .a-guide-links strong { display: block; font-size: 21px; line-height: 1.25; letter-spacing: -.045em; font-weight: 580; margin-top: 10px; color: var(--ink); } .dw-journey.savings-page .a-faq-inner { margin-top: 55px; padding-top: 35px; border-top: 1px solid oklch(80% .015 150); } .dw-journey.savings-page .a-guide-stop .a-sign-anchor { align-self: start; position: sticky; top: 115px; margin-top: 35px; } .dw-journey.savings-page .a-faq-inner > h3 { font-size: 30px; line-height: 1.2; letter-spacing: -.045em; max-width: 300px; font-weight: 600; } .dw-journey.savings-page .a-faq-list details { border-color: oklch(80% .015 150); } .dw-journey.savings-page .a-faq-list summary { font-size: 15px; line-height: 1.5; } .dw-journey.savings-page .a-faq-list details p { color: var(--muted); font-size: 14px; } .dw-journey.savings-page .a-finale-stop { background: var(--a-green); padding-top: 80px; padding-bottom: 30px; overflow: clip; } .dw-journey.savings-page .a-finale-inner { display: grid; grid-template-columns: .83fr 1.17fr; align-items: center; gap: 20px; } .dw-journey.savings-page .a-finale-copy { position: relative; z-index: 2; padding-bottom: 65px; } .dw-journey.savings-page .a-finale-copy h2 { font-size: clamp(43px, 5.1vw, 76px); } .dw-journey.savings-page .a-finale-copy > p:not(.a-section-number) { font-size: 16px; color: oklch(29% .04 133); line-height: 1.7; max-width: 420px; } .dw-journey.savings-page .a-finale-copy .a-section-number { color: oklch(29% .04 133); } .dw-journey.savings-page .a-finale-phone { display: block; font-size: 13px; margin-top: 19px; text-underline-offset: 4px; } .dw-journey.savings-page .journey-house-scene { position: relative; min-height: 590px; width: 112%; margin-left: -3%; isolation: isolate; } .dw-journey.savings-page .journey-house-scene::before { content: ''; position: absolute; width: 110%; height: 28%; bottom: 11%; left: -5%; border-radius: 50%; background: oklch(67% .153 133); transform: rotate(-6deg); z-index: -1; } .dw-journey.savings-page .journey-house { position: absolute; width: 104%; max-width: none; height: 100%; object-fit: contain; left: -10%; bottom: 8%; } .dw-journey.savings-page .journey-planted-anchor { position: absolute; width: 235px; height: 360px; right: 3%; bottom: 8%; } .dw-journey.savings-page .a-house-note { position: absolute; bottom: 0; right: 9%; font-size: 10px; color: oklch(32% .025 133); } .dw-journey.savings-page .a-art-portrait { inset: 30px; background: oklch(23% .013 150); border-radius: 10px; overflow: hidden; } .dw-journey.savings-page .a-art-portrait > img { height: 84%; object-fit: cover; } .dw-journey.savings-page .a-art-portrait > p { margin: 0; padding: 18px; background: var(--a-green); width: 100%; font-size: 13px; text-align: center; line-height: 1.5; } .dw-journey.savings-page .a-art-portrait strong { display: block; font-size: 29px; letter-spacing: -.04em; } .dw-journey.savings-page .a-art-photo { inset: 80px 0; background: var(--paper); border-radius: 10px; overflow: hidden; } .dw-journey.savings-page .a-art-photo > img { height: 78%; object-fit: cover; } .dw-journey.savings-page .a-art-photo p { font-size: 12px; font-weight: 650; letter-spacing: .025em; color: var(--ink); padding: 22px 15px; text-align: center; margin: 0; } .dw-journey.savings-page .a-art-numbers { inset: 50px 0; background: var(--a-green); padding: 22px; border-radius: 10px; align-items: flex-start; } .dw-journey.savings-page .a-art-numbers > span { font-size: 10px; font-weight: 650; } .dw-journey.savings-page .a-art-numbers strong { font-size: 47px; letter-spacing: -.06em; margin: 15px 0; } .dw-journey.savings-page .a-art-numbers p { font-size: 15px; line-height: 1.4; } .dw-journey.savings-page .a-art-numbers small { font-size: 10px; line-height: 1.6; } .dw-journey.savings-page .a-art-report { inset: 40px; padding: 35px; background: oklch(99% .003 150); border: 1px solid oklch(80% .015 150); border-radius: 10px; align-items: start; } .dw-journey.savings-page .a-art-report > span, .dw-journey.savings-page .a-art-report small { font-size: 10px; color: var(--muted); } .dw-journey.savings-page .a-art-report h3 { font-size: 47px; line-height: 1; margin: 30px 0 25px; font-weight: 650; } .dw-journey.savings-page .a-art-report > p { font-size: 13px; border-top: 1px solid oklch(86% .009 150); padding-top: 12px; width: 100%; } .dw-journey.savings-page .a-final-mini-sign { display: block; width: 68px; height: 90px; inset: auto 25px 25px auto; transform: scale(2.5); transform-origin: bottom right; } @media (max-width: 1100px) and (min-width: 761px) { .dw-journey.savings-page .a-journey-split { grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 35px; } .dw-journey.savings-page .a-chart-split { grid-template-columns: minmax(0, 1fr) 230px; gap: 25px; } .dw-journey.savings-page .a-sign-anchor { height: 500px; } .dw-journey.savings-page .a-listing-anchor { height: 250px; } .dw-journey.savings-page .a-chart-anchor { height: 375px; } .dw-journey.savings-page .a-journey-stop { padding-inline: 4%; } .dw-journey.savings-page .a-finale-inner { grid-template-columns: 1fr 1fr; } .dw-journey.savings-page .journey-house-scene { min-height: 520px; } .dw-journey.savings-page .journey-planted-anchor { height: 310px; width: 190px; right: 0; } } @media (max-width: 760px) { .dw-journey.savings-page .a-journey-stop { padding: 60px 6%; } .dw-journey.savings-page .a-journey-split, .dw-journey.savings-page .a-chart-split, .dw-journey.savings-page .a-finale-inner { grid-template-columns: 1fr; gap: 20px; } .dw-journey.savings-page h2 { font-size: clamp(36px, 9.8vw, 53px); } .dw-journey.savings-page .a-journey-copy > p:not(.a-section-number):not(.a-hero-kicker):not(.a-sample-disclosure):not(.a-award-line) { font-size: 16px; } .dw-journey.savings-page .journey-hero { padding-top: 35px; padding-bottom: 25px; } .dw-journey.savings-page .journey-hero .a-journey-inner { min-height: auto; } .dw-journey.savings-page .journey-hero h1 { font-size: clamp(45px, 11.8vw, 71px); margin-bottom: 23px; } .dw-journey.savings-page .a-hero-kicker { font-size: 10px; margin-bottom: 23px; } .dw-journey.savings-page .journey-hero .address-entry { margin-top: 23px; } .dw-journey.savings-page .journey-hero .address-pill button { font-size: 13px; padding: 16px; } .dw-journey.savings-page .a-scroll-link { display: none; } .dw-journey.savings-page .a-sign-anchor { height: 380px; max-width: 430px; margin: 0 auto; position: relative; top: auto; } .dw-journey.savings-page .a-hero-anchor { height: 420px; } .dw-journey.savings-page .a-experience { gap: 35px; } .dw-journey.savings-page .a-experience dt { font-size: 37px; } .dw-journey.savings-page .a-experience dd { font-size: 11px; } .dw-journey.savings-page .a-section-number { font-size: 10px; } .dw-journey.savings-page .a-service-list h3 { font-size: 21px; } .dw-journey.savings-page .a-chart-anchor { display: none; } .dw-journey.savings-page .a-chart-copy h2 { font-size: clamp(34px, 9.8vw, 48px); } .dw-journey.savings-page .a-chart-copy > p:not(.a-section-number) { font-size: 15px; } .dw-journey.savings-page .a-homes-heading { grid-template-columns: minmax(0, 1fr) 100px; gap: 10px; margin-bottom: 35px; } .dw-journey.savings-page .a-homes-heading h2 { font-size: 35px; } .dw-journey.savings-page .a-listing-anchor { width: 100px; height: 170px; } .dw-journey.savings-page .a-homes-heading .plain-link { font-size: 12px; gap: 14px; } .dw-journey.savings-page .homes-section .listing-grid { grid-template-columns: 1fr; gap: 27px; } .dw-journey.savings-page .listing-.dw-journey { padding-top: 17px; } .dw-journey.savings-page .listing-address { font-size: 24px; } .dw-journey.savings-page .listing-meta { font-size: 9px; } .dw-journey.savings-page .a-guide-links a { grid-template-columns: 105px 1fr; gap: 17px; } .dw-journey.savings-page .a-guide-links img { width: 105px; height: 110px; } .dw-journey.savings-page .a-guide-links strong { font-size: 20px; } .dw-journey.savings-page .a-faq-inner { grid-template-columns: 1fr; gap: 10px; margin-top: 30px; padding-top: 35px; } .dw-journey.savings-page .a-faq-inner > h3 { font-size: 28px; } .dw-journey.savings-page .a-finale-copy { padding-bottom: 0; } .dw-journey.savings-page .a-finale-copy h2 { font-size: clamp(43px, 11vw, 61px); } .dw-journey.savings-page .journey-house-scene { width: 112%; margin-left: -6%; min-height: 365px; } .dw-journey.savings-page .journey-house { width: 105%; left: -8%; bottom: 8%; } .dw-journey.savings-page .journey-planted-anchor { position: absolute; width: 155px; height: 245px; margin: 0; right: 0; bottom: 7%; } .dw-journey.savings-page .a-house-note { font-size: 9px; right: 7%; } .dw-journey.savings-page .a-art-portrait { inset: 0 10%; } .dw-journey.savings-page .a-art-photo { inset: 25px 0; } .dw-journey.savings-page .a-art-report { inset: 0 15px; padding: 25px; } .dw-journey.savings-page .a-art-report h3 { font-size: 40px; margin-top: 18px; margin-bottom: 18px; } .dw-journey.savings-page .a-final-mini-sign { width: 68px; height: 90px; transform: scale(1.7); inset: auto 15px 15px auto; } .dw-journey.savings-page .a-guide-stop .a-sign-anchor { position: relative; top: auto; margin-top: 0; } } @media (prefers-reduced-motion: reduce) { .dw-journey.savings-page .a-sign-anchor { position: relative; top: auto; } .dw-journey.savings-page .journey-planted-anchor { position: absolute; } } /* One shared comparison for both design previews. No external fonts or images. */ .dw-journey .dw-savings-chart { --chart-ink: #172019; --chart-green: #83c94b; --chart-line: #dfe5df; --chart-soft: #edf5e7; color: var(--chart-ink); font-family: Onest, Arial, sans-serif; width: 100%; min-width: 0; max-width: 1100px; font-variant-numeric: tabular-nums; } .dw-journey .dw-savings-chart *, .dw-journey .dw-savings-chart *::before, .dw-journey .dw-savings-chart *::after { box-sizing: border-box; } .dw-journey .dw-savings-chart [hidden] { display: none !important; } .dw-journey .dw-savings-chart .dw-chart-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 16px; overflow: hidden; background: #f8faf7; border: 1px solid var(--chart-line); } .dw-journey .dw-savings-chart .dw-chart-entry { padding: 28px 30px 24px; min-width: 0; } .dw-journey .dw-savings-chart .dw-chart-entry > label { display: block; color: #334139; font-size: 14px; font-weight: 600; margin: 0 0 12px; } .dw-journey .dw-savings-chart .dw-chart-price-field { display: flex; align-items: baseline; gap: 5px; border-bottom: 1px solid #adbcae; } .dw-journey .dw-savings-chart .dw-chart-price-field > span { font-size: clamp(25px, 3vw, 43px); color: #6b766e; } .dw-journey .dw-savings-chart .dw-chart-price-field input { padding: 0 0 8px; margin: 0; width: 100%; min-width: 0; font: 550 clamp(30px, 3.5vw, 49px)/1.2 Onest, Arial, sans-serif; letter-spacing: -.055em; color: var(--chart-ink); background: transparent; border: 0; border-radius: 0; outline-offset: 5px; } .dw-journey .dw-savings-chart input:disabled { opacity: 1; cursor: default; -webkit-text-fill-color: currentColor; } .dw-journey .dw-savings-chart .dw-chart-help { font-size: 12px; line-height: 1.55; color: #526157; margin: 11px 0 0; } .dw-journey .dw-savings-chart .dw-chart-error { color: #9a2b22; font-size: 12px; line-height: 1.5; margin: 4px 0 6px; min-height: 18px; } .dw-journey .dw-savings-chart [data-chart-range] { display: block; width: 100%; height: 20px; margin: 4px 0 7px; accent-color: #518f29; cursor: pointer; } .dw-journey .dw-savings-chart .dw-chart-endpoints { display: flex; justify-content: space-between; color: #546359; font-size: 12px; } .dw-journey .dw-savings-chart .dw-chart-result { display: flex; flex-direction: column; justify-content: center; background: var(--chart-green); padding: 28px 30px; min-width: 0; container-type: inline-size; } .dw-journey .dw-savings-chart .dw-chart-result-label { font-size: 13px; font-weight: 650; } .dw-journey .dw-savings-chart .dw-chart-result output { display: block; font-size: 46px; font-size: clamp(29px, 22cqw, 73px); font-weight: 650; line-height: 1.12; letter-spacing: -.075em; margin: 13px 0; } .dw-journey .dw-savings-chart[data-chart-detailed="true"] .dw-chart-result output { font-size: 34px; font-size: clamp(25px, 15cqw, 48px); } .dw-journey .dw-savings-chart .dw-chart-result p { font-size: 13px; line-height: 1.7; margin: 0; color: #233b17; } .dw-journey .dw-savings-chart .dw-chart-result strong { font-weight: 650; } .dw-journey .dw-savings-chart .dw-chart-table-title { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 30px 0 16px; } .dw-journey .dw-savings-chart .dw-chart-table-title p { font-size: 20px; font-weight: 600; letter-spacing: -.045em; margin: 0; } .dw-journey .dw-savings-chart .dw-chart-table-title > span { font-size: 11px; color: #627067; } .dw-journey .dw-savings-chart .dw-chart-scroll-hint { display: none; margin: 0 0 12px; font-size: 12px; color: #536158; } .dw-journey .dw-savings-chart .dw-chart-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; border-radius: 12px; border: 1px solid var(--chart-line); background: #f8faf7; } .dw-journey .dw-savings-chart table { width: 100%; min-width: 520px; table-layout: fixed; border-collapse: separate; border-spacing: 0; text-align: right; } .dw-journey .dw-savings-chart thead th { background: #19231c; color: #f8faf7; font-size: 14px; font-weight: 650; line-height: 1.3; padding: 18px 17px; vertical-align: top; } .dw-journey .dw-savings-chart thead th span { display: block; font-weight: 400; font-size: 11px; margin-top: 5px; color: #cbd6cd; } .dw-journey .dw-savings-chart thead th:last-child { background: #51882e; } .dw-journey .dw-savings-chart thead th:last-child span { color: #e5f6d9; } .dw-journey .dw-savings-chart th:first-child { text-align: left; } .dw-journey .dw-savings-chart tbody th, .dw-journey .dw-savings-chart tbody td { padding: 15px 17px; font-size: 16px; line-height: 1.25; border-bottom: 1px solid #e8ece7; font-weight: 450; white-space: nowrap; } .dw-journey .dw-savings-chart tbody th { font-weight: 600; } .dw-journey .dw-savings-chart tbody td:last-child { background: var(--chart-soft); color: #24461a; font-weight: 700; } .dw-journey .dw-savings-chart tbody tr:last-child > * { border-bottom: 0; } .dw-journey .dw-savings-chart tbody tr.is-selected > *, .dw-journey .dw-savings-chart tbody tr.dw-chart-custom > * { background: #e6f1de; font-weight: 700; } .dw-journey .dw-savings-chart tbody tr.is-selected th, .dw-journey .dw-savings-chart tbody tr.dw-chart-custom th { box-shadow: none; } .dw-journey .dw-savings-chart tbody tr.is-selected td:last-child, .dw-journey .dw-savings-chart tbody tr.dw-chart-custom td:last-child { background: var(--chart-green); color: #172019; } .dw-journey .dw-savings-chart tbody th small { display: block; font-size: 10px; font-weight: 500; margin-top: 4px; color: #52634e; } .dw-journey .dw-savings-chart .dw-chart-bottom { padding-top: 20px; } .dw-journey .dw-savings-chart .dw-chart-disclosure { font-size: 12px; line-height: 1.7; color: #536158; margin: 0 0 20px; max-width: 850px; } .dw-journey .dw-savings-chart .dw-chart-cta { display: inline-flex; justify-content: space-between; align-items: center; gap: 30px; font: 650 14px/1.5 Onest, Arial, sans-serif; color: #f8faf7; border: 1px solid #172019; border-radius: 7px; background: #172019; padding: 15px 19px; cursor: pointer; transition: background .2s; } .dw-journey .dw-savings-chart .dw-chart-cta:hover { background: #34483b; } .dw-journey .dw-savings-chart .dw-chart-cta:disabled { cursor: default; opacity: .65; } .dw-journey .dw-savings-chart :focus-visible { outline: 3px solid #51882e; outline-offset: 4px; } .dw-journey .dw-savings-chart .dw-chart-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0 !important; margin: -1px !important; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 760px) { .dw-journey .dw-savings-chart .dw-chart-controls { grid-template-columns: 1fr; } .dw-journey .dw-savings-chart .dw-chart-entry { padding: 23px 22px 20px; } .dw-journey .dw-savings-chart .dw-chart-result { padding: 22px; display: block; } .dw-journey .dw-savings-chart .dw-chart-result output { font-size: clamp(33px, 20cqw, 55px); margin: 9px 0; } .dw-journey .dw-savings-chart .dw-chart-result p { font-size: 12px; } .dw-journey .dw-savings-chart .dw-chart-price-field input { font-size: 42px; } .dw-journey .dw-savings-chart .dw-chart-table-title { padding-top: 25px; } .dw-journey .dw-savings-chart .dw-chart-table-title p { font-size: 18px; } .dw-journey .dw-savings-chart .dw-chart-scroll-hint { display: block; } .dw-journey .dw-savings-chart thead th { font-size: 13px; padding: 15px 12px; } .dw-journey .dw-savings-chart thead th span { font-size: 12px; } .dw-journey .dw-savings-chart tbody th, .dw-journey .dw-savings-chart tbody td { font-size: 14px; padding: 14px 12px; } .dw-journey .dw-savings-chart .dw-chart-cta { width: 100%; } } @media (prefers-reduced-motion: reduce) { .dw-journey .dw-savings-chart .dw-chart-cta { transition: none; } } /* Existing DonWong.ca palette and type, now with tactile object compositions. */ .dw-journey [data-object-morph] .morph-award-history { font-size: 16px; line-height: 1.6; font-weight: 650; margin-block: 16px 26px; } .dw-journey .report-page .r-journey-don > .morph-award-history { color: var(--r-lime); margin-bottom: 24px; } .dw-journey .morph-sources { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 26px; } .dw-journey .morph-sources span { border: 1px solid oklch(80% .018 140); background: oklch(97% .01 140); color: oklch(32% .028 140); font: 600 11px/1.4 Onest,sans-serif; padding: 8px 10px; border-radius: 4px; } .dw-journey [data-object-morph] .morph-source-note { font-size: 11px!important; line-height: 1.65!important; color: oklch(46% .022 140); max-width: 48ch; margin-top: 12px; } .dw-journey .morph-faq-section { border-top: 1px solid oklch(84% .01 140); } .dw-journey .morph-faq-list { margin-top: 35px; } .dw-journey .morph-faq-list details { border-top: 1px solid oklch(79% .015 140); } .dw-journey .morph-faq-list details:last-child { border-bottom: 1px solid oklch(79% .015 140); } .dw-journey .morph-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; font-size: 18px; font-weight: 550; line-height: 1.4; padding: 22px 0; list-style: none; } .dw-journey .morph-faq-list summary::-webkit-details-marker { display: none; } .dw-journey .morph-faq-list summary span { font-size: 25px; font-weight: 400; transition: transform 180ms ease-out; } .dw-journey .morph-faq-list [open] summary span { transform: rotate(45deg); } .dw-journey .morph-faq-list details p { font-size: 15px; line-height: 1.75; margin: 0 0 24px; color: oklch(42% .014 140); max-width: 48ch; } .dw-journey .morph-faq-list a { text-decoration: underline; text-underline-offset: 3px; } .dw-journey .morph-faq-list summary:focus-visible { outline: 2px solid oklch(55% .15 135); outline-offset: 5px; } .dw-journey [data-object-morph] .morph-static { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: absolute; inset: 0; } .dw-journey .morph-still-awards { position: relative; width: 100%; height: 390px; perspective: 800px; color: oklch(96% .012 90); } .dw-journey .morph-main-plaque { position: absolute; inset: 25px 20% 53px; padding: 27px 12px; border: 5px solid oklch(67% .084 83); border-radius: 4px 4px 10px 10px; background: oklch(23% .025 140); box-shadow: 9px 12px 0 oklch(48% .055 83); text-align: center; transform: rotate(-4deg); display: flex; align-items: center; justify-content: center; flex-direction: column; } .dw-journey .morph-main-plaque > span { font-size: 10px; letter-spacing: .16em; } .dw-journey .morph-main-plaque strong { display: block; font: 750 94px/1.1 Onest,sans-serif; color: oklch(83% .12 85); letter-spacing: -.065em; } .dw-journey .morph-main-plaque b { font-size: 15px; font-weight: 500; line-height: 1.4; } .dw-journey .morph-main-plaque em { font-style: normal; color: oklch(85% .1 85); font-size: 27px; margin-top: 12px; } .dw-journey .morph-small-plaque { position: absolute; width: 28%; height: 180px; top: 75px; left: 2%; border: 4px solid oklch(63% .062 85); background: oklch(31% .024 145); transform: rotate(-17deg); display: grid; place-items: center; padding: 15px; font-size: 14px; line-height: 1.4; text-align: center; box-shadow: 4px 8px 0 oklch(49% .045 83); } .dw-journey .morph-small-plaque:nth-child(2) { left: auto; right: 2%; transform: rotate(16deg); top: 110px; } .dw-journey .morph-still-awards > p { color: oklch(28% .02 140); font-size: 12px; text-align: center; position: absolute; bottom: 0; width: 100%; } .dw-journey .r-don-section .morph-still-awards > p { color: oklch(91% .06 133); } .dw-journey .morph-still-report { position: relative; width: 85%; max-width: 375px; padding-top: 30px; padding-bottom: 35px; } .dw-journey .morph-report-cover { position: relative; z-index: 1; background: oklch(99% .004 140); border: 1px solid oklch(80% .015 140); padding: 27px; transform: rotate(3deg); color: oklch(24% .015 140); } .dw-journey .morph-report-cover > span { font-size: 10px; letter-spacing: .12em; font-weight: 600; } .dw-journey .morph-report-cover h3 { font: 650 32px/1.1 Onest,sans-serif; letter-spacing: -.055em; margin-block: 22px 6px; } .dw-journey .morph-report-cover img { width: 100%; height: 140px; object-fit: contain; } .dw-journey .morph-report-cover p { font: 400 14px/1.85 Onest,sans-serif; border-block: 1px solid oklch(85% .015 140); padding-block: 14px; } .dw-journey .morph-report-cover small { display: block; font: 400 10px/1.5 Onest,sans-serif; padding-top: 15px; } .dw-journey .morph-back-page { position: absolute; top: 3px; bottom: 42px; left: -12px; right: 0; padding: 20px; background: oklch(91% .045 140); border: 1px solid oklch(76% .018 140); transform: rotate(-8deg); color: oklch(28% .02 140); } .dw-journey .morph-back-page > span { font-size: 9px; letter-spacing: .07em; } .dw-journey .morph-chart-bars { display: flex; gap: 9px; align-items: end; height: 110px; } .dw-journey .morph-chart-bars i { width: 20%; background: oklch(68% .14 133); height: 65%; } .dw-journey .morph-chart-bars i:nth-child(2n) { height: 90%; } .dw-journey .morph-still-disclaimer { color: oklch(48% .02 140); text-align: center; font-size: 10px; margin: 22px 0 0; } .dw-journey .morph-still-savings { width: 100%; height: 410px; position: relative; } .dw-journey .morph-soft-house { position: absolute; top: 36px; left: 15%; width: 62%; height: 130px; border-radius: 28px; background: oklch(87% .054 80); transform: rotate(-9deg); box-shadow: inset -12px -13px 0 oklch(77% .051 82); } .dw-journey .morph-soft-house::before { content: ''; position: absolute; width: 79%; height: 97px; border-radius: 22px; background: oklch(61% .10 140); top: -44px; left: 8%; transform: rotate(35deg) skew(-18deg); } .dw-journey .morph-house-window { position: absolute; width: 36px; height: 36px; border-radius: 9px; border: 4px solid oklch(96% .02 80); background: oklch(34% .038 150); left: 25px; top: 38px; } .dw-journey .morph-house-door { position: absolute; bottom: 0; height: 62px; width: 39px; border-radius: 20px 20px 0 0; left: 55%; background: oklch(40% .064 140); } .dw-journey .morph-coin { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: oklch(82% .12 85); color: oklch(39% .07 85); border: 4px solid oklch(69% .115 85); display: grid; place-items: center; font-size: 21px; font-weight: 750; } .dw-journey .morph-coin.one { top: 181px; left: 40%; transform: rotate(-20deg); } .dw-journey .morph-coin.two { top: 213px; left: 65%; transform: rotate(20deg); } .dw-journey .morph-coin.three { top: 240px; left: 30%; transform: rotate(-9deg); } .dw-journey .morph-wallet { position: absolute; bottom: 0; width: 84%; left: 8%; border-radius: 17px; background: oklch(29% .045 145); padding: 22px; color: oklch(96% .006 145); box-shadow: 5px 6px 0 oklch(20% .02 145); } .dw-journey .morph-wallet small { font-size: 10px; letter-spacing: .15em; } .dw-journey .morph-wallet strong { display: block; font-size: 39px; letter-spacing: -.055em; margin-block: 6px; color: oklch(80% .17 133); } .dw-journey .morph-wallet > span { font-size: 10px; } .dw-journey .morph-still-questions { position: relative; width: 75%; padding: 30px 25px; background: oklch(96% .025 133); color: oklch(24% .02 140); border: 1px solid oklch(74% .03 140); border-radius: 4px; box-shadow: 12px 12px 0 oklch(81% .10 133),22px 22px 0 oklch(34% .038 140); transform: rotate(-5deg); } .dw-journey .morph-question-tab { font-size: 10px; letter-spacing: .1em; } .dw-journey .morph-question-mark { display: block; font-size: 112px; font-weight: 650; line-height: 1.2; color: oklch(57% .15 133); } .dw-journey .morph-still-questions h3 { font: 600 30px/1.1 Onest,sans-serif; letter-spacing: -.05em; } .dw-journey .morph-still-questions p { font-size: 12px; margin-top: 18px; } .dw-journey .morph-question-index { display: flex; gap: 8px; margin-top: 25px; } .dw-journey .morph-question-index span { border-top: 2px solid oklch(64% .10 133); padding: 7px 8px 0; font-size: 11px; } .dw-journey .morph-still-booklets { position: relative; width: min(90%, 440px); height: 455px; perspective: 950px; } .dw-journey .morph-guide-book { position: absolute; width: 52%; min-height: 298px; padding: 17px 17px 15px 21px; border-radius: 3px 8px 8px 3px; background: oklch(96% .015 100); color: oklch(24% .018 145); box-shadow: 3px 4px 0 oklch(80% .02 125), 6px 8px 0 oklch(91% .013 125), 9px 12px 16px oklch(23% .018 145 / .15); transform-origin: 12% 90%; } .dw-journey .morph-guide-book::before { content: ''; position: absolute; inset: 0 auto 0 4px; width: 2px; background: oklch(29% .03 145 / .22); } .dw-journey .morph-guide-book > span { display: block; font: 650 8px/1.5 Onest,sans-serif; letter-spacing: .06em; } .dw-journey [data-object-morph] .morph-guide-book h3 { font: 700 clamp(17px, 2.8vw, 24px)/1.11 Onest,sans-serif; letter-spacing: -.045em; margin: 18px 0 10px; color: inherit; } .dw-journey [data-object-morph] .morph-guide-book p { font: 500 10px/1.45 Onest,sans-serif; color: inherit; margin: 10px 0; } .dw-journey .morph-guide-book > small { display: block; font: 600 8px/1.3 Onest,sans-serif; letter-spacing: .06em; border-top: 1px solid currentColor; padding-top: 10px; margin-top: 13px; } .dw-journey .morph-guide-book-1 { top: 15px; left: 3%; transform: rotate(-7deg); } .dw-journey .morph-guide-book-2 { top: 57px; right: 0; background: oklch(31% .049 149); color: oklch(96% .01 120); transform: rotate(7deg); } .dw-journey .morph-guide-book-3 { top: 182px; left: 22%; background: oklch(75% .17 132); transform: rotate(-3deg); } .dw-journey .morph-guide-art { position: relative; height: 66px; overflow: hidden; margin-top: 10px; border: 1px solid currentColor; opacity: .75; } .dw-journey .morph-guide-art-1::before { content: ''; position: absolute; width: 49px; height: 49px; border: 2px solid currentColor; transform: rotate(45deg); left: calc(50% - 25px); top: 30px; } .dw-journey .morph-guide-art-2 { background: repeating-linear-gradient(0deg,transparent 0 15px, oklch(96% .01 120 / .4) 15px 16px); } .dw-journey .morph-guide-art-2::after { content: '2%'; position: absolute; right: 7px; bottom: 1px; font: 700 46px/1 Onest,sans-serif; } .dw-journey .morph-guide-art-3 { background: repeating-linear-gradient(90deg,transparent 0 24%, oklch(24% .018 145 / .5) 24% 25%); } .dw-journey .morph-guide-art-3::after { content: ''; position: absolute; width: 23px; height: 23px; border-radius: 50%; background: oklch(96% .015 100); left: 32%; top: 21px; } /* A SOLD label belongs only to the illustrative closing scene, never listing cards. */ .dw-journey [data-sign-art="final"] .journey-planted-anchor .mini-sale-sign > span { color: transparent; } .dw-journey [data-sign-art="final"] .journey-planted-anchor .mini-sale-sign > span::after { content: 'SOLD'; position: absolute; left: -7px; top: 2px; width: 68px; padding: 1px 0; transform: rotate(-12deg); background: #00558c; color: oklch(97% .008 145); border-block: 1px solid oklch(97% .008 145); font: 900 17px/1.25 Onest,sans-serif; letter-spacing: .03em; text-align: center; } @media (max-width: 760px) { .dw-journey .morph-faq-list summary { font-size: 16px; } .dw-journey .report-page .r-journey-don > .morph-award-history { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .dw-journey .morph-faq-list summary span { transition: none; } } /* Small editorial additions shared by the review variants. */ .dw-journey .seller-brokerage { position:relative; z-index:14; } .dw-journey .seller-brokerage { color: oklch(26% .019 145); background: oklch(97% .012 110); border-block: 1px solid oklch(84% .019 145); padding: 30px clamp(24px,5vw,72px); } .dw-journey .seller-brokerage-inner { max-width: 1296px; margin: auto; } .dw-journey .seller-brokerage-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; } .dw-journey .seller-brokerage h3 { margin:0; max-width:42ch; font-family:inherit; font-size:clamp(19px,1.6vw,24px); font-weight:650; line-height:1.4; } .dw-journey .seller-brokerage-heading img { width:82px; height:58px; object-fit:contain; } .dw-journey .seller-brokerage p { font-size:13px; line-height:1.65; margin:12px 0 0; max-width:95ch; color:oklch(43% .02 145); } .dw-journey .seller-media-links { display:flex; flex-wrap:wrap; align-items:center; gap:18px 34px; margin:25px 0 0; } .dw-journey .seller-media-links a { color:oklch(34% .031 205); font-size:clamp(17px,1.6vw,23px); text-decoration:none; font-weight:650; } .dw-journey .seller-media-links a:hover { text-decoration:underline; text-underline-offset:5px; } .dw-journey .seller-media-links img { display:block; width:135px; height:45px; object-fit:contain; } .dw-journey .seller-process { width:100%; margin:34px 0 0; border-top:1px solid currentColor; color:inherit; } .dw-journey .seller-process > summary { display:flex; gap:24px; align-items:center; justify-content:space-between; list-style:none; cursor:pointer; padding:24px 0; font-size:clamp(20px,2vw,27px); font-weight:600; line-height:1.35; } .dw-journey .seller-process > summary::-webkit-details-marker { display:none; } .dw-journey .seller-process > summary::after { content:'+'; font-size:26px; flex:none; } .dw-journey .seller-process[open] > summary::after { content:'−'; } .dw-journey .seller-process ol { padding:0; margin:12px 0 24px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; list-style:none; } .dw-journey .seller-process li { min-width:0; } .dw-journey .seller-process li > span { display:block; color:oklch(75% .13 130); font-size:13px; margin-bottom:15px; } .dw-journey .seller-process li h4 { font-weight:600; font-family:inherit; font-size:20px; line-height:1.3; margin:0 0 10px; } .dw-journey .seller-process li p { color:inherit !important; opacity:.86; font-size:15px; line-height:1.65; margin:0; } .dw-journey .seller-process .seller-process-note { font-size:14px; color:inherit; opacity:.86; line-height:1.7; max-width:78ch; margin:0 0 20px; } .dw-journey .seller-process a { color:inherit; text-underline-offset:4px; } .dw-journey .r-don-section .seller-process { color:oklch(93% .011 140); padding-bottom:16px; } .dw-journey .seller-listing-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; padding:24px 0 30px; } .dw-journey .seller-listing-actions a { text-decoration:none; font-family:inherit; font-size:16px; font-weight:600; line-height:1.4; } .dw-journey .seller-listing-primary { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; min-height:52px; padding:14px 24px; border-radius:5px; background:oklch(39% .096 246); color:oklch(98% .006 220); } .dw-journey .seller-listing-secondary { color:oklch(30% .04 145); border-bottom:1px solid currentColor; padding:12px 0; } .dw-journey .seller-listing-primary:hover { background:oklch(31% .082 246); } .dw-journey .seller-listing-caption { font-size:14px; line-height:1.6; color:oklch(43% .019 145); margin:0 0 20px; max-width:75ch; } .dw-journey .seller-brokerage a:focus-visible,.dw-journey .seller-process summary:focus-visible,.dw-journey .seller-listing-actions a:focus-visible { outline:3px solid oklch(60% .13 246); outline-offset:5px; } @media(max-width:760px) { .dw-journey .seller-brokerage-heading { align-items:flex-start; gap:18px; } .dw-journey .seller-brokerage-heading img { width:64px; height:48px; } .dw-journey .seller-media-links { gap:20px; } .dw-journey .seller-media-links a { font-size:17px; } .dw-journey .seller-process { margin-top:20px; } .dw-journey .seller-process ol { grid-template-columns:1fr; gap:25px; } .dw-journey .seller-process li { display:grid; grid-template-columns:24px 1fr; gap:8px 12px; } .dw-journey .seller-process li > span { grid-row:span 2; margin:3px 0 0; } .dw-journey .seller-process li h4 { margin:0; } .dw-journey .seller-process li p { grid-column:2; } .dw-journey .seller-listing-actions { gap:16px; align-items:flex-start; } .dw-journey .seller-listing-primary { flex:1; } .dw-journey .seller-listing-secondary { flex-basis:100%; width:fit-content; } } /* The same motion system, using the live site's longer homeowner copy. */ .dw-journey.current-copy-page { --current-line: oklch(82% .015 145); } .dw-journey.current-copy-page .journey-hero { padding-top: 40px; padding-bottom: 46px; } .dw-journey.current-copy-page .journey-hero .a-journey-inner { min-height: auto; } .dw-journey.current-copy-page .journey-hero .a-journey-split { align-items: start; gap: 50px; } .dw-journey.current-copy-page .journey-hero h1 { font-size: clamp(47px, 4.9vw, 73px); max-width: 12ch; line-height: 1.025; letter-spacing: -.067em; margin-bottom: 23px; } .dw-journey.current-copy-page .a-hero-kicker { text-transform: uppercase; } .dw-journey.current-copy-page .a-hero-intro { max-width: 52ch !important; font-size: 17px !important; line-height: 1.65 !important; } .dw-journey.current-copy-page .a-hero-anchor { margin-top: 15px; height: 655px; } .dw-journey.current-copy-page .current-hero-entry { margin-top: 24px; max-width: 560px; } .dw-journey.current-copy-page .current-hero-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .dw-journey.current-copy-page .current-hero-fields > div { min-width: 0; } .dw-journey.current-copy-page .current-hero-fields label { font-size: 13px !important; margin-bottom: 7px !important; } .dw-journey.current-copy-page .current-hero-fields input { width: 100%; min-width: 0; min-height: 48px; border: 1px solid var(--current-line); border-radius: 7px; background: oklch(99% .003 145); color: var(--ink); padding: 11px 12px; font: inherit; font-size: 16px; } .dw-journey.current-copy-page .current-hero-fields input:focus-visible { outline: 3px solid oklch(57% .13 133); outline-offset: 2px; } .dw-journey.current-copy-page .current-submit { width: 100%; margin-top: 16px; display: flex; justify-content: space-between; background: var(--a-green); color: var(--ink); } .dw-journey.current-copy-page .journey-hero .form-assurance { font-size: 12px; } .dw-journey.current-copy-page .current-live-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding-top: 30px; margin-top: 50px; border-top: 1px solid var(--current-line); gap: 25px; } .dw-journey.current-copy-page .current-live-stats details { border: 0; padding: 0; margin: 0; } .dw-journey.current-copy-page .current-live-stats summary { display: block; padding: 0 18px 0 0; cursor: pointer; list-style: none; position: relative; font-size: 13px; } .dw-journey.current-copy-page .current-live-stats summary::-webkit-details-marker { display: none; } .dw-journey.current-copy-page .current-live-stats summary::after { content: '+'; position: absolute; right: 0; top: 9px; font-size: 19px; font-weight: 400; } .dw-journey.current-copy-page .current-live-stats details[open] summary::after { content: '−'; } .dw-journey.current-copy-page .current-live-stats summary strong { font-size: clamp(30px,3.1vw,43px); font-weight: 630; line-height: 1.15; letter-spacing: -.055em; display: block; margin-bottom: 10px; color: var(--a-green-dark); } .dw-journey.current-copy-page .current-live-stats summary span { font-size: 13px; font-weight: 500; line-height: 1.45; display: block; } .dw-journey.current-copy-page .current-live-stats details p { margin: 13px 0 0; padding: 0; font-size: 12px; line-height: 1.6; color: var(--muted); } .dw-journey.current-copy-page #service h2, .dw-journey.current-copy-page #award-title { font-size: clamp(38px,4vw,57px); line-height: 1.06; } .dw-journey.current-copy-page .a-experience { gap: 24px; } .dw-journey.current-copy-page .a-experience dt { font-size: clamp(30px,3.1vw,44px); } .dw-journey.current-copy-page .a-experience dd { max-width: 135px; } .dw-journey.current-copy-page .current-source-note { font-size: 11px !important; line-height: 1.55 !important; color: oklch(39% .026 133) !important; margin-top: 24px; padding-top: 15px; border-top: 1px dashed oklch(71% .041 133); } .dw-journey.current-copy-page #service .a-sign-anchor { align-self: start; position: sticky; top: 100px; margin-top: 120px; } .dw-journey.current-copy-page #service .a-service-list li { padding-block: 16px; } .dw-journey.current-copy-page .current-inline-links { display: flex; flex-wrap: wrap; align-items: center; gap: 15px 28px; margin-top: 25px; } .dw-journey.current-copy-page .current-inline-links .plain-link { font-size: 12px; } .dw-journey.current-copy-page .current-savings-explanation { font-size: 14px !important; line-height: 1.8; max-width: 68ch !important; margin-top: 22px; } .dw-journey.current-copy-page .current-report-subtitle { margin-block: 24px 14px; font-size: 25px; font-weight: 620; letter-spacing: -.035em; line-height: 1.2; } .dw-journey.current-copy-page #home-review .button { margin-top: 15px; } .dw-journey.current-copy-page .a-sample-disclosure { font-size: 12px; max-width: 50ch; } .dw-journey.current-copy-page .current-guide-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; margin-top: 35px; } .dw-journey.current-copy-page .current-guide-list > a { min-width: 0; padding: 21px 20px 24px 0; border-top: 1px solid var(--current-line); text-decoration: none; position: relative; } .dw-journey.current-copy-page .current-guide-list strong { display: block; font-size: 19px; line-height: 1.25; font-weight: 620; letter-spacing: -.035em; margin-bottom: 10px; } .dw-journey.current-copy-page .current-guide-list span { display: block; font-size: 12px; line-height: 1.65; color: var(--muted); } .dw-journey.current-copy-page .current-guide-list b { position: absolute; right: 0; top: 21px; font-size: 15px; font-weight: 450; color: var(--a-green-dark); } .dw-journey.current-copy-page .current-guide-list a:hover strong { color: var(--a-green-dark); } .dw-journey.current-copy-page .current-community { margin-top: 45px; padding-top: 30px; border-top: 1px solid var(--current-line); } .dw-journey.current-copy-page .current-community > h3 { font-size: 34px; line-height: 1.1; font-weight: 610; letter-spacing: -.045em; max-width: 16ch; } .dw-journey.current-copy-page .current-community > p:not(.a-section-number) { font-size: 15px; line-height: 1.7; color: var(--muted); } .dw-journey.current-copy-page .current-community-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 25px; margin-block: 20px; } .dw-journey.current-copy-page .current-community-links > a { display: flex; justify-content: space-between; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--current-line); font-size: 14px; text-decoration: none; } .dw-journey.current-copy-page .current-faq-stop { background: oklch(94% .045 133); } .dw-journey.current-copy-page .current-faq-stop .a-faq-list { margin-top: 25px; } .dw-journey.current-copy-page .current-faq-stop .a-sign-anchor { margin-top: 80px; } .dw-journey.current-copy-page .current-faq-stop summary { font-size: 16px; } .dw-journey.current-copy-page .current-faq-stop details p { max-width: 58ch; font-size: 14px; line-height: 1.75; } .dw-journey.current-copy-page .current-award-art { inset: 30px 10%; align-items: center; justify-content: center; gap: 14px; } .dw-journey.current-copy-page .current-static-award { width: 88%; padding: 40px 25px; border-radius: 8px; background: oklch(26% .018 145); color: oklch(87% .07 90); text-align: center; box-shadow: 8px 12px 0 oklch(78% .06 105); transform: rotate(-5deg); } .dw-journey.current-copy-page .current-static-award span, .dw-journey.current-copy-page .current-static-award b { display: block; font-size: 12px; letter-spacing: .07em; } .dw-journey.current-copy-page .current-static-award strong { display: block; font-size: 112px; letter-spacing: -.1em; line-height: 1.2; } .dw-journey.current-copy-page .current-static-award em { display: block; font-size: 34px; margin-top: 12px; font-style: normal; } .dw-journey.current-copy-page .current-award-art > p { display: block; padding: 20px 24px; margin-top: 20px; color: var(--ink); background: oklch(96% .017 105); width: 100%; font-size: 14px; border-radius: 5px; text-align: center; } .dw-journey.current-copy-page .current-award-art > p strong { display: block; font-size: 30px; } .dw-journey.current-copy-page .current-question-art { padding: 25px; gap: 20px; } .dw-journey.current-copy-page .current-question-art > span { font-size: 12px; letter-spacing: .04em; } .dw-journey.current-copy-page .current-question-art > strong { width: 100%; padding: 26px; display: block; border-radius: 10px; background: oklch(98% .008 133); font-size: 25px; line-height: 1.1; font-weight: 620; letter-spacing: -.04em; box-shadow: 5px 8px 0 oklch(77% .048 133); transform: rotate(-5deg); } .dw-journey.current-copy-page .current-question-art > strong:nth-of-type(2) { transform: rotate(4deg); color: var(--a-green-dark); } .dw-journey.current-copy-page .current-question-art > p { font-size: 14px; margin-top: 10px; } @media (max-width: 1100px) and (min-width: 761px) { .dw-journey.current-copy-page .journey-hero .a-journey-split { gap: 28px; } .dw-journey.current-copy-page .a-hero-anchor { height: 580px; } .dw-journey.current-copy-page .current-hero-fields { gap: 10px; } .dw-journey.current-copy-page .current-live-stats { gap: 18px; } .dw-journey.current-copy-page .a-experience { flex-wrap: wrap; } .dw-journey.current-copy-page .current-guide-list { grid-template-columns: 1fr; } } @media (max-width: 760px) { .dw-journey.current-copy-page .journey-hero { padding-top: 30px; } .dw-journey.current-copy-page .journey-hero h1 { font-size: clamp(41px,10.6vw,65px); max-width: 13ch; } .dw-journey.current-copy-page .a-hero-intro { font-size: 16px !important; line-height: 1.6 !important; } .dw-journey.current-copy-page .journey-hero .a-journey-split { gap: 20px; } .dw-journey.current-copy-page .a-hero-anchor { height: 375px; margin-top: 5px; } .dw-journey.current-copy-page .current-hero-fields { gap: 12px 10px; } .dw-journey.current-copy-page .current-hero-fields > div:last-child { grid-column: 1 / -1; } .dw-journey.current-copy-page .current-live-stats { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 15px; gap: 24px 20px; } .dw-journey.current-copy-page .current-live-stats summary strong { font-size: 33px; } .dw-journey.current-copy-page .current-live-stats summary span { font-size: 12px; } .dw-journey.current-copy-page .current-live-stats details p { font-size: 12px; } .dw-journey.current-copy-page #service h2, .dw-journey.current-copy-page #award-title { font-size: clamp(36px,9.3vw,51px); } .dw-journey.current-copy-page .a-experience { flex-wrap: wrap; gap: 22px; } .dw-journey.current-copy-page .a-experience dt { font-size: 31px; } .dw-journey.current-copy-page .a-experience dd { font-size: 11px; max-width: 110px; } .dw-journey.current-copy-page #service .a-sign-anchor { position: relative; top: auto; margin-top: 0; } .dw-journey.current-copy-page .current-guide-list { gap: 0 17px; } .dw-journey.current-copy-page .current-guide-list strong { font-size: 18px; } .dw-journey.current-copy-page .current-guide-list span { font-size: 12px; } .dw-journey.current-copy-page .current-community > h3 { font-size: 31px; } .dw-journey.current-copy-page .current-faq-stop .a-sign-anchor { margin-top: 0; } .dw-journey.current-copy-page .current-static-award { padding: 23px; } .dw-journey.current-copy-page .current-static-award strong { font-size: 78px; } .dw-journey.current-copy-page .current-static-award em { font-size: 27px; } .dw-journey.current-copy-page .current-award-art > p { margin: 10px 0 0; padding: 15px; } .dw-journey.current-copy-page .current-award-art > p strong { font-size: 26px; } .dw-journey.current-copy-page .current-question-art > strong { font-size: 22px; padding: 20px; } } /* Calgary atmosphere stays behind the ordinary HTML and the existing scene anchors. */ .dw-journey.current-copy-page .current-atmosphere-host { isolation: isolate; } .dw-journey.current-copy-page .current-atmosphere-host > .a-journey-inner { position: relative; z-index: 1; } .dw-journey.current-copy-page .current-atmosphere { position: absolute; inset: 0; overflow: clip; pointer-events: none; z-index: 0; } .dw-journey.current-copy-page .current-atmosphere-layer { display: block; position: absolute; inset: -56px 0; transform: translate3d(0,0,0); } .dw-journey.current-copy-page .current-atmosphere-layer img { width: 100%; height: 100%; display: block; object-fit: cover; } .dw-journey.current-copy-page .current-atmosphere::after { content: ''; position: absolute; inset: 0; pointer-events: none; } .dw-journey.current-copy-page .current-atmosphere--hero { background: oklch(97% .009 95); } .dw-journey.current-copy-page .current-atmosphere--hero img { object-position: 62% 64%; } .dw-journey.current-copy-page .current-atmosphere--hero::after { background: linear-gradient(90deg,oklch(98% .008 95 / .99) 0%,oklch(98% .008 95 / .97) 30%,oklch(98% .008 95 / .8) 46%,oklch(98% .008 95 / .16) 75%,oklch(98% .008 95 / .04) 100%),linear-gradient(0deg,oklch(98% .008 95) 0%,oklch(98% .008 95 / .06) 35%); } .dw-journey.current-copy-page .journey-hero .current-hero-fields input { background: oklch(99% .004 95 / .97); } .dw-journey.current-copy-page .journey-hero .a-hero-kicker, .dw-journey.current-copy-page .journey-hero .a-hero-intro, .dw-journey.current-copy-page .journey-hero .form-assurance, .dw-journey.current-copy-page .journey-hero .a-scroll-link { color: oklch(36% .016 145); } .dw-journey.current-copy-page .journey-hero .current-live-stats { background: oklch(98% .008 95 / .92); padding-bottom: 20px; } .dw-journey.current-copy-page .current-atmosphere--awards { background: oklch(92% .066 133); } .dw-journey.current-copy-page .current-atmosphere--awards .current-atmosphere-layer { opacity: .32; } .dw-journey.current-copy-page .current-atmosphere--awards img { object-position: 68% 80%; } .dw-journey.current-copy-page .current-atmosphere--awards::after { background: linear-gradient(90deg,oklch(92% .066 133 / .98) 0%,oklch(92% .066 133 / .96) 38%,oklch(92% .066 133 / .47) 67%,oklch(92% .066 133 / .2) 100%),linear-gradient(0deg,oklch(92% .066 133 / .98) 0%,oklch(92% .066 133 / .02) 45%,oklch(92% .066 133 / .62) 100%); } .dw-journey.current-copy-page .current-atmosphere--interior { left: 41%; } .dw-journey.current-copy-page #service .a-journey-copy > p:not(.a-section-number), .dw-journey.current-copy-page #service .a-service-list p { color: oklch(89% .012 145); } .dw-journey.current-copy-page #service .plain-link { color: oklch(93% .012 145); } .dw-journey.current-copy-page .current-atmosphere--interior .current-atmosphere-layer { opacity: .58; } .dw-journey.current-copy-page .current-atmosphere--interior img { object-position: 69% center; } .dw-journey.current-copy-page .current-atmosphere--interior::after { background: linear-gradient(90deg,oklch(23% .013 150) 0%,oklch(23% .013 150 / .94) 9%,oklch(23% .013 150 / .24) 48%,oklch(23% .013 150 / .08) 100%),linear-gradient(0deg,oklch(23% .013 150) 0%,oklch(23% .013 150 / .02) 25%,oklch(23% .013 150 / .02) 78%,oklch(23% .013 150) 100%); } .dw-journey.current-copy-page [data-atmosphere-visible="true"][data-atmosphere-motion="active"] [data-atmosphere-layer] { will-change: transform; } .dw-journey.current-copy-page [data-atmosphere-image="unavailable"] [data-atmosphere-layer] { visibility: hidden; } @media (max-width: 760px) { .dw-journey.current-copy-page .current-atmosphere-layer { inset: 0; transform: none !important; } .dw-journey.current-copy-page .current-atmosphere--hero img { object-position: 50% 68%; } .dw-journey.current-copy-page .current-atmosphere--hero::after { background: linear-gradient(180deg,oklch(98% .008 95 / .98) 0%,oklch(98% .008 95 / .98) 42%,oklch(98% .008 95 / .48) 61%,oklch(98% .008 95 / .12) 76%,oklch(98% .008 95 / .98) 95%); } .dw-journey.current-copy-page .current-atmosphere--awards .current-atmosphere-layer { opacity: .17; } .dw-journey.current-copy-page .current-atmosphere--awards::after { background: linear-gradient(180deg,oklch(92% .066 133 / .96) 0%,oklch(92% .066 133 / .95) 42%,oklch(92% .066 133 / .3) 75%,oklch(92% .066 133 / .98) 100%); } .dw-journey.current-copy-page .current-atmosphere--interior { left: 0; top: 56%; } .dw-journey.current-copy-page .current-atmosphere--interior .current-atmosphere-layer { opacity: .25; } .dw-journey.current-copy-page .current-atmosphere--interior::after { background: linear-gradient(180deg,oklch(23% .013 150) 0%,oklch(23% .013 150 / .96) 12%,oklch(23% .013 150 / .28) 53%,oklch(23% .013 150) 100%); } } @media (prefers-reduced-motion: reduce) { .dw-journey.current-copy-page .current-atmosphere-layer { transform: none !important; will-change: auto !important; } } /* Shared design-review refinements. Real HTML remains readable without motion. */ .dw-journey .hero-savings-line{font:650 clamp(25px,2.7vw,39px)/1.16 Onest,sans-serif;letter-spacing:-.035em;color:#356716;margin:24px 0 16px;max-width:22ch} .dw-journey.current-copy-page .a-hero-intro strong{font-size:clamp(23px,2.3vw,33px);font-weight:750;color:#315d15;line-height:1.35} .dw-journey .seller-media-story,.dw-journey .seller-system-story{max-width:1440px;margin:auto;padding:90px clamp(24px,5vw,72px);display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;position:relative;min-height:700px;color:#183b36} .dw-journey .seller-media-story h2,.dw-journey .seller-system-story h2,.dw-journey .seller-reviews h2{font-family:Onest,sans-serif;font-weight:600;font-size:clamp(30px,3.4vw,50px);line-height:1.1;letter-spacing:-.045em;margin:18px 0 24px} .dw-journey .seller-media-copy>p,.dw-journey .seller-system-copy>p{font-size:18px;line-height:1.7;max-width:45ch} .dw-journey .seller-eyebrow{font-size:12px!important;letter-spacing:.13em;text-transform:uppercase;font-weight:650} .dw-journey .seller-media-copy a,.dw-journey .seller-system-copy a,.dw-journey .seller-section-heading a{font-size:14px;color:inherit;text-underline-offset:5px;font-weight:600} .dw-journey .seller-source-note{font-size:12px!important;line-height:1.7;opacity:.7;max-width:85ch;margin-top:24px} .dw-journey .seller-media-anchor,.dw-journey .seller-system-anchor{position:relative;min-width:0;height:520px} .dw-journey .seller-media-anchor .journey-static-art,.dw-journey .seller-system-anchor .journey-static-art{width:100%;height:100%;display:grid;align-items:center} .dw-journey .seller-logo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;transform:rotate(-3deg)} .dw-journey .publisher-tile{height:120px;padding:22px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #dce4e0;border-radius:12px} .dw-journey .publisher-tile img{width:100%;height:100%;object-fit:contain;filter:none;opacity:1} .dw-journey .publisher-4{background:#003e65}.dw-journey .publisher-pending{font-size:20px;font-weight:600}.dw-journey .publisher-pending small{font-size:10px;opacity:.6;margin-top:8px} .dw-journey .seller-system-story{background:#eef3ec}.dw-journey .seller-system-copy ol{padding-left:20px;font-size:16px;line-height:2} .dw-journey .seller-reviews{position:relative;z-index:14;padding:68px clamp(24px,5vw,72px);background:#f4f6f3;color:#19362c;border-block:1px solid #dae1da} .dw-journey .seller-section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;max-width:1296px;margin:0 auto 30px} .dw-journey .seller-section-heading h2,.dw-journey .seller-section-heading h3{margin:0}.dw-journey .seller-section-heading h3{font-family:Onest,sans-serif;font-size:32px;line-height:1.2;letter-spacing:-.035em} .dw-journey .seller-review-grid{max-width:1296px;margin:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .dw-journey .seller-review-grid article{background:white;border:1px solid #dce2dc;border-radius:14px;padding:28px} #client-reviews .seller-review-grid article{position:relative;z-index:14;background:#fdfefd!important;border:1px solid #dadce0!important;border-radius:12px!important;padding:24px!important;min-height:280px!important;box-shadow:0 1px 2px #2633290a!important;} #client-reviews .review-author h3{font:600 15px/1.4 Arial,sans-serif!important;letter-spacing:0!important;color:#202124!important;} #client-reviews .review-author span{font-family:Arial,sans-serif;color:#70757a;font-size:12px;} #client-reviews .review-author .review-avatar{background:#e8eaed;color:#3c4043;width:40px;height:40px;font-size:19px;} #client-reviews article:nth-child(2) .review-avatar{background:#dce8fa;color:#315da2;} #client-reviews article:nth-child(3) .review-avatar{background:#f4e1d2;color:#88572f;} #client-reviews article:nth-child(4) .review-avatar{background:#e6ddf4;color:#674590;} #client-reviews article:nth-child(5) .review-avatar{background:#d7eadf;color:#286b4b;} #client-reviews .review-stars{color:#ea9b06!important;font-size:18px!important;letter-spacing:1px!important;margin:16px 0 12px!important;} #client-reviews .seller-review-grid blockquote,#client-reviews .review-full-text{font:400 15px/1.65 Arial,sans-serif!important;letter-spacing:0!important;color:#3c4043!important;} #client-reviews details{margin-top:16px!important;border:0!important;} #client-reviews summary{font:500 14px/1.5 Arial,sans-serif!important;color:#1a73e8!important;text-decoration:none!important;border:0!important;padding:8px 0!important;min-height:36px;} #client-reviews summary::after{display:none!important;} .dw-journey .review-author{display:flex;gap:12px;align-items:center}.dw-journey .review-author h3{font:600 15px Onest,sans-serif;margin:0 0 5px}.dw-journey .review-author span{font-size:12px;color:#626c65} .dw-journey .review-author .review-avatar{width:40px;height:40px;border-radius:50%;background:#dfebe5;display:grid;place-items:center;font-size:18px;color:#18543a} .dw-journey .review-stars{letter-spacing:.12em;color:#ba7300;font-size:19px;margin:22px 0 12px}.dw-journey .seller-review-grid blockquote{font-size:15px;line-height:1.75;margin:0} .dw-journey .seller-reviews>.seller-source-note{max-width:1296px;margin:25px auto 0} .dw-journey .listing-grid,.dw-journey .seller-sold-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important} .dw-journey .listing-card,.dw-journey .sold-listing-card{display:block;min-width:0;text-decoration:none;color:inherit;background:#fff;border:1px solid #dbe0d9;border-radius:14px;overflow:hidden;transition:transform .2s} .dw-journey .listing-card:hover,.dw-journey .sold-listing-card:hover{transform:translateY(-4px)} .dw-journey .listing-grid .listing-image,.dw-journey .seller-sold-grid .listing-image{aspect-ratio:4/3;height:auto!important;position:relative;overflow:hidden} .dw-journey .listing-image>img{width:100%;height:100%;object-fit:cover}.dw-journey .listing-grid .listing-.dw-journey,.dw-journey .seller-sold-grid .listing-.dw-journey{padding:22px} .dw-journey .listing-grid .listing-address,.dw-journey .seller-sold-grid .listing-address{font:600 clamp(17px,1.5vw,22px)/1.3 Onest,sans-serif;letter-spacing:-.025em;margin:9px 0 14px} .dw-journey .seller-sold-block{margin-top:58px}.dw-journey .sold-ribbon{position:absolute;top:24px;right:-34px;transform:rotate(35deg);width:165px;background:#005b91;color:white;text-align:center;padding:10px;font:700 20px Onest,sans-serif;letter-spacing:.13em} .dw-journey .listing-inquiry{display:block;margin-top:18px;border:0;background:#edf4e7;color:#20442c;padding:12px 15px;border-radius:7px;min-height:44px;font:600 13px Onest,sans-serif;cursor:pointer}.dw-journey .listing-inquiry:focus-visible{outline:3px solid #005b91;outline-offset:3px} .dw-journey .seller-rookie{font-size:13px;letter-spacing:.035em;color:inherit} .dw-journey .morph-still-system{position:relative;width:min(95%,430px);height:460px;margin:auto} .dw-journey .system-still-card{position:absolute;inset:0 0 auto;padding:25px;background:#003e65;color:white;border:1px solid #87b95d;border-radius:15px;height:200px;transform:translateY(calc(var(--i)*49px)) rotate(calc((var(--i) - 2)*3deg));box-shadow:0 8px 20px #102d3420} .dw-journey .system-still-card:last-child{background:#78b93d;color:#102f23}.dw-journey .system-still-card small{font-size:10px;letter-spacing:.14em}.dw-journey .system-still-card h3{font:600 23px/1.25 Onest,sans-serif;margin:14px 0}.dw-journey .system-still-card p{font-size:13px;line-height:1.5;margin:0;max-width:30ch} .dw-journey .morph-main-plaque{background:linear-gradient(130deg,#00355b,#006190)!important;border-color:#c7aa6b!important}.dw-journey .morph-small-plaque{background:#005b91!important;border-color:#83bd46!important} .dw-journey .morph-still-awards .morph-main-plaque:before{content:'';display:block;width:70px;min-height:55px;border-radius:4px 4px 38px 38px;background:linear-gradient(100deg,#a57b30,#fff0b8 40%,#bd913c 70%,#ecd391);border:3px solid #cfb473;box-shadow:-18px 0 0 -10px #d6b261,18px 0 0 -10px #d6b261,0 12px 0 -5px #bb8e3e;margin:5px 0 22px}.dw-journey .morph-still-awards .morph-main-plaque>strong{font-size:62px} .dw-journey .morph-still-awards p{font-size:12px!important}.dw-journey .morph-still-savings{min-height:480px}.dw-journey .morph-still-savings .morph-wallet{bottom:10px}.dw-journey .morph-still-savings .morph-coin.one{top:49%}.dw-journey .morph-still-savings .morph-coin.two{top:56%}.dw-journey .morph-still-savings .morph-coin.three{top:63%} @media(min-width:1000px){.dw-journey .art-on-left .a-journey-copy{grid-column:2;grid-row:1}.dw-journey .art-on-left .a-sign-anchor{grid-column:1;grid-row:1}.dw-journey .art-on-left .a-journey-split{grid-template-columns:1fr 1fr}.dw-journey .a-savings-stop [data-sign-anchor],.dw-journey .r-savings-section [data-sign-anchor]{min-height:620px}} @media(max-width:760px){.dw-journey .seller-media-story,.dw-journey .seller-system-story{display:flex;flex-direction:column;padding:48px 24px;gap:25px;min-height:0}.dw-journey .seller-media-anchor,.dw-journey .seller-system-anchor{height:440px;width:100%}.dw-journey .seller-media-anchor{height:400px}.dw-journey .seller-logo-grid{transform:none;gap:10px}.dw-journey .publisher-tile{height:105px;padding:15px}.dw-journey .seller-reviews{padding:42px 24px}.dw-journey .seller-review-grid{grid-template-columns:1fr}.dw-journey .seller-section-heading{display:block}.dw-journey .seller-section-heading a{display:inline-block;margin-top:18px}.dw-journey .listing-grid,.dw-journey .seller-sold-grid{grid-template-columns:1fr!important;gap:22px!important}.dw-journey .seller-sold-block{margin-top:42px}.dw-journey .seller-rookie{font-size:12px}} @media(min-width:761px) and (max-width:1050px){.dw-journey .listing-grid,.dw-journey .seller-sold-grid{gap:16px!important}.dw-journey .listing-grid .listing-.dw-journey,.dw-journey .seller-sold-grid .listing-.dw-journey{padding:15px}.dw-journey .seller-review-grid article{padding:20px}} @media(prefers-reduced-motion:reduce){.dw-journey .listing-card,.dw-journey .sold-listing-card{transition:none}.dw-journey .listing-card:hover,.dw-journey .sold-listing-card:hover{transform:none}} /* One focal object at a time. Quotes remain ordinary HTML, never canvas-only. */ .dw-journey .seller-stars-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7vw;align-items:center;min-height:680px;padding:90px clamp(24px,6vw,100px);background:#edf1e9;color:#19362c} .dw-journey .seller-stars-story h2{font:600 clamp(32px,3.7vw,58px)/1.08 Onest,sans-serif;letter-spacing:-.045em;margin:24px 0} .dw-journey .seller-stars-story p:not(.seller-eyebrow){font:400 18px/1.75 Onest,sans-serif;max-width:43ch} .dw-journey .seller-stars-story a,.dw-journey .review-journey-copy>a{display:inline-block;margin-top:22px;color:#315c28;text-underline-offset:7px} .dw-journey .seller-stars-anchor{height:420px;position:relative;min-width:0} .dw-journey .five-star-still{display:block;font-size:clamp(36px,5vw,76px);letter-spacing:.12em;color:#c28c29;text-align:center;padding-top:140px} .dw-journey .seller-reviews.review-journey{z-index:auto;display:block;padding:75px clamp(24px,6vw,100px);background:#f7f8f4} .dw-journey .review-journey-copy{position:relative;z-index:14;min-width:0} .dw-journey .review-journey .seller-section-heading{display:block;margin-bottom:22px} .dw-journey .review-journey .seller-review-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px;align-items:stretch} .dw-journey .review-journey .seller-review-grid article{grid-column:span 2;background:oklch(99% .006 140);border:1px solid #d4decf;border-radius:16px;padding:28px;min-height:340px;opacity:1;transform:none} .dw-journey .review-journey .seller-review-grid article:nth-child(4){grid-column:2/span 2} .dw-journey .review-journey .seller-review-grid blockquote{font:500 17px/1.65 Onest,sans-serif;letter-spacing:-.018em} .dw-journey .review-journey details{margin-top:24px}.dw-journey .review-journey summary{cursor:pointer;font-size:13px;text-decoration:underline;text-underline-offset:5px;color:#476344;min-height:28px} .dw-journey .review-journey .review-full-text{font:400 15px/1.8 Onest,sans-serif;color:#4e6055;margin:20px 0 0} .dw-journey .review-journey .seller-source-note{margin-top:30px} .dw-journey .review-journey-anchor{position:absolute;left:50%;top:40%;width:1px;height:1px;pointer-events:none;visibility:hidden} .dw-journey .review-still{margin:50px 12px;padding:36px;background:white;border:1px solid #d4dfd0;border-radius:16px;box-shadow:0 15px 40px #1333230a} .dw-journey .review-still>span{color:#bc8728;letter-spacing:.15em;font-size:26px}.dw-journey .review-still p{font:500 21px/1.6 Onest,sans-serif}.dw-journey .review-still strong,.dw-journey .review-still small{display:block;margin-top:20px} .dw-journey .morph-still-system{height:auto!important;max-width:480px!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;position:relative!important} .dw-journey .system-still-card{position:relative!important;inset:auto!important;height:auto!important;min-height:160px;transform:none!important;padding:19px!important;box-shadow:none!important;display:block!important} .dw-journey .system-still-card:last-child{grid-column:1/-1;min-height:120px}.dw-journey .system-still-card h3{font-size:20px}.dw-journey .system-still-card p{font-size:12px} .dw-journey [data-service-step="0"] .system-still-card:nth-child(1),.dw-journey [data-service-step="1"] .system-still-card:nth-child(2),.dw-journey [data-service-step="2"] .system-still-card:nth-child(3),.dw-journey [data-service-step="3"] .system-still-card:nth-child(4),.dw-journey [data-service-step="4"] .system-still-card:nth-child(5){outline:3px solid #cfad60;outline-offset:5px} .dw-journey .review-landing-layer{position:fixed;inset:0;z-index:13;pointer-events:none;overflow:hidden;contain:strict}.dw-journey .review-landing-layer[hidden]{display:none} .dw-journey .review-persistent-stars{position:sticky;top:125px;z-index:15;display:block;width:max-content;max-width:100%;margin:0 auto 24px;padding:8px 24px;border-radius:12px;background:oklch(97% .008 145);color:#bb851d;font-size:clamp(38px,5vw,72px);letter-spacing:.12em;line-height:1.2;pointer-events:none} @media(max-width:760px){.dw-journey .review-persistent-stars{top:128px;padding:8px 14px;font-size:38px}} .dw-journey[data-review-flight="true"] .seller-stars-anchor .journey-static-art{opacity:0} .dw-journey[data-review-flight="true"] [data-sign-canvas][data-object="stars"]{visibility:hidden!important} .dw-journey .review-landing-star{position:absolute;left:0;top:0;width:100px;height:100px;display:block;background:oklch(74% .13 84);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 93%,50% 71%,21% 93%,32% 57%,2% 35%,39% 35%);will-change:transform,opacity} .dw-journey .review-landing-star.is-frame{clip-path:none;border:1px solid #c8a453;border-radius:8px;background:oklch(85% .09 84 / .18)} @media(max-width:1050px) and (min-width:761px){.dw-journey .review-journey .seller-review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dw-journey .review-journey .seller-review-grid article,.dw-journey .review-journey .seller-review-grid article:nth-child(4){grid-column:auto}.dw-journey .review-journey .seller-review-grid article:last-child{grid-column:1/-1}} @media(max-width:760px){.dw-journey .seller-stars-story{display:block;min-height:0;padding:45px 24px}.dw-journey .seller-stars-anchor{height:130px}.dw-journey .five-star-still{font-size:42px;padding-top:30px}.dw-journey .seller-reviews.review-journey{padding:45px 20px}.dw-journey .review-journey .seller-review-grid{grid-template-columns:1fr;gap:16px}.dw-journey .review-journey .seller-review-grid article,.dw-journey .review-journey .seller-review-grid article:nth-child(4){grid-column:auto;min-height:0;padding:24px}.dw-journey .review-journey .seller-review-grid blockquote{font-size:17px}.dw-journey .review-journey .seller-section-heading{margin-bottom:30px}.dw-journey .seller-system-anchor{height:560px!important}.dw-journey .morph-still-system{max-width:100%!important}.dw-journey .system-still-card{padding:14px!important}.dw-journey .system-still-card h3{font-size:18px}.dw-journey .system-still-card small{font-size:9px}} @media(prefers-reduced-motion:reduce){.dw-journey .review-landing-layer{display:none!important}} /* Live HTML typography, image-led panels, and a contained marketing illustration. */ .dw-journey .service-panels-section{background:oklch(20% .027 235)!important;color:oklch(96% .01 180)!important;overflow:hidden;position:relative} .dw-journey .service-panels-section>.current-atmosphere{opacity:.18} .dw-journey .service-panels-section:not(.service-panels-shell){padding:0!important} .dw-journey .service-panels-section .service-panels-shell,.dw-journey .service-panels-section.service-panels-shell{display:block!important;max-width:1400px;width:100%;margin:auto;padding:80px clamp(24px,5vw,72px)!important;position:relative;min-height:0} .dw-journey .service-panels-section .service-panels-intro{max-width:none!important;width:100%;position:relative;z-index:14;margin-bottom:38px} .dw-journey .service-panels-section .service-panels-intro h2{max-width:24ch;font:600 clamp(36px,4.1vw,62px)/1.08 Onest,sans-serif!important;letter-spacing:-.05em} .dw-journey .service-panels-section .service-panels-intro>p{max-width:78ch!important;font-size:17px!important;line-height:1.7;color:oklch(86% .018 195)!important} .dw-journey .service-panels-section .service-panels-intro>p:first-child{font-size:12px!important;color:oklch(79% .14 130)!important} .dw-journey .service-original-details,.dw-journey .service-panels-intro .seller-process{display:inline-block;vertical-align:top;width:min(100%,540px);margin:22px 25px 0 0!important;border-color:oklch(47% .035 210)!important} .dw-journey .service-original-details summary,.dw-journey .service-panels-intro .seller-process summary{font-size:15px!important;padding:12px 0!important;color:oklch(89% .018 180)} .dw-journey .service-original-details .a-service-list{margin-top:10px!important}.dw-journey .service-original-details[open],.dw-journey .service-panels-intro .seller-process[open]{display:block;width:100%} .dw-journey .service-panels-intro>.plain-link,.dw-journey .service-panels-intro>a{display:block;width:fit-content;margin-top:24px;color:oklch(83% .15 130)!important} .dw-journey .service-motion-anchor{position:absolute!important;left:50%;top:35%;height:1px!important;width:1px!important;visibility:hidden;pointer-events:none} .dw-journey .service-panel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;position:relative;z-index:14;align-items:stretch} .dw-journey .service-panel{min-width:0;border:1px solid oklch(52% .035 220 / .7);border-radius:18px;overflow:hidden;background:oklch(26% .034 230 / .85);box-shadow:inset 0 1px 0 oklch(85% .01 190 / .15),0 16px 35px oklch(10% .018 230 / .18)} .dw-journey .service-panel-visual{height:clamp(250px,24vw,320px);position:relative;overflow:hidden;background:oklch(29% .045 240)} .dw-journey .service-panel-visual>img{width:100%;height:100%;object-fit:cover;object-position:center 36%;display:block} .dw-journey .service-pricing>img,.dw-journey .service-negotiation>img{object-position:center 18%} .dw-journey .service-panel-copy{padding:25px;display:flex;gap:16px;align-items:baseline} .dw-journey .service-panel-copy h3{font:600 clamp(23px,2.2vw,30px)/1.18 Onest,sans-serif!important;margin:0 0 12px!important;letter-spacing:-.035em;color:oklch(97% .009 170)!important} .dw-journey .service-panel-copy p{font:400 16px/1.7 Onest,sans-serif!important;max-width:52ch;margin:0!important;color:oklch(85% .018 200)!important} .dw-journey .service-number{font:500 13px/1.3 Onest,sans-serif;color:oklch(82% .15 130);font-variant-numeric:tabular-nums} .dw-journey .service-glass-caption{position:absolute;left:20px;right:20px;bottom:18px;padding:17px 20px;border:1px solid oklch(90% .018 180 / .35);border-radius:12px;background:oklch(20% .035 235 / .84);backdrop-filter:blur(9px);color:oklch(97% .01 180)} .dw-journey .service-glass-caption>span{display:block;font-size:10px;letter-spacing:.13em;color:oklch(87% .11 130);margin-bottom:8px}.dw-journey .service-glass-caption strong{display:block;font:550 20px/1.3 Onest,sans-serif;max-width:30ch}.dw-journey .service-glass-caption svg{position:absolute;right:18px;top:20px;width:100px;height:40px;color:oklch(81% .16 130);opacity:.7}.dw-journey .service-pricing .service-glass-caption strong{padding-right:85px} .dw-journey .offer-terms{display:flex;gap:9px;margin-top:13px;flex-wrap:wrap}.dw-journey .offer-terms span{font-size:11px;padding:5px 9px;border-radius:5px;background:oklch(50% .045 220 / .4)} .dw-journey .service-launch{background:radial-gradient(ellipse at center,oklch(42% .07 233),oklch(23% .035 233));isolation:isolate} .dw-journey .launch-connections{position:absolute;inset:0;width:100%;height:100%}.dw-journey .launch-connections path{fill:none;stroke:oklch(77% .14 133);stroke-width:1.5;stroke-dasharray:5 5;stroke-dashoffset:var(--launch-dash,0)} .dw-journey .launch-home{position:absolute;left:35%;top:29%;width:30%;height:42%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid oklch(77% .11 135 / .65);border-radius:12px;background:oklch(92% .018 175);box-shadow:0 10px 25px oklch(10% .025 220 / .4);z-index:2} .dw-journey .launch-home img{width:95%;height:75%;object-fit:contain}.dw-journey .launch-home strong{font-size:13px;color:oklch(25% .03 200)} .dw-journey .launch-page{position:absolute;width:29%;height:35%;border:1px solid oklch(76% .025 205 / .7);border-radius:7px;background:oklch(96% .01 190);box-shadow:0 7px 20px oklch(10% .02 230 / .22);color:oklch(25% .03 220);overflow:hidden;transform:translate(var(--launch-x,0px),var(--launch-y,0px));will-change:transform} .dw-journey .launch-page-0{left:4%;top:5%}.dw-journey .launch-page-1{right:4%;top:5%}.dw-journey .launch-page-2{left:4%;bottom:6%}.dw-journey .launch-page-3{right:4%;bottom:6%} .dw-journey .launch-browser-bar{display:flex;gap:3px;padding:5px 7px;background:oklch(88% .02 210)}.dw-journey .launch-browser-bar i{width:3px;height:3px;border-radius:50%;background:oklch(52% .03 220)} .dw-journey .launch-page-photo{height:55%;background:oklch(88% .025 160);overflow:hidden}.dw-journey .launch-page-photo img{width:100%;height:100%;object-fit:cover;object-position:center 65%}.dw-journey .launch-page strong{display:block;font:600 11px/1.2 Onest,sans-serif;padding:6px 7px} .dw-journey .service-visual-note{position:absolute;left:15px;bottom:6px;font-size:9px;letter-spacing:.025em;color:oklch(89% .02 190);z-index:3} .dw-journey .service-showings>img{filter:brightness(.66)}.dw-journey .showing-notifications{position:absolute;inset:22px;display:flex;flex-direction:column;justify-content:center;gap:13px} .dw-journey .showing-notifications>div{width:86%;padding:15px 18px;border:1px solid oklch(82% .025 190 / .35);background:oklch(22% .03 220 / .85);backdrop-filter:blur(7px);border-radius:10px}.dw-journey .showing-notifications>div:nth-child(2){align-self:flex-end}.dw-journey .showing-notifications span{display:block;font-size:9px;color:oklch(81% .14 130);letter-spacing:.1em;margin-bottom:6px}.dw-journey .showing-notifications strong{font:500 16px/1.25 Onest,sans-serif} .dw-journey .service-sold-finish{position:relative;z-index:14;display:grid;grid-template-columns:180px 1fr auto;gap:30px;align-items:center;padding:25px 30px;margin-top:28px;border-radius:16px;background:oklch(82% .15 130);color:oklch(23% .04 165);border:1px solid oklch(90% .10 130)} .dw-journey .service-sold-house{position:relative;height:140px}.dw-journey .service-sold-house img{height:100%;width:100%;object-fit:contain}.dw-journey .service-sold-house>strong{position:absolute;bottom:10px;right:5px;background:oklch(43% .10 240);color:oklch(97% .01 190);padding:6px 14px;font:700 20px Onest,sans-serif;transform:rotate(-9deg);border-radius:4px} .dw-journey .service-sold-finish h3{font:600 clamp(26px,3vw,39px)/1.15 Onest,sans-serif;margin:9px 0;letter-spacing:-.04em}.dw-journey .service-sold-finish p{font-size:15px;margin:0}.dw-journey .service-sold-finish>div>span{font-size:10px;letter-spacing:.1em}.dw-journey .service-sold-finish .button{background:oklch(25% .04 190);color:oklch(97% .01 180);font-size:14px;white-space:nowrap} @media(max-width:900px){.dw-journey .service-sold-finish{grid-template-columns:120px 1fr;gap:18px;padding:22px}.dw-journey .service-sold-finish .button{grid-column:1/-1;justify-content:space-between}.dw-journey .service-panel-copy{padding:20px;gap:10px}.dw-journey .service-panel-visual{height:260px}.dw-journey .service-glass-caption{left:12px;right:12px;padding:14px}.dw-journey .service-glass-caption strong{font-size:17px}.dw-journey .service-glass-caption svg{display:none}.dw-journey .service-pricing .service-glass-caption strong{padding:0}} @media(max-width:760px){.dw-journey .service-panels-section .service-panels-shell,.dw-journey .service-panels-section.service-panels-shell{padding:52px 20px!important}.dw-journey .service-panel-grid{grid-template-columns:1fr;gap:22px}.dw-journey .service-panel-visual{height:280px}.dw-journey .service-panel-copy{padding:24px 20px}.dw-journey .service-panel-copy h3{font-size:26px!important}.dw-journey .service-panel-copy p{font-size:16px!important}.dw-journey .service-original-details,.dw-journey .service-panels-intro .seller-process{width:100%;margin-right:0!important}.dw-journey .service-panels-section .service-panels-intro h2{font-size:36px!important}.dw-journey .service-launch .launch-page strong{font-size:10px}.dw-journey .service-sold-finish .button{white-space:normal}} @media(prefers-reduced-motion:reduce){.dw-journey .launch-page{transform:none!important;will-change:auto}.dw-journey .service-glass-caption,.dw-journey .showing-notifications>div{backdrop-filter:none}} @media(max-width:760px){.dw-journey .service-showings{height:330px}} .dw-journey .service-panel-visual{height:360px} @media(max-width:760px){.dw-journey .service-panel-visual{height:320px}.dw-journey .service-showings{height:330px}}