/* Shared USURAL service-detail system.
   Loaded only by /services/* detail pages, after legacy Webflow/page styles. */

:root {
  --service-text: #111111;
  --service-copy: #5e5e5e;
  --service-border: rgba(17, 17, 17, 0.12);
  --service-accent: #002fa7;
  --service-container: 1440px;
  --service-text-measure: 50rem;
  --service-gutter: clamp(1.375rem, 5vw, 5rem);
  --service-section-space: clamp(6.875rem, 9vw, 9.375rem);
}

.usural-service-detail-page,
.usural-legacy-service-page {
  background: var(--surface-light) !important;
}

/* The important declarations below are limited to properties already marked
   important by the legacy Webflow override layer. */
.usural-service-detail-page .service-detail-hero,
.usural-legacy-service-page .service-detail-hero {
  align-items: center;
  background: var(--surface-light) !important;
  border-bottom: 1px solid var(--service-border);
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  min-height: 0 !important;
  overflow: visible;
  padding: clamp(4.375rem, 6vw, 6.25rem) var(--service-gutter) clamp(5.625rem, 8vw, 8.125rem) !important;
}

.service-detail-hero::before {
  height: clamp(4rem, 8vw, 7rem);
  top: clamp(4.375rem, 6vw, 6.25rem);
}

.service-detail-hero .usural-page-hero-copy {
  align-self: center;
  max-width: none;
  min-width: 0;
}

.service-detail-hero h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(3.75rem, 4.5vw, 5.5rem) !important;
  font-weight: 700 !important;
  height: auto !important;
  letter-spacing: -0.055em !important;
  line-height: 0.92 !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  text-wrap: balance;
}

.service-detail-hero .usural-page-hero-copy > p:not(.usural-eyebrow) {
  border-left: 2px solid var(--service-accent);
  font-family: var(--font-body) !important;
  font-size: var(--type-ibm-body) !important;
  line-height: var(--line-ibm-body) !important;
  margin-top: clamp(1.75rem, 3vw, 2.5rem) !important;
  max-width: 40rem;
  padding-left: clamp(1rem, 2vw, 1.5rem);
}

.service-detail-hero .usural-page-hero-media {
  align-self: center;
  aspect-ratio: 16 / 10;
  box-shadow: none;
  clip-path: none;
  min-height: 0 !important;
  width: 100%;
}

.service-detail-hero .usural-page-hero-media::after {
  background: linear-gradient(180deg, rgba(17, 17, 17, 0.02), rgba(17, 17, 17, 0.16));
}

.service-detail-hero .usural-page-hero-media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Information cards */
.usural-service-detail-page .service-info-grid,
.usural-legacy-service-page .service-info-grid {
  background: var(--surface-light) !important;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: var(--service-section-space) var(--service-gutter) !important;
}

.service-info-grid .service-info-card {
  background: var(--surface-light) !important;
  border: 1px solid var(--service-border);
  box-shadow: none !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(2.2em, auto) 1fr;
  min-height: 0 !important;
  padding: clamp(2rem, 3vw, 2.625rem) !important;
  transform: none !important;
}

.service-info-card::after {
  display: none;
}

.service-info-card__title {
  align-self: start;
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 3.3vw, 3.75rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.048em !important;
  line-height: 0.98 !important;
  margin: 0 0 clamp(1.375rem, 2vw, 1.875rem) !important;
  min-block-size: 2em;
  min-width: 0;
  text-transform: uppercase;
}

.service-info-card__copy {
  align-self: start;
  color: var(--service-copy) !important;
  font-family: var(--font-body) !important;
  font-size: var(--type-ibm-card) !important;
  line-height: var(--line-ibm-card) !important;
  margin: 0 !important;
  max-width: 34rem;
}

/* Long-form editorial content */
.service-editorial-section {
  background: var(--surface-light) !important;
  display: block !important;
  margin: 0 !important;
  padding: var(--service-section-space) var(--service-gutter) !important;
  text-align: left !important;
}

.service-editorial-section > * {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: var(--service-text-measure) !important;
  text-align: left !important;
}

.service-editorial-section > .heading-style-h2,
.service-editorial-section > h4 {
  color: var(--service-text) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(3rem, 5.5vw, 5.75rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.052em !important;
  line-height: 0.95 !important;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem) !important;
  opacity: 1 !important;
  padding: 0 !important;
  text-transform: uppercase;
}

.service-editorial-section .text-block-8 {
  color: var(--service-copy) !important;
  font-family: var(--font-body) !important;
  font-size: var(--type-ibm-body) !important;
  line-height: var(--line-ibm-body) !important;
  margin-bottom: clamp(5rem, 8vw, 7.5rem) !important;
}

