/* services.css — styles specific to the Services page */

.page-hero{ padding: 0 0 2.8rem; max-width: 60ch; }
.page-hero h1{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height:1.05; letter-spacing:-0.015em; margin-bottom:.9rem; }
.page-hero p{ font-size:1.02rem; color:var(--ink-soft); line-height:1.65; }
.page-hero p b{ color:var(--ink); font-weight:500; }

.section-label{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.3rem; margin-bottom:1.6rem; }

/* ── Service notes (pinned index cards, single column, non-interactive) ── */
.services{ display:flex; flex-direction:column; gap:2.1rem; margin-bottom:3.5rem; }
.service-card{
  position:relative; background:#fdfbf5; border:1px solid var(--ink);
  box-shadow: 3px 4px 0 rgba(38,36,33,0.14); padding:1.5rem 1.7rem 1.6rem;
  display:grid; grid-template-columns: 90px 1fr; gap:1.4rem; align-items:start;
  /* pins the rotated card to its own layer so the text doesn't get re-hinted (i.e. jitter) on scroll */
  will-change: transform; backface-visibility: hidden;
}
/* translateZ(0) pins these onto their own GPU layer — Firefox otherwise keeps
   re-rasterizing the tilted text on repaint, which looks like a constant jitter */
.service-card:nth-child(1){ transform: rotate(-.5deg) translateZ(0); }
.service-card:nth-child(2){ transform: rotate(.4deg) translateZ(0); }
.service-card:nth-child(3){ transform: rotate(-.3deg) translateZ(0); }
.service-pin{ position:absolute; top:-9px; left:26px; width:16px; height:16px; border-radius:50%; background: var(--accent); border:1px solid var(--accent-deep); }
.service-icon{
  width:90px; height:90px; border:1.4px dashed var(--line); border-radius:2px;
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
  background: repeating-linear-gradient(135deg, rgba(38,36,33,0.03) 0 10px, transparent 10px 20px);
}
.service-icon i{ font-size:34px; opacity:.6; }
.service-stamp{ font-family:'IBM Plex Mono',monospace; font-size:.62rem; border:1.3px solid var(--ink); color:var(--ink); padding:.14rem .45rem; transform: rotate(-2deg) translateZ(0); letter-spacing:.03em; display:inline-block; margin-bottom:.5rem; }
.service-card h3{ font-family:'Space Grotesk',sans-serif; font-size:1.2rem; font-weight:700; margin-bottom:.5rem; }
.service-card p{ font-size:.92rem; color:var(--ink-soft); line-height:1.6; margin-bottom:.7rem; max-width:56ch; }
.service-tools{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; color: var(--accent-deep); }

/* ── "Also open to" note — deliberately plainer than the evidenced service cards ── */
.general-note{
  border: 1.6px dashed var(--ink); padding: 1.4rem 1.6rem; margin-bottom: 3.2rem;
  background: transparent;
}
.general-note h3{ font-family:'Space Grotesk',sans-serif; font-size:1.05rem; font-weight:700; margin-bottom:.5rem; }
.general-note p{ font-size:.9rem; color:var(--ink-soft); line-height:1.6; margin-bottom:.9rem; max-width:56ch; }
.role-tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.role-tag{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; border:1px solid var(--ink-soft); color:var(--ink-soft); padding:.3rem .6rem; }

/* ── Process ── */
.process{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1.4rem; margin-bottom:1rem; }
.step{ position:relative; padding-left:2.6rem; }
.step-num{
  position:absolute; left:0; top:-.1rem; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:1.3rem; color: var(--accent-deep);
}
.step h4{ font-family:'Space Grotesk',sans-serif; font-size:.98rem; font-weight:700; margin-bottom:.35rem; }
.step p{ font-size:.85rem; color:var(--ink-soft); line-height:1.55; }

@media (max-width: 620px){
  .service-card{ grid-template-columns: 1fr; }
  .service-icon{ width:64px; height:64px; }
  .process{ grid-template-columns: 1fr; gap:1.6rem; }
}