:root{--green:#27f819;--white:#fafafa;--black:#000;--line-green:#20f80e;--max:1450px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:85px}
body{margin:0;background:var(--black);color:var(--white);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}svg{display:block}
:focus-visible{outline:3px solid #81ff70;outline-offset:4px}
.site-header{height:clamp(73px,7.8vw,105px);background:#000;position:relative;z-index:10}
.header-inner{height:100%;width:min(100%,var(--max));margin:auto;padding:0 4.0%;display:flex;gap:12px;justify-content:space-between;align-items:center}
.logo-link{flex:0 0 auto;width:clamp(145px,16vw,235px);display:block}
.header-logo{width:100%;height:auto}
.navigation{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,6.1vw,99px);margin:0 auto}
.navigation a{font-size:clamp(14px,1.52vw,20px);font-weight:600;white-space:nowrap;padding:7px 0;transition:color .2s}
.navigation a:hover,.navigation a.active{color:var(--green)}
.navigation a.active{border-bottom:3px solid var(--green)}
.button{display:inline-flex;justify-content:center;align-items:center;gap:15px;background:linear-gradient(180deg,#99ff5c 0%,#37f721 40%,#0bea04 100%);border:0;border-radius:7px;color:#000;font-size:clamp(14px,1.75vw,22px);font-weight:900;padding:0 22px;min-height:47px;white-space:nowrap;box-shadow:0 0 20px rgba(27,255,0,.07);transition:filter .18s,transform .18s}
.button:hover{filter:brightness(1.11);transform:translateY(-1px)}.button:active{transform:translateY(0)}
.button-small{font-size:clamp(12px,1.5vw,18px);min-height:36px;padding:0 clamp(12px,2.3vw,25px);border-radius:6px}
.menu-toggle{display:none;background:none;border:0;color:var(--green)}.menu-toggle svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
/* Five thin green-tinted gradient section dividers. */
.metal-divider{height:clamp(7px,.65vw,10px);background:linear-gradient(180deg,#030906 0%,#1d3026 22%,#728f7b 48%,#3b5647 69%,#07100b 100%);box-shadow:inset 0 1px 2px rgba(0,0,0,.4),inset 0 -1px 2px rgba(0,0,0,.45);position:relative;z-index:1}
.metal-divider::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.24),transparent 18%,rgba(255,255,255,.05) 50%,transparent 82%,rgba(0,0,0,.24));pointer-events:none}
/* HERO */
.hero{height:clamp(340px,35.9vw,540px);position:relative;isolation:isolate;overflow:hidden;background:#000}
.hero-photo{position:absolute;right:0;top:0;bottom:0;width:59%;background:url('assets/hero-theatre.webp') center center / cover no-repeat;z-index:-3}
.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.98) 15%,rgba(0,0,0,.88) 28%,rgba(0,0,0,.58) 41%,rgba(0,0,0,.08) 64%,rgba(0,0,0,0) 100%)}
.hero-content{position:relative;width:min(100%,var(--max));margin:0 auto;padding-left:3.9%;padding-top:clamp(31px,3.5vw,54px)}
.hero h1,.hero-subtitle{font-style:italic;font-family:Arial,Helvetica,sans-serif;font-weight:900;letter-spacing:-.04em;margin:0;text-shadow:1px 2px 1px #000}
.hero h1{font-size:clamp(49px,5.6vw,79px);line-height:.95}
.hero-subtitle{color:var(--green);font-size:clamp(30px,3.33vw,47px);line-height:1.00;margin-top:3px}
.hero-copy{font-size:clamp(17px,1.84vw,25px);line-height:1.26;margin:13px 0 15px;max-width:525px;letter-spacing:-.015em}
.hero-button{min-width:clamp(207px,22vw,301px);min-height:clamp(45px,4.8vw,61px)}
.arrow-right{font-size:1.7em;font-weight:400;line-height:.6;position:relative;top:-1px}
/* WHY CINEMAWORX */
.why{height:clamp(148px,15.6vw,216px);display:flex;flex-direction:column;justify-content:flex-start;padding-top:clamp(11px,1.15vw,19px)}
.section-title{margin:0 auto;display:flex;align-items:center;justify-content:center;gap:clamp(17px,3vw,42px);font-size:clamp(26px,3.08vw,42px);font-weight:800;letter-spacing:.065em;line-height:1.1;text-align:center;white-space:nowrap}
.section-title::before,.section-title::after{content:"";height:2px;width:clamp(80px,14.5vw,200px);background:linear-gradient(90deg,transparent 0%,#078902 42%,#29ff0a 100%)}
.section-title::after{transform:rotate(180deg)}
.why-row{display:grid;grid-template-columns:1.05fr .8fr 1.18fr .85fr;width:min(100%,var(--max));padding:0 2.6%;margin:auto;align-items:center}
.why-item{min-height:57px;display:flex;align-items:center;justify-content:center;gap:clamp(7px,1.1vw,17px);padding:0 clamp(8px,1.5vw,18px);border-right:2px solid var(--line-green)}
.why-item:last-child{border:0}
.why-item strong{font-size:clamp(14px,1.85vw,24px);letter-spacing:-.02em;line-height:1.1;white-space:nowrap;font-weight:850}
.why-icon{width:clamp(40px,4.8vw,61px);height:clamp(40px,4.8vw,61px);flex:0 0 auto;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none}
.us-icon{stroke-width:2.7}
/* SERVICES CAROUSEL */
.services{height:clamp(409px,43.6vw,605px);padding-top:clamp(11px,1.4vw,21px);overflow:hidden}
.carousel-shell{width:min(100%,var(--max));margin:clamp(18px,2.65vw,35px) auto 0;display:grid;grid-template-columns:clamp(50px,6.5vw,91px) 1fr clamp(50px,6.5vw,91px);align-items:center;gap:0}
.carousel-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(11px,1.55vw,23px);min-width:0}
.service-card{border:1px solid #969696;position:relative;overflow:hidden;border-radius:13px;background:#151515;color:#fff;height:clamp(286px,30.6vw,420px);padding:0;text-align:left;box-shadow:inset 0 0 1px rgba(255,255,255,.5);transition:border-color .2s,transform .2s}
.service-card:hover{border-color:#34ff17;transform:translateY(-2px)}
.service-card img{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(.9)}
.service-card::after{content:"";position:absolute;inset:48% 0 0;background:linear-gradient(0deg,rgba(0,0,0,.99),rgba(0,0,0,.75) 33%,transparent 100%);pointer-events:none}
.card-label{position:absolute;z-index:2;bottom:clamp(17px,2.0vw,28px);left:clamp(15px,1.6vw,24px);padding-left:clamp(13px,1.7vw,20px);border-left:4px solid var(--green);font-size:clamp(20px,2.27vw,31px);font-weight:900;font-style:italic;letter-spacing:-.035em;line-height:1.05;text-shadow:0 1px 2px #000}
.carousel-arrow{width:clamp(42px,4.8vw,62px);height:clamp(42px,4.8vw,62px);background:transparent;border:2px solid #25f215;border-radius:50%;color:var(--green);display:grid;place-items:center;margin:0 auto;transition:background .2s}
.carousel-arrow:hover{background:rgba(35,250,20,.15)}
.carousel-arrow svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.carousel-dots{margin:clamp(13px,1.8vw,22px) auto 0;display:flex;align-items:center;justify-content:center;gap:12px}
.dot{width:15px;height:15px;border:2px solid #fff;border-radius:50%;background:transparent;padding:0;display:block}
.dot.selected{background:var(--green);border-color:var(--green);box-shadow:0 0 7px rgba(45,255,30,.5)}
/* SEATS CTA */
.cta{height:clamp(194px,20.65vw,290px);background:url('assets/seats-banner.webp') center center / cover no-repeat;display:flex;align-items:center;padding:0 6.25%;position:relative}
.cta-panel{width:min(100%,1280px);margin:auto;min-height:clamp(79px,8.5vw,110px);border:2px solid var(--green);border-radius:14px;background:rgba(0,0,0,.95);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px clamp(15px,2.6vw,38px);box-shadow:0 0 12px rgba(0,255,0,.12)}
.cta-panel h2{font-size:clamp(28px,3.3vw,45px);font-style:italic;font-weight:900;letter-spacing:-.035em;line-height:1.1;margin:0;white-space:nowrap}
.cta-button{font-size:clamp(13px,1.6vw,20px);min-height:clamp(46px,4.8vw,60px);flex:0 0 auto}
/* APPROVED DARK GREEN GRAND TETON SCENE WITH LIVE CONTACT INFORMATION OVERLAID */
.footer{position:relative;height:clamp(375px,40.5vw,520px);background:url('assets/tetons-backdrop.webp') center center / cover no-repeat;overflow:hidden}
.footer::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.02) 45%,rgba(0,0,0,.1) 100%);pointer-events:none}
.footer-contact{position:absolute;left:0;right:0;top:38%;min-height:clamp(67px,7.15vw,93px);z-index:1;background:linear-gradient(90deg,rgba(0,18,15,.56),rgba(0,18,15,.62),rgba(0,18,15,.56));display:flex;align-items:center}
.footer-inner{width:min(100%,var(--max));margin:auto;padding:0 4.3%;display:grid;grid-template-columns:1fr 1.1fr 1.35fr 1.12fr;align-items:center}
.footer-logo{display:flex;align-items:center;padding-right:12px;height:55px}
.footer-logo img{width:clamp(130px,14.7vw,194px);height:auto}
.footer-detail{min-height:45px;border-left:2px solid #20f615;display:flex;justify-content:center;align-items:center;gap:clamp(6px,1.1vw,14px);padding:0 10px;font-size:clamp(13px,1.74vw,22px);white-space:nowrap}
a.footer-detail:hover span{text-decoration:underline}
.footer-detail svg{width:clamp(22px,2.9vw,36px);height:clamp(22px,2.9vw,36px);flex:0 0 auto;fill:var(--green);stroke:var(--green);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.footer-detail:nth-child(3) svg{fill:none;stroke-width:2.4}.footer-detail:nth-child(4) svg{fill:var(--green)}.footer-detail:nth-child(4) circle{fill:#03120b;stroke:none}
/* On-demand service details are real HTML, not baked into a picture. */
.service-dialog{width:min(480px,calc(100% - 30px));max-width:480px;max-height:calc(100dvh - 50px);border:1px solid #2fe418;border-radius:12px;padding:18px 20px 26px;background:#0b0e0b;color:#fff;box-shadow:0 25px 100px #000;position:fixed}
.service-dialog::backdrop{background:rgba(0,0,0,.79)}.service-dialog img{width:100%;height:190px;object-fit:cover;border-radius:7px}.service-dialog h2{font-size:27px;margin:20px 0 8px}.service-dialog p{font-size:16px;line-height:1.55;color:#e3e3e3;margin:0 0 22px}.service-dialog .button{font-size:14px}.dialog-close{position:absolute;right:26px;top:25px;background:#000;color:#fff;border:1px solid #777;font-size:17px;z-index:2;border-radius:5px;padding:4px 9px}
@media(min-width:1600px){.header-inner,.hero-content,.why-row,.carousel-shell,.footer-inner{max-width:1500px}}
@media(max-width:800px){
  .header-inner{padding-inline:3%}.navigation{gap:19px}.logo-link{width:135px}.header-quote{font-size:11px;min-height:36px}
  .why-item{padding:0 5px;gap:6px}.why-item strong{font-size:13px}.why-icon{width:34px;height:34px}
  .footer-inner{padding-inline:2.5%}.footer-detail{padding:0 6px;gap:6px;font-size:12px}.footer-logo img{width:115px}
}
@media(max-width:640px){
  html{scroll-padding-top:70px}
  .site-header{height:72px}.header-inner{padding:0 18px;gap:10px}.logo-link{width:120px}.header-quote{margin-left:auto;font-size:10px;min-height:38px;padding:0 10px}.menu-toggle{display:block;order:3;padding:7px}
  .navigation{display:none;position:absolute;left:0;right:0;top:72px;background:#050705;border-top:1px solid #264026;flex-direction:column;align-items:stretch;padding:12px 22px 22px;gap:4px;box-shadow:0 15px 22px #000}.navigation.open{display:flex}.navigation a{font-size:16px;padding:12px 0}.navigation a.active{border-bottom:0}
  .metal-divider{height:7px}
  .hero{height:630px}.hero-photo{width:100%;height:60%;top:0;bottom:auto;background-position:center}.hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.62) 30%,#000 61%,#000 100%)}
  .hero-content{padding:285px 22px 25px}.hero h1{font-size:49px}.hero-subtitle{font-size:29px}.hero-copy{font-size:16px;line-height:1.45;max-width:350px}.desktop-break{display:none}.hero-button{min-height:45px;min-width:205px;font-size:16px}
  .why{height:auto;min-height:220px;padding:20px 14px 24px}.section-title{font-size:20px;gap:11px}.section-title::before,.section-title::after{width:38px}
  .why-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 0;margin-top:23px;padding:0}.why-item{border-right:0;justify-content:flex-start;padding:0 12px}.why-item:nth-child(odd){border-right:2px solid var(--green)}.why-item strong{font-size:14px}.why-icon{width:36px;height:36px}
  .services{height:480px;padding-top:21px}.carousel-shell{grid-template-columns:48px minmax(0,1fr) 48px;margin-top:27px}.carousel-track{grid-template-columns:minmax(0,1fr)}.service-card{height:335px}.service-card img{object-fit:cover}.card-label{font-size:27px}.carousel-arrow{width:40px;height:40px}.carousel-dots{margin-top:20px;gap:7px}.dot{width:11px;height:11px}
  .cta{height:230px;padding-inline:15px}.cta-panel{padding:14px 15px;min-height:130px;flex-direction:column;justify-content:center;gap:15px}.cta-panel h2{font-size:clamp(21px,5.7vw,28px);text-align:center;white-space:normal}.cta-button{font-size:14px;min-height:44px}
  .footer{height:355px;background-position:center}.footer-contact{top:30%;min-height:164px}.footer-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 18px}.footer-logo{height:60px;padding:0}.footer-logo img{width:133px}.footer-detail{font-size:12px;gap:6px;justify-content:flex-start;padding:0 7px;min-height:40px}.footer-detail svg{width:21px;height:21px}.footer-detail.location{grid-column:2}
}
@media(max-width:360px){.header-quote{font-size:9px;min-height:32px}.logo-link{width:109px}.header-inner{padding-inline:11px}.why-item strong{font-size:12px}.footer-detail{font-size:11px}.footer-inner{padding-inline:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
