/* ====== PROJECT LAUNCH AND SHARED IMAGE TRANSITIONS ====== */
.project-preview-action{display:inline-flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--s4);margin-top:var(--s4);border:1px solid var(--ink);background:var(--green);color:var(--ink);font:600 var(--caption)/1.5 var(--body);min-height:44px}.project-preview-action:hover{background:var(--paper)}.explorer-launch-active img,.explorer-launch-active>img{view-transition-name:project-explorer-image}.explorer-image{view-transition-name:project-explorer-image}::view-transition-group(project-explorer-image){animation-duration:650ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}::view-transition-old(project-explorer-image),::view-transition-new(project-explorer-image){animation-duration:650ms}
/* ====== FULLSCREEN MODAL AND PERSISTENT CONTROLS ====== */
.project-explorer-open{overflow:hidden}.project-explorer{position:fixed;inset:var(--s0);width:100%;height:100dvh;max-width:none;max-height:none;margin:var(--s0);padding:var(--s0);border:0;background:var(--paper);color:var(--ink)}.project-explorer[open]{display:flex;flex-direction:column}.project-explorer::backdrop{background:var(--ink)}.explorer-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s3) var(--s5);border-bottom:1px solid var(--line);flex-shrink:0;background:var(--paper)}.explorer-heading{display:flex;align-items:center;gap:var(--s5)}.explorer-heading>img{width:110px;height:auto}.explorer-heading h2{font:600 var(--copy)/1.3 var(--body);margin:var(--s0)}.explorer-heading p{font-size:var(--caption);margin-top:var(--s1)}.explorer-close{margin:var(--s0);padding:var(--s3) var(--s4);border:1px solid var(--ink);background:var(--green);color:var(--ink);font:600 var(--caption)/1.5 var(--body);min-height:44px;white-space:nowrap}.explorer-close span{font-size:var(--lead);margin-left:var(--s3)}.explorer-tools{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s3) var(--s5);border-bottom:1px solid var(--line);flex-shrink:0}.explorer-devices{display:flex;gap:var(--s2)}.explorer-devices button{padding:var(--s2) var(--s4);border:1px solid var(--ink);background:var(--paper);color:var(--ink);font:400 var(--caption)/1.5 var(--body);min-height:44px}.explorer-devices button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.explorer-links{display:flex;gap:var(--s5);font-size:var(--caption)}.explorer-links a{text-decoration:underline;text-underline-offset:var(--s1)}
/* ====== FULL PAGE DESKTOP AND MOBILE CAPTURES ====== */
.explorer-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:var(--blue)}.explorer-capture{width:100%;margin-inline:auto}.explorer-capture[data-device=mobile]{width:min(390px,100%);border:8px solid var(--ink);border-radius:var(--s5);overflow:hidden;margin-block:var(--s5)}.explorer-image{display:block;width:100%;height:auto;max-width:none}.explorer-end{display:flex;justify-content:space-between;align-items:center;gap:var(--s6);padding:var(--s7);background:var(--ink);color:var(--paper)}.explorer-end p{font-size:var(--caption)}.explorer-end h3{font:400 clamp(40px,5vw,76px)/1.05 var(--display);margin-block:var(--s5)}.explorer-return{padding:var(--s3) var(--s4);border:1px solid var(--paper);background:var(--ink);color:var(--paper);font:600 var(--caption)/1.5 var(--body);min-height:44px}.project-explorer :focus-visible{outline:3px solid var(--green);outline-offset:3px}
/* ====== AUTHENTIC SEOD DESIGN COMPARISON ====== */
.design-comparison{background:var(--blue)}.design-compare-images{position:relative;aspect-ratio:1.44;overflow:hidden;border:1px solid var(--line)}.design-compare-images>img{position:absolute;inset:var(--s0);width:100%;height:100%;object-fit:cover;object-position:top}.design-compare-divider{position:absolute;top:var(--s0);bottom:var(--s0);width:3px;background:var(--green);pointer-events:none}.design-compare-label{position:absolute;bottom:var(--s4);padding:var(--s2) var(--s3);font-size:var(--small);background:var(--ink);color:var(--paper)}.design-compare-old-label{right:var(--s4)}.design-compare-new-label{left:var(--s4)}.design-compare-control{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s5);font-size:var(--caption)}.design-compare-control input{flex:1;min-width:160px;accent-color:var(--forest);min-height:44px}.design-compare-value{min-width:45px}.design-compare-next{display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s6);font-size:var(--copy)}
/* ====== MOBILE AND REDUCED MOTION ====== */
@media(max-width:700px){.explorer-bar,.explorer-tools{padding:var(--s3);gap:var(--s2)}.explorer-heading>img{display:none}.explorer-heading h2{font-size:var(--caption)}.explorer-heading p{font-size:var(--small);max-width:23ch}.explorer-close{padding:var(--s2) var(--s3);font-size:var(--small)}.explorer-close span{margin-left:var(--s2)}.explorer-links{gap:var(--s2);flex-direction:column;font-size:var(--small)}.explorer-devices button{padding:var(--s2) var(--s3);font-size:var(--small)}.explorer-end{padding:var(--s5);flex-direction:column;align-items:start}.explorer-capture[data-device=mobile]{margin-block:var(--s0);border-radius:var(--s0);border-width:0}.design-compare-label{font-size:10px;padding:var(--s2)}.design-compare-control{gap:var(--s3)}}
@media(prefers-reduced-motion:reduce){::view-transition-group(project-explorer-image),::view-transition-old(project-explorer-image),::view-transition-new(project-explorer-image){animation-duration:0s!important}}