@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { color-scheme: light; --ink: #171c23; --muted: #5d6672; --blue: #195dbd; --line: #dce2e8; --canvas: #f3f5f6; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: 'DM Sans', sans-serif; }
a { color: inherit; }
main { max-width: 1260px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 76px); }
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; font: 700 17px 'Manrope', sans-serif; text-decoration: none; }
.brand img { object-fit: contain; }
.text-link { color: var(--blue); font-size: 14px; font-weight: 700; text-decoration: none; }
.intro { padding: clamp(85px, 12vw, 150px) 0 clamp(80px, 10vw, 125px); }
.eyebrow { margin: 0 0 22px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .2em; }
h1, h2 { font-family: 'Manrope', sans-serif; letter-spacing: -.055em; }
h1 { max-width: 970px; margin: 0; font-size: clamp(58px, 9vw, 132px); line-height: 1.035; font-weight: 700; }
h1 em { color: var(--blue); font-style: normal; }
.lead { max-width: 590px; margin: 38px 0 0; color: var(--muted); font-size: clamp(18px, 2vw, 22px); line-height: 1.55; }
section.workflow, section.cases { padding: 78px 0 110px; border-top: 1px solid var(--line); }
.section-head { margin-bottom: 40px; }
h2 { margin: 0; font-size: clamp(36px, 5vw, 64px); line-height: 1.13; font-weight: 700; }
.section-copy { color: var(--muted); font-size: 17px; }
.workspace-shot { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.caption, figcaption { color: var(--muted); font-size: 14px; line-height: 1.6; }
.caption { max-width: 690px; margin-top: 20px; }
.case { margin: 0 0 95px; }
.case-heading { display: flex; justify-content: space-between; padding: 0 0 13px; font-size: 11px; font-weight: 800; letter-spacing: .17em; }
.comparison { position: relative; width: 100%; aspect-ratio: var(--aspect); overflow: hidden; border-radius: 5px; background: #ddd; }
.portrait .comparison, .interior .comparison { max-width: 700px; }
.comparison img { display: block; width: 100%; height: 100%; object-fit: cover; }
.comparison .after { position: absolute; inset: 0; }
.before-wrap { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--position)) 0 0); }
.before-wrap img { width: 100%; object-position: center; }
.comparison input { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.divider { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--position); width: 2px; background: white; transform: translateX(-50%); pointer-events: none; }
.divider span { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 46px; height: 46px; transform: translate(-50%, -50%); border: 2px solid white; border-radius: 50%; background: #171c23bf; color: white; font-size: 25px; }
.badge { position: absolute; z-index: 2; top: 18px; padding: 8px 10px; background: #1118; color: white; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.before-badge { left: 18px; }.after-badge { right: 18px; }
figcaption { margin-top: 15px; }
footer { padding: 100px 0 145px; border-top: 1px solid var(--line); }
footer p:not(.eyebrow) { max-width: 610px; color: var(--muted); line-height: 1.7; }
.visit { display: inline-flex; align-items: center; gap: 35px; margin-top: 28px; padding: 16px 0; border-bottom: 2px solid var(--blue); color: var(--blue); font-size: 18px; font-weight: 700; text-decoration: none; }
@media (max-width: 700px) { main { padding: 0 18px; } .site-head { padding: 20px 0; } .brand { font-size: 14px; } .text-link { font-size: 12px; } .intro { padding: 80px 0; } .lead { margin-top: 25px; } section.workflow, section.cases { padding: 55px 0 65px; } .case { margin-bottom: 65px; } .comparison { border-radius: 3px; } .badge { top: 9px; padding: 5px; font-size: 8px; } .before-badge { left: 9px; } .after-badge { right: 9px; } footer { padding: 70px 0 90px; } }