/* Local visual pass: deeper black surfaces, clean identity, editorial service routes. */
:root{--panel:#080a0d;--panel2:#0a0d10;--line:rgba(214,221,228,.11)}

/* The Blackwall logo stays scroll-linked; remove the fuzzy gray turbulence halo. */
.identity-content::before{display:none!important}
.identity-layer::before{background:rgba(4,5,7,.77)}
.identity-mark{filter:drop-shadow(0 0 15px rgba(239,41,79,.22))}
.identity-title{text-shadow:none}

/* Keep large surfaces almost black instead of flat light graphite panels. */
.catalog{background:radial-gradient(ellipse 68% 25% at 55% 0%,rgba(71,8,23,.12),transparent 74%),#06080a}
.method{background:#080a0c}
.contact-section{background:radial-gradient(ellipse 50% 75% at 85% 95%,rgba(72,8,22,.15),transparent),#050608}
.service-page{background:#06080a}
.service-section{background:#06080a}
.service-section:nth-of-type(even){background:#080a0d}
.service-band{background:linear-gradient(110deg,rgba(72,10,24,.2),transparent 67%),#090b0e}
.capability{background:#080a0d;border-color:rgba(220,226,232,.09);box-shadow:inset 2px 0 0 rgba(239,41,79,.42)}
.example{background:#07090b;border-color:rgba(220,226,232,.09)}
.related{background:#06080a}

/* Main catalog: less gray card chrome, richer photo and precise signal accents. */
.service-card{background:#080a0d;border-color:rgba(222,229,236,.1)}
.service-card::before{content:'';position:absolute;z-index:2;top:0;left:0;width:84px;height:2px;background:var(--red);opacity:.78;pointer-events:none}
.card-media img{opacity:.75;filter:brightness(.72) saturate(.72) contrast(1.1)}
.service-card:hover .card-media img{opacity:.9;filter:brightness(.81) saturate(.85) contrast(1.08)}
.card-media::after{background:linear-gradient(180deg,rgba(5,6,8,.18),transparent 29%,rgba(5,6,8,.24) 48%,rgba(5,6,8,.97) 100%)}
.card-link{border-color:rgba(239,41,79,.37)}
.card-link span:last-child{display:grid;place-items:center;width:29px;height:29px;border:1px solid rgba(239,41,79,.72);border-radius:50%;font-size:18px;line-height:1;transition:background .2s,color .2s}
.service-card:hover .card-link span:last-child{background:var(--red);color:#fff}

/* Route instead of a generic row of four process boxes. */
.process-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:74px;border:0}
.process-item,.process-item:nth-child(2),.process-item:last-child{position:relative;min-height:255px;margin:0;padding:31px 25px 18px 0;border:0;border-top:1px solid rgba(239,41,79,.42);background:transparent}
.process-item:not(:first-child){padding-left:22px}
.process-item::before{content:'';position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--red);box-shadow:0 0 15px rgba(239,41,79,.8);transform:rotate(45deg)}
.process-item:not(:first-child)::before{left:22px}
.process-item:nth-child(even){transform:translateY(35px)}
.process-item small{display:block;font:600 clamp(50px,6vw,86px)/.85 var(--sans);letter-spacing:-.09em;color:transparent;-webkit-text-stroke:1px rgba(239,41,79,.57)}
.process-item h3{font-size:clamp(20px,2vw,28px);line-height:1.12;letter-spacing:-.04em;margin:34px 0 12px}
.process-item p{max-width:245px;color:#9da3aa;font-size:14px;line-height:1.6;margin:0}

/* Related directions now carry the same visual preview language as the main catalog. */
.related-grid{gap:18px}
.related-grid a{position:relative;isolation:isolate;display:flex;align-items:end;min-height:300px;padding:29px 32px;overflow:hidden;background:#080a0d;border:1px solid rgba(223,229,236,.11);font-size:clamp(24px,2.7vw,38px);font-weight:700;line-height:1.08;letter-spacing:-.05em;text-shadow:0 2px 20px rgba(0,0,0,.9)}
.related-grid a::before{content:'';position:absolute;z-index:-2;inset:0;background-image:var(--related-image);background-size:cover;background-position:center;filter:brightness(.7) saturate(.76);transition:transform .6s,filter .35s}
.related-grid a::after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(4,5,7,.12) 5%,rgba(4,5,7,.26) 43%,rgba(4,5,7,.95) 100%)}
.related-grid a:hover::before{transform:scale(1.05);filter:brightness(.83) saturate(.9)}
.related-grid a span{font-size:30px;line-height:1;color:var(--red-soft)}
.related-grid a[href="service-crm.html"]{--related-image:url('assets/services/crm-preview.png')}
.related-grid a[href="service-sites.html"]{--related-image:url('assets/services/sites-preview-photo.png')}
.related-grid a[href="service-stores.html"]{--related-image:url('assets/services/web-preview.png')}
.related-grid a[href="service-webapps.html"]{--related-image:url('assets/argus-security/security-dashboard.png')}
.related-grid a[href="service-mobile.html"]{--related-image:url('assets/services/app-preview.png')}
.related-grid a[href="service-software.html"]{--related-image:url('assets/services/software-integrations-preview.png')}

@media(max-width:900px){
  .process-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px;row-gap:35px}
  .process-item:nth-child(even){transform:none}
  .process-item:not(:first-child){padding-left:0}
  .process-item:not(:first-child)::before{left:0}
  .related-grid a{min-height:265px}
}
@media(max-width:700px){
  .service-hero .section-shell{min-width:0}
  .service-hero-media img{opacity:.28}
  .service-section{padding:68px 0}
  .capabilities{gap:10px}
  .capability{min-height:0;padding:19px 19px 20px}
  .capability h3{margin:14px 0 7px;font-size:19px}
  .capability p{font-size:13px}
  .example img{height:220px}
  .service-band p{font-size:23px}
  .process-grid{grid-template-columns:1fr;gap:0;margin-top:38px;padding-left:27px;border-left:1px solid rgba(239,41,79,.32)}
  .process-item,.process-item:nth-child(2),.process-item:last-child,.process-item:not(:first-child){min-height:0;padding:20px 0 24px 25px;border:0;border-bottom:1px solid rgba(219,225,232,.1);transform:none}
  .process-item::before,.process-item:not(:first-child)::before{left:-31px;top:29px}
  .process-item small{font-size:47px}
  .process-item h3{font-size:21px;margin:11px 0 7px}
  .process-item p{max-width:100%;font-size:13px}
  .related{padding:60px 0}
  .related-grid{gap:12px}
  .related-grid a{min-height:245px;padding:22px;font-size:25px}
  .contact-lines a span{overflow-wrap:anywhere;text-align:right}
  .service-card,.service-card:nth-child(n){min-height:435px}
  .service-card:nth-child(1){min-height:480px}
}
@media(max-width:360px){
  .top-nav a:nth-child(3){display:none}
  .service-hero h1{font-size:43px}
  .related-grid a{min-height:220px}
}
@media(hover:none){.service-card:hover{transform:none}.related-grid a:hover::before{transform:none}}
@media(prefers-reduced-motion:reduce){.related-grid a::before,.card-link span:last-child{transition:none}}