.offer-summary {
  display: grid;
  gap: 12px;
}

.offer-summary p { margin: 0; }

.offer-savings {
  color: var(--preview-navy);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  font-weight: 600;
  line-height: 1.45;
}

.offer-booking-note {
  color: #4f5d6c;
  font-size: .9rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Use the Services page's red action button, with a handset for dialing. */
.offer-page .nav-cta::before,
.offer-page .offer-phone-icon {
  --handset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 3h3l2 5-2.5 2a15 15 0 0 0 5.5 5.5l2-2.5 5 2v3c0 1.7-1.4 3-3 3A18 18 0 0 1 3 6c0-1.6 1.3-3 3-3Z'/%3E%3C/svg%3E");
  background: currentColor;
  mask: var(--handset) center / contain no-repeat;
}

.offer-page .offer-call-actions {
  --offer-number-size: clamp(1.65rem, 2.2vw, 2rem);
  display: grid;
  width: min(100%, 18.5rem);
}

.offer-page .offer-call-actions .button {
  min-height: 72px;
  padding: 12px 16px;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1vw, 16px);
}

.offer-call-actions .offer-phone-icon {
  font-size: var(--offer-number-size);
  width: 1.5em;
  height: 1.5em;
}

.offer-call-label {
  display: grid;
  gap: 2px;
  text-align: left;
  font-size: 1rem;
  line-height: 1.15;
}

.offer-phone-number {
  font: 700 var(--offer-number-size)/1 "Barlow Condensed", sans-serif;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .offer-page .offer-call-actions { width: 100%; }
}

/* The Services hero crops photography, but the coupon needs all four edges. */
.offer-page [hidden] { display: none !important; }
@media (max-width: 320px) {
  body.offer-page { min-width: 0; }
}

.offer-page .offer-media:has(img:not([hidden])) {
  display: grid;
  align-items: center;
  justify-items: end;
  padding: clamp(16px, 1.6vw, 30px);
  background: var(--preview-navy);
}

.offer-page .offer-media img {
  display: block;
  width: 59%;
  height: auto;
  border-radius: 8px;
}

.offer-page .offer-media:has(img:not([hidden]))::before,
.offer-page .offer-media:has(img:not([hidden]))::after { content: none; }

@media (max-width: 1024px) {
  .offer-page .offer-media:has(img:not([hidden])) {
    min-height: auto;
    justify-items: center;
  }
  .offer-page .offer-media img { width: min(100%, 620px); }
}