/* /services/website-redesign/: a site is a set of addresses people wrote down, and a rebuild
   carries every one of them across. Before/after in the hero, the real address maps, dated steps. */

body[data-page="website-redesign"]{--wr-line:var(--color-border);--wr-hair:var(--color-hair);--wr-ink:var(--color-meta);--wr-p:50}
.wr{overflow-x:clip}
.wr-accent{color:var(--color-accent)}

/* ---------- hero ---------- */
.wr-hero{padding-block:clamp(20px,4vw,64px) clamp(44px,6vw,88px)}
.wr-hero__grid{display:grid;gap:clamp(32px,4vw,56px)}
body[data-page="website-redesign"] .wr-hero .section-title{margin:18px 0 0;line-height:.98;font-size:clamp(2.35rem,1.5rem + 2.6vw,3.5rem)}
.wr-hero__lead{margin:20px 0 0;max-width:42ch;color:var(--color-body);font-size:clamp(1.02rem,.95rem + .35vw,1.2rem);line-height:1.6}
.wr-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
@media (min-width:1000px){.wr-hero__grid{grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);align-items:center}}

/* before / after: the before layer is revealed with transforms only (a translated window over a
   counter-translated image), so dragging and the opening sweep never touch layout. */
.wr-ba-set{position:relative}
.wr-ba-tabs{display:flex;gap:6px;margin:0 0 12px}
.wr-ba-tabs button{min-height:44px;padding:0 16px;border:1px solid var(--wr-line);border-radius:999px;background-color:transparent;font:600 14px/1 "JetBrains Mono",var(--font-mono);color:var(--color-text-muted);cursor:pointer;transition:background-color .3s var(--ease-out),color .3s var(--ease-out),border-color .3s var(--ease-out)}
.wr-ba-tabs button[aria-pressed="true"]{background-color:var(--color-text);color:var(--color-bg);border-color:var(--color-text)}
.wr-ba{margin:0}
.wr-ba+.wr-ba{margin-top:28px}
.wr-ba__frame{position:relative;overflow:hidden;aspect-ratio:16/10;border:1px solid var(--wr-line);border-radius:14px;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.45);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.wr-ba__frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:0 0}
.wr-ba__after{position:absolute;inset:0}
.wr-ba__before,.wr-ba__before-in{position:absolute;inset:0;overflow:hidden}
.wr-ba__before{transform:translateX(calc((var(--wr-p) - 100) * 1%))}
.wr-ba__before-in{transform:translateX(calc((100 - var(--wr-p)) * 1%))}
.wr-ba__handle{position:absolute;inset:0;pointer-events:none;transform:translateX(calc((var(--wr-p) - 100) * 1%))}
.wr-ba__handle::before{content:"";position:absolute;top:0;bottom:0;right:-1px;width:2px;background:var(--color-text);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.wr-ba__handle::after{content:"‹ ›";position:absolute;top:50%;right:-22px;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:var(--color-text);font:700 16px/1 "JetBrains Mono",var(--font-mono);color:var(--color-bg);box-shadow:0 6px 18px rgba(0,0,0,.45)}
html.motion-ok #ba-dg .wr-ba__frame{--wr-p:100}
.wr-ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.wr-ba__range:focus-visible~.wr-ba__handle::after,.wr-ba__frame:has(.wr-ba__range:focus-visible) .wr-ba__handle::after{outline:3px solid var(--signal-cyan);outline-offset:3px}
.wr-ba__tag{position:absolute;z-index:2;bottom:10px;padding:5px 8px;border-radius:6px;background:rgba(5,7,10,.82);font:600 12px/1.2 "JetBrains Mono",var(--font-mono);color:var(--color-text);pointer-events:none}
.wr-ba__tag--before{left:10px}
.wr-ba__tag--after{right:10px}
.wr-ba figcaption{margin-top:10px;font:400 13px/1.55 "JetBrains Mono",var(--font-mono);color:var(--color-text-muted)}
.wr-ba figcaption a{color:var(--color-accent)}
/* Without JS: the two pictures side by side, no slider. */
html:not(.js) .wr-ba__frame{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:auto}
html:not(.js) .wr-ba__after,html:not(.js) .wr-ba__before,html:not(.js) .wr-ba__before-in{position:static;transform:none}
html:not(.js) .wr-ba__before{order:-1}
html:not(.js) :is(.wr-ba__handle,.wr-ba__range){display:none}
.js .wr-ba[hidden]{display:none}

/* ---------- why + table ---------- */
.wr-why{padding-top:0}
.wr-why .case__table-wrap{margin-top:clamp(28px,4vw,44px)}

/* ---------- the address maps, on paper ---------- */
.wr-map-sec{padding-block:clamp(56px,8vw,112px);background:var(--paper);color:var(--paper-ink)}
body[data-kind="service"] .wr-map-sec .eyebrow{color:var(--paper-blue)}
.wr-map-sec .section-title{margin:14px 0 0;color:var(--paper-ink);max-width:18ch}
.wr-map-sec__lead{margin:18px 0 0;max-width:60ch;color:var(--paper-body);line-height:1.65}
.wr-maps{display:grid;gap:clamp(28px,4vw,48px);margin-top:clamp(28px,4vw,48px)}
.wr-map{margin:0;padding:clamp(14px,2.4vw,24px);border:1px solid var(--paper-rule);border-radius:14px;background:var(--paper-card)}
.wr-map__title{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin:0 0 14px;font:500 13px/1.4 "JetBrains Mono",var(--font-mono);color:var(--paper-muted)}
.wr-map__title b{font:600 16px/1.3 "Space Grotesk",var(--font-display);color:var(--paper-ink)}
.wr-map__board{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(28px,7vw,72px) minmax(0,1fr);align-items:start}
.wr-map__col{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.wr-map__col li{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:34px;padding:6px 8px;border:1px solid var(--paper-rule);border-radius:7px;background:var(--paper);font:500 12px/1.3 "JetBrains Mono",var(--font-mono);color:var(--paper-ink);overflow-wrap:break-word;min-width:0}
.wr-map__col--old{grid-column:1}
.wr-map__col--new{grid-column:3}
.wr-map__col--old li::after{content:"kept";flex:none;font-size:12px;font-weight:600;color:var(--paper-green)}
.wr-map.has-lines .wr-map__col--old li::after{content:none}
.wr-map__col--new li.is-new{border-color:rgba(31,69,168,.45);border-style:dashed}
.wr-map__col--new li.is-new::after{content:"new";flex:none;font-size:12px;font-weight:600;color:var(--paper-blue)}
.wr-map__links{position:absolute;inset:0;pointer-events:none}
.wr-map__link{position:absolute;left:0;top:0;height:2px;margin-top:-1px;background:var(--paper-green);border-radius:2px;transform-origin:0 50%}
.wr-map__tally{margin:16px 0 0;font:500 13px/1.5 "JetBrains Mono",var(--font-mono);color:var(--paper-body)}
.wr-map__tally b{font:700 15px/1 "JetBrains Mono",var(--font-mono);color:var(--paper-green)}
.wr-map__note{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--paper-muted)}
.wr-map__note code{font:500 13px/1 "JetBrains Mono",var(--font-mono);color:var(--paper-ink)}
.wr-map-sec__foot{margin:clamp(24px,3vw,36px) 0 0;max-width:62ch;color:var(--paper-body);line-height:1.65}
@media (max-width:520px){
  .wr-map__board{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr)}
  .wr-map__col li{padding:6px 7px}
  .wr-map__col--old li::after{content:"✓"}
  .wr-map__col--new li.is-new::after{content:none}
}
@media (min-width:1000px){.wr-maps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ---------- five steps on a dated line ---------- */
.wr-steps{position:relative;list-style:none;margin:0;padding:0 0 0 26px;display:grid;gap:26px}
.wr-steps::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--signal-cyan);transform-origin:50% 0;transform:scaleY(var(--wr-rail,1))}
.wr-step{position:relative}
.wr-step::before{content:"";position:absolute;left:-26px;top:5px;width:14px;height:14px;border:2px solid var(--signal-cyan);border-radius:50%;background:var(--color-bg);box-sizing:border-box}
.wr-step__date{margin:0;font:600 13px/1.3 "JetBrains Mono",var(--font-mono);color:var(--signal-cyan)}
.wr-step h3{margin:6px 0 8px;font:600 1.25rem/1.25 "Space Grotesk",var(--font-display);letter-spacing:-.015em;color:var(--color-text)}
.wr-step h3 span{margin-right:6px;font:500 13px/1 "JetBrains Mono",var(--font-mono);color:var(--wr-ink)}
.wr-step p{margin:0;color:var(--color-body);line-height:1.62}
.wr-step .wr-step__did{margin-top:10px;padding:10px 12px;border-left:2px solid var(--color-success);background:rgba(91,227,160,.06);font:500 13px/1.55 "JetBrains Mono",var(--font-mono);color:var(--color-text)}
@media (min-width:1100px){
  .wr-steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;padding:34px 0 0}
  .wr-steps::before{left:0;right:0;top:6px;bottom:auto;width:auto;height:2px;transform-origin:0 50%;transform:scaleX(var(--wr-rail,1))}
  .wr-step::before{left:0;top:-34px}
}

