/* ====================================================================== */
/* RESET + BASE                                                           */
/* ====================================================================== */

body, div, ul, li, h1, h2, h3, textarea { margin:0; padding:0; }
img { border:0; }

body{
  background-color:#fff;
  color:#000;
  font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:.9em;
  line-height:1.8em;
  -webkit-font-smoothing:antialiased;
  -moz-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-weight:300;
  overflow:auto;
}

/* simple global transitions */
body, #sj, #sj a, #line, #menu a{
  transition:background-color 150ms linear, color 150ms linear, opacity 150ms linear;
}

/* Dark mode */
body.is-dark{ background-color:#131313; color:#fff; }
body.is-dark #sj,
body.is-dark #sj a,
body.is-dark #line{ color:#fff; }
body.is-dark #menu a{ color:#fff; opacity:.75; }

body.menu-anim #content{ transition:height 300ms linear; }


/* GLOBAL DARK DEFAULT */

body.is-dark {
  background-color:#111;
  color:#e5e5e5;
}

body.is-dark a {
  color:#ffffff;
}

body.is-dark a:hover {
  opacity:.7;
}

/* ====================================================================== */
/* TYPE                                                                   */
/* ====================================================================== */

p{ margin:.1em 0 20px 0; }

a{ color:#000; text-decoration:none; outline:0; }
.media{ color:#000; opacity:1; text-decoration:none; outline:0; }

/* subtle link hover classes */
.mL, .mmL{ opacity:.6; transition:opacity 0.2s ease; }
.mL:hover, .mmL:hover{ opacity:1; }

button{ all:unset; display:inline-block; cursor:pointer; }

/* hidden hcard / title blocks */
#hcard-Zipper-Films{ position:absolute; top:-500px; width:320px; height:25px; overflow:hidden; }
#title{
  position:relative;
  top:0;
  width:320px;
  height:1px;
  margin:0 auto;
  text-align:center;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}
#title *{ pointer-events:none; }

#zipperfilms{ position:relative; top:0; width:320px; height:20px; margin:0 auto; text-align:center; overflow:hidden; z-index:0; }

h1{ color:#999; font-weight:400; font-size:2em; line-height:2em; letter-spacing:.1em; margin:25px 0 2px 0; }
h2{ color:#999; font-weight:200; font-size:1.2em; line-height:2em; letter-spacing:.2em; margin:15px 0 7px 0; }
h3{ color:#fff; font-weight:300; font-size:2em; line-height:1.8em; letter-spacing:.1em; margin:15px 0 2px 0; }

/* ====================================================================== */
/* PAGE WIDTH HELPER                                                      */
/* ====================================================================== */

/* Optional inner wrapper if you use it */
.pageInner{ width:100%; max-width:1450px; margin:0 auto; padding:0 24px; box-sizing:border-box; }

/* Above 1450 you said you want full-bleed (no side gutters) */
@media (min-width:1450px){
  .pageInner{ max-width:none; width:100%; margin:0; padding:0; }
}

.visuallyH{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ====================================================================== */
/* HEADER                                                                 */
/* ====================================================================== */

#header{ position:relative; top:0; left:0; width:100%; overflow:hidden; z-index:10000; }

#headerContent{
  position:relative;
  left:0 !important;          
  width:100%;
  max-width:1394px;            
  margin:0 auto;
  padding:0 4px;
  box-sizing:border-box;
  z-index:10001;
}

#headerMargin{
  position:relative;
  transition:all 0.2s ease-in-out;
}
.headerMargin{ margin-top:20px; margin-bottom:20px; }
body.reel-page .headerMargin{ margin-bottom:0; }

body.home #header{ background:transparent; }
body.home #headerContent{ background:transparent; }

/* Zipper name block */
#ZipperFilms{ position:relative; height:70px; margin:0 0 0 10px; overflow:hidden; font-size:2em; font-weight:200; line-height:1.5em; letter-spacing:.05em; opacity:1; transition:all 0.2s ease-in-out; }

#name{ position:relative; top:5px; width:251px; height:25px; float:left; margin:0; }

#ZF-logo{ position:relative; width:70px; height:49px; float:left; }
#ZF-name{ position:relative; width:251px; height:25px; float:left; margin:0 0 0 20px; }

#ZF-logo img{ width:70px; height:49px; }
#ZF-name img{ width:251px; height:25px; }

.shrink{ margin-top:10px; margin-bottom:10px; }

/* ZF name crossfade (normal vs dark) */
#ZF-name{ position:relative; }

#name-normal,
#name-dark{
  position:absolute;
  left:0;
  top:0;
  width:251px;
  height:25px;
  display:block;
  opacity:1;
  transition:opacity 250ms ease;
  will-change:opacity;
}

#name-dark{ opacity:0; pointer-events:none; }
body.is-dark #name-normal{ opacity:0; }
body.is-dark #name-dark{ opacity:1; }

/* ====================================================================== */
/* MENU                                                                   */
/* ====================================================================== */

#menu{
  position:relative;
  left:0;
  text-align:center;
  padding:0;
  font-size:.9em;
  letter-spacing:.1em;
  overflow:hidden;
  text-transform:uppercase;
  z-index:10002;
}

#menu ul{ float:left; display:inline; }
#menu ul li{ display:inline; list-style:none; padding:0 30px 0 0; }

#menu a{ display:inline-block; padding:8px 8px; line-height:1em; }
#menu a:hover{ opacity:1 !important; }

#subsections{ margin-top:100px; }
#contact{ float:right; }

#mobileMenuContainer{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  height:0;
  overflow:hidden;
  padding-bottom:0;
  text-transform:uppercase;
  z-index:9999;
  display:none;
}
#mobileMenuContainer ul{ display:block; }
#mobileMenuContainer ul li{ display:block; list-style:none; padding:8px 10px 5px 15px; text-align:center; }
#mobileMenuContainer.is-open{ display:block; }

#menuToggle{ position:absolute; top:.5em; overflow:hidden; display:none; }
#menuToggle img{ border:0; }

/*-------------------------------------------------------------------------------------------------------------------- MOBILE MENU PLAY */

#mobileMenuContainer ul li{padding:0; text-align:center;}

#mobileMenuContainer a{ display:block; padding:14px 15px; letter-spacing:.18em; font-weight:300; line-height:1.2; -webkit-tap-highlight-color: rgba(255,255,255,0.15);}

#mobileMenuContainer ul li + li{ border-top:0; box-shadow: inset 0 1px 0 rgba(212, 212, 212, 1); margin:0 31px;}


#archive{
  position:relative;
  margin:1em 1em 3.5em 0;
  float:right;
  text-align:right;
  padding:0;
  font-size:1.1em;
  letter-spacing:.1em;
  overflow:hidden;
  text-transform:uppercase;
}
.plus{ font-size:1.3em; }

