/* Homepage only: an editorial composition inspired by paper and print. */
.sqb-services-art {
  --studio-paper: #f5f2ea;
  --studio-ink: #173f36;
  --studio-muted: #50615a;
  --studio-line: #c9cec3;
  --studio-accent: #c52f4e;
  padding: 64px 6% 88px;
  background: var(--studio-paper);
  color: var(--studio-ink);
  overflow: clip;
  scroll-margin-top: 60px;
}
.sqb-services-art .sqb-services-topline {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding-bottom: 20px; border-bottom: 1px solid var(--studio-line);
  font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
}
.sqb-services-art .sqb-services-topline p { margin: 0; display: flex; align-items: center; gap: 12px; }
.sqb-services-art .sqb-services-topline p::before { content: ""; width: 8px; height: 8px; background: var(--studio-accent); }
.sqb-services-art .sqb-services-topline > span { color: var(--studio-muted); letter-spacing: .06em; }
.sqb-services-art .sqb-services-heading { display: grid; grid-template-columns: 1.55fr 1fr; gap: 6%; align-items: end; padding: 38px 0 50px; }
.sqb-services-art h2 { margin: 0; font-size: clamp(42px, 5vw, 76px); line-height: 1.13; font-weight: 600; letter-spacing: -.055em; text-transform: none; color: var(--studio-ink); }
.sqb-services-art h2 em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.065em; color: #007f70; }
.sqb-services-art h2 > span { color: var(--studio-accent); }
.sqb-services-art .sqb-services-intro { max-width: 345px; justify-self: end; }
.sqb-services-art .sqb-services-intro p { font-size: 17px; line-height: 1.75; margin: 18px 0 5px; color: var(--studio-muted); }
.sqb-services-art .sqb-services-mark { display: block; color: var(--studio-accent); width: 52px; height: 52px; flex: 0 0 52px; }
.sqb-services-art .sqb-services-pieces { display: grid; grid-template-columns: 1.12fr 1fr; gap: clamp(32px, 5.6vw, 90px); align-items: start; }
.sqb-services-art .sqb-service-print { padding-top: 72px; }
.sqb-services-art .sqb-service-artwork { position: relative; padding: 29px 28px 48px; background: #e8e0d3; }
.sqb-services-art .sqb-service-design .sqb-service-photo { transform: rotate(-2deg); box-shadow: 0 9px 20px #173f3614; }
.sqb-services-art .sqb-service-photo { aspect-ratio: 1.55; overflow: hidden; background: #e8e7df; }
.sqb-services-art .sqb-service-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 280ms ease; }
.sqb-services-art .sqb-service-index { position: absolute; z-index: 1; top: -15px; left: 18px; display: grid; place-items: center; width: 44px; height: 44px; background: var(--studio-ink); color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; border-radius: 50%; }
.sqb-services-art .sqb-service-art-label { position: absolute; bottom: 15px; left: 28px; font-size: 12px; letter-spacing: .035em; }
.sqb-services-art .sqb-service-swatches { position: absolute; bottom: 14px; right: 28px; display: flex; transform: rotate(-6deg); }
.sqb-services-art .sqb-service-swatches i { display: block; width: 17px; height: 23px; background: #e9acb7; border: 1px solid #f5f2ea; }
.sqb-services-art .sqb-service-swatches i:nth-child(2) { background: #087e70; }
.sqb-services-art .sqb-service-swatches i:nth-child(3) { background: #c6b58b; }
.sqb-services-art .sqb-service-swatches i:nth-child(4) { background: #173f36; }
.sqb-services-art .sqb-service-print .sqb-service-artwork { background: var(--studio-ink); color: #e8f0e9; padding: 25px 24px 48px; }
.sqb-services-art .sqb-service-print .sqb-service-photo { aspect-ratio: 1600 / 752; }
.sqb-services-art .sqb-service-print .sqb-service-index { background: #f1eee4; color: var(--studio-ink); }
.sqb-services-art .sqb-service-register { position: absolute; right: 27px; bottom: 12px; width: 24px; height: 24px; border: 1px solid #b6c9be; border-radius: 50%; }
.sqb-services-art .sqb-service-register::before, .sqb-services-art .sqb-service-register::after { content: ""; position: absolute; background: #b6c9be; }
.sqb-services-art .sqb-service-register::before { width: 32px; height: 1px; top: 10px; left: -5px; }
.sqb-services-art .sqb-service-register::after { width: 1px; height: 32px; left: 10px; top: -5px; }
.sqb-services-art .sqb-service-copy { padding: 25px 0 0; }
.sqb-services-art h3 { color: var(--studio-ink); font-size: clamp(28px, 2.65vw, 39px); line-height: 1.25; font-weight: 600; letter-spacing: -.035em; text-transform: none; margin: 0 0 15px; }
.sqb-services-art .sqb-service-copy p { max-width: 540px; font-size: 16px; line-height: 1.8; color: var(--studio-muted); margin: 0 0 18px; }
.sqb-services-art .sqb-service-link { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 52px; border-bottom: 1px solid var(--studio-ink); font-size: 13px; font-weight: 650; letter-spacing: .035em; }
.sqb-services-art .sqb-service-link svg { flex: 0 0 24px; transition: transform 220ms ease; }
.sqb-services-art .sqb-service-link:focus-visible { outline: 3px solid var(--studio-accent); outline-offset: 5px; }
@media (hover: hover) {
  .sqb-services-art .sqb-service-piece:hover .sqb-service-photo img { transform: scale(1.035); }
  .sqb-services-art .sqb-service-link:hover { color: #007060; }
  .sqb-services-art .sqb-service-link:hover svg { transform: translate(3px, -3px); }
}
@media (min-width: 1700px) {
  .sqb-services-art { padding-inline: max(6%, calc((100% - 1500px) / 2)); }
}
@media (max-width: 1000px) {
  .sqb-services-art .sqb-services-heading { grid-template-columns: 1.4fr 1fr; gap: 30px; }
  .sqb-services-art .sqb-services-intro p { font-size: 16px; }
  .sqb-services-art .sqb-service-artwork { padding: 23px 20px 48px; }
  .sqb-services-art .sqb-service-art-label { left: 20px; }
  .sqb-services-art .sqb-service-swatches { right: 20px; }
  .sqb-services-art .sqb-service-swatches i { width: 12px; height: 19px; }
}
@media (max-width: 800px) {
  .sqb-services-art { padding: 40px 6% 56px; }
  .sqb-services-art .sqb-services-topline { font-size: 11px; letter-spacing: .08em; }
  .sqb-services-art .sqb-services-topline > span { max-width: 190px; text-align: right; font-size: 10px; }
  .sqb-services-art .sqb-services-heading { grid-template-columns: 1fr; gap: 20px; padding: 29px 0 38px; }
  .sqb-services-art h2 { font-size: clamp(37px, 7.9vw, 58px); line-height: 1.17; }
  .sqb-services-art .sqb-services-intro { display: flex; gap: 20px; align-items: center; justify-self: start; max-width: 520px; }
  .sqb-services-art .sqb-services-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .sqb-services-art .sqb-services-intro p { margin: 0; font-size: 15px; }
  .sqb-services-art .sqb-services-pieces { grid-template-columns: 1fr; gap: 45px; }
  .sqb-services-art .sqb-service-print { padding-top: 0; }
  .sqb-services-art .sqb-service-artwork, .sqb-services-art .sqb-service-print .sqb-service-artwork { padding: 22px 20px 45px; }
  .sqb-services-art .sqb-service-index { top: -12px; width: 38px; height: 38px; font-size: 13px; }
  .sqb-services-art .sqb-service-copy { padding-top: 22px; }
  .sqb-services-art h3 { font-size: 29px; }
  .sqb-services-art .sqb-service-copy p { max-width: none; }
}
@media (max-width: 360px) {
  .sqb-services-art h2 { font-size: 33px; }
  .sqb-services-art .sqb-service-art-label { font-size: 11px; }
  .sqb-services-art .sqb-service-swatches { right: 16px; }
  .sqb-services-art .sqb-service-swatches i { width: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sqb-services-art .sqb-service-photo img, .sqb-services-art .sqb-service-link svg { transition: none; }
  .sqb-services-art .sqb-service-piece:hover .sqb-service-photo img, .sqb-services-art .sqb-service-link:hover svg { transform: none; }
}