/* Flow Forge service triptych: three distinct capabilities, one connected system. */
.services-section {
  position: relative;
  overflow: clip;
  padding-block: clamp(72px, 8vw, 124px);
}

.services-section::before {
  content: '';
  position: absolute;
  inset: 18% -15% auto;
  height: 72%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 80%, rgba(255, 93, 10, .12), transparent 62%);
  opacity: .7;
}

.services-section .container { position: relative; }

.services-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .55fr);
  align-items: end;
  gap: clamp(40px, 8vw, 120px);
  margin-bottom: clamp(42px, 5vw, 72px);
}

.services-intro h2 {
  max-width: 820px;
  margin-top: 20px;
  font-size: clamp(3.1rem, 5.3vw, 5rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.services-intro h2 span { color: #ff9c52; }

.services-intro > p {
  max-width: 470px;
  padding: 0 0 5px 22px;
  border-left: 1px solid rgba(255, 156, 82, .62);
  color: #c4cbcc;
  font-size: 1rem;
  line-height: 1.8;
}

.service-deck {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid rgba(211, 220, 222, .2);
  background: rgba(4, 5, 6, .3);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .26);
}

.service-deck::before,
.service-deck::after {
  content: '';
  position: absolute;
  z-index: 4;
  width: 40px;
  height: 2px;
  pointer-events: none;
  background: #ff7b2b;
  box-shadow: 0 0 16px rgba(255, 106, 0, .45);
}

.service-deck::before { top: -1px; left: 0; }
.service-deck::after { right: 0; bottom: -1px; }

.service-panel {
  --panel-signal-x: 50%;
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  min-height: clamp(470px, 42vw, 560px);
  flex-direction: column;
  overflow: hidden;
  padding: clamp(28px, 3vw, 43px);
  color: var(--light);
  background:
    linear-gradient(180deg, rgba(24, 28, 30, .87), rgba(6, 8, 9, .94)),
    radial-gradient(circle at var(--panel-signal-x) 100%, rgba(255, 100, 10, .16), transparent 45%);
  transition: background-color .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}

.service-panel + .service-panel { border-left: 1px solid rgba(211, 220, 222, .18); }

.service-panel::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: 48% -18% -45%;
  background: radial-gradient(ellipse at var(--panel-signal-x) 70%, rgba(255, 90, 0, .47), rgba(255, 72, 0, .12) 40%, transparent 69%);
  opacity: .2;
  transform: translateY(24%) scale(.92);
  transition: opacity .55s ease, transform .65s cubic-bezier(.2,.8,.2,1);
}

.service-panel::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.055) 47%, transparent 55%);
  opacity: 0;
  transform: translateX(-70%);
  transition: opacity .3s ease, transform .85s cubic-bezier(.2,.8,.2,1);
}

.service-panel:hover,
.service-panel:focus-visible { transform: translateY(-6px); }

.service-panel:hover::before,
.service-panel:focus-visible::before { opacity: .82; transform: translateY(0) scale(1.08); }
.service-panel:hover::after,
.service-panel:focus-visible::after { opacity: 1; transform: translateX(55%); }

.service-panel-number {
  color: #aeb7b9;
  font: 600 .78rem/1.4 var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .35s ease;
}

