.before-after { padding: 125px 4.6vw; background: linear-gradient(110deg, #f58424 0 34%, #fff6ed 34% 100%); }
.before-after-heading { max-width: 1340px; margin: 0 auto 54px; display: grid; grid-template-columns: 1.05fr 1fr .8fr; align-items: end; gap: 35px; }
.before-after-heading .eyebrow { color: #225536; }
.before-after-heading h2 { margin: 0; color: #225536; font-family: 'Playfair Display', serif; font-size: clamp(42px, 4.4vw, 64px); font-weight: 600; letter-spacing: -.045em; line-height: .98; }
.before-after-heading h2 em { color: #fff; }
.before-after-heading > p { margin: 0; color: #355440; font-size: 14px; line-height: 1.65; }
.transformation-grid { max-width: 1340px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.transformation { background: #fff; box-shadow: 0 16px 35px rgba(78, 48, 20, .13); }
.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: #fff; }
.comparison figure { position: relative; min-height: 295px; margin: 0; overflow: hidden; background: #e1ded9; }
.comparison img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.comparison figure:first-child img { filter: saturate(.7) brightness(.82); }
.comparison figcaption { position: absolute; top: 14px; left: 14px; padding: 7px 10px; color: #fff; background: #225536; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.comparison figure:last-child figcaption { background: #f58424; }
.transformation-copy { padding: 29px 31px 33px; }
.transformation-copy span { color: #f58424; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.transformation-copy h3 { margin: 10px 0 12px; color: #225536; font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 600; line-height: 1.05; }
.transformation-copy p { margin: 0; color: #5c6c63; font-size: 13px; line-height: 1.65; }
@media (max-width: 900px) { .before-after-heading { display: block; } .before-after-heading > p { max-width: 420px; margin-top: 25px; } .transformation-grid { grid-template-columns: 1fr; max-width: 650px; } }
@media (max-width: 760px) { .before-after { padding: 78px 7vw; background: linear-gradient(180deg, #f58424 0 22%, #fff6ed 22% 100%); } .before-after-heading h2 { font-size: 43px; } .comparison figure { min-height: 205px; } .transformation-copy { padding: 24px 20px 27px; } .transformation-copy h3 { font-size: 25px; } }