/* Homepage motion. Every rule is scoped to avoid changing the store or admin. */
.home-motion-page { --motion-ease: cubic-bezier(.22, 1, .36, 1); --motion-radius: 24px; font-size: 16px; }
.home-motion-page .container { width: calc(100% - 96px); max-width: 1232px; }
.home-motion-page .site-header { position: sticky; top: 0; height: 80px; transition: box-shadow .3s; }
.home-motion-page.has-scrolled .site-header { box-shadow: 0 4px 22px #0c0d0c0b; }
.home-motion-page .brand img { width: 155px; height: 65px; }
.home-motion-page .brand { flex-basis: 155px; }
.home-motion-page .main-nav a { font-size: 13px; }
.home-motion-page .header-order { transform: none; border-radius: 8px; }
.home-motion-page .header-order > * { transform: none; }
.home-motion-page h2 { font-size: clamp(36px, 4.1vw, 58px); font-weight: 700; letter-spacing: -.045em; line-height: 1.08; margin-bottom: 0; }
.home-motion-page .motion-kicker { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 24px; }
.home-motion-page .motion-kicker > span { width: 8px; height: 8px; background: var(--blue); border-radius: 50%; }
.home-motion-page .motion-mark { position: relative; white-space: nowrap; }
.home-motion-page .motion-mark::after { content: ''; position: absolute; height: 5px; background: var(--blue); bottom: -7px; left: 1%; right: 0; border-radius: 80% 20% 65% 35%; transform: rotate(-2deg); }
.home-motion-page .motion-button { min-height: 58px; padding: 17px 26px; display: inline-flex; align-items: center; justify-content: center; gap: 27px; color: #fff; background: var(--blue); border-radius: 9px; font-size: 14px; font-weight: 600; transition: background .25s, transform .25s var(--motion-ease); }
.home-motion-page .motion-button:hover { background: #0046d5; transform: translateY(-3px); }
.home-motion-page .motion-button .icon, .home-motion-page .motion-link .icon { width: 21px; height: 21px; transition: transform .25s; }
.home-motion-page .motion-button:hover .icon, .home-motion-page .motion-link:hover .icon { transform: translateX(4px); }
.home-motion-page .motion-link { display: inline-flex; align-items: center; gap: 15px; font-size: 14px; font-weight: 600; min-height: 44px; }
.home-motion-page .motion-link:hover { color: var(--blue); }
.home-motion-page .motion-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 30px; }

/* The first viewport is a shared canvas; the artwork moves independently. */
.home-motion-page .motion-hero { position: relative; isolation: isolate; height: min(840px, calc(100svh - 80px)); min-height: 650px; overflow: hidden; background: #f5f5f3; }
.home-motion-page .motion-hero-inner { height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.home-motion-page .motion-hero-art { position: absolute; inset: 0 -10% 0 39%; z-index: -1; transform-origin: 72% 55%; }
.home-motion-page .motion-hero-art img { height: 100%; width: 100%; object-fit: cover; object-position: 48% center; }
.home-motion-page .motion-hero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #f5f5f3 0%, #f5f5f3d9 10%, #f5f5f300 33%); }
.home-motion-page .motion-hero-copy { width: 57%; padding-bottom: 50px; }
.home-motion-page .motion-hero h1 { font-family: var(--heading); font-size: clamp(38px, 3.9vw, 57px); font-weight: 900; line-height: 1.12; letter-spacing: -.057em; transform: skew(-6deg); transform-origin: left; margin: 0 0 32px; }
.home-motion-page .motion-hero h1 span { display: block; }
.home-motion-page .motion-hero h1 span:last-child { color: var(--blue); }
.home-motion-page .motion-hero-description { max-width: 415px; font-size: 21px; line-height: 1.5; margin-bottom: 32px; }
.home-motion-page .motion-hero-bottom { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.home-motion-page .motion-scroll-link { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; }
.home-motion-page .motion-scroll-icon { display: grid; place-items: center; width: 37px; height: 47px; border: 1px solid #bfc0bc; border-radius: 30px; font-size: 21px; }
.home-motion-page .motion-art-caption { color: #515551; background: #fffffff0; border-radius: 6px; padding: 5px 9px; font-size: 10px; }
.home-motion-page .motion-piece { position: absolute; color: var(--blue); z-index: 1; pointer-events: none; }
.home-motion-page .motion-piece-one { top: 50px; left: 47%; transform: rotate(18deg); }
.home-motion-page .motion-piece-one .icon { width: 58px; height: 58px; stroke-width: 1.4; }
.home-motion-page .motion-piece-two { bottom: 103px; left: 44%; transform: rotate(-14deg); }
.home-motion-page .motion-piece-two .icon { width: 38px; height: 38px; }

.home-motion-page .motion-section { padding-top: 128px; padding-bottom: 128px; scroll-margin-top: 80px; }
.home-motion-page .motion-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 55px; margin-bottom: 56px; }
.home-motion-page .motion-section-intro { max-width: 340px; font-size: 17px; line-height: 1.65; color: #5c5e5d; margin-bottom: 0; }
.home-motion-page .motion-section-intro .motion-link { color: var(--ink); }
.home-motion-page .motion-services { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.home-motion-page .motion-service { grid-column: span 4; min-height: 280px; position: relative; overflow: hidden; border-radius: var(--motion-radius); padding: 30px; display: flex; flex-direction: column; justify-content: space-between; background: #f2f3f1; transition: background .25s, transform .4s var(--motion-ease); }
.home-motion-page .motion-service:nth-child(1) { grid-column: span 7; background: var(--ink); color: #fff; }
.home-motion-page .motion-service:nth-child(2) { grid-column: span 5; background: var(--blue); color: #fff; }
.home-motion-page .motion-service-number { font-size: 12px; font-weight: 500; opacity: .6; }
.home-motion-page .motion-service-symbol { position: absolute; right: 45px; top: 30px; color: var(--blue); transform: rotate(-9deg); transition: transform .6s var(--motion-ease); }
.home-motion-page .motion-service-symbol .icon { width: 68px; height: 68px; stroke-width: 1.2; }
.home-motion-page .motion-service:nth-child(-n+2) .motion-service-symbol { color: #fff; }
.home-motion-page .motion-service:nth-child(-n+2) .motion-service-symbol .icon { width: 85px; height: 85px; }
.home-motion-page .motion-service h3 { font-size: 30px; margin: 50px 0 12px; letter-spacing: -.025em; }
.home-motion-page .motion-service p { max-width: 75%; font-size: 15px; line-height: 1.5; opacity: .75; margin: 0; }
.home-motion-page .motion-service:hover { transform: translateY(-5px); }
.home-motion-page .motion-service:hover .motion-service-symbol { transform: translateY(-5px) rotate(5deg); }
.home-motion-page .motion-card-arrow { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--ink); transition: background .25s, color .25s, transform .3s; }
.home-motion-page .motion-service > .motion-card-arrow { position: absolute; right: 26px; bottom: 28px; }
.home-motion-page .motion-card-arrow .icon { width: 21px; height: 21px; transform: rotate(-35deg); }
.home-motion-page a:hover .motion-card-arrow { background: var(--blue); color: #fff; transform: rotate(35deg); }
.home-motion-page .motion-service:nth-child(2):hover .motion-card-arrow { background: #fff; color: var(--blue); }
.home-motion-page .motion-collection { background: #f6f6f4; }
.home-motion-page .motion-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.home-motion-page .motion-product-image { position: relative; border-radius: 18px; overflow: hidden; background: #efefed; }
.home-motion-page .motion-product-image img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; transition: transform .7s var(--motion-ease); }
.home-motion-page .motion-product:hover img { transform: scale(1.045); }
.home-motion-page .motion-product-image .motion-card-arrow { position: absolute; right: 14px; bottom: 14px; }
.home-motion-page .motion-product-category { margin: 20px 0 8px; color: #696b68; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.home-motion-page .motion-product h3 { font-size: 22px; line-height: 1.25; margin: 0 0 12px; }
.home-motion-page .motion-product-price { font-size: 20px; font-weight: 600; margin: 0; }
.home-motion-page .motion-image-note { font-size: 11px; color: #6a6b68; margin: 32px 0 0; }

/* Without JS (and with reduced motion) these are ordinary readable sections. */
.home-motion-page .motion-story { background: var(--blue); color: #fff; }
.home-motion-page .motion-story-inner { padding-top: 72px; padding-bottom: 62px; position: relative; }
.home-motion-page .motion-story-heading h2 { font-size: clamp(40px, 4.2vw, 62px); }
.home-motion-page .motion-story-heading h2 span { color: #c5dcff; }
.home-motion-page .motion-story-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: center; }
.home-motion-page .motion-story-step { padding-top: 42px; max-width: 370px; }
.home-motion-page .motion-story-index { font-size: 11px; text-transform: uppercase; letter-spacing: .15em; opacity: .65; }
.home-motion-page .motion-story-step h3 { font-size: 33px; line-height: 1.1; letter-spacing: -.03em; margin-bottom: 20px; }
.home-motion-page .motion-story-step > p:last-child { font-size: 17px; line-height: 1.65; color: #e2ebff; margin: 0; }
.home-motion-page .motion-story-art { position: relative; height: 500px; }
.home-motion-page:not(.motion-enabled) .motion-story-art { overflow: hidden; }
.home-motion-page .motion-orbit { position: absolute; width: 470px; height: 470px; border: 1px solid #ffffff29; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.home-motion-page .motion-orbit-two { width: 340px; height: 340px; }
.home-motion-page .motion-idea-sheet { position: absolute; width: 320px; height: 370px; background: #fff; color: #0c0d0c; left: 20%; top: 55px; border-radius: 8px; padding: 30px; transform: rotate(-9deg); box-shadow: 0 30px 75px #001c7133; }
.home-motion-page .motion-sheet-label { font-size: 10px; letter-spacing: .14em; display: block; margin-bottom: 23px; }
.home-motion-page .motion-idea-sheet strong { display: block; font-size: 43px; line-height: 1; font-family: var(--heading); font-style: italic; letter-spacing: -.06em; }
.home-motion-page .motion-idea-sheet img { width: 150px; height: 150px; object-fit: contain; position: absolute; right: 20px; bottom: 24px; }
.home-motion-page .motion-sheet-line { display: block; width: 80px; height: 6px; background: var(--blue); transform: rotate(-5deg); margin-top: 25px; }
.home-motion-page .motion-design-sheet { position: absolute; left: 12%; top: 15px; width: 340px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 25px 70px #001c7122; opacity: 0; transform: translate(130px, 55px) rotate(13deg) scale(.9); }
.home-motion-page .motion-design-sheet img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.home-motion-page .motion-design-sheet > span { display: block; color: #111; padding: 18px; font-size: 10px; letter-spacing: .12em; }
.home-motion-page .motion-small-product { position: absolute; right: -2%; bottom: 26px; width: 205px; border: 8px solid white; background: white; border-radius: 18px; box-shadow: 0 20px 50px #001c7122; opacity: 0; transform: translate(100px, 60px) rotate(16deg); }
.home-motion-page .motion-small-product img { width: 100%; height: auto; border-radius: 9px; }
.home-motion-page .motion-parcel { position: absolute; left: 8%; top: 60px; width: 400px; height: 330px; background: #eeeeea; color: var(--ink); border-radius: 9px; padding: 42px; box-shadow: 18px 22px 0 #d4d4ce, 0 30px 70px #001c7133; transform: translate(220px, 40px) rotate(12deg); opacity: 0; }
.home-motion-page .motion-parcel-tape { position: absolute; left: 0; top: 0; bottom: 0; width: 37px; background: #0c0d0c; border-left: 6px solid #e0e0dc; }
.home-motion-page .motion-parcel img { width: 120px; height: auto; margin: 0 0 20px 12px; }
.home-motion-page .motion-parcel strong { display: block; font-size: 36px; font-weight: 900; line-height: 1; font-style: italic; margin: 0 0 30px 12px; }
.home-motion-page .motion-parcel > span { font-size: 9px; letter-spacing: .13em; margin-left: 12px; }
.home-motion-page .motion-parcel-tag { position: absolute; bottom: 50px; right: -1%; padding: 23px 26px; background: var(--ink); border-radius: 8px; font-size: 15px; font-weight: 600; transform: translate(100px, 20px) rotate(-10deg); opacity: 0; }
.home-motion-page .motion-parcel-tag span { display: inline-block; margin-left: 35px; font-size: 25px; }
.home-motion-page .motion-story-art-note { position: absolute; bottom: -2px; right: 0; color: #d8e6ff; font-size: 10px; margin: 0; }
.home-motion-page .motion-story-nav { display: none; }
.home-motion-page .motion-story-skip { display: inline-flex; min-height: 44px; align-items: center; font-size: 12px; color: #e2ebff; margin-top: 24px; }

@media (min-width: 901px) and (min-height: 650px) and (prefers-reduced-motion: no-preference) {
    .home-motion-page.motion-enabled .motion-story { height: 300svh; }
    .home-motion-page.motion-enabled .motion-story-sticky { position: sticky; top: 80px; height: calc(100svh - 80px); overflow: hidden; }
    .home-motion-page.motion-enabled .motion-story-inner { height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding-top: clamp(30px, 5vh, 60px); padding-bottom: 32px; }
    .home-motion-page.motion-enabled .motion-story-heading h2 { font-size: clamp(36px, 4vw, 56px); }
    .home-motion-page.motion-enabled .motion-story-heading h2 br { display: none; }
    .home-motion-page.motion-enabled .motion-story-layout { min-height: 0; }
    .home-motion-page.motion-enabled .motion-story-copy { position: relative; min-height: 250px; }
    .home-motion-page.motion-enabled .motion-story-step { position: absolute; top: 0; padding: 0; opacity: 0; transform: translateY(55px); visibility: hidden; }
    .home-motion-page.motion-story-ready .motion-story-step { transition: opacity .6s, transform .7s var(--motion-ease), visibility .7s; }
    .home-motion-page.motion-enabled .motion-story-step.is-active { opacity: 1; transform: translateY(0); visibility: visible; }
    .home-motion-page.motion-enabled .motion-story-step.is-past { transform: translateY(-55px); }
    .home-motion-page.motion-enabled .motion-story-art { height: min(480px, 54vh); }
    .home-motion-page.motion-story-ready .motion-story-art > div { transition: transform .8s var(--motion-ease), opacity .6s; }
    .home-motion-page.motion-enabled .motion-story[data-step="1"] .motion-idea-sheet { transform: translate(-130px, -70px) rotate(-19deg) scale(.82); opacity: 0; }
    .home-motion-page.motion-enabled .motion-story[data-step="1"] .motion-design-sheet { opacity: 1; transform: translate(0, 0) rotate(-7deg); }
    .home-motion-page.motion-enabled .motion-story[data-step="1"] .motion-small-product { opacity: 1; transform: translate(0, 0) rotate(9deg); }
    .home-motion-page.motion-enabled .motion-story[data-step="2"] .motion-idea-sheet { transform: translate(-190px, -100px) rotate(-24deg) scale(.7); opacity: 0; }
    .home-motion-page.motion-enabled .motion-story[data-step="2"] .motion-design-sheet { transform: translate(-80px, -60px) rotate(-15deg) scale(.85); opacity: 0; }
    .home-motion-page.motion-enabled .motion-story[data-step="2"] .motion-small-product { transform: translate(-150px, -25px) rotate(-5deg) scale(.7); opacity: 0; }
    .home-motion-page.motion-enabled .motion-story[data-step="2"] .motion-parcel { transform: translate(0, 0) rotate(-5deg); opacity: 1; }
    .home-motion-page.motion-enabled .motion-story[data-step="2"] .motion-parcel-tag { transform: translate(0, 0) rotate(8deg); opacity: 1; }
    .home-motion-page.motion-enabled .motion-story-nav { display: flex; gap: 30px; padding-right: 220px; }
    .home-motion-page .motion-story-nav button { flex: 1; max-width: 205px; text-align: left; padding: 17px 0 0; border: 0; border-top: 2px solid #ffffff40; color: #d4e4ff; background: none; font-size: 13px; min-height: 44px; transition: color .3s, border-color .3s; }
    .home-motion-page .motion-story-nav button span { font-size: 11px; margin-right: 15px; opacity: .6; }
    .home-motion-page .motion-story-nav button[aria-pressed="true"] { color: white; border-color: white; }
    .home-motion-page.motion-enabled .motion-story-skip { position: absolute; bottom: 25px; right: 0; }
}
.home-motion-page .motion-story a:focus-visible, .home-motion-page .motion-story button:focus-visible, .home-motion-page .motion-finale a:focus-visible { outline-color: #fff; }
@media (min-width: 901px) and (min-height: 650px) and (max-height: 800px) {
    .home-motion-page.motion-enabled .motion-story-art { transform: scale(.8); transform-origin: center; }
}

.home-motion-page .motion-projects { display: grid; grid-template-columns: 1fr 1fr; gap: 45px 26px; }
.home-motion-page .motion-project:first-child { grid-column: 1 / -1; }
.home-motion-page .motion-project-image { position: relative; border-radius: var(--motion-radius); overflow: hidden; }
.home-motion-page .motion-project-image > img { width: 100%; height: auto; aspect-ratio: 1.45; object-fit: cover; transition: transform .8s var(--motion-ease); }
.home-motion-page .motion-project:first-child .motion-project-image > img { aspect-ratio: 2.25; }
.home-motion-page .motion-project:hover img { transform: scale(1.035); }
.home-motion-page .motion-project-image > span:not(.motion-card-arrow) { position: absolute; top: 22px; left: 22px; background: #fff; padding: 7px 12px; border-radius: 20px; font-size: 10px; }
.home-motion-page .motion-project-image .motion-card-arrow { position: absolute; bottom: 22px; right: 22px; width: 48px; height: 48px; }
.home-motion-page .motion-project-caption { display: flex; justify-content: space-between; gap: 20px; margin-top: 22px; }
.home-motion-page .motion-project-caption h3 { font-size: 24px; margin: 0; letter-spacing: -.03em; }
.home-motion-page .motion-project-caption p { color: #656862; font-size: 13px; margin: 5px 0 0; }
.home-motion-page .motion-values { display: grid; grid-template-columns: 1fr 1.3fr; gap: 70px; padding-bottom: 128px; }
.home-motion-page .motion-value-list article { display: flex; gap: 24px; padding: 32px 0; border-top: 1px solid var(--line); }
.home-motion-page .motion-value-list article > span { color: #8c8e89; font-size: 12px; }
.home-motion-page .motion-value-list article h3 { font-size: 25px; margin-bottom: 13px; }
.home-motion-page .motion-value-list article p { margin: 0; font-size: 15px; line-height: 1.6; color: #686b66; max-width: 380px; }
.home-motion-page .motion-value-list article > .icon { margin-left: auto; color: var(--blue); }
.home-motion-page .motion-finale { overflow: hidden; background: var(--blue); color: #fff; }
.home-motion-page .motion-finale-inner { position: relative; padding-top: 100px; padding-bottom: 105px; }
.home-motion-page .motion-finale h2 { font-size: clamp(48px, 6.3vw, 88px); letter-spacing: -.045em; position: relative; z-index: 1; }
.home-motion-page .motion-finale h2 span { font-style: italic; }
.home-motion-page .motion-finale-inner > p:not(.motion-kicker) { font-size: 21px; margin-top: 24px; }
.home-motion-page .motion-finale .motion-actions { position: relative; z-index: 1; margin-top: 34px; }
.home-motion-page .motion-button-white { background: #fff; color: #111; }
.home-motion-page .motion-button-white:hover { background: #e6eeff; }
.home-motion-page .motion-finale .motion-link:hover { color: #cee0ff; }
.home-motion-page .motion-finale-piece { position: absolute; right: -95px; top: 50px; transform: rotate(18deg); color: #ffffff24; }
.home-motion-page .motion-finale-piece .icon { width: 470px; height: 470px; stroke-width: 1.1; }
.home-motion-page .site-footer::before, .home-motion-page .site-footer::after { display: none; }
.home-motion-page .footer-main { padding-top: 45px; padding-bottom: 40px; }

/* Reveal only after JS has successfully installed its observer. */
.home-motion-page.motion-reveal-enabled [data-reveal] { transition: opacity .7s var(--motion-ease), transform .9s var(--motion-ease); }
.home-motion-page.motion-reveal-enabled [data-reveal].reveal-pending { opacity: 0; transform: translateY(28px); }
.home-motion-page.motion-reveal-enabled [data-reveal].reveal-pending:focus-within { opacity: 1; transform: none; }

@media (max-width: 1100px) {
    .home-motion-page .container { width: calc(100% - 64px); }
    .home-motion-page .main-nav { gap: 16px; }
    .home-motion-page .motion-hero { min-height: 590px; }
    .home-motion-page .motion-hero h1 { font-size: 4.2vw; }
    .home-motion-page .motion-hero-description { font-size: 18px; max-width: 350px; }
    .home-motion-page .motion-hero .motion-actions { gap: 14px; }
    .home-motion-page .motion-section { padding-top: 96px; padding-bottom: 96px; }
    .home-motion-page .motion-section-heading { gap: 35px; }
    .home-motion-page .motion-section-intro { max-width: 290px; font-size: 15px; }
    .home-motion-page .motion-service { padding: 26px; min-height: 270px; }
    .home-motion-page .motion-service p { font-size: 13px; }
    .home-motion-page .motion-services { gap: 16px; }
    .home-motion-page .motion-products { gap: 18px; }
    .home-motion-page .motion-product h3 { font-size: 19px; }
    .home-motion-page .motion-story-layout { gap: 25px; grid-template-columns: .9fr 1.1fr; }
    .home-motion-page .motion-idea-sheet { left: 12%; width: 280px; height: 345px; }
    .home-motion-page .motion-design-sheet { width: 280px; }
    .home-motion-page .motion-small-product { width: 160px; }
    .home-motion-page .motion-parcel { width: 330px; height: 320px; left: 3%; }
    .home-motion-page .motion-values { gap: 40px; padding-bottom: 96px; }
}
@media (max-width: 900px), (max-height: 649px), (prefers-reduced-motion: reduce) {
    .home-motion-page .motion-story-layout { grid-template-columns: 1fr; gap: 0; }
    .home-motion-page .motion-story-copy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
    .home-motion-page .motion-story-step h3 { font-size: 27px; }
    .home-motion-page .motion-story-step > p:last-child { font-size: 15px; }
    .home-motion-page .motion-story-art { display: none; }
}
@media (max-width: 760px) {
    .home-motion-page .container { width: calc(100% - 40px); }
    .home-motion-page .site-header { height: 69px; }
    .home-motion-page .brand, .home-motion-page .brand img { width: 128px; flex-basis: 128px; }
    .home-motion-page .main-nav a { font-size: 16px; }
    .home-motion-page .motion-hero { height: auto; min-height: 0; background: #f5f5f3; }
    .home-motion-page .motion-hero-inner { justify-content: flex-start; padding-top: 47px; padding-bottom: 0; }
    .home-motion-page .motion-hero-copy { width: 100%; padding-bottom: 0; }
    .home-motion-page .motion-hero h1 { font-size: clamp(29px, 6.6vw, 48px); letter-spacing: -.06em; margin-bottom: 24px; }
    .home-motion-page .motion-hero-description { font-size: 17px; max-width: 420px; margin-bottom: 25px; }
    .home-motion-page .motion-kicker { font-size: 10px; margin-bottom: 22px; letter-spacing: .15em; }
    .home-motion-page .motion-hero-art { position: relative; inset: auto; margin-top: 22px; width: 100%; z-index: 0; }
    .home-motion-page .motion-hero-art img { aspect-ratio: 1.65; height: auto; object-fit: cover; }
    .home-motion-page .motion-hero { display: flex; flex-direction: column; }
    .home-motion-page .motion-hero-inner { order: -1; }
    .home-motion-page .motion-hero-art::after { background: linear-gradient(#f5f5f3, #f5f5f300 25%); }
    .home-motion-page .motion-piece-one { top: 24px; right: 22px; left: auto; }
    .home-motion-page .motion-piece-one .icon { width: 30px; height: 30px; }
    .home-motion-page .motion-piece-two { display: none; }
    .home-motion-page .motion-hero-bottom { position: static; margin-top: 30px; }
    .home-motion-page .motion-scroll-link { font-size: 10px; gap: 9px; }
    .home-motion-page .motion-scroll-icon { width: 28px; height: 35px; font-size: 17px; }
    .home-motion-page .motion-art-caption { display: none; }
    .home-motion-page .motion-hero .motion-button { min-height: 52px; padding: 15px 18px; font-size: 12px; gap: 15px; }
    .home-motion-page .motion-hero .motion-link { font-size: 12px; gap: 9px; }
    .home-motion-page .motion-section { padding-top: 70px; padding-bottom: 70px; }
    .home-motion-page h2 { font-size: clamp(32px, 7.4vw, 47px); }
    .home-motion-page .motion-section-heading { display: block; margin-bottom: 36px; }
    .home-motion-page .motion-section-heading > .motion-section-intro, .home-motion-page .motion-section-heading > .motion-link { margin-top: 25px; }
    .home-motion-page .motion-section-intro { max-width: 100%; }
    .home-motion-page .motion-services { grid-template-columns: 1fr 1fr; gap: 14px; }
    .home-motion-page .motion-service, .home-motion-page .motion-service:nth-child(1), .home-motion-page .motion-service:nth-child(2) { grid-column: auto; min-height: 255px; padding: 22px 18px; border-radius: 18px; }
    .home-motion-page .motion-service:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 205px; }
    .home-motion-page .motion-service h3 { font-size: 24px; margin-top: 70px; }
    .home-motion-page .motion-service p { font-size: 12px; max-width: 100%; padding-right: 0; margin-bottom: 42px; }
    .home-motion-page .motion-service-symbol { top: 21px; right: 22px; }
    .home-motion-page .motion-service .motion-service-symbol .icon { width: 40px; height: 40px; }
    .home-motion-page .motion-service > .motion-card-arrow { right: 17px; bottom: 15px; width: 34px; height: 34px; }
    .home-motion-page .motion-service:last-child:nth-child(odd) h3 { margin-top: 28px; }
    .home-motion-page .motion-service:last-child:nth-child(odd) p { margin-bottom: 0; max-width: 75%; }
    .home-motion-page .motion-products { grid-template-columns: 1fr 1fr; gap: 32px 14px; }
    .home-motion-page .motion-product-image { border-radius: 13px; }
    .home-motion-page .motion-product-image .motion-card-arrow { width: 32px; height: 32px; bottom: 9px; right: 9px; }
    .home-motion-page .motion-product-category { font-size: 9px; margin-top: 15px; }
    .home-motion-page .motion-product h3 { font-size: 19px; margin-bottom: 9px; }
    .home-motion-page .motion-product-price { font-size: 18px; }
    .home-motion-page .motion-story-inner { padding-top: 60px; padding-bottom: 35px; }
    .home-motion-page .motion-story-heading h2 { font-size: 38px; }
    .home-motion-page .motion-story-copy { grid-template-columns: 1fr; gap: 0; }
    .home-motion-page .motion-story-step { padding: 28px 0; max-width: 100%; border-bottom: 1px solid #ffffff35; }
    .home-motion-page .motion-story-step:first-child { margin-top: 20px; }
    .home-motion-page .motion-story-step h3 { font-size: 28px; max-width: 330px; margin-bottom: 16px; }
    .home-motion-page .motion-story-step > p:last-child { max-width: 450px; }
    .home-motion-page .motion-story-skip { margin-top: 16px; }
    .home-motion-page .motion-projects { grid-template-columns: 1fr; gap: 34px; }
    .home-motion-page .motion-project:first-child { grid-column: auto; }
    .home-motion-page .motion-project-image, .home-motion-page .motion-project:first-child .motion-project-image > img { border-radius: 18px; aspect-ratio: 1.45; }
    .home-motion-page .motion-project-image > span:not(.motion-card-arrow) { left: 15px; top: 15px; font-size: 9px; }
    .home-motion-page .motion-project-caption { display: block; margin-top: 17px; }
    .home-motion-page .motion-project-caption h3 { font-size: 23px; }
    .home-motion-page .motion-project-caption p { font-size: 12px; margin-top: 8px; }
    .home-motion-page .motion-values { grid-template-columns: 1fr; gap: 35px; padding-bottom: 65px; }
    .home-motion-page .motion-value-list article { gap: 17px; padding: 25px 0; }
    .home-motion-page .motion-value-list article h3 { font-size: 22px; }
    .home-motion-page .motion-value-list article p { font-size: 14px; }
    .home-motion-page .motion-finale-inner { padding-top: 65px; padding-bottom: 70px; }
    .home-motion-page .motion-finale h2 { font-size: clamp(38px, 9vw, 65px); }
    .home-motion-page .motion-finale-inner > p:not(.motion-kicker) { font-size: 17px; }
    .home-motion-page .motion-finale .motion-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
    .home-motion-page .motion-finale-piece { right: -75px; top: 150px; }
    .home-motion-page .motion-finale-piece .icon { width: 260px; height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-motion-page [data-reveal], .home-motion-page [data-hero-art], .home-motion-page [data-hero-copy], .home-motion-page [data-hero-piece] { opacity: 1 !important; transform: none !important; }
}
@media print {
    .home-motion-page .site-header, .home-motion-page .motion-story-nav, .home-motion-page .motion-story-art { display: none !important; }
    .home-motion-page .motion-story, .home-motion-page .motion-story-sticky, .home-motion-page .motion-story-inner { height: auto !important; position: static !important; }
    .home-motion-page .motion-story-copy { display: block !important; }
    .home-motion-page .motion-story-step { position: static !important; visibility: visible !important; opacity: 1 !important; transform: none !important; margin-top: 25px; }
    .home-motion-page [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Wholesale products have their own section and link to their catalogue. */
.home-motion-page .motion-wholesale{--blue:#0066ff;--ink:#111;font-family:'Noto Sans',sans-serif;color:#111}
.home-motion-page .motion-wholesale h2{font-family:'Noto Sans Display',sans-serif;font-weight:900;font-style:italic;font-stretch:75%;letter-spacing:-.025em;transform:none}
.home-motion-page .motion-wholesale h2>span{color:#0066ff}
.home-motion-page .motion-wholesale .motion-kicker,.home-motion-page .motion-wholesale .motion-product-category,.home-motion-page .motion-wholesale .motion-image-note{font-size:14px;color:#626b78}
.home-motion-page .motion-wholesale .motion-product-category{letter-spacing:.03em;text-transform:none}
.home-motion-page .motion-wholesale .motion-section-intro{max-width:440px;font-size:16px;color:#626b78}
.home-motion-page .motion-wholesale .motion-link{font-size:16px;min-height:48px;color:#0052cc}
.home-motion-page .motion-wholesale .motion-product{display:flex;flex-direction:column;min-width:0}
.home-motion-page .motion-wholesale .motion-product h3{font-family:'Noto Sans',sans-serif;font-size:20px;font-style:normal;font-weight:700;transform:none}
.home-motion-page .motion-wholesale .motion-product-price{margin-top:auto;font-size:22px;font-weight:700}
.home-motion-page .motion-wholesale .motion-product-price>span{display:block;margin-top:5px;font-size:14px;font-weight:400;color:#626b78}
.home-motion-page .motion-wholesale .motion-product-image{border:1px solid #e1e6ee;background:#fff}
.home-motion-page .motion-wholesale .motion-product-image img{transition:transform .2s}
.home-motion-page .motion-wholesale a:focus-visible{outline:3px solid #0066ff;outline-offset:4px}
@media(max-width:600px){.home-motion-page .motion-wholesale .motion-product h3{font-size:17px}.home-motion-page .motion-wholesale .motion-product-price{font-size:19px}}
@media(prefers-reduced-motion:reduce){.home-motion-page .motion-wholesale *{transition:none!important;transform:none!important}}

.motion-wholesale img[src*="/print/source-sprites/"]{object-fit:cover;object-position:center top}