:root {
  --black:     #111110;
  --white:     #ffffff;
  --rule:      2px solid #ffffff;
  --rule-thin: 1px solid rgba(255,255,255,0.13);
  --sidebar:   60px;
  --mono:      'IBM Plex Mono', monospace;
  --condensed: 'Barlow Condensed', sans-serif;
  --display:   'Anton', sans-serif;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--mono);
  overflow-x: hidden;
  cursor: none;
}

#image_track {
	display: flex;
	gap: 4vmin;
	position: absolute;
	left: 20%;
	top: 50%;
	transform: translate(0%, -50%);
	user-select: none;
}



#image_track > .image  {
	width: 45vmin;
	height: 65vmin;
	object-fit: cover;
	object-position: 100% center;
	-webkit-filter: brightness(0.75);
	-o-filter: brightness(0.75);
	-moz-filter: brightness(0.75);
	-ms-filter: brightness(0.75);
	filter: brightness(0.75);
	border-radius: 10px;
}


.rule { width: 100%; height: 0; border: none; border-top: var(--rule); }
.hero__cta-wrap { display: block; align-items: center; gap: 1rem; margin-top: 15px; justify-content: center;  }

.btn {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: white; background: transparent;
  border: 2px solid white; padding: 0.85rem 2rem;
  cursor: none; text-decoration: none; display: inline-block;
  transition: background 0.2s ease, color 0.2s ease;
  width: 150px;
}
.btnthree {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: white; background: transparent;
  border: 2px solid white; padding: 0.85rem 2rem;
  cursor: none; text-decoration: none; display: inline-block;
  transition: background 0.2s ease, color 0.2s ease;
  width: 150px;
  height: 15px;
}
.btntwo {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--black); background: sandybrown;
  border: none; padding: 0.85rem 2rem;
  cursor: none; text-decoration: none; display: inline-block;
  transition: background 0.2s ease, color 0.2s ease;
  width: 150px;
  height: 15px;
}
.btn:hover { background: transparent; color: var(--white); outline: 1px solid var(--white); }
.btntwo:hover { background: transparent; color: sandybrown; outline: 1px solid sandybrown; }

/* ══════════════════════════
   RESPONSIVE
══════════════════════════ */
@media (max-width: 1100px) {
  .service-row__desc { display: none; }
}
@media (max-width: 900px) {
  .work__grid { grid-template-columns: 1fr; }
  .work__item:nth-child(1) { flex-direction: column; align-items: flex-start; min-height: auto; }
  .work__item:nth-child(1) .work__item-aside::before { display: none; }
  .work__item-aside { align-items: flex-start; min-width: unset; }
  .work__item-aside .work__item-desc { text-align: left; }
  .work__item { border-left: none !important; grid-column: auto !important; }
  .contact__info { grid-template-columns: 1fr; }
  .contact__manifesto { align-self: flex-start; text-align: left; }
  .footer-bar__center { display: none; }
}
@media (max-width: 768px) {
  .services__body { grid-template-columns: 1fr; }
  .services__right { border-left: none; border-top: var(--rule); padding: 6vh 4vw; }
  .service-panel__inner { padding-left: 0 !important; }
  .service-panel.open .service-panel__inner { padding: 1.5vh 0 2.5vh 0; }
  .sp-block { grid-template-columns: 90px 1fr; gap: 0 4vw; }
}
@media (max-width: 640px) {
  .hero__tagline { max-width: 80vw; }
  .hero__sub { flex-direction: column; gap: 2rem; align-items: flex-start; }
  .services__header { flex-direction: column; gap: 0.5rem; }
  .footer-bar { flex-direction: column; align-items: flex-start; }
  .work__item-slug { font-size: 0.48rem; }
}
@media (max-width: 420px) {
  .sp-block { grid-template-columns: 1fr; gap: 0.3rem 0; }
  .sp-block__label { padding-top: 0; }
  .hero__cta-wrap {}
}