/* Approved Services spread: factual offers with original work previews. */
.services-edit {
  --offer-accent: #b20f4d;
  --offer-ink: #111;
  --offer-tint: color-mix(in oklch, var(--offer-accent) 5%, #fff);
  --offer-active: color-mix(in oklch, var(--offer-accent) 8%, #fff);
  --offer-space-small: 12px;
  --offer-space-medium: 16px;
  --offer-space-large: 24px;
}
.services-edit .services-intro { margin-bottom:var(--offer-space-large); }
.services-edit .services-intro .brief-button { background:transparent;color:var(--offer-accent) !important; }
.services-edit .services-intro .brief-button:hover { background:var(--offer-accent);color:#fff !important; }
.services-edit .service-offers { gap:var(--offer-space-large); }
.services-edit .service-offer {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-items:start;
  gap:var(--offer-space-medium);
  padding:var(--offer-space-large);
  border:1px solid var(--offer-ink);
  border-radius:0;
  background:#fff;
  box-shadow:none;
  transition:border-color 180ms ease;
}
.services-edit .service-offer--tinted { background:var(--offer-tint); }
.services-edit .service-offer::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:var(--offer-active);
  opacity:0;
  pointer-events:none;
  transition:opacity 220ms ease;
}
.services-edit .service-offer > * { position:relative;z-index:1; }
.services-edit .service-offer:is(:hover,:focus-within) { border-color:var(--offer-accent); }
.services-edit .service-offer:is(:hover,:focus-within)::before { opacity:1; }
.services-edit .service-offer h2 { font-size:clamp(22px,2.1vw,28px);line-height:1.15; }
.services-edit .offer-story { display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:var(--offer-space-medium);align-items:start;min-width:0; }
.services-edit .offer-story p { font-size:.9375rem;line-height:1.5;max-width:32ch; }
.services-edit .offer-example { display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;min-height:44px;font-size:.8125rem;line-height:1.4;text-decoration:none; }
.services-edit .offer-example > span { text-decoration:underline;text-underline-offset:4px; }
.services-edit .offer-example img { display:block;height:120px;width:auto;max-width:100%;object-fit:contain;border:0;border-radius:0;box-shadow:none;filter:none; }
.services-edit .service-offer--identity .offer-story { display:flex;flex-direction:column;gap:var(--offer-space-small); }
.services-edit .service-offer--identity .offer-story p { max-width:48ch; }
.services-edit .offer-example--brand { width:min(100%,360px); }
.services-edit .offer-example--brand img { width:100%;height:auto; }
.services-edit .offer-request {
  display:flex;
  justify-content:space-between;
  align-items:center;
  align-self:end;
  gap:var(--offer-space-medium);
  min-height:44px;
  margin:0;
  padding:var(--offer-space-small) var(--offer-space-medium);
  border:1px solid var(--offer-accent);
  border-radius:0;
  background:var(--offer-accent);
  color:#fff;
  font-size:.9375rem;
  line-height:1.3;
  transition:background-color 180ms ease,border-color 180ms ease;
}
.services-edit .offer-request:hover { background:var(--offer-ink);border-color:var(--offer-ink);color:#fff; }
.services-edit :is(.offer-request,.offer-example):focus-visible { outline:2px solid var(--offer-accent);outline-offset:4px; }
.services-edit .services-note { margin-top:var(--offer-space-large); }
body[data-page="services"] > .motion-toggle { position:static;min-height:44px;margin:0 0 24px clamp(18px,4vw,56px); }
body[data-page="services"] .footer-bar { padding-bottom:24px !important; }
@media(max-width:760px) {
  .services-edit .service-offers { gap:var(--offer-space-medium); }
  .services-edit .service-offer { padding:20px; }
  .services-edit .offer-story { grid-template-columns:minmax(0,1fr) 96px; }
  .services-edit .offer-request { font-size:.875rem; }
}
@media(max-width:360px) {
  .services-edit .service-offer { padding:var(--offer-space-medium); }
  .services-edit .offer-story { grid-template-columns:minmax(0,1fr) 80px;gap:var(--offer-space-small); }
  .services-edit .offer-story p { font-size:.875rem; }
}
html[data-motion-paused="true"] .services-edit :is(.service-offer,.offer-request),
html[data-motion-paused="true"] .services-edit .service-offer::before { transition:none; }
@media(prefers-reduced-motion:reduce) {
  .services-edit :is(.service-offer,.offer-request,.brief-button),
  .services-edit .service-offer::before { transition:none; }
}