/* Service mosaic from the supplied second-section reference. */
.services { background: radial-gradient(ellipse at 72% 0,#faf8f4 0,transparent 65%),#f1eee8; padding-block: 4.5rem; }
.services .section-heading { margin-bottom: 2rem; align-items: center; }
.services .section-heading>p { font-size: .875rem; line-height: 1.6; max-width: 24rem; }
.service-cards.services-mosaic { display: grid; grid-template-columns: 1.4fr 1.82fr 1fr; grid-template-rows: repeat(2,minmax(0,1fr)); grid-template-areas: 'design build consult' 'design ai consult'; gap: 1rem; margin: 0; min-height: 36rem; }
.services-mosaic .service-card { height: auto; min-height: 0; padding: 1.5rem; border-radius: .625rem; overflow: clip; }
.service-design { grid-area: design; }
.service-build { grid-area: build; }
.service-ai { grid-area: ai; }
.service-consult { grid-area: consult; }
.services-mosaic .service-card.dark { background: linear-gradient(135deg,#101515,#040808); }
.services-mosaic .service-card.pale { background: linear-gradient(120deg,#e7e4de,#ece9e3); }
.service-index { display: block; color: #8d948c; font-size: .75rem; line-height: 1.4; margin-bottom: 1.25rem; }
.services-mosaic .pale .service-index { color: #74786f; }
.services-mosaic .service-card h3 { font-size: 1.25rem; line-height: 1.2; letter-spacing: -.035em; margin: 0; }
.services-mosaic .service-card>p { font-size: .9375rem; line-height: 1.6; margin-top: 1rem; color: #b1b8ad; }
.services-mosaic .service-card.pale>p { color: #5b6155; }
.services-mosaic .service-design h3 { font-size: 1.375rem; }
.services-mosaic .service-design>p { max-width: 30ch; }
.service-caption { position: absolute; left: 1.5rem; right: 1rem; bottom: 1.25rem; z-index: 2; font-size: .75rem; line-height: 1.5; color: #9ca595; }
.pale .service-caption { color: #6a7162; }
.services-mosaic .service-design .round { top: 1.5rem; right: 1.5rem; left: auto; bottom: auto; background: transparent; color: #c0c8b9; border: 1px solid #727b6c; width: 2.5rem; height: 2.5rem; }
.services-mosaic .round svg { width: 1.125rem; height: 1.125rem; }
.services-mosaic .service-site { position: absolute; right: -2rem; bottom: 3.75rem; width: 92%; height: 16rem; padding: 1rem; transform: rotate(-8deg); border-color: #646c5a80; background: #080e0c; }
.services-mosaic .mini-nav { font-size: .5rem; color: #aaaead; }
.services-mosaic .service-site>b { font-size: 1.75rem; line-height: 1.04; letter-spacing: -.05em; max-width: 60%; margin: 2rem 0 1rem; color: #f1f2eb; }
.services-mosaic .mini-images { position: absolute; left: 55%; right: .75rem; top: 2.25rem; bottom: 1rem; display: grid; grid-template-columns: 1fr; grid-template-rows: 2fr 1fr 1fr; gap: .375rem; }
.services-mosaic .mini-images i { height: auto; width: auto; background-size: cover; background-position: center; border-radius: .2rem; }
.services-mosaic .mini-images i:first-child { background-image: url('assets/portfolio-room.jpg'); }
.services-mosaic .mini-images i:nth-child(2) { background-image: url('assets/office.jpg'); }
.services-mosaic .mini-images i:nth-child(3) { background-image: url('assets/foundry-construction.jpg'); }
.services-mosaic .service-build h3,.services-mosaic .service-build>p { width: 56%; }
.services-mosaic .service-code { right: -1.5rem; bottom: -2rem; width: 42%; height: 15rem; padding: 1rem; transform: rotate(-8deg); }
.services-mosaic .service-code>span { font-size: .5rem; }
.services-mosaic .service-code code { font-size: .625rem; padding-top: 1.25rem; line-height: 1.8; }
.services-mosaic .service-build .service-index { margin-bottom: 1rem; }
.service-card-hit { position: absolute; inset: 0; border: 0; background: none; padding: 0; z-index: 5; border-radius: inherit; }
.service-card-hit:focus-visible { outline-offset: -5px; }
.services-mosaic .service-ai h3,.services-mosaic .service-ai>p { width: 65%; }
.services-mosaic .service-ai .service-index { margin-bottom: 1.25rem; }
.services-mosaic .service-chat { left: auto; right: 1.5rem; bottom: -3rem; width: 35%; height: 16rem; padding: 1rem; transform: rotate(-7deg); font-size: .5rem; background: linear-gradient(135deg,#263029,#121a16); }
.services-mosaic .service-chat small { font-size: .4375rem; margin: .25rem 0 0; }
.services-mosaic .service-chat p { font-size: .5rem; line-height: 1.4; padding: 1.25rem 0; }
.services-mosaic .service-chat>span { font-size: .4375rem; padding: .75rem .375rem; margin-top: .5rem; }
.services-mosaic .service-ai .round { left: auto; right: 1.25rem; bottom: 1.25rem; border: 1px solid #8c9b7f; color: #d7e1ce; background: #14211799; width: 2.5rem; height: 2.5rem; }
.service-orb { position: absolute; bottom: 3.75rem; left: 55%; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: radial-gradient(circle,#e5ffff 12%,#8ac0eb 32%,#4a62ad 45%,#403d8050 65%,transparent 75%); box-shadow: 0 0 20px #7db8ff25; }
.services-mosaic .service-consult h3 { font-size: 1.125rem; }
.services-mosaic .service-consult>p { font-size: .875rem; line-height: 1.6; }
.services-mosaic .service-consult .round { left: auto; right: 1.25rem; top: 1.5rem; bottom: auto; border-color: #b6baad; color: #949d87; opacity: .65; background: transparent; }
.consult-list { position: relative; z-index: 2; display: grid; gap: .875rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.consult-list li { display: flex; gap: .75rem; align-items: center; color: #4c5743; font-size: .8125rem; line-height: 1.4; }
.consult-list svg { width: 1.125rem; height: 1.125rem; color: #7a846d; }
.services-mosaic .service-paper { width: 94%; right: -1rem; bottom: -3rem; height: 14rem; padding: 2rem 1.25rem; font-family: Manrope,Arial,sans-serif; font-style: normal; font-size: 1.5rem; line-height: 1.3; color: #7a7c72; transform: rotate(-9deg); }
@media(max-width:1199.98px) { .service-cards.services-mosaic { min-height: 38rem; } .services-mosaic .service-card { padding: 1.25rem; } .services-mosaic .service-card h3 { font-size: 1.125rem; } .services-mosaic .service-card>p { font-size: .875rem; } .services-mosaic .service-site { height: 14rem; } .services-mosaic .service-site>b { font-size: 1.5rem; } .services-mosaic .service-code { padding: .75rem; } .services-mosaic .service-code code { font-size: .5rem; } .services-mosaic .service-chat { padding: .75rem; right: .75rem; } .services-mosaic .service-ai h3,.services-mosaic .service-ai>p { width: 62%; } .services-mosaic .service-consult>p br { display: none; } .consult-list li { font-size: .75rem; gap: .5rem; } .services-mosaic .service-paper { font-size: 1.25rem; } }
@media(max-width:991.98px) { .service-cards.services-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(34rem,auto) minmax(18rem,auto) minmax(18rem,auto); grid-template-areas: 'design consult' 'build build' 'ai ai'; min-height: 0; } .services-mosaic .service-card { padding: 1.5rem; } .services-mosaic .service-card h3 { font-size: 1.375rem; } .services-mosaic .service-card>p { font-size: 1rem; } .services-mosaic .service-site { height: 15rem; } .services-mosaic .service-code { width: 38%; height: 16rem; } .services-mosaic .service-code code { font-size: .625rem; } .services-mosaic .service-chat { right: 2rem; width: 32%; } .consult-list li { font-size: .875rem; } .services-mosaic .service-paper { height: 13rem; font-size: 1.5rem; } }
@media(max-width:575.98px) { .services { padding-block: 3.5rem; } .service-cards.services-mosaic { grid-template-columns: 1fr; grid-template-rows: minmax(32rem,auto) minmax(20rem,auto) minmax(20rem,auto) minmax(34rem,auto); grid-template-areas: 'design' 'build' 'ai' 'consult'; gap: 1rem; } .services .section-heading { margin-bottom: 1.75rem; } .services .section-heading>p br { display: none; } .services-mosaic .service-site { height: 15rem; width: 94%; } .services-mosaic .service-build h3,.services-mosaic .service-build>p { width: 56%; } .services-mosaic .service-code { width: 40%; right: -1.25rem; padding: .75rem; } .services-mosaic .service-code code { font-size: .5rem; } .services-mosaic .service-ai h3,.services-mosaic .service-ai>p { width: 63%; } .services-mosaic .service-ai h3 { font-size: 1.125rem; } .services-mosaic .service-chat { width: 35%; right: .5rem; } .services-mosaic .service-paper { bottom: -3rem; height: 15rem; width: 92%; padding-top: 2.5rem; } .consult-list { gap: 1rem; } .service-caption { font-size: .75rem; } }
.services-mosaic .pale .service-index { color: #62685b; }
.services-mosaic .pale .service-caption { color: #555e4d; }
.services-mosaic .service-consult .round { opacity: 1; color: #70766b; }
@media(max-width:575.98px) { .services-mosaic .service-paper { bottom: -4rem; height: 14rem; } }