/* A print-studio composition: photographic stages, paper notes and registration marks. */
.workflow { position: relative; padding: 100px 0 60px; color: #151925; background: #fffaf1; overflow: hidden; }
.workflow::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .32; background-image: radial-gradient(#1519252b .7px, transparent .7px); background-size: 9px 9px; mask-image: linear-gradient(90deg,#000,transparent 45%); }
.workflow .workflow-inner { position: relative; }
.workflow .workflow-heading { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 70px; margin-bottom: 45px; }
.workflow .workflow-kicker { display: inline-flex; gap: 12px; align-items: center; margin-bottom: 20px; font-size: 10px; font-weight: 800; letter-spacing: 1.6px; }
.workflow .workflow-kicker i { width: 14px; height: 14px; border-radius: 50%; background: #00bfe8; box-shadow: 8px 0 #ee2989; margin-right: 8px; }
.workflow h2 { font-size: clamp(34px,4vw,57px); letter-spacing: -.055em; margin: 0; font-weight: 800; }
.workflow h2 em { color: #7051d7; font-style: normal; }
.workflow .workflow-intro { max-width: 365px; padding-bottom: 4px; }
.workflow .workflow-intro p { margin: 0 0 16px; color: #505766; line-height: 1.8; font-size: 14px; }
.workflow .workflow-intro a { display: inline-flex; align-items: center; gap: 35px; padding: 9px 0; font-size: 13px; font-weight: 750; border-bottom: 2px solid #ee2989; }
.workflow .workflow-intro a:hover { color: #6740bb; }
.workflow .workflow-intro a span { font-size: 20px; }
.workflow .workflow-cards { list-style: none; margin: 0; padding: 0 0 34px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px; align-items: stretch; }
.workflow .workflow-card { --workflow-accent: #00bfe8; display: flex; flex-direction: column; position: relative; min-width: 0; border: 1px solid #151925; background: #fffefb; box-shadow: 5px 6px 0 #1519250b; }
.workflow .workflow-pink { --workflow-accent: #ee2989; margin-top: 0; }
.workflow .workflow-yellow { --workflow-accent: #ffe034; margin-top: 0; }
.workflow .workflow-photo { flex: 0 0 auto; position: relative; aspect-ratio: 1.64; background: #e5e6e5; overflow: hidden; border-bottom: 1px solid #151925; }
.workflow .workflow-photo img { height: 100%; width: 100%; object-fit: cover; }
.workflow .workflow-number { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 58px; height: 64px; background: var(--workflow-accent); color: #151925; font-size: 31px; font-weight: 850; letter-spacing: -.06em; border-right: 1px solid #151925; border-bottom: 1px solid #151925; }
.workflow .workflow-caption { position: absolute; right: 10px; bottom: 10px; background: #151925; color: #fff; padding: 5px 8px; font-size: 8px; font-weight: 650; letter-spacing: 1px; }
.workflow .workflow-note { flex: 1; display: flex; flex-direction: column; padding: 27px 26px 0; position: relative; }
.workflow .workflow-note::before { content: ''; position: absolute; left: 0; top: 27px; width: 4px; height: 52px; background: var(--workflow-accent); }
.workflow h3 { font-size: clamp(23px,2.1vw,29px); line-height: 1.15; font-weight: 750; letter-spacing: -.04em; margin: 0 0 18px; }
.workflow .workflow-note p { font-size: 13px; line-height: 1.8; min-height: 94px; color: #505766; margin: 0 0 24px; }
.workflow .workflow-detail { display: block; margin-top: auto; padding: 14px 0; border-top: 1px solid #15192524; font-size: 8px; font-weight: 750; letter-spacing: 1.2px; }
.workflow .workflow-baseline { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #1519252a; padding-top: 20px; font-size: 8px; font-weight: 750; letter-spacing: 1.2px; }
.workflow .workflow-baseline > div { display: flex; gap: 5px; }
.workflow .workflow-baseline i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #00bfe8; }
.workflow .workflow-baseline i:nth-child(2) { background: #ee2989; }
.workflow .workflow-baseline i:nth-child(3) { background: #ffe034; }
.workflow .workflow-baseline i:nth-child(4) { background: #151925; }
.project-invite { position: relative; background: #151925; color: #151925; padding: 68px 0; overflow: hidden; }
.project-invite::before { content: ''; position: absolute; left: -85px; top: -150px; width: 380px; height: 380px; border: 1px solid #ffffff15; border-radius: 50%; box-shadow: 0 0 0 40px #ffffff04,0 0 0 80px #ffffff03; pointer-events: none; }
.project-invite .project-invite-shell { position: relative; display: grid; grid-template-columns: 1.03fr 1fr; background: #fffaf1; }
.project-invite .project-invite-copy { padding: 44px 48px 45px; position: relative; }
.project-invite .project-invite-tag { display: inline-flex; gap: 11px; align-items: center; margin: 0 0 29px; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; }
.project-invite .project-invite-tag > span { display: grid; place-items: center; width: 27px; height: 27px; font-size: 21px; font-weight: 600; background: #ffe034; }
.project-invite h2 { font-weight: 800; font-size: clamp(32px,3.7vw,53px); line-height: 1.06; letter-spacing: -.055em; margin: 0 0 24px; }
.project-invite h2 em { color: #6740bb; font-style: normal; }
.project-invite .project-invite-break { display: none; }
.project-invite .project-invite-copy > p { max-width: 330px; font-size: 13px; color: #505766; line-height: 1.9; margin: 0 0 25px; }
.project-invite .project-invite-actions { display: flex; flex-wrap: wrap; gap: 21px; align-items: center; }
.project-invite .project-invite-wa { display: inline-flex; gap: 30px; align-items: center; justify-content: space-between; background: #00bfe8; color: #151925; border: 1px solid #151925; padding: 14px 19px; font-size: 13px; line-height: 1.4; font-weight: 750; box-shadow: 3px 3px 0 #151925; }
.project-invite .project-invite-wa:hover { background: #3ed2f1; }
.project-invite .project-invite-wa > span { font-size: 23px; font-weight: 500; }
.project-invite .project-invite-phone { display: flex; flex-direction: column; justify-content: center; padding: 7px 0; gap: 2px; color: #151925; }
.project-invite .project-invite-phone > span { font-size: 8px; font-weight: 700; letter-spacing: 1.2px; }
.project-invite .project-invite-phone strong { font-size: 15px; font-weight: 750; }
.project-invite .project-invite-phone strong > span { margin-left: 8px; }
.project-invite .project-invite-phone:hover strong { color: #6740bb; }
.project-invite .project-invite-art { min-width: 0; display: flex; flex-direction: column; background: #ee2989; padding: 19px; }
.project-invite .project-invite-art-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 0 0 13px; font-size: 8px; line-height: 1.5; font-weight: 750; letter-spacing: 1.2px; }
.project-invite .project-invite-art-top > div { display: flex; gap: 4px; }
.project-invite .project-invite-art-top i { width: 7px; height: 7px; border: 1px solid #151925; border-radius: 50%; }
.project-invite .project-invite-image { position: relative; min-height: 220px; flex: 1; border: 1px solid #151925; }
.project-invite .project-invite-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-invite .project-invite-stamp { position: absolute; left: 16px; bottom: 16px; width: 83px; height: 83px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #151925; background: #ffe034; font-size: 11px; line-height: 1; font-weight: 850; letter-spacing: 1px; transform: rotate(-12deg); }
.project-invite .project-invite-stamp br { display: none; }
.project-invite .project-invite-stamp b { font-size: 22px; font-weight: 400; line-height: 1.15; }
.project-invite .project-invite-art-bottom { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 7px; padding: 15px 4px 0; }
.project-invite .project-invite-art-bottom > span:first-child { grid-column: 1/-1; font-size: 8px; font-weight: 750; letter-spacing: 1px; }
.project-invite .project-invite-art-bottom strong { display: block; font-size: 26px; line-height: .98; letter-spacing: -.05em; font-weight: 850; }
.project-invite .project-invite-arrow { font-size: 64px; font-weight: 400; line-height: .8; }
@media (max-width: 1000px) {
  .workflow { padding: 76px 0 44px; }
  .workflow .workflow-heading { gap: 38px; }
  .workflow .workflow-cards { gap: 16px; }
  .workflow .workflow-note { padding: 23px 19px 0; }
  .workflow .workflow-note p { min-height: 118px; }
  .workflow .workflow-detail { letter-spacing: .6px; font-size: 7px; }
  .project-invite .project-invite-copy { padding: 34px 30px; }
  .project-invite .project-invite-actions { gap: 15px; }
  .project-invite .project-invite-wa { padding-inline: 15px; gap: 20px; font-size: 12px; }
}
@media (max-width: 720px) {
  .workflow { padding: 57px 0 35px; }
  .workflow .workflow-inner, .project-invite .project-invite-shell { width: calc(100% - 36px); }
  .workflow .workflow-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 30px; }
  .workflow h2 { font-size: clamp(36px,10.5vw,52px); }
  .workflow .workflow-kicker { margin-bottom: 16px; font-size: 9px; }
  .workflow .workflow-intro { max-width: 420px; }
  .workflow .workflow-intro p { font-size: 13px; margin-bottom: 8px; }
  .workflow .workflow-cards { grid-template-columns: 1fr; gap: 22px; padding-bottom: 28px; }
  .workflow .workflow-card { display: grid; grid-template-columns: .85fr 1fr; box-shadow: 4px 4px 0 #1519250b; margin-top: 0; }
  .workflow .workflow-photo { aspect-ratio: auto; min-height: 228px; height: 100%; border-bottom: 0; border-right: 1px solid #151925; }
  .workflow .workflow-photo img { position: absolute; inset: 0; object-position: 43% center; }
  .workflow .workflow-number { width: 44px; height: 49px; font-size: 27px; }
  .workflow .workflow-caption { right: auto; left: 8px; bottom: 11px; max-width: calc(100% - 16px); font-size: 6px; letter-spacing: .7px; line-height: 1.5; padding: 5px 6px; }
  .workflow .workflow-note { padding: 21px 16px 0; display: flex; flex-direction: column; }
  .workflow .workflow-note::before { left: 0; top: 21px; width: 3px; height: 41px; }
  .workflow h3 { font-size: clamp(19px,4.9vw,27px); margin-bottom: 13px; }
  .workflow .workflow-note p { min-height: 0; font-size: 12px; line-height: 1.75; margin-bottom: 17px; }
  .workflow .workflow-detail { font-size: 6px; letter-spacing: .65px; padding: 11px 0; margin-top: auto; }
  .workflow .workflow-pink { grid-template-columns: .85fr 1fr; }
  .workflow .workflow-pink .workflow-photo { grid-column: 1; grid-row: 1; border-right: 1px solid #151925; border-left: 0; }
  .workflow .workflow-pink .workflow-note { grid-column: 2; grid-row: 1; }
  .workflow .workflow-pink .workflow-note::before { left: 0; right: auto; }
  .workflow .workflow-baseline { font-size: 6px; letter-spacing: .6px; gap: 12px; }
  .workflow .workflow-baseline > span:last-child { display: none; }
  .workflow .workflow-baseline i { width: 8px; height: 8px; }
  .project-invite { padding: 28px 0; }
  .project-invite .project-invite-shell { grid-template-columns: 1fr; }
  .project-invite .project-invite-copy { padding: 28px 25px 30px; }
  .project-invite .project-invite-tag { margin-bottom: 23px; font-size: 8px; letter-spacing: .7px; }
  .project-invite h2 { font-size: clamp(34px,9.8vw,51px); margin-bottom: 20px; }
  .project-invite .project-invite-copy > p { font-size: 12px; margin-bottom: 22px; }
  .project-invite .project-invite-actions { gap: 20px; }
  .project-invite .project-invite-wa { width: 100%; padding: 14px 16px; font-size: 13px; }
  .project-invite .project-invite-phone { padding: 0; }
  .project-invite .project-invite-art { padding: 16px; }
  .project-invite .project-invite-image { min-height: 190px; }
  .project-invite .project-invite-art-top { font-size: 7px; }
  .project-invite .project-invite-art-bottom { grid-template-columns: 1fr auto; }
  .project-invite .project-invite-art-bottom strong { font-size: 25px; }
  .project-invite .project-invite-arrow { font-size: 56px; }
}
@media (prefers-reduced-motion: no-preference) {
  .workflow .workflow-photo img { transition: transform .45s ease; }
  .workflow .workflow-card:hover .workflow-photo img { transform: scale(1.025); }
}