/* Isolated fictional website comparison; the real site navigation stays outside the draggable canvas. */
.cg-study{--cg-dark:#20372c;--cg-cream:#f6f2e9;--cg-rule:#d9dace}
.cg-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:end;margin:42px 0 38px}
.cg-intro h2{margin:0}.cg-intro>div{max-width:440px;justify-self:end}.cg-intro p{font-size:16px;color:#5b635e;margin:0}.cg-intro .cg-disclosure{font-size:11px;line-height:1.7;margin-top:18px;color:#687168}
.cg-workbench{border:1px solid #ccd2c9;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 24px 60px #1e342412}
.cg-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 20px;background:#fff;border-bottom:1px solid #d9ded5}
.cg-toolbar-title{display:flex;align-items:center;gap:22px;color:#56615a;font-size:10px;font-weight:600;letter-spacing:.08em}.cg-toolbar-detail{font-weight:400;color:#626b65}.cg-window-dots{display:flex;gap:5px}.cg-window-dots i{height:7px;width:7px;border:1px solid #c4cbc1;border-radius:50%}
.cg-presets{display:flex;border:1px solid #d3dacf;padding:3px;gap:2px;border-radius:6px;background:#f5f7f2}.cg-presets button{appearance:none;background:transparent;border:0;border-radius:3px;padding:9px 17px;color:#56605a;font-family:inherit;font-size:11px;font-weight:500;line-height:1.2;cursor:pointer;min-height:34px}.cg-presets button:hover{background:#e9eee4}.cg-presets button[aria-pressed=true]{background:#263d30;color:white;box-shadow:0 1px 3px #1b2a2625}
.cg-canvas{position:relative;isolation:isolate;height:690px;container-type:inline-size;overflow:hidden;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;background:#fff}
.cg-version{position:absolute;inset:0;overflow:hidden;pointer-events:none}.cg-version img{display:block;width:100%;max-width:none;object-fit:cover}.cg-version p,.cg-version h3,.cg-version h4{margin:0}.cg-version *{box-sizing:border-box}.cg-version b,.cg-version strong{font-weight:inherit}
.cg-original{background:#f5f4ed;color:#424b35;font-family:Arial,sans-serif;padding-inline:7.5%}.cg-old-top{text-align:right;font-size:10px;letter-spacing:.04em;padding:12px 0 10px;color:#6b735f;border-bottom:1px solid #d5d6c9}.cg-old-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0 23px}.cg-old-head>strong{font:700 30px/1.1 Georgia,serif;color:#4b603a}.cg-old-head>strong span{display:block;font:13px/1.4 Arial,sans-serif;letter-spacing:.08em;margin-top:7px}.cg-old-head>div{text-align:right;font-size:12px;line-height:1.7;color:#6d745e}.cg-old-head>div>span{font-weight:700;color:#4f6236}
.cg-old-nav{display:flex;background:linear-gradient(#6c7d4e,#536437);border:1px solid #4d6033;color:white;justify-content:space-around;font-size:12px;box-shadow:0 2px 2px #0002}.cg-old-nav>span{display:block;padding:13px 16px;border-right:1px solid #ffffff25;flex:1;text-align:center;white-space:nowrap}.cg-old-nav>span:last-child{border-right:0}.cg-old-nav .cg-old-current{background:#0002}
.cg-old-photo{height:235px;border:6px solid white;box-shadow:0 1px 5px #31411e30;margin-top:18px;position:relative;overflow:hidden}.cg-old-photo img{height:100%;object-position:center 53%;filter:saturate(.7)}.cg-old-photo>span{position:absolute;bottom:0;left:0;right:0;padding:15px;background:#2d3c29b8;color:#fff;text-align:center;font:19px Georgia,serif}
.cg-old-content{display:grid;grid-template-columns:1fr 235px;gap:40px;padding:26px 4px}.cg-study .cg-old-content h3{font:700 25px/1.2 Georgia,serif;letter-spacing:0;color:#4e6138;margin-bottom:14px}.cg-study .cg-old-content p{font:13px/1.7 Arial,sans-serif;color:#626855;margin-bottom:12px;max-width:600px}.cg-old-link{font:12px Arial,sans-serif;text-decoration:underline;color:#52663b}.cg-old-content aside{background:#e8eadf;border:1px solid #d4d7c9;padding:16px 18px;font:12px/1.45 Arial,sans-serif;color:#5b6649}.cg-old-content aside h4{font:700 17px Georgia,serif;color:#4e6138;margin-bottom:12px}.cg-old-content aside>span{display:block;padding:6px 0;border-bottom:1px solid #cfd4c2}.cg-old-content aside>div{padding-top:12px;line-height:1.7}
.cg-modern{background:var(--cg-cream);color:var(--cg-dark);clip-path:inset(0 calc(100% - var(--cg-reveal)) 0 0)}
.cg-new-nav{height:85px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 34px;background:var(--cg-cream)}.cg-new-logo{display:flex;align-items:center;gap:12px;white-space:nowrap}.cg-new-logo>svg{width:27px;height:34px}.cg-new-logo strong{font:30px/1 Georgia,serif;letter-spacing:-1px}.cg-new-logo strong>span{display:block;font:8px/1.4 Arial,sans-serif;letter-spacing:.17em;margin-top:7px}.cg-new-links{display:flex;align-items:center;gap:30px;font:11px/1.5 Arial,sans-serif}.cg-new-links .cg-nav-project{padding-bottom:6px;border-bottom:1px solid #627260}.cg-nav-project b{font-size:17px;margin-left:15px}.cg-mobile-menu{display:none}
.cg-new-hero{position:relative;height:437px;color:white;overflow:hidden;background:#4f5a42}.cg-new-hero>img{position:absolute;inset:0;height:100%;object-position:center 57%}.cg-new-shade{position:absolute;inset:0;background:linear-gradient(90deg,#12261bd9 0%,#12261b96 31%,#12261b12 68%),linear-gradient(0deg,#1224198a,transparent 30%)}.cg-new-copy{position:relative;padding:43px 43px 0}.cg-new-eyebrow{font:10px/1.4 Arial,sans-serif;letter-spacing:.16em;color:#f0f1e2}.cg-study .cg-new-copy h3{font:clamp(42px,5.8cqi,74px)/.99 Georgia,serif;letter-spacing:-.04em;color:#fffdf4;font-weight:400;margin:23px 0 22px}.cg-study .cg-new-copy p{font:13px/1.75 Arial,sans-serif;color:#f1f2e9;max-width:440px}.cg-new-cta{display:inline-flex;align-items:center;gap:50px;margin-top:26px;padding:13px 18px;background:#f6f2e8;color:#24372b;font:12px/1.4 Arial,sans-serif}.cg-new-cta b{font-size:19px}.cg-photo-caption{position:absolute;left:43px;right:100px;bottom:22px;display:flex;align-items:center;gap:20px;color:#f7f6ee}.cg-photo-caption>span:first-child{font:9px Arial,sans-serif;letter-spacing:.11em}.cg-photo-caption>span:last-child{font:10px Arial,sans-serif;opacity:.83;border-left:1px solid #f7f6ee70;padding-left:20px}.cg-photo-index{position:absolute;right:32px;bottom:21px;font:10px Arial,sans-serif;letter-spacing:.05em}
.cg-new-bottom{display:grid;grid-template-columns:1.1fr 1fr 1.1fr;gap:35px;padding:31px 37px 26px;align-items:start}.cg-new-description>span{font:8px Arial,sans-serif;letter-spacing:.13em;color:#5c6856}.cg-study .cg-new-description h4{font:28px/1.15 Georgia,serif;color:var(--cg-dark);letter-spacing:-.025em;margin-top:12px;font-weight:400}.cg-study .cg-new-bottom>p{font:12px/1.85 Arial,sans-serif;color:#5d6a58;padding-top:19px}.cg-new-services{font:10px Arial,sans-serif;color:#5c6856}.cg-new-services>span{display:flex;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid #cfd5c6}.cg-new-services>span:first-child{padding-top:6px}.cg-new-services b{font-weight:400;color:#344631;font-size:11px}.cg-new-services i{margin-left:auto;color:#344631;font:17px Arial,sans-serif}
.cg-seam{position:absolute;inset:0 auto 0 var(--cg-reveal);width:2px;background:white;box-shadow:0 0 0 1px #20372c35;z-index:3;pointer-events:none}.cg-grip{display:grid;place-items:center;position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;background:#fff;border-radius:50%;color:#253c30;box-shadow:0 3px 22px #12261b40;border:5px solid #ffffff40;background-clip:padding-box}.cg-grip>svg{width:29px;height:20px}.cg-workbench.is-dragging .cg-grip{box-shadow:0 0 0 7px #ffffff30,0 3px 22px #12261b40}.cg-state-tag{position:absolute;z-index:4;bottom:12px;font:9px Arial,sans-serif;letter-spacing:.1em;padding:8px 11px;border-radius:3px;pointer-events:none;border:1px solid #ffffff60}.cg-state-after{left:12px;background:#20372c;color:#fff}.cg-state-before{right:12px;background:#fff;color:#4b583f;border-color:#d1d6c9}.cg-workbench[data-reveal="0"] .cg-state-after,.cg-workbench[data-reveal="100"] .cg-state-before{opacity:0}.cg-workbench[data-reveal="0"] .cg-seam,.cg-workbench[data-reveal="100"] .cg-seam{display:none}
.cg-range-row{display:grid;grid-template-columns:170px 1fr 38px;gap:24px;align-items:center;padding:20px 25px;border-top:1px solid #d3dacf;background:#fff}.cg-range-row label{font-size:12px;font-weight:600;color:#52604e}.cg-range-row output{font-size:11px;color:#53614e;text-align:right;font-variant-numeric:tabular-nums}.cg-range-row input{appearance:none;-webkit-appearance:none;display:block;width:100%;height:30px;min-height:0;padding:0;border:0;background:transparent;cursor:ew-resize;accent-color:#284ee7}.cg-range-row input::-webkit-slider-runnable-track{height:3px;background:#d5dacd;border-radius:2px}.cg-range-row input::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8.5px;border:4px solid #fff;border-radius:50%;background:#284ee7;box-shadow:0 0 0 1px #284ee7}.cg-range-row input::-moz-range-track{height:3px;background:#d5dacd;border-radius:2px}.cg-range-row input::-moz-range-thumb{width:13px;height:13px;border:4px solid #fff;border-radius:50%;background:#284ee7;box-shadow:0 0 0 1px #284ee7}
.cg-study-foot{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:22px}.cg-study-foot p{font-size:11px;line-height:1.7;color:#687363;margin:0}.cg-study-foot .text-link{font-size:12px;white-space:nowrap}.cg-design-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:40px;border-top:1px solid var(--cg-rule);padding-top:25px}.cg-design-notes>div{display:flex;gap:17px}.cg-design-notes>div>span{font:10px/1.8 Arial,sans-serif;color:#5c6856;flex-shrink:0}.cg-design-notes p{font-size:12px;color:#66705f;margin:0}.cg-design-notes strong{color:#2c3929;font-weight:600}
@container (max-width:850px){.cg-original{padding-inline:5%}.cg-old-content{grid-template-columns:1fr 190px;gap:24px}.cg-new-nav{padding-inline:25px}.cg-new-links{gap:20px}.cg-new-copy{padding-left:30px}.cg-new-bottom{padding-inline:30px;gap:25px}.cg-study .cg-new-description h4{font-size:25px}.cg-photo-caption{left:30px}.cg-photo-caption>span:last-child{display:none}}
@container (max-width:600px){.cg-old-top{text-align:center;font-size:8px;padding:10px 0}.cg-old-head{padding-block:20px;gap:10px}.cg-old-head>strong{font-size:22px}.cg-old-head>strong span{font-size:10px;letter-spacing:.02em}.cg-old-head>div{font-size:9px;max-width:110px}.cg-old-nav{font-size:10px}.cg-old-nav>span{padding:12px 5px}.cg-old-nav>span:nth-child(2),.cg-old-nav>span:nth-child(4){display:none}.cg-old-photo{height:225px;border-width:4px}.cg-old-photo>span{padding:12px 6px;font-size:14px}.cg-old-content{display:block;padding-top:24px}.cg-study .cg-old-content h3{font-size:23px;max-width:230px;margin-bottom:14px}.cg-study .cg-old-content p{font-size:12px;line-height:1.7}.cg-old-content aside{margin-top:20px;padding:14px 16px}.cg-old-content aside h4{font-size:16px;margin-bottom:8px}.cg-old-content aside>span{font-size:11px;padding:4px 0}.cg-old-content aside>div{display:none}.cg-new-nav{height:78px;padding-inline:20px}.cg-new-logo{gap:9px}.cg-new-logo>svg{width:24px;height:30px}.cg-new-logo strong{font-size:27px}.cg-new-logo strong>span{font-size:7px;letter-spacing:.14em}.cg-new-links{display:none}.cg-mobile-menu{display:grid;gap:6px;width:21px}.cg-mobile-menu i{display:block;width:21px;height:1px;background:#3c503d}.cg-new-hero{height:445px}.cg-new-hero>img{object-position:59% center}.cg-new-shade{background:linear-gradient(90deg,#12261bc9,#12261b47),linear-gradient(0deg,#12241985,transparent 35%)}.cg-new-copy{padding:42px 23px 0}.cg-new-eyebrow{font-size:8px;letter-spacing:.13em}.cg-study .cg-new-copy h3{font-size:clamp(38px,10cqi,52px);line-height:1.02;margin:24px 0 22px;letter-spacing:-.04em}.cg-study .cg-new-copy p{font-size:12px;max-width:280px;line-height:1.8}.cg-new-copy p br{display:none}.cg-new-cta{margin-top:27px;padding:12px 16px;gap:35px;font-size:11px}.cg-photo-caption{left:23px;bottom:22px;right:80px}.cg-photo-caption>span:first-child{font-size:8px}.cg-photo-index{right:22px;bottom:22px;font-size:9px}.cg-new-bottom{grid-template-columns:1fr;gap:16px;padding:25px 23px}.cg-new-description>span{font-size:7px;letter-spacing:.08em}.cg-study .cg-new-description h4{font-size:28px;margin-top:11px}.cg-study .cg-new-bottom>p{display:none}.cg-new-services{display:flex;gap:15px;margin-top:3px}.cg-new-services>span,.cg-new-services>span:first-child{display:block;flex:1;padding:8px 0 0;border-bottom:0;border-top:1px solid #cfd5c6;font-size:8px}.cg-new-services b{display:block;font-size:10px;margin-top:6px;line-height:1.5}.cg-new-services i{display:none}.cg-grip{width:46px;height:46px;top:43%}.cg-grip>svg{width:26px}.cg-state-tag{font-size:8px;padding:7px 9px;bottom:10px}}
@media(max-width:1000px){.cg-intro{grid-template-columns:1fr 1fr;gap:40px}.cg-study-foot{align-items:flex-start}.cg-study-foot .text-link{white-space:normal}.cg-design-notes{gap:22px}}
@media(max-width:760px){.cg-intro{grid-template-columns:1fr;gap:24px;margin:30px 0}.cg-intro>div{max-width:560px;justify-self:start}.cg-toolbar-detail{display:none}.cg-toolbar{gap:12px;padding:11px 12px}.cg-toolbar-title{gap:10px;font-size:9px}.cg-window-dots{display:none}.cg-presets button{padding:8px 12px;min-height:38px;font-size:11px}.cg-canvas{height:750px}.cg-range-row{grid-template-columns:1fr 35px;gap:6px 18px;padding:17px 18px}.cg-range-row label{grid-column:1/-1;font-size:11px}.cg-study-foot{flex-direction:column;gap:15px;margin-top:17px}.cg-design-notes{grid-template-columns:1fr;gap:19px;margin-top:27px;padding-top:23px}.cg-design-notes p{font-size:12px;max-width:540px}}
@media(prefers-reduced-motion:no-preference){.cg-presets button{transition:background .16s,color .16s}.cg-grip{transition:box-shadow .15s}.cg-state-tag{transition:opacity .15s}}