.service-editorial-section h1,
.service-editorial-section .heading-22,
.service-editorial-section .heading-23 {
  color: var(--service-text) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(2.25rem, 4vw, 4.25rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.98 !important;
  margin: 0 0 clamp(1.5rem, 2.5vw, 2.25rem) !important;
  padding: 0 !important;
  text-align: left !important;
  text-transform: uppercase;
}

.service-editorial-section .paragraph-55,
.service-editorial-section .paragraph-56,
.service-editorial-section p {
  color: var(--service-copy) !important;
  font-family: var(--font-body) !important;
  font-size: var(--type-ibm-body) !important;
  line-height: var(--line-ibm-body) !important;
  margin: 0 0 clamp(5rem, 8vw, 7.5rem) !important;
  max-width: var(--service-text-measure) !important;
  padding: 0 !important;
  text-align: left !important;
}

.service-editorial-section > :last-child,
.service-editorial-section > div > :last-child {
  margin-bottom: 0 !important;
}

/* Process */
.usural-service-detail-page .service-process,
.usural-legacy-service-page .service-process {
  background: var(--surface-light) !important;
  margin: 0 !important;
  padding: var(--service-section-space) var(--service-gutter) !important;
}

.service-process .container-12,
.service-process #services-section {
  margin: 0 auto !important;
  max-width: var(--service-container) !important;
  width: 100% !important;
}

.service-process #services-section {
  align-items: start;
  display: grid !important;
  gap: clamp(4.5rem, 7vw, 7rem) !important;
  grid-template-columns: minmax(15rem, 30fr) minmax(0, 70fr) !important;
}

