/* Concrete service examples: all content remains readable without motion or JS. */
.service-detail .service-hero-grid { grid-template-columns:minmax(0,1.04fr) minmax(0,.86fr); gap:clamp(32px,5vw,78px); }
.website-proof,.lead-example { min-width:0; margin:0; border:1px solid var(--service-line); border-radius:22px; background:linear-gradient(145deg,#20201d,#101313); overflow:hidden; box-shadow:0 22px 60px #0004; }
.example-topline { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; padding:20px 24px; border-bottom:1px solid var(--service-line); color:var(--service-copy); font-size:.72rem; }
.example-topline span:first-child { color:var(--service-orange-soft); }
.website-proof > a { display:block; overflow:hidden; }
.website-proof img { display:block; width:100%; height:auto; aspect-ratio:1440/980; object-fit:cover; transition:transform .5s ease; }
.website-proof > a:hover img { transform:scale(1.025); }
.website-proof figcaption { padding:24px; }
.website-proof figcaption strong { color:#f0f2f0; font-size:1.35rem; letter-spacing:-.035em; }
.website-proof figcaption p { color:var(--service-copy); font-size:.9rem; line-height:1.65; margin:12px 0 18px; }
.website-proof a:focus-visible { outline:3px solid var(--service-orange); outline-offset:-4px; }
.lead-example-steps { list-style:none; padding:24px; margin:0; display:grid; gap:26px; }
.example-label { display:block; font-size:.73rem; color:var(--service-orange-soft); margin-bottom:10px; }
.search-example { display:flex; align-items:center; gap:12px; border:1px solid #ffffff26; border-radius:24px; padding:12px 16px; color:#e9eeeb; font-size:.82rem; }
.search-example > span { font-size:1.5rem; line-height:1; color:var(--service-orange); }
.search-result-example { padding-left:16px; border-left:2px solid var(--service-orange); }
.search-result-example small,.example-enquiry small { display:block; font-size:.71rem; color:var(--service-copy); line-height:1.6; }
.search-result-example strong { display:block; color:#f0f2f0; font-size:1.1rem; line-height:1.4; margin:7px 0; }
.search-result-example p { margin:0; font-size:.85rem; line-height:1.65; color:var(--service-copy); }
.example-enquiry { display:flex; align-items:start; gap:12px; }
.example-enquiry > span { color:var(--service-orange); font-size:1.4rem; }
.example-enquiry strong { display:block; color:#f0f2f0; font-size:.92rem; line-height:1.5; margin-bottom:6px; }
.example-note { margin:0; padding:0 24px 24px; font-size:.71rem; color:var(--service-copy); line-height:1.65; }
.automation-approved-reply { margin:20px 0; padding:16px 18px; border-left:2px solid var(--service-orange); background:#f47b3609; }
.automation-approved-reply p { margin:0; color:#dce2df; font-size:.85rem; line-height:1.75; }
[data-enquiry-stage] { transition:box-shadow .45s ease,background .45s ease; border-radius:8px; }
[data-enquiry-stage].is-active { box-shadow:0 0 0 1px #f47b364d,0 0 32px #f47b3610; background:#f47b360d; }
@media (max-width:920px) { .service-detail .service-hero-grid { grid-template-columns:minmax(0,1fr); } .website-proof,.lead-example,.service-detail .automation-preview { width:100%; max-width:620px; justify-self:center; } }
@media (max-width:650px) { .example-topline { padding:16px 20px; } .lead-example-steps { padding:20px; gap:24px; } .website-proof figcaption { padding:20px; } .example-note { padding:0 20px 20px; } .search-example { font-size:.76rem; } }
@media (prefers-reduced-motion:reduce) { .website-proof img,[data-enquiry-stage] { transition:none; } }

.service-detail .service-closing .service-next-label { margin:26px 0 8px; color:var(--service-orange-soft); font-size:.78rem; font-weight:600; }
.service-detail .service-closing .service-next-copy { max-width:640px; margin:16px 0 0; color:var(--service-copy); font-size:1rem; line-height:1.75; }

/* Make the examples readable at phone size without enlarging every heading. */
.service-detail .example-topline,
.service-detail .example-label,
.service-detail .example-note,
.service-detail .search-result-example small,
.service-detail .example-enquiry small { font-size: .8125rem; line-height: 1.6; }
.service-detail .search-example { font-size: .9375rem; line-height: 1.5; }
.service-detail .search-result-example p,
.service-detail .website-proof figcaption p { font-size: .9375rem; }
.service-detail .service-hero-actions .text-link { min-height: 44px; display: inline-flex; align-items: center; }
.service-detail .service-closing .service-next-label { font-size: .875rem; }
@media(max-width:650px) {
  .service-detail .automation-hero-note,
  .service-detail .automation-example-note,
  .service-detail .lead-review > p { font-size: .875rem; line-height: 1.65; }
  .service-detail .automation-preview-head,
  .service-detail .automation-preview-foot,
  .service-detail .automation-message small,
  .service-detail .automation-lead small,
  .service-detail .automation-preview-arrow { font-size: .8125rem; line-height: 1.5; letter-spacing: .025em; }
  .service-detail .automation-approved-reply p { font-size: .9375rem; line-height: 1.65; }
  .service-detail .lead-review-rows span,
  .service-detail .lead-review-rows strong { font-size: .9375rem; }
  .service-detail .automation-step-kicker { font-size: .875rem; }
  .service-detail .service-hero-actions { gap: 12px 24px; }
}