:root{--ink:#333;--line:#ddd;--max:1060px;--accent:#f05a00}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f5f5f5;color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.55}
a{color:inherit}
.site-header,.page-band{background:#050b14 url("assets/20.jpeg") center 27%/cover no-repeat;color:#fff}
.topbar{height:40px;border-top:1px solid rgba(255,255,255,.35);border-bottom:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.20)}
.topbar-inner{width:min(1060px,92%);height:100%;margin:auto;display:flex;align-items:center;justify-content:space-between}
.brand{font-size:28px;font-weight:300;letter-spacing:-.5px;text-decoration:none;white-space:nowrap}
.nav{display:flex;gap:34px}.nav a{text-decoration:none;font-size:16px}.nav a:hover{text-decoration:underline}
.hero{min-height:390px;display:flex;align-items:flex-end;justify-content:center;padding:40px 20px 30px;text-align:center}
.hero h1{margin:0;color:white;font-size:64px;line-height:1.05;font-weight:300;text-shadow:0 2px 12px #000}
.page-band{min-height:120px}.content{width:min(var(--max),92%);margin:0 auto;background:#fff}
.section{padding:52px 46px}.section.narrow{max-width:900px;margin:auto}
.section-title{margin:0 0 10px;text-align:center;font-size:28px;font-weight:300}
.section-title:after{content:"";display:block;width:54px;border-bottom:1px solid #555;margin:7px auto 22px}
.lead{text-align:center;max-width:760px;margin:0 auto 35px}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:52px}
.feature{text-align:center}.feature-icon{width:68px;height:68px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;background:#444;color:#fff;font-size:29px}
.feature h2{font-size:24px;font-weight:300;margin:0 0 12px}.feature p{font-size:15px;line-height:1.35;margin:0}
.image-strip{width:100%;height:150px;object-fit:cover;display:block}
.footer{background:#050505;color:#fff;min-height:88px;display:flex;align-items:center}.footer-inner{width:min(var(--max),92%);margin:auto;font-size:12px}
.media-large{display:block;width:min(740px,100%);height:auto;margin:0 auto 24px}.center{text-align:center}.copy{max-width:760px;margin:0 auto}
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}.video-card{background:#f7f7f7;padding:14px}
.video-frame{width:100%;aspect-ratio:16/9;background:#111;overflow:hidden}.video-card iframe{width:100%;height:100%;border:0;display:block}.video-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.video-card h3{font-size:19px;font-weight:400;margin:12px 0 5px}.video-card p{margin:0;color:#555;font-size:14px}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.photo-card{background:#fff;border:1px solid #e4e4e4;padding:7px;cursor:pointer}
.photo-card img{width:100%;height:190px;object-fit:cover;display:block}.photo-card figcaption{padding:8px 4px 4px;font-size:13px;color:#555}
.gallery-note{text-align:center;color:#666;margin:-8px 0 28px}.web-image{width:min(900px,100%);height:auto;display:block;margin:0 auto 30px}
.contact-photo{width:min(570px,100%);display:block;margin:0 auto 22px}.contact-info{text-align:center;font-size:21px;line-height:1.9}.contact-info a{text-decoration:none}.contact-info a:hover{text-decoration:underline}
.rule{border:0;border-top:1px solid var(--line);margin:35px 0}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;padding:30px;z-index:100}
.lightbox.open{display:flex}.lightbox img{max-width:95vw;max-height:90vh;object-fit:contain}.lightbox button{position:absolute;top:15px;right:20px;background:none;border:0;color:#fff;font-size:38px;cursor:pointer}
@media(max-width:800px){.topbar{height:auto}.topbar-inner{padding:8px 0;display:block;text-align:center}.brand{display:block;font-size:24px;margin-bottom:7px}.nav{justify-content:center;gap:18px;flex-wrap:wrap}.hero{min-height:310px}.hero h1{font-size:44px}.three-col,.video-grid{grid-template-columns:1fr}.photo-grid{grid-template-columns:repeat(2,1fr)}.section{padding:38px 22px}}
@media(max-width:500px){.photo-grid{grid-template-columns:1fr}.photo-card img{height:auto}.hero h1{font-size:36px}}

.slideshow-frame{position:relative;width:min(900px,100%);height:520px;margin:20px auto 0;overflow:hidden;background:#111;border:1px solid #ddd}
.slideshow-frame .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 1.1s ease-in-out}
.slideshow-frame .slide.active{opacity:1}
.slide-prev,.slide-next{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:64px;border:0;background:rgba(0,0,0,.35);color:#fff;font-size:42px;line-height:1;cursor:pointer;opacity:.45}
.slide-prev:hover,.slide-next:hover{opacity:.85}
.slide-prev{left:10px}.slide-next{right:10px}
.slideshow-hint{text-align:center;color:#666;font-size:13px;margin:10px 0 0}
@media(max-width:800px){.slideshow-frame{height:min(65vw,520px)}}

.quote-line{display:block;text-align:center}

.slideshow-frame{position:relative;width:min(900px,100%);height:520px;margin:20px auto 0;overflow:hidden;background:#111;border:1px solid #ddd}.slideshow-frame .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 1.1s ease-in-out}.slideshow-frame .slide.active{opacity:1}.slide-prev,.slide-next{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:64px;border:0;background:rgba(0,0,0,.35);color:#fff;font-size:42px;line-height:1;cursor:pointer;opacity:.45}.slide-prev:hover,.slide-next:hover{opacity:.85}.slide-prev{left:10px}.slide-next{right:10px}.slideshow-hint{text-align:center;color:#666;font-size:13px;margin:10px 0 0}@media(max-width:800px){.slideshow-frame{height:min(65vw,520px)}}

.feature-link{display:block;text-decoration:none;color:inherit}.feature-link:hover h2{text-decoration:underline}.feature-link:hover .feature-icon{transform:scale(1.04)}.feature-icon{transition:transform .15s ease}
.hero-title,.seeing-is-believing,.tagline,.site-title{text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased}
.quote-line{display:block;text-align:center}

/* Homepage spacing adjustment: raise the hero and feature sections slightly
   so more of the hand and keyboard image is visible without changing other content. */
.hero{min-height:330px}
.section{padding-top:38px;padding-bottom:38px}
@media(max-width:800px){.hero{min-height:270px}.section{padding-top:30px;padding-bottom:30px}}