/* A section introduction reads from service name to explanation. */
@media (min-width: 801px) {
  .work-intro { display:grid; grid-template-columns:1fr 1fr; column-gap:7%; align-items:end; }
  .work-intro .eyebrow { grid-column:1/-1; }
  .work-intro .section-note { grid-column:2; margin:0; max-width:44ch; }
  #crm-scope .crm-copy { grid-column:2; grid-row:1; }
  #crm-scope .crm-device-scene { grid-column:1; grid-row:1; }
}
.graphic-design-page .design-preview { background:transparent; aspect-ratio:auto; border-radius:0; overflow:visible; }
.graphic-design-page .sample-window { width:100%; box-shadow:none; }
:is(#growth-work,#leads-work) .client-list {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.85fr);
  gap:10px; padding:10px; border-radius:22px; background:#141515; align-items:stretch;
}
:is(#growth-work,#leads-work) .client-row { border-radius:14px; background:#202121; color:#f6f6f4; }
:is(#growth-work,#leads-work) .client-row:first-child { grid-row:span 2; }
:is(#growth-work,#leads-work) summary { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:14px; padding:clamp(20px,2.2vw,32px); }
:is(#growth-work,#leads-work) .client-row:first-child summary { display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; height:100%; }
:is(#growth-work,#leads-work) .client-row:first-child[open] summary { height:auto; }
.seo-copy { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.seo-copy strong { font-size:clamp(22px,2vw,32px); line-height:1.1; font-weight:500; letter-spacing:-.045em; }
.seo-copy > span:not(.seo-badge,.seo-more) { color:#c2c3c1; font-size:15px; max-width:28ch; line-height:1.5; letter-spacing:0; }
.seo-badge { display:grid; place-items:center; width:32px; height:32px; margin-bottom:8px; border-radius:9px; background:#c9f566; color:#171817; }
.seo-badge svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.seo-more { margin-top:5px; border-radius:20px; padding:7px 12px; background:#303131; font-size:12px; letter-spacing:.02em; }
@media(max-width:800px) {
  :is(#growth-work,#leads-work) .client-list { grid-template-columns:1fr; }
  :is(#growth-work,#leads-work) .client-row:first-child { grid-row:auto; }
  :is(#growth-work,#leads-work) .client-row:first-child summary,:is(#growth-work,#leads-work) summary { display:grid; height:auto; grid-template-columns:1fr 1fr; }
}
@media(max-width:520px) {
  :is(#growth-work,#leads-work) .client-row:first-child summary,:is(#growth-work,#leads-work) summary { grid-template-columns:1fr; }

}

/* Illustrations rest on the same surface as the page. Each silhouette depicts a different job. */
:is(#growth-work,#leads-work) .client-row { background: var(--bg); }
.ui-diagram { position:relative; display:grid; align-content:center; gap:8px; width:min(100%,232px); margin:auto; padding:18px; color:#efefea; font-weight:500; font-family:inherit; font-size:13px; line-height:1.35; letter-spacing:0; }
:is(#growth-work,#leads-work) .ui-diagram small { display:block; color:#b7bdb7; font-size:10px; margin:0; letter-spacing:.04em; }
.ui-diagram em { color:#c2e292; font-size:10px; font-style:normal; }
.lead-art { display:grid; width:100%; align-items:center; min-height:158px; }
.audit-root,.audit-path,.route-source,.route-owner,.follow-timeline b { background:#151717; border:1px solid #353938; border-radius:8px; padding:9px 10px; }
.audit-root { justify-self:start; }.audit-path { position:relative; margin-left:20px; display:flex; justify-content:space-between; gap:8px; }
.audit-path::before { content:''; position:absolute; left:-14px; bottom:50%; width:12px; height:32px; border-left:1px solid #71806c; border-bottom:1px solid #71806c; }
.trend-window,.plan-sheet,.enquiry-window { border:1px solid #353938; border-radius:13px; background:var(--bg); box-shadow:0 8px 18px #0005; }
.trend-window svg { display:block; width:100%; overflow:visible; }.axis-label { display:flex; justify-content:space-between; font-size:9px; color:#aeb3ae; }
.plan-sheet { transform:rotate(3deg); }.plan-sheet b { display:flex;gap:10px;font-size:12px; }.plan-label,.receipt { justify-self:end; border-radius:15px; padding:5px 10px;background:#20271d; color:#ceddbc; font-size:10px; }
.enquiry-window { text-align:left; transform:rotate(-3deg); }.form-field { padding:9px; border-radius:5px; background:#202322;color:#d3d8d4;font-size:12px; }.receipt { margin-right:-24px; box-shadow:0 4px 12px #0005; }
.route-map { gap:0; }.route-source { justify-self:start; margin-top:5px; }.route-line { height:18px; margin-left:30px; border-left:2px dotted #b2c594; }.route-owner { display:flex;gap:8px;align-items:center; margin-left:16px; }.route-owner i { border-radius:50%;background:#d8e7ed;color:#253239;padding:5px;font-size:10px;font-style:normal; }.route-owner em { margin-left:auto; }
.follow-timeline > span { padding-left:14px; border-left:2px solid #45543b; color:#bbc3ba; }.follow-timeline b { display:flex;justify-content:space-between;align-items:center; }
#growth-benefits { background:var(--bg);color:var(--text); }
#growth-benefits :is(.eyebrow,p,.benefit>span) { color:#c8cbc7; }
#growth-benefits .benefit { background:transparent; border:0; border-radius:0; padding:0; box-shadow:none; backdrop-filter:none; }
@keyframes ui-status-pulse { 50% { opacity:.45; } }
@media(prefers-reduced-motion:no-preference) {
  .scene-in-view .signal-dot,.scene-in-view .scan-result i { animation:ui-status-pulse 3.6s ease-in-out 1.8s infinite; }
  .service-details-paused .scene-in-view * { animation-play-state:paused; }
}
.scan-preview { border:1px solid #373b37;border-radius:12px;gap:12px;text-align:left; }
.scan-address { background:#1b1e1b;padding:9px;border-radius:5px;font-size:13px; }
.scan-meter { height:3px;background:#bddb9b;transform-origin:left; }
.scan-result { display:flex;align-items:center;gap:8px; }.scan-result i{background:#c3dfaa;color:#182019;border-radius:50%;font-style:normal;padding:2px 6px;}
.handover-wire{width:100%;height:32px;display:block}.route-owner i,.signal-dot{transform-box:fill-box;transform-origin:center}
#growth-benefits .benefit>span {border:0;padding-top:0}
@media(min-width:1001px){#growth-benefits .benefit::after{background:rgb(255 255 255 / 43%);}}