/* Shared "depth" sections — themed via xs-light / xs-dark wrapper.
   Mulberry accent = #9E1B4C (Pantone 221 C). */

.xs-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9E1B4C;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
[class*="xs-"] em { font-style: normal; color: #9E1B4C; }

/* Light/dark theming */
.xs-light { background: #F5F4EE; color: #0C0C0B; --xs-muted: #6B6862; --xs-border: #E8E5DD; --xs-surface: #FFFCF5; }
.xs-dark { background: #0C0C0B; color: #F5F4EE; --xs-muted: rgba(245,244,238,0.6); --xs-border: rgba(255,255,255,0.08); --xs-surface: rgba(255,255,255,0.03); }

/* ───── TRUST BADGES ───── */
.xs-trust { padding: 4rem clamp(1.5rem, 6vw, 6rem); border-block: 1px solid var(--xs-border); }
.xs-trust-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
@media (max-width: 900px) { .xs-trust-inner { grid-template-columns: 1fr 1fr; } }
.xs-trust-card {
  padding: 2rem 1.5rem;
  background: var(--xs-surface);
  border: 1px solid var(--xs-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.04);
  transform: translateY(20px); opacity: 0;
  transition: transform .8s cubic-bezier(.16,1,.3,1) var(--di), opacity .8s var(--di), box-shadow .3s, border-color .3s;
}
.xs-dark .xs-trust-card { box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 40px rgba(0,0,0,0.4); backdrop-filter: blur(12px); }
.xs-trust.in .xs-trust-card { transform: none; opacity: 1; }
.xs-trust-card:hover { transform: translateY(-3px); border-color: #9E1B4C; }
.xs-trust-num { font-size: 2.6rem; font-weight: 400; letter-spacing: -0.04em; line-height: 1; }
.xs-trust-num span { font-size: 0.45em; color: #9E1B4C; margin-left: 0.15em; }
.xs-trust-rule { width: 32px; height: 2px; background: #9E1B4C; margin: 1rem 0; }
.xs-trust-label { font-family: 'DM Mono', monospace; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; }
.xs-trust-sub { font-size: 0.82rem; color: var(--xs-muted); margin-top: 0.4rem; }

/* ───── CLIENT LOGOS (marquee) ───── */
.xs-clients { padding: 5rem clamp(1.5rem, 6vw, 6rem); overflow: hidden; opacity: 0; transform: translateY(20px); transition: opacity 1s, transform 1s; }
.xs-clients.in { opacity: 1; transform: none; }
.xs-clients-inner { max-width: 1280px; margin: 0 auto; }
.xs-clients-head { margin-bottom: 2.5rem; }
.xs-clients-head .xs-eyebrow { display: block; margin-bottom: 1rem; }
.xs-clients-head h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); letter-spacing: -0.02em; font-weight: 400; max-width: 30ch; }
.xs-clients-marquee {
  position: relative;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.xs-clients-track {
  display: flex; gap: 3rem;
  animation: xsMarquee 50s linear infinite;
  width: max-content;
}
@keyframes xsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.xs-client-cell {
  flex: 0 0 auto;
  padding: 1rem 1.4rem;
  font-family: 'Inter', sans-serif;
  font-size: 1rem; font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--xs-muted);
  border: 1px solid var(--xs-border);
  border-radius: 8px;
  white-space: nowrap;
  background: var(--xs-surface);
  transition: color .25s, border-color .25s;
}
.xs-client-cell:hover { color: #9E1B4C; border-color: #9E1B4C; }

/* ───── PROCESS BAND ───── */
.xs-process { padding: 7rem clamp(1.5rem, 6vw, 6rem); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 1s, transform 1s; }
.xs-process.in { opacity: 1; transform: none; }
.xs-process::before {
  /* Mulberry radial haze removed so the process band matches the plain
     off-white tone of the Mission / Coverage sections above it. */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: none;
}
.xs-process-inner { max-width: 1280px; margin: 0 auto; position: relative; }
.xs-process-head { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-bottom: 4rem; }
@media (max-width: 800px) { .xs-process-head { grid-template-columns: 1fr; gap: 1rem; } }
.xs-process-head .xs-eyebrow { display: block; margin-bottom: 1.5rem; }
.xs-process-head h2 { font-size: clamp(2.6rem, 5.5vw, 4.6rem); letter-spacing: -0.04em; line-height: 1; }
.xs-process-head p { font-size: 1.1rem; color: var(--xs-muted); max-width: 46ch; line-height: 1.55; }
.xs-process-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
@media (max-width: 900px) { .xs-process-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .xs-process-grid { grid-template-columns: 1fr; } }
.xs-process-grid::before {
  content: ''; position: absolute;
  top: 24px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #9E1B4C 10%, #9E1B4C 90%, transparent);
  opacity: 0.4;
}
.xs-process-step {
  /* padding-top creates clearance under the mulberry dot (positioned at
     top: 16px) so the h3 title doesn't sit underneath it. Previously this
     space was provided by the xs-process-num element; that element was
     removed when the 01-05 numbering came out, so the spacing lives here now. */
  padding: 3rem 1.5rem 0 0;
  position: relative;
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--di), transform .8s var(--di);
}
.xs-process.in .xs-process-step { opacity: 1; transform: none; }
.xs-process-step::before {
  content: ''; position: absolute;
  top: 16px; left: 0; width: 18px; height: 18px;
  border-radius: 50%; background: #9E1B4C;
  box-shadow: 0 0 0 6px var(--xs-bg-dot, currentColor);
}
.xs-light .xs-process-step::before { box-shadow: 0 0 0 6px #F5F4EE; }
.xs-dark .xs-process-step::before { box-shadow: 0 0 0 6px #0C0C0B; }
.xs-process-num { font-family: 'DM Mono', monospace; font-size: 0.78rem; letter-spacing: 0.2em; color: #9E1B4C; margin-top: 3rem; margin-bottom: 1rem; }
.xs-process-step h3 { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 0.8rem; }
.xs-process-step p { font-size: 0.92rem; color: var(--xs-muted); line-height: 1.55; }

/* ───── PROJECT SHOWCASE ───── */
.xs-projects { padding: 7rem clamp(1.5rem, 6vw, 6rem); opacity: 0; transform: translateY(30px); transition: opacity 1s, transform 1s; }
.xs-projects.in { opacity: 1; transform: none; }
.xs-projects-inner { max-width: 1280px; margin: 0 auto; }
.xs-projects-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 3rem; gap: 2rem; flex-wrap: wrap; }
.xs-projects-head .xs-eyebrow { display: block; margin-bottom: 1rem; }
.xs-projects-head h2 { font-size: clamp(2.6rem, 5vw, 4.4rem); letter-spacing: -0.04em; line-height: 1; }
.xs-projects-all { font-family: 'DM Mono', monospace; font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: #9E1B4C; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; padding: 12px 20px; border: 1px solid #9E1B4C; border-radius: 999px; transition: gap .25s, background .25s, color .25s; }
.xs-projects-all:hover { gap: 16px; background: #9E1B4C; color: #fff; }
.xs-projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .xs-projects-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .xs-projects-grid { grid-template-columns: 1fr; } }
.xs-project-card {
  position: relative;
  background: var(--xs-surface);
  border: 1px solid var(--xs-border);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0; transform: translateY(30px);
  transition: opacity .8s var(--di), transform .8s var(--di), box-shadow .35s, border-color .35s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05);
}
.xs-projects.in .xs-project-card { opacity: 1; transform: none; }
.xs-dark .xs-project-card { box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 60px rgba(0,0,0,0.5); }
.xs-project-card:hover { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0,0,0,0.08), 0 30px 60px rgba(0,0,0,0.12); border-color: #9E1B4C; }
.xs-dark .xs-project-card:hover { box-shadow: 0 0 0 1px #9E1B4C inset, 0 30px 80px rgba(0,0,0,0.7), 0 0 60px rgba(158,27,76,0.2); }
.xs-project-photo { aspect-ratio: 4/3; overflow: hidden; background: #1a1a18; position: relative; }
.xs-project-photo::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 -40px 60px -20px rgba(0,0,0,0.25); pointer-events: none; }
.xs-project-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.xs-project-card:hover .xs-project-photo img { transform: scale(1.06); }
.xs-project-body { padding: 1.6rem 1.6rem 1.8rem; }
.xs-project-tag { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.2em; color: #9E1B4C; display: block; margin-bottom: 0.8rem; }
.xs-project-body h3 { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 0.6rem; }
.xs-project-body p { font-size: 0.88rem; color: var(--xs-muted); line-height: 1.5; margin-bottom: 1.2rem; }
.xs-project-link { font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: #9E1B4C; display: inline-flex; align-items: center; gap: 6px; transition: gap .25s; }
.xs-project-link i { font-style: normal; }
.xs-project-card:hover .xs-project-link { gap: 12px; }

/* ───── CTA BANNER ───── */
.xs-cta { position: relative; padding: 8rem clamp(1.5rem, 6vw, 6rem); overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 1s, transform 1s; }
.xs-cta.in { opacity: 1; transform: none; }
.xs-cta-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(158,27,76,0.22), transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(158,27,76,0.12), transparent 50%);
  pointer-events: none;
}
.xs-cta::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
}
.xs-light.xs-cta::after { background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px); }
.xs-cta-inner { position: relative; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 5rem; align-items: center; }
@media (max-width: 800px) { .xs-cta-inner { grid-template-columns: 1fr; gap: 2.5rem; } }
.xs-cta-text .xs-eyebrow { display: block; margin-bottom: 1.5rem; }
.xs-cta-text h2 { font-size: clamp(3rem, 6vw, 5.5rem); letter-spacing: -0.04em; line-height: 0.98; margin-bottom: 1.5rem; }
.xs-cta-text p { font-size: 1.15rem; color: var(--xs-muted); line-height: 1.55; max-width: 46ch; }
.xs-cta-actions { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
.xs-cta-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; padding: 1.2rem 1.6rem; border-radius: 14px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: transform .25s, box-shadow .25s, background .25s; }
.xs-cta-btn-primary { background: #9E1B4C; color: #fff; box-shadow: 0 8px 32px rgba(158,27,76,0.4); }
.xs-cta-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 48px rgba(158,27,76,0.55); }
.xs-cta-btn-ghost { background: transparent; border: 1px solid var(--xs-border); color: currentColor; }
.xs-cta-btn-ghost:hover { background: var(--xs-surface); border-color: #9E1B4C; }
.xs-cta-meta { display: flex; flex-direction: column; gap: 1rem; padding-top: 1rem; margin-top: 0.5rem; border-top: 1px solid var(--xs-border); }
.xs-cta-meta div { display: flex; flex-direction: column; gap: 4px; }
.xs-cta-meta strong { font-weight: 500; font-size: 0.95rem; }