/* ====================================================================== */
/* LAYOUT                                                                 */
/* ====================================================================== */

#site{
  position:fixed;
  top:0;
  left:0;
  height:100%;
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  color:#fff;
  z-index:1;
}

/* Scroll container */
#content{
  position:relative;
  z-index:0;
  overflow-y:scroll;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  box-sizing:border-box;
  scrollbar-gutter:stable;

  display:flex;
  flex-direction:column;
}


/* scrollbar behavior (hidden until hover) */
#content::-webkit-scrollbar{ width:10px; }
#content::-webkit-scrollbar-track{ background:transparent; }
#content::-webkit-scrollbar-thumb{ background:transparent; border-radius:6px; }

#content:hover::-webkit-scrollbar-track{ background:#fff; }
#content:hover::-webkit-scrollbar-thumb{ background:#ccc; }
#content:hover::-webkit-scrollbar-thumb:hover{ background:#999; }

body.is-dark #content:hover::-webkit-scrollbar-track{ background:#111; }
body.is-dark #content:hover::-webkit-scrollbar-thumb{ background:#333; }
body.is-dark #content:hover::-webkit-scrollbar-thumb:hover{ background:#555; }

/* Hide scrollbar + remove gutter */
#content{ scrollbar-width:none; -ms-overflow-style:none; }
#content::-webkit-scrollbar{ width:0; height:0; }

#page{position:relative;width:1394px;padding:0;overflow:hidden;margin-left:auto;margin-right:auto;left:0 !important;flex:0 0 auto;}
.page{ overflow:auto; }



