.services-index-hero { overflow: hidden; background: var(--black); color: var(--cream); }
.services-index-hero-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(210px,.5fr); align-items: end; gap: 40px; }
.services-index-copy { max-width: 930px; }
.services-index-copy .eyebrow { color: var(--sage); }
.services-index-copy h1 { margin: 0; font-size: clamp(60px, 8.2vw, 124px); }
.services-index-copy h1 span { color: var(--red); }
.services-index-copy > p:last-child { max-width: 600px; margin: 28px 0 0; color: rgba(255,248,227,.72); font-size: clamp(17px,1.6vw,20px); }
.services-index-count { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; padding: 0 0 13px; }
.services-index-count > span { grid-row: span 2; color: var(--red); font-family: var(--font-display); font-size: clamp(82px,12vw,166px); letter-spacing: -.09em; line-height: .75; }
.services-index-count i { width: 100%; height: 1px; background: rgba(255,248,227,.35); }
.services-index-count small { color: rgba(255,248,227,.68); font-family: var(--font-display); font-size: 10px; letter-spacing: .13em; line-height: 1.55; }
.service-directory-section { background: var(--paper); }
.service-directory-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.7fr); align-items: start; gap: 40px; margin-bottom: 36px; }
.service-directory-head .eyebrow { margin: 0; }
.service-directory-head > p { max-width: 460px; margin: 0; color: var(--muted); font-size: 14px; }
.services-index-stories .service-directory-head { margin-bottom: clamp(38px,5vw,74px); }
.services-index-stories .service-directory-head .eyebrow { color: var(--sage); }
.services-index-stories .service-directory-head > p { color: rgba(255,248,227,.68); }
.service-directory { border-top: 1px solid var(--black); }
.service-index-row { position: relative; display: grid; grid-template-columns: 48px 56px minmax(0,1fr) minmax(150px,.44fr) 28px; align-items: center; gap: clamp(12px,2vw,30px); min-height: 112px; padding: 18px 8px; border-bottom: 1px solid var(--line); transition: background-color 180ms ease, padding 180ms ease; }
.service-index-row:hover, .service-index-row:focus-visible { padding-inline: 17px; background: #f3ecd6; }
.service-index-number { align-self: start; padding-top: 7px; color: var(--red); font-family: var(--font-display); font-size: 14px; letter-spacing: .08em; }
.service-index-icon { display: grid; width: 46px; height: 46px; place-items: center; background: var(--soft-paper); }
.service-index-icon img { width: 34px; height: 34px; object-fit: contain; }
.service-index-copy { display: grid; gap: 6px; }
.service-index-copy strong { font-family: var(--font-display); font-size: clamp(21px,2.4vw,33px); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; }
.service-index-copy > span { max-width: 700px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.service-index-scope { justify-self: end; color: var(--muted); font-family: var(--font-display); font-size: 10px; letter-spacing: .09em; text-align: right; }
.service-index-arrow { justify-self: end; color: var(--red); font-size: 21px; transition: transform 180ms ease; }
.service-index-row:hover .service-index-arrow { transform: translate(3px,-3px); }
.service-index-end { background: var(--soft-paper); }
.service-index-end-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.service-index-end-inner p { margin: 0; font-family: var(--font-display); font-size: clamp(28px,4vw,48px); letter-spacing: -.045em; }

.service-detail-hero { overflow: hidden; background: var(--paper); color: var(--black); }
.service-detail-layout { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); align-items: center; gap: clamp(30px,4.2vw,68px); padding-block: clamp(64px,7vw,98px) clamp(38px,4vw,60px); }
.service-detail-copy .eyebrow { color: var(--muted); margin-bottom: 26px; }
.service-detail-copy h1 { display: block; margin: 0; }
.service-title-index { display: block; margin-bottom: 13px; color: var(--red); font-family: var(--font-display); font-size: 15px; letter-spacing: .18em; }
.service-detail-copy h1 span:last-child { display: block; max-width: 720px; font-size: clamp(54px,6.5vw,96px); }
.service-detail-lead { max-width: 590px; margin: 28px 0 25px; color: var(--muted); font-size: clamp(16px,1.5vw,20px); line-height: 1.62; }
.service-index-return { display: inline-flex; gap: 8px; margin: 20px 0 0 18px; color: var(--muted); font-size: 13px; }
.service-index-return span { color: var(--red); }
.service-art-frame { min-width: 0; width: 100%; max-width: 960px; justify-self: end; padding: 0; background: transparent; color: var(--black); }
.service-art-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 0 7px; color: var(--muted); font-family: var(--font-display); font-size: 9px; letter-spacing: .11em; }
.service-art { display: block; width: 100%; height: auto; color: var(--black); overflow: visible; }
.service-art text { fill: #141414; font-family: "Bai Jamjuree", Arial, sans-serif; font-size: 10px; letter-spacing: .06em; }
.service-detail-foot { display: flex; align-items: center; gap: 14px; min-height: 52px; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--font-display); font-size: 10px; letter-spacing: .1em; }
.service-detail-foot i { width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.service-foot-number { margin-left: auto; color: var(--muted); }
.planning-control { display: grid; grid-template-columns: auto minmax(80px,1fr) auto; align-items: center; gap: 12px; padding: 11px 3px 2px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.planning-control label { font-size: 11px; }
.planning-control input { width: 100%; accent-color: var(--red); cursor: pointer; }
.planning-control output { color: var(--black); font-family: var(--font-display); font-size: 10px; letter-spacing: .06em; white-space: nowrap; }
.service-detail-body { background: var(--paper); }
.service-detail-content { display: grid; grid-template-columns: minmax(0,1fr); column-gap: 0; row-gap: 38px; }
.service-detail-intro { max-width: 510px; }
.service-detail-intro .eyebrow { color: var(--muted); }
.service-detail-intro h2 { font-size: clamp(38px,4.5vw,65px); }
.service-detail-intro > p:last-child { margin: 20px 0 0; color: var(--muted); line-height: 1.7; }
.service-step-list { border-top: 1px solid var(--line); }
.service-step { display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,.42fr); align-items: center; gap: clamp(20px,5vw,72px); padding: 28px 0; border-bottom: 1px solid var(--line); }
.service-step-copy { max-width: 740px; }
.service-step-number { display: block; margin-bottom: 9px; color: var(--red); font-family: var(--font-display); font-size: 11px; letter-spacing: .1em; }
.service-step h3 { margin: 0 0 8px; font-size: clamp(24px,2.8vw,38px); }
.service-step p { max-width: 670px; margin: 0; color: var(--muted); line-height: 1.65; }
.service-step-visual { display: flex; align-items: center; width: min(100%,300px); justify-self: end; color: var(--line); }
.service-step-visual span { width: 11px; height: 11px; flex: 0 0 11px; border: 1px solid currentColor; border-radius: 50%; background: var(--paper); }
.service-step-visual i { height: 1px; flex: 1 1 30px; background: currentColor; }
.service-step-visual .is-active { border-color: var(--red); background: var(--red); box-shadow: 0 0 0 5px rgba(226,42,27,.11); }
.service-step.is-visible .service-step-visual i { transform: scaleX(.02); transform-origin: left center; animation: service-step-line 500ms ease-out forwards; }
.service-step.is-visible .service-step-visual span { animation: service-step-node 420ms calc(120ms + var(--node-index, 0) * 120ms) cubic-bezier(.2,.7,.2,1) both; }
.service-scope-note { grid-column: 1; display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 20px; padding: 18px 0 0 18px; border-top: 1px solid var(--red); }
.service-scope-note > span { color: var(--red); font-family: var(--font-display); font-size: 10px; letter-spacing: .12em; }
.service-scope-note p { max-width: 660px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.service-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding-block: 24px; border-top: 1px solid var(--line); }
.service-pagination > a { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.service-pagination > a > span { color: var(--red); font-size: 19px; }
.service-pagination small { font-family: var(--font-display); font-size: 10px; letter-spacing: .06em; }
.service-pagination .service-pagination-all { justify-self: center; font-weight: 500; }
.service-pagination .service-pagination-next { justify-self: end; text-align: right; }

/* Service illustrations continue their motion while in view and pause off screen. */
.service-art--modelling .model-plate { transform-box: fill-box; transform-origin: center; animation: model-layer-cycle 3.4s ease-in-out infinite alternate; }
.service-art--modelling .plate-one { animation-delay: 0ms; }
.service-art--modelling .plate-two { animation-delay: 170ms; }
.service-art--modelling .plate-three { animation-delay: 340ms; }
.service-art--modelling .model-trace { stroke-dasharray: 7 7; animation: trace-cycle 2.8s linear infinite; }
.service-art--coordination .coord-building { transform-box: fill-box; transform-origin: center bottom; animation: building-drift 5.6s ease-in-out infinite alternate; }
.service-art--coordination .discipline-layer { transform-box: fill-box; transform-origin: center; animation: discipline-cycle 3.2s ease-in-out infinite alternate; }
.service-art--coordination .discipline-struct { animation-delay: 350ms; }
.service-art--coordination .discipline-mep { animation-delay: 700ms; }
.service-art--coordination .coord-flow-line { stroke-dasharray: 8 8; animation: trace-cycle 2.6s linear infinite; }
.service-art--coordination .clash-ring { transform-box: fill-box; transform-origin: center; animation: ring-cycle 1.8s ease-in-out infinite; }
.service-art--coordination .clash-ring-two { animation-delay: 450ms; }
.service-art--shop-drawings .drawing-sheet { transform-box: fill-box; transform-origin: left center; animation: sheet-cycle 3.6s ease-in-out infinite alternate; }
.service-art--shop-drawings .dimension-line { stroke-dasharray: 12 9; animation: trace-cycle 3s linear infinite; }
.service-art--shop-drawings .extract-path { stroke-dasharray: 7 7; animation: trace-cycle 2.6s linear infinite; }
.service-art--automation .workflow-line { stroke-dasharray: 12 10; animation: trace-cycle 2.7s linear infinite; }
.service-art--automation .workflow-line-two { animation-delay: 450ms; }
.service-art--automation .workflow-node { transform-box: fill-box; transform-origin: center; animation: node-cycle 2.6s ease-in-out infinite alternate; }
.service-art--automation .node-b { animation-delay: 180ms; }
.service-art--automation .node-c { animation-delay: 360ms; }
.service-art--automation .node-d { animation-delay: 540ms; }
.service-art--planning .planning-model { transform-box: fill-box; transform-origin: center bottom; animation: building-drift 4.4s ease-in-out infinite alternate; }
.service-art--planning .phase-group { opacity: .18; transition: opacity 200ms ease; }
.service-art--planning[data-phase="1"] .phase-1 { opacity: 1; }
.service-art--planning[data-phase="2"] .phase-1, .service-art--planning[data-phase="2"] .phase-2 { opacity: 1; }
.service-art--planning[data-phase="3"] .phase-group { opacity: 1; }
.service-art--planning .timeline-marker { transform-box: fill-box; transform-origin: center; animation: ring-cycle 1.8s ease-in-out infinite; }
.service-art--cost .cost-model { transform-box: fill-box; transform-origin: center bottom; animation: building-drift 5s ease-in-out infinite alternate; }
.service-art--cost .bar-fill { transform-box: fill-box; transform-origin: left center; animation: quantity-cycle 2.5s ease-in-out infinite alternate; }
.service-art--cost .bar-two { animation-delay: 280ms; }
.service-art--cost .bar-three { animation-delay: 560ms; }
.service-art--scan .scan-points { animation: point-cloud-cycle 3.8s ease-in-out infinite alternate; }
.service-art--scan .scan-model { transform-box: fill-box; transform-origin: center; animation: model-outline-cycle 3.5s ease-in-out infinite alternate; }
.service-art--scan .scan-sweep { animation: scan-sweep 2.5s ease-in-out infinite alternate; }
.service-art--assets .asset-leader { stroke-dasharray: 10 8; animation: trace-cycle 2.7s linear infinite; }
.service-art--assets .asset-card { transform-box: fill-box; transform-origin: left center; animation: sheet-cycle 3.5s ease-in-out infinite alternate; }
.service-art--assets .asset-node { transform-box: fill-box; transform-origin: center; animation: ring-cycle 1.8s ease-in-out infinite; }
@keyframes model-layer-cycle { from { opacity: .76; transform: translateY(-5px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes building-drift { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes trace-cycle { to { stroke-dashoffset: -48; } }
@keyframes discipline-cycle { from { opacity: .66; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ring-cycle { 0%,100% { opacity: .55; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes sheet-cycle { from { opacity: .86; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
@keyframes node-cycle { from { opacity: .75; transform: translateY(2px) scale(.98); } to { opacity: 1; transform: translateY(-2px) scale(1.02); } }
@keyframes quantity-cycle { from { transform: scaleX(.7); } to { transform: scaleX(1); } }
@keyframes point-cloud-cycle { from { opacity: .68; } to { opacity: 1; } }
@keyframes model-outline-cycle { from { opacity: .74; } to { opacity: 1; } }
@keyframes scan-sweep { from { transform: translateX(0); } to { transform: translateX(270px); } }
@keyframes service-step-line { to { transform: scaleX(1); } }
@keyframes service-step-node { from { opacity: .35; transform: scale(.65); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 820px) {
  .service-detail-layout { grid-template-columns: 1fr; gap: 42px; }
  .service-detail-copy { max-width: 780px; }
  .service-art-frame { width: 100%; max-width: 900px; justify-self: start; }
}
@media (max-width: 780px) {
  .services-index-hero-inner { grid-template-columns: 1fr auto; gap: 24px; }
  .service-directory-head { grid-template-columns: 1fr; gap: 14px; }
  .service-index-row { grid-template-columns: 36px 48px minmax(0,1fr) 24px; }
  .service-index-scope { display: none; }
  .service-detail-content { grid-template-columns: 1fr; row-gap: 38px; }
  .service-step { grid-template-columns: minmax(0,1fr) minmax(140px,.42fr); }
  .service-scope-note { grid-column: 1; }
}
@media (max-width: 560px) {
  .services-index-hero-inner { grid-template-columns: 1fr; }
  .services-index-copy h1 { font-size: clamp(52px,13vw,76px); }
  .services-index-count { display: none; }
  .service-index-row { grid-template-columns: 28px 42px minmax(0,1fr) 20px; gap: 11px; min-height: 100px; padding: 15px 2px; }
  .service-index-icon { width: 38px; height: 38px; }
  .service-index-icon img { width: 30px; height: 30px; }
  .service-index-copy strong { font-size: 21px; }
  .service-index-copy > span { font-size: 13px; }
  .service-index-end-inner { align-items: flex-start; flex-direction: column; }
  .service-detail-layout { padding-block: 54px 38px; }
  .service-detail-copy .eyebrow { font-size: 11px; }
  .service-detail-copy h1 span:last-child { font-size: clamp(48px,12vw,66px); }
  .service-detail-lead { margin-top: 20px; font-size: 16px; }
  .service-index-return { margin: 17px 0 0 12px; }
  .service-art-frame { padding: 0; }
  .service-art-heading { align-items: flex-start; flex-direction: column; font-size: 8px; }
  .service-art-heading span:last-child { display: none; }
  .service-detail-foot { gap: 8px; font-size: 8px; }
  .service-detail-foot i { width: 4px; height: 4px; }
  .planning-control { grid-template-columns: 1fr auto; }
  .planning-control label { grid-column: 1 / -1; }
  .planning-control input { grid-column: 1; }
  .planning-control output { grid-column: 2; }
  .service-detail-intro h2 { font-size: 39px; }
  .service-step { grid-template-columns: 1fr; gap: 21px; padding-block: 20px; }
  .service-step-visual { width: min(100%,230px); justify-self: start; }
  .service-step p { font-size: 14px; }
  .service-scope-note { grid-template-columns: 1fr; gap: 8px; padding-left: 12px; }
  .service-pagination { grid-template-columns: 1fr 1fr; }
  .service-pagination .service-pagination-all { grid-column: 1 / -1; grid-row: 1; justify-self: start; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .service-pagination .service-pagination-next { grid-column: 2; grid-row: 2; }
  .service-pagination small { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-art *, .service-index-row, .service-index-arrow, .scroll-reveal, .service-step-visual * { animation: none !important; transition: none !important; }
  .has-js .scroll-reveal { opacity: 1; transform: none; }
  .service-art--cost .bar-fill { transform: scaleX(1); }
  .service-art--planning .phase-group { opacity: 1; }
}
.service-art * { animation-play-state: paused !important; }
.service-art.is-in-view * { animation-play-state: running !important; }
@media (prefers-reduced-motion: reduce) {
  .service-art *, .service-art.is-in-view * { animation-play-state: paused !important; }
}