.transformation{background:var(--green);color:var(--ivory);padding:90px 0 70px}
.transformation-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:40px}
.transformation-heading .eyebrow{font-size:13px;color:var(--stone);margin-bottom:22px}
.transformation-heading h2{font-size:clamp(50px,5vw,78px)}
.transformation-heading>p{font-size:17px;line-height:1.8;color:#e0e4d8;max-width:390px;padding-bottom:5px}
.transformation-heading>p span{font-size:14px;color:#c6cdbd}
.comparison{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#243529;isolation:isolate}
.comparison-photo{position:absolute;inset:0;background-image:url('assets/kitchen-transformation-concept.png');background-size:202% 106%;background-repeat:no-repeat}
.comparison-after{background-position:right top}
.comparison-before{background-position:left top;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.comparison-label{position:absolute;top:24px;padding:9px 16px;background:#18261de0;color:var(--ivory);font-size:14px;pointer-events:none}
.before-label{left:24px}.after-label{right:24px}
.comparison-divider{position:absolute;left:var(--split);top:0;bottom:0;width:2px;background:var(--ivory);transform:translateX(-50%);pointer-events:none;box-shadow:0 0 14px #0003}
.comparison-divider>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--ivory);color:var(--green);font-size:29px;box-shadow:0 3px 20px #0003}
.comparison-range{position:absolute;inset:0;width:100%;height:100%;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;opacity:0;touch-action:pan-y}
.comparison-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:1px;height:56px;background:transparent}
.comparison-range::-moz-range-thumb{width:1px;height:56px;border:0;background:transparent}
.comparison:focus-within{outline:3px solid var(--bronze);outline-offset:5px}
.comparison-figure figcaption{display:flex;justify-content:space-between;gap:20px;margin-top:17px;font-size:12px;color:#c6cdbd;line-height:1.7}
.comparison-nojs{position:absolute;bottom:20px;left:20px;background:var(--green);padding:12px}
.transformation-actions{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:32px}
.transformation-actions .button{background:var(--ivory);color:var(--green)}
.transformation-actions .button:hover{background:var(--stone)}
.transformation-actions .text-link{font-size:15px}
.process-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px;list-style:none;padding:35px 0 0;margin:50px 0 0;border-top:1px solid #ffffff30}
.process-strip li{display:flex;gap:18px}.process-strip li>span{font-size:12px;color:var(--stone);padding-top:7px}.process-strip h3{font-size:32px}.process-strip p{font-size:14px;color:#c6cdbd;margin-top:10px;line-height:1.7}
.walkthrough-preview{position:relative;min-height:740px;height:calc(100svh - 86px);margin-top:86px;background:var(--green);color:var(--ivory);isolation:isolate;overflow:hidden}
.walkthrough-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.walkthrough-shade{position:absolute;inset:0 0 65px;pointer-events:none;background:linear-gradient(90deg,#101b15a8,transparent 85%)}
.walkthrough-copy{position:absolute;left:7vw;right:7vw;top:40%;transform:translateY(-50%);pointer-events:none}
.walkthrough-copy .eyebrow{font-size:13px;margin-bottom:24px}.walkthrough-copy h1{font-size:clamp(80px,9vw,144px)}
.walkthrough-copy>p:not(.eyebrow){font-size:18px;margin:25px 0 30px;max-width:420px}
.walkthrough-copy button,.walkthrough-copy a{pointer-events:auto}.walkthrough-copy .button{border-color:#bcc6af}.walkthrough-copy .text-link{display:flex;width:fit-content;margin-top:20px}
.walkthrough-disclosure{position:absolute;bottom:80px;left:7vw;right:7vw;font-size:12px;text-shadow:0 1px 4px #000;pointer-events:none}
@media(max-width:800px){.transformation{padding:60px 0}.transformation-heading{display:block}.transformation-heading>p{margin-top:25px;max-width:none}.comparison{aspect-ratio:4/3}.transformation-actions{align-items:flex-start;flex-direction:column}.process-strip{gap:22px}.comparison-hint{display:none}.walkthrough-preview{margin-top:80px}.walkthrough-copy{left:32px;right:32px}.walkthrough-disclosure{left:32px;right:32px}}
@media(max-width:540px){.transformation{padding:50px 0}.transformation-heading h2{font-size:52px}.transformation-heading>p{font-size:16px}.comparison{aspect-ratio:4/3}.comparison-label{top:12px;padding:6px 10px;font-size:12px}.before-label{left:12px}.after-label{right:12px}.comparison-divider>span{width:44px;height:44px;font-size:25px}.comparison-figure figcaption{font-size:12px}.process-strip{grid-template-columns:1fr;margin-top:35px;padding-top:28px;gap:25px}.process-strip p{margin-top:5px}.transformation-actions .button{font-size:13px;gap:18px;white-space:normal}.transformation-actions .text-link{font-size:14px}.walkthrough-preview{margin-top:76px;min-height:680px}.walkthrough-copy{left:24px;right:24px}.walkthrough-copy h1{font-size:82px}.walkthrough-copy>p:not(.eyebrow){font-size:16px}.walkthrough-copy .eyebrow{font-size:11px}.walkthrough-disclosure{left:24px;right:24px;bottom:78px;font-size:11px}}

.comparison-figure{max-width:1100px;margin-inline:auto}

/* Warm limestone, with a quiet plaster grain and diffused window light. */
.transformation{position:relative;isolation:isolate;overflow:hidden;background:#e8e1d5;color:#272a25;border-top:1px solid #d9d1c2}
.transformation>.wrap{position:relative;z-index:1}
.transformation::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.6'/%3E%3C/svg%3E")}
.transformation::after{content:"";position:absolute;top:-150px;right:-80px;width:min(65vw,900px);height:730px;pointer-events:none;z-index:0;background:repeating-linear-gradient(90deg,transparent 0 175px,#65533b16 175px 194px),linear-gradient(0deg,transparent 0 56%,#65533b12 56% 59%,transparent 59%);filter:blur(12px);mask-image:linear-gradient(180deg,#0005,black 28%,transparent 92%);transform:translate3d(0,var(--shadow-drift,0px),0) skew(-20deg);transform-origin:top right}
.transformation-heading .eyebrow{color:#766044}
.transformation-heading>p{color:#4f594c}
.transformation-heading>p span,.comparison-figure figcaption,.process-strip p{color:#555e50}
.transformation-actions .button{background:var(--green);color:var(--ivory);border-color:var(--green)}
.transformation-actions .button:hover{background:#304536;border-color:#304536}
.process-strip{border-top-color:#b8ad986e}
.process-strip li>span{color:#766044}
.comparison{box-shadow:0 15px 45px #4e402415}
.comparison-nojs{color:var(--ivory)}
@media(max-width:800px){.transformation::after{width:95vw;right:-150px;top:-90px;height:560px;filter:blur(10px);opacity:.75}}
@media(prefers-reduced-motion:reduce){.transformation::after{transform:skew(-20deg)}}