html {scroll-behavior: smooth;}
body  {margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
  background: rgb(93, 168, 236); color: #111;}

.board {background: rgb(238, 238, 238);}
.sky {background: rgb(228, 249, 253) !important;} 
.yellow {background: rgb(250, 250, 235) !important;} 
.white {background: white !important;}

/* General link + button transitions */
a, button, .btn, .nav-cta.desktop, .nav-cta.mobile, .nav-links a, .footer-menu a, .footer-socials a, 
  .flickity-button  {transition: opacity .18s ease, color .18s ease, background-color .18s ease, border-color .18s ease, 
  box-shadow .18s ease, transform .18s ease;}
p {font: 400 16px/1.6 Jost, system-ui, sans-serif; margin: 0 0 22px;}
p a {font-weight: bold; background: white; padding: 2px 5px; color: rgb(138, 17, 152); text-transform: none;
  text-decoration: none;}
p a:hover {color: rgb(67, 28, 88);}
img {max-width: 100%;}
.emmy {font-size: 30px; line-height: 1.6em; margin-bottom: 20px;}
#rainbow {position: relative;}
.rainbow {position: absolute; top:-20px; left:50%; transform: translateX(-50%); width: 300px; height: 300px;}
.socialbox {display: none;}
#socials {font-size: 60px; margin-right: 60px; line-height: 60px;}

.youtube {overflow: hidden; position: relative; max-width: 100%; height: auto; padding-bottom: 56.25%;}
.youtube iframe, .youtube object, .youtube embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.nav-links a:hover {opacity: .75;}
.nav-cta.desktop:hover {opacity: .92;}
.nav-cta.mobile:hover {opacity: .92;}
.logo:hover {opacity: .9;}
.footer-menu a:hover {opacity: 1; text-decoration: underline;}
.footer-socials a:hover {opacity: 1; transform: translateY(-1px);}
.feature-card .overlay {transition: opacity .18s ease;}
.feature-card:hover .overlay {opacity: .96;}
.flickity-button {opacity: 0;}
.hero:hover .flickity-button {opacity: 1;}
h3 {font-size: 24px; line-height: 1.5em;}

a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-cta.desktop:focus-visible, 
.nav-cta.mobile:focus-visible  {outline: 2px solid #000; outline-offset: 2px;}
.footer-menu a:focus-visible, .footer-socials a:focus-visible {outline: 2px solid rgb(242,240,228); outline-offset: 2px;}

/* ===== NAVBAR ===== */

.navbar  {position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; 
  align-items: center; padding: 5px 28px 10px; z-index: 1100; background: transparent; 
  transition: background .25s ease, box-shadow .25s ease, color .25s ease, z-index .0s linear;}
.logo  {display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: rgb(238, 238, 238);}
.logo img {display: block; height: 80px; margin: 0 0 0 40px;}
.nav-right  {display: flex; align-items: center; gap: 16px;}
.nav-links {display: flex; align-items: center; gap: 24px;}
.nav-links a {text-decoration: none; font-weight: 700; font-size: 15px;}
.nav-cta.desktop  {display: inline-block; padding: 10px 14px; text-decoration: none; font-weight: 800; border: 2px solid transparent;}
.navbar:not(.scrolled) .nav-links a {color: rgb(238, 238, 238);}
.navbar:not(.scrolled) .nav-cta.desktop  {background: rgb(238, 238, 238); color: #000; border-color: rgb(238, 238, 238);}
.navbar.scrolled  {background: rgb(93, 168, 236); box-shadow: 0 1px 10px rgba(0,0,0,.08);}
.navbar.scrolled .logo, .navbar.scrolled .nav-links a {color: #111;}
.navbar.scrolled .nav-cta.desktop  {background: #000; color: rgb(238, 238, 238); border-color: #000;}
.icon-btn  {width: 36px; height: 36px; border: none; background: transparent; padding: 0; margin: 0; cursor: pointer; color: rgb(238, 238, 238);}
.icon-btn svg {width: 100%; height: 100%; display: block;}
.navbar.scrolled .icon-btn {color: #111;}
.nav-cta.mobile  {display: none; padding: 10px 14px; font-weight: 800; text-decoration: none; background: #000; 
  color: rgb(242,240,228); border: 2px solid #000;}
.hamburger-btn {display: none; z-index: 2002;}
.close-btn  {position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; display: none; z-index: 3000; color: #111;}
.close-btn svg {width: 24px; height: 24px; margin: 10px;} /* centers the X inside */

body.menu-open .navbar {z-index: 2001;} 
body.menu-open .navbar .logo, body.menu-open .navbar .nav-links a {color: #111;}
body.menu-open .navbar .nav-cta.desktop  {background: #000; color: rgb(242,240,228); border-color: #000;}
body.menu-open .icon-btn {color: #111;}
body.menu-open .hamburger-btn {display: none !important;}
body.menu-open .close-btn {display: inline-block;}

.mobile-overlay  {position: fixed; inset: 0; background: rgb(238, 238, 238); opacity: 0; visibility: hidden; 
  pointer-events: none; transition: opacity .25s ease; z-index: 2000; padding: 120px 28px 40px; display: flex; 
  flex-direction: column; gap: 0;}
.mobile-overlay.open {opacity: 1; visibility: visible; pointer-events: auto;}
.mobile-overlay a  {text-decoration: none; color: #111; font-weight: 700; font-size: 16px; padding: 7px 0; 
  border-top: 1px solid rgba(17,17,17,.08); margin: 0;}
.mobile-overlay a:first-child {border-top: none;}
.mobile-overlay a.overlay-cta  {margin: 0; display: inline-block; width: fit-content; background: #000; 
  color: rgb(242,240,228); padding: 12px 16px; border: 2px solid #000;}

.mobile-caption {display: none; padding: 16px 20px 24px; color: #000; background: transparent;}
.mobile-caption h3 {margin: 0 0 6px; font-size: 20px; line-height: 1.2; font-weight: 800; letter-spacing: .2px;}
.mobile-caption p {margin: 0 0 12px; font-size: 14px; line-height: 1.6;}
.mobile-caption .btn {display: inline-block; padding: 12px 18px; background: #000; color: rgb(242,240,228); 
  text-decoration: none; font-weight: 700; font-size: 14px; border: none;}

.nav-links a {position: relative; color: inherit;}
.nav-links a::after {content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; 
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .18s ease;}
.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a.is-active::after {transform: scaleX(1);}
.navbar:not(.scrolled) .nav-links a:hover {color: #fff;}
.navbar.scrolled .nav-links a:hover {color: #000;}
.nav-cta.desktop:hover, .nav-cta.desktop:focus-visible {filter: brightness(0.92);}
.navbar a:focus-visible, .icon-btn:focus-visible  {outline: 2px solid #999; outline-offset: 2px;}
.navbar {min-height: 72px;}

/* ===== DESKTOP MEGA MENUS (full-width) ===== */
.has-mega {position: static;}
.mega {position: fixed; left: 0; right: 0; top: 67px; display: none; background: rgb(93, 168, 236); 
  visibility: hidden; border-top: 1px solid rgba(17,17,17,.08); box-shadow: 0 10px 30px rgba(0,0,0,.08); 
  padding: 32px 0; opacity: 0; transform: translateY(8px); 
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s; z-index: 2600;}
.has-mega:hover > .mega, .has-mega.open > .mega {display: block; opacity: 1; visibility: visible; 
  transform: translateY(0); transition: opacity .22s ease, transform .22s ease;}
.mega-inner {max-width: 1100px; margin: 0 auto; padding: 0 28px; display: grid; 
  grid-template-columns: 340px 1px 1fr; gap: 28px; align-items: start;}
.mega-title {margin: 0 0 18px; font: 800 36px/1.1 Jost, system-ui, sans-serif; color:white; letter-spacing: .02em;}
.mega-list{display: grid; gap: 12px;}
.mega-list a {display: inline; text-decoration: none; color: white; 
  font: 700 18px/1.4 Jost, system-ui, sans-serif; border-bottom: 1px solid transparent; padding-bottom: 2px;}
.mega-list a:hover, .mega-list a:focus-visible{border-bottom-color: white;}
.mega-divider{width: 1px; background: rgba(17,17,17,.25); height: 220px;}
.mega-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.mega-card{display: block; text-decoration: none; color: #fff;}
.mega-card figure{margin: 0; position: relative;}
.mega-card img {display: block; width: 100%; height: 220px; object-fit: cover; background: #ddd;}
.mega-card figcaption {position: absolute; left: 0; right: 0; bottom: 0; background: #222; color: #fff; 
  padding: 12px 16px; font: 700 14px/1 Jost, system-ui, sans-serif; letter-spacing: .12em; text-align: center;}
.nav-links .mega .mega-list a::after {content: none !important;}

.navbar.mega-open  {background: rgb(93, 168, 236); box-shadow: 0 1px 10px rgba(0,0,0,.08);}
.navbar.mega-open .logo, .navbar.mega-open .nav-links a, .navbar.mega-open .icon-btn {color: white;}
.navbar.mega-open .nav-cta.desktop  {background: #000; color: rgb(242,240,228); border-color: #000;}
.navbar:not(.scrolled) .has-mega > .parent-link:hover {color:#000;}

body.subpage .navbar  {background: rgb(93, 168, 236); box-shadow: 0 1px 10px rgba(0,0,0,.08);}
body.subpage .navbar .logo, body.subpage .navbar .nav-links a, body.subpage .navbar .icon-btn  {color: #111;}
body.subpage .navbar .nav-links a.epi {color: white;}
body.subpage .navbar .nav-cta.desktop  {background: #000; color: rgb(242,240,228); border-color: #000;}

/* ===== MOBILE OVERLAY SUBMENU (accordion) ===== */
body.menu-open {overflow: hidden;}
.mobile-overlay a:hover {color:#000;}
.mobile-overlay {z-index: 2000;}

.overlay-group-btn {appearance: none; border: none; background: transparent; padding: 12px 0; text-align: left; 
  width: 100%; font-weight: 700; font-size: 20px; color: #111; cursor: pointer; 
  border-top: 1px solid rgba(17,17,17,.08); display: flex; align-items: center; justify-content: space-between;}
.overlay-group-btn:focus-visible {outline: 2px solid #999; outline-offset: 2px;}
.overlay-submenu {overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-6px); 
  transition: max-height .22s ease, opacity .22s ease, transform .22s ease; display: flex; 
  flex-direction: column; gap: 10px; padding-left: 0;}
.overlay-submenu.open {max-height: 500px; opacity: 1; transform: translateY(0); padding-left: 16px;}
.overlay-submenu a {text-decoration: none; color: #111; font-weight: 600; font-size: 18px;}
.overlay-submenu a:hover, .overlay-submenu a:focus-visible {color: #000;}
.mobile-overlay a:first-child, .mobile-overlay .overlay-group-btn:first-child  {border-top: none;}
.overlay-group-btn .caret {display: inline-block; margin-left: 6px; font-size: 1.15em; line-height: 1; transition: transform .18s ease;}
.overlay-group-btn[aria-expanded="true"] .caret {transform: rotate(180deg);}

/* ===== HERO ===== */ 

.hero {height: 75vh; position: relative; overflow: hidden;}
.hero-carousel {position: absolute; inset: 0;}
.carousel-cell {position: relative; width: 100%; height: 100%; background-size: cover; background-position: center;}
.header_transparent {background: -webkit-gradient(linear, left top, left bottom, color-stop(-15.73%, rgba(0, 0, 0, 0.8)), 
  color-stop(92.7%, rgba(0, 0, 0, 0))); background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) -15.73%, rgba(0, 0, 0, 0) 92.7%); 
  height: 7.6rem; position: absolute; width:100%}
.hero-caption {position: absolute; left: 72px; bottom: 88px; max-width: min(90%, 680px); color: rgb(242,240,228); 
  z-index: 999; opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; 
  will-change: opacity, transform;}
.hero-caption.enter {opacity: 1; transform: translateY(0);}
.hero-caption h2 {margin: 0 0 8px; font-size: clamp(24px, 4.6vw, 44px); line-height: 1.05; font-weight: 800; 
  letter-spacing: .2px; color: rgb(242,240,228);}
.hero-caption p {margin: 0 0 16px; font-size: clamp(14px, 2.1vw, 18px); line-height: 1.5; color: rgb(242,240,228); opacity: .95;}
.hero-caption .btn {display: inline-block; padding: 12px 18px; background: rgb(242,240,228); color: #000; 
  text-decoration: none; font-weight: 700; font-size: 14px; border: none;}
.hero-caption .btn:hover {filter: brightness(.96);}
.hero-caption .btn:active {filter: brightness(.92);}
.hero-caption .btn:focus-visible {outline: 2px solid #000; outline-offset: 2px;}

.flickity-button {opacity: 0; transition: opacity .2s ease; z-index: 3;}
.hero:hover .flickity-button {opacity: 1;}
.flickity-prev-next-button {width: 44px; height: 44px;}
.flickity-page-dots {bottom: 14px;}

.has-gradient:after  {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 90%; 
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(102, 102, 102, 0)), to(rgba(0, 0, 0, 0.9))); 
  background:linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, rgba(0, 0, 0, 0.9) 100%)}

/* ===== MAIN ===== */ 

main {overflow-x: hidden;}
section.content {padding: 50px 28px 80px; max-width: 1400px; margin: 0 auto; line-height: 1.7;}
section.content h2 {margin-top: 0; font-size: 28px;}
section[id] {scroll-margin-top: 30px;}

.card {background: #fff; border-radius: 0; box-shadow: 0 12px 30px rgba(0,0,0,.08); padding: 28px;}
.img-block {height: 300px; background-size: cover; background-position: center; border-radius: 0; 
  box-shadow: 0 10px 30px rgba(0,0,0,.06); margin: 24px 0 8px;}

#about h1 {font-size: 36px;}

/* ===== ABOUT PAGE ===== */
.about-page {padding: 0 0 72px;}
h1.about-title {font-size: 36px; margin-top: 0;}

.boston-holder {position: relative;}
.boston {position: absolute; top:30px; right:30px; width: 200px; height: 359px; z-index: 900;}

/* ===== WORK — fully scoped to #work ===== */

#work {padding-left: 56px !important;}
#work .work-inner {max-width:1400px; margin:0 auto; padding:100px 28px 0;}
#work .section-title {margin: 0 0 6px; font-size: clamp(24px, 2.6vw, 36px);}
#work .section-intro {margin: 0 0 18px; color: #666;}
#work .work-carousel-bleed  {margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); 
  padding-left: calc((50vw - min(50vw, 700px))); padding-bottom: 8px;}
#work .work-carousel {width: 100%; position: relative;}
#work .work-card  {width: 768px; margin-right: 30px; background: transparent; border: 0; border-radius: 0; 
  box-shadow: none; overflow: hidden;}
#work .work-card a:hover {background-color: white; cursor: pointer;}
#work .work-card__link {display: block; text-decoration: none; color: inherit;}
#work .work-card__media {margin: 0; height: 400px;} /* ~400px tall image */
#work .work-card__media img {width: 100%; height: 100%; object-fit: cover; display: block;}
#work .work-card__body {padding: 0;}
#work .work-card__body h3 {margin: 10px 0 6px; font-size: 18px; line-height: 1.2;}
#work .work-card__body h3 .catnum {padding: 2px 5px; border: 1px black solid; background: white; font-weight: bold;}
#work .work-card__body p {margin: 0; color: #555; font-size: 14px; line-height: 1.45;}
#work .flickity-prev-next-button  {width: 44px; height: 44px; background: #fff; border-radius: 999px; 
  box-shadow: 0 10px 30px rgba(0,0,0,.08); z-index: 2; opacity: 1; display: block;}
#work .flickity-button-icon {fill: #333;}
#work .flickity-prev-next-button.previous:disabled {display: none;}
#work .flickity-prev-next-button.next {visibility: visible; opacity: 1; right:50px;}

/* ===== Upcoming Shows (scoped to #upcoming) ===== */

#upcoming {background: rgb(238, 238, 238); padding:50px 0 0;}
#upcoming .container {max-width: 1100px; margin-left: auto; margin-right: auto;}
#upcoming .sched-title {margin: 18px 0 20px; text-align: center; font-size: clamp(24px, 3.8vw, 44px); letter-spacing: .01em; font-weight: 800;}
#upcoming .show-list {list-style: none; margin: 0; padding: 0;}
#upcoming .show-row {display: grid; grid-template-columns: 30% 1fr auto; align-items: center; gap: 20px; background: white;
  padding: 24px; margin-bottom: 30px; border: 1px solid rgb(138, 181, 194);}
#upcoming .show-date {text-align: left; line-height: 1;}
#upcoming .show-date .dow {display: block; font-size: 14px; color: #3a3a3a; margin-bottom: 6px;}
#upcoming .show-date .mon {display: block; font-size: 26px; font-weight: 700; letter-spacing: .02em;}
#upcoming .show-date .day {display: block; font-size: 34px; font-weight: 800; letter-spacing: .01em;}
#upcoming .show-thumb {margin: 0; width: auto; height: auto; overflow: hidden;}
#upcoming .show-thumb img {max-width: 100%; height: 100%; object-fit: cover; display: block;}
#upcoming .show-body {align-self: start; padding: 0 20px;}
#upcoming .show-body p {margin: 10px 0 0;}
#upcoming .show-artist {margin: 0 0 6px; font-size: 26px; font-weight: 800; line-height: 1.15;}
#upcoming .show-venue {margin: 0; font-size: 16px; color: #2b2b2b;}
#upcoming .show-eta {margin: 6px 0 0; font-size: 14px; color: #1e7a4b; font-weight: 600; padding-right: 50px;}
#upcoming .show-cta {justify-self: end; display: inline-grid; grid-auto-flow: column; align-items: center; gap: 10px; 
  padding: 12px 16px; background: #0f0f0f; color: #fff; text-decoration: none; border-radius: 6px; font-weight: 700; 
  letter-spacing: .02em;}
#upcoming .show-cta:hover {opacity: .9;}
#upcoming .meta {margin-top: 15px; background: rgb(238, 238, 238); padding: 15px;}
#upcoming .meta .hwyrtian {padding: 3px 5px; background-color: white; margin-left: 3px; line-height: 2em; white-space: nowrap;}

/* ======== RESULTS (ULTRA-FLAT, 0 RADIUS, NO BORDERS) ======== */
.section.results--flat {padding:72px 0;}
.wrap {max-width:1400px; margin:0 auto; padding:0 28px}
.h2 {font:600 32px/1.15 Jost,system-ui,sans-serif;color:#141414; margin:0 0 10px}
h4 {font:600 18px/1.15 Jost,system-ui,sans-serif;color:#141414; margin:14px 0 8px;}
ul {padding-left: 10px;}
ul li {font-size: 18px; line-height: 1.6em; margin-bottom: 10px; list-style-type: none;}
ul li span {font-weight: bold; font-style: italic;}
.subtle {color:#666; margin:0 0 18px; font:400 16px/1.5 Jost, system-ui, sans-serif}

/* Filter chips (flat, square) */
.mini-menu {display:flex; gap:14px; margin:12px 0 28px; flex-wrap:wrap}
.mini-link {font:500 14px/1 Jost, system-ui, sans-serif; color:#141414; background:transparent; 
  padding:8px 12px; cursor:pointer; border:none;}
.mini-link.is-active {background:#eee}

/* Grid */
.grid {display:grid; grid-template-columns:1fr; gap:22px}
.box-white {padding:30px; background: white;}
.box-white .meta {margin: 15px 0; background: rgb(238, 238, 238); padding: 15px;}
.box-white .meta .hwyrtian {padding: 3px 5px; background-color: white; margin-left: 3px; line-height: 2em; white-space: nowrap;}

/* ===== GLOBAL SUBPAGE LAYOUT ===== */
body.subpage main, body.subpage .page-wrap, body.subpage .services-banner-inner, body.subpage .services-head, 
  body.subpage .services-grid  {max-width: 1400px; margin: 0 auto; padding-left: 28px; padding-right: 28px;}
body.subpage  {padding-top: 96px;}
body.subpage main  {max-width: 1400px; margin: 0 auto; padding: 0 28px;}

/* ===================== SERVICES SECTION (Black background) ===================== */

section#service {padding: 50px 0px 50px;}
section.services {background:white; color:black; padding: 100px 0;}
.services-inner {max-width: 1400px; margin: 0 auto; padding: 0 28px;}
.services-intro {margin-bottom: 24px; text-align: center;}
.services-intro h2 {margin: 0; font-size: clamp(32px, 5vw, 44px); color: rgb(238, 238, 238);}

/* --- Card styles --- */
.services-card {background: rgb(238, 238, 238); color: #000; border-radius: 0; display: flex; flex-direction: column; min-height: 100%;}
.services-card .img {height: 340px; overflow: hidden; margin: 12px 12px 0 12px;}
.services-card .img img {width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;}
.services-card .body {padding: 16px 18px 18px;}
.services-card h3 {margin: 0 0 6px; font-size: 18px;}
.services-card .sub {margin: 0 0 12px; font-size: 14px; opacity: 0.9;}
.services-card .read-more {margin-top: auto; display: block; width: max-content; margin-left: auto; 
  margin-right: auto; text-align: center; font-weight: 700; font-size: 14px; color: #000; 
  text-decoration: none; position: relative; padding-bottom: 3px;}
.services-card .read-more::after {content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; 
  background: #000; transition: left 0.25s ease, width 0.25s ease;}
.services-card .read-more:hover::after {left: 100%; width: 0;}
.feature-card {grid-column: span 2; background: none; position: relative; min-height: 220px; overflow: hidden;}
.feature-card .img {margin: 0; height: 100%; background-size: cover; background-position: center;}
.feature-card .overlay {position: absolute; left: 16px; right: 16px; bottom: 16px; color: rgb(238, 238, 238); 
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);}
.feature-card .overlay h3 {margin: 0 0 6px; font-size: 22px; font-weight: 800;}
.feature-card .overlay .sub {margin: 0 0 10px; font-size: 14px; opacity: 0.95;}
.feature-card .overlay .read-more {text-decoration: underline; color: rgb(238, 238, 238); font-weight: 800;}
.services-card:hover {box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06) inset;}
.services-card .img img {transition: opacity 0.18s ease;}
.services-card:hover .img img {opacity: 0.96;}
.services-card, .feature-card {opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; 
  will-change: opacity, transform;}
.services-card.scroll-in, .feature-card.scroll-in {opacity: 1; transform: translateY(0);}

/* ===================== FULL SERVICES PAGE (Tan page) ===================== */
/* This is your separate services page layout. Scoped under .services-page
so it doesn't fight with the home section. */

.services-page {padding-top: 50px; padding-bottom: 72px; position: relative;}
.podlinks {position: absolute; top:15px; right:25px;}
.podlinks a {margin: 0; text-align: center; text-transform: uppercase; display: inline-block; 
  color: black; font-size: 11px; font-weight: bold; width:50px; height:75px;}
.podlinks a img {height: 40px; display: inline-block;}
.services-mantle {position: absolute; top:-20px; left:50%; transform: translateX(-50%); padding: 5px 15px; 
  border: 1px black solid; width: auto; background: white; text-transform: uppercase; text-align: center; display: inline-block;}
.services a {text-decoration: none;}
.services a:hover, .services a:focus-visible {text-decoration: underline;}
.services-head {margin: 8px 0 24px;}
.services-head .h2 {color: #111; margin: 0 0 16px; font: 800 24px/1.1 Jost, system-ui, sans-serif; text-transform: uppercase;}
.services-banner {margin-bottom: 48px;}
.services-banner-inner {display: grid; grid-template-columns: 40% 60%; gap: 32px; align-items: center;}
.services-banner-image {margin: 0;}
.services-banner-image img {display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #ddd;}
.services-banner-text {color: #111;}
.services-banner-text a {color: #111;}
.services-banner-text .deets {margin-bottom: 1px;}
.services-banner-text p {padding-right: 100px;}
.services-banner-text strong {margin-right: 5px;}
.services-banner-title {font: 800 36px/1.1 Jost, system-ui, sans-serif; margin: 5px 0 18px;}
.services-banner-desc {font: 400 16px/1.6 Jost, system-ui, sans-serif; margin: 0 0 22px;}
.services-banner-cta {display: inline-block; background: #000; color: rgb(238, 238, 238); 
  padding: 12px 20px; font: 700 14px/1 Jost, system-ui, sans-serif; border: 2px solid #000; 
  text-decoration: none; transition: filter 0.25s ease;}
.services-banner-cta:hover {filter: brightness(0.78);}
.services-grid {margin-top: 8px; display: grid; grid-template-columns: 1fr; gap: 40px;}
.services .catnum {padding: 2px 5px; border: 1px black solid; background: white; font-weight: bold;}
.crankle-block {position: relative;}
.crankle {position: absolute; bottom:-75px; right:-85px; width: 150px; height: 150px; z-index: 2;}

/* Square card images */
.svc-body .deets {font-size: 14px; margin-top: 20px; margin-bottom: 0;}
.svc-figure {margin: 0; overflow: hidden;}
.svc-figure img {display: block; width: 100%; max-width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #ddd; transition: filter 0.25s ease;}
.svc-card:hover .svc-figure img  {filter: brightness(0.78);}
.svc-title {margin-top: 5px; margin-bottom: 8px;}
.svc-link {color:black;}

/* ===================== SCROLL ANIMATION: FADE UP ===================== */
.fade-up {opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease;}
.fade-up.is-visible  {opacity: 1; transform: translateY(0);}

/* ===================== LAYOUT MODULES (DESCRIPTIVE) ===================== */
.block  {display: grid; gap: 32px; margin: 56px 0;}
.margin-top-less {margin-top: 10px !important;}
.margin-top-more {margin-top: 10px !important;}
.margin-top-big {margin-top: 30px !important;}
.margin-bottom-less {margin-bottom: 10px !important;}
.margin-bottom-mid {margin-bottom: 30px !important;}
.margin-bottom-more {margin-bottom: 10px !important;}
.margin-bottom-big {margin-bottom: 50px !important;}
.no-margin {margin: 0px !important;}
.no-margin-top {margin-top: 0px !important;}
.no-margin-bottom {margin-bottom: 0px !important;}
.no-padding-bottom {padding-bottom: 0px !important;}
.padding-more {padding: 30px 10px;}
.padding-right {padding-right:50px;}

/* Column patterns */
.layout-full {grid-template-columns: 1fr;}
.layout-50 {grid-template-columns: 1fr 1fr;}
.layout-40-60 {grid-template-columns: 40% 60%;}
.layout-60-40 {grid-template-columns: 60% 40%;}
.layout-33 {grid-template-columns: repeat(3, 1fr);}
.layout-25 {grid-template-columns: repeat(4, 1fr);}

/* ===================== GAP & SPACING UTILITIES ===================== */
.gap-16 {gap: 16px;}
.gap-24 {gap: 24px;}
.gap-32 {gap: 32px;}
.gap-40 {gap: 40px;}
.gap-48 {gap: 48px;}
.space-top-0 {margin-top: 0 !important;}
.space-top-sm {margin-top: 24px !important;}
.space-top-md {margin-top: 40px !important;}
.space-top-lg {margin-top: 64px !important;}
.space-bottom-0 {margin-bottom: 0 !important;}
.space-bottom-sm {margin-bottom: 24px !important;}
.space-bottom-md {margin-bottom: 40px !important;}
.space-bottom-lg {margin-bottom: 64px !important;}

/* ===================== ALIGNMENT UTILITIES ===================== */
.align-center {align-items: center;}
.align-start {align-items: start;}
.align-end {align-items: end;}

/* ===================== IMAGE UTILITIES ===================== */
.image-square {aspect-ratio: 1 / 1; object-fit: cover; display: block; background:#ddd;}
.image-16x9 {aspect-ratio: 16 / 9; object-fit: cover; display: block; background:#ddd;}
.image-cover {object-fit: cover; display: block; background:#ddd; width: 100%;}
.image-responsive {width: 100%; height: auto; display: block; object-fit: contain;}
.image-fixed  {width: 100%; height: 240px; object-fit: cover; display: block; background:#ddd;}
.media {margin: 0;}
.media > img {width: 100%; display: block;}
.media span.credit {padding-top: 7px; font-size: 12px; line-height: 1.6em; text-align: right;}

/* ===================== TEXT WIDTH (OPTIONAL) ===================== */
.text-narrow {max-width: 620px;}
.text-center {text-align: center;}

/* ===================== BUTTON (reuses your CTA language) ===================== */
.btn-cta {display:inline-block; background:#000; color:rgb(242,240,228); padding:12px 20px; 
  border:2px solid #000; font:700 14px/1 Jost, system-ui, sans-serif; text-decoration:none; transition:filter .25s ease;}
.btn-cta:hover{filter: brightness(.78);}

/* ===== FOOTER ===== */

.site-footer {background: rgb(93, 168, 236); color: white; padding: 60px 0 28px;}
.footer-inner {max-width: 1100px; margin: 0 auto; padding: 0 28px;}
.footer-grid {display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 28px; align-items: start;}
.footer-brand {display: grid; align-content: start; gap: 16px;}
.footer-logo {color: rgb(242,240,228); display: inline-flex; align-items: center; gap: 8px;}
.footer-logo svg {display: block; height: 250px;}
.footer-logo .mark {height: 26px;}
.footer-logo .word {height: 22px;}
.footer-socials {display: flex; gap: 14px;}
.footer-socials a  {color: rgb(242,240,228); opacity: 0.9; text-decoration: none;}
.footer-socials a:hover {opacity: 1;}
.footer-socials svg {width: 22px; height: 22px; display: block;}
.footer-menu h4  {margin: 0 0 10px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: rgb(242,240,228); opacity: 0.9;}
.footer-menu ul  {list-style: none; padding: 0; margin: 0; display: grid; gap: 8px;}
.footer-menu ul li {margin-bottom: 5px; line-height: 1.2em;}
.footer-menu a  {color: rgb(242,240,228); text-decoration: none; opacity: 0.9;}
.footer-menu a:hover {text-decoration: underline; opacity: 1;}
.footer-bottom  {margin-top: 32px; padding-top: 16px; border-top: 1px solid rgba(242,240,228,0.15); 
  font-size: 13px; opacity: 0.9; text-align: center;}

/* ===== FADE UP, REVEAL ===== */

.fade-up  {opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease;}
.fade-up.is-visible  {opacity: 1; transform: translateY(0);}
.reveal {opacity: 0; transform: translateY(14px) scale(1.02); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform;}
.reveal.in {opacity: 1; transform: translateY(0) scale(1);}
.reveal {transition-delay: var(--reveal-delay, 0ms);}

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

@media (prefers-reduced-motion: reduce) {
* {transition: none !important;}
html {scroll-behavior: auto;}
.navbar, .mobile-overlay {transition: none;}
.hero-caption {transition: none;}
.flickity-button {transition: none;}
}

@media (hover:hover)  {
#upcoming.compact .show-row:hover {background: rgba(0,0,0,0.03);}
}

@media(min-width:720px) {
.grid {grid-template-columns:1fr 1fr}
.services-grid {grid-template-columns: repeat(2, 1fr);}
}

@media (min-width: 861px)  {
.has-gradient:after  {height: 100%; background: -webkit-gradient(linear, left top, right top, from(#000), 
  color-stop(34.31%, rgba(0, 0, 0, 0))); background:linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 34.31%)}
.hide-desktop {display: none;}
section#about .bump-left {padding-left: 40px;}
}

@media (min-width: 1024px) {
.services-grid {grid-template-columns: repeat(3, 1fr);}
body.subpage .services-grid-narrow {padding: 0 5%; margin-top: 100px;}
}

@media (min-width: 1080px) {
.socialbox {bottom: 40%; transform: translateY(40%); right: 0; position: fixed; z-index: 20; width: 3rem; 
	box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 0px -5px; 
	display: flex; flex-direction: column; align-items: center; background: rgb(93, 168, 236); padding-bottom: 10px;}
.social {display: block; position: relative;}
.social ul {flex-direction: column; align-items: center; margin: 15px 10px 0 0; row-gap: 0; display: flex; 
	flex-wrap: wrap; gap: .2rem; list-style: none;}
.social ul li a {color:white;}
}

@media (min-width: 1280px)  {
.header_transparent  {background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0))); 
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); height:19rem}
}

@media (max-width: 1260px)  {
.fold {display: none;}
.podlinks {position: relative; display: block; text-align: center; padding-left: 56px; margin-bottom: 50px;}
.podlinks a {margin: 0 5px;}
}

@media (max-width: 1199px)  {
#work .work-card {width: 640px; margin-right: 30px;}
#work .work-card__media {height: 400px;}
}

@media (max-width: 1100px) {
.nav-links {gap: 18px;}
}

@media (max-width: 1023px) {
.mega {display: none !important;}
}

@media (max-width: 1100px) {
section.services .services-grid {gap: 20px;}
}

@media (max-width: 899px)  {
#work .work-card {width: 512px; margin-right: 30px;}
#work .work-card__media {height: 320px;}
#work .work-card__body h3 {font-size: 16px;}
#work .work-card__body p  {font-size: 13px;}
.rainbow {width:100px; height: 100px; top:0;}
}

@media (max-width: 860px) {
.hide-mobile {display: none !important;}
.hide-desktop {display: inherit;}
.navbar {padding-left: 14px; padding-right: 14px; }
.nav-links {display: none;}
.nav-cta.mobile {display: inline-block; font-size: 11px; padding: 5px;}
.hamburger-btn {display: inline-block;}
.logo img {margin: 0;}
h3 {line-height: 1.2em;}
.hero {height: 30vh;}
.hero-caption {left: 12px; bottom: 15px; max-width: min(90%, 680px);}
.hero-caption h2 {margin: 0 0 8px; font-size: 18px; line-height: 1.05; letter-spacing: .1px;}
.hero-caption .btn {padding: 4px 12px; font-size: 12px;}
.hero-caption p {display: none;}
.mobile-caption {display: block;}
body.menu-open .navbar .logo {color: #111;}
body.menu-open .nav-cta.mobile {display: none !important;}
body.subpage main  {padding: 0 14px;}
section.content {padding: 50px 0;}
section#service {padding: 50px 0 20px;}
#about h1 {font-size: 18px; margin: 0 0 10px;}
h1.about-title {font-size: 18px; margin: 10px 0 10px;}
ul {padding-left: 0;}
.box-white {padding: 28px 14px;}
#work {padding-left: 0 !important;}
#work .work-inner {padding: 30px 0 0;}
.feature-card {grid-column: 1 / -1;}
.flickity-page-dots {display: none;}
body.subpage .services-banner-inner {grid-template-columns: 1fr; padding-left: 14px; padding-right: 14px;}
body.subpage .services-grid {padding-left: 14px; padding-right: 14px;}
.services-banner-text p {padding-right: 0px;}
.block {grid-template-columns: 1fr !important; margin: 20px 0 50px; padding:0 14px;}
section.block .block {padding-right: 0; padding-left: 0;}
.podlinks a {margin: 0; padding: 0;}
.emmy {font-size: 18px; line-height: 1.2em;}
.footer-grid  {grid-template-columns: 1fr 1fr;}
}

@media (max-width: 840px)  {
#upcoming.compact .sched-title {margin: 14px 0 8px;}
#upcoming.compact .show-row {grid-template-columns: 1fr; grid-template-areas: "artist cta" "date date" "thumb thumb" "venue venue"; 
  row-gap: 0; gap:0; align-items: start; margin-bottom: 20px; border-bottom:none; padding: 28px 14px;}
#upcoming.compact .show-date {grid-area: date; display:flex; gap:10px; align-items:flex-end;}
#upcoming.compact .show-thumb {grid-area: thumb; width: 100%; height: auto; padding-top: 20px;}
#upcoming .show-thumb img {height: auto; display: block;}
#upcoming.compact .show-body {grid-area: artist / 1 / span 1 / span 1; padding: 0;}
#upcoming.compact .show-artist {font-size: 24px; margin: 0 0 10px;}
#upcoming.compact .show-venue {grid-area: venue; font-size: 13px;}
#upcoming.compact .show-cta {display: none;}
#upcoming.compact .show-date .mon {font-size: 18px;}
#upcoming.compact .show-date .day {font-size: 22px;}
#upcoming .show-eta {padding-right: 10px;}
}

@media (max-width: 520px) {
section.services .services-grid {grid-template-columns: 1fr;}
.feature-card {grid-column: 1;}
}

@media (max-width: 519px)  {
#work .work-carousel-bleed {padding-left: calc((50vw - min(50vw, 550px)) + 18px);}
#work .work-card {width: 384px; margin-right: 30px;}
#work .work-card__media {height: 240px;}
}

@media (prefers-reduced-motion: reduce) {
.reveal {opacity: 1 !important; transform: none !important; transition: none !important;}
}