.services-page { background: var(--wine); color: var(--paper); }
.services-page .header { position: fixed; padding-top: 18px; padding-bottom: 18px; background: var(--wine); box-shadow: 0 12px 28px rgba(0,0,0,.16); }
.services-page .header nav a[aria-current="page"] { color: var(--orange); }
.services-page .mobile-nav { position: fixed; top: 67px; }

.services-hero { position: relative; min-height: 100svh; overflow: hidden; padding: 150px 5% 170px; background: var(--wine); }
.services-hero-copy { position: relative; z-index: 3; }
.services-hero h1 { max-width: 760px; color: var(--orange); font-size: clamp(4rem, 8.2vw, 8.2rem); line-height: .8; letter-spacing: -.04em; }
.services-hero-copy p { max-width: 570px; margin-top: 48px; font-size: clamp(1.05rem, 1.65vw, 1.45rem); line-height: 1.55; text-wrap: pretty; }
.services-object { position: absolute; z-index: 2; right: -14vw; bottom: -1vh; width: min(49vw, 700px); transform: rotate(7deg); }
.services-object::before { content: ""; position: absolute; z-index: -1; right: -12%; bottom: -12%; width: 90%; aspect-ratio: 1; border-radius: 50%; background: var(--orange); }
.services-object img { position: relative; width: 100%; filter: drop-shadow(0 38px 40px rgba(24,0,2,.32)); animation: cloche-float 7s ease-in-out infinite; }
.services-hero-foot { position: absolute; z-index: 3; left: 5%; bottom: 34px; display: flex; justify-content: space-between; width: min(430px, 55vw); color: #ead2d3; font-size: .7rem; font-weight: 600; letter-spacing: .08em; }
.services-hero-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7%; padding: 27px 5% 31px; background: var(--orange); color: var(--wine); }
.services-hero-index a { display: flex; gap: 22px; align-items: baseline; font-size: .9rem; font-weight: 600; line-height: 1.3; }
.services-hero-index a:hover { color: #7f2000; }
.services-hero-index span { color: var(--wine); font-family: var(--display); font-size: .72rem; font-weight: 800; }

.services-intro { display: grid; grid-template-columns: 1.35fr .65fr; gap: 12%; padding: 120px 6% 135px; background: var(--paper); color: var(--wine); }
.services-intro p:first-child { max-width: 940px; font-size: clamp(2.7rem, 5.7vw, 6.2rem); font-weight: 700; line-height: .98; letter-spacing: -.035em; }
.services-intro p:last-child { align-self: end; max-width: 390px; font-size: 1rem; line-height: 1.7; }

.services-chapter { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; gap: 9%; min-height: 100svh; padding: 120px 7% 130px; }
.strategy-chapter { background: var(--orange); color: var(--wine); }
.branding-chapter { background: var(--paper); color: var(--wine); }
.campaign-chapter { background: var(--wine-dark); color: var(--paper); }
.chapter-heading { position: sticky; top: 128px; align-self: start; }
.chapter-heading h2 { max-width: 660px; font-size: clamp(3.1rem, 6.2vw, 7rem); line-height: .85; letter-spacing: -.04em; }
.chapter-heading p { max-width: 330px; margin-top: 38px; font-size: 1rem; line-height: 1.55; text-wrap: pretty; }
.chapter-list { align-self: center; margin: 0; padding: 0; list-style: none; }
.chapter-list li { position: relative; padding: 13px 0; font-size: clamp(1.35rem, 2.8vw, 3rem); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; transition: padding .3s cubic-bezier(.2,.8,.2,1), color .25s; }
.chapter-list li::before { content: ""; position: absolute; top: 50%; left: -34px; width: 13px; height: 13px; border-radius: 50%; background: currentColor; opacity: 0; transform: translateY(-50%) scale(.4); transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
.chapter-list li:hover { padding-left: 24px; }
.chapter-list li:hover::before { opacity: 1; transform: translateY(-50%) scale(1); }
.strategy-chapter .chapter-list li:hover { color: #7f2000; }
.branding-chapter .chapter-list li:hover { color: #a13d00; }
.campaign-chapter .chapter-list li:hover { color: var(--orange); }

.services-jump { position: fixed; z-index: 20; right: 18px; top: 50%; display: grid; justify-items: end; gap: 11px; opacity: 0; pointer-events: none; transform: translateY(-50%); transition: opacity .25s; }
.services-page.is-in-services .services-jump { opacity: 1; pointer-events: auto; }
.services-page.is-in-proof .services-jump { opacity: 0; pointer-events: none; }
.services-jump a { color: var(--paper); font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-shadow: 0 2px 10px rgba(31,0,2,.45); transition: color .25s, transform .25s; }
.services-jump a:hover, .services-jump a.is-active { color: var(--orange); transform: translateX(-5px); }
.services-page[data-service-theme="light"] .services-jump a { color: var(--wine); text-shadow: none; }
.services-page[data-service-theme="light"] .services-jump a:hover,
.services-page[data-service-theme="light"] .services-jump a.is-active { color: #a13d00; }

.services-work { overflow: hidden; padding: 110px 0 7px; background: var(--orange); color: var(--wine); }
.services-work-copy { display: flex; align-items: end; justify-content: space-between; gap: 8vw; padding: 0 6% 68px; }
.services-work-copy h2 { font-size: clamp(3.4rem, 7.2vw, 6rem); line-height: .82; letter-spacing: -.04em; }
.services-work-copy > div { max-width: 330px; padding-bottom: 6px; }
.services-work-copy p { font-size: .9rem; line-height: 1.6; }
.services-work-copy a { display: inline-block; margin-top: 24px; padding-bottom: 5px; border-bottom: 2px solid currentColor; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.services-work-grid { display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: repeat(2, minmax(260px, 35vw)); gap: 7px; }
.services-project { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; background: var(--wine); color: var(--paper); }
.services-project-main { grid-row: 1 / 3; }
.services-project-image { display: block; min-height: 0; overflow: hidden; }
.services-project-image img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(1.08); transform: scale(1.005); transition: transform .65s cubic-bezier(.2,.8,.2,1), filter .35s; }
.services-project:hover .services-project-image img,
.services-project:focus-visible .services-project-image img { filter: contrast(1.07) saturate(1.14); transform: scale(1.028); }
.services-project-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 16px 20px 17px; background: var(--wine); }
.services-project-meta strong { font-size: 1rem; }
.services-project-meta > span { color: #e6c9cb; font-size: .72rem; line-height: 1.4; text-align: right; }
.services-project:focus-visible { z-index: 2; outline: 3px solid var(--paper); outline-offset: -5px; }

.has-js .services-page [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.8,.2,1); }
.has-js .services-page [data-reveal].is-visible { opacity: 1; transform: none; }

@keyframes cloche-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-18px) rotate(1.5deg); } }

@media (max-width: 1000px) {
  .services-hero h1 { font-size: 10vw; }
  .services-object { right: -12vw; width: 62vw; }
  .services-intro { gap: 7%; }
  .services-chapter { gap: 6%; padding-left: 6%; padding-right: 6%; }
}

@media (max-width: 700px) {
  .services-page .header { padding-top: 14px; padding-bottom: 14px; }
  .services-page .header .contact-button { display: none; }
  .services-hero { min-height: 780px; padding: 128px 6% 180px; }
  .services-hero h1 { max-width: 100%; font-size: 11vw; line-height: .86; }
  .services-hero-copy p { max-width: 330px; margin-top: 31px; font-size: .95rem; }
  .services-object { top: 430px; right: -35%; bottom: auto; width: 100vw; }
  .services-object::before { right: -16%; bottom: -8%; width: 92%; }
  .services-hero-index { gap: 7px; padding: 20px 6% 23px; }
  .services-hero-index a { display: block; min-width: 0; font-size: .7rem; }
  .services-hero-index span { display: block; margin-bottom: 6px; }
  .services-hero-foot { display: none; }
  .services-intro { grid-template-columns: 1fr; gap: 48px; padding: 78px 6% 88px; }
  .services-intro p:first-child { font-size: 10.8vw; line-height: 1.02; }
  .services-intro p:last-child { max-width: 310px; font-size: .9rem; }
  .services-chapter { grid-template-columns: 1fr; gap: 58px; min-height: 0; padding: 78px 6% 90px; }
  .chapter-heading { position: static; }
  .chapter-heading h2 { font-size: 13vw; }
  .chapter-heading p { margin-top: 25px; font-size: .9rem; }
  .chapter-list li { padding: 10px 0; font-size: 6.3vw; line-height: 1.15; }
  .chapter-list li:hover { padding-left: 0; }
  .chapter-list li::before { display: none; }
  .services-jump { display: none; }
  .services-work { padding-top: 74px; }
  .services-work-copy { display: block; padding: 0 6% 46px; }
  .services-work-copy h2 { font-size: 13.5vw; }
  .services-work-copy > div { max-width: 300px; margin-top: 30px; }
  .services-work-copy a { margin-top: 20px; }
  .services-work-grid { display: flex; gap: 7px; overflow-x: auto; padding: 0 6% 14px; scroll-padding-inline: 6%; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .services-work-grid::-webkit-scrollbar { display: none; }
  .services-project, .services-project-main { flex: 0 0 84vw; grid-template-rows: minmax(0, 1fr) auto; height: 118vw; scroll-snap-align: start; }
  .services-project-meta { align-items: start; padding: 14px 16px 15px; }
  .services-project-meta > span { max-width: 135px; }
}

@media (prefers-reduced-motion: reduce) {
  .services-object img { animation: none; }
  .services-project-image img { transition: none; }
}