:root { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; color: #111; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
html { scroll-behavior: smooth; }
::selection { background: #ff7248; color: #111; }
:focus-visible { outline: 3px solid #ff754f; outline-offset: 5px; }
.study-nav { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 42px; padding: 10px 30px; background: #f0f0f0; color: #222; font-size: 12px; border-bottom: 1px solid #ccc; }
.study-nav a:hover, .direction-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-header { height: 100px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-inline: 48px; }
.wordmark { font-size: 32px; font-weight: 700; letter-spacing: -1.8px; }
.wordmark span { font-size: 15px; margin-left: 5px; vertical-align: top; }
.quiet-link { font-size: 14px; }
.intro-label { font-size: 15px; line-height: 1.5; }
.direction-footer { display: flex; justify-content: space-between; gap: 20px; padding: 30px 48px; background: #f1f1f1; color: #222; border-top: 1px solid #ccc; font-size: 12px; }
.placeholder { overflow: hidden; }
.preview .study-nav, .preview .direction-footer { display: none; }

/* The first direction uses scale and a single blue cut through monochrome. */
.signal { background: #fff; }
.signal .site-header { border-bottom: 1px solid #111; margin-inline: 48px; padding-inline: 0; }
.signal-cta { display: inline-flex; align-items: center; padding: 14px 20px; background: #1546f5; color: #fff; font-size: 15px; }
.signal-cta:hover { background: #092eb8; }
.signal-hero { padding: 46px 48px 0; }
.signal-title .intro-label { margin-bottom: 30px; }
.signal h1 { font-size: clamp(80px, 12.7vw, 196px); line-height: .84; font-weight: 700; letter-spacing: -.073em; margin-left: -10px; }
.signal h1 span { color: #1546f5; }
.signal-bottom { display: grid; grid-template-columns: 90px 1fr auto; gap: 22px; align-items: center; margin-block: 46px 35px; }
.signal-cross { font-size: 72px; line-height: 1; color: #1546f5; }
.signal-bottom p { font-size: 17px; line-height: 1.55; }
.signal-promise { display: flex; flex-direction: column; gap: 7px; font-size: 12px; border-left: 1px solid #111; padding: 12px 0 12px 30px; }
.signal-promise strong { font-size: 17px; font-weight: 500; }
.signal-image { position: relative; height: 410px; color: #fff; background: #121212; }
.signal-image figcaption { display: flex; justify-content: space-between; gap: 20px; position: absolute; inset: 24px 28px auto; color: #c4c4c4; font-size: 12px; }
.signal-image-center { position: absolute; font-size: 420px; line-height: 1; left: 44%; top: -40px; color: #292929; }
.signal-image > p { position: absolute; bottom: 28px; left: 28px; font-size: 58px; letter-spacing: -3px; line-height: .98; }
.signal-more { display: grid; grid-template-columns: 1fr 3fr 2fr; gap: 30px; padding: 85px 48px; }
.signal-more > p { font-size: 13px; max-width: 100px; line-height: 1.6; }
.signal-more h2 { font-size: clamp(45px, 5.5vw, 80px); line-height: .96; letter-spacing: -.06em; font-weight: 500; }
.signal-more h2 span { color: #1546f5; }
.signal-more > div > p:first-child { font-size: 17px; line-height: 1.6; max-width: 310px; }
.signal-billing { font-size: 28px; font-weight: 600; letter-spacing: -1px; margin-block: 34px 20px; }
.signal-more > div a { display: inline-block; border-bottom: 1px solid; padding-bottom: 6px; font-size: 13px; }

/* The second direction places the message inside an unfinished project. */
.open-canvas { background: #fafafa; }
.open-canvas .site-header { position: relative; z-index: 2; background: #fafafa; border-bottom: 1px solid #ddd; }
.open-canvas .wordmark span { color: #df461f; font-size: 25px; }
.canvas-cta { display: inline-flex; align-items: center; padding: 14px 23px; border-radius: 100px; background: #e44522; color: white; font-size: 15px; font-weight: 500; }
.canvas-cta:hover { background: #b52b0d; }
.canvas-hero { position: relative; min-height: 850px; background-image: radial-gradient(#c9c9c9 .7px, transparent .7px); background-size: 22px 22px; overflow: hidden; }
.canvas-connections { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.canvas-connections path { fill: none; stroke: #c1c1c1; stroke-width: 1.5; stroke-dasharray: 5 5; }
.canvas-center { position: absolute; width: 700px; max-width: 65%; left: 50%; top: 51%; transform: translate(-50%, -50%); z-index: 1; text-align: center; padding: 30px 0; }
.canvas-center .intro-label { margin-bottom: 23px; }
.canvas-center h1 { font-size: clamp(65px, 7.3vw, 112px); font-weight: 500; letter-spacing: -.065em; line-height: .98; margin-bottom: 25px; }
.canvas-center h1 span { display: inline; background: #ffd7c9; box-shadow: 8px 0 #ffd7c9, -5px 0 #ffd7c9; }
.canvas-center > p:not(.intro-label) { font-size: 17px; line-height: 1.65; }
.canvas-center .canvas-cta { margin-top: 27px; }
.canvas-center > small { display: block; margin-top: 15px; font-size: 12px; }
.canvas-note { position: absolute; width: 250px; height: 265px; border: 1px solid #ccc; background: white; box-shadow: 4px 8px 0 #00000009; padding: 17px; }
.canvas-note figcaption { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 15px; border-bottom: 1px solid #ddd; font-size: 12px; }
.canvas-note > div { padding-top: 20px; }
.canvas-note > div > span { font-size: 11px; color: #707070; }
.canvas-note p { font-size: 30px; line-height: 1.05; letter-spacing: -1px; margin-top: 14px; }
.canvas-note small { position: absolute; bottom: 16px; left: 17px; right: 17px; font-size: 10px; color: #686868; }
.note-one { left: 5%; top: 34px; transform: rotate(-7deg); }
.note-two { right: 4%; top: 70px; transform: rotate(7deg); background: #fff0df; border-color: #dacebf; }
.note-three { bottom: 25px; left: 9%; transform: rotate(4deg); background: #e9eef7; }
.canvas-margin { position: absolute; right: 6%; bottom: 56px; font-size: 13px; }
.canvas-more { display: grid; grid-template-columns: .8fr 2fr 1.4fr; gap: 40px; background: #e44522; color: white; padding: 70px 48px 85px; }
.canvas-section-number { font-size: 13px; }
.canvas-more h2 { font-size: clamp(48px, 5vw, 78px); font-weight: 500; line-height: .98; letter-spacing: -.05em; }
.canvas-more h2 span { color: #ffc0a7; }
.canvas-more p { font-size: 17px; line-height: 1.65; }
.canvas-more strong { display: block; margin-block: 28px 9px; font-size: 20px; }

/* The third direction has discrete frames: motion behaves like paper cutouts. */
.cut-and-play { background: #f4ed32; color: #111; }
.cut-and-play .site-header { border-bottom: 2px solid #111; margin-inline: 40px; padding-inline: 0; height: 91px; }
.cut-and-play .site-header > p { font-size: 13px; }
.cut-cta { display: inline-flex; background: #111; color: #f4ed32; font-weight: 600; font-size: 14px; padding: 16px 22px; box-shadow: 4px 4px 0 #1113; }
.cut-cta:hover { background: #343434; }
.cut-hero { display: grid; grid-template-columns: 1.1fr 1fr; padding: 60px 40px 65px; gap: 45px; align-items: center; }
.cut-tag { font-size: 13px; display: inline-block; border-bottom: 2px solid #111; padding-bottom: 9px; margin-bottom: 35px; }
.cut-title h1 { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(86px, 9.4vw, 155px); font-weight: 400; line-height: .94; letter-spacing: -.02em; }
.cut-title h1 > span { display: inline-block; color: #f4ed32; background: #111; padding: 4px 10px 12px; margin-top: 13px; transform: rotate(-3deg); }
.cut-description { display: flex; gap: 20px; margin-top: 42px; align-items: center; justify-content: space-between; }
.cut-description p { font-size: 16px; line-height: 1.6; max-width: 360px; }
.cut-round { flex-shrink: 0; width: 58px; height: 58px; border: 2px solid #111; border-radius: 50%; display: grid; place-items: center; font-size: 32px; }
.cut-stage { position: relative; height: 535px; background: #191919; color: #f4ed32; padding: 20px; border: 2px solid #111; }
.cut-stage-top { display: flex; justify-content: space-between; gap: 15px; font-size: 11px; }
.cut-paper { position: absolute; left: 13%; top: 19%; width: 74%; height: 59%; padding: 26px; color: #111; background: #fff; transform: rotate(-7deg); box-shadow: 9px 10px 0 #555; }
.cut-paper > span { font-size: 12px; }
.cut-paper strong { display: block; font-size: clamp(45px, 5vw, 75px); letter-spacing: -.065em; line-height: .96; margin-top: 45px; font-weight: 600; }
.cut-paper p { position: absolute; left: 26px; bottom: 24px; font-size: 11px; }
.cut-stage[data-frame="1"] .cut-paper { transform: rotate(6deg) translate(-8px, 8px); background: #b7cafa; }
.cut-stage[data-frame="2"] .cut-paper { transform: rotate(-3deg) translate(8px, -7px); background: #f4ed32; }
.cut-stage[data-frame="3"] .cut-paper { transform: rotate(3deg) translate(-6px, 0); background: #f7aaca; }
.cut-controls { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 17px; justify-content: space-between; }
#motion-toggle { border: 0; background: transparent; color: #fff; padding: 8px 0; font-size: 12px; }
#motion-toggle span { margin-left: 9px; color: #f4ed32; }
.cut-controls > div { display: flex; gap: 6px; }
.frame-button { width: 35px; height: 35px; border: 1px solid #6e6e6e; background: transparent; color: white; font-size: 12px; }
.frame-button[aria-pressed="true"] { background: #f4ed32; border-color: #f4ed32; color: #111; }
.cut-more { background: white; }
.cut-banner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; background: #111; color: #f4ed32; padding: 25px 40px; font-size: clamp(20px, 2.4vw, 36px); letter-spacing: -1px; }
.cut-more-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 50px; padding: 65px 40px; align-items: end; }
.cut-more h2 { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 95px; font-weight: 400; line-height: .96; }
.cut-more h2 span { background: #f4ed32; padding-inline: 7px; }
.cut-more-body > div { max-width: 380px; padding-bottom: 10px; }
.cut-more p { font-size: 19px; line-height: 1.65; margin-bottom: 30px; }
.cut-more small { display: block; font-size: 12px; margin-top: 20px; }

/* The fourth direction uses a single saturated field and a wide, communal stage. */
.common-ground { background: #1842ef; color: white; }
.common-ground .site-header { border-bottom: 1px solid #ffffff50; margin-inline: 50px; padding-inline: 0; }
.common-ground .wordmark span { font-size: 10px; color: #a0b3ff; }
.ground-cta { display: inline-flex; align-items: center; justify-content: center; background: white; color: #153de5; border-radius: 100px; font-size: 15px; font-weight: 600; padding: 15px 24px; }
.ground-cta:hover { background: #dfe5ff; }
.ground-hero { padding-top: 42px; text-align: center; overflow: hidden; }
.ground-hero .intro-label { font-size: 14px; margin-bottom: 30px; }
.ground-hero h1 { font-size: clamp(82px, 11vw, 166px); line-height: .85; font-weight: 500; letter-spacing: -.065em; }
.ground-hero h1 > span { color: #a3b4ff; }
.ground-summary { display: flex; justify-content: center; align-items: center; gap: clamp(50px, 8vw, 130px); margin-block: 30px 25px; }
.ground-summary p { font-size: 17px; line-height: 1.6; }
.ground-asterisk { color: #a3b4ff; font-size: 88px; line-height: 1; transform: rotate(12deg); }
.ground-asterisk.right { transform: rotate(-12deg); }
.ground-action { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ground-action > span { font-size: 12px; }
.ground-gallery { display: flex; justify-content: center; align-items: start; gap: 24px; margin: 57px -30px 0; height: 280px; padding-top: 15px; }
.ground-window { flex-shrink: 0; width: 33%; max-width: 490px; height: 340px; background: #fff; color: #151515; border: 1px solid #111; border-radius: 10px 10px 0 0; padding: 20px; text-align: left; }
.ground-window figcaption { padding-bottom: 18px; border-bottom: 1px solid #ddd; font-size: 13px; }
.ground-window > div { padding: 25px 0; text-align: center; }
.ground-window > div span { display: block; font-size: 70px; color: #b5b5b5; letter-spacing: -4px; }
.ground-window > div p { font-size: 12px; margin-top: 10px; color: #626262; }
.window-one { transform: rotate(-8deg) translateY(22px); }
.window-two { position: relative; z-index: 1; background: #edf0ff; width: 38%; max-width: 540px; }
.window-three { transform: rotate(8deg) translateY(22px); }
.ground-more { background: #101010; padding: 58px 50px 65px; text-align: left; }
.ground-more > p { font-size: 13px; margin-bottom: 40px; color: #b7b7b7; }
.ground-more h2 { font-size: clamp(70px, 9vw, 132px); font-weight: 500; letter-spacing: -.065em; line-height: .89; }
.ground-more h2 span { color: #93a7ff; }
.ground-more-bottom { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-top: 45px; }
.ground-more-bottom p { font-size: 18px; line-height: 1.65; }
.ground-more .ground-cta { border-radius: 0; }

@media (max-width: 1050px) {
 .canvas-note { width: 205px; height: 230px; }
 .canvas-note p { font-size: 26px; }
 .note-one { left: 3%; top: 22px; }
 .note-two { right: 3%; top: 38px; }
 .canvas-center { top: 53%; max-width: 78%; }
 .cut-hero { gap: 25px; padding-inline: 30px; }
 .cut-title h1 { font-size: clamp(75px, 9.4vw, 105px); }
 .cut-stage { height: 490px; }
 .cut-paper { left: 9%; width: 82%; padding: 20px; }
 .cut-paper strong { font-size: 56px; }
 .cut-round { display: none; }
 .signal-bottom { grid-template-columns: 65px 1fr; }
 .signal-cross { font-size: 60px; }
 .signal-promise { grid-column: 2; padding: 0; border: 0; }
 .signal-more { grid-template-columns: 1fr 1fr; }
 .signal-more > p { grid-column: 1 / -1; max-width: none; }
 .canvas-more { grid-template-columns: 1fr 1fr; }
 .canvas-section-number { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
 .study-nav { padding: 11px 16px; font-size: 10px; gap: 9px; }
 .site-header { height: 80px; padding-inline: 20px; }
 .wordmark { font-size: 28px; }
 .quiet-link { display: none; }
 .direction-footer { flex-wrap: wrap; padding: 25px 20px; font-size: 11px; }
 .direction-footer > span { display: none; }
 .signal .site-header { margin-inline: 20px; }
 .signal-cta { padding: 12px 15px; font-size: 13px; }
 .signal-hero { padding: 31px 20px 0; }
 .signal-title .intro-label { font-size: 12px; margin-bottom: 30px; }
 .signal h1 { font-size: clamp(68px, 14vw, 98px); letter-spacing: -.065em; margin-left: -3px; }
 .signal-bottom { grid-template-columns: 38px 1fr; gap: 15px; margin-block: 30px; }
 .signal-cross { font-size: 37px; align-self: start; }
 .signal-bottom p { font-size: 14px; }
 .signal-promise { margin-top: 9px; font-size: 11px; }
 .signal-promise strong { font-size: 15px; }
 .signal-image { height: 310px; }
 .signal-image figcaption { inset: 17px 17px auto; flex-direction: column; gap: 5px; font-size: 10px; }
 .signal-image-center { font-size: 290px; left: 27%; top: 26px; }
 .signal-image > p { bottom: 20px; left: 17px; font-size: 42px; letter-spacing: -2px; }
 .signal-more { grid-template-columns: 1fr; padding: 45px 20px; gap: 30px; }
 .signal-more h2 { font-size: 54px; }
 .signal-more > div > p:first-child { font-size: 16px; max-width: none; }
 .signal-billing { margin-top: 26px; }
 .canvas-cta { font-size: 13px; padding: 12px 18px; }
 .canvas-hero { min-height: 980px; }
 .canvas-connections { display: none; }
 .canvas-note { width: 155px; height: 180px; padding: 13px; }
 .canvas-note figcaption { font-size: 9px; padding-bottom: 11px; }
 .canvas-note > div { padding-top: 12px; }
 .canvas-note > div > span { font-size: 9px; }
 .canvas-note p { font-size: 23px; margin-top: 9px; }
 .canvas-note small { font-size: 8px; left: 13px; bottom: 12px; right: 13px; }
 .note-one { left: 20px; top: 28px; transform: rotate(-6deg); }
 .note-two { right: 17px; top: 74px; transform: rotate(8deg); }
 .note-three { left: 30px; bottom: 27px; width: 190px; height: 190px; }
 .canvas-center { top: 50%; max-width: none; width: calc(100% - 40px); padding: 0; }
 .canvas-center h1 { font-size: clamp(56px, 12vw, 76px); }
 .canvas-center .intro-label { font-size: 13px; margin-bottom: 22px; }
 .canvas-center > p:not(.intro-label) { font-size: 14px; }
 .canvas-center > small { font-size: 11px; }
 .canvas-margin { right: 25px; bottom: 90px; width: 95px; font-size: 12px; line-height: 1.6; }
 .canvas-more { grid-template-columns: 1fr; padding: 40px 20px; gap: 30px; }
 .canvas-more h2 { font-size: 60px; }
 .canvas-more p { font-size: 16px; }
 .cut-and-play .site-header { height: 80px; margin-inline: 20px; }
 .cut-and-play .site-header > p { display: none; }
 .cut-cta { font-size: 13px; padding: 13px 18px; }
 .cut-hero { grid-template-columns: 1fr; padding: 32px 20px 40px; gap: 35px; }
 .cut-tag { font-size: 11px; margin-bottom: 27px; }
 .cut-title h1 { font-size: clamp(83px, 18vw, 120px); }
 .cut-description { margin-top: 30px; }
 .cut-description p { font-size: 15px; }
 .cut-stage { height: 430px; padding: 16px; }
 .cut-stage-top { font-size: 10px; }
 .cut-paper { top: 19%; height: 57%; }
 .cut-paper strong { font-size: 56px; margin-top: 40px; }
 .cut-paper p { left: 20px; bottom: 20px; font-size: 10px; }
 .cut-controls { left: 16px; right: 16px; bottom: 16px; gap: 8px; }
 #motion-toggle { font-size: 10px; }
 .frame-button { height: 31px; width: 31px; }
 .cut-banner { padding: 23px 20px; font-size: 20px; gap: 13px; }
 .cut-more-body { grid-template-columns: 1fr; padding: 40px 20px; gap: 35px; }
 .cut-more h2 { font-size: 77px; }
 .cut-more p { font-size: 17px; }
 .common-ground .site-header { margin-inline: 20px; }
 .ground-cta { padding: 13px 19px; font-size: 13px; }
 .ground-hero { padding-top: 36px; }
 .ground-hero .intro-label { font-size: 12px; margin-bottom: 30px; }
 .ground-hero h1 { font-size: clamp(68px, 15vw, 100px); }
 .ground-summary { gap: 0; margin: 27px 20px; }
 .ground-summary p { font-size: 14px; }
 .ground-asterisk { display: none; }
 .ground-action > span { font-size: 11px; }
 .ground-gallery { height: 245px; gap: 12px; margin-top: 37px; margin-inline: -130px; }
 .ground-window { height: 270px; padding: 16px; }
 .ground-window figcaption { font-size: 11px; }
 .ground-window > div span { font-size: 58px; }
 .ground-window > div p { font-size: 10px; }
 .ground-more { padding: 40px 20px; }
 .ground-more > p { margin-bottom: 30px; }
 .ground-more h2 { font-size: clamp(58px, 13vw, 85px); }
 .ground-more-bottom { align-items: start; flex-direction: column; margin-top: 30px; }
 .ground-more-bottom p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }