/* Stella: a frosted panel with an example summary. */
.stella__panel {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 72px); align-items: center;
  padding: clamp(28px, 5vw, 64px); border-radius: 32px;
  background: radial-gradient(120% 140% at 0% 0%, #dff3f6 0%, #eef1ff 45%, var(--mist) 100%);
  border: 1px solid #ffffff;
  box-shadow: 0 40px 80px -40px #087e9644;
}
.stella__copy { display: grid; gap: 18px; }
.stella__copy > .label { color: #055768; } /* brand --teal-ink: small teal text on a tint (4.5:1) */
.stella__copy > p:not(.label):not(.note) { color: var(--ink-2); font-size: var(--step-1); }
.phone span { color: var(--ink); user-select: all; }
.summary { display: grid; gap: 12px; padding: 24px; border-radius: 20px; background: #ffffffd9; border: 1px solid var(--line); box-shadow: 0 20px 40px -24px #10161a33; }
.summary__from { color: var(--ink-2); }
.summary__title { font: 600 1.15rem/1.3 var(--font-display); }
.summary dl { margin: 0; display: grid; gap: 10px; }
.summary dl div { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--line); }
.summary dt { font: 500 0.75rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal); }
.summary dd { margin: 0; }
@media (max-width: 860px) { .stella__panel { grid-template-columns: 1fr; } }

/* Services */
.services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.glass { display: grid; align-content: start; gap: 10px; min-height: 180px; padding: 24px; border-radius: 18px; background: linear-gradient(160deg, #ffffff, var(--mist)); border: 1px solid var(--line); transition: transform 0.3s, box-shadow 0.3s; }
.glass:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px #087e9655; }
.glass p { color: var(--ink-2); font-size: 0.97rem; }
.services .note { margin-top: 18px; }

.how { background: var(--mist); }
.how__steps { list-style: none; padding: 0; margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 32px; counter-reset: s; }
.how__steps li { display: grid; gap: 10px; }
.how__steps .mono { justify-self: start; padding: 4px 10px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); color: var(--teal); }
.how__steps p { color: var(--ink-2); }

.contact { display: grid; justify-items: start; gap: 22px; }
.contact h2 { font-size: var(--step-4); max-width: 14ch; line-height: 0.98; letter-spacing: -0.05em; }
.contact > p { color: var(--ink-2); font-size: var(--step-1); }
/* Phones: the contact and Stella buttons stacked full width, like the hero's, with the email and call links under them. */
@media (max-width: 600px) {
  .contact .ctas, .contact__alt { width: 100%; }
  .contact .ctas { flex-direction: column; align-items: stretch; }
  /* The email and call links stacked, centred, each a full tap target. */
  .contact__alt { display: grid; justify-items: center; }
  .contact__lead, .contact__sep { display: none; }
  .contact__alt a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Stella's buttons the same way, with the call line centred under them and the number a full tap target. */
  .stella .ctas { flex-direction: column; align-items: stretch; }
  .stella .phone { text-align: center; }
  .stella .phone a { display: inline-flex; align-items: center; min-height: 44px; }
}