/* legacy  (not your new siteFooter) */
#footer{
  position:absolute;
  left:0;
  text-align:center;
  font-size:.8em;
  height:10px;
  bottom:0;
  width:100%;
  background-color:#fff;
  z-index:110;
}
#footer ul{ display:inline; }
#footer ul li{ display:inline; list-style:none; padding:15px; }

.siteFooterLinks a{ color:#fff; text-decoration:none; outline:0; }


.siteFooterLinks{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:18px;
}

.siteFooterLinks a{
  color:#fff;
  opacity:.9;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.85em;
}

.siteFooterLinks a:hover{
  opacity:1;
}

.siteFooter h3{ font-size:2.6em; line-height:1.15em; letter-spacing:.02em; font-weight:300; margin:0 0 18px 0; }
/* ====================================================================== */
/* ABOUT                                                                  */
/* ====================================================================== */


/* 0) Ensure About is not constrained by global #page rules */
body.about #page{ width:100%; max-width:1390px; margin:0 auto; padding:0; overflow:visible; left:0 !important; }
  

/* 2) Outer wrap spacing (the section) */
body.about .aboutWrap{ width:100%; display:flex; justify-content:center; box-sizing:border-box; }

/* 3) The card (panel) */
body.about .aboutCard{ width:100%; max-width:1390px; margin:0 auto; padding:40px; box-sizing:border-box; background:rgba(38,38,38,1); }
/* 4) Grid layout inside card */
body.about .aboutGrid{ display:grid; grid-template-columns:minmax(240px,400px) 1fr; gap:32px; align-items:start; }
/* 5) Media */
body.about .aboutMedia{ margin:0; display:flex; flex-direction:column; gap:18px; }
body.about .aboutMedia img{ width:100%; height:auto; display:block; }
/* 6) Copy */
body.about .aboutCopy{ color:rgba(255,255,255,.92); }
body.about .aboutCopy p{ margin:0 0 18px 0; font-size:1.05em; line-height:2.0em; max-width:62ch; }
/* 7) Responsive */

/* Image stretch */

/* ABOUT: keep the media column filled to match the copy height */
body.about .aboutGrid{ align-items:stretch; }

body.about .aboutMedia{ height:100%; display:flex; flex-direction:column; gap:18px; }

/* Fill the column: images share the available height and crop instead of leaving empty space */
body.about .aboutMedia img{ width:100%; flex:1 1 0; height:0; min-height:160px; object-fit:cover; display:block; }

/* ====================================================================== */
/* CONTACT (CONSOLIDATED)                                                 */
/* ====================================================================== */

body.contact #page{ position:relative; width:1394px; max-width:none; margin:0 auto; padding:0; overflow:visible; left:0 !important; }
@media (max-width:1449px){ body.contact #page{ width:100%; } }

body.contact #contact{ background:rgba(38,38,38,1); }

body.contact .contactWrap{ width:100%; display:flex; justify-content:center; box-sizing:border-box; }
body.contact .contactCard{ width:100%; margin:0 auto; padding:50px 40px; box-sizing:border-box; background:transparent; }

body.contact .contactGrid{ display:grid; grid-template-columns:minmax(0,600px); justify-content:center; align-items:start; }
body.contact .contactContent{ width:100%; max-width:600px; margin:0 auto; text-align:left; }

body.contact .contactHeader{ margin:0 0 18px 0; }
body.contact .contactSubhead{ margin:0 0 22px 0; }

body.contact .contactSubhead, body.contact .contactLine, body.contact .contactMeta{ font-size:1.15em; line-height:2.05em; letter-spacing:.02em; color:rgba(255,255,255,.92); }
body.contact .contactLine{ display:block; margin:0 0 14px 0; }
body.contact .contactMeta{ margin-top:18px; opacity:.75; }

body.contact .contactLine a{ color:rgba(255,255,255,.92); opacity:.92; }
body.contact .contactLine a:hover{ opacity:1; }

@media (max-width:900px){ body.contact .contactCard{ padding:28px 22px; } body.contact .contactGrid{ grid-template-columns:minmax(0,720px); } }
@media (max-width:500px){ body.contact .contactGrid{ grid-template-columns:1fr; } body.contact .contactContent{ max-width:none; } }

/* bottom image stack (in footerHtml) */
body.contact .contactBottomStack{ position:relative; display:block; width:100%; margin:0; padding:0; }
body.contact .contactBottomMedia{ position:relative; display:block; width:100%; margin:0; padding:0; overflow:hidden; line-height:0; height:clamp(360px,56vh,820px); }
body.contact .contactBottomMedia img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }

@media (min-width:1450px){ body.contact .contactBottomMedia{ height:clamp(420px,62vh,920px); } }
@media (max-width:700px){ body.contact .contactBottomMedia{ height:clamp(260px,42vh,520px); } }

/* ====================================================================== */
/* THUMBNAILS / GRID                                                      */
/* ====================================================================== */

.th{ position:relative; display:inline; float:left; overflow:hidden; border:0 solid #fff; margin-bottom:40px; background-color:#252525; }

.th a.media{ display:block; position:relative; line-height:0; }
.th a.media video{ display:block; width:100%; height:auto; }

video{ position:relative; width:100%; height:auto; border:none; outline:none; top:0; object-fit:cover; display:block; margin-top:0; }

.thVid{ margin-top:0; }

.white{ position:absolute; background-color:#fff; float:left; display:block; overflow:hidden; border:0 solid #000; z-index:100; }

.details{ position:relative; float:left; bottom:0; padding:5px; display:inline; text-indent:0em; }

/* Thumb overlay only */
.th .rO{ position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; background-color:#000; opacity:.5; z-index:150; pointer-events:none; transform:translateZ(0); }

.th .rC{ position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; display:flex; align-items:center; justify-content:center; z-index:200; opacity:0; pointer-events:none; transition:opacity 200ms linear; transform:translateZ(0); }

.th:hover .rC{ opacity:1; pointer-events:auto; }

.th .rCtext{ position:relative; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; z-index:210; color:#fff; font-size:2.4em; letter-spacing:.1em; }

/* Legacy non-thumb rollover blocks (kept) */
.rCtextMobile{ position:relative; float:left; display:none; overflow:hidden; border:0 solid #fff; margin:0 10px 40px 0; font-size:2em; }
.rCtextTitle{ vertical-align:inherit; font-size:.5em; line-height:1em; text-align:center; letter-spacing:.1em; }
.rCtextType{ vertical-align:inherit; font-size:.5em; line-height:1em; text-align:center; letter-spacing:.1em; font-style:italic; }
.transition{ transform:scale(1.1); }

/* ====================================================================== */
/* HAMBURGER                                                              */
/* ====================================================================== */

.hamburger{ padding:10px 0; display:inline-block; cursor:pointer; transition-property:opacity, filter; transition-duration:0.15s; transition-timing-function:linear; font:inherit; color:inherit; text-transform:none; background-color:transparent; border:0; margin:0; overflow:visible; }

.hamburger-box{ width:30px; height:18px; display:inline-block; position:relative; }

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after{
  width:30px;
  height:3px;
  background-color:#fff;
  border-radius:3px;
  position:absolute;
  transition-property:transform;
  transition-duration:0.15s;
  transition-timing-function:ease;
}

.hamburger-inner{ display:block; top:50%; margin-top:-2px; }

.hamburger-inner::before,
.hamburger-inner::after{ content:""; display:block; }

.hamburger-inner::before{ top:-10px; }
.hamburger-inner::after{ bottom:-10px; }

.hamburger-inner.changed,
.hamburger-inner.changed::before,
.hamburger-inner.changed::after{ background-color:#fff; opacity:1; }

.hamburger--collapse-r .hamburger-inner{ top:auto; bottom:0; transition-duration:.15s; transition-delay:0; transition-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--collapse-r .hamburger-inner::after{ top:-20px; transition:top 0.15s 0.08s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }

.hamburger--collapse-r .hamburger-inner::before{ transition:top 0.06s 0.10s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.06s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--collapse-r.is-active .hamburger-inner{ transform:translate3d(0, -10px, 0) rotate(45deg); transition-delay:0.15s; transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); }

.hamburger--collapse-r.is-active .hamburger-inner::after{ top:0; opacity:0; transition:top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.1s linear; }

.hamburger--collapse-r.is-active .hamburger-inner::before{ top:0; transform:rotate(90deg); transition:top 0.1s .1s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }

/* Dark mode (kept even though redundant, in case you change base bar color later) */
body.is-dark .hamburger-inner,
body.is-dark .hamburger-inner::before,
body.is-dark .hamburger-inner::after{ background-color:#fff; }

/* ====================================================================== */
/* HOME FULLSCREEN REEL                                                   */
/* ====================================================================== */




/* HOME FULLSCREEN REEL — zipperfilmsmiami home */
body.zipper-films #header{ position:absolute; top:0; left:0; width:100%; z-index:10000; }
body.zipper-films #content{ position:absolute; inset:0; height:100%; width:100%; overflow:hidden; }
body.zipper-films #page{ width:100%; max-width:none; margin:0; padding:0; overflow:visible; }

body.zipper-films{ overflow:hidden; }
body.zipper-films #site{ position:fixed; inset:0; height:100%; width:100%; }

/* make header transparent so video is visible behind */
body.zipper-films #header{ background:transparent; }
body.zipper-films #headerContent{ background:transparent; }



/* HOME FULLSCREEN REEL — zipperfilmsmiami home */
html, body{ height:100%; }
body.zipper-films{ overflow:hidden; }
body.zipper-films #site{ position:fixed; inset:0; height:100%; width:100%; overflow:hidden; }

/* header overlays */
body.zipper-films #header{ position:fixed; top:0; left:0; width:100%; z-index:10000; background:transparent; }

/* fullscreen video canvas */
body.zipper-films #content{ position:fixed; inset:0; height:100%; width:100%; overflow:hidden; z-index:1; }
body.zipper-films #page{ width:100%; max-width:none; margin:0; padding:0; overflow:visible; }

/* stack slides vertically (so translateY works) */
body.zipper-films .homeReel{ position:absolute; inset:0; width:100%; height:100%; }
body.zipper-films .homeTrack{ position:absolute; top:0; left:0; width:100%; height:auto; transform:translate3d(0,0,0); transition:transform 550ms ease; will-change:transform; }
body.zipper-films .homeSlide{ position:relative; width:100%; height:100vh; overflow:hidden; background:#000; }
body.zipper-films .homeVideo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }


.homeReel{ position:relative; width:100%; height:100%; }
.homeTrack{ position:absolute; top:0; left:0; width:100%; height:100%; transform:translate3d(0,0,0); transition:transform 550ms ease; will-change:transform; }

.homeSlide{ position:relative; width:100%; height:100%; overflow:hidden; background:#000; }
.homeVideo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

.homeOverlay{ position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.45)); pointer-events:none; }

.homeMeta{ position:absolute; right:22px; bottom:18px; text-align:right; color:#fff; z-index:5; }
.homeMetaTitle{ font-size:1.05em; letter-spacing:.08em; text-transform:uppercase; opacity:.92; }
.homeMetaDirector{ margin-top:6px; font-size:.95em; letter-spacing:.06em; opacity:.75; }

@media only screen and (max-width:700px){
  .homeMeta{ right:14px; bottom:14px; }
  .homeMetaTitle{ font-size:.95em; }
  .homeMetaDirector{ font-size:.9em; }
}


/* ========================================================= */
/* HOME HEADER THEME — use DARK png (white wordmark)          */
/* ========================================================= */

/* Force the "dark" name asset to show on home */
body.zipper-films #name-normal{ opacity:0; }
body.zipper-films #name-dark{ opacity:1; }

/* Menu links white like reel pages */
body.zipper-films #menu a{ color:#fff; opacity:.75; }
body.zipper-films #menu a:hover{ opacity:1; }

/* Mobile menu links white too */
body.zipper-films #mobileMenuContainer a{ color:#fff; }

/* Hamburger bars white */
body.zipper-films .hamburger-inner,
body.zipper-films .hamburger-inner::before,
body.zipper-films .hamburger-inner::after{ background-color:#fff; }




/* ====================================================================== */
/* HOME                                                                    */
/* ====================================================================== */

/* HERO */
.homeIntro{ padding-top:100px; padding-bottom:70px; overflow:hidden; background-image:url("/elements/images/zipper-films-bts-set.jpg"); background-size:cover; background-position:center; background-repeat:no-repeat; background-color:#000; }

.homeIntro::before{ content:none !important; }
.homeIntro::after{ content:none !important; }

.homeIntroInner{ width:62%; max-width:980px; margin:0 auto; text-align:center; color:#fff; }

.homeHeadline{ margin:0 0 18px 0; font-weight:300; font-size:2.75em; line-height:1.15em; letter-spacing:.035em; color:#fff; }

.homeSubhead{ margin:0 auto; font-weight:300; font-size:1.5em; line-height:1.9em; letter-spacing:.02em; color:#fff; white-space:nowrap; }

.homeValues{ display:block; margin-top:26px; letter-spacing:.28em; word-spacing:.75em; text-transform:uppercase; font-size:.7em; color:#fff; opacity:1; }

/* FEATURED LABEL */
.homeFeatured{ width:100%; padding:0 0 28px 0; }
.homeFeaturedHeader{ width:100%; padding:25px 0 5px 0; text-align:right; }
.homeFeaturedTitle{ display:inline-block; font-size:1em; letter-spacing:.32em; text-transform:uppercase; color:#666; }

/* optional deck blocks (kept as you had them) */
.sectionDeckWrap{ width:100%; padding:0px 0 0px 0; }
.sectionDeckInner{ width:62%; max-width:760px; margin:0 auto; font-weight:300; font-size:1.05em; line-height:1.9em; letter-spacing:.01em; color:#444; text-align:left; }
.sectionFooter{ width:100%; padding:80px 0 100px 0; }
.sectionFooterInner{ width:62%; max-width:760px; margin:0; text-align:left; }

/* shared inner column used by hero + footer + any marketing blocks */
.sectionInner{ width:62%; max-width:980px; margin:0 auto; padding:0 24px; box-sizing:border-box; }

.hero{ position:relative; padding:90px 0 70px; overflow:hidden; background-size:cover; background-position:center; background-repeat:no-repeat; flex:0 0 auto; }
.hero .sectionInner{ position:relative; color:#fff; text-align:center; }

.heroKicker{ letter-spacing:.22em; text-transform:uppercase; font-size:.9em; opacity:.9; margin:0 0 14px 0; }

.heroHeadline{ margin:0 0 18px 0; font-weight:300; font-size:2.6em; line-height:1.15em; letter-spacing:.02em; }


.heroValues{ margin-top:22px; letter-spacing:.28em; text-transform:uppercase; font-size:.95em; opacity:.95; }


/* ====================================================================== */
/* COMMERCIALS + POLLO HERO / FOOTER VARIANTS                              */
/* ====================================================================== */




.heroReel{ padding:14px 0 12px; min-height:0; display:block; background:none; }
.heroReel::before{ content:none; }

/* match page width and align with grid */
.heroReel .sectionInner{ width:1394px; max-width:none; margin:0 auto; padding:0 4px; box-sizing:border-box; text-align:left; }

/* type: small but present */
.heroReel .heroHeadline{ font-size:1.05em; line-height:1.35em; letter-spacing:.02em; margin:0; opacity:.92; }

.heroReel .sectionInner{ padding-bottom:12px; text-align:right; }

.heroReel .heroHeadline{ display:inline-block; font-size:1.1em; line-height:1.35em; letter-spacing:.02em; margin:0; opacity:.92; }


@media only screen and (max-width:1449px){
  .heroReel .sectionInner{ width:100%; padding:0 31px; }
}
@media only screen and (max-width:700px){
  .heroReel{ padding:12px 0 10px; }
  .heroReel .sectionInner{ padding:0 16px; }
  .heroReel .heroHeadline{ font-size:1.0em; line-height:1.35em; }
}



/* ====================================================================== */
/* REEL CLOSE BUTTON                                                      */
/* ====================================================================== */

#close{ position:absolute; width:30px; height:30px; top:0; right:0; z-index:5000; display:block; cursor:pointer; margin:0; }

#close::before,
#close::after{ content:""; position:absolute; top:50%; left:50%; width:100%; height:3px; background-color:#bbb; transform-origin:center; transition:background-color 0.2s linear; }
#close::before{ transform:translate(-50%, -50%) rotate(45deg); }
#close::after{ transform:translate(-50%, -50%) rotate(-45deg); }
#close:hover::before,
#close:hover::after{ background-color:#fff; }

/* ====================================================================== */
/* MEDIA PLAYER                                                           */
/* ====================================================================== */

#mediaWrap{ position:relative; margin:0 auto; width:100%; max-width:1390px; padding-top:40px; overflow:visible; }
#mediaPlayer{ position:relative; width:100%; padding:0; margin:0 auto; overflow:visible; height:auto; }
#mediaWin{ position:relative; display:block; float:none; width:100%; padding:0; margin:0 auto; overflow:hidden; }

#mediaInfo{ position:relative; float:none; display:block; width:100%; text-align:left; white-space:nowrap; overflow:hidden; padding:10px 5px; box-sizing:border-box; }
#mainInfo{ position:relative; color:#fff; min-width:50%; float:left; margin-bottom:10px; text-align:left; white-space:nowrap; }
#awards{ position:relative; color:#fff; float:right; display:inline; text-align:right; white-space:nowrap; }

#height{ position:fixed; left:50%; transform:translateX(-50%); width:100%; max-width:1390px; margin-top:10px; text-align:left; bottom:-200vh; overflow:hidden; z-index:-150; color:#232323; pointer-events:none; }

#fullDetails{ position:relative; float:left; width:100%; margin-top:15px; white-space:normal; display:block; text-indent:0em; }
.tech{ position:absolute; float:left; top:100%; padding:5px; display:block; text-indent:0em; }

#mediaInfo ul{ display:block; }
#mediaInfo ul li{ display:block; list-style:none; }

/* ratio box */
#mediaWin::before{ content:""; display:block; padding-top:56.25%; }
#mediaWin iframe,
#mediaWin video{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

/* 3-up grid */
.bundleGrid{ position:absolute; top:0; left:0; width:100%; height:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.bundleCell{ position:relative; width:100%; height:100%; overflow:hidden; display:flex; flex-direction:column; }
.bundleCell iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
.bundleLabel{ margin-top:10px; font-size:.9em; letter-spacing:.08em; text-transform:uppercase; opacity:.75; text-align:left; }

/* =========================================================
   F O O T E R  (confined background, aligned to thumbs)
   ========================================================= */

/* pageAligned controls the width behavior you described */

@media (max-width:1450px){ .pageAligned{ width:100%; } }

.pageAligned{
  position:relative;
  box-sizing:border-box;
  width:1394px;
  margin:0 auto;
  left:0 !important;
}

/* footer box itself */
.siteFooter{
  position:relative;
  padding:70px 0 110px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  /* replace flex:1 0 auto; with this */
 

  display:flex;
  align-items:flex-end;
  min-height:30vh;
}
.siteFooter{ flex:1 0 auto; min-height:30vh; }
.siteFooter{ background-size:cover; background-position:center; background-repeat:no-repeat; }

/* footer content column */
.siteFooterInner{
  width:62%;
  max-width:980px;
  margin:0 auto;
}

@media (max-width:1450px){
  .siteFooterInner{ width:100%; padding:0 4px; }
}
@media (max-width:500px){
  .siteFooterInner{ padding:0; }
}



/* ====================================================================== */
/* RESPONSIVE                                                             */
/* ====================================================================== */

@media only screen and (max-width:1449px){
  #headerContent{ padding:0 31px; }
  #page{ width:100%; padding:0 4px 4px 4px; left:auto; right:auto; }
   body.about #page{ width:100%; max-width:1390px; margin:0 auto; padding:0 0px; overflow:visible; }
  .pageAligned{ width:100% !important; left:0 !important; left:0;}
  .rCtextMobile{ display:none; }
  #footer{ height:10px; }
}

@media only screen and (max-width:1000px){
  .homeIntroInner{ width:78%; }
  .heroHeadline{ font-size:2.1em; }
  .siteFooter h3{ font-size:2.1em; }
  .th .rCtext{ font-size:2em; letter-spacing:.1em; }
  

}

@media only screen and (max-width:900px){
  body.about .aboutGrid{ grid-template-columns:1fr; gap:18px; } 
  body.about .aboutCard{ padding:22px; } 
  body.about .aboutCopy p{ max-width:none; }
  #headerContent{ padding:0 31px; }
  .sectionDeckInner{ width:86%; font-size:1em; }
  .sectionFooterInner{ width:100%; max-width:42em; }
  .siteFooterInner{ width:calc(100% - 48px); }
  
  #menu{ display:none; }
  #menuToggle{ right:8px; left:auto; display:block; top:5px; z-index:20000; }
  
  body.about .aboutGrid{ grid-template-columns:minmax(140px, 38vw) 1fr; gap:18px; align-items:start; }
  body.about .aboutMedia{ margin:0; }
  body.about .aboutMedia img{ width:100%; height:auto; display:block; }
  .th .rCtext{ font-size:1.8em; letter-spacing:.1em; }
}


@media only screen and (max-width:700px){
  #headerContent{ padding:0 0px; }
  .headerMargin{ margin-top:20px; margin-bottom:0px; }
  #page{ width:100%; padding:0 4px 4px 4px; }
  #ZF-name img{ width:201px; height:20px; }
  

    .hero{ padding:44px 0 36px; }
    .heroHeadline{ font-size:1.7em; line-height:1.25em; }
    .siteFooter h3{ font-size:1.7em; line-height:1.25em; }
    .heroValues{ letter-spacing:.18em; }


  
  #menu{ display:none; }
  #menuToggle{ right:8px; left:auto; display:block; top:5px; }

  .th{ margin-bottom:0; }
  .th .rO{ display:none; }
  .th .rC{ display:none !important; }

  video.thumbVid{ background:#000; display:block; width:100%; height:100%; }

  .rCtextMobile{ display:block !important; margin:2px 0 20px 5px; color:#fff; font-size:1.3em; }

  #archive{ margin:3em 1em 3.5em 0; }
  #mediaInfo{ font-size:1.1em; line-height:1.4em; white-space:normal; }

  #connect{ max-width:370px; margin:0 auto; padding:0 10px; }
  #awards{ float:left; width:100%; text-align:left; }

  .homeIntro{ padding:40px 0 28px 0; }
  .homeIntroInner{ width:90%; text-align:center; }
  .homeHeadline{ font-size:1.9em; }
  .homeSubhead{ font-size:1.0em; line-height:1.75em; white-space:normal; }
  .homeFeaturedTitle{ text-align:left; padding-left:4px; }

 
}

@media only screen and (max-width:500px){

  /* keep your existing layout padding rules, but make the shared inner column behave */
  .sectionInner{ width:100%; padding:0 16px; box-sizing:border-box; }

  /* HERO */
  .sectionInner{ width:100%; padding:0 16px; box-sizing:border-box; }
  
  .hero{ padding:34px 0 28px 0; }
  .hero .sectionInner{ margin-left:auto; margin-right:auto; text-align:center; }
  .heroKicker{ font-size:.8em; letter-spacing:.18em; margin:0 0 10px 0; text-align:center; }
  
  .heroHeadline{ font-size:1.35em; line-height:1.25em; letter-spacing:.01em; margin:0 0 12px 0; text-align:center; }
  .siteFooter h3{ font-size:1.35em; line-height:1.25em; letter-spacing:.01em; margin:0 0 12px 0; }
  
  .heroReel{ padding:8px 0 6px; }
  .heroReel .sectionInner{ padding:0 16px; }
  .heroReel .heroHeadline{ font-size:.98em; line-height:1.25em; }
  
  /* Make header spacing tighter and more even */
  .headerMargin{ margin-top:12px; margin-bottom:10px; }
  
  /* Make the section header strip feel balanced with the header */
  .heroReel{ padding:10px 0 12px; }
  .heroReel .sectionInner{ padding:0 16px; text-align:center; }
  .heroReel .heroHeadline{ font-size:.98em; line-height:1.25em; letter-spacing:.02em; margin:0; opacity:.92; }
  
  .heroValues{ font-size:.75em; letter-spacing:.14em; margin-top:12px; text-align:center; }

  /* FEATURED label spacing */
  .homeFeaturedHeader{ padding:18px 0 8px 0; text-align:left; }
  .homeFeaturedTitle{ padding-left:0; }

  /* FOOTER */
  .siteFooter{ padding:44px 0 54px 0; }
  .siteFooterLinks{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
  .siteFooterLinks a{ display:inline-block; opacity:.92; }
  .siteFooterCopy{font-size:1.35em; line-height:1.25em; letter-spacing:.01em; margin:0 0 12px 0;}

  body.about .aboutGrid{ grid-template-columns:minmax(140px, 42vw) 1fr !important; }
  
  body.about .aboutGrid{
    align-items:start;
  }
  
  body.about .aboutMedia{
    height:auto;
  }
  
  body.about .aboutMedia img{
    flex:none;
    height:auto;
    object-fit:contain;
  }

}