/* ---- brand + nav ---- */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 34px; height: 34px; filter: invert(1); } /* white over difference blend */
.brand-name { font-weight: 700; font-size: clamp(20px, 2vw, 30px); letter-spacing: .01em; }
.site-nav { display: flex; gap: clamp(20px, 2.4vw, 44px); }
.site-nav a { font-weight: 700; font-size: 14px; letter-spacing: .12em; }

/* ---- hero copy ---- */
.hero-tagline {
  font-weight: 700; text-transform: uppercase; line-height: .98;
  font-size: clamp(28px, 4vw, 58px); letter-spacing: -0.01em; white-space: pre-line;
}
.hero-scroll { font-family: var(--font-cond); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; }

/* ---- positioning ---- */
.eyebrow {
  font-family: var(--font-cond); font-size: 13px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted); margin-bottom: clamp(20px, 4vh, 48px);
}
.statement {
  font-weight: 700; text-transform: uppercase; line-height: 1.02; letter-spacing: -0.015em;
  font-size: clamp(34px, 6.4vw, 116px); max-width: 20ch;
}

/* ---- services ---- */
.services::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url('../assets/images/topo.svg') no-repeat center 60% / min(1100px, 90%) auto;
  opacity: .14; pointer-events: none;
}
.services-head, .services-grid { position: relative; z-index: 1; }
.services-head { display: flex; align-items: center; gap: 20px; }
.services-label { font-family: var(--font-cond); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; }
.services-rule { height: 1px; flex: 1; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 12px); opacity: .5; }

.service-card {
  border-top: 1.5px solid var(--ink);
  padding: clamp(18px, 2vw, 30px) 0 clamp(28px, 4vw, 48px);
  display: flex; flex-direction: column; gap: clamp(28px, 6vh, 80px);
  min-height: clamp(300px, 40vh, 460px);
}
.service-card .icon { width: 40px; height: 40px; }
.service-card .card-body { margin-top: auto; }
.service-card h3 {
  font-weight: 700; text-transform: uppercase; line-height: 1.02;
  font-size: clamp(20px, 1.8vw, 30px); margin-bottom: 14px;
}
.service-card p { font-family: var(--font-cond); font-size: clamp(15px, 1.1vw, 18px); line-height: 1.35; max-width: 34ch; color: #333; }
.service-card .num { font-family: var(--font-cond); font-size: 13px; letter-spacing: .18em; color: var(--muted); }

/* ---- cta ---- */
.cta-link { display: block; }
.cta-link .l1, .cta-link .l2 {
  display: block; font-weight: 700; text-transform: uppercase; line-height: .98; letter-spacing: -0.01em;
}
.cta-link .l1 { font-size: clamp(30px, 5.5vw, 96px); }
.cta-link .l2 {
  font-size: clamp(16px, 1.4vw, 22px); letter-spacing: .04em; margin-top: clamp(18px, 3vh, 40px);
  text-transform: none; text-decoration: underline; text-underline-offset: 8px;
}

/* ---- footer ---- */
.footer-links { display: flex; gap: clamp(18px, 2vw, 36px); }
.footer-links a, .footer-copy { font-family: var(--font-cond); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.footer-copy { color: var(--muted); }