.service-panel:hover .service-panel-number,
.service-panel:focus-visible .service-panel-number { color: #ffae75; }

.service-panel-copy { position: relative; z-index: 2; margin-top: clamp(34px, 4vw, 58px); }

.service-panel h3 {
  color: #f2f4f3;
  font: 600 clamp(2.25rem, 3.35vw, 3.4rem)/.96 var(--display);
  letter-spacing: -.045em;
  text-transform: uppercase;
  transition: color .35s ease;
}

.service-panel:hover h3,
.service-panel:focus-visible h3 { color: #ff9c52; }

.service-panel-copy p {
  max-width: 30ch;
  margin-top: 18px;
  color: #b7bfc1;
  font-size: .96rem;
  line-height: 1.7;
}

.service-visual {
  position: relative;
  z-index: 1;
  height: 142px;
  margin-top: auto;
  margin-bottom: 25px;
  color: #ff9c52;
}

.service-panel-link {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 43px;
  padding-top: 14px;
  border-top: 1px solid rgba(211, 220, 222, .22);
  color: #e1e5e5;
  font-size: .88rem;
  font-weight: 600;
}

.service-panel-link b {
  color: #ff9c52;
  font: 400 1.3rem/1 var(--body);
  transition: transform .35s ease;
}

.service-panel:hover .service-panel-link b,
.service-panel:focus-visible .service-panel-link b { transform: translate(4px, -4px); }

/* Website composition */
.service-browser {
  position: absolute;
  left: 1%;
  bottom: 2px;
  width: 82%;
  height: 122px;
  border: 1px solid rgba(211, 220, 222, .36);
  background: rgba(8, 10, 11, .72);
  box-shadow: 0 18px 30px rgba(0,0,0,.3);
  transform: perspective(600px) rotateY(5deg);
  transition: border-color .4s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}

.service-browser::before {
  content: '';
  position: absolute;
  top: 14px;
  right: 11px;
  left: 11px;
  height: 1px;
  background: rgba(211, 220, 222, .2);
}

.service-browser > i {
  position: relative;
  z-index: 1;
  float: left;
  width: 4px;
  height: 4px;
  margin: 6px 0 0 4px;
  background: #778083;
  border-radius: 50%;
}
.service-browser > i:first-child { margin-left: 8px; background: #ff7b2b; }
.service-browser > b { position: absolute; top: 31px; left: 12px; width: 44%; height: 29px; background: linear-gradient(90deg, #ff7b2b 0 10%, #e7ebea 10%); opacity: .85; }
.service-browser > span { position: absolute; left: 12px; right: 12px; height: 5px; background: #343a3c; }
.service-browser > span:nth-of-type(1) { top: 72px; right: 28%; }
.service-browser > span:nth-of-type(2) { top: 85px; right: 15%; }
.service-browser > span:nth-of-type(3) { top: 98px; right: 42%; background: #ff7b2b; opacity: .72; }

.service-device {
  position: absolute;
  right: 1%;
  bottom: 0;
  width: 26%;
  height: 101px;
  padding: 20px 8px 8px;
  border: 1px solid rgba(211, 220, 222, .45);
  border-radius: 9px 9px 3px 3px;
  background: #0b0e0f;
  box-shadow: 0 15px 24px rgba(0,0,0,.42);
  transform: translateY(4px);
  transition: transform .55s cubic-bezier(.2,.8,.2,1), border-color .4s ease;
}
.service-device::before { content: ''; position: absolute; top: 8px; left: 50%; width: 12px; height: 2px; margin-left: -6px; background: #60686a; }
.service-device i { display: block; height: 5px; margin-bottom: 8px; background: #353c3e; }
.service-device i:first-child { height: 19px; background: linear-gradient(135deg, #ff7b2b, #672400); opacity: .8; }
.service-panel:hover .service-browser { border-color: rgba(255, 156, 82, .72); transform: perspective(600px) rotateY(0) translateY(-4px); }
.service-panel:hover .service-device { border-color: #ff9c52; transform: translateY(-7px); }

/* Search and enquiry composition */
.service-visual-leads { --search-line: rgba(217, 225, 226, .32); }
.search-query {
  position: absolute;
  top: 5px;
  left: 0;
  width: 73%;
  height: 39px;
  border: 1px solid var(--search-line);
  transition: border-color .4s ease, width .55s cubic-bezier(.2,.8,.2,1);
}
.search-query::before { content: ''; position: absolute; top: 11px; left: 13px; width: 12px; height: 12px; border: 1px solid #ff9c52; border-radius: 50%; }
.search-query::after { content: ''; position: absolute; top: 24px; left: 25px; width: 7px; height: 1px; background: #ff9c52; transform: rotate(45deg); transform-origin: left center; }
.search-query span { position: absolute; top: 16px; left: 41px; width: 45%; height: 4px; background: #50585a; }
.search-query i { position: absolute; top: 15px; right: 14px; width: 10px; height: 7px; border-right: 1px solid #ff9c52; border-bottom: 1px solid #ff9c52; transform: rotate(45deg); }
.search-results { position: absolute; top: 57px; left: 4%; width: 70%; }
.search-results i { position: relative; display: block; width: 100%; height: 17px; margin-bottom: 10px; border-left: 2px solid #576063; background: linear-gradient(90deg, #353b3d 0 70%, transparent 70%); transition: border-color .35s ease, transform .45s ease; }
.search-results i::after { content: ''; position: absolute; top: 10px; left: 10px; width: 37%; height: 3px; background: #697275; }
.search-results i:first-child { border-color: #ff7b2b; transform: translateX(8px); }
.search-target { position: absolute; right: 1%; bottom: 5px; width: 65px; height: 65px; display: grid; place-items: center; border: 1px solid rgba(255, 156, 82, .5); border-radius: 50%; }
.search-target::before, .search-target::after { content: ''; position: absolute; background: rgba(255, 156, 82, .48); }
.search-target::before { width: 1px; height: 83px; }
.search-target::after { width: 83px; height: 1px; }
.search-target span { width: 9px; height: 9px; background: #ff7b2b; border-radius: 50%; box-shadow: 0 0 16px #ff6a00; }
.service-panel:hover .search-query { width: 80%; border-color: rgba(255, 156, 82, .7); }
.service-panel:hover .search-results i { border-color: #ff7b2b; transform: translateX(8px); }
.service-panel:hover .search-results i:nth-child(2) { transition-delay: .06s; }
.service-panel:hover .search-results i:nth-child(3) { transition-delay: .12s; }

/* Connected enquiry composition */
.service-visual-auto { display: grid; grid-template-columns: 54px 1fr 54px 1fr 54px; align-items: center; }
.auto-node { position: relative; z-index: 2; display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid rgba(211, 220, 222, .42); background: #0b0e0f; transform: rotate(45deg); transition: border-color .4s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.auto-node i { display: block; width: 12px; height: 12px; border: 1px solid #ff9c52; background: rgba(255, 106, 0, .12); }
.auto-track { position: relative; z-index: 1; height: 1px; background: rgba(211, 220, 222, .28); overflow: hidden; }
.auto-track::after { content: ''; position: absolute; inset: -1px auto -1px 0; width: 34%; background: #ff7b2b; box-shadow: 0 0 10px #ff6a00; transform: translateX(-120%); animation: service-pulse 3.4s ease-in-out infinite; }
.auto-track-two::after { animation-delay: 1.15s; }
.auto-node-two { transform: rotate(45deg) scale(.82); }
.service-panel:hover .auto-node { border-color: #ff9c52; transform: rotate(45deg) scale(1.08); }
.service-panel:hover .auto-node-two { transform: rotate(45deg) scale(.92); }

.services-note {
  margin: 25px 0 0 auto;
  color: #969fa1;
  font-size: .84rem;
  line-height: 1.6;
  text-align: right;
}

@keyframes service-pulse {
  0%, 16% { transform: translateX(-120%); opacity: 0; }
  30% { opacity: 1; }
  68% { opacity: 1; }
  84%, 100% { transform: translateX(310%); opacity: 0; }
}

html[data-motion-paused="true"] .service-panel *,
html[data-motion-paused="true"] .service-panel::before,
html[data-motion-paused="true"] .service-panel::after { animation-play-state: paused !important; }

@media (max-width: 1040px) {
  .service-panel { min-height: 500px; padding: 30px 26px; }
  .service-panel h3 { font-size: clamp(2.15rem, 4vw, 2.8rem); }
  .service-visual-auto { grid-template-columns: 43px 1fr 43px 1fr 43px; }
  .auto-node { width: 43px; height: 43px; }
}

@media (max-width: 800px) {
  .services-intro { grid-template-columns: 1fr; gap: 24px; }
  .services-intro h2 { font-size: clamp(2.65rem, 10vw, 4rem); }
  .services-intro > p { max-width: 600px; }
  .service-deck { grid-template-columns: 1fr; }
  .service-panel { min-height: 440px; padding: 30px; }
  .service-panel + .service-panel { border-left: 0; border-top: 1px solid rgba(211, 220, 222, .18); }
  .service-panel-copy { margin-top: 32px; }
  .service-panel h3 { font-size: clamp(2.5rem, 10vw, 3.5rem); }
  .service-panel-copy p { max-width: 42ch; }
  .service-visual { width: min(390px, 92%); }
  .services-note { text-align: left; }
}

@media (max-width: 480px) {
  .services-section { padding-block: 58px; }
  .services-intro { margin-bottom: 34px; }
  .services-intro > p { padding-left: 16px; font-size: .95rem; }
  .service-panel { min-height: 420px; padding: 25px 22px; }
  .service-panel-number { font-size: .72rem; }
  .service-panel-copy { margin-top: 26px; }
  .service-panel h3 { font-size: clamp(2.35rem, 12vw, 3.1rem); }
  .service-panel-copy p { font-size: .92rem; }
  .service-visual { height: 128px; margin-bottom: 18px; }
  .service-browser { height: 110px; }
  .service-device { height: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  .service-panel, .service-panel::before, .service-panel::after,
  .service-panel *, .auto-track::after { animation: none !important; transition: none !important; }
}