.before-after-page .page-hero { box-sizing: border-box !important; min-height: 0 !important; background: #f8f4ec !important; border-bottom: 1px solid #e7dbc8; }
body.before-after-page .page-hero-grid { box-sizing: border-box !important; width: min(100%, 1280px) !important; max-width: 1280px !important; grid-template-columns: minmax(0,.46fr) minmax(0,.54fr) !important; gap: 38px !important; padding: 70px 32px 54px !important; align-items: center !important; }
.before-after-page .page-hero-content { width: 100% !important; max-width: none !important; padding: 0 !important; }
.before-after-page .breadcrumb, .before-after-page .breadcrumb a, .before-after-page .breadcrumb .sep { color: #8b8175 !important; }
.before-after-page .breadcrumb { margin-bottom: 34px !important; }
.before-after-page .page-hero h1 { display: flex; flex-direction: column; max-width: 760px !important; margin: 0 0 26px !important; color: #171513 !important; font-size: clamp(68px,5.2vw,96px) !important; line-height: .89 !important; letter-spacing: -.045em !important; text-shadow: none !important; }
.before-after-page .page-hero h1 span { display: block; }
.before-after-page .page-hero h1 span:nth-child(4) { font-size: inherit; }
.before-after-page .page-hero h1 em { color: #bd8830 !important; -webkit-text-fill-color: currentColor !important; font-style: normal; }
.before-after-page .hero-intro { max-width: 680px !important; margin: 0 0 18px !important; color: #24211e !important; font: 600 18px/1.45 Inter,sans-serif !important; letter-spacing: -.015em; }
.before-after-page .page-hero .page-lead { max-width: 680px !important; margin: 0 !important; color: #756d63 !important; font-size: 15px !important; line-height: 1.72 !important; }
.before-after-page .page-hero-ctas { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 14px !important; max-width: 720px !important; margin-top: 34px !important; }
.before-after-page .page-hero-ctas .btn { min-height: 58px !important; padding: 15px 20px !important; white-space: nowrap; justify-content: center; }
.before-after-page .page-hero-ctas .btn-primary { background: #d09a38 !important; border-color: #d09a38 !important; color: #171513 !important; }
.before-after-page .page-hero-ctas .btn-outline { background: transparent !important; border-color: #c58c32 !important; color: #171513 !important; }
.before-after-page .page-hero-ctas .btn-outline:hover { background: #fff !important; border-color: #c58c32 !important; color: #171513 !important; }
.before-after-page .hero-proof { display: grid !important; grid-template-columns: 1.03fr 1.12fr 1.1fr !important; gap: 14px !important; max-width: 800px !important; margin-top: 42px !important; padding-top: 20px !important; border-top: 1px solid #dfd3c2 !important; }
.before-after-page .hero-proof-item { display: flex; align-items: center; gap: 9px; min-width: 0; color: #25211d; }
.before-after-page .hero-proof-icon { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border: 1px solid #d09a38; border-radius: 50%; color: #c28a2e; }
.before-after-page .hero-proof-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.before-after-page .hero-proof-item b, .before-after-page .hero-proof-item small { display: block; }
.before-after-page .hero-proof-item b { font: 600 11px/1.18 Inter,sans-serif; }
.before-after-page .hero-proof-item small { margin-top: 5px; color: #756d63; font: 400 9.5px/1.25 Inter,sans-serif; }
.before-after-page .page-hero-media { box-sizing: border-box !important; min-height: 0 !important; padding: 8px !important; border: 0 !important; border-radius: 24px !important; background: #fff !important; box-shadow: 0 28px 80px rgba(60,42,22,.14) !important; }
.before-after-page .page-hero-media-frame { position: relative; height: auto !important; min-height: 0 !important; aspect-ratio: 1.14/1 !important; border-radius: 17px !important; overflow: hidden; background: #e7ddd0; }
.before-after-page .page-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center !important; }
.before-after-page .media-label { position: absolute; bottom: 18px; z-index: 1; color: #fff; font: 600 11px/1 Montserrat,sans-serif; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.before-after-page .media-label-before { left: 20px; }
.before-after-page .media-label-after { right: 20px; }


@media (min-width:901px) {
  .before-after-page .page-hero.page-hero-split {
    height: clamp(760px,calc(100svh - var(--site-header-height,116px)),820px) !important;
    min-height: 0 !important;
    max-height: 820px !important;
  }
  .before-after-page .page-hero-grid {
    height: 100% !important;
    padding: 40px 32px 36px !important;
  }
  .before-after-page .page-hero-content {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100% !important;
    max-height: 684px !important;
    align-self: center;
    transform: translateY(20px);
  }
  .before-after-page .page-hero h1 {
    position: relative;
    top: -14px;
    max-width: 680px !important;
    font-size: clamp(62px,4.2vw,80px) !important;
    line-height: calc(.93em + 10px) !important;
    letter-spacing: -.04em !important;
    margin: 0 0 22px !important;
  }
  .before-after-page .hero-intro { position: relative; top: 8px; }
  .before-after-page .page-hero .page-lead { position: relative; top: 8px; }
  .before-after-page .page-hero-ctas { position: relative; top: 8px; }
  .before-after-page .breadcrumb {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    margin: 0 !important;
  }
  .before-after-page .hero-intro { font-size: 16px !important; line-height: 1.4 !important; margin-bottom: 14px !important; }
  .before-after-page .page-hero .page-lead { font-size: 14px !important; line-height: 1.6 !important; }
  .before-after-page .page-hero-ctas { margin-top: 26px !important; }
  .before-after-page .hero-proof { margin-top: 28px !important; padding-top: 14px !important; }
  .before-after-page .page-hero-media { height: 100% !important; max-height: 684px !important; align-self: center; }
  .before-after-page .page-hero-media-frame { height: 100% !important; }
  .before-after-page .page-hero-media-frame { aspect-ratio: auto !important; }
  .before-after-page .hero-proof { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 8px !important; }
  .before-after-page .hero-proof-item { gap: 6px; }
  .before-after-page .hero-proof-icon { flex-basis: 32px; width: 32px; height: 32px; }
  .before-after-page .hero-proof-icon svg { width: 16px; height: 16px; }
  .before-after-page .hero-proof-item b { font-size: 12px; white-space: nowrap; }
  .before-after-page .hero-proof-item small { margin-top: 3px; font-size: 10px; white-space: nowrap; }
}

@media (max-width:1100px) and (min-width:901px) { .before-after-page .page-hero-grid { gap: 30px !important; } .before-after-page .page-hero h1 { font-size: clamp(54px,5.3vw,60px) !important; } .before-after-page .hero-intro { font-size: 16px !important; } }
@media (max-width:900px) { body.before-after-page .page-hero-grid { width: 100% !important; max-width: none !important; grid-template-columns: minmax(0,1fr) !important; gap: 34px !important; padding: 48px 24px 52px !important; } .before-after-page .page-hero-media { order: 2; } .before-after-page .page-hero-content { order: 1; } .before-after-page .page-hero h1 { font-size: clamp(56px,9vw,76px) !important; } .before-after-page .hero-proof { max-width: none !important; } }
@media (max-width:640px) { body.before-after-page .page-hero-grid { gap: 28px !important; padding: 34px 20px 44px !important; } .before-after-page .breadcrumb { margin-bottom: 24px !important; } .before-after-page .page-hero h1 { font-size: clamp(44px,13vw,58px) !important; line-height: .94 !important; } .before-after-page .hero-intro { font-size: 16px !important; } .before-after-page .page-hero-ctas { grid-template-columns: 1fr !important; margin-top: 26px !important; } .before-after-page .page-hero-ctas .btn { width: 100%; white-space: normal; } .before-after-page .hero-proof { grid-template-columns: 1fr !important; gap: 14px !important; margin-top: 30px !important; } .before-after-page .hero-proof-icon { flex-basis: 42px; width: 42px; height: 42px; } .before-after-page .hero-proof-icon svg { width: 21px; height: 21px; } .before-after-page .page-hero-media-frame { aspect-ratio: 4/3 !important; } }