/* Premium Tints & Wraps / V10 — Modern service presentation & visual continuity.
   Intentionally keeps content visible at rest; motion is a small optional layer.
   No framework, remote effects, or scroll-visibility dependencies. */
:root { --v10-blue: #0757e8; --v10-ink: #0b1117; --v10-ease: cubic-bezier(.22,1,.36,1); }

/* The introduction connects the quote-first hero to the services. */
.intro { border-top: 1px solid rgba(13,24,39,.045); }
.intro-grid h2 { max-width: 830px; }
.intro-portrait { border-radius: 5px; }
.intro-portrait::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(12,19,26,.06); }

/* Instead of a left-to-right directory, the service index is an editorial
   destination: one centered focal point with living shop imagery at its edges. */
.services-stage { padding-top: clamp(98px,9vw,142px); background: #0d131b; }
.services-stage .stage-head {
  display: flex; flex-direction: column; align-items: center; justify-content:center;
  text-align:center; gap: clamp(15px,2vw,23px); padding:0 18px;
  margin-bottom: clamp(58px,6vw,89px);
}
.services-stage .stage-head h2 {
  max-width: 100%; margin: 0; line-height:1.1;
  font-size:clamp(57px,7.5vw,112px);
  font-weight: 530; letter-spacing:-.012em;
}
.services-stage .stage-head p {
  max-width: 570px; margin: 0 auto; color:#b2bfcd;
  font-size:clamp(15px,1.2vw,18px); line-height:1.67;
  text-wrap:balance;
}
.flow-menu { border-top:1px solid rgba(216,225,235,.16); }
.flow-row {
  height: clamp(177px,17vw,240px);
  background: rgba(13,19,27,.12);
  border-bottom: 1px solid rgba(216,225,235,.16);
  transition: background .55s var(--v10-ease), border-color .4s ease;
}
.flow-row::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,rgba(13,19,27,.06) 0%,rgba(13,19,27,.92) 34%,rgba(13,19,27,.94) 66%,rgba(13,19,27,.06) 100%);
}
.flow-row:hover,.flow-row:focus-visible { background: rgba(18,32,48,.55); border-color:rgba(143,174,226,.32); }
.flow-row-inner.shell {
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:clamp(9px,1.2vw,17px); text-align:center;
  width:min(calc(100% - 36px),850px); height:100%; position:relative; z-index:2;
  padding:17px 0; pointer-events:none;
}
.flow-title {
  max-width:100%; font-size:clamp(46px,6.5vw,88px); font-weight:530;
  letter-spacing:.004em; line-height:1.09; color:#f2f5f8;
  transition: transform .65s var(--v10-ease),color .4s ease,letter-spacing .65s var(--v10-ease);
  text-wrap:balance;
}
.flow-sub {
  max-width:600px; flex:0 0 auto; text-align:center;
  font-size:clamp(13px,1.06vw,16px); font-weight:400;
  letter-spacing:.015em; line-height:1.5; color:#b5c3d2;
  transition: color .4s ease;
}
.flow-media {
  inset:0; z-index:0; opacity:.36; transform:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.8) 16%,transparent 38%,transparent 62%,rgba(0,0,0,.8) 84%,#000 100%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.8) 16%,transparent 38%,transparent 62%,rgba(0,0,0,.8) 84%,#000 100%);
  transition:opacity .8s var(--v10-ease);
}
.flow-media::after { background:linear-gradient(90deg,rgba(13,19,27,.25),transparent 35%,transparent 65%,rgba(13,19,27,.25)); }
.flow-row:is(:hover,:focus-visible) .flow-media { opacity:.72; transform:none; }
.flow-track img { filter:saturate(.82) contrast(1.05); height:90%; }
@media(hover:hover) and (pointer:fine) {
  .flow-row:hover .flow-title,.flow-row:focus-visible .flow-title { transform:translateY(-3px); letter-spacing:.014em; }
  .flow-row:hover .flow-sub,.flow-row:focus-visible .flow-sub { color:#d9e7fb; }
}
.flow-foot.shell {
  display:flex; justify-content:space-between; align-items:center;
  gap:35px; padding-top:32px; padding-bottom:clamp(42px,5.2vw,72px);
}
.flow-foot p { max-width:540px; font-size:15px; color:#b7c2d0; line-height:1.65; }
.flow-foot .text-link { font-size:13px; flex-shrink:0; color:#f3f7ff; }
.flow-foot .text-link:hover { color:#93b8ff; }

/* Service cards: more editorial, less like detached dashboard panels. */
.service-cards-section { background:linear-gradient(154deg,#f3f3ef 0%,#ededeb 100%); }
.service-cards-section .cards-heading { align-items:end; }
.pixel-card { border-radius:5px; border-color:#d9dfdf; background:#fff; }
.pixel-card .card-photo { position:relative; overflow:hidden; }
.pixel-card .card-photo::after { content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(5,11,18,.08),transparent 48%); }
.pixel-card .card-content { padding:clamp(27px,3vw,44px); }
.pixel-card .card-content h3 { font-weight:560; letter-spacing:-.008em; }
.pixel-card .card-content p { color:#505a62; line-height:1.7; }
.pixel-card .card-cta { border-bottom:1px solid currentColor; }
@media(hover:hover) and (pointer:fine) {
  .pixel-card:hover,.pixel-card:focus-within { border-color:#97b5e1; }
  .pixel-card:hover .card-cta,.pixel-card:focus-within .card-cta { color:#0757e8; }
}

/* Polished transitions leading from the service cards into the image-led work. */
.blue-break { border-top:1px solid rgba(8,55,171,.18); }
.work-feature-photo { border-radius:5px; }
.masonry-tile { border-radius:4px; }
.work-head { gap:clamp(24px,4vw,68px); }
.work-head p { max-width:390px; }
.closing-quote { border-top:1px solid rgba(255,255,255,.13); }

@media(max-width:900px) {
  .services-stage .stage-head { margin-bottom:55px; }
  .flow-row { height:180px; }
  .flow-title { font-size:clamp(44px,7vw,70px); }
  .flow-media { left:0!important; opacity:.27!important; transform:none!important; }
  .flow-row:is(:hover,:focus-visible) .flow-media { opacity:.49!important; }
  .flow-foot.shell { gap:22px; flex-direction:column; align-items:center; text-align:center; }
  .flow-foot p { max-width:550px; }
  .flow-row::after { background:linear-gradient(90deg,rgba(13,19,27,.24),rgba(13,19,27,.94) 28%,rgba(13,19,27,.94) 72%,rgba(13,19,27,.24)); }
}
@media(max-width:640px) {
  .services-stage { padding-top:85px; }
  .services-stage .stage-head { gap:14px; margin-bottom:38px; }
  .services-stage .stage-head h2 { font-size:clamp(48px,11vw,67px); }
  .services-stage .stage-head p { font-size:14px; max-width:335px; }
  .flow-row { height:154px; }
  .flow-row-inner.shell { gap:10px; width:calc(100% - 24px); }
  .flow-title { font-size:clamp(31px,8.3vw,48px); letter-spacing:0; max-width:100%; }
  .flow-sub { font-size:12px; line-height:1.55; max-width:260px; letter-spacing:.005em; color:#c0c9d4; }
  .flow-media { opacity:.26!important; }
  .flow-track img { width:148px; }
  .flow-row::after { background:linear-gradient(90deg,rgba(13,19,27,.45),rgba(13,19,27,.95) 19%,rgba(13,19,27,.96) 81%,rgba(13,19,27,.45)); }
  .flow-foot.shell { padding:25px 0 44px; gap:18px; }
  .flow-foot p { font-size:14px; }
  .pixel-card .card-content { padding:29px; }
  .pixel-card .card-content h3 { font-size:clamp(29px,8vw,36px); }
}
@media(prefers-reduced-motion:reduce) {
  .flow-row,.flow-title,.flow-sub,.flow-media,.pixel-card { transition:none!important; }
  .flow-track { animation:none!important; }
  .flow-row:is(:hover,:focus-visible) .flow-title { transform:none!important; }
}