.services-page { background: #f0f0e9; color: #161b18; }
.services-page .site-header { color: #e0eeee; background: #000; box-shadow: none; }
.services-page .site-header::after { display: none; }
.services-page .site-menu { color: #e0eeee; }
.services-intro { padding: clamp(64px,9vw,130px) var(--edge) 75px; }
.service-eyebrow, .service-back { font-size: 11px; letter-spacing: .04em; }
.services-intro h1 { font: 500 clamp(48px,7.3vw,112px)/1.03 var(--body); letter-spacing: -.065em; margin: 32px 0; }
.services-intro > p { font-size: clamp(16px,1.5vw,22px); line-height: 1.65; color: #616a63; margin-bottom: 0; }
.services-directory { padding: 0 var(--edge) 100px; }
.services-directory-row { display: grid; grid-template-columns: 1.15fr 1fr 30px; gap: 30px; align-items: center; padding: 28px 0; border-top: 1px solid #1a281e30; }
.services-directory-row h2 { margin: 0; font: 500 clamp(21px,2.3vw,35px)/1.25 var(--body); letter-spacing: -.04em; }
.services-directory-row p { color: #646e66; font-size: 14px; margin: 0; }
.services-directory-row > span { font-size: 27px; transition: transform .25s; }
.services-directory-row:hover > span { transform: translate(3px,-3px); color: #d45221; }
.services-directory-row:hover h2 { color: #c34c20; }
.service-intro { padding: clamp(45px,6vw,90px) var(--edge); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,6vw,90px); align-items: center; }
.service-back { color: #68716b; display: inline-block; margin-bottom: 30px; }
.service-intro h1 { font: 500 clamp(38px,5.5vw,84px)/1.05 var(--body); letter-spacing: -.06em; max-width: 750px; margin: 0 0 30px; }
.service-statement { font-size: clamp(18px,2vw,27px); line-height: 1.4; margin: 0 0 20px; letter-spacing: -.03em; }
.service-description { font-size: 15px; line-height: 1.85; color: #606a63; max-width: 590px; margin: 0; }
.service-intro figure { margin: 0; overflow: hidden; aspect-ratio: 4/4.5; }
.service-intro figure img { width: 100%; height: 100%; object-fit: cover; }
.service-scope { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; padding: 35px var(--edge) 100px; }
.service-scope h2 { font-size: 13px; font-weight: 500; margin: 15px 0; }
.service-scope ul { list-style: none; padding: 0; margin: 0; }
.service-scope li { display: flex; align-items: center; gap: 30px; font-size: clamp(18px,2vw,28px); letter-spacing: -.03em; padding: 19px 0; border-bottom: 1px solid #1a281e25; }
.service-scope li span { font-size: 10px; color: #ae4c29; letter-spacing: 0; }
.service-projects { padding: 60px var(--edge) 85px; background: #e6e8df; }
.service-section-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.service-section-top h2 { font: 500 clamp(25px,3vw,45px)/1.2 var(--body); letter-spacing: -.05em; margin: 0; }
.service-section-top > a { font-size: 12px; white-space: nowrap; }
.service-project-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.service-project { min-width: 0; }
.service-project > img, .service-project-placeholder { width: 100%; aspect-ratio: 1.35; object-fit: cover; }
.service-project-placeholder { background: #21362a; color: #e0eeee; display: grid; place-items: center; padding: 25px; }
.service-project-title { display: flex; justify-content: space-between; gap: 12px; margin-top: 13px; font-size: 12px; }
.service-project:hover .service-project-title { color: #b74b23; }
.service-contact { padding: clamp(55px,8vw,110px) var(--edge); display: flex; justify-content: space-between; align-items: end; gap: 30px; background: #172a20; color: #f0f0e9; }
.service-contact h2 { font: 400 clamp(40px,6vw,84px)/1.05 var(--body); letter-spacing: -.06em; margin: 0; }
.service-contact > a { border: 1px solid #f0f0e980; border-radius: 40px; padding: 16px 25px; display: flex; gap: 50px; white-space: nowrap; font-size: 14px; }
.service-contact > a:hover { background: #f0f0e9; color: #172a20; }
.service-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px 25px; padding: 26px var(--edge); color: #657167; font-size: 11px; }
@media(max-width:760px) { .service-intro { grid-template-columns: 1fr; } .service-intro figure { aspect-ratio: 16/10; } .service-scope { grid-template-columns: 1fr; gap: 5px; padding-bottom: 55px; } .services-directory-row { grid-template-columns: 1fr 25px; gap: 8px 20px; } .services-directory-row p { grid-column: 1; grid-row: 2; } .services-directory-row > span { grid-column: 2; grid-row: 1/3; } .service-project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 12px; } .service-project:last-child:nth-child(odd) { grid-column: 1/-1; } .service-project:last-child:nth-child(odd) > img { aspect-ratio: 16/9; } .service-contact { align-items: start; flex-direction: column; } .service-section-top { align-items: end; } }
@media(prefers-reduced-motion:reduce) { .services-directory-row > span { transition: none; } }