.section-width { max-width: 1640px; width: calc(100% - 128px); }
.intro { padding-top: 96px; padding-bottom: 40px; gap: 80px; }
.intro h2, .section-heading h2, .faq-heading h2, .team-copy h2, .material-heading h2 { font-size: 48px; line-height: 1; max-width: 840px; }
.section-description, .heading-note { font-size: 18px; line-height: 28px; }
.new-studies, .fashion-gallery, .canvas-section, .agent-section, .commerce, .creative-tools, .toolbox, .team-section, .faq { padding-top: 96px; }
.section-heading { margin-bottom: 40px; }
.feature-panel { border-radius: 0px; background: transparent; grid-template-columns: 1.7fr 1fr; }
.feature-image-area { padding: 24px; background: rgb(233, 236, 232); }
.case-comparison { border-radius: 0px; background: transparent; }
.case-comparison figure { border-radius: 0px; }
.case-comparison img, #featureImage { height: 440px; }
.feature-copy { padding: 48px; }
.feature-copy h3 { font-size: 36px; line-height: 40px; }
.feature-copy > p:not(.eyebrow):not(.feature-index) { font-size: 18px; line-height: 28px; }
.feature-example-label { font-size: 14px; line-height: 20px; }
.home-workflow { padding: 96px 0px; gap: 96px; }
.home-tagline h2 { font-size: 60px; line-height: 1; }
.home-tagline > p { font-size: 18px; line-height: 28px; }
.study-grid { display: flex; flex-direction: column; gap: 80px; }
.study-card { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.65fr); gap: 64px; align-items: center; background: transparent; border: 0px; box-shadow: none; border-radius: 0px; padding: 0px; }
.study-copy { padding: 0px; }
.study-copy h3 { font-size: 36px; line-height: 40px; }
.study-copy p { font-size: 18px; line-height: 28px; max-width: 440px; margin-top: 24px; }
.study-copy > span { font-size: 14px; line-height: 20px; margin-top: 24px; }
.study-pair, .study-denim-images { height: 540px; gap: 16px; margin: 0px; padding: 0px; background: transparent; border-radius: 0px; }
.study-card figure { border-radius: 0px; background: rgb(238, 236, 232); border: 0px; }
.study-card img { border-radius: 0px; }
.study-card figcaption { font-size: 14px; line-height: 20px; padding: 12px; }
.study-outdoor { grid-template-columns: minmax(0px, 1.65fr) minmax(0px, 1fr); }
.study-outdoor .study-copy { grid-area: 1 / 2; }
.study-outdoor .study-pair { grid-area: 1 / 1; }
.compare-actions { display: flex; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.compare-actions button { border: 1px solid rgb(51, 51, 51); background: transparent; color: rgb(24, 24, 24); border-radius: 99px; padding: 12px 16px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 14px; line-height: 20px; cursor: pointer; }
.compare-actions button[aria-pressed="true"] { background: rgb(24, 24, 24); color: rgb(255, 255, 255); }
.compare-actions small { font-size: 14px; line-height: 20px; color: rgb(98, 98, 98); }
.study-pair.is-comparing { position: relative; display: block; --comparison: 50%; height: 620px; overflow: hidden; background: rgb(211, 210, 205); isolation: isolate; }
.study-pair.is-comparing figure { position: absolute; inset: 0px; margin: 0px; width: 100%; height: 100%; background: rgb(211, 210, 205); }
.study-pair.is-comparing figure > a { display: block; width: 100%; height: 100%; }
.study-pair.is-comparing figure img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 0%; }
.study-pair.is-comparing figure:nth-child(2) { clip-path: inset(0 calc(100% - var(--comparison)) 0 0); }
.study-pair.is-comparing figcaption, .study-pair.is-comparing .image-inspect { display: none; }
.compare-input { position: absolute; inset: 0px; width: 100%; height: 100%; margin: 0px; opacity: 0; cursor: ew-resize; z-index: 4; touch-action: pan-y; }
.compare-divider { position: absolute; top: 0px; bottom: 0px; left: var(--comparison); width: 2px; background: rgb(255, 255, 255); pointer-events: none; z-index: 3; }
.compare-divider::after { content: "↔"; position: absolute; top: 50%; left: 0px; transform: translate(-50%, -50%); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 99px; color: rgb(24, 24, 24); background: rgb(255, 255, 255); font-size: 24px; line-height: 1; }
.compare-label { position: absolute; top: 16px; left: 16px; z-index: 3; padding: 8px 12px; background: rgba(255, 255, 255, 0.94); color: rgb(24, 24, 24); font-size: 14px; line-height: 20px; border-radius: 8px; pointer-events: none; }
.compare-label.after { left: auto; right: 16px; }
.study-pair.is-comparing:has(> .compare-input:focus-visible) { outline: rgb(24, 24, 24) solid 3px; outline-offset: 4px; }
.home-material-guide { --material-guide-inset: 32px; padding: var(--material-guide-inset); align-self: start; }
.home-material-guide > h3 { font-size: 24px; line-height: 32px; margin: 0px 0px 24px; }
.material-choice-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.material-choice-tabs button { border: 1px solid rgb(206, 206, 202); background: transparent; color: rgb(66, 66, 66); border-radius: 99px; padding: 12px 16px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 14px; line-height: 20px; cursor: pointer; }
.material-choice-tabs button[aria-selected="true"] { background: rgb(24, 24, 24); border-color: rgb(24, 24, 24); color: rgb(255, 255, 255); }
.material-choice-panel { margin-top: 24px; }
.material-choice-panel img { display: block; width: calc(100% + 2 * var(--material-guide-inset)); max-width: none; margin-inline: calc(-1 * var(--material-guide-inset)); height: 280px; object-fit: contain; background: rgb(238, 236, 232); }
.material-choice-panel h4 { font-size: 24px; line-height: 32px; margin-top: 24px; }
.material-choice-panel p { font-size: 16px; line-height: 24px; color: rgb(98, 98, 98); margin-top: 12px; max-width: 560px; }
.material-choice-panel > a { display: inline-flex; align-items: center; gap: 24px; margin-top: 24px; padding: 12px 16px; background: rgb(24, 24, 24); color: rgb(255, 255, 255); font-size: 16px; line-height: 24px; border-radius: 12px; text-decoration: none; }
.capability-example { border: 0px; border-radius: 0px; box-shadow: none; background: transparent; padding: 24px 0px; }
.capability-example summary { padding: 16px 0px; }
.capability-example summary h3 { font-size: 30px; line-height: 36px; }
.capability-example summary p { font-size: 18px; line-height: 28px; }
.capability-images { border-radius: 0px; }
.capability-images figure { border-radius: 0px; }
.canvas-demo-grid, .agent-demo-grid { gap: 32px; }
.real-workspace { border-radius: 0px; background: transparent; box-shadow: none; border: 0px; }
.real-workspace > a, .real-workspace img { border-radius: 0px; }
.real-workspace figcaption { padding: 24px 0px; }
.real-workspace figcaption strong { font-size: 24px; line-height: 32px; }
.real-workspace figcaption > span { font-size: 16px; line-height: 24px; }
.commerce .section-heading { margin-bottom: 40px; }
.commerce-grid { display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0px; scroll-behavior: smooth; padding-bottom: 24px; scrollbar-width: thin; scrollbar-color: rgb(118, 118, 110) rgb(231, 231, 227); touch-action: pan-x pan-y; cursor: grab; }
.commerce-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.commerce-grid > .commerce-item { flex: 0 0 70%; min-width: 0px; scroll-snap-align: start; border-radius: 0px; }
.commerce-grid .capability-montage { height: 520px; border-radius: 0px; }
.commerce-grid .capability-montage figure, .commerce-grid .capability-montage img { border-radius: 0px; }
.commerce-grid .capability-montage img { -webkit-user-drag: none; user-select: none; }
.commerce-title h3 { font-size: 30px; line-height: 36px; }
.commerce-item > p { font-size: 18px; line-height: 28px; max-width: 640px; }
.gallery-navigation { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.gallery-navigation button { display: grid; place-items: center; border: 1px solid rgb(170, 170, 170); background: transparent; color: rgb(24, 24, 24); width: 48px; height: 48px; border-radius: 99px; cursor: pointer; }
.gallery-navigation button:disabled { opacity: 0.35; cursor: default; }
.gallery-navigation svg { width: 20px; height: 20px; }
.gallery-navigation p { font-size: 14px; line-height: 20px; color: rgb(98, 98, 98); margin: 0px 0px 0px 12px; }
.closing { max-width: none; width: calc(100% - 64px); min-height: 480px; padding: 96px 64px; border-radius: 0px; }
.closing h2 { font-size: 60px; line-height: 1; }
.footer { padding-top: 64px; }
.team-visual { border-radius: 0px; box-shadow: none; border: 0px; }
.team-flow > div { border-radius: 0px; box-shadow: none; border: 0px; }
.faq-list details { border: 0px; padding: 12px 0px; }
.faq-list summary { padding: 16px 0px; }
.faq-list details[open] { background: rgb(236, 236, 232); padding: 24px; }
.faq-list details[open] summary { padding-top: 0px; }
@media (max-width: 1399px) and (min-width: 901px){.section-width { width: calc(100% - 96px); }
.study-pair, .study-denim-images { height: 440px; }}
@media (min-width: 601px) and (max-width: 900px){.section-width { width: calc(100% - 64px); }
.intro { gap: 32px; padding-top: 64px; }
.intro h2, .section-heading h2, .faq-heading h2, .team-copy h2 { font-size: 36px; line-height: 40px; }
.feature-panel { grid-template-columns: 1fr; }
.case-comparison img, #featureImage { height: 360px; }
.home-workflow { gap: 48px; padding: 64px 0px; }
.home-tagline h2 { font-size: 48px; line-height: 1; }
.study-card, .study-outdoor { gap: 32px; grid-template-columns: 1fr 1.25fr; }
.study-outdoor .study-copy { grid-column: 1; }
.study-outdoor .study-pair { grid-column: 2; }
.study-pair, .study-denim-images { height: 400px; }
.study-copy h3 { font-size: 30px; line-height: 36px; }
.study-copy p { font-size: 16px; line-height: 24px; }
.study-pair.is-comparing { height: 440px; }
.commerce-grid > .commerce-item { flex-basis: 86%; }
.commerce-grid .capability-montage { height: 400px; }}
@media (max-width: 600px){.section-width { width: calc(100% - 40px); }
.intro { padding-top: 64px; padding-bottom: 24px; }
.intro h2, .section-heading h2, .faq-heading h2, .team-copy h2, .material-heading h2 { font-size: 30px; line-height: 36px; }
.section-description, .heading-note { font-size: 16px; line-height: 24px; }
.feature-image-area { padding: 12px; }
.case-comparison img, #featureImage { height: 280px; }
.feature-copy { padding: 24px 0px; }
.feature-copy h3 { font-size: 30px; line-height: 36px; }
.feature-copy > p:not(.eyebrow):not(.feature-index) { font-size: 16px; line-height: 24px; }
.home-workflow { padding: 64px 0px; display: block; }
.home-tagline h2 { font-size: 36px; line-height: 40px; }
.home-tagline > p { font-size: 16px; line-height: 24px; }
.home-material-guide { margin-top: 40px; }
.home-material-guide > h3 { font-size: 24px; line-height: 32px; }
.material-choice-tabs { gap: 8px; }
.material-choice-tabs button { padding: 8px 12px; }
.material-choice-panel img { height: 280px; }
.study-grid { gap: 48px; }
.study-card, .study-outdoor { display: flex; flex-direction: column; gap: 24px; align-items: stretch; }
.study-copy { padding: 0px; }
.study-copy h3 { font-size: 30px; line-height: 36px; }
.study-copy p { font-size: 16px; line-height: 24px; margin-top: 16px; }
.study-copy > span { margin-top: 16px; }
.study-pair, .study-denim-images { height: 360px; width: 100%; gap: 8px; }
.study-pair.is-comparing { height: 480px; }
.study-card figcaption { padding: 8px; font-size: 12px; line-height: 16px; }
.compare-actions { margin-top: 16px; gap: 8px; }
.compare-actions button, .compare-actions small { font-size: 14px; line-height: 20px; }
.new-studies, .fashion-gallery, .canvas-section, .agent-section, .commerce, .creative-tools, .toolbox, .team-section, .faq { padding-top: 64px; }
.capability-example summary h3 { font-size: 24px; line-height: 32px; }
.capability-example summary p { font-size: 16px; line-height: 24px; }
.real-workspace figcaption strong { font-size: 20px; line-height: 28px; }
.real-workspace figcaption > span { font-size: 14px; line-height: 20px; }
.commerce-grid { gap: 16px; }
.commerce-grid > .commerce-item { flex-basis: 94%; }
.commerce-grid .capability-montage { height: 360px; }
.commerce-title h3 { font-size: 24px; line-height: 32px; }
.commerce-item > p { font-size: 16px; line-height: 24px; }
.gallery-navigation { gap: 8px; }
.gallery-navigation p { font-size: 12px; line-height: 16px; margin-left: 4px; }
.closing { width: 100%; margin: 64px 0px 0px; min-height: 400px; padding: 64px 24px; }
.closing h2 { font-size: 48px; line-height: 1; }
.footer { padding-top: 48px; }}
@media (prefers-reduced-motion: reduce){.commerce-grid { scroll-behavior: auto; }}
.hero-fullscreen{position:absolute;top:72px;right:24px;z-index:4;padding:8px 12px;border:1px solid #ffffff80;border-radius:99px;background:#18181880;color:#fff;font:14px/20px inherit;cursor:pointer}
#heroFilm:fullscreen{position:fixed;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;background:#000;opacity:1}
#homeFilmDialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:48px;border:0;border-radius:0;background:#000;color:#fff}#homeFilmDialog video{width:100%;height:100%;object-fit:contain}#homeFilmDialog>button{position:absolute;top:16px;right:24px;z-index:1;background:#fff;color:#181818;border:0;border-radius:99px;width:40px;height:40px;font-size:24px;line-height:1;cursor:pointer}

@media(max-width:600px){.home-material-guide{--material-guide-inset:24px}}

.commerce-extra{border:0}

/* Clip both comparison layers once, at their shared outside edge. */
.study-outdoor .study-pair.is-comparing{border-radius:12px;overflow:hidden}
.study-outdoor .study-pair.is-comparing>figure{border-radius:0;border:0}
html[data-yzh-theme=dark] body .study-outdoor .study-pair.is-comparing{background:#252525}

/* Show the source, result and reusable prompt together within the guide. */
.material-guide-visuals{width:calc(100% + 2 * var(--material-guide-inset));margin-inline:calc(-1 * var(--material-guide-inset))}
.material-guide-visuals>figure{margin:0}
.material-guide-visuals [hidden]{display:none!important}
body .material-choice-panel .material-guide-visuals img{width:100%;margin-inline:0;height:auto!important;aspect-ratio:2/1!important;object-fit:cover!important;object-position:center}
.material-guide-visuals figcaption{min-height:36px;padding:8px 4px;text-align:center;font-size:12px;line-height:20px;color:var(--home-muted,#626262)}
.material-guide-prompt{margin-top:24px}
.material-guide-prompt strong{font-size:14px;line-height:20px}
.material-choice-panel .material-guide-prompt p{max-width:none;margin-top:8px;overflow-wrap:anywhere}
@media(min-width:901px){body .home-workflow{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:48px}}

/* Keep the transformation in one side-by-side frame. */
.material-guide-visuals.is-comparison{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
body .material-guide-visuals.is-comparison img{aspect-ratio:1/1!important;object-fit:cover!important;object-position:60% 50%}
.material-guide-visuals.is-comparison figcaption{min-height:36px;padding:8px 4px;text-align:center;font-size:12px;line-height:20px}
body .material-guide-visuals.is-sketch img{aspect-ratio:1/1!important;object-position:center}
body .material-guide-visuals.is-sketch>figure:first-child img{object-position:25% 50%}
.material-guide-change-arrow{position:absolute;left:50%;top:calc((100% - 36px)/2);transform:translate(-50%,-50%);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:#181818;font-size:28px;line-height:1;box-shadow:0 2px 12px #0002;pointer-events:none}