/* Approved overhead photograph. Screen uses the original redacted Shopify image. */
.home-hero{background:#303b40;height:clamp(760px,57vw,960px);padding:0;position:relative;isolation:isolate;overflow:hidden}
.hero-photo-plane{position:absolute;width:100%;aspect-ratio:1586/992;left:0;top:50%;transform:translateY(-50%);z-index:0}
.hero-photo{width:100%;height:100%;display:block;pointer-events:none;user-select:none}
.home-hero:before{z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(14,23,27,.85),rgba(14,23,27,.68) 30%,rgba(14,23,27,.2) 48%,transparent 62%)}
.home-hero-grid{position:relative;z-index:2;display:flex;align-items:center;height:100%;min-height:0;padding-block:115px 50px;pointer-events:none}
.home-hero-copy{max-width:46%;pointer-events:auto}
.home-hero h1{color:#f5f6ef;font-size:clamp(40px,3.65vw,56px);line-height:1.13;text-shadow:0 2px 18px #0d171b4d}
.home-hero-copy>p{color:#e0e5dc;text-shadow:0 1px 10px #0003}
.home-hero h1 .home-vertical{color:#d8eebc}
.screen-projection{position:absolute;top:0;left:0;width:800px;height:600px;transform-origin:0 0;border-radius:14px;overflow:hidden;opacity:0;outline:none;cursor:default;background:#f8f9f7;contain:paint}
.hero-photo-plane.photo-ready .screen-projection.projection-ready{opacity:1}
.shopify-source{display:block;width:100%;height:100%;object-fit:cover;object-position:right top;transform:scale(var(--screen-zoom,1));transform-origin:95% 24%;transition:transform .85s cubic-bezier(.2,.65,.25,1),filter .6s ease;user-select:none;pointer-events:none;max-width:none}
.screen-reflection{position:absolute;inset:0;pointer-events:none;background:linear-gradient(130deg,#fff0 35%,#fff0 65%,#fff1 100%)}
.screen-projection:focus-visible{outline:3px solid #d0efab;outline-offset:3px}
@media(min-width:901px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.shopify-source{transform-origin:var(--zoom-x,50%) var(--zoom-y,50%);transition:transform .45s cubic-bezier(.2,.65,.25,1),transform-origin .1s linear,filter .4s ease}
.screen-projection:hover .shopify-source,.screen-projection:focus-visible .shopify-source{transform:scale(1.5);filter:brightness(1.02)}
}
@media(min-width:1700px){.home-hero-copy{max-width:43%}.home-hero h1{font-size:59px}}
@media(max-width:1150px) and (min-width:901px){.home-hero{height:710px}.hero-photo-plane{width:112%;left:-6%}.home-hero h1{font-size:38px}.home-hero-copy{max-width:46%}.home-hero-copy>p{font-size:13px;max-width:330px}}
@media(max-width:900px){
.home-hero{height:auto;background:#30383c url('assets/topdown-graphite-v4-v10.webp') left top/280% auto no-repeat}
.hero-photo-plane{top:auto;bottom:0;width:185%;left:-86%;transform:none;mask-image:linear-gradient(180deg,transparent,#000 18%)}
.home-hero:before{background:linear-gradient(180deg,#11171be8 0%,#141b20c4 30%,#19222870 48%,#222b3033 64%,transparent 84%)}
.home-hero-grid{display:block;height:auto;padding-top:140px;padding-bottom:calc(100vw * 1.08 + 15px);pointer-events:none}
.home-hero-copy{max-width:100%;pointer-events:auto}.home-hero h1{font-size:52px}.home-hero-copy>p{max-width:470px;font-size:14px}
.shopify-source{transition:filter .3s ease;transform:scale(var(--screen-zoom,1));transform-origin:75% 24%}
}
@media(max-width:600px){
.home-hero-grid{padding-top:127px;padding-bottom:calc(100vw * 1.08 + 10px)}
.home-hero h1{font-size:clamp(29px,8.3vw,44px);line-height:1.13;letter-spacing:-.055em}
.home-hero-copy>p{font-size:12px;line-height:1.85;margin:25px 0 28px}
.screen-projection{border-radius:14px}
}
@media(prefers-reduced-motion:reduce){.shopify-source{transform:none!important;transition:none}}

/* Explicit gallery navigation, visible at every breakpoint. */
.processing-page .payment-viewer-top{justify-content:space-between;gap:20px}
.proof-navigation{display:flex;align-items:center;gap:13px;flex-shrink:0}
.proof-arrow{width:42px;height:42px;border:1px solid #b7cba277;border-radius:50%;display:grid;place-items:center;background:transparent;color:#e9f2dd;font:24px/1 Manrope,sans-serif;cursor:pointer;transition:background .2s,color .2s}
.proof-arrow:hover{background:#cce99e;color:#17251f}.proof-arrow:focus-visible{outline:2px solid #daefb3;outline-offset:4px}
#proof-position{font-size:11px;letter-spacing:.1em;color:#c4d2b8;min-width:37px;text-align:center}
@media(max-width:650px){.processing-page .payment-viewer-top{display:flex;flex-wrap:wrap;gap:14px;padding:15px}.proof-tabs{width:100%}.proof-navigation{width:100%;justify-content:space-between;border-top:1px solid #b7cba222;padding-top:12px}.proof-arrow{width:40px;height:40px}}
