
:root {color-scheme:light;--ink:#38332e;--bg:#f7f5f2}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
main{width:100%;max-width:1440px;margin:0 auto;box-shadow:0 0 30px #00000008}
.panel{position:relative;display:block;width:100%;line-height:0}.panel img{display:block;width:100%;height:auto}
.hotspot{position:absolute;display:block;z-index:2;border-radius:999px;outline-offset:2px;transition:box-shadow .2s}
.hotspot:hover,.hotspot:focus,.hotspot:focus-visible{box-shadow:none;outline:none}
.screenreader{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap}
.notice{position:fixed;bottom:15px;right:15px;background:#38332e;color:#fff;z-index:10;padding:10px 16px;border-radius:22px;box-shadow:0 3px 14px #0002;text-decoration:none;font-size:12px;opacity:.87}
.notice:hover{opacity:1}
@media(max-width:600px){.notice{bottom:8px;right:8px;padding:8px 12px;font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.deux-video{position:absolute;z-index:3;overflow:hidden;border-radius:12% / 5%;background:#111}.deux-video video{width:100%;height:100%;object-fit:cover;display:block}

/* Portfolio videos: same geometry as the original Canva frames */
.video-box{position:absolute;z-index:3;overflow:hidden;border:1px solid #38332e;border-radius:9% / 5%;background:#201b18;line-height:normal}
.video-box video{display:block;width:100%;height:100%;object-fit:cover;background:#201b18}
.video-badge{position:absolute;pointer-events:none;bottom:5%;left:50%;transform:translateX(-50%);min-width:45%;max-width:90%;border-radius:20px;background:#f7f5f2eb;color:#38332e;text-align:center;padding:4px 8px;font:clamp(6px,1.05vw,14px)/1.15 Arial,Helvetica,sans-serif;white-space:nowrap;z-index:2}
.video-badge small{display:block;font-weight:bold;font-size:.85em}
.video-box:has(video:focus) .video-badge,.video-box:has(video:hover) .video-badge{opacity:0;transition:opacity .2s}
.extra-videos{background:#f7f5f2;min-height:44vw;padding:5.5% 5.5% 6.5%;line-height:normal}
.extra-videos h2{font-size:clamp(21px,4vw,60px);line-height:1.05;letter-spacing:.018em;margin:0;color:#38332e}
.extra-videos .subhead{font-size:clamp(12px,1.7vw,25px);margin:1% 0 3%;font-weight:400;letter-spacing:.015em}
.extra-videos-grid{display:flex;justify-content:center;gap:7%;align-items:start}
.extra-card{width:min(28%,290px);position:relative;min-width:0}
.extra-card video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#231f1a;border-radius:10% / 5%;border:1px solid #38332e}
.extra-card p{text-align:center;font-size:clamp(10px,1.3vw,17px);margin:12px 0 0}
@media(max-width:600px){.extra-videos{padding:6% 5% 8%}.extra-card{width:38%}.extra-videos-grid{gap:6%}.video-badge{padding:2px 3px}}

/* Single horizontal UGC carousel, 5 videos, responsive */
.video-slider{position:absolute;left:7.5%;right:7.5%;top:27%;bottom:10.5%;z-index:3;display:flex;align-items:center;line-height:normal}
.video-rail{display:flex;gap:4%;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-inline:contain;align-items:stretch;padding:0 1px}
.video-rail::-webkit-scrollbar{display:none}
.video-slide{position:relative;flex:0 0 30.66%;height:100%;min-width:0;scroll-snap-align:start;display:flex;justify-content:center;align-items:stretch}
.video-slide video{display:block;height:100%;width:auto;max-width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:10% / 5%;background:#27221f;box-shadow:0 0 1px #38332e}
.video-slide .video-badge{bottom:4%;font-size:clamp(7px,1vw,14px)}
.slide-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;display:flex;align-items:center;justify-content:center;width:clamp(32px,4.3vw,58px);height:clamp(32px,4.3vw,58px);border:none;border-radius:50%;background:rgba(57,51,46,.9);color:#fff;font:normal clamp(21px,2.2vw,32px)/1 Arial,sans-serif;cursor:pointer;box-shadow:0 3px 11px #0003;transition:background .15s,opacity .15s}
.slide-arrow:hover{background:#171411}.slide-arrow:focus-visible{outline:3px solid #a4866a;outline-offset:3px}
.slide-arrow.prev{left:-5.2%}.slide-arrow.next{right:-5.2%}.slide-arrow:disabled{opacity:.27;cursor:default}
@media(max-width:700px){
#videos{line-height:normal;background:#f6f4f0;padding-bottom:24px}
#videos>img{height:150px;object-fit:cover;object-position:top;}
.video-slider{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;margin:0 auto;width:86%;height:auto}
.video-rail{gap:13px;align-items:start;}
.video-slide{flex:0 0 75%;height:auto;aspect-ratio:9/16}
.video-slide video{width:100%;height:100%}
.slide-arrow{width:36px;height:36px;font-size:23px}
.slide-arrow.prev{left:-7%}.slide-arrow.next{right:-7%}
.video-slide .video-badge{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.video-rail{scroll-behavior:auto}}

/* UGC photographic carousel: original four photographs and two new Redex photos */
.photo-slider{position:absolute;left:5.9%;right:5.9%;top:25.55%;bottom:17.4%;z-index:3;display:flex;align-items:center;line-height:normal}
.photo-rail{display:flex;gap:5.15%;height:100%;width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-inline:contain}
.photo-rail::-webkit-scrollbar{display:none}
.photo-slide{position:relative;flex:0 0 21.12%;height:100%;scroll-snap-align:start;overflow:hidden;border-radius:9% / 5%;background:#ded8d0;border:1px solid #82766d}
.photo-slide>img{width:100%;height:100%;object-fit:cover;display:block}
.photo-badge{position:absolute;bottom:3%;left:50%;transform:translateX(-50%);background:#f6f4f0e8;color:#38332e;border-radius:22px;padding:5px 14px;white-space:nowrap;font-size:clamp(8px,1.2vw,16px);font-family:Arial,Helvetica,sans-serif}
.photo-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:clamp(34px,4.3vw,58px);height:clamp(34px,4.3vw,58px);border:0;border-radius:50%;color:white;background:#39332ee8;display:flex;align-items:center;justify-content:center;font:normal clamp(22px,2.3vw,34px)/1 Arial,sans-serif;cursor:pointer;box-shadow:0 3px 10px #0003}
.photo-arrow:hover{background:#16120f}.photo-arrow:disabled{opacity:.27;cursor:default}.photo-arrow:focus-visible{outline:3px solid #a4866a;outline-offset:3px}
.photo-arrow.prev{left:-4.9%}.photo-arrow.next{right:-4.9%}
@media(max-width:700px){
#photos{line-height:normal;background:#f6f4f0;padding-bottom:24px}
#photos>img{height:150px;object-fit:cover;object-position:top}
.photo-slider{position:relative;inset:auto;margin:0 auto;width:86%;height:auto}
.photo-rail{gap:14px;align-items:start}
.photo-slide{flex:0 0 66%;height:auto;aspect-ratio:349/624}
.photo-arrow{width:36px;height:36px;font-size:23px}
.photo-arrow.prev{left:-7%}.photo-arrow.next{right:-7%}
.photo-badge{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.photo-rail{scroll-behavior:auto}}

/* Photo carousel refinement */
.photo-rail{gap:2.8%;min-width:0;}
.photo-slide{flex:0 0 22.9%;}
.photo-slide>img{width:100%;height:100%;object-fit:cover;}
@media(max-width:700px){.photo-rail{gap:14px}.photo-slide{flex:0 0 66%;}}

/* GALERIA REDUX: visible internal nav arrows, on top of images */
#photos .photo-slider { position:absolute;left:5.3%;right:5.3%;top:25.55%;bottom:17.4%;z-index:20; overflow:visible; }
#photos .photo-rail {display:flex;gap:2.8%;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth;}
#photos .photo-slide {flex:0 0 22.9%;height:100%;min-width:0;}
#photos .photo-arrow {position:absolute;top:50%;z-index:40; width:52px;height:52px;border:2px solid white; border-radius:50%;color:#fff;background:#39332e;font-size:32px;font-weight:700;opacity:1;box-shadow:0 5px 18px #0009;visibility:visible;}
#photos .photo-arrow.prev {left:0.8%;}
#photos .photo-arrow.next {right:0.8%;}
#photos .photo-arrow:disabled {opacity:0.55;cursor:default;}
#photos .photo-arrow:not(:disabled):hover{background:#111}
@media(max-width:700px){
 #photos .photo-slider{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;width:90%;margin:0 auto;}
 #photos .photo-slide {flex:0 0 67%;height:auto;aspect-ratio:349/624;}
 #photos .photo-rail{gap:14px;}
 #photos .photo-arrow{width:42px;height:42px;font-size:27px;}
 #photos .photo-arrow.prev{left:1%} #photos .photo-arrow.next{right:1%}
}
