/* Scoped single Service design, based on the Sertechs page palette and spacing. */
#sertechs-service {
  --ss-orange: #ff6a00;
  --ss-ink: #111;
  --ss-muted: #6d6762;
  --ss-cream: #f2eae4;
  --ss-white: #fffdf9;
  --ss-line: rgba(17,17,17,.12);
  overflow: hidden;
  background: var(--ss-cream);
  color: var(--ss-ink);
  font: 16px/1.6 Inter, sans-serif;
}
#sertechs-service *,#sertechs-service *::before,#sertechs-service *::after { box-sizing: border-box; }
#sertechs-service h1,#sertechs-service h2,#sertechs-service h3,#sertechs-service p { margin: 0; }
#sertechs-service a { text-decoration: none; }
#sertechs-service img { display: block; max-width: 100%; }
#sertechs-service .sertechs-service__wrap { width: min(1280px, calc(100% - 64px)); margin: 0 auto; }
#sertechs-service .sertechs-service__hero { padding: 42px 0 48px; }
#sertechs-service .sertechs-service__hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 610px; overflow: hidden; border: 1px solid var(--ss-line); border-radius: 34px; background: var(--ss-white); box-shadow: 0 30px 80px rgba(17,17,17,.07); }
#sertechs-service .sertechs-service__hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(32px,5vw,80px); }
#sertechs-service .sertechs-service__eyebrow { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 24px; font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
#sertechs-service .sertechs-service__eyebrow::before { display: block; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--ss-orange); box-shadow: 0 0 0 5px rgba(255,106,0,.12); content: ''; }
#sertechs-service h1 { max-width: 750px; font-size: clamp(48px,5.5vw,84px); font-weight: 800; line-height: .98; letter-spacing: -.06em; }
#sertechs-service .sertechs-service__lead { max-width: 620px; margin-top: 28px; color: var(--ss-muted); font-size: clamp(17px,1.55vw,20px); line-height: 1.7; }
#sertechs-service .sertechs-service__button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 60px; margin-top: 34px; padding: 8px 9px 8px 26px; border: 1px solid var(--ss-orange); border-radius: 999px; background: var(--ss-orange); color: #fff; font-size: 14px; font-weight: 800; transition: transform .25s, background .25s; }
#sertechs-service .sertechs-service__button b { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: #fff; color: var(--ss-ink); font-size: 20px; font-weight: 500; }
#sertechs-service .sertechs-service__button:hover { transform: translateY(-3px); background: #d95300; color: #fff; }
#sertechs-service .sertechs-service__hero-image,#sertechs-service .sertechs-service__hero-art { min-height: 610px; background: #151515; }
#sertechs-service .sertechs-service__hero-image img { width: 100%; height: 100%; object-fit: cover; }
#sertechs-service .sertechs-service__hero-art { position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 62% 46%, #6a2e09 0, transparent 42%),#151515; }
#sertechs-service .sertechs-service__hero-art span { z-index: 1; display: grid; width: 168px; height: 168px; place-items: center; border: 2px solid rgba(255,255,255,.5); border-radius: 50%; background: var(--ss-orange); box-shadow: 0 0 90px rgba(255,106,0,.32); color: #fff; font-size: 92px; font-weight: 800; }
#sertechs-service .sertechs-service__hero-art i { position: absolute; width: 350px; height: 350px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
#sertechs-service .sertechs-service__hero-art i:nth-of-type(2) { width: 520px; height: 520px; }
#sertechs-service .sertechs-service__hero-art i:nth-of-type(3) { width: 700px; height: 700px; }
#sertechs-service .sertechs-service__section { padding: clamp(64px,6vw,96px) 0; }
#sertechs-service .sertechs-service__section:nth-of-type(2n) { background: #fbf8f4; }
#sertechs-service .sertechs-service__section h2 { max-width: 850px; margin-bottom: 36px; font-size: clamp(40px,5vw,72px); font-weight: 700; line-height: 1.03; letter-spacing: -.055em; }
#sertechs-service .sertechs-service__split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: clamp(36px,7vw,110px); }
#sertechs-service .sertechs-service__split h2 { margin-bottom: 0; }
#sertechs-service .sertechs-service__prose { color: #46413d; font-size: 18px; line-height: 1.8; }
#sertechs-service .sertechs-service__prose > * + * { margin-top: 18px; }
#sertechs-service .sertechs-service__cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
#sertechs-service .sertechs-service__card { display: flex; flex-direction: column; align-items: flex-start; min-height: 190px; padding: 30px; border: 1px solid #e8e0d8; border-radius: 24px; background: var(--ss-white); box-shadow: 0 16px 50px rgba(46,32,20,.055); color: var(--ss-ink); }
#sertechs-service .sertechs-service__card-mark { display: grid; min-width: 44px; height: 44px; padding: 0 8px; place-items: center; margin-bottom: 30px; border-radius: 12px; background: #fff0e6; color: var(--ss-orange); font-size: 19px; font-weight: 800; }
#sertechs-service .sertechs-service__card h3 { margin-bottom: 12px; font-size: clamp(23px,2vw,31px); line-height: 1.15; letter-spacing: -.04em; }
#sertechs-service .sertechs-service__card p { color: var(--ss-muted); line-height: 1.7; }
#sertechs-service .sertechs-service__section--process .sertechs-service__cards { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
#sertechs-service .sertechs-service__section--process .sertechs-service__card { min-height: 0; padding: 24px; }
#sertechs-service .sertechs-service__section--process .sertechs-service__card-mark { margin-bottom: 22px; }
#sertechs-service .sertechs-service__section--process .sertechs-service__card h3 { font-size: clamp(21px,1.7vw,27px); }
#sertechs-service .sertechs-service__section--technologies { padding: 42px 0; }
#sertechs-service .sertechs-service__tools-layout { display: grid; grid-template-columns: minmax(220px,.5fr) 1fr; align-items: center; gap: 32px; }
#sertechs-service .sertechs-service__section--technologies h2 { margin: 0; font-size: clamp(30px,3vw,44px); }
#sertechs-service .sertechs-service__tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
#sertechs-service .sertechs-service__tools li { padding: 10px 16px; border: 1px solid #e8e0d8; border-radius: 999px; background: var(--ss-white); color: var(--ss-ink); font-size: 14px; font-weight: 700; }
#sertechs-service .sertechs-service__final-card { display: flex; flex-direction: column; align-items: center; padding: clamp(50px,7vw,100px) 32px; border-radius: 34px; background: #151515; color: #fff; text-align: center; }
#sertechs-service .sertechs-service__final-card h2 { max-width: 850px; margin: 0; }
#sertechs-service .sertechs-service__final-card > p:not(.sertechs-service__eyebrow) { max-width: 650px; margin-top: 22px; color: rgba(255,255,255,.7); font-size: 18px; }
@media (max-width: 1100px) {
  #sertechs-service .sertechs-service__section--process .sertechs-service__cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  #sertechs-service .sertechs-service__hero-grid,#sertechs-service .sertechs-service__split { grid-template-columns: 1fr; }
  #sertechs-service .sertechs-service__hero-image,#sertechs-service .sertechs-service__hero-art { min-height: 360px; max-height: 480px; }
  #sertechs-service .sertechs-service__cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #sertechs-service .sertechs-service__tools-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  #sertechs-service .sertechs-service__wrap { width: calc(100% - 28px); }
  #sertechs-service .sertechs-service__hero { padding-top: 14px; }
  #sertechs-service .sertechs-service__hero-grid,#sertechs-service .sertechs-service__final-card { border-radius: 22px; }
  #sertechs-service .sertechs-service__hero-copy { padding: 44px 25px; }
  #sertechs-service h1 { font-size: clamp(40px,11vw,58px); }
  #sertechs-service .sertechs-service__section h2 { margin-bottom: 30px; font-size: clamp(35px,9vw,48px); }
  #sertechs-service .sertechs-service__cards,#sertechs-service .sertechs-service__section--process .sertechs-service__cards { grid-template-columns: 1fr; }
  #sertechs-service .sertechs-service__card { min-height: 0; padding: 25px; }
  #sertechs-service .sertechs-service__hero-image,#sertechs-service .sertechs-service__hero-art { min-height: 280px; }
}
