.makeover-gallery{padding-block:80px}.makeover-intro{max-width:720px}.gallery-controls{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin:32px 0 12px}.gallery-controls label{display:grid;gap:10px;font-weight:bold}.gallery-controls select{padding:12px;border:1px solid var(--line,#87939b);border-radius:8px;background:var(--paper,#142630);color:var(--text,#fff);max-width:100%;font:inherit}.gallery-devices{display:flex;flex-wrap:wrap;gap:8px}.gallery-devices button,.gallery-choices button{font:inherit;border:1px solid var(--line,#87939b);border-radius:8px;color:inherit;background:transparent;cursor:pointer}.gallery-devices button{padding:12px 18px}.gallery-devices button[aria-pressed=true],.gallery-choices button[aria-pressed=true]{border-color:var(--orange,#ed914a);box-shadow:0 0 0 2px var(--orange,#ed914a)}.gallery-status,.gallery-honesty{font-size:14px;color:var(--muted,#b7c6cf)}.gallery-sector{display:block;font:15px Arial,sans-serif;color:var(--muted,#b7c6cf);margin-top:8px}.gallery-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0 42px;align-items:start}.gallery-pair figure{margin:0;min-width:0}.gallery-pair figcaption{display:grid;gap:6px;margin-bottom:14px}.gallery-pair figcaption span{font-size:14px;color:var(--muted,#b7c6cf)}.gallery-image-button{display:block;padding:0;background:#fff;border:1px solid var(--line,#87939b);border-radius:9px;overflow:hidden;cursor:zoom-in;width:100%;margin-bottom:14px}.gallery-image-button img{display:block;width:100%;height:auto}.gallery-pair[data-device=mobile] .gallery-image-button{max-width:320px}.gallery-pair[data-device=tablet] .gallery-image-button{max-width:480px}.gallery-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px}.gallery-choices button{text-align:left;overflow:hidden;padding:0 0 16px}.gallery-choices img{display:block;width:100%;height:auto;aspect-ratio:1.44;object-fit:cover;object-position:top;margin-bottom:14px}.gallery-choices strong,.gallery-choices span{display:block;margin:5px 14px}.gallery-choices span{font-size:14px}.gallery-honesty{margin-top:28px;max-width:850px}.gallery-lightbox{max-width:min(1500px,96vw);max-height:94vh;padding:16px;background:#10212b;color:white;border:1px solid #718591}.gallery-lightbox::backdrop{background:#000c}.gallery-lightbox button{display:block;position:sticky;top:0;margin-bottom:12px;padding:12px;background:white;color:#112630;border-radius:6px;cursor:pointer}.gallery-lightbox img{display:block;max-width:100%;height:auto;margin:auto}.team-panel-label{background:#713d17;color:white;padding:14px;text-align:center;font:bold 15px Arial,sans-serif}@media(max-width:760px){.makeover-gallery{padding-block:48px}.gallery-controls{display:block}.gallery-controls select{width:100%}.gallery-devices{margin-top:20px}.gallery-pair{grid-template-columns:1fr}.gallery-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

.gallery-reasons{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:22px 0 34px}.gallery-reasons section{padding:18px 0;border-top:1px solid currentColor}.gallery-reasons h4{font:700 17px/1.4 Arial,sans-serif;margin:0 0 10px}.gallery-reasons p{font-size:16px;line-height:1.6;margin:0}@media(max-width:650px){.gallery-reasons{grid-template-columns:1fr;gap:6px}}

/* Supplied diagonal marker; source SVG and screenshot pixels are preserved. */
.gallery-image-button{position:relative}

.gallery-lightbox{width:min(1400px,96vw);max-width:96vw;max-height:94dvh;padding:16px;background:var(--paper,#10212b);color:var(--text,#fff);border-radius:10px;box-sizing:border-box}
.gallery-lightbox-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.gallery-lightbox-title{font:700 18px/1.4 Arial,sans-serif;margin:0}
.gallery-lightbox button{position:static;display:inline-flex;align-items:center;justify-content:center;margin:0;min-height:48px;padding:10px 16px;font:700 16px/1.3 Arial,sans-serif;border:1px solid var(--line,#87939b);border-radius:6px}
.gallery-lightbox .gallery-close{flex-shrink:0;background:var(--paper,#10212b);color:inherit}
.gallery-lightbox-stage{position:relative;width:fit-content;max-width:100%;margin:auto}
.gallery-lightbox .gallery-lightbox-image{width:auto;max-width:100%;max-height:70dvh;object-fit:contain;margin:auto}

.gallery-lightbox .gallery-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;padding:0;background:#091a25;color:#fff;border-color:#e7dcc6;font-size:26px;box-shadow:0 2px 12px #0006;opacity:.45}
.gallery-lightbox .gallery-nav-prev{left:12px}.gallery-lightbox .gallery-nav-next{right:12px}
.gallery-lightbox-stage:hover .gallery-nav,.gallery-lightbox-stage:focus-within .gallery-nav{opacity:1}
.gallery-lightbox .gallery-nav:disabled{opacity:.2;cursor:default}
.gallery-lightbox-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px}
.gallery-lightbox-status,.gallery-lightbox-hint{margin:0;font:15px/1.5 Arial,sans-serif}
.gallery-lightbox-hint{margin-top:8px;color:var(--muted,#b7c6cf)}
.gallery-explore{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 18px;box-sizing:border-box;border-radius:6px;background:#d16f43;color:#091a25;font-weight:bold;text-decoration:none}
.gallery-lightbox [hidden],.gallery-image-button [hidden]{display:none!important}
.gallery-lightbox :is(button,a):focus-visible{outline:3px solid #1896a3;outline-offset:3px}
@media(hover:none){.gallery-lightbox .gallery-nav{opacity:1}}
@media(max-width:600px){.gallery-lightbox{padding:12px}.gallery-lightbox-header{align-items:flex-start;gap:10px}.gallery-lightbox-title{font-size:16px}.gallery-lightbox .gallery-close{font-size:14px;padding:8px}.gallery-lightbox-stage{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}.gallery-lightbox .gallery-lightbox-image{grid-column:1/-1;max-height:57dvh}.gallery-lightbox .gallery-nav{position:static;transform:none;width:100%;height:48px;opacity:1}.gallery-lightbox-footer{display:grid;gap:10px}.gallery-explore{width:100%}.gallery-lightbox-hint{font-size:13px}}

/* A compact comparison with one horizontally scrollable, extensible row of examples. */
.makeover-intro{max-width:1000px}.makeover-intro h2{font-size:clamp(32px,3.4vw,52px);line-height:1.08}.makeover-intro>p:last-child{max-width:900px;font-size:17px;line-height:1.6}
#gallery-browser{scroll-margin-top:90px;display:flex;align-items:end;gap:16px;margin:28px 0 8px}
.gallery-business-field{flex:1;min-width:0;max-width:660px}.gallery-business-select{display:flex;gap:8px;min-width:0}.gallery-business-select select{min-width:0;flex:1;width:100%;font-size:16px;padding:8px}.gallery-business-select>button{flex-shrink:0;width:48px;min-height:44px;font-size:24px;color:inherit;background:transparent;border:1px solid var(--line);border-radius:6px;cursor:pointer}.gallery-business-select>button:disabled{opacity:.35;cursor:default}
.gallery-devices{gap:6px}.gallery-devices button{min-height:44px;padding:8px 12px;font-size:15px}
#gallery-status{margin:8px 0;font-size:13px}#gallery-examples h3{font-size:clamp(23px,2.3vw,32px);line-height:1.2;margin:8px 0}.gallery-sector{font-size:13px;margin-top:3px}
.gallery-pair{gap:20px;margin:12px 0 10px}.gallery-pair figcaption{gap:0;margin-bottom:8px;font-size:15px}.gallery-pair figcaption>span{display:none}
.gallery-pair .gallery-image-button{max-width:none;width:100%;margin-bottom:8px;background:var(--paper,#10212b)}
.gallery-pair .gallery-image-button img[data-gallery-shot]{width:100%;height:clamp(180px,calc(100svh - 440px),350px);object-fit:cover;object-position:top}

.gallery-pair [data-gallery-link]{min-height:40px;padding:8px 12px;font-size:14px}
.gallery-view-controls{display:none}.gallery-carousel-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;font-size:13px;font-weight:bold}.gallery-carousel-tools>div{display:flex;gap:6px}.gallery-carousel-tools button{min-width:44px;min-height:36px;border:1px solid var(--line);border-radius:6px;background:transparent;color:inherit;font-size:20px;cursor:pointer}
.gallery-choices{display:flex;position:relative;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:4px;margin:6px 0 0;padding:4px 4px 10px;scrollbar-width:thin}
.gallery-choices button{flex:0 0 240px;min-width:0;scroll-snap-align:start;padding-bottom:10px;border-radius:6px}.gallery-choices img{height:auto;aspect-ratio:1.44;object-fit:contain;object-position:top;margin-bottom:10px}.gallery-choices strong,.gallery-choices span{margin:4px 12px;font-size:13px;line-height:1.3}.gallery-choices strong{font-size:13px}.gallery-choices strong span{margin:0;font:inherit}
.gallery-explanation{margin-top:8px;border-top:1px solid var(--line);padding-top:10px}.gallery-explanation summary{cursor:pointer;font-size:15px;font-weight:bold;min-height:32px}.gallery-explanation .gallery-reasons{margin:8px 0 18px}.gallery-explanation .gallery-version-note{margin:8px 0}.gallery-explanation[hidden]{display:none}
#gallery-browser :is(button,select):focus-visible,.gallery-choices:focus-visible,.gallery-choices button:focus-visible,.gallery-carousel-tools button:focus-visible,.gallery-view-controls button:focus-visible{outline:3px solid #1896a3;outline-offset:3px}
@media(max-width:900px){#gallery-browser{display:grid;grid-template-columns:1fr;margin-top:20px;gap:8px}.gallery-business-field{max-width:none}.gallery-business-field>span{font-size:14px}.gallery-devices{margin-top:0}.gallery-controls label{gap:6px}.gallery-pair{gap:12px}.gallery-pair .gallery-image-button img[data-gallery-shot]{height:clamp(180px,calc(100svh - 470px),340px)}}
@media(max-width:600px){.makeover-gallery{padding-block:36px}.makeover-intro h2{font-size:32px}.makeover-intro>p:last-child{font-size:16px}.gallery-business-select{gap:5px}.gallery-business-select>button{width:40px}.gallery-business-select select{font-size:14px;padding:8px 4px}.gallery-devices button{min-height:36px;padding:7px 12px;font-size:13px}.gallery-view-controls{display:flex;gap:6px;margin:8px 0}.gallery-view-controls button{flex:1;min-height:36px;background:transparent;color:inherit;border:1px solid var(--line);border-radius:6px;font:700 14px Arial,sans-serif}.gallery-view-controls button[aria-pressed=true]{background:var(--orange,#d16f43);color:#091a25;border-color:var(--orange,#d16f43)}.gallery-pair{display:block;margin-top:8px}.gallery-pair figure{display:none}.gallery-pair figcaption{display:none}#gallery-examples[data-comparison-view=before] .gallery-pair figure:first-child,#gallery-examples[data-comparison-view=after] .gallery-pair figure:nth-child(2){display:block}.gallery-pair .gallery-image-button img[data-gallery-shot]{height:clamp(150px,calc(100svh - 530px),300px)}.gallery-choices button{flex-basis:200px}.gallery-carousel-tools{margin-top:8px}#gallery-examples h3{font-size:23px}#gallery-status{margin-block:6px}.gallery-sector{font-size:12px}.gallery-honesty{font-size:13px}}
@media(prefers-reduced-motion:reduce){.gallery-choices{scroll-behavior:auto}}
/* The supplied diagonal spans the whole before preview, through its centre. */

/* Leave room for the selection strip on typical laptop and phone heights. */
.gallery-pair .gallery-image-button img[data-gallery-shot]{height:clamp(170px,calc(100svh - 575px),350px)}
@media(max-width:900px){.gallery-pair .gallery-image-button img[data-gallery-shot]{height:clamp(180px,calc(100svh - 570px),340px)}}
@media(max-width:600px){.gallery-pair .gallery-image-button img[data-gallery-shot]{height:clamp(150px,calc(100svh - 620px),280px)}}
.gallery-pair[data-device=mobile] .gallery-image-button,.gallery-pair[data-device=tablet] .gallery-image-button{max-width:none}
#gallery-browser,#gallery-examples,.gallery-choices{overflow-anchor:none}
/* Portrait device previews show the whole captured screen instead of cropping its heading. */
.gallery-pair[data-device=mobile] .gallery-image-button img[data-gallery-shot],.gallery-pair[data-device=tablet] .gallery-image-button img[data-gallery-shot]{object-fit:contain}

/* Screenshots stay unobstructed; comparison labels are outside the images. */


.gallery-choices [data-choose-business]{position:relative}

.gallery-lightbox-shot{position:relative;display:table;max-width:100%;margin:auto}

@media(max-width:600px){.gallery-lightbox-shot{grid-column:1/-1}}