.service-process .heading-18 {
  color: var(--service-text) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(3.5rem, 6.5vw, 7rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.9 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: sticky;
  text-align: left !important;
  text-transform: uppercase;
  top: calc(var(--usural-nav-height) + 2rem);
}

.service-process .services-list {
  margin: 0 !important;
  min-width: 0;
}

.service-process .single-service-grid {
  align-items: start;
  border-top: 1px solid var(--service-border);
  display: grid !important;
  gap: clamp(1.5rem, 3vw, 3rem) !important;
  grid-template-columns: 3.5rem minmax(0, 1fr) !important;
  padding: clamp(3rem, 5vw, 4.5rem) 0 !important;
}

.service-process .services-list > .separator-line {
  display: none;
}

.service-process .number-2 {
  color: var(--service-accent) !important;
  margin: 0 !important;
  padding-top: 0.25rem;
}

.service-process .accordion-item-wrapper {
  display: block !important;
  min-width: 0;
}

.service-process .heading-10 {
  color: var(--service-text) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(1.75rem, 3vw, 3.25rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  margin: 0 0 clamp(1.25rem, 2vw, 1.75rem) !important;
  text-align: left !important;
}

.service-process .accordion-trigger,
.service-process .open-close-box {
  display: none !important;
}

.service-process .accordion-content,
.service-process .accordion-content.first {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: static !important;
  visibility: visible !important;
}

.service-process .accordion-grid-wrapper {
  align-items: start;
  display: grid !important;
  gap: clamp(2rem, 4vw, 4rem) !important;
  grid-template-columns: minmax(0, 58fr) minmax(14rem, 42fr) !important;
}

.service-process .accordion-content-text {
  color: var(--service-copy) !important;
  font-family: var(--font-body) !important;
  font-size: var(--type-ibm-body) !important;
  line-height: var(--line-ibm-body) !important;
  margin: 0 0 clamp(1.5rem, 2.5vw, 2rem) !important;
  padding: 0 !important;
}

.service-process .service-bullet-point {
  align-items: start;
  display: grid !important;
  gap: 0.875rem !important;
  grid-template-columns: 0.5rem minmax(0, 1fr) !important;
  margin: 0 0 1rem !important;
}

.service-process .bullet-indicator {
  background: var(--service-accent) !important;
  border-radius: 50%;
  height: 0.4rem !important;
  margin-top: 0.55rem;
  position: static !important;
  width: 0.4rem !important;
}

.service-process .service-bullet-point p {
  color: var(--service-copy) !important;
  font-family: var(--font-body) !important;
  font-size: var(--type-ibm-card) !important;
  line-height: var(--line-ibm-card) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.service-process .animated-grid-image {
  aspect-ratio: 4 / 3;
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Projects preview */
.usural-service-detail-page .service-projects-preview,
.usural-legacy-service-page .service-projects-preview,
.service-projects-preview *,
.service-projects-preview .container-17,
.service-projects-preview .hero-stack-2 {
  background-color: var(--surface-light) !important;
  background-image: none !important;
}

.service-projects-preview {
  margin: 0 !important;
  padding: var(--service-section-space) var(--service-gutter) !important;
}

.service-projects-preview .container-17,
.service-projects-preview .hero-stack-2,
.service-projects-preview .hero-wrapper-two-2 {
  margin: 0 auto !important;
  max-width: 70rem !important;
  padding: 0 !important;
  width: 100% !important;
}

.service-projects-preview .hero-wrapper-two-2 {
  align-items: flex-start !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

.service-projects-preview .heading-21 {
  color: var(--service-text) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(3.5rem, 7vw, 7.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.9 !important;
  margin: 0 0 clamp(4rem, 7vw, 6rem) !important;
  opacity: 1 !important;
  text-transform: uppercase;
}

.service-projects-preview .hero-image-2 {
  aspect-ratio: 16 / 10;
  box-shadow: none !important;
  height: auto !important;
  margin: 0 !important;
  max-width: 70rem !important;
  object-fit: cover !important;
  opacity: 1 !important;
  width: 100% !important;
}

.service-projects-preview .margin-bottom-24px-2 {
  color: var(--service-copy) !important;
  font-family: var(--font-body) !important;
  font-size: var(--type-ibm-body) !important;
  line-height: var(--line-ibm-body) !important;
  margin: 2rem 0 0 !important;
  max-width: 48rem;
  text-align: left !important;
}

.service-projects-preview .btn-primary {
  margin-top: 2rem !important;
}

/* Final service statement */
.service-final-statement {
  background: var(--surface-light) !important;
  padding: clamp(6.25rem, 8vw, 8.75rem) var(--service-gutter) clamp(6.875rem, 9vw, 9.375rem) !important;
}

.service-final-statement > div {
  margin: 0 auto;
  max-width: 56.25rem;
}

.service-final-statement .heading-24 {
  color: var(--service-text) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(3rem, 5.5vw, 6rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.052em !important;
  line-height: 0.94 !important;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem) !important;
  text-align: left !important;
  text-transform: uppercase;
}

.service-final-statement .paragraph-57 {
  color: var(--service-copy) !important;
  font-family: var(--font-body) !important;
  font-size: var(--type-ibm-body) !important;
  line-height: var(--line-ibm-body) !important;
  margin: 0 !important;
  max-width: 56.25rem;
  padding: 0 !important;
  text-align: left !important;
}

@media screen and (max-width: 1100px) {
  .usural-service-detail-page .service-detail-hero,
  .usural-legacy-service-page .service-detail-hero {
    gap: 3rem;
    grid-template-columns: 1fr;
    padding-bottom: clamp(5rem, 10vw, 6.5rem) !important;
    padding-top: clamp(3.75rem, 8vw, 5rem) !important;
  }

  .service-detail-hero h1 {
    font-size: clamp(3.5rem, 8vw, 4.75rem) !important;
    max-width: 13ch !important;
  }

  .service-detail-hero .usural-page-hero-media {
    aspect-ratio: 16 / 10;
  }

  .service-process #services-section {
    gap: 4rem !important;
    grid-template-columns: 1fr !important;
  }

  .service-process .heading-18 {
    position: static;
  }

  .usural-service-detail-page .service-info-grid,
  .usural-legacy-service-page .service-info-grid {
    grid-template-columns: 1fr;
  }

  .service-info-grid .service-info-card {
    grid-template-rows: auto auto;
  }

  .service-info-card__title {
    min-block-size: 0;
  }

  .service-process .accordion-grid-wrapper {
    grid-template-columns: minmax(0, 3fr) minmax(13rem, 2fr) !important;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --service-section-space: clamp(5rem, 18vw, 6.25rem);
  }

  .service-detail-hero h1 {
    font-size: clamp(2.625rem, 12.5vw, 3.5rem) !important;
    line-height: 0.94 !important;
    max-width: none !important;
    text-wrap: pretty;
  }

  .usural-service-detail-page .service-info-grid,
  .usural-legacy-service-page .service-info-grid {
    grid-template-columns: 1fr;
  }

  .service-info-grid .service-info-card {
    grid-template-rows: auto auto;
  }

  .service-info-card__title {
    margin-bottom: 1.25rem !important;
    min-block-size: 0;
  }

  .service-process .single-service-grid {
    gap: 1.25rem !important;
    grid-template-columns: 1fr !important;
  }

  .service-process .accordion-grid-wrapper {
    gap: 2rem !important;
    grid-template-columns: 1fr !important;
  }

  .service-process .animated-grid-image {
    margin-top: 0.5rem;
  }

  .service-projects-preview .heading-21 {
    margin-bottom: 3rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-detail-hero *,
  .service-info-grid *,
  .service-editorial-section *,
  .service-process *,
  .service-projects-preview *,
  .service-final-statement * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}