/* ---------- fit ---------- */
.wr-trust-lead{margin-top:14px;max-width:52ch}
.wr-fit{display:grid;gap:1px;background:var(--wr-line);border:1px solid var(--wr-line);border-radius:14px;overflow:hidden}
.wr-fit__col{padding:clamp(20px,3vw,30px);background:var(--color-bg)}
.wr-fit__col h3{margin:0 0 14px;font:600 1.2rem/1.25 "Space Grotesk",var(--font-display);color:var(--color-text)}
.wr-fit__col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wr-fit__col li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;color:var(--color-body);line-height:1.5}
.wr-fit__col li::before{content:"□";font:500 14px/1.5 "JetBrains Mono",var(--font-mono);color:var(--wr-ink)}
@media (min-width:900px){.wr-fit{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wr-wrong-call{margin-top:clamp(28px,4vw,44px)}

/* ---------- rebuild cards, quotes ---------- */
.wr-own-note{margin-top:var(--space-6)}
.wr-quotes{margin-top:var(--space-8)}

/* ---------- questions ---------- */
.wr-faq{display:grid;gap:28px}
.wr-faq .section-title{margin:14px 0 0}
.wr-faq__list{border-top:1px solid var(--wr-line)}
.wr-faq details{border-bottom:1px solid var(--wr-line)}
.wr-faq summary{position:relative;display:flex;align-items:center;min-height:60px;padding:14px 44px 14px 0;cursor:pointer;list-style:none;font:600 clamp(1.05rem,1rem + .3vw,1.25rem)/1.3 "Space Grotesk",var(--font-display);color:var(--color-text)}
.wr-faq summary::-webkit-details-marker{display:none}
.wr-faq summary::after{content:"+";position:absolute;right:8px;top:50%;margin-top:-.6em;font:500 22px/1.2 "JetBrains Mono",var(--font-mono);color:var(--wr-ink);transition:transform .3s var(--ease-out)}
.wr-faq details[open] summary::after{transform:rotate(45deg)}
.wr-faq details p{margin:0 0 18px;max-width:68ch;color:var(--color-body);line-height:1.7}
.wr-faq details a{color:var(--color-accent)}
.wr-faq details b{color:var(--color-text)}
@media (min-width:1000px){.wr-faq{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(32px,5vw,72px)}}

/* ---------- end ---------- */
.wr-end .container{display:grid;justify-items:center;gap:14px;text-align:center}
.wr-end .lead{max-width:48ch;margin-inline:auto}
.wr-end .price-anchor,.wr-end .prose{max-width:58ch;margin:0 auto}
.wr-end__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:10px 0 0}

@media (prefers-reduced-motion:reduce){
  .wr-ba-tabs button,.wr-faq summary::after{transition:none}
}