/* A website redesign shown as one continuous, reversible comparison. */
.transform-sequence{--progress:.5;position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;border-top:1px solid #cdbec1;border-bottom:1px solid #cdbec1;margin-bottom:1.5rem;padding:1rem 0;color:#4f4146;font-size:.72rem;letter-spacing:.13em}
.transform-sequence::before,.transform-sequence::after{content:"";position:absolute;top:50%;left:5%;right:5%;height:1px;pointer-events:none}
.transform-sequence::before{background:#cbb9bd}.transform-sequence::after{background:#762940;transform:scaleX(var(--progress));transform-origin:left}
.transform-sequence>span{position:relative;z-index:1;background:var(--ivory);width:max-content;max-width:100%;padding-right:1rem}
.transform-sequence>span:last-child{justify-self:end;text-align:right;padding:0 0 0 1rem}
.transform-sequence small{display:block;color:#76686c;font-size:.65rem;letter-spacing:.02em;text-transform:none;margin-top:.2rem}
.transform-sequence .transform-method{text-align:center;color:var(--maroon);font-size:.9rem;font-weight:600;padding:0 1.4rem}
.transform-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.8rem;color:#6c5660}
.transform-toolbar .segmented{display:flex;gap:.3rem}
.transform-toolbar .segmented button{min-height:42px;padding:.55rem 1rem;border:1px solid #a9969e;background:transparent;color:#312329;font-size:.82rem;transition:background .25s,color .25s}
.transform-toolbar .segmented button[aria-pressed=true]{background:#21181d;color:var(--ivory);border-color:#21181d}
.transform-stage{background:radial-gradient(ellipse at 74% 10%,#5f24354a,transparent 49%),#141015;border:1px solid #4f3843;padding:clamp(.7rem,2.6vw,2rem);box-shadow:0 28px 65px #2b13202e}
.transform-browser{width:100%;margin-inline:auto;box-shadow:0 24px 50px #0008;transition:max-width .6s var(--ease)}
.transform-stage.mobile .transform-browser{max-width:350px}
.transform-chrome{height:38px;padding:0 1rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.8rem;background:#241b21;border:1px solid #624a55;border-bottom:0;color:#bbaab1;font-size:.61rem;letter-spacing:.1em}
.transform-chrome>span:last-child{text-align:right;color:#d1a3b2}
.transform-dots{display:flex;gap:5px}.transform-dots i{display:block;width:6px;height:6px;border:1px solid #987d87;border-radius:50%}
.transform-frame{--reveal:50%;--image-shift:0px;--type-shift:0px;position:relative;height:540px;overflow:hidden;container:transformation / inline-size;background:#fff;contain:layout paint;border:1px solid #624a55;border-top:0}
.transform-stage.mobile .transform-frame{height:530px}
.transform-page{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;pointer-events:none}
.transform-before{background:#fff;color:#272727;font-family:Arial,Helvetica,sans-serif}
.before-nav{min-height:60px;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:0 4%;border-bottom:1px solid #d9d9d9;background:#f0f0f0;font-size:clamp(.55rem,.88cqw,.78rem);white-space:nowrap}
.before-nav strong{font-size:1.05em}.before-nav>span:last-child{color:#6b6b6b}
.before-main{flex:1;min-height:0;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:4%;padding:2.7% 5% 1%}
.before-copy>span:first-child{display:block;font-size:clamp(.52rem,.85cqw,.7rem);color:#858585}
.before-copy h3{font:700 clamp(1.8rem,3cqw,2.85rem)/1.17 Arial,Helvetica,sans-serif;letter-spacing:0;margin:.9rem 0 1rem;max-width:570px}
.before-copy p{font-size:clamp(.68rem,1.12cqw,.9rem);line-height:1.55;color:#666;max-width:490px}
.before-action{display:inline-block;margin-top:1.2rem;padding:.6rem .85rem;background:#e8e8e8;border:1px solid #bdbdbd;color:#363636;font-size:clamp(.67rem,1cqw,.82rem)}
.before-media{width:100%;max-width:360px;aspect-ratio:1.55;align-self:center;justify-self:center;overflow:hidden;border:1px solid #d1d1d1}
.before-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:75% center;filter:grayscale(.65) saturate(.5) contrast(.88)}
.before-boxes{display:flex;gap:1.5%;padding:0 5% 3%}
.before-boxes span{flex:1;min-height:57px;padding:.9rem;background:#eee;border:1px solid #e2e2e2;font-size:clamp(.68rem,1cqw,.85rem);color:#555}
.before-footer{border-top:1px solid #e1e1e1;padding:.65rem 5%;font-size:clamp(.48rem,.68cqw,.6rem);color:#858585}
.transform-after{background:#eee8dc;color:#2c2321;clip-path:inset(0 calc(100% - var(--reveal)) 0 0)}
.after-nav{min-height:64px;padding:0 3.8%;display:flex;justify-content:space-between;align-items:center;gap:1rem;border-bottom:1px solid #bfb6aa;background:#eee8dc;font-size:clamp(.54rem,.85cqw,.77rem);white-space:nowrap}
.after-nav strong{font-weight:400;font-size:clamp(1.7rem,3.1cqw,2.8rem);letter-spacing:-.09em;line-height:1}.after-nav strong span{color:#873e51}
.after-nav-index{color:#705c60}
.after-main{flex:1;min-height:0;display:grid;grid-template-columns:47% 53%}
.after-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(1.4rem,3.4cqw,3.5rem);transform:translate3d(0,var(--type-shift),0)}
.after-kicker{color:#80535d;font-size:clamp(.54rem,.9cqw,.7rem);letter-spacing:.13em;text-transform:uppercase;line-height:1.4}
.after-copy h3{font-size:clamp(2.65rem,5.5cqw,5.8rem);line-height:.99;letter-spacing:-.066em;font-weight:400;margin:1.3rem 0}
.after-copy h3 em{font-family:Studio Serif,Georgia,serif;font-weight:400;color:#7c334b}
.after-copy p{max-width:25rem;color:#605651;font-size:clamp(.72rem,1.2cqw,.97rem);line-height:1.55}
.after-action{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;background:#5d2437;color:#fff;padding:.85rem 1rem;margin-top:1.7rem;font-size:clamp(.68rem,1cqw,.85rem);min-width:min(100%,220px)}
.after-action span{font-size:1.1rem;line-height:1}
.after-media{position:relative;overflow:hidden;min-height:0;background:#b99576}
.after-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#2b1f1c8a,transparent 24%)}
.after-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:71% center;transform:translate3d(var(--image-shift),0,0) scale(1.06)}
.after-media>span{position:absolute;bottom:1rem;left:1.2rem;z-index:1;color:#fff;font-size:clamp(.52rem,.8cqw,.7rem);letter-spacing:.12em;text-transform:uppercase}
.after-footer{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 3.8%;border-top:1px solid #bfb6aa;background:#eee8dc;color:#756861;font-size:clamp(.5rem,.68cqw,.63rem);letter-spacing:.1em}
.transform-divider{position:absolute;z-index:3;top:0;bottom:0;left:clamp(24px,var(--reveal),calc(100% - 24px));width:48px;transform:translateX(-50%);touch-action:none;cursor:ew-resize}
.transform-divider::before{content:"";position:absolute;top:0;bottom:0;left:23px;width:2px;background:#7d2b47;box-shadow:0 0 0 1px #fff9}
.transform-divider>span{position:absolute;top:50%;left:50%;width:46px;height:46px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;border:1px solid #fff7;border-radius:50%;background:#68243e;color:#fff;box-shadow:0 0 0 5px #f3efe9c7,0 12px 26px #0005;font:1.25rem Arial,Helvetica,sans-serif}
.transform-stage-caption{display:flex;justify-content:space-between;gap:1rem;color:#c6b0b8;text-transform:uppercase;font-size:.6rem;letter-spacing:.12em;margin-top:1rem}
.transform-controls{display:grid;grid-template-columns:minmax(140px,1fr) minmax(240px,3fr) minmax(140px,1fr);align-items:center;gap:clamp(1rem,3vw,3rem);margin-top:1.6rem}
.transform-controls>button{display:flex;flex-direction:column;align-items:flex-start;min-height:60px;width:100%;padding:.7rem .9rem;border:1px solid #beaab1;background:transparent;text-align:left;color:#281d22;font-size:.95rem;transition:background .2s,border-color .2s,color .2s}
.transform-controls>button:last-child{align-items:flex-end;text-align:right}
.transform-controls>button:hover,.transform-controls>button[aria-pressed=true]{background:#251a20;border-color:#251a20;color:#fff}
.transform-controls>button small{display:block;color:inherit;opacity:.7;font-size:.7rem;margin-top:.15rem}
.transform-range-field label{display:block;font-size:.78rem;color:#48373d;margin-bottom:.5rem}
.transform-range-field input{--reveal:50%;display:block;width:100%;height:34px;margin:0;appearance:none;-webkit-appearance:none;background:linear-gradient(90deg,#722842 var(--reveal),#c5b7bc var(--reveal)) center / 100% 2px no-repeat;cursor:ew-resize}
.transform-range-field input::-webkit-slider-runnable-track{height:2px;background:transparent}
.transform-range-field input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#712942;border:3px solid #f3efe9;box-shadow:0 0 0 1px #712942;margin-top:-8px}
.transform-range-field input::-moz-range-track{height:2px;background:transparent}
.transform-range-field input::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#712942;border:3px solid #f3efe9;box-shadow:0 0 0 1px #712942}
.transform-range-field input:focus-visible{outline:2px solid #9b435f;outline-offset:3px}
.transform-range-scale{display:flex;justify-content:space-between;color:#84767b;font-size:.65rem;letter-spacing:.07em;text-transform:uppercase}
.transform-insight{display:grid;grid-template-columns:minmax(160px,1fr) 3fr;gap:2rem;align-items:baseline;padding:1.1rem 0;border-bottom:1px solid #ccbec2;margin-top:1.4rem}
.transform-insight span{color:#80364d}.transform-insight p{max-width:650px;color:#4f4547;font-size:.95rem}
.transform-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,4rem);padding-top:2rem}
.transform-notes>div{border-top:1px solid #b9a7ac;padding-top:.85rem}
.transform-notes span{font-size:.7rem;color:#7d354c;letter-spacing:.09em;text-transform:uppercase}
.transform-notes p{margin-top:.65rem;color:#51474a;max-width:22rem;font-size:.92rem}
.transformation-section .concept-disclosure{font-size:.74rem;margin-top:2rem;color:#756b6c}
@container transformation (max-width:560px){
  .before-nav{min-height:46px;padding:0 5%;font-size:.58rem}.before-nav>span:nth-child(2){display:none}
  .before-main{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1rem;padding:1rem 5% .5rem}
  .before-copy>span:first-child{font-size:.53rem}.before-copy h3{font-size:1.55rem;line-height:1.16;margin:.55rem 0}.before-copy p{font-size:.7rem;line-height:1.4}
  .before-action{font-size:.7rem;margin-top:.7rem;padding:.48rem .65rem}.before-media{width:80%;max-width:245px;height:112px;align-self:flex-start;aspect-ratio:auto}
  .before-boxes{padding:0 5% .7rem;gap:.3rem}.before-boxes span{min-height:38px;padding:.5rem .3rem;font-size:.58rem}
  .before-footer{font-size:.5rem;padding:.55rem 5%}
  .after-nav{min-height:50px;padding:0 6%}.after-nav>span:nth-child(2){display:none}.after-nav strong{font-size:1.7rem}.after-nav-index{font-size:.6rem}
  .after-main{display:flex;flex-direction:column}.after-copy{flex:0 0 auto;padding:1.1rem 6% 1.25rem;transform:none}
  .after-kicker{font-size:.55rem}.after-copy h3{font-size:clamp(2.25rem,10cqw,2.8rem);margin:.7rem 0}.after-copy p{font-size:.73rem;line-height:1.4;max-width:18rem}
  .after-action{font-size:.7rem;margin-top:1rem;padding:.68rem .8rem;min-width:0}.after-media{flex:1;min-height:0}.after-media img{object-position:76% center}
  .after-media>span{bottom:.65rem;left:.8rem;font-size:.5rem}.after-footer{padding:.5rem 6%;font-size:.47rem}.after-footer>span:last-child{display:none}
}
@media(max-width:760px){
  .transform-sequence{gap:.2rem;font-size:.6rem;padding:.8rem 0}.transform-sequence small{display:none}.transform-sequence .transform-method{font-size:.72rem;padding:0 .45rem}
  .transform-toolbar .segmented{display:none}.transform-stage{padding:.65rem}.transform-browser{max-width:350px}.transform-frame{height:530px}
  .transform-chrome{padding:0 .7rem;font-size:.48rem}.transform-chrome>span:last-child{display:none}.transform-chrome{grid-template-columns:1fr auto}
  .transform-stage-caption{font-size:.53rem}.transform-stage-caption span:last-child{max-width:130px;text-align:right}
  .transform-controls{grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1rem}.transform-controls>button{min-height:55px}.transform-range-field{grid-column:1/-1;grid-row:1}.transform-range-field input{height:44px}
  .transform-insight{grid-template-columns:1fr;gap:.35rem;margin-top:1rem;padding:.9rem 0}.transform-insight p{font-size:.85rem}
  .transform-notes{grid-template-columns:1fr;gap:1rem;padding-top:1.4rem}.transform-notes>div{display:grid;grid-template-columns:100px 1fr;gap:1rem;align-items:baseline;padding-top:.7rem}.transform-notes p{margin:0;font-size:.82rem}
}
@media(prefers-reduced-motion:reduce){.transform-browser,.transform-toolbar .segmented button,.transform-controls>button{transition:none!important}.after-copy,.after-media img{transform:none!important}}