/* Services inherits the portfolio's type, gutters and warm paper. */
html { scroll-behavior: smooth; }
.services-section { background: #f8f6f1; color: #151515; padding: 100px 0 40px; overflow: clip; scroll-margin-top: 28px; }
.services-shell { width: calc(100% - 112px); max-width: 1500px; margin-inline: auto; }
.services-intro { width: 39%; position: relative; z-index: 2; }
.services-intro .work-eyebrow { color: #6d6b68; margin-bottom: 18px; letter-spacing: .22em; }
.services-intro h2 { font-size: clamp(58px, 6.5vw, 98px); font-weight: 750; line-height: .96; letter-spacing: -.06em; margin: 0 0 24px; }
.services-intro > p:last-child, .service-copy > p { font-size: 15px; line-height: 1.65; color: #696764; margin: 0; }
.services-intro > p:last-child { max-width: 440px; }
.service-row { position: relative; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 8%; padding: 75px 0; min-height: 530px; }
.service-row::after { content: ''; position: absolute; bottom: 0; left: -8%; width: 116%; height: 1px; background: #b9b6b0; transform: rotate(-5deg); }
.service-row:nth-of-type(3)::after { transform: rotate(3deg); }
.service-row:last-child::after { display: none; }
.service-row--brand { min-height: 350px; padding-top: 44px; padding-bottom: 90px; align-items: start; }
.service-copy { min-width: 0; position: relative; padding-left: 52px; }
.service-number { display: flex; align-items: center; gap: 24px; font-size: 12px; margin-bottom: 17px; margin-left: -52px; }
.service-number > span { width: 28px; height: 1px; background: #96938d; }
.service-copy h3 { margin: 0 0 20px; font-size: clamp(30px, 3.15vw, 48px); line-height: 1.05; letter-spacing: -.055em; font-weight: 750; }
.service-labels { display: flex; flex-wrap: wrap; gap: 5px 16px; list-style: none; margin: 0 0 18px; padding: 0; }
.service-labels li { font-size: 10px; line-height: 1.6; text-transform: uppercase; letter-spacing: .065em; color: #6d6b68; font-weight: 500; }
.service-visual { position: relative; margin: 0; min-width: 0; }
.service-image { --angle: -5deg; overflow: hidden; border-radius: 36px; transform: skewY(var(--angle)); background: #201c17; aspect-ratio: 1.4; }
.service-image > img { display: block; width: 100%; height: 100%; object-fit: cover; transform: skewY(calc(-1 * var(--angle))) scale(1.13); transition: transform .65s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .service-visual:hover .service-image > img { transform: skewY(calc(-1 * var(--angle))) scale(1.17); } }
.service-row:nth-of-type(even) { grid-template-columns: 1.12fr .88fr; }
.service-row:nth-of-type(even) .service-visual { grid-column: 1; grid-row: 1; }
.service-row:nth-of-type(even) .service-copy { grid-column: 2; grid-row: 1; }
.service-row:nth-of-type(3) .service-image, .service-row:nth-of-type(4) .service-image { --angle: 3deg; }
.service-row--brand .service-visual { position: absolute; width: 52%; right: 0; bottom: 100px; }
.service-row--brand .service-image { aspect-ratio: 1.05; margin-left: 12%; }
.service-row--brand .service-image > img { object-position: 57% center; }
.service-stationery { position: absolute; width: 44%; left: 0; bottom: -3%; transform: rotate(11deg); border-radius: 4px; overflow: hidden; box-shadow: 0 15px 25px #0002; }
.service-stationery img { display: block; width: 100%; height: auto; }
.service-cup { position: absolute; width: 37%; height: auto; left: -11%; top: 8%; transform: rotate(-14deg); filter: drop-shadow(0 18px 14px #0002); }
.services-motion [data-service-reveal] { opacity: 0; translate: 0 18px; transition: opacity .7s ease, translate .7s ease; }
.services-motion [data-service-reveal].is-visible { opacity: 1; translate: 0 0; }
.portfolio-footer { background: #f8f6f1; color: #151515; }
.nav-services { display: inline-flex; padding-block: 12px; }
@media (max-width: 1100px) {
  .services-shell { width: calc(100% - 64px); }
  .service-row { gap: 5%; min-height: 450px; padding-block: 64px; }
  .service-copy { padding-left: 28px; }
  .service-number { margin-left: -28px; }
  .service-copy h3 { font-size: 32px; }
  .service-copy > p, .services-intro > p:last-child { font-size: 14px; }
  .service-row--brand .service-visual { bottom: 90px; }
  .service-image { border-radius: 26px; }
  .services-intro { width: 43%; }
}
@media (max-width: 760px) {
  .nav-services { display: inline-flex; font-size: 12px; }
  .navigation { gap: 12px; }
  .navigation .hello-button { padding-inline: 12px; gap: 8px; font-size: 12px; }
  .services-section { padding-top: 70px; }
  .services-shell { width: calc(100% - 44px); }
  .services-intro { width: 100%; margin-bottom: 8px; }
  .services-intro h2 { font-size: clamp(56px, 15vw, 88px); }
  .services-intro > p:last-child { font-size: 15px; max-width: 480px; }
  .service-row, .service-row:nth-of-type(even) { display: flex; flex-direction: column; align-items: stretch; gap: 38px; min-height: 0; padding-block: 55px 64px; }
  .service-copy { padding-left: 0; }
  .service-number { margin-left: 0; }
  .service-copy h3 { font-size: clamp(29px, 7.8vw, 42px); }
  .service-copy > p { font-size: 15px; }
  .service-row--brand .service-visual { position: relative; width: 100%; bottom: auto; margin-block: 8px 22px; }
  .service-row--brand .service-image { margin-left: 14%; aspect-ratio: 1.15; }
  .service-cup { left: 0; }
  .service-image { aspect-ratio: 1.22; border-radius: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .services-motion [data-service-reveal] { opacity: 1; translate: none; transition: none; }
  .service-image > img { transition: none; }
  .service-visual:hover .service-image > img { transform: skewY(calc(-1 * var(--angle))) scale(1.13); }
}