/* services — page styles */

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 0; border-top: 1.5px solid var(--ink); border-left: 1px solid var(--rule-thin); }
.card { padding: clamp(1.5rem, 2.6vw, 2.2rem); border-right: 1px solid var(--rule-thin); border-bottom: 1px solid var(--rule-thin); transition: background .25s; }
.card:hover { background: var(--paper-2); }
.card__a { display: flex; flex-direction: column; height: 100%; }
.card__x { margin-top: auto; padding-top: 1.2rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.card__a:hover .card__x { text-decoration: underline; text-underline-offset: 3px; }
.card__n { font-family: var(--display); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.1em; }
.card__t { font-size: var(--step-2); margin-block: 0.6rem 0.8rem; }
.card__b { font-size: 0.92rem; color: var(--fg-2); }
.card__l { list-style: none; padding: 0; margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.card__l li {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.35rem 0.6rem; border: 2px solid var(--ink);
}



/* three-up job plates */
.work { border-top: 1.5px solid var(--ink); }
.work__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); }
.shot { border: 1.5px solid var(--ink); background: var(--paper); }
.shot img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.shot figcaption { border-top: 1.5px solid var(--ink); padding: 0.7rem 0.85rem; }
.shot figcaption strong {
  display: block; font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-1); line-height: 1;
}
.shot figcaption span { display: block; margin-top: 0.35rem; font-size: 0.8rem; color: var(--fg-3); }

.end { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem clamp(2rem, 5vw, 4rem); align-items: center; }
.end__plate { border: 1.5px solid var(--ink); background: var(--paper); }
.end__plate img { width: 100%; }
.end h2 { font-size: var(--step-3); margin-top: 1rem; margin-bottom: 1.4rem; }
@media (max-width: 800px) { .end { grid-template-columns: 1fr; } }
.end__tel {
  display: block; font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1; white-space: nowrap;
}
.end__tel:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 4px; }
.end__note { font-size: 0.9rem; color: var(--fg-3); margin-block: 0.9rem 1.4rem; }