/* A business transformed: Lilies' three results on the left, Diane's words on the right and a
   no-obligation call to action closing the section. Written phone first, in the Client results
   palette: #f4f4ef ground, light Switzer figures, green accents and the glass quote card. */
.home main>.tr{background:#f4f4ef;padding-top:60px;padding-bottom:64px}
.tr h2{margin:0 0 28px;color:#205732;font-size:26px}
.tr-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center}
.tr-stats{display:grid;margin:0;padding:0;list-style:none}
.tr-stat{display:grid;justify-items:start;align-content:start;gap:8px;padding:18px 0;border-top:1px solid rgba(32,87,50,.14)}
.tr-stat:first-child{padding-top:0;border-top:0}
.tr-stat:last-child{padding-bottom:0}
/* On phones the before figure sits small with its arrow and the after figure large beneath, so
   long pairs like "Outdated site → Modern site" never break awkwardly. */
.tr-figure{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin:0;font-weight:500;line-height:1.05;white-space:nowrap}
.tr-was{color:#78877c;font-size:17px;letter-spacing:-.02em}
.tr-figure svg{flex:none;width:16px;height:16px;fill:none;stroke:#205732;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tr-now{flex-basis:100%;color:#205732;font-size:32px;letter-spacing:-.045em}
.tr-caption{max-width:42ch;margin:0;color:#56635a;font-size:14px;line-height:1.5}
.tr-quote{position:relative;margin:0;padding:22px;border:1px solid rgba(255,255,255,.9);border-radius:22px;background:linear-gradient(125deg,rgba(255,255,255,.7),rgba(255,255,255,.24));box-shadow:inset 0 1px 0 #fff,0 20px 50px rgba(32,87,50,.04);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.tr-quote blockquote{margin:0;color:#243a2c;font-size:16px;line-height:1.6;letter-spacing:-.01em}
.tr-quote figcaption{display:flex;align-items:center;gap:14px;margin-top:20px;color:#205732;font-size:13px;line-height:1.45}
.tr-quote img{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover}
.tr-quote b{display:block;margin-bottom:3px;font-size:15px;font-weight:500}
.tr-quote figcaption span span{color:#56635a}
.tr-cta{display:grid;gap:20px;margin-top:40px;padding-top:32px;border-top:1px solid rgba(32,87,50,.14)}
.tr-cta h3{margin:0;color:#205732;font-size:26px;font-weight:500;line-height:1.15;letter-spacing:-.035em}
.tr-cta-copy p{margin:10px 0 0;color:#56635a;font-size:16px;line-height:1.6}
.tr-cta-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;padding:0 24px;border-radius:16px;border-color:rgba(255,255,255,.2);background:#205732;color:#fff;font-size:17px;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 24px rgba(32,87,50,.14);transform:none;transition:background-color .2s ease,box-shadow .2s ease}
/* Keep the hit area still and interpolate solid colours rather than swapping a gradient. */
.tr-cta-button:hover,.tr-cta-button:focus-visible{background-color:#28673d;color:#fff;transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 28px rgba(32,87,50,.2)}
.tr-cta-button:focus-visible{outline:2px solid #205732;outline-offset:4px}
.tr-cta-button:active{background-color:#194627;color:#fff;transform:none}
@media(prefers-reduced-motion:reduce){.tr-cta-button{transition:none}}
.tr-cta-note{margin:12px 0 0;color:#56635a;font-size:13px;text-align:center}
@media(min-width:601px) and (max-width:850px){
  .home main>.tr{padding-top:72px;padding-bottom:72px}
  .tr-cta-button{width:auto;justify-self:start}
  .tr-cta-note{text-align:left}
}
@media(min-width:851px){
  .home main>.tr{padding-top:96px;padding-bottom:110px}
  .tr h2{margin-bottom:46px;font-size:clamp(26px,2.6vw,36px)}
  .tr-layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,72px)}
  .tr-figure{gap:6px 16px;font-size:clamp(30px,3vw,44px);letter-spacing:-.05em}
  .tr-was,.tr-now{font-size:inherit;letter-spacing:inherit}
  .tr-now{flex-basis:auto}
  .tr-figure svg{width:.6em;height:.6em;stroke-width:1.6}
  .tr-caption{font-size:15px}
  .tr-stat{padding:26px 0}
  .tr-quote{padding:30px;border-radius:24px}
  .tr-quote blockquote{font-size:17px}
  .tr-cta{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:48px;margin-top:64px;padding-top:44px}
  .tr-cta h3{font-size:clamp(28px,2.6vw,36px)}
  .tr-cta-copy p{max-width:56ch}
  .tr-cta-button{width:340px;min-height:64px}
}
@media(prefers-reduced-transparency:reduce){.tr-quote{background:#fff}}