/* Keep the tiles; remove the control-panel tone. */
.homepage #services .services-intro h2 {
  max-width: 800px;
  font-family: var(--body);
  font-size: clamp(3rem, 5vw, 4.8rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.06em;
  text-transform: none;
}

.homepage #services .services-intro h2 span { color: #f47b36; }

.homepage #services .services-intro > p {
  color: #bdc5c4;
  font-size: 1rem;
  line-height: 1.75;
}

.homepage #services .service-deck {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  border: 0;
  background: transparent;
}

.homepage #services .service-panel,
.homepage #services .service-panel + .service-panel {
  min-height: clamp(340px, 31vw, 410px);
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid rgba(220, 225, 224, .12);
  border-radius: 22px;
  background:
    linear-gradient(160deg, rgba(24, 24, 22, .9), rgba(8, 10, 10, .86)),
    rgba(8, 10, 10, .72);
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

.homepage #services .service-panel::before {
  inset: auto -20% -46%;
  height: 72%;
  background: radial-gradient(ellipse, rgba(244,119,46,.2), transparent 68%);
  opacity: .35;
  transform: none;
}

.homepage #services .service-panel::after { display: none; }

.homepage #services .service-panel:hover,
.homepage #services .service-panel:focus-visible {
  border-color: rgba(244,119,46,.42);
  background: linear-gradient(160deg, rgba(33, 27, 22, .94), rgba(10, 10, 9, .9));
  box-shadow: 0 24px 52px rgba(0,0,0,.26);
  transform: translateY(-4px);
}

.homepage #services .service-panel:hover::before,
.homepage #services .service-panel:focus-visible::before {
  opacity: .6;
  transform: none;
}

.homepage #services .service-panel-number {
  color: #f29a66;
  font: 600 .78rem/1.45 var(--body);
  letter-spacing: .01em;
  text-transform: none;
}

.homepage #services .service-panel-copy {
  margin-top: clamp(52px, 6vw, 82px);
}

.homepage #services .service-panel h3 {
  max-width: 12ch;
  color: #f0f2f0;
  font: 600 clamp(2rem, 3vw, 3rem)/1.02 var(--body);
  letter-spacing: -.055em;
  text-transform: none;
}

.homepage #services .service-panel:hover h3,
.homepage #services .service-panel:focus-visible h3 { color: #fff; }

.homepage #services .service-panel-copy p {
  max-width: 31ch;
  margin-top: 18px;
  color: #b9c1c0;
  font-size: .96rem;
  line-height: 1.7;
}

.homepage #services .service-panel-link {
  margin-top: auto;
  padding-top: 22px;
  border-top: 0;
  color: #e3e7e5;
  font-size: .87rem;
}

.homepage #services .service-panel-link b {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: rgba(244,119,46,.13);
  color: #f47b36;
  font-size: 1rem;
}

.homepage #services .service-panel:hover .service-panel-link b,
.homepage #services .service-panel:focus-visible .service-panel-link b {
  background: #f4772e;
  color: #111314;
  transform: translateX(3px);
}

.homepage #services .services-note {
  margin-top: 22px;
  color: #939d9e;
}

@media (max-width: 900px) {
  .homepage #services .service-deck { grid-template-columns: minmax(0, 1fr); }
  .homepage #services .service-panel,
  .homepage #services .service-panel + .service-panel { min-height: 280px; }
  .homepage #services .service-panel-copy { margin-top: 38px; }
  .homepage #services .service-panel h3 { max-width: none; }
  .homepage #services .service-panel-copy p { max-width: 52ch; }
}

@media (max-width: 650px) {
  .homepage #services .services-intro h2 { font-size: clamp(2.6rem, 11vw, 3.5rem); }
  .homepage #services .service-panel,
  .homepage #services .service-panel + .service-panel { min-height: 260px; border-radius: 18px; }
}

/* A problem-led service chooser, using native keyboard-accessible disclosures. */
.homepage #services .service-chooser { margin: 0 0 44px; padding: 28px 0; border-top: 1px solid rgba(220,225,224,.18); border-bottom: 1px solid rgba(220,225,224,.18); }
.chooser-heading h3 { font: 600 clamp(1.4rem,2.4vw,2rem)/1.2 var(--body); text-transform: none; letter-spacing: -.03em; color: #f0f2f0; }
.chooser-heading p, .chooser-answer > p, .chooser-unsure { color: #bdc5c4; font-size: .95rem; line-height: 1.7; }
.chooser-heading p { margin: 10px 0 22px; }
.chooser-option + .chooser-option { border-top: 1px solid rgba(220,225,224,.12); }
.chooser-option summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; color: #f0f2f0; font: 600 1.05rem/1.5 var(--body); }
.chooser-option summary::-webkit-details-marker { display: none; }
.chooser-option summary > span { color: #f47b36; font-size: 1.5rem; flex-shrink: 0; }
.chooser-option[open] summary > span { transform: rotate(45deg); }
.chooser-option summary:focus-visible { outline: 2px solid #f47b36; outline-offset: 6px; }
.chooser-answer { padding: 0 0 24px; max-width: 820px; }
.chooser-answer .chooser-recommendation { color: #f29a66; font-weight: 600; margin-bottom: 8px; }
.chooser-actions { display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center; margin-top: 22px; }
.chooser-unsure { margin-top: 20px; }
.chooser-unsure a { color: #f29a66; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 650px) { .chooser-actions { align-items: stretch; flex-direction: column; } .chooser-actions .button { width: 100%; white-space: normal; text-align: center; } .chooser-option summary { font-size: 1rem; } }