/* Services on the home page: a section right after the flagship, a hero link and a nav badge,
   so people who never open the Services page still see what Tixible builds for clients. */
.nav a[href="/services"] { position: relative; }
.nav a[href="/services"]::after {
  content: "Build with us";
  margin-left: 7px;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--amber, #e8b84b);
  color: #1a1305;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: 2px;
  white-space: nowrap;
}
@media (max-width: 1100px) { .nav a[href="/services"]::after { content: "New"; } }

.home-services { background: linear-gradient(180deg, var(--cream, #f7f2e7), var(--tan, #ece4d2)); }
.hs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
.hs-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--card-border, #e2dac4);
  border-radius: var(--radius, 14px);
  padding: 24px;
  color: inherit; text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.hs-card:hover { transform: translateY(-6px); border-color: var(--amber-dark, #d9a52f); box-shadow: 0 22px 44px rgba(23, 21, 15, 0.12); }
.hs-card .service-icon { margin-bottom: 14px; transition: transform 0.4s ease; }
.hs-card:hover .service-icon { transform: scale(1.12) rotate(-4deg); }
.hs-card h3 { font-size: 17px; margin-bottom: 6px; }
.hs-card p { font-size: 14px; flex: 1; }
.hs-go { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--amber-dark, #d9a52f); }
.hs-go span { display: inline-block; transition: transform 0.25s ease; }
.hs-card:hover .hs-go span { transform: translateX(5px); }
.hs-fix { flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.hs-fix > div { flex: 1 1 380px; }
.hs-fix .hs-go { margin-top: 0; }
.hs-fix p { flex: none; max-width: 640px; }
.hs-fix-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber-dark, #d9a52f); margin-bottom: 6px; }

.hs-proof { margin-top: 44px; }
.hs-proof-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.hs-proof-head h3 { font-size: 18px; }
.hs-proof-head a { font-size: 14px; font-weight: 600; color: var(--amber-dark, #d9a52f); }
.hs-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.hs-thumb {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 12px; background: var(--ink, #17150f);
  border: 1px solid var(--card-border, #e2dac4);
}
.hs-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.hs-thumb:hover img { transform: scale(1.08); }
.hs-thumb span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px;
  background: linear-gradient(180deg, transparent, rgba(10, 9, 6, 0.85));
  color: #f7f2e7; font-size: 13px; font-weight: 600;
}
.hs-cta { display: flex; justify-content: center; margin-top: 30px; }

@media (max-width: 1000px) {
  .hs-grid { grid-template-columns: repeat(2, 1fr); }
  .hs-thumbs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .hs-thumb { scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .hs-grid { grid-template-columns: 1fr; }
}