/* ==========================================================================
   Pro Stylez Cinema — design tokens
   Brand carried over from prostylezentertainment.com for continuity.
   Deliberately gold/purple, NOT the teal/cyan of the Swank reference.
   ========================================================================== */
:root{
  --psc-gold:#c9a84c;
  --psc-gold-dim:#a5883b;
  --psc-purple:#4b0082;
  --psc-purple-glow:#8a4dff;
  --psc-bg:#0a0a12;
  --psc-bg-raised:#14141f;
  --psc-bg-card:#1a1a26;
  --psc-border:#2a2a3a;
  --psc-text:#f2f0e9;
  --psc-text-dim:#b9b6c4;
  --psc-radius:4px;
  --psc-font-head:'Bebas Neue', 'Oswald', sans-serif;
  --psc-font-body:'Outfit', 'Inter', sans-serif;
}

.psc-movie{
  background:var(--psc-bg);
  color:var(--psc-text);
  font-family:var(--psc-font-body);
  width:100vw;
  margin-left:calc(50% - 50vw);
  overflow-x:hidden;
}
.psc-movie *{box-sizing:border-box;}
.psc-movie a{text-decoration:none;}
.psc-wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

/* ---- Hero ---- */
.psc-hero{
  position:relative;
  padding:64px 0 48px;
  background:
    radial-gradient(circle at 15% 20%, rgba(138,77,255,.18), transparent 55%),
    radial-gradient(circle at 85% 75%, rgba(201,168,76,.14), transparent 55%),
    linear-gradient(180deg, #0d0d16 0%, var(--psc-bg) 100%);
  border-bottom:1px solid var(--psc-border);
}
.psc-hero-grid{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:48px;
  align-items:start;
}
@media (max-width:820px){
  .psc-hero-grid{grid-template-columns:1fr;}
}
.psc-poster-frame{
  border:3px solid var(--psc-gold);
  border-radius:var(--psc-radius);
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.psc-poster-frame img{display:block;width:100%;height:auto;}

.psc-title{
  font-family:var(--psc-font-head);
  font-size:44px;
  line-height:1.05;
  letter-spacing:.5px;
  margin:0 0 6px;
  color:#fff;
}
.psc-title .psc-year{color:var(--psc-text-dim);font-family:var(--psc-font-body);font-size:26px;font-weight:400;}

.psc-tags{margin:4px 0 22px;display:flex;gap:10px;flex-wrap:wrap;}
.psc-tag{
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;
  padding:6px 12px;border-radius:999px;border:1px solid var(--psc-border);color:var(--psc-text-dim);
}
.psc-tag.psc-tag-status{border-color:var(--psc-gold);color:var(--psc-gold);}
.psc-tag.psc-tag-genre{border-color:var(--psc-purple-glow);color:#c9b6ff;}

.psc-btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:32px;}
.psc-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--psc-font-body);font-weight:600;font-size:15px;
  padding:14px 26px;border-radius:var(--psc-radius);border:2px solid var(--psc-border);
  color:var(--psc-text);background:transparent;cursor:pointer;transition:all .15s ease;
}
.psc-btn:hover{border-color:var(--psc-gold);color:var(--psc-gold);}
.psc-btn-primary{
  background:var(--psc-gold);border-color:var(--psc-gold);color:#11110b !important;
}
.psc-btn-primary:hover{background:var(--psc-gold-dim);border-color:var(--psc-gold-dim);color:#11110b !important;}
.psc-btn-icon{
  width:48px;height:48px;padding:0;justify-content:center;border-radius:50%;flex:0 0 auto;
}

.psc-block{margin:36px 0;}
.psc-block-title{
  font-family:var(--psc-font-head);font-size:22px;letter-spacing:.5px;color:#fff;
  margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--psc-border);
}
.psc-synopsis{font-size:17px;line-height:1.7;color:var(--psc-text-dim);max-width:70ch;}

.psc-meta-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px 32px;
}
@media (max-width:820px){.psc-meta-grid{grid-template-columns:repeat(2,1fr);}}
.psc-meta-item dt{
  font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--psc-gold);
  font-weight:600;margin-bottom:4px;
}
.psc-meta-item dd{margin:0;font-size:16px;color:var(--psc-text);}

/* ---- Buy section ---- */
.psc-buy-row{display:flex;gap:14px;flex-wrap:wrap;}
.psc-buy-card{
  flex:1 1 180px;background:var(--psc-bg-card);border:1px solid var(--psc-border);
  border-radius:var(--psc-radius);padding:18px 20px;text-align:center;color:var(--psc-text);
  transition:border-color .15s ease;
}
.psc-buy-card:hover{border-color:var(--psc-gold);}
.psc-buy-card .psc-buy-format{display:block;font-weight:700;font-size:15px;margin-bottom:4px;color:#fff;}
.psc-buy-card .psc-buy-note{display:block;font-size:12px;color:var(--psc-text-dim);}

/* ---- Promo materials ---- */
.psc-promo-list{list-style:none;margin:0;padding:0;border:1px solid var(--psc-border);border-radius:var(--psc-radius);overflow:hidden;}
.psc-promo-list li{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--psc-border);background:var(--psc-bg-raised);
}
.psc-promo-list li:last-child{border-bottom:none;}
.psc-promo-list a.psc-download{color:var(--psc-gold);font-weight:600;font-size:14px;}
.psc-promo-list a.psc-download:hover{color:#fff;}

/* ---- Request a Quote form block ---- */
.psc-quote-block{
  background:linear-gradient(135deg, rgba(75,0,130,.35), rgba(201,168,76,.10));
  border:1px solid var(--psc-purple-glow);border-radius:var(--psc-radius);
  padding:32px;
}
.psc-quote-block .psc-block-title{border-bottom:none;padding-bottom:0;}
.psc-quote-block p.psc-quote-sub{color:var(--psc-text-dim);margin:0 0 20px;}
.psc-quote-block .wpcf7-form p{margin-bottom:14px;}
.psc-quote-block .wpcf7-form input[type=text],
.psc-quote-block .wpcf7-form input[type=email],
.psc-quote-block .wpcf7-form input[type=tel],
.psc-quote-block .wpcf7-form input[type=date],
.psc-quote-block .wpcf7-form textarea{
  width:100%;padding:12px 14px;background:var(--psc-bg);border:1px solid var(--psc-border);
  border-radius:var(--psc-radius);color:var(--psc-text);font-family:var(--psc-font-body);font-size:15px;
}
.psc-quote-block .wpcf7-form input:focus,
.psc-quote-block .wpcf7-form textarea:focus{outline:none;border-color:var(--psc-gold);}
.psc-quote-block .wpcf7-form input[type=submit]{
  width:auto;background:var(--psc-gold);color:#11110b;font-weight:700;border:none;
  padding:14px 30px;cursor:pointer;border-radius:var(--psc-radius);
}
.psc-quote-block .wpcf7-form input[type=submit]:hover{background:var(--psc-gold-dim);}
.psc-quote-block .wpcf7-response-output{border-radius:var(--psc-radius);}

/* ---- Push nav + search to the right, next to each other, with the logo
   staying pinned left. Vodi's header-v1 nests logo+nav in one wrapper div
   and search in another — `display:contents` unwraps both so everything
   becomes one flex row we can reorder/push freely. ---- */
@media (min-width: 993px){
  .site-header__inner{display:flex !important;align-items:center;}
  .site-header__right,
  .site-header__left{display:contents !important;}
  .site-header__offcanvas{order:1;}
  .site-header__logo{order:2;}
  /* padding-right trimmed 24px -> 8px on 2026-09-19 to buy the search
     field the width it needs; the nav still clears the field visually
     because .site-header__search now carries its own min-width. */
  .site_header__primary-nav{order:3;margin-left:auto;padding-right:8px;}
  .site-header__search{order:4;}
}

/* ---- Hide the offcanvas hamburger on desktop (logo is the home link,
   primary nav is visible) — keep it on mobile where nav collapses.
   Was 993px, but Vodi shows its handheld header (no desktop nav) up to
   1199.98px, so 993-1199px (tablet landscape, small laptops) had NO menu
   at all. Matches the theme breakpoint now (Marc, 2026-09-24). ---- */
@media (min-width: 1200px){
  .site-header__offcanvas--toggler{display:none !important;}
}

/* ---- Live search dropdown ---- */
.psc-search-dropdown{
  display:none;position:absolute;top:100%;right:0;margin-top:8px;
  width:340px;max-width:90vw;max-height:420px;overflow-y:auto;
  background:var(--psc-bg-raised);border:1px solid var(--psc-border);border-radius:var(--psc-radius);
  box-shadow:0 16px 40px rgba(0,0,0,.35);z-index:9000;
}
.psc-search-dropdown.psc-open{display:block;}
.psc-search-item{
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  border-bottom:1px solid var(--psc-border);color:var(--psc-text);
}
.psc-search-item:last-child{border-bottom:none;}
.psc-search-item:hover{background:var(--psc-bg-card);}
.psc-search-item-poster{width:40px;height:60px;flex:0 0 auto;border-radius:3px;overflow:hidden;background:var(--psc-bg-card);}
.psc-search-item-poster img{width:100%;height:100%;object-fit:cover;display:block;}
.psc-search-noposter{width:100%;height:100%;}
.psc-search-item-info{display:flex;flex-direction:column;min-width:0;}
.psc-search-item-title{font-size:14px;font-weight:600;color:var(--psc-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.psc-search-item-meta{font-size:12px;color:var(--psc-text-dim);}
.psc-search-empty{padding:16px 14px;color:var(--psc-text-dim);font-size:14px;}
/* ---- The handheld search panel opened off the right of the screen ----
   Marc: "the search is still broken opening off screen", with a screenshot
   of the field sliced by the viewport edge.

   Measured at 375px: the panel sat at x=322 and ran to **482px**, 107px past
   the screen, and took the page's scrollWidth with it. Cause: the handheld
   search is a Bootstrap dropdown (a different control from the desktop one —
   which is why the earlier dropdown fix did not touch it), and
   `.dropdown-menu` defaults to `left:0`, anchored to a wrap that sits hard
   against the right edge of the header. Anything wider than the icon was
   always going to overhang.

   Opening leftward from the wrap's right edge is the fix; the width is
   clamped so it can never be wider than the screen it opens on. ---- */
@media (max-width:1199.98px){
	/* !important here is required, not lazy, and it took two failed attempts
	   to establish that. Vodi sets
	     .handheld-header .site-header__search .dropdown-menu{
	         left:0 !important; right:0 !important; }
	   Attempt 1 at (0,2,0) changed the width but not the position; attempt 2
	   raised specificity to (0,4,0) and STILL lost, because no specificity
	   beats !important — only another !important does. Kept at four classes
	   so it also outranks the theme rule on specificity, rather than relying
	   on !important alone to settle a tie. */
	.handheld-header .site-header__search .dropdown .dropdown-menu{
		left:auto !important;right:0 !important;
		width:min(300px, calc(100vw - 32px)) !important;min-width:0;
	}
	.handheld-header .site-header__search .dropdown .dropdown-menu .search-form{width:100%;}
	.handheld-header .site-header__search .dropdown .dropdown-menu .search-field{
		width:100%;box-sizing:border-box;
	}
}

/* Result counts on the search tabs, so a tab never invites someone into an
   empty list. */
.psc-search-tab-count{
	display:inline-block;margin-left:5px;padding:1px 7px;border-radius:999px;
	background:rgba(255,255,255,.12);font-size:11px;font-weight:700;line-height:1.6;
	vertical-align:middle;
}
.search-result-tab-link.active .psc-search-tab-count{background:rgba(201,168,76,.28);color:var(--psc-gold);}

/* ---- Grouped results + mobile sizing (2026-09-19) ----
   The dropdown now carries two kinds of result, so each group gets a label;
   without one, an article sitting under a list of movies just reads as a
   movie with a missing poster.

   The mobile rules exist because Marc tested the search on a phone: at
   340px wide, right-aligned to a search box that is itself near the right
   edge, the panel hung off the side of the screen. On a handheld it now
   pins to both edges of the viewport instead of hanging off one, and the
   rows grow to a comfortable touch size. */
.psc-search-group-label{
	position:sticky;top:0;z-index:1;
	padding:9px 14px 7px;background:var(--psc-bg-raised);
	border-bottom:1px solid var(--psc-border);
	font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
	color:var(--psc-gold);
}
/* Why the movie matched, when it was not the title — e.g. "Director: James
   Cameron". Without this a search for an actor returns titles with no
   visible connection to what was typed. */
.psc-search-item-reason{
	font-size:11.5px;color:var(--psc-gold-dim);margin-top:2px;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.psc-search-item--post .psc-search-item-poster{height:40px;border-radius:4px;}
.psc-search-item--post .psc-search-item-title{white-space:normal;}
.psc-search-more{
	display:block;padding:11px 14px;text-align:center;
	font-size:13px;font-weight:600;color:var(--psc-purple-glow);
	border-bottom:1px solid var(--psc-border);
}
.psc-search-more:last-child{border-bottom:none;}
.psc-search-more:hover{background:var(--psc-bg-card);color:var(--psc-gold);}

@media (max-width:767px){
	.site-header__search .psc-search-dropdown{
		position:fixed;left:12px;right:12px;top:auto;
		width:auto;max-width:none;margin-top:0;
		max-height:min(70vh, 460px);
	}
	.psc-search-item{padding:12px 14px;}
	.psc-search-item-title{white-space:normal;}
}

/* ---- Trailer modal ---- */
.psc-trailer-modal{
  display:none;position:fixed;inset:0;z-index:99999;
  background:rgba(6,6,10,.92);
  align-items:center;justify-content:center;padding:24px;
}
.psc-trailer-modal.psc-open{display:flex;}
.psc-trailer-modal-inner{
  position:relative;width:100%;max-width:1000px;
}
.psc-trailer-frame-wrap{
  position:relative;width:100%;padding-top:56.25%;
  border:2px solid var(--psc-gold);border-radius:var(--psc-radius);overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.psc-trailer-frame-wrap iframe{
  position:absolute;inset:0;width:100%;height:100%;
}
.psc-trailer-close{
  /* Bug: this is a <button>, and the browser's default button padding +
     unset text-align meant the × glyph rendered off-center (low and left)
     in the circle instead of in the middle. Flex-centering fixes it. */
  position:absolute;top:-44px;right:0;
  width:36px;height:36px;border-radius:50%;padding:0;
  background:var(--psc-gold);color:#11110b;border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;cursor:pointer;font-weight:700;
}
.psc-trailer-close:hover{background:#fff;}

/* ==========================================================================
   Homepage
   ========================================================================== */
.psc-home{background:var(--psc-bg);color:var(--psc-text);font-family:var(--psc-font-body);}
.psc-home .psc-wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

.psc-home-hero{
  position:relative;padding:100px 0 80px;text-align:center;
  background:
    radial-gradient(circle at 20% 15%, rgba(138,77,255,.22), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(201,168,76,.16), transparent 55%),
    linear-gradient(180deg, #0d0d16 0%, var(--psc-bg) 100%);
  border-bottom:1px solid var(--psc-border);
}
.psc-home-hero-inner{max-width:760px;margin:0 auto;}
.psc-home-eyebrow{
  display:inline-block;font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--psc-gold);font-weight:700;margin-bottom:18px;
}
.psc-home-title{
  font-family:var(--psc-font-head);font-size:56px;line-height:1.05;color:#fff;margin:0 0 20px;letter-spacing:.5px;
}
.psc-home-sub{font-size:18px;line-height:1.6;color:var(--psc-text-dim);max-width:600px;margin:0 auto 34px;}
.psc-home-hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

.psc-home-block{padding:64px 0;border-bottom:1px solid var(--psc-border);}
.psc-home-block-title{
  font-family:var(--psc-font-head);font-size:30px;color:#fff;letter-spacing:.5px;margin:0 0 28px;
}
.psc-home-block-cta{margin-top:28px;text-align:center;}

/* Movie card row */
.psc-movie-row{
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px;
}
@media (max-width:900px){.psc-movie-row{grid-template-columns:repeat(3,1fr);}}
@media (max-width:520px){.psc-movie-row{grid-template-columns:repeat(2,1fr);}}
.psc-movie-card{display:flex;flex-direction:column;position:relative;}
.psc-movie-card-poster{
  aspect-ratio:2/3;border-radius:var(--psc-radius);overflow:hidden;
  border:1px solid var(--psc-border);transition:border-color .15s ease, transform .15s ease;
}
.psc-movie-card-poster img{width:100%;height:100%;object-fit:cover;display:block;}
.psc-movie-card:hover .psc-movie-card-poster{border-color:var(--psc-gold);transform:translateY(-3px);}
.psc-movie-card-status{
  position:absolute;top:6px;left:6px;background:rgba(10,10,18,.85);color:var(--psc-gold);
  font-size:8px;letter-spacing:.5px;text-transform:uppercase;font-weight:700;
  padding:2px 6px;border-radius:999px;border:1px solid var(--psc-gold);
}
.psc-movie-card-title{margin-top:10px;font-size:14px;font-weight:600;color:var(--psc-text);line-height:1.3;}
.psc-movie-card-rating{font-size:12px;color:var(--psc-text-dim);margin-top:2px;}

/* ---- "Help Me Choose" quiz (2026-09-13) ----
   One question per screen (help-me-choose.js renders into #psc-quiz-app),
   button-style single-select options, a thin progress bar, then a results
   grid reusing .psc-movie-row/.psc-movie-card so results look identical
   to every other movie grid on the site. */
.psc-quiz-app{max-width:640px;margin:0 auto;text-align:center;}
.psc-quiz-progress{
	height:4px;background:var(--psc-border);border-radius:999px;overflow:hidden;margin-bottom:18px;
}
.psc-quiz-progress-bar{height:100%;background:var(--psc-gold);transition:width .2s ease;}
.psc-quiz-step-label{
	font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--psc-gold-dim);
	font-weight:700;margin:0 0 10px;
}
.psc-quiz-question{
	font-family:var(--psc-font-head);font-size:28px;letter-spacing:.5px;color:#fff;margin:0 0 28px;
}
.psc-quiz-options{
	display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:32px;text-align:left;
}
@media (max-width:600px){.psc-quiz-options{grid-template-columns:1fr;}}
.psc-quiz-option{
	font-family:var(--psc-font-body);font-size:15px;font-weight:600;color:var(--psc-text) !important;
	background:var(--psc-bg-card) !important;border:2px solid var(--psc-border);border-radius:var(--psc-radius);
	padding:16px 18px;cursor:pointer;text-align:left;transition:all .15s ease;-webkit-appearance:none;appearance:none;
}
.psc-quiz-option:hover{border-color:var(--psc-gold-dim);}
.psc-quiz-option.selected{border-color:var(--psc-gold);color:var(--psc-gold) !important;background:rgba(201,168,76,.08) !important;}
.psc-quiz-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.psc-quiz-nav button:disabled{opacity:.4;cursor:not-allowed;}
.psc-quiz-loading,
.psc-quiz-error{font-size:16px;color:var(--psc-text-dim);padding:40px 0;}
.psc-quiz-error a{color:var(--psc-gold);}
.psc-quiz-broadened-note{color:var(--psc-text-dim);font-size:14px;margin:-16px 0 24px;}
.psc-quiz-results-grid{max-width:none;margin-bottom:28px;text-align:left;}
.psc-quiz-result-card{display:flex;flex-direction:column;}
.psc-quiz-result-card > a{display:flex;flex-direction:column;color:inherit;text-decoration:none;}
/* .psc-quiz-quote-btn (a per-card "Request a Quote" button) removed
   2026-09-13 -- Marc: "lets just have one request a quote button we dont
   need one for each movie." One combined button now lives in .psc-quiz-nav
   below the results grid instead (help-me-choose.js), styled with the
   existing .psc-btn/.psc-btn-primary classes, no new rule needed. */

/* Genre chips — one swipeable row, not a wrap grid */
.psc-genre-chip-row{
  display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;padding-bottom:6px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--psc-gold-dim) transparent;
}
.psc-genre-chip-row::-webkit-scrollbar{height:6px;}
.psc-genre-chip-row::-webkit-scrollbar-thumb{background:var(--psc-gold-dim);border-radius:999px;}
.psc-genre-chip-row::-webkit-scrollbar-track{background:transparent;}
.psc-genre-chip{
  flex:0 0 auto;scroll-snap-align:start;white-space:nowrap;
  padding:10px 20px;border-radius:999px;border:1px solid var(--psc-border);
  color:var(--psc-text);font-size:14px;font-weight:600;transition:all .15s ease;
}
.psc-genre-chip:hover{border-color:var(--psc-gold);color:var(--psc-gold);}

/* ---- Top Movie Picks — swipeable poster rows (2026-09-13) ----
   Same swipe mechanics as .psc-genre-chip-row above (flex nowrap,
   overflow-x:auto, scroll-snap, thin gold scrollbar) sized for full
   .psc-movie-card posters instead of text chips, plus optional prev/next
   buttons for desktop pointer users (native touch-scroll already covers
   mobile — the buttons are a bonus, not a requirement). */
.psc-pick-row-wrap{position:relative;}
.psc-pick-row{
	display:flex;flex-wrap:nowrap;gap:18px;overflow-x:auto;padding:2px 2px 10px;
	scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;
	scrollbar-width:thin;scrollbar-color:var(--psc-gold-dim) transparent;
}
.psc-pick-row::-webkit-scrollbar{height:6px;}
.psc-pick-row::-webkit-scrollbar-thumb{background:var(--psc-gold-dim);border-radius:999px;}
.psc-pick-row::-webkit-scrollbar-track{background:transparent;}
.psc-pick-row .psc-movie-card{flex:0 0 150px;scroll-snap-align:start;}
@media (min-width:600px){.psc-pick-row .psc-movie-card{flex-basis:170px;}}
.psc-pick-nav{
	display:none;position:absolute;top:calc(50% - 34px);z-index:2;
	width:38px;height:38px;border-radius:50%;border:1px solid var(--psc-border);
	background:var(--psc-bg-raised);color:var(--psc-text);font-size:18px;line-height:1;
	align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;
}
.psc-pick-nav:hover{border-color:var(--psc-gold);color:var(--psc-gold);}
.psc-pick-nav-prev{left:-14px;}
.psc-pick-nav-next{right:-14px;}
@media (min-width:1240px){.psc-pick-nav{display:flex;}}
.psc-pick-row-empty{color:var(--psc-text-dim);font-size:14px;}

/* Industries We Work With */
.psc-industries-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:16px;
}
.psc-industries-grid-compact{grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));}
.psc-industry-tile{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--psc-bg-card);border:1px solid var(--psc-border);border-radius:var(--psc-radius);
  padding:20px 22px;color:var(--psc-text);font-weight:600;font-size:15px;
  transition:border-color .15s ease, transform .15s ease;
}
.psc-industry-tile:hover{border-color:var(--psc-gold);color:var(--psc-gold);transform:translateY(-2px);}
.psc-industry-tile-arrow{color:var(--psc-gold);font-family:var(--psc-font-body);flex:0 0 auto;}

/* Industry landing page hero — same hero treatment as the homepage */
.psc-industry-hero{padding:80px 0 64px;}

/* How it works */
.psc-how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
@media (max-width:800px){.psc-how-grid{grid-template-columns:1fr;}}
.psc-how-step{text-align:center;}
.psc-how-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;background:var(--psc-gold);color:#11110b;
  font-family:var(--psc-font-head);font-size:22px;margin-bottom:16px;
}
.psc-how-step h3{font-family:var(--psc-font-head);font-size:20px;color:#fff;margin:0 0 10px;letter-spacing:.5px;}
.psc-how-step p{color:var(--psc-text-dim);font-size:15px;line-height:1.6;margin:0;}

/* CTA banner */
.psc-home-cta-banner{
  padding:70px 0;text-align:center;
  background:linear-gradient(135deg, rgba(75,0,130,.4), rgba(201,168,76,.12));
}
.psc-home-cta-banner h2{font-family:var(--psc-font-head);font-size:32px;color:#fff;margin:0 0 12px;}
.psc-home-cta-banner p{color:var(--psc-text-dim);font-size:16px;margin:0 0 26px;}
.psc-home-cta-banner a.psc-btn{margin:0 auto;}
.psc-home-cta-banner p a{color:var(--psc-gold);font-weight:600;}

/* ---- Related titles ----
   2026-09-22 (Marc): these cards (and Recently Viewed, which reuses this
   exact class) looked broken -- the poster was smaller/blurrier than the
   real catalog cards and had no shortlist star or purple hover, because
   this markup never had either. Rebuilt to the SAME shape the real .movie
   catalog card already uses (confirmed live before writing this): a
   non-link outer box, a .psc-movie-card-poster wrapper (already styled
   elsewhere in this file) holding the poster link plus a sibling star
   button -- not nested inside the link, matching this file's own stated
   reasoning for the catalog card's star placement -- and a second,
   separate link around the title. Two click targets on one card is
   exactly what the real catalog card already does (.movie__link on the
   poster, a second .movie__link around .movie__title), not a new pattern. */
.psc-related-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px;
}
@media (max-width:900px){.psc-related-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:520px){.psc-related-grid{grid-template-columns:repeat(2,1fr);}}
.psc-related-card{display:block;}
.psc-related-card .psc-movie-card-poster img{width:100%;height:100%;object-fit:cover;display:block;}
.psc-related-card:hover .psc-movie-card-poster{border-color:var(--psc-gold);transform:translateY(-3px);}
.psc-related-card .psc-movie-card-poster::after{
  content:"";position:absolute;inset:0;background:rgba(75,0,130,.3);
  opacity:0;transition:opacity .3s ease-in-out;pointer-events:none;
}
.psc-related-card:hover .psc-movie-card-poster::after,
.psc-related-card:focus-within .psc-movie-card-poster::after{opacity:1;}
.psc-related-card-link{display:block;color:inherit;text-decoration:none;}
/* 2026-09-22: the poster's own link needs an explicit height, or the img's
   height:100% has nothing to resolve against (its DIRECT parent is this link,
   not .psc-movie-card-poster -- a descendant CSS selector can still style the
   img from two levels up, but percentage-height resolution only looks at the
   immediate parent) and collapses to 0. Found by measuring the live box model,
   not by inspection -- every card had a 0px-tall image regardless of title.
   Scoped to the poster's own link only; the title's separate .psc-related-card-link
   below the poster is unaffected (it wants its normal content height). */
.psc-movie-card-poster > .psc-related-card-link{height:100%;}
.psc-related-card .psc-related-title{
  display:block;margin-top:8px;font-size:13px;color:var(--psc-text-dim);line-height:1.3;
}
.psc-related-card:hover .psc-related-title{color:var(--psc-text);}

/* ---- Dark-page background gap fix (2026-09-11) ----
   Real bug found live on /movies/: the footer (#colophon) has its own
   top margin, and neither #page nor body had a dark background behind
   it, so that margin gap showed through as a strip of plain white body
   background between the dark #content wrapper and the dark footer.
   Confirmed via a DOM measurement (#content bottom vs #colophon top =
   exactly a 50px gap), not guessed from a screenshot.

   Root-cause fix, not a per-template patch: every page on this site is
   dark-themed (front-page.php forces it, MasVideos forces it on movie
   post types, and there is no actual light template in use), so instead
   of chasing this exact gap on every template that has one, body itself
   gets the same dark tone the footer already uses. Any future margin/
   spacing gap anywhere on the site now shows dark instead of white. */
body.dark{
	background-color:#0A0D14;
}

/* ---- Mobile footer links (2026-09-11) ----
   Companion to the psc_handheld_footer css: the parent theme's mobile
   footer only ever rendered a copyright line, so a link row was added
   via PHP (functions.php, hooked onto vodi_handheld_footer). Styled to
   read clearly on the dark handheld footer without fighting for space
   on a small screen — one wrapped, centered row per menu, gold on hover. */
.psc-handheld-footer-links{
	padding:20px 24px 4px;
	text-align:center;
}
.psc-handheld-footer-menu{
	list-style:none;margin:0 0 12px;padding:0;
	display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;
}
.psc-handheld-footer-menu li{margin:0;}
.psc-handheld-footer-menu a{
	color:var(--psc-text, #f2f0e9);opacity:.85;font-size:14px;text-decoration:none;
}
.psc-handheld-footer-menu a:hover,
.psc-handheld-footer-menu a:active{color:var(--psc-gold,#c9a84c);opacity:1;}
/* Bullet separators between the mobile footer links (2026-09-19). Marc:
   "is there like something we can add to give it more spacing like maybe
   this •" -- the flex gap alone read as one run-on block. Generated content,
   so it never lands in the accessibility tree or in copied text, and the
   wider gap below keeps the bullet clear of both neighbours. */
.psc-handheld-footer-menu{gap:10px 22px;}
.psc-handheld-footer-menu li{position:relative;}
.psc-handheld-footer-menu li:not(:last-child):not(.psc-row-end)::after{
	content:"\2022";  /* bullet */
	position:absolute;right:-14px;top:50%;transform:translateY(-50%);
	color:var(--psc-gold,#c9a84c);opacity:.55;font-size:13px;line-height:1;
	pointer-events:none;
}

/* Movie-archive sidebar contrast fix (2026-09-12, Marc's live report).
   The "Movies by Year" links and the genre links inside the "Featured
   Movies" widget are plain <a> tags with no class of their own, so they
   inherit the theme's global link color — deep purple (#4b0082), sized for
   light backgrounds. Both widgets sit on this theme's dark navy sidebar,
   where that purple is nearly unreadable. Scoped to just these two widget
   areas rather than touching the global link color, which is used
   correctly elsewhere. */
/* !important needed here: Redux/theme-options injects a large inline
   "accent color" <style> block late in <head> (after this stylesheet) that
   targets this exact selector at equal specificity — last-in-source wins
   on a tie, so a plain override loses. Same reason the design-system notes
   for the main prostylezentertainment.com site call out needing
   !important on theme link colors. */
.masvideos-widget_movies_year_filter ul li a,
.masvideos_movies_widget a{
	color:var(--psc-text,#f2f0e9) !important;
}
.masvideos-widget_movies_year_filter ul li a:hover,
.masvideos_movies_widget a:hover{
	color:var(--psc-gold,#c9a84c) !important;
}

/* ---- "Movies by Year" filter grid — narrower columns (2026-09-13) ----
   Marc: the mobile filter drawer shows four-digit years wrapped onto two
   lines. Root cause: the parent theme's masvideos.css hardcodes a flat
   5-column grid (flex:0 0 20%) with no responsive step-down at all, on
   every screen size — plenty of room on a wide desktop sidebar, but not
   in the narrower mobile drawer this same widget also renders in. Widened
   to 4 columns everywhere (still five-across on desktop would've been the
   parent's job to fix, but 4 comfortably fits "2026" on one line at every
   width this site actually uses it at), stepping down to 3 on very narrow
   phones where even 4 gets tight. !important needed: the parent's
   masvideos.css is enqueued AFTER this child stylesheet (confirmed via
   the page's <link> order), so a plain override loses the specificity
   tie at equal selector weight. */
.masvideos-widget_movies_year_filter ul li{
	flex:0 0 25% !important;max-width:25% !important;
}
@media (max-width:480px){
	.masvideos-widget_movies_year_filter ul li{
		flex:0 0 33.333% !important;max-width:33.333% !important;
	}
}

/* ---- New discovery filter widgets — longer labels need 1 column, not 2
   (2026-09-13) ----
   The parent's masvideos.css splits every filter widget's list into
   column-count:2 with word-break:break-all on the links — fine for short
   single-word categories (Action, Comedy), but "Under 90 Minutes" and
   "School-Appropriate" broke mid-word ("Under 90 Minut|es") once real
   longer labels showed up. Scoped to just the new widgets via the extra
   psc-discovery-filter class (added to their widget_cssclass in
   functions.php) so the existing short-label widgets keep their 2-column
   layout untouched. !important for the same reason as the year-filter fix
   above — masvideos.css loads after this stylesheet. */
.psc-discovery-filter .masvideos-widget-movies-layered-nav-list{
	column-count:1 !important;
}
.psc-discovery-filter .masvideos-widget-movies-layered-nav-list__item a{
	word-break:normal !important;overflow-wrap:break-word !important;
}

/* ==========================================================================
   Homepage v2 — 2026-09-13, per Marc's request to bring the energy of
   premiereoutdoormovie.com's homepage (photo hero + inline quote bar, stat
   band, service tiers, "why choose us," reviews, blog cards) to this site.
   Shared small helpers first, then per-section styles.
   ========================================================================== */
.psc-accent{color:var(--psc-gold);}
.psc-eyebrow-label{
	font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--psc-gold-dim);
	font-weight:700;margin-bottom:10px;
}
.psc-lede{font-size:16px;line-height:1.7;color:var(--psc-text-dim);}
.psc-badge{
	position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--psc-gold);
	color:#11110b;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
	padding:5px 14px;border-radius:999px;white-space:nowrap;
}
.psc-section-alt{background:var(--psc-bg-raised);}

/* ---- Hero v2 (photo background + inline quote bar) ---- */
.psc-home-hero-v2{
	position:relative;padding:110px 0 56px;text-align:center;
	background-size:cover;background-position:center;background-repeat:no-repeat;
	border-bottom:1px solid var(--psc-border);
}
.psc-home-hero-v2-inner{max-width:820px;margin:0 auto;}
.psc-home-title-v2{
	font-family:var(--psc-font-head);font-size:56px;line-height:1.05;color:#fff;margin:0 0 20px;letter-spacing:.5px;
	text-transform:uppercase;
}
@media (max-width:600px){.psc-home-title-v2{font-size:38px;}}

.psc-quote-bar{
	display:flex;align-items:stretch;background:#fff;border-radius:8px;overflow:hidden;
	max-width:820px;margin:0 auto 22px;box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.psc-quote-field{
	flex:1 1 0;padding:12px 18px;text-align:left;border-right:1px solid #e6e4de;min-width:0;
}
.psc-quote-field label{
	display:block;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#888;
	font-weight:700;margin-bottom:2px;
}
.psc-quote-field select,
.psc-quote-field input{
	/* !important: the theme's own dark-mode form-field styling is more
	   specific here and would otherwise paint these near-invisible light
	   gray on dark navy on this white bar — same class of fight as the
	   sidebar-link-color override earlier today. */
	border:none !important;padding:0 !important;font-size:15px;color:#181818 !important;
	width:100%;background:transparent !important;font-family:var(--psc-font-body);
}
.psc-quote-field select:focus,
.psc-quote-field input:focus{outline:none;}
.psc-quote-submit{
	flex:0 0 auto;border:none;background:var(--psc-purple);color:#fff;font-weight:700;font-size:14px;
	padding:0 30px;cursor:pointer;transition:background .15s ease;white-space:nowrap;
}
.psc-quote-submit:hover{background:var(--psc-gold);color:#11110b;}
@media (max-width:760px){
	.psc-quote-bar{flex-wrap:wrap;box-shadow:none;}
	.psc-quote-field{flex:1 1 50%;border-bottom:1px solid #e6e4de;}
	.psc-quote-submit{flex:1 1 100%;padding:16px;}
}
.psc-home-hero-trust{font-size:14px;color:var(--psc-text-dim);margin:0;}
.psc-home-hero-trust strong{color:var(--psc-text);}

/* ---- Stat band ---- */
.psc-stat-band{
	background:linear-gradient(120deg, var(--psc-purple) 0%, #2c0050 100%);
	padding:32px 0;
}
.psc-stat-band-inner{display:flex;justify-content:center;gap:64px;flex-wrap:wrap;text-align:center;}
.psc-stat{display:flex;flex-direction:column;}
.psc-stat-num{font-family:var(--psc-font-head);font-size:38px;color:var(--psc-gold);letter-spacing:.5px;}
.psc-stat-label{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#fff;opacity:.85;margin-top:2px;}

/* ---- Service tiers ---- */
.psc-tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:32px;}
@media (max-width:980px){.psc-tier-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.psc-tier-grid{grid-template-columns:1fr;}}
.psc-tier-card{
	background:var(--psc-bg-card);border:1px solid var(--psc-border);border-radius:var(--psc-radius);
	padding:28px 22px;position:relative;transition:border-color .15s ease, transform .15s ease;
}
.psc-tier-card:hover{border-color:var(--psc-gold);transform:translateY(-4px);}
.psc-tier-card.psc-tier-featured{border:2px solid var(--psc-gold);}
.psc-tier-card h3{font-family:var(--psc-font-head);font-size:19px;color:#fff;margin:0 0 6px;letter-spacing:.4px;}
.psc-tier-audience{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--psc-gold-dim);margin:0 0 14px;font-weight:700;}
.psc-tier-card p:not(.psc-tier-audience){font-size:14px;line-height:1.6;color:var(--psc-text-dim);margin:0 0 18px;}
.psc-tier-card a{font-size:13px;font-weight:700;color:var(--psc-gold);}
.psc-tier-card a:hover{color:#fff;}

/* ---- Why choose us ---- */
.psc-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:32px;}
@media (max-width:980px){.psc-why-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.psc-why-grid{grid-template-columns:1fr;}}
.psc-why-card{text-align:left;}
.psc-why-num{font-family:var(--psc-font-head);font-size:26px;color:var(--psc-gold-dim);display:block;margin-bottom:8px;}
.psc-why-card h3{font-family:var(--psc-font-head);font-size:18px;color:#fff;margin:0 0 8px;letter-spacing:.4px;}
.psc-why-card p{font-size:14px;line-height:1.6;color:var(--psc-text-dim);margin:0;}

/* ---- Reviews ---- */
.psc-review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px;}
@media (max-width:860px){.psc-review-grid{grid-template-columns:1fr;}}
.psc-review-card{
	background:var(--psc-bg-card);border:1px solid var(--psc-border);border-radius:var(--psc-radius);
	padding:26px 24px;
}
.psc-review-stars{color:var(--psc-gold);font-size:15px;letter-spacing:2px;margin-bottom:12px;}
.psc-review-card p{font-size:14.5px;line-height:1.65;color:var(--psc-text);margin:0 0 16px;font-style:italic;}
.psc-review-author{font-size:12.5px;color:var(--psc-text-dim);font-weight:600;}

/* ---- Blog cards ---- */
.psc-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px;}
@media (max-width:860px){.psc-blog-grid{grid-template-columns:1fr;}}
.psc-blog-card{display:block;}
.psc-blog-card-image{aspect-ratio:16/10;border-radius:var(--psc-radius);overflow:hidden;border:1px solid var(--psc-border);margin-bottom:14px;transition:border-color .15s ease;}
.psc-blog-card-image img{width:100%;height:100%;object-fit:cover;display:block;}
.psc-blog-card:hover .psc-blog-card-image{border-color:var(--psc-gold);}
.psc-blog-card h3{font-size:16px;font-weight:700;color:var(--psc-text);margin:0 0 8px;line-height:1.35;}
.psc-blog-card:hover h3{color:var(--psc-gold);}
.psc-blog-card-link{font-size:13px;font-weight:700;color:var(--psc-gold);}

/* ---- CTA banner v2 ---- */
.psc-home-cta-banner-v2{
	width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;
	background:linear-gradient(120deg, var(--psc-purple) 0%, #2c0050 100%);
	text-align:center;padding:70px 24px;
}
.psc-home-cta-banner-v2 h2{font-family:var(--psc-font-head);font-size:36px;color:#fff;letter-spacing:.5px;margin:0 0 14px;text-transform:uppercase;}
.psc-home-cta-banner-v2 p{font-size:16px;color:rgba(255,255,255,.8);max-width:520px;margin:0 auto 26px;}
.psc-home-cta-banner-v2 p a{color:var(--psc-gold);font-weight:700;}
.psc-btn-outline-light{border:2px solid #fff;color:#fff;background:transparent;}
.psc-btn-outline-light:hover{background:#fff;color:var(--psc-purple) !important;border-color:#fff;}

/* ---- Screen demo widget (2026-09-13) ----
   An inflatable-screen + speakers render with a looping intro video playing
   "inside" the screen and the real Pro Stylez Entertainment logo on the
   base panel — per Marc's request, inspired by FunFlicks' homepage but
   original art (no FunFlicks IP), original video, real logo. The video and
   logo are positioned as percentages of the wrapper, measured against the
   render's actual screen-interior and base-panel rectangles, so they stay
   aligned at any container width since the wrapper's aspect-ratio matches
   the source image exactly (no letterboxing to throw off the math). */
.psc-screen-demo-section{text-align:center;}
/* Band sized to match the site's normal content column (same max-width as
   .psc-wrap elsewhere on the page), not a full-bleed 100vw breakout — Marc:
   "let's not have that section go all the way left/right, have it match
   the rest of the site." The render's own light studio background (sampled
   ~#dedbe1) fills this column edge-to-edge instead of stopping at the
   narrower 820px photo wrapper, so it still reads as a full band rather
   than a small boxed rectangle (the original "too boxed" complaint) —
   just contained to the site's usual width instead of the viewport's. */
/* Rebuilt again 2026-09-19 (2nd pass) — Marc, on the first attempt: "I dont
   want that dif color bg color for the sides I want the entire site to
   stratch to the sides and use that real estate."

   The first pass removed the box-in-a-box by matching the band to the photo's
   own grey ramp. That killed the seam but kept a light strip across a dark
   site, which is the thing he actually objected to. So the backdrop is gone
   for real this time: the render's studio sweep was cut out and the product
   now sits directly on the page.

   The cutout could not be done on luminance alone — the gold piping runs to
   lum 224, right inside the sweep's own 200-242 range, so a threshold erased
   it. The sweep is neutral (median R-B = -2) and the piping is warm (R-B >
   25), so warmth is what separates them; the enclosed grey gaps between the
   tripod legs come out too, which a border-connectivity approach left behind
   as white triangles. Attachment 6846.

   The speakers and stands are near-black, so on a flat dark page they lost
   their edges. The radial purple wash below is what gives them something to
   read against — it is doing a job, not decoration. ---- */
.psc-screen-demo-band{
	width:100vw;max-width:none;
	margin:32px 0 0;
	margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
	/* White, on Marc's call: "I want a white background behind this is looks
	   wrong without the bg." Third pass on this section, and the ORDER of the
	   passes is what makes this one work — it is a flat white now only
	   because the render's own grey studio sweep was cut away in the previous
	   pass. Putting a flat colour behind the ORIGINAL image was what produced
	   the "square in a square" he rejected, since that image carried its own
	   ramp from #d4d2d6 to #e8e6e9 and no single colour could ever match it.
	   With a transparent subject there is no seam to match, so the padding
	   below is safe too — on the earlier version any vertical padding offset
	   the gradient and put the seam straight back. */
	background:#fff;
	/* Bottom padding dropped 2026-09-21 (top-only now): this white box sits
	   inside `.psc-screen-demo-section`, a `.psc-home-block`, which already
	   carries its own 64px bottom padding. The old 56px bottom padding here
	   stacked on top of that before Reviews even started, turning the usual
	   ~128px section-to-section gap into ~184px of near-solid white — the
	   gap Marc flagged on the homepage. Top padding stays: nothing else
	   spaces the heading above from the demo graphic. */
	padding:56px 0 0;
}
@media (max-width:767px){
	.psc-screen-demo-band{padding:32px 0 0;}
}
.psc-screen-demo-wrap{
	position:relative;max-width:1100px;margin:0 auto;
	aspect-ratio:1024/688;background-size:contain;background-position:center;background-repeat:no-repeat;
}
.psc-screen-demo-video{
	/* Re-measured directly against the 1024x688 render's actual black
	   screen interior (previous left/width bled onto the gold trim/navy
	   frame on both sides — Marc: "it's just outside of where the screen
	   would be on the left and right"). Top/bottom were already correct. */
	position:absolute;left:21.1%;top:18.75%;width:56.9%;height:46.8%;
	object-fit:cover;border-radius:2px;
}
.psc-screen-demo-logo{
	/* Re-measured against the render's flat base-panel area (below the
	   gold divider line, before the frame's side legs taper inward) and
	   centered on the screen's true horizontal center (~49.6%, not 50%
	   flat — the render isn't perfectly symmetrical) — previous placement
	   read as off-center and too low (sat near the panel's bottom edge). */
	position:absolute;left:33.9%;top:68%;width:31%;height:auto;
	opacity:.92;pointer-events:none;
}

/* ==========================================================================
   Shared "resource page" design system — 2026-09-13.
   Originally built scoped inline on the Movie Licensing page; promoted to
   global here so About, News/Blog, Contact, and Resource Hub (all revamped
   the same day, same reference-driven brief) can reuse it instead of each
   page carrying its own copy of the same ~120 lines. The Movie Licensing
   page keeps its own inline copy too (harmless duplication, not worth a
   risky edit to already-shipped content) — these are the same rules.
   ========================================================================== */
/* ===== Movie Licensing page — full redesign, 2026-09-13 ===== */
.pml-section{padding:64px 0;}
.pml-section-alt{background:#f7f6f3;}
.pml-eyebrow{display:block;font-family:var(--psc-font-body);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--psc-gold-dim);font-weight:700;margin-bottom:10px;}
.pml-h2{font-family:var(--psc-font-head);font-size:32px;letter-spacing:.5px;line-height:1.15;margin:0 0 18px;color:#181818;text-transform:uppercase;}
.pml-h2 .pml-accent{color:var(--psc-purple);}
.pml-h2.pml-h2-light{color:#fff;}
.pml-h2.pml-h2-light .pml-accent{color:var(--psc-gold);}
.pml-lede{font-size:16px;line-height:1.7;color:#444;max-width:680px;}
.pml-lede.pml-lede-light{color:var(--psc-text-dim);}

/* Hero */
.pml-hero{
	width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;
	position:relative;padding:90px 0 56px;text-align:center;
	background:
		radial-gradient(circle at 18% 20%, rgba(138,77,255,.25), transparent 55%),
		radial-gradient(circle at 82% 80%, rgba(201,168,76,.18), transparent 55%),
		linear-gradient(180deg,#0d0d16 0%, var(--psc-bg) 100%);
}
.pml-hero-inner{max-width:720px;margin:0 auto;padding:0 24px;}
.pml-hero-eyebrow{display:inline-block;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--psc-gold);font-weight:700;margin-bottom:16px;}
.pml-hero h1{font-family:var(--psc-font-head);font-size:52px;line-height:1.05;letter-spacing:.5px;color:#fff;margin:0 0 18px;text-transform:uppercase;}
.pml-hero h1 .pml-accent{color:var(--psc-gold);}
.pml-hero p{font-size:17px;line-height:1.7;color:var(--psc-text-dim);max-width:580px;margin:0 auto 32px;}
.pml-jumpnav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:0;margin:0;list-style:none;}
/* Colours corrected 2026-09-19 — Marc, on a phone: "it's hard to see the
   text in the tabs because it's like light gray". Cause: these chips were
   given --psc-text-dim (#b9b6c4) and --psc-border (#2a2a3a), which are the
   DARK-theme tokens, but the only place the jumpnav renders (home.php, the
   News index) is a light .pml-section. Light text on white measured about
   2:1 against the 4.5:1 that body text needs. Hard values here rather than
   tokens precisely because this component sits on light ground and the
   tokens are defined for dark. */
.pml-jumpnav a{
	font-size:13px;font-weight:600;color:#4a4754;border:1px solid #d8d5cc;
	padding:9px 18px;border-radius:999px;transition:all .15s ease;display:inline-block;
}
/* Bug: this pill row sits on the page's white section, but the hover state
   used the dark-theme text token (#fff) — invisible white-on-near-white.
   Use the brand purple (already the active-pill text color) instead. */
.pml-jumpnav a:hover{color:var(--psc-purple);border-color:var(--psc-gold);background:rgba(201,168,76,.14);}

/* Two-col basics/who */
.pml-two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;}
@media (max-width:860px){.pml-two-col{grid-template-columns:1fr;gap:40px;}}
.pml-two-col p{font-size:15px;line-height:1.7;color:#444;margin:0 0 14px;}
.pml-who-list{list-style:none;margin:0;padding:0;}
.pml-who-list li{padding:14px 0;border-bottom:1px solid #e6e4de;font-size:15px;line-height:1.6;color:#444;}
.pml-who-list li:last-child{border-bottom:none;}
.pml-who-list strong{color:#181818;}

/* Cookie/data table on legal-style pages (2026-09-21) — plain <table>, not the
   Gutenberg wp:table block, so it needs its own look instead of relying on
   core's wp-block-table CSS. Sits on both .pml-section (white) and
   .pml-section-alt (#f7f6f3), so the table itself is always white with a
   border, reading as a card on either background. */
.pml-table-wrap{margin:20px 0;overflow-x:auto;border:1px solid #e6e4de;border-radius:8px;}
.pml-table{width:100%;border-collapse:collapse;background:#fff;font-size:14.5px;}
.pml-table th,
.pml-table td{padding:14px 18px;text-align:left;border-bottom:1px solid #e6e4de;line-height:1.6;}
.pml-table thead th{background:#f7f6f3;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#888;font-weight:700;border-bottom:1px solid #e6e4de;}
.pml-table tbody tr:last-child td{border-bottom:none;}
.pml-table td code,
.pml-table th code{background:#f0eee8;padding:2px 6px;border-radius:4px;font-size:13px;}

/* Pricing */
.pml-pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px;}
@media (max-width:860px){.pml-pricing-grid{grid-template-columns:1fr;}}
.pml-price-card{background:#fff;border:1px solid #e6e4de;border-radius:8px;padding:30px 26px;position:relative;}
.pml-price-card.pml-featured{border:2px solid var(--psc-gold);box-shadow:0 12px 30px rgba(201,168,76,.18);transform:translateY(-6px);}
.pml-price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--psc-gold);color:#181818;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap;}
.pml-price-card h3{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:#888;margin:0 0 10px;}
.pml-price-card .pml-price{font-family:var(--psc-font-head);font-size:30px;color:var(--psc-purple);margin:0 0 4px;letter-spacing:.5px;}
.pml-price-card .pml-audience{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:#999;margin:0 0 16px;}
.pml-price-card p.pml-desc{font-size:14px;line-height:1.6;color:#555;margin:0;}
.pml-fineprint{font-size:13px;color:#888;margin-top:28px;font-style:italic;}

/* Agencies */
.pml-agency-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px;}
@media (max-width:860px){.pml-agency-grid{grid-template-columns:1fr;}}
.pml-agency-card{background:#fff;border:1px solid #e6e4de;border-radius:8px;padding:32px 22px 26px;text-align:center;position:relative;}
.pml-agency-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--psc-purple);color:#fff;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:5px 13px;border-radius:999px;white-space:nowrap;}
.pml-agency-logo{height:64px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.pml-agency-logo img{max-height:100%;max-width:100%;object-fit:contain;}
.pml-agency-logo.pml-logo-dark{background:#181818;border-radius:6px;padding:8px;}
.pml-agency-card h3{font-size:15px;font-weight:700;color:#181818;margin:0 0 12px;}
.pml-studio-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:20px;min-height:26px;align-items:center;}
.pml-studio-row span{font-size:11px;color:#777;background:#f4f3ef;padding:4px 9px;border-radius:3px;}
.pml-agency-card a{display:inline-block;font-size:13px;font-weight:700;color:var(--psc-purple);border-bottom:1px solid var(--psc-purple);padding-bottom:2px;}
.pml-agency-card a:hover{color:var(--psc-gold);border-color:var(--psc-gold);}

/* Service-area page reviews (2026-09-13) — same real 3 reviews already on
   the homepage (.psc-review-card), but that component is styled for a
   dark background; service-area pages use the light .pml-section design
   system throughout (like About/Movie Licensing), so this is a light-
   card equivalent rather than importing a dark card into a light band. */
.psc-area-review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px;}
@media (max-width:860px){.psc-area-review-grid{grid-template-columns:1fr;}}
.psc-area-review-card{background:#fff;border:1px solid #e6e4de;border-radius:8px;padding:26px 24px;}
.psc-area-review-stars{color:var(--psc-gold-dim);letter-spacing:2px;margin-bottom:12px;}
.psc-area-review-card p{font-size:14.5px;line-height:1.65;color:#444;margin:0 0 16px;font-style:italic;}
.psc-area-review-author{font-size:12.5px;color:#777;font-weight:600;}

/* How it works (dark, full-bleed) */
.pml-steps-wrap{
	width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;
	background:
		radial-gradient(circle at 85% 20%, rgba(138,77,255,.18), transparent 55%),
		var(--psc-bg);
	padding:64px 0;
}
.pml-steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:36px;}
@media (max-width:860px){.pml-steps-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.pml-steps-grid{grid-template-columns:1fr;}}
.pml-step{text-align:center;}
.pml-step-num{
	width:52px;height:52px;border-radius:50%;background:var(--psc-gold);color:#181818;
	font-family:var(--psc-font-head);font-size:22px;display:flex;align-items:center;justify-content:center;
	margin:0 auto 16px;
}
.pml-step h3{font-size:14px;text-transform:uppercase;letter-spacing:.8px;color:#fff;margin:0 0 8px;}
.pml-step p{font-size:13.5px;line-height:1.6;color:var(--psc-text-dim);margin:0;}

/* FAQ accordion (native details/summary — real toggle, no JS needed) */
.pml-faq{max-width:820px;margin:36px auto 0;}
.pml-faq details{
	background:#fff;border:1px solid #e6e4de;border-radius:8px;margin-bottom:12px;overflow:hidden;
}
.pml-faq summary{
	list-style:none;cursor:pointer;padding:18px 22px;font-size:15px;font-weight:700;color:#181818;
	display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.pml-faq summary::-webkit-details-marker{display:none;}
.pml-faq summary::after{
	content:'+';font-size:22px;font-weight:400;color:var(--psc-purple);flex-shrink:0;transition:transform .2s ease;line-height:1;
}
.pml-faq details[open] summary::after{transform:rotate(45deg);}
.pml-faq details[open] summary{border-bottom:1px solid #e6e4de;}
.pml-faq .pml-faq-answer{padding:16px 22px 20px;font-size:14.5px;line-height:1.7;color:#555;}

/* CTA (full-bleed) */
.pml-cta{
	width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;
	background:linear-gradient(120deg, var(--psc-purple) 0%, #2c0050 100%);
	text-align:center;padding:64px 24px;
}
.pml-cta h2{font-family:var(--psc-font-head);font-size:32px;color:#fff;letter-spacing:.5px;margin:0 0 14px;text-transform:uppercase;}
.pml-cta p{font-size:16px;color:rgba(255,255,255,.8);max-width:520px;margin:0 auto 30px;}
.pml-cta p a{color:var(--psc-gold) !important;font-weight:700;}
.pml-cta p a:hover{color:#fff !important;}
.pml-cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.pml-btn{display:inline-block;padding:14px 32px;border-radius:999px;font-weight:700;font-size:14px;letter-spacing:.3px;text-transform:uppercase;}
.pml-btn-primary{background:var(--psc-gold);color:#181818;}
.pml-btn-primary:hover{background:#fff;color:#181818;}
.pml-btn-outline{border:2px solid #fff;color:#fff;background:transparent;}
.pml-btn-outline:hover{background:#fff;color:var(--psc-purple);}

/* ---- On-page catalog search (/movies/) — 2026-09-12 ---- */
.psc-catalog-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 22px;}
.psc-catalog-search-wrap{
	position:relative;display:flex;align-items:center;gap:10px;
	background:var(--psc-bg-raised);border:1px solid var(--psc-border);border-radius:var(--psc-radius);
	padding:14px 18px;margin:0;max-width:520px;flex:1 1 320px;
	transition:border-color .15s ease;
}
.psc-catalog-search-wrap:focus-within{border-color:var(--psc-gold);}
.psc-catalog-search-icon{flex:0 0 auto;color:var(--psc-text-dim);display:flex;}
.psc-catalog-search-input{
	flex:1 1 auto;background:transparent;border:none;outline:none;
	color:var(--psc-text);font-size:15px;font-family:inherit;min-width:0;
}
.psc-catalog-search-input::placeholder{color:var(--psc-text-dim);}
/* The header's dropdown is narrow and right-aligned to suit a small nav
   box; this one should span the full width of the wider catalog input. */
.psc-catalog-search-wrap .psc-search-dropdown{left:0;right:0;width:auto;max-width:none;}

/* ---- Contact form: dropdowns were clipping their own text (2026-09-19).
   Marc: "The drop-down forms are like half cut off on the contact page."

   Arithmetic, not opinion. Vodi ships
     select:not([size]):not([multiple]){height:calc(1.5em + 2px + 0.75rem)}
   which at this 15px font is 36.5px, and that formula assumes the theme's
   own 6px select padding. This site's form styling gives the select
   `padding:11px 13px` -- 22px vertically -- so the content box left for the
   text is 36.5 - 22 = 14.5px against a 22.5px line. The label was physically
   taller than the space it was given, hence the sliced "-Please choose an
   option-". Every neighbouring text input renders 49px because nothing caps
   THEIR height.

   Fixed by letting the box size to its content and matching the inputs'
   49px. Matched on three classes plus the element (0,3,1) because Vodi's
   own rule is (0,2,1) and vodi/style.css is served after this file -- an
   equal-specificity override would lose on order, the same trap as the
   header search field, the sidebar toggle and the header margin. ---- */
.wpcf7-form select.wpcf7-form-control.wpcf7-select{
	height:auto;min-height:49px;line-height:1.5;
}

/* Grid children must be allowed to shrink below their min-content width.
   A grid item defaults to `min-width:auto`, so one unbreakable run of text
   inside the contact card held the column at 341px inside a 297px track and
   pushed the page 5px wider than the viewport -- a small overflow, but it is
   what makes a phone scroll sideways. */
@media (max-width:860px){
	.pml-two-col > *,
	.pml-contact-grid > *,
	.pml-pricing-grid > *,
	.pml-agency-grid > *{min-width:0;}
}

/* ---- Mobile: force the pml-* grids to a single column (2026-09-19).
   Marc: "The about us page isn't mobile responsive." Measured rather than
   eyeballed -- /about/ scrolled to 690px inside a 375px viewport, and the
   offender was a .pml-price-card sitting at x=544.

   Cause: these pages were built with the column count written as an INLINE
   style on the grid (`style="grid-template-columns:repeat(4,1fr)"` on About,
   repeat(2,1fr) on Resource Hub). An inline style outranks any stylesheet
   rule short of !important, so the existing `@media (max-width:860px){...
   grid-template-columns:1fr}` never got a chance and the desktop column
   count survived onto a phone.

   !important is load-bearing here and not laziness: nothing else beats an
   inline style. The alternative -- editing the inline style out of every
   stored page -- would have to be repeated by hand every time a page is
   re-edited in wp-admin, whereas this holds for any page built the same way.
   Checked across the site first: /about/ and /resource-hub/ overflowed,
   /movie-licensing/, /services/, /halloween-movie-nights/ and
   /holiday-movie-nights/ already did not. ---- */
@media (max-width:860px){
	.pml-pricing-grid,
	.pml-agency-grid,
	.pml-two-col,
	.pml-contact-grid{
		grid-template-columns:1fr !important;
	}
}

/* ---- Full-width site (2026-09-19) ----
   Marc: "I want the site to extend to the full page left and right I dont
   want the side dark color just there taking up real estate", with the dead
   strips marked on both sides of a screenshot.

   Measured first: `.site-content .container` caps at 1486px AND adds 38px of
   side padding, so at a 1500px viewport every section rendered 1409px wide
   with 38px of bare page either side -- and on a 2560px monitor the cap alone
   leaves over 500px of dead gutter. That container is what every section sits
   inside, which is why the strips appear on every page rather than one.

   Scoped to `.site-content` on purpose: the header and footer have their own
   container and are deliberately left alone, so the nav keeps its current
   alignment.

   IMPORTANT -- this widens BACKGROUNDS, not text. Every section inside still
   lays its copy out in `.psc-wrap` (1180px) or its own narrower max-width, so
   paragraphs do not stretch into unreadable 2000px lines on a wide monitor.
   That is the distinction being drawn: Marc objected to the dark bands, not
   to centred body copy. A small side padding is kept so text never touches
   the very edge of the screen on a laptop. ---- */
.site-content .container{
	max-width:none;
	/* Padding ZERO, not 24px. The first attempt kept side padding here and
	   Marc came straight back: only the hero looked fixed. He was right --
	   padding on the container insets EVERY section that paints its own
	   background, so .psc-home (#0a0a12) and .psc-home-block.psc-section-alt
	   (#14141f) both stopped 24px short and left exactly the dead strips he
	   marked up. A hero looked fine only because it breaks out with 100vw.

	   With this at zero, every section is full width by default and no
	   breakout is needed. Readable line length is then the job of .psc-wrap
	   (1180px + its own 24px padding) INSIDE each section, which is where it
	   belongs -- so backgrounds reach the glass while text stays readable. */
	padding-left:0;
	padding-right:0;
}

/* Content that is not wrapped in a .psc-wrap still needs breathing room, or
   it would now run into the edge of the screen. Applied to .entry-content/
   article/.page-content specifically (not the container generally), so a
   full-bleed section elsewhere is not re-inset by it.

   Fixed 2026-09-22 (Marc, a single blog post: "the content needs padding
   on top left and right its toughing the sides and top and looks broken"):
   the `>` direct-child combinator assumed .entry-content/article sit right
   inside .container, but single-post templates (sidebar-right) nest them
   three levels deeper -- .site-content__inner > .content-area > .site-main
   > article -- so this never matched there at all and the article ran
   edge to edge. Dropped to a plain descendant selector so nesting depth no
   longer matters. */
.site-content .container .entry-content,
.site-content .container article,
.site-content .container .page-content{
	padding-left:24px;padding-right:24px;
}
@media (max-width:767px){
	.site-content .container .entry-content,
	.site-content .container article,
	.site-content .container .page-content{padding-left:16px;padding-right:16px;}
}
/* Top padding only on article/.page-content, not .entry-content too -- on a
   single post .entry-content sits INSIDE article (checked live), so both
   matching would double the horizontal padding on it (acceptable) but also
   open a second, unwanted gap between the featured image and the body copy.
   Marc: the image sat flush against the header with nothing above it. */
.site-content .container article,
.site-content .container .page-content{
	padding-top:32px;
}
@media (max-width:767px){
	.site-content .container article,
	.site-content .container .page-content{padding-top:20px;}
}

/* Blog posts: cap and center the column like every other page (2026-09-22,
   second pass) -- Marc, after the padding fix above: "tested on multiple
   devices in different browsers incognito windows... getting the same
   thing." The 24px inset was real and live (checked, including a fresh
   curl with cf-cache-status: MISS), but a single post's .container still
   had no max-width, same as /movies/ before that got its own fix -- so on
   a wide monitor the whole two-column layout still stretched close to the
   glass either side, just with a narrow 24px collar instead of none, which
   reads as "still not fixed" even though it technically was. This gives
   .single-post the same 1170/1440/1486px steps the header/footer and the
   movies page already use, so the page finally lines up with the rest of
   the site instead of just having slightly less-bad edges. Scoped to
   .single-post only -- the homepage's edge-to-edge colour bands (the
   change right below this one) are a deliberate, separate decision and
   are not touched. */
@media (min-width:1200px){
	.single-post .site-content .container{max-width:1170px;margin-left:auto;margin-right:auto;}
}
@media (min-width:1440px){
	.single-post .site-content .container{max-width:1440px;}
}
@media (min-width:1486px){
	.single-post .site-content .container{max-width:1486px;}
}

/* Sections that carry their own background should now reach the true edge.
   They were already using the 100vw breakout, but inside a padded container
   the breakout was measured from the wrong origin. */
.psc-home-hero-v2,
.psc-campaign-hero,
.pml-hero,
.pscs-band,
.psc-screen-demo-band{
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	width:100vw;max-width:none;
}

/* ---- Kill the parent theme's 37px gap under the header (2026-09-19).
   Marc: "there is a gap between the header and the start of the page."
   Vodi ships `.site-header{margin-bottom:37px}`. On a page whose content
   opens with a white section it is invisible; on this site almost every page
   opens with a full-bleed dark hero (.pml-hero, .psc-home-hero-v2), so the
   margin showed as a white band between the header and the hero. Zeroed
   rather than overridden per-page — nothing on the site relies on it, and
   every template here provides its own opening spacing.

   Selector is `header.site-header` (0,1,1), not the bare class. The parent's
   rule is also a bare `.site-header` (0,1,0) and vodi/style.css is served
   AFTER this file, so an equal-specificity override loses on source order --
   the same trap that has now bitten the header search field, the sidebar
   toggle and this. Verified against the deployed page, not assumed. ---- */
header.site-header{margin-bottom:0;}

/* ---- Sticky, shrinking mobile header (2026-09-19) ----
   Marc: "the nav should be sticky when you scroll down but it should be
   small and I think drop the logo to make it small when the user scrolls
   down but don't make it drop the logo harsh."

   Read as: keep the logo, shrink it, and move between the two states
   smoothly -- so this animates max-height rather than swapping in a smaller
   mark or hiding it outright, which is the "harsh" version he ruled out.

   Neither of Vodi's own sticky options is switched on (enable_sticky_header
   and enable_hh_sticky_header both came back empty), and its sticky is a
   Waypoint clone that injects `stuck animated fadeInDown faster` -- a
   re-entry animation every time you cross the threshold, which is exactly
   the jolt to avoid. CSS position:sticky costs no JS, has no re-entry
   animation, and keeps the header in flow so nothing jumps when it engages.

   Checked before relying on it: <body> carries overflow-x:hidden, which can
   neutralise position:sticky on a descendant. Verified empirically on the
   deployed page that it still sticks here (header top stayed 0 at 778px of
   scroll) rather than assuming either way.

   Mobile only -- the desktop header was not part of the ask. ---- */
@media (max-width:1199.98px){
	header.handheld-header{
		position:sticky;top:0;z-index:999;
		transition:box-shadow .22s ease;
	}
	header.handheld-header .site-header__logo{transition:padding .24s ease;}
	header.handheld-header .site-header__logo .custom-logo{
		width:auto;height:auto;max-height:100px;
		transition:max-height .24s ease;
	}
	/* Shadow only once it has lifted off the page, so the resting header
	   stays flat against the hero. */
	header.handheld-header.psc-nav-shrunk{box-shadow:0 2px 14px rgba(0,0,0,.16);}
	header.handheld-header.psc-nav-shrunk .site-header__logo{padding:6px 0;}
	header.handheld-header.psc-nav-shrunk .site-header__logo .custom-logo{max-height:52px;}
}

/* ---- Sticky desktop header (2026-09-22) ----
   Marc: "on desktop make the header sticky when I scroll down." Same
   position:sticky approach as the mobile header above (no JS, no re-entry
   animation, stays in flow), extended to `.desktop-header` -- the shrink
   script in functions.php already adds/removes .psc-nav-shrunk on this
   header too now, so this only needs the shadow-once-lifted rule; the
   logo-shrink part of the mobile design doesn't apply here (a compact
   handheld logo box shrinking was the ask then, not a general resize). */
@media (min-width:1200px){
	header.desktop-header{
		position:sticky;top:0;z-index:999;
		transition:box-shadow .22s ease;
	}
	header.desktop-header.psc-nav-shrunk{box-shadow:0 2px 14px rgba(0,0,0,.16);}
}
@media (prefers-reduced-motion:reduce){
	header.desktop-header{transition:none;}
	header.handheld-header,
	header.handheld-header .site-header__logo,
	header.handheld-header .site-header__logo .custom-logo{transition:none;}
}

/* Amazon affiliate disclosure under the Buy row. Quiet, but genuinely
   readable — a disclosure set in near-invisible grey is not a disclosure.
   Measured on the deployed page: 7.01:1 against the page background. */
.psc-affiliate-note{
	margin:14px 0 0;font-size:12.5px;line-height:1.55;
	color:#9c98a8;max-width:640px;
}

/* ---- Report an issue (2026-09-19) ----
   Styled quietly on purpose: it is a maintenance affordance, and it must not
   compete with Request a Quote for attention. Still a real button, not a bare
   text link, so it is obviously actionable and reaches a 44px touch target. */
.psc-report-line{
	margin:26px 0 0;font-size:13.5px;color:var(--psc-text-dim);
	display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.psc-report-open{
	background:none;border:1px solid var(--psc-border);border-radius:999px;
	color:var(--psc-text-dim);font:inherit;font-weight:600;
	padding:9px 16px;min-height:38px;cursor:pointer;transition:all .15s ease;
}
.psc-report-open:hover{border-color:var(--psc-gold);color:var(--psc-gold);}
.psc-report-open:focus-visible{outline:2px solid var(--psc-gold);outline-offset:2px;}

.psc-report-modal{
	position:fixed;inset:0;z-index:99998;
	background:rgba(6,6,10,.86);
	display:flex;align-items:center;justify-content:center;padding:20px;
}
.psc-report-modal[hidden]{display:none;}
.psc-report-card{
	position:relative;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;
	background:var(--psc-bg-raised);border:1px solid var(--psc-border);
	border-radius:var(--psc-radius,8px);padding:28px 26px 26px;
	box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.psc-report-card h2{
	font-family:var(--psc-font-head);font-size:24px;letter-spacing:.5px;
	text-transform:uppercase;color:var(--psc-text);margin:0 0 6px;
}
.psc-report-sub{font-size:13.5px;color:var(--psc-text-dim);margin:0 0 20px;}
.psc-report-close{
	position:absolute;top:10px;right:10px;width:40px;height:40px;
	display:flex;align-items:center;justify-content:center;
	background:transparent;border:0;border-radius:8px;
	color:var(--psc-text-dim);font-size:24px;line-height:1;cursor:pointer;
}
.psc-report-close:hover{color:var(--psc-gold);background:rgba(255,255,255,.06);}
.psc-report-form label{
	display:block;margin:0 0 6px;font-size:12px;letter-spacing:.5px;
	text-transform:uppercase;color:var(--psc-gold);font-weight:600;
}
.psc-report-form select,
.psc-report-form textarea,
.psc-report-form input[type="email"]{
	width:100%;box-sizing:border-box;margin:0 0 16px;
	padding:11px 13px;min-height:44px;
	background:var(--psc-bg);border:1px solid var(--psc-border);border-radius:6px;
	color:var(--psc-text);font:inherit;
}
/* The select needed its own rule, and background-IMAGE is the whole point.
   Marc: "the whats wrong drop down you cant read." The theme draws its
   dropdown arrow as two white 45-degree linear-gradients
   (`linear-gradient(45deg, transparent 50%, #fff), ...`) sized for a larger
   control; on this field they rendered as a white wash straight across the
   text. The rule above only set background-COLOR, so that image survived and
   covered everything.

   Two classes plus the element (0,2,1) because the theme's own `.dark select`
   is (0,1,1) and css/theme.css is served after this file, so an equal
   selector would lose on order -- the same trap as the header search field
   and the sidebar toggle. The arrow is replaced with a gold chevron drawn as
   an inline SVG, which needs no extra request and reads on a dark field. */
.psc-report-card .psc-report-form select{
	background-color:var(--psc-bg);
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a84c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 14px center;
	background-size:12px 8px;
	padding-right:38px;
	color:var(--psc-text);
	-webkit-appearance:none;appearance:none;
}
/* The option list is drawn by the OS, not this stylesheet, so it needs its
   own colours or it inherits a white-on-white list in a dark browser theme. */
.psc-report-card .psc-report-form select option{
	background-color:#12121c;color:#f2f0e9;
}
.psc-report-form textarea{min-height:104px;resize:vertical;}
.psc-report-optional{text-transform:none;letter-spacing:0;color:var(--psc-text-dim);font-weight:400;}
.psc-report-submit{width:100%;}
/* The honeypot must be unreachable for people but present for bots, so it is
   moved off-screen rather than display:none -- some bots skip hidden inputs. */
.psc-report-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.psc-report-status{margin:12px 0 0;font-size:13px;color:var(--psc-text-dim);min-height:1em;}
.psc-report-thanks{margin:0;font-size:15px;line-height:1.6;color:var(--psc-text);}

/* ---- Single movie: back link + collapsible quote form (2026-09-19) ---- */
.psc-back-link{
	display:inline-flex;align-items:center;gap:7px;
	margin:0 0 18px;padding:9px 14px 9px 10px;border-radius:999px;
	background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
	color:var(--psc-text,#f2f0e9);font-size:13.5px;font-weight:600;
	text-decoration:none;transition:all .15s ease;
}
.psc-back-link:hover{background:rgba(201,168,76,.16);border-color:var(--psc-gold);color:var(--psc-gold);}
.psc-back-link:focus-visible{outline:2px solid var(--psc-gold);outline-offset:2px;}
.psc-back-icon{flex:0 0 auto;}

.psc-quote-details{border:1px solid var(--psc-border);border-radius:var(--psc-radius,8px);background:rgba(255,255,255,.02);}
.psc-quote-summary{
	display:flex;align-items:center;gap:12px;flex-wrap:wrap;
	padding:18px 20px;cursor:pointer;list-style:none;
}
/* Both are needed: WebKit uses the pseudo-element, everyone else list-style. */
.psc-quote-summary::-webkit-details-marker{display:none;}
.psc-quote-summary::marker{content:"";}
.psc-quote-summary-title{margin:0;}
.psc-quote-summary-hint{font-size:13.5px;color:var(--psc-text-dim);flex:1 1 220px;min-width:0;}
.psc-quote-summary-hint strong{color:var(--psc-text);}
.psc-quote-chevron{
	flex:0 0 auto;width:10px;height:10px;margin-left:auto;
	border-right:2px solid var(--psc-gold);border-bottom:2px solid var(--psc-gold);
	transform:rotate(45deg);transition:transform .18s ease;
}
.psc-quote-details[open] .psc-quote-chevron{transform:rotate(-135deg);}
.psc-quote-summary:focus-visible{outline:2px solid var(--psc-gold);outline-offset:2px;border-radius:var(--psc-radius,8px);}
.psc-quote-body{padding:0 20px 20px;}
/* The date input cannot carry a placeholder like its neighbours, so it needs
   a real visible label -- see the CF7 template fix on form 5565, where the
   label was previously rendered AFTER the field and unassociated. */
.psc-field-label{
	display:block;margin:0 0 6px;font-size:12px;letter-spacing:.5px;
	text-transform:uppercase;color:var(--psc-gold);font-weight:600;
}
@media (prefers-reduced-motion:reduce){.psc-quote-chevron{transition:none;}}

/* Close button for the mobile filter panel on /movies/ (Marc: "When I open
   the filter on the movie page, there's no closeout X button"). right:24px,
   not 10px (2026-09-22, Marc: "still off to the right") -- the sidebar's
   gold scrollbar sits flush against its own right edge, and at 10px the
   button's own edge landed right against/under it. */
.psc-sidebar-close{
	position:absolute;top:10px;right:24px;z-index:3;
	width:44px;height:44px;display:none;align-items:center;justify-content:center;
	background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
	border-radius:8px;color:#fff;cursor:pointer;padding:0;line-height:0;
}
.active-hh-sidebar .psc-sidebar-close{display:flex;}
.psc-sidebar-close:hover{background:rgba(201,168,76,.2);border-color:var(--psc-gold);color:var(--psc-gold);}
.psc-sidebar-close:focus-visible{outline:2px solid var(--psc-gold);outline-offset:2px;}
/* Marc, 2026-09-22 (mobile screenshot, that day): "two X's" on the filter
   drawer -- this button, plus the parent theme's own close badge (a white
   Font Awesome "x" circle, ::before on .site-content.active-hh-sidebar).
   Below 1200px this button was hidden in favour of that native badge.

   Reversed 2026-09-22 (same day, later report): "the dedicated Close
   filters button is hidden in the mobile layout" -- the native badge turned
   out to be a poor substitute at 390px (small, floats half off the top of
   the viewport rather than living in the drawer). This button now moves
   into the drawer's own persistent header instead (.psc-drawer-header,
   functions.php) below 1200px, so the "two X's" problem is solved the other
   way: the native badge is suppressed instead of this button. */
.psc-drawer-header .psc-sidebar-close{
	position:static;margin-left:auto;flex-shrink:0;
}
@media (max-width:1199.98px){
	.site-content.active-hh-sidebar::before{display:none !important;}
}

/* ---- Mobile filter drawer polish (2026-09-22) ----
   Header and footer built by functions.php as direct children of #secondary
   -- confirmed live that #secondary is both the off-canvas panel AND its
   own scroll container (position:fixed, overflow-y:scroll), so sticky
   children of it stick to that box. Both use a negative margin equal to
   #secondary's own padding (20px 15px 0, set by the parent theme) to bleed
   edge-to-edge and sit flush against the drawer's own top/bottom rather
   than floating inset from it. Scoped with the same 1199.98px cutoff as the
   JS that builds them -- the desktop/tablet collapsed-sidebar panel above
   that is a different, in-flow UI these don't touch. */
@media (max-width:1199.98px){
	.psc-drawer-header{
		position:sticky;top:-20px;z-index:5;
		margin:-20px -15px 14px;padding:14px 15px;
		display:flex;align-items:center;gap:12px;
		background:var(--psc-bg,#0d0d0d);border-bottom:1px solid var(--psc-border);
	}
	.psc-drawer-header-title{font-size:15px;font-weight:700;color:var(--psc-text);text-transform:uppercase;letter-spacing:.5px;}
	.psc-drawer-footer{
		position:sticky;bottom:0;z-index:5;
		margin:18px -15px 0;padding:14px 15px;
		display:flex;flex-direction:column;gap:10px;
		background:var(--psc-bg,#0d0d0d);border-top:1px solid var(--psc-border);
	}
	.psc-drawer-footer .psc-filter-submit{width:100%;}
	.psc-drawer-footer .psc-clear-filters-btn{
		display:flex;align-items:center;justify-content:center;gap:6px;
		width:100%;padding:10px;
	}
	/* Categories collapsed into the same fold the five discovery filters
	   already use -- no new visual language, just applied here too. */
	.psc-cat-collapse{margin-top:0;}
}
@media (prefers-reduced-motion:reduce){
	.psc-drawer-header,.psc-drawer-footer{position:static;}
}

/* Dim the sticky quote/call bar while the mobile filter drawer is open
   (2026-09-22) -- Marc: "the site's quote/call bar remains visible behind
   the drawer, adding competing controls." The drawer (293px) doesn't span
   the full 375px+ viewport, so the bar was showing through the uncovered
   strip on the right even though it sits under the drawer in z-index.
   .psc-filters-open is mirrored onto <body> by a MutationObserver in
   functions.php, since the drawer's own open/close is toggled by the
   parent theme's handler, not this script. */
body.psc-filters-open #psc-sticky-bar{transform:translateY(100%);}

/* ---- Mobile search moved into the nav drawer (2026-09-22) ----
   Marc: "on mobile can the search just open in the nav and not open under
   it?" -- functions.php moves the existing search <form> into the offcanvas
   nav drawer; this only styles its new home there. */
.psc-offcanvas-search{margin:0 0 20px;}
.psc-offcanvas-search .search-form{position:relative;display:block;}
.psc-offcanvas-search input.search-field{
	width:100%;padding:11px 44px 11px 14px;border-radius:8px;
	border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
	color:#fff;font-size:15px;
}
.psc-offcanvas-search input.search-field::placeholder{color:rgba(255,255,255,.5);}
.psc-offcanvas-search .search-submit{
	position:absolute;top:50%;right:6px;transform:translateY(-50%);
	background:none;border:0;color:rgba(255,255,255,.7);padding:8px;cursor:pointer;
}
.psc-offcanvas-search .search-submit:hover{color:var(--psc-gold);}

/* ---- Mobile menu (offcanvas drawer) — 2026-09-19 ----
   Marc: the menu "is too far to the top", wants spacing, and wants the logo
   at the top so the drawer itself offers a way home.

   Measured first: .offcanvas-collapse ships `padding: 0 24px` -- no top
   padding whatever -- so the first link's box sat at y=0, against the status
   bar. The logo markup is injected through wp_nav_menu's items_wrap (see
   functions.php); this is only its type and spacing. ---- */
.offcanvas-drawer .offcanvas-collapse{
	padding-top:18px;padding-bottom:28px;
}
/* Close X, top-right of the drawer. 44px box: it is the one control in here
   a thumb reaches for in a hurry. */
.psc-offcanvas-close{
	position:absolute;top:10px;right:10px;z-index:2;
	width:44px;height:44px;display:flex;align-items:center;justify-content:center;
	background:transparent;border:0;border-radius:8px;
	color:#4b0082;cursor:pointer;line-height:0;padding:0;
}
.psc-offcanvas-close:hover{background:rgba(75,0,130,.08);}
.psc-offcanvas-close:focus-visible{outline:2px solid var(--psc-purple);outline-offset:2px;}
.offcanvas-drawer .offcanvas-collapse{position:relative;}
.psc-offcanvas-logo{
	display:block;margin:0 0 18px;padding:0 0 16px;
	border-bottom:1px solid rgba(0,0,0,.08);
	line-height:0;
}
.psc-offcanvas-logo-img{display:block;width:auto;max-width:168px;height:auto;}
/* The Get a Quote pill sat flush against the screen edge while every other
   item was indented 24px (Marc: "touching the end of the screen"). The
   pre-existing pill override targets `.offcanvas-menu`, which is NOT the
   class this menu gets -- it renders as `.offcanvas-nav` -- so that rule has
   never applied here. Inset so the pill lines up with the links above it. */
.offcanvas-nav .psc-nav-cta{padding:10px 24px 0;}

/* ---- Handheld sidebar toggle (mobile) — 2026-09-19.
   Marc caught this on a phone: the toggle was the theme's default blue,
   the one obviously off-brand control left on the mobile layout. Purple to
   match the site's own primary button. The label and icon are corrected in
   functions.php (it says "Filters" even on a blog post, where the panel is
   really related guides, not filters). ---- */
/* Matched through .btn (0,3,0), not the plain two-class form. Caught by
   re-measuring the deployed page: MasVideos' own stylesheet carries
   `.handheld-sidebar-toggle .sidebar-toggler{background:transparent}` inside
   @media (max-width:1199.98px) at the SAME (0,2,0) specificity as the short
   form, and masvideos.css loads after this file — so the short form lost on
   source order and shipped white text on a white page. Same failure mode as
   the header search field above; winning on specificity is the fix that does
   not depend on load order. */
.handheld-sidebar-toggle .btn.sidebar-toggler{
	background:var(--psc-purple);border-color:var(--psc-purple);color:#fff;
	font-weight:700;letter-spacing:.3px;
	/* Sized up 2026-09-19 (Marc: "needs more room to breath its to small").
	   44px min-height is also the accessibility guidance for a touch target,
	   which the original 30-ish px control was under. */
	display:inline-flex;align-items:center;gap:9px;
	min-height:44px;padding:11px 20px;font-size:14px;border-radius:8px;
}
.handheld-sidebar-toggle .btn.sidebar-toggler:hover,
.handheld-sidebar-toggle .btn.sidebar-toggler:focus,
.handheld-sidebar-toggle .btn.sidebar-toggler:active{
	background:#3a0066;border-color:#3a0066;color:#fff;
}
.handheld-sidebar-toggle .btn.sidebar-toggler i{color:var(--psc-gold);font-size:16px;}

/* ---- Footer credit — "Created with (heart) by Spider Hosting" (2026-09-19).
   Second pass: Marc asked to drop the "Website:" label and run it straight on
   from "All Rights Reserved." rather than sitting as its own block, so it is
   now appended to the copyright string itself and only needs inline type. ---- */
.psc-built-by-heart{
	width:12px;height:12px;display:inline-block;vertical-align:-1px;margin:0 2px;
}
.psc-built-by-link{color:inherit;font-weight:600;text-decoration:none;}
.psc-built-by-link:hover{color:var(--psc-gold);}

/* ---- Footer movie-IP notice (2026-09-20) — sits on its own line under the
   copyright/credit string. Muted and small: it is a notice, not a call to
   action, but still legible (12px at .75 opacity on the dark footer). ---- */
.psc-footer-ip{
	display:block;margin-top:8px;max-width:760px;
	font-size:12px;line-height:1.55;opacity:.75;
}
/* Parent theme's `.dark .site-info a` paints footer links #494d58 (~2:1 on
   this footer), so the link needs the extra specificity to stay readable. */
.site-footer .site-info .psc-footer-ip a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.site-footer .site-info .psc-footer-ip a:hover,
.site-footer .site-info .psc-footer-ip a:focus{color:var(--psc-gold);}
.handheld-footer .psc-footer-ip{margin-left:auto;margin-right:auto;}
/* Desktop: the notice widens .site-info from shrink-to-fit to the full
   notice width, so the inherited text-align:center would push the copyright
   line off its old left edge. Left-align it so both lines start together. */
.site-footer:not(.handheld-footer) .site-info{text-align:left;}

/* ---- Clear Filters button (/movies/) — 2026-09-12 ---- */
.psc-clear-filters-btn{
	display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
	padding:13px 20px;border-radius:var(--psc-radius);
	border:1px solid var(--psc-purple-glow);color:#c9b6ff;background:transparent;
	font-family:inherit;font-size:14px;font-weight:600;white-space:nowrap;
	text-decoration:none;transition:all .15s ease;
}
.psc-clear-filters-btn:hover{background:var(--psc-purple-glow);border-color:var(--psc-purple-glow);color:#fff;}
.psc-clear-filters-btn span{font-size:16px;line-height:1;}

/* ---- Catalog grid card titles — real bug, 2026-09-12 ----
   MasVideos'/Vodi's default .movie__title is single-line
   (white-space:nowrap + ellipsis), so two different real titles that share
   a long prefix render identically and are indistinguishable in the grid —
   e.g. "28 Years Later" and "28 Years Later: The Bone Temple" both showed
   as "28 Years Late…". Confirmed via computed style, not assumed. Full
   text was always in the DOM (fine for schema/accessibility), just visually
   clipped. Switched to a standard 2-line clamp so genuinely distinct
   titles stay distinguishable; CSS Grid rows re-size per-row automatically,
   so a few taller cards don't break the layout. */
.movie__title{
	white-space:normal !important;
	display:-webkit-box !important;
	-webkit-line-clamp:2;-webkit-box-orient:vertical;
	overflow:hidden;text-overflow:ellipsis;
	line-height:1.3;
}

/* ---- "Get a Quote" nav CTA (2026-09-13) — a plain text link the same
   weight as the other nav items would get lost; make it read as a button,
   matching the gold-fill buttons already used sitewide (movie Buy links,
   form submits). ---- */
.psc-nav-cta{display:flex;align-items:center;}
.psc-nav-cta > a{
	display:inline-flex;align-items:center;justify-content:center;
	background:var(--psc-gold) !important;color:#11110b !important;
	padding:8px 20px !important;border-radius:999px;font-weight:700 !important;
	line-height:1.2;transition:background .15s ease;
}
.psc-nav-cta > a:hover{background:var(--psc-gold-dim) !important;color:#11110b !important;}
/* The handheld/offcanvas menu reuses the same menu, plain-link styled —
   don't force the pill shape into that stacked layout, just keep it gold. */
.offcanvas-menu .psc-nav-cta > a,
.psc-handheld-footer-menu .psc-nav-cta > a{
	background:none !important;color:var(--psc-gold) !important;padding:inherit !important;
	border-radius:0;font-weight:700 !important;
}

/* ==========================================================================
   Contact page quote form rebuild (2026-09-13) — Marc: rebuild the quote
   form around the information actually needed to price an event, and give
   every field a real visible label (the old form relied on placeholder
   text alone, which disappears once someone starts typing and isn't a
   substitute for a programmatic label anyway — screen readers announced
   these as unnamed fields). Labels here are static, not floating: they
   stay visible above the field before, during, and after typing.

   The form card (`.pml-contact-form-card`, from the page's own content)
   has a light background (#f7f6f3) — a different context from the movie
   page's dark `.psc-quote-block` form, so this is its own set of rules,
   not a reuse of those dark-theme input styles.
   ========================================================================== */
.pml-contact-form-card .pml-quote-intro{
	font-size:15px;line-height:1.6;color:#444;margin:0 0 20px;
}
.pml-contact-form-card .wpcf7-form{
	display:grid;grid-template-columns:1fr 1fr;gap:0 16px;
}
.pml-contact-form-card .wpcf7-form p{margin:0 0 16px;}
.pml-contact-form-card .wpcf7-form p.pml-field-full{grid-column:1 / -1;}
.pml-contact-form-card .wpcf7-form label{
	display:block;font-size:13px;font-weight:700;color:#2a2a3a;margin:0 0 6px;
}
.pml-contact-form-card .wpcf7-form label .pml-req{color:var(--psc-purple);margin-left:2px;}
.pml-contact-form-card .wpcf7-form input[type=text],
.pml-contact-form-card .wpcf7-form input[type=email],
.pml-contact-form-card .wpcf7-form input[type=tel],
.pml-contact-form-card .wpcf7-form input[type=date],
.pml-contact-form-card .wpcf7-form input[type=number],
.pml-contact-form-card .wpcf7-form select,
.pml-contact-form-card .wpcf7-form textarea{
	width:100%;min-width:0;box-sizing:border-box;padding:11px 13px;background:#fff;border:1px solid #d8d5cc;
	border-radius:6px;color:#1a1a1a;font-family:var(--psc-font-body);font-size:15px;
}
.pml-contact-form-card .wpcf7-form select{appearance:auto;}
/* ---- iOS Safari: Event date field overflowing the grid (2026-09-22) ----
   Marc, testing on an iPhone: "the event date form is larger and pushing
   near off screen right and the more details is slightly to big." Same
   underlying bug already fixed elsewhere on this site for the homepage
   hero's date field (style.css, "Quote-bar date field on iPhone") --
   Safari renders <input type="date"> with its own native mm/dd/yyyy widget
   at an intrinsic width that ignores `width:100%`, and because .wpcf7-form
   is a two-column CSS grid, that oversized cell blows out the whole grid
   track, stretching every full-width row (including the "More details"
   accordion, grid-column:1/-1) past the viewport with it -- one root cause,
   two symptoms. -webkit-appearance:none hands sizing back to normal CSS.
   Scoped to WebKit touch devices only (desktop Safari/Chrome/Firefox all
   size this input correctly already). */
@supports (-webkit-touch-callout:none){
	.pml-contact-form-card .wpcf7-form input[type=date]{
		-webkit-appearance:none;appearance:none;display:block;min-height:24px;line-height:24px;
	}
	.pml-contact-form-card .wpcf7-form input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0;}
}
.pml-contact-form-card .wpcf7-form input:focus,
.pml-contact-form-card .wpcf7-form select:focus,
.pml-contact-form-card .wpcf7-form textarea:focus{
	outline:none;border-color:var(--psc-gold);box-shadow:0 0 0 3px rgba(201,168,76,.18);
}
.pml-contact-form-card .wpcf7-form input[type=submit]{
	width:auto;background:var(--psc-purple);color:#fff;font-weight:700;border:none;
	padding:14px 30px;cursor:pointer;border-radius:6px;font-size:15px;
}
.pml-contact-form-card .wpcf7-form input[type=submit]:hover{background:#3a0066;}
.pml-contact-form-card .wpcf7-response-output{border-radius:6px;}
@media (max-width:700px){
	.pml-contact-form-card .wpcf7-form{grid-template-columns:1fr;}
}

/* ---- Real quote-confirmation summary (2026-09-13) — replaces CF7's
   generic "Thank you for your message" with a real recap of what was
   submitted. ---- */
#psc-quote-confirmation{
	background:#fff;border:2px solid var(--psc-gold);border-radius:8px;padding:28px;
}
#psc-quote-confirmation[hidden]{display:none;}
.psc-quote-confirmation-summary{font-size:17px;font-weight:600;color:#1a1a1a;line-height:1.5;margin:0 0 12px;}
.psc-quote-confirmation-sub{font-size:14px;color:#666;margin:0;}
.psc-quote-confirmation-sub a{color:var(--psc-purple);font-weight:600;}

/* ==========================================================================
   Design-standard pass: Services/FAQ pages, blog category archive, single
   articles + sidebar (2026-09-13). Marc's audit: these were the last pages
   still on Vodi's plain white default while everything else (home, About,
   Contact, Movie Licensing, industries) uses the pml-* system. Services
   and FAQ page CONTENT were rebuilt with the same hero/section markup
   (page-content changes, not here) — this is the CSS for the pieces that
   needed new rules: the Yoast FAQ block (used by both pages, was
   completely unstyled), the new category-archive card grid, and the
   cleaned-up blog sidebar + its two new widgets.
   ========================================================================== */

/* ---- Yoast FAQ block (Services, FAQ, Movie Licensing pages) ---- */
.schema-faq{max-width:820px;margin:32px auto 0;}
.schema-faq-section{
	border:1px solid #e6e4de;border-radius:8px;padding:20px 24px;margin-bottom:14px;background:#fff;
}
.schema-faq-question{
	font-family:var(--psc-font-body);font-size:16px;font-weight:700;color:#181818;margin:0 0 10px;
	padding-left:22px;position:relative;
}
.schema-faq-question::before{content:"Q.";position:absolute;left:0;top:0;color:var(--psc-gold-dim);font-weight:700;}
/* Accordion affordances. Only applied once the script has upgraded a
   section (.psc-faq-ready), so a no-JS page keeps the plain open list and
   never shows a control that would not work. */
.psc-faq-ready .schema-faq-question{cursor:default;}
.psc-faq-toggle{
	display:flex;align-items:flex-start;gap:12px;width:100%;
	background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer;
	font:inherit;color:inherit;letter-spacing:inherit;
	/* The theme gives every <button> white-space:nowrap. Inherited here that
	   stopped the question wrapping and pushed the page to 688px inside a
	   375px viewport -- caught by re-measuring after deploy, not from the
	   markup. min-width:0 lets the text track shrink past min-content so a
	   long question wraps instead of forcing the row wider. */
	white-space:normal;min-width:0;
}
.psc-faq-chevron{
	margin-left:auto;flex:0 0 auto;width:10px;height:10px;margin-top:6px;
	border-right:2px solid var(--psc-gold-dim);border-bottom:2px solid var(--psc-gold-dim);
	transform:rotate(45deg);transition:transform .18s ease;
}
.psc-faq-ready.is-open .psc-faq-chevron{transform:rotate(-135deg);}
.psc-faq-toggle:focus-visible{outline:2px solid var(--psc-purple);outline-offset:3px;border-radius:4px;}
.psc-faq-ready .schema-faq-answer{padding-top:10px;}
@media (prefers-reduced-motion:reduce){.psc-faq-chevron{transition:none;}}
.schema-faq-answer p{font-size:14.5px;line-height:1.7;color:#555;margin:0;padding-left:22px;}

/* ---- Blog category archive card grid (category.php) ---- */
.psc-category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:24px;}
.psc-category-card{
	display:block;background:#fff;border:1px solid #e6e4de;border-radius:8px;overflow:hidden;
	transition:box-shadow .15s ease,transform .15s ease;
}
.psc-category-card:hover{box-shadow:0 10px 26px rgba(0,0,0,.08);transform:translateY(-2px);}
.psc-category-card-thumb{aspect-ratio:16/10;overflow:hidden;}
.psc-category-card-body{padding:20px 22px;}
.psc-category-card-title{font-size:17px;font-weight:700;color:#181818;margin:0 0 8px;line-height:1.35;}
.psc-category-card-date{font-size:12.5px;color:#888;margin:0 0 10px;}
.psc-category-card-excerpt{font-size:13.5px;color:#666;line-height:1.6;margin:0 0 12px;}
.psc-category-card-link{color:var(--psc-purple);font-weight:700;font-size:13px;}
@media (max-width:700px){.psc-category-grid{grid-template-columns:1fr;}}

/* ---- Blog sidebar: card-style widget chrome (category archive + single
   article — both use sidebar-blog per Vodi's vodi_get_sidebar() default)
   ---- */
/* Top-align with the article column (2026-09-22) -- Marc: the sidebar was
   "still touching the top." #secondary and #primary are flex siblings that
   start at the same Y, but the article fix above gave #primary's content
   padding-top:32px while #secondary's own content had none, so
   "Related Planning Guides" sat 32px higher than the featured image next
   to it. Matches that same value so both columns start level. */
.blog-sidebar .widget-area-inner{padding-top:32px;}
@media (max-width:767px){
	.blog-sidebar .widget-area-inner{padding-top:20px;}
}
.blog-sidebar .widget{
	background:#fff;border:1px solid #e6e4de;border-radius:8px;padding:22px 24px;margin-bottom:22px;
}
.blog-sidebar .widget-title{
	font-family:var(--psc-font-body);font-size:13px;font-weight:700;text-transform:uppercase;
	letter-spacing:1px;color:#181818;margin:0 0 16px;padding-bottom:12px;border-bottom:2px solid var(--psc-gold);
}

/* Related Planning Guides (PSC_Widget_Related_Guides) */
.psc-related-guides-list{list-style:none;margin:0;padding:0;}
.psc-related-guides-list li{border-bottom:1px solid #eee;padding:12px 0;}
.psc-related-guides-list li:last-child{border-bottom:none;padding-bottom:0;}
.psc-related-guides-list a{display:flex;align-items:center;gap:12px;}
/* Marc: the four related-guide images were "dif sizes and looks broken."
   .psc-related-guides-thumb is a <span> -- display:inline by default, which
   silently ignores width/height entirely, so instead of a uniform 56x56
   icon each one rendered at its own source image's native size. Confirmed
   live: getComputedStyle reported the declared 56px the whole time, but
   the actual box (getBoundingClientRect) was 322px, exactly matching the
   image's own intrinsic size, not the "chosen" 56px. display:block is the
   fix -- flex:0 0 56px was already correct and needed nothing else. */
.psc-related-guides-thumb{display:block;flex:0 0 80px;width:80px;height:80px;border-radius:6px;overflow:hidden;} /* 2026-09-22, Marc: "a bit bigger" (was 56px) */
.psc-related-guides-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.psc-related-guides-title{font-size:13.5px;font-weight:600;line-height:1.4;color:#181818;}
.psc-related-guides-list a:hover .psc-related-guides-title{color:var(--psc-purple);}

/* Get a Free Quote card (PSC_Widget_Quote_Card) */
.blog-sidebar .widget:has(.psc-sidebar-quote-card){
	background:var(--psc-purple);border-color:var(--psc-purple);
}
.psc-sidebar-quote-card h3{
	font-family:var(--psc-font-head);font-size:20px;letter-spacing:.4px;color:#fff;margin:0 0 10px;text-transform:uppercase;
}
.psc-sidebar-quote-card p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.82);margin:0 0 18px;}
.psc-sidebar-quote-card .pml-btn{display:block;text-align:center;padding:12px 20px;margin-bottom:12px;}
.psc-sidebar-quote-phone{display:block;text-align:center;color:#fff !important;font-weight:700;font-size:14px;}
.psc-sidebar-quote-phone:hover{color:var(--psc-gold) !important;}

/* ---- Single article: light brand pass (title already fixed to H1 in
   functions.php — the font stays the theme's own readable sans-serif on
   purpose; Bebas Neue/uppercase reads fine on short marketing headlines
   but would fight readability on a full-sentence article title). Just the
   category-label accent color and meta line, matching the rest of the
   site's purple/gold treatment. ---- */
.single-article .article__categories a{color:var(--psc-purple);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.5px;}
.single-article .article__meta{color:#888;font-size:13px;}

/* ---- Header search field — re-fixed 2026-09-19 (Marc re-reported it still
   cut off; the earlier font-size:13px pass below was not enough).

   MEASURED live rather than guessed, at 1280px (a common laptop width, and
   where Marc's screenshot reproduces exactly) -- two separate bugs, not one:

     1. The input is 190px wide with 19px of padding each side, leaving
        152px of text room for a placeholder that needs 162px -> clipped
        by 10px, which is the "Search the movie catal" Marc saw.
     2. The parent theme's 50px submit button is laid over the input's
        right edge, but padding-right is only 19px at this breakpoint (it
        is 51px at >=1400px, which is why the bug HIDES on a wide monitor).
        So the magnifier icon sat on top of the last ~33px of the text.

   Fixed by giving the field a fixed 220px footprint and reserving real room
   for the button (padding-right:50px, button pinned to the form so it no
   longer depends on the theme's per-breakpoint padding). The padding rule is
   matched THROUGH .search-form (0,3,0) on purpose: the theme's own
   `.search-form .search-field{padding:7px 19px}` has the SAME (0,2,0)
   specificity as a plain `.site-header__search .search-field` AND is ordered
   after it, so the short selector lost silently and the padding never
   applied at all -- caught only by re-measuring the DEPLOYED page instead of
   trusting the deploy.

   The placeholder itself was ALSO shortened to "Search the catalog…" in
   functions.php. That was forced, not cosmetic: keeping the full "Search
   the movie catalog…" needs a 240px field, and measuring that live showed
   it pushes the primary nav onto a SECOND ROW at 1280px. There is simply
   not room for logo (200px) + nav (630px) + a 240px field inside the
   1094px header.

   Verified on the live page at 1200/1280/1366/1440/1600: placeholder not
   clipped, submit button clear of the text, nav on a single row.
   ---- */
/* Scoped to 993-1439px ON PURPOSE. At >=1440px the parent theme already
   sizes this correctly on its own (250px field, padding 7px 51px 7px 25px,
   submit button clearing the text) -- which is exactly why the bug is
   invisible on a wide monitor and why it survived the first fix attempt.
   An earlier version of this block applied at all widths >=993px and
   actively BROKE the wide case: above 1440px the theme gives the input an
   explicit 250px width that outruns its own 233px .search-form, so pinning
   the submit button to the form's right edge parked it 47px inside the
   field, on top of the text. Leave >=1440px alone. */
@media (min-width:993px) and (max-width:1439.98px){
	/* flex-basis, not min-width: the search is a flex item whose base size
	   comes from the input's intrinsic width, so bumping padding-right from
	   19px to 50px silently grew the whole field ~27px and pushed "Get a
	   Quote" onto a second nav row. A fixed basis pins the field's footprint
	   so the padding change cannot cost the nav any room. Verified one nav
	   row at 1200/1280/1366/1440/1600. */
	.site-header__search{flex:0 0 220px;width:220px;min-width:0;}
	.site-header__search .search-form{position:relative;width:100%;}
	.site-header__search .search-submit{position:absolute;right:0;top:0;height:100%;}
	.site-header__search .search-form .search-field{
		width:100%;box-sizing:border-box;
		font-size:13px;padding-left:14px;padding-right:50px;text-overflow:ellipsis;
	}
}
/* Belt-and-braces at every width: if the field is ever narrower than its
   placeholder again (longer copy, a wider font, browser zoom), show an
   ellipsis instead of a hard mid-word cut. */
.site-header__search .search-field{text-overflow:ellipsis;}

/* ==========================================================================
   Movie shortlist (2026-09-13) — account-free "save a couple, submit with
   your quote" feature. No login, no server-side account state; everything
   lives in localStorage via shortlist.js. Deliberately NOT styled like the
   removed "+ Playlist" dropdown — this is a plain toggle button + a small
   floating tray, nothing that resembles an account feature.
   ========================================================================== */

/* -- Toggle button: grid-card version (sits beside "Watch Now") -- */
.movie-actions--link_shortlist{
	background:transparent;border:1px solid var(--psc-gold);color:var(--psc-gold);
	font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;cursor:pointer;
	transition:all .15s ease;
}
.movie-actions--link_shortlist:hover{background:var(--psc-gold);color:#11110b;}
.movie-actions--link_shortlist.is-saved{background:var(--psc-gold);color:#11110b;}

/* -- Toggle button: single-movie page version (matches the existing .psc-btn) -- */
.psc-shortlist-toggle.psc-btn.is-saved{background:var(--psc-gold);border-color:var(--psc-gold);color:#11110b;}

/* -- Floating tray -- */
/* bottom:78px, not the original 24px — real overlap Marc caught by testing:
   the theme's own jQuery "scroll to top" button (#scrollUp) is ALSO
   fixed-bottom, right:20px, 42px tall, at the theme's own bottom:20px — so
   with this tray at bottom:24px the two sat almost exactly on top of each
   other (measured both live via getBoundingClientRect before touching
   anything). 78px clears scrollUp's top edge (20+42=62px) with a clean
   16px gap. */
#psc-shortlist-tray{position:fixed;right:20px;bottom:78px;z-index:9998;font-family:var(--psc-font-body);}
@media (max-width:767px){
	/* Leaves room above the mobile sticky action bar so the two never
	   overlap — AND above #scrollUp, which the sticky-bar rule below
	   already pushes up to bottom:66px (so it spans 66–108px here);
	   122px clears that with the same 16px gap as desktop. */
	#psc-shortlist-tray{bottom:calc(122px + env(safe-area-inset-bottom, 0px));right:14px;}
}
#psc-shortlist-fab{
	display:flex;align-items:center;gap:6px;
	background:var(--psc-purple);color:#fff;border:none;border-radius:999px;
	padding:12px 16px;box-shadow:0 6px 20px rgba(0,0,0,.3);cursor:pointer;
	font-weight:700;font-size:14px;
}
#psc-shortlist-fab:hover{background:#3a0066;}
#psc-shortlist-fab-icon{color:var(--psc-gold);font-size:16px;}
#psc-shortlist-fab-count{
	background:var(--psc-gold);color:#11110b;border-radius:50%;
	width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
	font-size:12px;font-weight:700;
}
#psc-shortlist-panel{
	position:absolute;bottom:calc(100% + 12px);right:0;width:300px;max-width:calc(100vw - 40px);
	background:#fff;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.25);
	padding:16px;color:#1a1a1a;
}
#psc-shortlist-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
#psc-shortlist-panel-head h3{margin:0;font-family:var(--psc-font-head);font-size:18px;letter-spacing:.4px;color:var(--psc-purple);}
#psc-shortlist-close{background:none;border:none;font-size:22px;line-height:1;cursor:pointer;color:#888;padding:0;}
#psc-shortlist-close:hover{color:#1a1a1a;}
#psc-shortlist-empty{font-size:13px;color:#666;margin:0 0 12px;}
.psc-shortlist-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #eee;}
.psc-shortlist-item:last-child{border-bottom:none;}
.psc-shortlist-item img{border-radius:4px;object-fit:cover;flex:0 0 auto;}
.psc-shortlist-item-title{flex:1 1 auto;font-size:13px;font-weight:600;color:#1a1a1a;text-decoration:none;line-height:1.3;}
.psc-shortlist-item-title:hover{color:var(--psc-purple);}
.psc-shortlist-item-remove{background:none;border:none;font-size:18px;line-height:1;color:#999;cursor:pointer;padding:4px;flex:0 0 auto;}
.psc-shortlist-item-remove:hover{color:#c0392b;}
#psc-shortlist-actions{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.psc-shortlist-btn{
	display:block;text-align:center;padding:10px 14px;border-radius:6px;font-size:13px;font-weight:700;
	border:1px solid var(--psc-purple);color:var(--psc-purple);background:#fff;cursor:pointer;text-decoration:none;
}
.psc-shortlist-btn-primary{background:var(--psc-purple);color:#fff;}
.psc-shortlist-btn-primary:hover{background:#3a0066;color:#fff;}
.psc-shortlist-btn-primary.is-disabled{pointer-events:none;opacity:.5;}
.psc-shortlist-btn:not(.psc-shortlist-btn-primary):hover{background:#f5f0fa;}
.psc-shortlist-btn-clear{border-color:#c0392b;color:#c0392b;}
.psc-shortlist-btn-clear:hover{background:#fdecea;}
.psc-shortlist-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none;}

/* -- Toast -- */
#psc-shortlist-toast{
	position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);
	background:#1a1a1a;color:#fff;padding:12px 20px;border-radius:999px;
	font-size:13px;font-weight:600;z-index:9999;opacity:0;pointer-events:none;
	transition:opacity .2s ease,transform .2s ease;max-width:calc(100vw - 40px);text-align:center;
}
#psc-shortlist-toast.is-visible{opacity:1;transform:translate(-50%,0);}
@media (max-width:767px){
	#psc-shortlist-toast{bottom:calc(70px + env(safe-area-inset-bottom, 0px));}
}

/* ==========================================================================
   Mobile sticky action bar (2026-09-13) — "Get a Quote" + "Call Now",
   phones only. Absent entirely on desktop/tablet (no display:none removal
   needed — it's simply never shown above the breakpoint).
   ========================================================================== */
#psc-sticky-bar{display:none;}
@media (max-width:767px){
	body{padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px));}
	#psc-sticky-bar{
		display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9997;
		background:#fff;border-top:1px solid #e0ddd4;
		box-shadow:0 -4px 16px rgba(0,0,0,.08);
		padding:8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
		gap:10px;transition:transform .18s ease;
	}
	#psc-sticky-bar.is-hidden{transform:translateY(100%);}
	#psc-sticky-bar a{
		flex:1 1 50%;display:flex;align-items:center;justify-content:center;gap:6px;
		height:40px;border-radius:8px;font-family:var(--psc-font-body);font-weight:700;font-size:14px;
		text-decoration:none;
	}
	#psc-sticky-quote{background:var(--psc-gold);color:#11110b;}
	#psc-sticky-call{background:var(--psc-purple);color:#fff;}
	/* The pre-existing jQuery "scroll to top" button is also fixed-bottom —
	   raise it above the new bar so the two don't stack on top of each other. */
	#scrollUp{bottom:calc(66px + env(safe-area-inset-bottom, 0px)) !important;}
}

/* ==========================================================================
   Event Readiness Checklist (2026-09-13) — Resource Hub, last of Marc's
   4-item enhancement list. Plain checkboxes + real label text, state kept
   in localStorage (same account-free pattern as the shortlist).
   ========================================================================== */
.psc-checklist-item{border-bottom:1px solid #ececec;}
.psc-checklist-item:last-child{border-bottom:none;}
.psc-checklist-item label{
	display:flex;align-items:flex-start;gap:14px;padding:16px 4px;cursor:pointer;
}
.psc-checklist-item input[type=checkbox]{
	width:22px;height:22px;flex:0 0 auto;margin-top:2px;accent-color:var(--psc-purple);cursor:pointer;
}
.psc-checklist-item-body{display:flex;flex-direction:column;gap:2px;}
.psc-checklist-item-body strong{font-size:15px;color:#1a1a1a;}
.psc-checklist-item-body span{font-size:13.5px;color:#666;line-height:1.5;}
.psc-checklist-item-body a{color:var(--psc-purple);font-weight:600;}
.psc-checklist-item input[type=checkbox]:checked ~ .psc-checklist-item-body strong{
	text-decoration:line-through;color:#999;
}

/* Print: show ONLY the checklist section (classic "isolate one element for
   print" pattern) — hides the site header/footer, sticky bar, shortlist
   tray, and every other Resource Hub section, so what actually prints is
   a clean, usable page a visitor can walk the site with, not a cropped
   screenshot of the whole page. */
@media print{
	body *{visibility:hidden;}
	#psc-checklist-section, #psc-checklist-section *{visibility:visible;}
	#psc-checklist-section{position:absolute;left:0;top:0;width:100%;padding:20px;}
	#psc-checklist-progress-wrap, #psc-sticky-bar, #psc-shortlist-tray, #psc-shortlist-toast{display:none !important;}
	#psc-checklist-print-footer{display:block !important;}
	.psc-checklist-item-body span{color:#333;}
}

/* ==========================================================================
   Poster-corner shortlist star (2026-09-13) — see the PHP comment in
   functions.php (psc_shortlist_star_button / the masvideos_before_movies_
   loop_item hook) for why this exists: .movie__actions (the old shortlist
   entry point) is display:none in grid view with no hover-reveal, so grid
   view had no way to shortlist without opening the movie. This sits on the
   poster itself instead, everywhere a poster renders as a card: the
   /movies/ catalog (both view modes), homepage movie-pick rows, industry
   "Popular Picks," and Top Movie Picks.
   ========================================================================== */
.psc-movie-card-poster{position:relative;}
.psc-poster-star{
	position:absolute;bottom:8px;right:8px;z-index:5;
	width:32px;height:32px;border-radius:50%;
	background:rgba(10,10,18,.72);border:1px solid rgba(255,255,255,.3);
	display:flex;align-items:center;justify-content:center;
	color:rgba(255,255,255,.9);font-size:16px;line-height:1;cursor:pointer;
	opacity:0;transform:scale(.85);
	transition:opacity .15s ease,transform .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease;
}
/* Revealed on hover/keyboard-focus of the card — .movie is the MasVideos
   catalog card, .psc-movie-card is every custom homepage/industry/top-picks
   card. Always shown once saved, regardless of hover, so the state is
   visible without having to hover to check. */
.movie:hover .psc-poster-star,.movie:focus-within .psc-poster-star,
.psc-movie-card:hover .psc-poster-star,.psc-movie-card:focus-within .psc-poster-star,
.psc-related-card:hover .psc-poster-star,.psc-related-card:focus-within .psc-poster-star,
.psc-poster-star.is-saved{
	opacity:1;transform:scale(1);
}
.psc-poster-star:hover{background:var(--psc-gold);border-color:var(--psc-gold);color:#11110b;}
.psc-poster-star.is-saved{background:var(--psc-gold);border-color:var(--psc-gold);color:#11110b;}
/* Touch devices can't hover — show it at rest (slightly dimmer) instead of
   making it undiscoverable/untappable. */
@media (hover:none){
	.psc-poster-star{opacity:.85;transform:scale(1);}
	.psc-poster-star.is-saved{opacity:1;}
}

/* ==========================================================================
   "Recently Viewed Movies" (2026-09-13). Both places this renders — the
   /movies/ archive and the single-movie page — use the same dark theme
   (.psc-movie / the archive's own dark background), so one set of colors
   covers both; no light-context variant needed like the Contact form.
   ========================================================================== */
.psc-recently-viewed{max-width:1180px;margin:0 auto 28px;padding:0 24px;}
.psc-recently-viewed-title{
	font-family:var(--psc-font-head);font-size:20px;letter-spacing:.4px;color:#fff;
	margin:0 0 14px;text-transform:uppercase;
}
.psc-recently-viewed-row{display:flex;gap:14px;overflow-x:auto;padding-bottom:4px;}
.psc-recently-viewed-card{
	flex:0 0 110px;display:flex;flex-direction:column;gap:6px;text-decoration:none;
}
.psc-recently-viewed-card img{
	width:110px;height:165px;object-fit:cover;border-radius:var(--psc-radius);
	border:1px solid var(--psc-border);transition:border-color .15s ease;
}
.psc-recently-viewed-card:hover img{border-color:var(--psc-gold);}
.psc-recently-viewed-card-title{
	font-size:12px;color:var(--psc-text-dim);line-height:1.3;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.psc-recently-viewed-card:hover .psc-recently-viewed-card-title{color:var(--psc-gold);}

/* ---- Seasonal campaign pages (Halloween / Holiday / Winter / Summer) ----
   2026-09-19. Marc: "this page could use a hero image it could maybe use an
   overall styling update the movie posters just don't look right you can't
   see the titles ... I feel like the browse full catalog link needs to be a
   button."

   The unreadable titles were the headline bug and the cause is worth stating
   plainly: the plugin's `.pscs-card-title` is #e7e7ee, which is correct
   inside the dark `.pscs-band` it was designed for on the homepage. These
   campaign pages reuse the same card markup on a plain WHITE page, so the
   same declaration measured **1.23:1** — effectively invisible, which is
   exactly what Marc saw.

   Recolouring the text would have fixed the symptom on one page and left the
   component inconsistent. Giving the page the dark ground the component was
   built for fixes the contrast AND is the "styling update" he asked for, so
   the page finally matches the rest of the site instead of looking like a
   different website.

   Scoped to .psc-campaign-page throughout: the plugin's own homepage band
   must keep its existing styling untouched. ---- */
.psc-campaign-page .site-content,
.psc-campaign-page .site-content__inner,
.psc-campaign-page #content{background:var(--psc-bg);}

.psc-campaign-hero{
	width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
	background-size:cover;background-position:center;background-repeat:no-repeat;
	padding:78px 0 64px;text-align:center;
}
.psc-campaign-hero--noimage{
	background:
		radial-gradient(circle at 18% 20%, rgba(138,77,255,.28), transparent 55%),
		radial-gradient(circle at 82% 80%, rgba(201,168,76,.2), transparent 55%),
		linear-gradient(180deg,#0d0d16 0%, var(--psc-bg) 100%);
}
.psc-campaign-hero-inner{max-width:760px;}
.psc-campaign-hero .psc-home-sub{margin:0 auto 24px;max-width:600px;}
@media (max-width:767px){
	.psc-campaign-hero{padding:52px 0 44px;}
}

/* ---- Body copy on the new dark ground ---- */
.psc-campaign-body{padding-top:44px;}
.psc-campaign-body h2{
	font-family:var(--psc-font-head);font-size:26px;letter-spacing:.5px;
	text-transform:uppercase;color:var(--psc-text);margin:38px 0 14px;
}
.psc-campaign-body h2:first-child{margin-top:0;}
.psc-campaign-body p{font-size:15.5px;line-height:1.75;color:var(--psc-text-dim);margin:0 0 16px;}
.psc-campaign-body ul{margin:0 0 20px;padding-left:20px;}
.psc-campaign-body li{font-size:15.5px;line-height:1.7;color:var(--psc-text-dim);margin-bottom:8px;}
.psc-campaign-body strong{color:var(--psc-text);}
.psc-campaign-body a:not(.psc-btn){color:var(--psc-gold);}
.psc-campaign-body a:not(.psc-btn):hover{color:var(--psc-gold-dim);}

/* ---- The movie cards, now on the ground they were designed for ----
   The titles need no colour override at all once the page is dark; they are
   only nudged up in size, because 13px was set for a compact homepage row
   rather than a page where these are the main content. */
.psc-campaign-page .pscs-card-title{font-size:14px;line-height:1.4;}
.psc-campaign-page .pscs-card-art{border-radius:10px;}
.psc-campaign-page .pscs-cards{gap:20px;}
.psc-campaign-page .pscs-row-note{color:var(--psc-text-dim);}

/* ---- "Browse the full catalog" as a real button (Marc's ask) ----
   The plugin renders it as a bare link inside .pscs-row-more, so this
   promotes it rather than needing a plugin change. */
.psc-campaign-page .pscs-row-more{margin:26px 0 0;}
.psc-campaign-page .pscs-row-more a{
	display:inline-flex;align-items:center;gap:8px;
	padding:13px 26px;border-radius:999px;
	background:var(--psc-gold);color:#11110b;
	font-weight:700;font-size:14.5px;text-decoration:none;
	border:1px solid var(--psc-gold);transition:all .15s ease;
}
.psc-campaign-page .pscs-row-more a:hover{
	background:var(--psc-gold-dim);border-color:var(--psc-gold-dim);color:#11110b;
}
.psc-campaign-page .pscs-row-more a:focus-visible{outline:2px solid #fff;outline-offset:2px;}


/* ==========================================================================
   The white strip above the footer (2026-09-20).

   Marc: "can you remove that white bar above the footer" -- on About, then
   Services, then the Resource Hub. Same cause on all of them, and on Movie
   Licensing and Contact too.

   Vodi gives `.page__content` a 40px bottom margin. Nothing between it and
   the footer has padding or a border, so that margin COLLAPSES straight out
   through `article` and `#main` -- which is why it reads as 0px on every
   element you inspect, while `#primary` is still 40px taller than `#main`.
   It was invisible while pages ended in body-coloured text. Now that every
   page ends in a full-bleed coloured section sitting directly above the dark
   footer, it shows as a 40px band of page background.

   Zeroed only where the page ends in a `<section>`, which is exactly the
   designed pages -- those sections carry their own generous bottom padding
   (the CTA has 64px), so nothing ends up cramped. A page ending in ordinary
   text keeps the 40px, because there it is doing real work.

   `:has()` is the honest way to say "only when it ends in a section". Where
   it is unsupported the rule is simply skipped and the old spacing stands,
   which is the current behaviour rather than a broken one.
   ========================================================================== */

.page__content:has( > section:last-child ){
	margin-bottom:0;
}

/* ==========================================================================
   2026-09-20 site-test pass, item 4: mobile accessibility + forms.
   ========================================================================== */

/* Header search toggle was an ~18x27px target; the hamburger already clears
   44px. Same hit area on every viewport, icon stays visually the same size. */
.site-header__search .dropdown-toggle{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:44px;min-height:44px;
}
.site-header__offcanvas--toggler:focus-visible,
.site-header__search .dropdown-toggle:focus-visible{
	outline:2px solid var(--psc-gold);outline-offset:2px;
}

/* Movie-page quote form: every field now has a visible label (was
   placeholder-only), styled for the dark block it sits in. */
.psc-quote-block .wpcf7-form label{
	display:block;font-size:13px;font-weight:700;color:var(--psc-text);margin:0 0 6px;
}
.psc-quote-block .wpcf7-form label .pml-req{color:var(--psc-gold);margin-left:2px;}
.psc-quote-block .wpcf7-form input::placeholder,
.psc-quote-block .wpcf7-form textarea::placeholder{color:var(--psc-text-dim);opacity:.8;}

/* Contact form: required questions in two labelled groups, the rest folded
   into one "More details" disclosure. */
.pml-contact-form-card .pml-fs{
	grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin:0 0 6px;min-width:0;
}
.pml-contact-form-card .pml-fs-title{
	grid-column:1 / -1;margin:6px 0 14px;padding-bottom:8px;border-bottom:1px solid #e6e4de;
	font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--psc-gold-dim);
}
.pml-contact-form-card details.pml-optional{
	grid-column:1 / -1;margin:0 0 18px;background:#fff;border:1px solid #d8d5cc;border-radius:8px;
}
.pml-contact-form-card details.pml-optional > summary{
	display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 16px;
	cursor:pointer;list-style:none;font-size:14px;font-weight:700;color:#2a2a3a;
}
.pml-contact-form-card details.pml-optional > summary::-webkit-details-marker{display:none;}
.pml-contact-form-card details.pml-optional > summary small{display:block;font-weight:400;font-size:12.5px;color:#666;margin-top:2px;}
.pml-contact-form-card details.pml-optional > summary::after{
	content:'+';flex-shrink:0;font-size:22px;font-weight:400;line-height:1;color:var(--psc-purple);
}
.pml-contact-form-card details.pml-optional[open] > summary::after{content:'\2212';}
.pml-contact-form-card details.pml-optional > summary:focus-visible{outline:2px solid var(--psc-purple);outline-offset:2px;}
.pml-contact-form-card .pml-optional-body{padding:6px 16px 2px;border-top:1px solid #e6e4de;}
.pml-contact-form-card .pml-optional-body p{margin:14px 0 0;}
.pml-contact-form-card .pml-optional-body p:last-child{margin-bottom:14px;}
.pml-contact-form-card .pml-group-label{display:block;font-size:13px;font-weight:700;color:#2a2a3a;margin:0 0 6px;}
.pml-contact-form-card .wpcf7-checkbox{display:block;}
.pml-contact-form-card .wpcf7-list-item{display:block;margin:0;}
.pml-contact-form-card .wpcf7-list-item label{
	display:flex;align-items:center;gap:10px;min-height:44px;margin:0;font-weight:400;font-size:14.5px;cursor:pointer;
}
.pml-contact-form-card .wpcf7-list-item input[type=checkbox]{width:20px;height:20px;margin:0;flex-shrink:0;accent-color:var(--psc-purple);}

@media (max-width:700px){
	.pml-contact-form-card .pml-fs{grid-template-columns:1fr;}
	/* The card sat inside the page gutter AND had its own 32px padding, which
	   left the fields ~278px wide on a 390px phone. Let it run edge to edge
	   (cancelling the 24px page gutter) with a 16px inner padding instead:
	   fields are now ~358px wide. The inline padding on the card needs !important. */
	.pml-contact-grid > .pml-contact-form-card{
		margin-left:-24px;margin-right:-24px;padding:22px 16px !important;border-radius:0 !important;
	}
	.pml-contact-form-card .wpcf7-form input[type=submit]{width:100%;}
}

/* CF7 auto-paragraphing leaves a <br> after each block label, doubling the gap
   between label and field (~20px of dead space per field on a phone). */
.pml-contact-form-card .wpcf7-form label + br,
.psc-quote-block .wpcf7-form label + br,
.pml-contact-form-card .pml-group-label + br{display:none;}

/* ==========================================================================
   2026-09-20 site-test pass, item 5: catalog easier to scan.
   ========================================================================== */

/* Card caption (title, year, rating) under each poster. The parent theme hides
   the card body on phones, so this shows only there; on wider screens the
   parent's own body already shows a title. */
.psc-card-caption{display:none;}
@media (max-width:767.98px){
	.movies .movie .psc-card-caption{display:block;padding:8px 0 0;}
	.psc-card-caption-title{
		display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
		font-size:13px;font-weight:600;line-height:1.25;color:#fff;
	}
	.psc-card-caption-meta{display:block;margin-top:2px;font-size:12px;line-height:1.2;color:var(--psc-text-dim);}
}

/* Filter labels: the parent theme sets word-break:break-all on every filter
   link, which split "Documentary" mid-word in the narrow two-column list. The
   newer filters were already overridden; the genre and rating lists were not. */
.sidebar-area .masvideos-movies-filter-widget .masvideos-widget-movies-layered-nav-list__item a{
	word-break:normal !important;overflow-wrap:normal !important;
}
@media (max-width:480px){
	.sidebar-area .masvideos-movies-filter-widget .masvideos-widget-movies-layered-nav-list{column-gap:6px;}
	.sidebar-area .masvideos-movies-filter-widget .masvideos-widget-movies-layered-nav-list__item a{font-size:14px;}
}
@media (max-width:359px){
	.sidebar-area .masvideos-movies-filter-widget .masvideos-widget-movies-layered-nav-list{column-count:1 !important;}
}

/* "More filters" group (catalog-filters.js). */
.psc-more-filters{margin:10px 0 0;border-top:1px solid var(--psc-border);}
.psc-more-filters > summary{
	display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:10px 0;
	cursor:pointer;list-style:none;font-size:16px;font-weight:700;color:var(--psc-gold);
}
.psc-more-filters > summary::-webkit-details-marker{display:none;}
.psc-more-filters > summary small{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--psc-text-dim);}
.psc-more-filters > summary::after{content:'+';flex-shrink:0;font-size:24px;font-weight:400;line-height:1;}
.psc-more-filters[open] > summary::after{content:'\2212';}
.psc-more-filters > summary:focus-visible{outline:2px solid var(--psc-gold);outline-offset:2px;}

/* ==========================================================================
   2026-09-20 site-test pass, item 6: shorter homepage on a phone.
   At 390px the page was ~15,600px tall. Poster rows are cut to six titles in
   front-page.php; these rules take the rest of the height out of the
   sections that stack three or four cards.
   ========================================================================== */
.psc-home-block-cta--pair{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}

@media (max-width:860px){
	/* Three reviews as one swipeable row instead of three stacked cards. */
	.psc-review-grid{
		display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;
		scroll-snap-type:x mandatory;padding-bottom:14px;-webkit-overflow-scrolling:touch;
	}
	.psc-review-card{flex:0 0 86%;scroll-snap-align:center;}
	.psc-review-grid:focus-visible{outline:2px solid var(--psc-gold);outline-offset:4px;}
}
@media (max-width:600px){
	.psc-industries-grid{grid-template-columns:1fr 1fr;gap:10px;}
	.psc-industry-tile{padding:14px 12px;font-size:14px;}
	/* The two newest articles are enough on a phone; "View All Articles" is right below. */
	.psc-blog-grid .psc-blog-card:nth-child(n+3){display:none;}
}

/* ==========================================================================
   2026-09-22 site QA review — immediate fixes.
   ========================================================================== */

/* Every template was 15px wider than the screen: .site-content__inner is a
   Bootstrap .row (-15px side margins) inside a zero-padding container, and
   .pml-hero is 100vw. `clip` stops the sideways scroll without creating a
   scroll container, so sticky elements inside keep working. */
.site-content{overflow-x:clip;}

/* Skip link — hidden until focused. */
.psc-skip-link{
	position:absolute;left:12px;top:-60px;z-index:100000;
	background:var(--psc-purple);color:#fff;font-weight:700;
	padding:10px 16px;border-radius:6px;text-decoration:none;
}
.psc-skip-link:focus{top:12px;color:#fff;outline:3px solid var(--psc-gold);outline-offset:2px;}

/* Contrast (axe, 2026-09-22). Gold eyebrows on the white/cream bands were
   3.39:1 at 12px; #7d621a is 5.6:1 on white. Dark bands keep the lighter gold. */
.pml-section:not(.pml-cta) .pml-eyebrow,
.pml-contact-form-card .pml-fs-title{color:#7d621a;}
.psc-quote-field label{color:#5f5f5f;}
.psc-catalog-search-wrap .psc-catalog-search-input::placeholder{color:var(--psc-text-dim);opacity:1;}
.site-footer .site-info a.psc-built-by-link{color:#b9bdc8;}
.psc-footer-ip{opacity:.9;}

/* Movie-page quote form now uses the Contact form inside the same card. */
.psc-quote-block .psc-movie-quote-card{background:#fff;color:#2a2a3a;border-radius:12px;padding:24px;margin-top:12px;}
.psc-quote-block .psc-movie-quote-card .wpcf7-form label{color:#2a2a3a;}

@media (max-width:767px){
	/* iOS Safari zooms the page when a field under 16px gets focus. */
	.wpcf7-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),
	.wpcf7-form select,
	.wpcf7-form textarea,
	.psc-quote-field select,
	.psc-quote-field input,
	.psc-catalog-search-wrap .psc-catalog-search-input,
	.site-header__search .search-field{font-size:16px;}

	/* Contact: the form was ~1,200px down on a phone. Shorter hero, and the
	   form card ahead of "Quick ways to reach us". */
	.pml-hero{padding:44px 0 32px;}
	.pml-contact-grid > .pml-contact-form-card{order:-1;}

	/* Movie grids ran past both screen edges (-7px row margin, no gutter). */
	body.archive .content-area,
	body.search .content-area{padding-left:31px;padding-right:31px;}

	/* The movie-page card must not use the Contact page's -24px bleed. */
	.psc-quote-block .psc-movie-quote-card{margin-left:0 !important;margin-right:0 !important;padding:20px 16px !important;border-radius:10px !important;}

	/* Cookie notice sat on top of the sticky Get a Quote / Call Now bar. */
	.scn--left,.scn--right{bottom:69px !important;}
}

/* Phone/tablet header was 120px tall (logo capped at 100px) — a third of a
   landscape screen. */
@media (max-width:1199.98px){
	header.handheld-header .site-header__logo .custom-logo{max-height:56px;}
	header.handheld-header.psc-nav-shrunk .site-header__logo .custom-logo{max-height:44px;}
}
/* Movie-page card: CF7's size="40" gave the fields a min-content width wider
   than a phone-width card; let the grid and the fields shrink. */
.psc-movie-quote-card .pml-fs,
.psc-movie-quote-card .wpcf7-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
@media (max-width:700px){
	.psc-movie-quote-card .pml-fs,
	.psc-movie-quote-card .wpcf7-form{grid-template-columns:minmax(0,1fr);}
}
.psc-movie-quote-card .wpcf7-form input:not([type=checkbox]):not([type=radio]),
.psc-movie-quote-card .wpcf7-form select,
.psc-movie-quote-card .wpcf7-form textarea{width:100%;max-width:100%;min-width:0;box-sizing:border-box;}
.psc-movie-quote-card .wpcf7-form-control-wrap{display:block;min-width:0;}
/* The parent's .search-field color (#495057) out-ranked ours, so typed text
   in the catalog search was 2.2:1 on the dark bar. */
.psc-catalog-search-wrap input.psc-catalog-search-input{color:var(--psc-text);}
/* Long submit label was clipped on phones. */
.pml-contact-form-card .wpcf7-form input[type=submit]{white-space:normal;height:auto;line-height:1.3;padding-top:14px;padding-bottom:14px;}
/* Movie grids: the row's -15px margin pushed the last column (and the sort
   control) past the right edge once the sideways scroll was clipped. */
body.archive .content-area,
body.search .content-area{padding-right:31px;}

/* ---- Movies-page search as an icon in the heading row (2026-09-22, Marc).
   The script in functions.php moves .psc-catalog-toolbar and the search
   form into .page-header and adds .psc-has-cat-search; without JS none of
   this applies and the bar stays open above the heading. ---- */
.page-header.psc-has-cat-search{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.page-header.psc-has-cat-search .page-title{flex:1 1 auto;min-width:0;}
.page-header.psc-has-cat-search .psc-catalog-toolbar{margin:0;gap:10px;flex:0 0 auto;flex-wrap:nowrap;}
.psc-cat-search-toggle{
	display:inline-flex;align-items:center;justify-content:center;
	width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
	background:transparent;color:var(--psc-text);border:1px solid var(--psc-border);
	transition:border-color .15s ease,color .15s ease;
}
.psc-cat-search-toggle:hover,
.psc-cat-search-toggle[aria-expanded="true"]{border-color:var(--psc-gold);color:var(--psc-gold);}
.psc-cat-search-toggle:focus-visible,
.psc-cat-search-close:focus-visible{outline:2px solid var(--psc-gold);outline-offset:2px;}
.page-header.psc-has-cat-search .psc-cat-search-panel{flex:1 1 100%;display:none;margin:2px 0 10px;}
.page-header.psc-has-cat-search .psc-cat-search-panel.is-open{display:block;}
.psc-cat-search-panel .psc-catalog-search-wrap{max-width:none;flex:none;}
.psc-cat-search-close{
	flex:0 0 auto;width:36px;height:36px;padding:0;border:none;border-radius:50%;
	background:transparent;color:var(--psc-text-dim);font-size:24px;line-height:1;cursor:pointer;
}
.psc-cat-search-close:hover{color:var(--psc-gold);}
/* Heading rule spans the whole row (title + icon, and the open bar). */
.page-header.psc-has-cat-search{border-bottom:1px solid rgb(42,46,60);padding-bottom:12px;}
.page-header.psc-has-cat-search .page-title{border-bottom:0;padding-bottom:0;margin-bottom:0;}
/* One clean field inside the bar: no inner box, no second (browser) clear button. */
.psc-cat-search-panel .psc-catalog-search-wrap input.psc-catalog-search-input{
	border:0;background:transparent;box-shadow:none;outline:none;padding:6px 0;height:auto;
}
.psc-cat-search-panel .psc-catalog-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none;}
#primary .page-header.psc-has-cat-search .page-title{border-bottom:0;padding-bottom:0;margin-bottom:0;}
#primary .psc-cat-search-panel .psc-catalog-search-wrap input.psc-catalog-search-input,
#primary .psc-cat-search-panel .psc-catalog-search-wrap input.psc-catalog-search-input:focus{background:transparent;border:0;box-shadow:none;outline:none;}

/* ==========================================================================
   Recently Viewed = Related Titles look (2026-09-22, Marc: "the recently
   viewed section is small"). recently-viewed.js now outputs the Related
   Titles heading/card/title classes; this sets the same tile width (6 across,
   3 at <=900px, 2 at <=520px, 18px gap) and lets extra titles scroll sideways.
   ========================================================================== */
.psc-recently-viewed{max-width:none;margin:0 0 36px;padding:0;}
.psc-wrap > .psc-recently-viewed{margin-top:36px;}
.psc-rv-row{
	display:grid;grid-auto-flow:column;gap:18px;
	grid-auto-columns:calc((100% - 5 * 18px) / 6);
	overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
	padding:4px 0 14px;
}
.psc-rv-row > .psc-related-card{scroll-snap-align:start;min-width:0;}
.psc-rv-row .psc-related-card img{display:block;}
@media (max-width:900px){.psc-rv-row{grid-auto-columns:calc((100% - 2 * 18px) / 3);}}
@media (max-width:520px){.psc-rv-row{grid-auto-columns:calc((100% - 18px) / 2);}}

/* ==========================================================================
   Branded scrollbars, site-wide (2026-09-22, Marc: "drop the standard gray").
   Gold thumb on a dark track everywhere something scrolls: the page itself,
   Recently Viewed, search dropdowns, the shortlist tray, filter drawer,
   promo-builder lists, text areas. scrollbar-color covers Chrome/Edge 121+
   and Firefox; the ::-webkit-scrollbar rules cover Safari (Chrome ignores
   them once scrollbar-color is set). The simplebar menu drawer draws its
   own bar, styled at the end.
   ========================================================================== */
html{scrollbar-color:var(--psc-gold-dim) #0d0d16;}
*{scrollbar-width:thin;scrollbar-color:var(--psc-gold-dim) rgba(255,255,255,.06);}
*:hover{scrollbar-color:var(--psc-gold) rgba(255,255,255,.08);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:999px;}
::-webkit-scrollbar-thumb{background:var(--psc-gold-dim);border-radius:999px;border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background-color:var(--psc-gold);}
::-webkit-scrollbar-corner{background:transparent;}
/* Light surfaces (form cards, white dropdowns) get a light track. */
.pml-contact-form-card,.pml-contact-form-card *{scrollbar-color:var(--psc-gold-dim) #eeeae0;}
.simplebar-scrollbar::before{background:var(--psc-gold-dim) !important;opacity:.9 !important;border-radius:999px;}
.simplebar-track{background:transparent !important;}

/* ---- Collapsible filter sidebar on desktop/tablet (2026-09-22) ----
   Marc: "the filter is always open on the left-hand side... I want it to
   be collapsible... that will improve the desktop tablet view." Below
   1200px the sidebar is already a MasVideos/parent-theme off-canvas drawer
   (position:fixed, opened by .active-hh-sidebar on .site-content) with its
   own "Filters" toggle button and the .psc-sidebar-close X built above --
   that already works. At 1200px and up the sidebar sits in normal flow
   (#secondary/#primary side by side in a flex row) and MasVideos itself
   hides the toggle button there (masvideos.css, @media max-width:1199.98px),
   so there was no way to close it. This reuses the exact same class and
   button rather than building a second mechanism: closed by default
   (matches .active-hh-sidebar's own default-off state below 1200px), and
   the existing X button (line ~1400 above) already targets any ancestor
   carrying .active-hh-sidebar, so it needs no changes to work here too.
   Measured live before writing this: #secondary and #primary are flex
   children of .site-content__inner (flex-basis ~24.44%/75.56%) -- hiding
   #secondary and giving #primary flex:0 0 100% reflows the grid to use the
   freed width with no gap, confirmed at 1400px in the browser pane. */
@media (min-width:1200px){
	body.masvideos-archive .handheld-sidebar-toggle{display:inline-flex !important;}
	body.masvideos-archive .site-content:not(.active-hh-sidebar) #secondary{display:none;}
	body.masvideos-archive .site-content:not(.active-hh-sidebar) #primary{
		flex:0 0 100% !important;max-width:100% !important;
	}
}
/* Marc, 2026-09-22, after seeing this collapsed: "the site isn't touching
   the sides... the movie posters feel huge." Root cause: #primary had never
   needed its own max-width before -- the sidebar's ~24% share of the row
   always kept it roughly in line with the header/footer's own container,
   which caps at 1170/1440/1486px (parent theme's style.css, Bootstrap-style
   .container-fluid breakpoints). Collapsing the sidebar let #primary run to
   the raw (uncapped) width of .site-content instead, so on a wide monitor
   the whole grid -- and every poster in its fixed 6-column layout -- simply
   scaled up with it. Giving #primary that same breakpoint table when
   collapsed restores the header/footer's own edges instead of inventing a
   new one; max-width still applies to a flex item sized by flex-basis (only
   the plain `width` property is ignored there), and auto margins center a
   flex item along the row axis, so this needed no other structural change. */
/* Scoped to body.masvideos-archive (catalog, genre/season pages, movie search)
   on 2026-09-22: unscoped, this block and the one above applied to every
   page -- the homepage lost its edge-to-edge sections (#primary capped at
   1486px) and blog category/post pages lost their sidebar. */
@media (min-width:1200px) and (max-width:1439.98px){
	body.masvideos-archive .site-content:not(.active-hh-sidebar) #primary{max-width:1170px !important;margin-left:auto !important;margin-right:auto !important;padding-left:24px;padding-right:24px;}
}
@media (min-width:1440px) and (max-width:1485.98px){
	body.masvideos-archive .site-content:not(.active-hh-sidebar) #primary{max-width:1440px !important;margin-left:auto !important;margin-right:auto !important;padding-left:24px;padding-right:24px;}
}
@media (min-width:1486px){
	body.masvideos-archive .site-content:not(.active-hh-sidebar) #primary{max-width:1486px !important;margin-left:auto !important;margin-right:auto !important;padding-left:24px;padding-right:24px;}
}

/* ---- Checkbox toggles for the five discovery filters (2026-09-22) ----
   Marc: "I want to be able to click the filters that I want and then hit
   submit," instead of each click reloading the page. filter-select.js
   turns .chosen on/off on click instead of navigating. Scoped to
   [data-psc-filter] links only -- Categories (genre) and Year keep their
   original instant-navigate behaviour (they still combine with whatever
   these five have applied, since a genre click just adds its own query
   arg to the same URL).

   No box styling here any more (2026-09-22 second pass) -- Marc: "I want
   the check boxes to all match the ones like categories, that bold white
   box." That box is MasVideos' own native checkbox sprite
   (.sidebar-area .masvideos-movies-filter-widget ... a:before), already
   applied to every filter widget including these five; a custom box drawn
   on top of it here was what caused the original "extra space" bug (see
   below) and never looked identical to genre's anyway. Removed entirely --
   these five now render the exact same box genre always has, no CSS
   needed for it.

   ---- Chosen (and hover) state: gold everywhere (2026-09-22) ----
   Marc: "I want all checkboxes to be gold like the NR box when checked...
   merging both." And separately: "the text in the filter when you hover
   turns dark purple and you cant read the text" -- that purple
   (rgb(75,0,130)) is the site-wide default <a> color (global styles); the
   widget CSS overrides it to a light grey for the normal state but never
   for :hover or .chosen, so both fell through to that default, illegible
   on this dark background. Both fixed together, and scoped to every
   filter widget in the sidebar -- not just the five -- so Categories/genre
   gets the same gold check this time instead of its native purple.

   Fixed 2026-09-22, third pass (Marc: "gold box now huge and not like a
   square"): the native base rule's padding-right:30px (it reserves that
   space for the label text next to an 18px icon) was never reset by
   MasVideos' own .chosen override either, so with box-sizing:border-box
   that padding ate into the box and widened it to 30px. padding-right:0
   restores a clean 18x18 square.

   Fixed 2026-09-22, fourth pass (Marc: "it pulls the text... over to the
   left and has it touching the box... the text should not move"): that
   same padding-right:30px was doing double duty on the UNCHECKED box too
   -- 18px of it is the icon, the other 12px is the gap to the label --
   zeroing it out for .chosen removed the gap along with the box's own
   bloat, so the label visibly jumped left the instant a box was checked.
   margin-right:12px puts that 12px back as space AFTER the box instead of
   padding INSIDE it, so the label sits at the same spot checked or not. */
.sidebar-area .masvideos-movies-filter-widget .masvideos-widget-movies-layered-nav-list__item a:hover,
.sidebar-area .masvideos-movies-filter-widget .masvideos-widget-movies-layered-nav-list__item.chosen a,
.sidebar-area .masvideos-movies-filter-widget .masvideos-widget-videos-layered-nav-list__item a:hover,
.sidebar-area .masvideos-movies-filter-widget .masvideos-widget-videos-layered-nav-list__item.chosen a,
.sidebar-area .masvideos-movies-filter-widget .masvideos-widget-tv-shows-layered-nav-list__item a:hover,
.sidebar-area .masvideos-movies-filter-widget .masvideos-widget-tv-shows-layered-nav-list__item.chosen a{
	color:var(--psc-gold) !important;
}
.sidebar-area .masvideos-movies-filter-widget .masvideos-widget-movies-layered-nav-list__item.chosen a:before,
.sidebar-area .masvideos-movies-filter-widget .masvideos-widget-videos-layered-nav-list__item.chosen a:before,
.sidebar-area .masvideos-movies-filter-widget .masvideos-widget-tv-shows-layered-nav-list__item.chosen a:before{
	background-color:var(--psc-gold) !important;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.5l3 3 6-6.5' fill='none' stroke='%2312121c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat:no-repeat !important;background-position:center !important;
	padding-right:0 !important;
	margin-right:12px !important;
	border-radius:3px;
}
.psc-filter-submit{
	display:block;width:100%;margin:22px 0 4px;padding:12px 16px;
	background:var(--psc-purple);border:1px solid var(--psc-purple);
	color:#fff;font-weight:700;letter-spacing:.3px;font-size:14px;
	border-radius:8px;cursor:pointer;font-family:inherit;min-height:44px;
}
.psc-filter-submit:hover,.psc-filter-submit:focus{background:#3a0066;border-color:#3a0066;}
.psc-filter-submit:focus-visible{outline:2px solid var(--psc-gold);outline-offset:2px;}

/* ---- Quote-bar date field on iPhone (2026-09-22) ----
   Marc: on mobile the "When?" field showed no mm/dd/yyyy, just black.
   Two causes: (1) the site is a dark theme, so iOS drew the native date
   control dark on this white bar -- color-scheme:light makes the bar's
   native controls (date picker, select arrows) render light; (2) iOS
   Safari never shows a format hint in an empty date field, so the
   field gets its own hint via data-placeholder while the psc-date-empty
   class is on (both heroes toggle it on change). Scoped to iOS WebKit
   (-webkit-touch-callout) so desktop keeps its native mm/dd/yyyy. */
.psc-quote-bar{color-scheme:light;}
@supports (-webkit-touch-callout:none){
	.psc-quote-field input[type="date"]{-webkit-appearance:none;appearance:none;display:block;min-height:24px;line-height:24px;text-align:left;}
	.psc-quote-field input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0;}
	.psc-quote-field input[type="date"].psc-date-empty::before{content:attr(data-placeholder);color:#181818;}
}

/* "On the Screen" (inc/featured-movie.php, 2026-09-22): the movie playing in
   the post photo, first card in the blog sidebar. Uses the sidebar card
   chrome above (.blog-sidebar .widget / .widget-title). */
.psc-on-screen-poster{position:relative;display:block;aspect-ratio:2/3;border-radius:6px;overflow:hidden;border:1px solid #e6e4de;margin:0 0 14px;background:#111;}
/* Availability badge (2026-09-22) -- reuses .psc-movie-card-status as-is
   (position:absolute;top:6px;left:6px, see line ~372), just needed this
   anchor to be a positioned ancestor. */
.psc-on-screen-availability{color:var(--psc-gold,#c9a84c);}
.psc-on-screen-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease;}
.psc-on-screen-poster:hover img{transform:scale(1.02);}
.psc-on-screen-title{font-family:var(--psc-font-head);font-size:24px;line-height:1.1;letter-spacing:.4px;text-transform:uppercase;margin:0 0 4px;}
.psc-on-screen-title a{color:#181818;}
.psc-on-screen-title a:hover{color:var(--psc-purple);}
.psc-on-screen-meta{font-size:13px;color:#5f5f5f;margin:0 0 10px;}
.psc-on-screen-note{font-size:13.5px;line-height:1.5;color:#444;margin:0 0 16px;}
.psc-on-screen .psc-on-screen-btn{display:block;text-align:center;padding:12px 20px;}
.psc-on-screen .psc-on-screen-btn{background:var(--psc-purple);color:#fff;}
.psc-on-screen .psc-on-screen-btn:hover{background:var(--psc-gold);color:#181818;}
@media (prefers-reduced-motion:reduce){.psc-on-screen-poster img{transition:none;}}

/* Closing "Venue and timing" / "Request a quote" block on a seasonal
   campaign page (2026-09-22) -- Marc: "needs to be centered at the bottom
   of the page above the footer." page-seasonal-campaign.php already
   centers the wrapper via inline style; this caps the paragraph measure
   so centered body text doesn't stretch to the full 1180px .psc-wrap width,
   and keeps a bullet list (if this closing content ever has one) readable
   as a centered block rather than each line centering individually. */
.psc-campaign-body--closing p{max-width:600px;margin-left:auto;margin-right:auto;}
.psc-campaign-body--closing ul,
.psc-campaign-body--closing ol{display:inline-block;text-align:left;margin-left:auto;margin-right:auto;}

/* Post pages, phones + tablets (2026-09-22). Marc: remove the "More Guides"
   button. Below 1200px the parent theme turns #secondary into an off-canvas
   drawer that only that button opens, so hiding the button alone would hide
   "On the Screen", Related Guides and the quote card on phones. Instead the
   drawer is switched back to a normal block in the page flow -- the sidebar
   cards sit below the article -- and the button and the drawer's own close
   (X) are hidden. Single posts only: blog listings and the catalog keep
   their drawers. */
@media (max-width:1199.98px){
	body.single-post .handheld-sidebar-toggle,
	body.single-post #secondary .psc-sidebar-close{display:none !important;}
	body.single-post .site-content #secondary{
		position:static !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;
		width:100% !important;max-width:100% !important;height:auto !important;overflow:visible !important;
		visibility:visible !important;opacity:1 !important;padding-left:31px !important;padding-right:31px !important;background:transparent !important;transform:none !important;z-index:auto !important;box-shadow:none !important;
		flex:0 0 100% !important;margin-top:32px;
	}
}

/* Contact form fields squeezed to ~57px (2026-09-22). Vodi ships its own
   contact-page rule -- .contact-page form.wpcf7-form p:nth-child(-n+3)
   {flex:0 0 50%; max-width:50%; padding:0 15px} -- and /contact/ now carries
   the contact-page body class, so the first fields of each group were capped
   at half their grid column. Undo that for our card, and let the grids shrink
   (CF7 size="40" gives inputs a min-content width). !important: the parent
   selector ties ours on specificity and its stylesheet loads after this one. */
.pml-contact-form-card .wpcf7-form p{max-width:none !important;flex:none !important;padding-left:0 !important;padding-right:0 !important;}
.pml-contact-form-card .wpcf7-form,
.pml-contact-form-card .pml-fs{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
@media (max-width:700px){
	.pml-contact-form-card .wpcf7-form,
	.pml-contact-form-card .pml-fs{grid-template-columns:minmax(0,1fr);}
}
.pml-contact-form-card .wpcf7-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.pml-contact-form-card .wpcf7-form select,
.pml-contact-form-card .wpcf7-form textarea{min-width:0;max-width:100%;box-sizing:border-box;}
.pml-contact-form-card .wpcf7-form-control-wrap{display:block;min-width:0;}

/* White strip under the header (2026-09-22). Vodi gives page articles 32px
   of top padding; on pages that open with the dark full-bleed .pml-hero
   (Contact, About, Services, FAQ, Movie Licensing, Resource Hub, Privacy
   Policy) it showed as a white band between the header and the hero. Pages
   without a hero keep their padding. */
.site-content article.page:has(.pml-hero){padding-top:0 !important;}

/* ---- UI/UX audit fixes (2026-09-22) ----
   From a 38-page axe + layout sweep at 1440 and 390. Colour-only and size-only
   changes; no layout or markup changes. */

/* Grey text on white/cream was 2.3-3.5:1. These greys all pass 4.5:1. */
.pml-price-card h3,
.pml-price-card .pml-audience{color:#686868;}
.psc-area-review-author{color:#666;}
.psc-category-card-date{color:#686868;}
.pml-table thead th{color:#616161;}
.single-post .entry-date,
.single-post .entry-date a,
.single-post .post-nav__title,
.single-post .post-nav .entry-date{color:#616161 !important;}

/* "Available Now" / "New Release" pills on industry pages and Top Movie
   Picks were 8px text. */
.psc-movie-card-status{font-size:10px;padding:3px 7px;}

/* Coming Soon "Notify me" form: the parent theme's input rule won, so typed
   text was #495057 on the dark field (2.2:1) and 15px (iOS zooms in on focus).
   The plugin's own values, enforced. */
.psc-notify-form .psc-notify-field input{
	color:#fff !important;font-size:16px !important;background:#14141c !important;
}
.psc-notify-form .psc-notify-field input::placeholder{color:#9a9aa6;opacity:1;}

/* Search results tabs rendered as a bulleted list with the bullets stranded
   at the left edge. Pills with a 44px tap height instead. */
.search-result-tabs{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.search-result-tabs .search-result-tab{margin:0;padding:0;}
.search-result-tabs .search-result-tab::marker{content:none;}
.search-result-tabs .search-result-tab-link{
	display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
	border-radius:999px;border:1px solid rgba(128,128,128,.35);text-decoration:none;
}
.search-result-tabs .search-result-tab-link.active{border-color:var(--psc-gold);}

/* Blog pagination numbers were 8x19px tap targets. */
body.blog .page-numbers,
body.archive.category .page-numbers{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:44px;min-height:44px;padding:0 10px;
}

/* Movie page on phones: the three action buttons were three different
   widths. Primary action first, full width; trailer full width; shortlist
   shares a row with the share button. */
@media (max-width:575px){
	.psc-hero-info .psc-btn-row > .psc-btn{flex:1 1 100%;justify-content:center;text-align:center;}
	.psc-hero-info .psc-btn-row > .psc-btn-primary{order:-1;}
	.psc-hero-info .psc-btn-row > .psc-shortlist-toggle{flex:1 1 0;}
}

/* Headings and eyebrows: avoid one-word last lines ("TEAM", "LIKE"). */
h1,h2,h3,.psc-eyebrow{text-wrap:balance;}

/* UI/UX audit follow-up (2026-09-22): the parent theme gives the active tab
   a purple bottom border, which showed as a purple smile under the pill. */
.search-result-tabs .search-result-tab-link.active{border:1px solid var(--psc-gold) !important;}

/* Planning Guides search results (sidebar-right): the container has zero
   side padding site-wide, so the row's -15px gutter pushed the sidebar card
   against the right edge of the screen. Same 24px inset and width cap as a
   single post. */
@media (min-width:768px){
	body.post-search-results .site-content__inner{margin-left:0;margin-right:0;padding-left:9px;padding-right:9px;}
}
@media (min-width:1200px){
	body.post-search-results .site-content .container{max-width:1486px;margin-left:auto;margin-right:auto;}
}
@media (max-width:575px){
	/* The round Share icon keeps its own size, beside Shortlist. */
	.psc-hero-info .psc-btn-row > .psc-btn-icon{flex:0 0 auto;}
}
/* Audit follow-up: the Movie Licensing page carries its own inline copy of
   these rules, so they need one more level of specificity. */
.site-content .pml-price-card h3,
.site-content .pml-price-card .pml-audience{color:#686868;}
/* Post navigation dates and search-result dates (#949494, ~2.8:1). */
.post-nav__article--date,
body.search .entry-date,
body.search .entry-date a{color:#616161 !important;}
/* Bootstrap's pink <code> (#e83e8c) was 3.3:1 on the Privacy Policy. */
.site-content article code{color:#a3165a;}
.site-content .pml-fineprint{color:#666;}
.site-content .pml-studio-row > span{color:#5f5f5f;}

/* Header search button (desktop) was a 50x23px hit area inside the 39px
   field. Full field height now; the icon doesn't move. (2026-09-22) */
.site-header__search .search-form .search-submit{min-height:39px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;}

/* Movie page "Own it" line (2026-09-22): replaces the three Amazon cards.
   Sits under Related Titles, quiet, with the disclosure beside the links. */
.psc-own-line{margin:8px 0 32px;font-size:14px;line-height:1.6;color:#9c98a8;}
.psc-own-line a{color:var(--psc-text);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:6px 2px;}
.psc-own-line a:hover,.psc-own-line a:focus{color:var(--psc-gold) !important;}
.psc-own-line .psc-affiliate-note{display:block;margin:4px 0 0;}
/* The quote summary title now carries the movie name, so it can run long. */
.psc-quote-summary-title{text-wrap:balance;}

/* ---- Blog posts match the rest of the site (2026-09-22, UI/UX audit #4) ----
   Dark title band (printed by functions.php), then the article in the site's
   fonts at a readable line length. Light reading area kept on purpose, same
   as About/Services: long text reads better dark-on-light. */
.psc-post-hero{padding:64px 0 44px;}
.psc-post-hero .pml-hero-inner{max-width:920px;}
.psc-post-hero h1{font-size:46px;margin-bottom:14px;text-wrap:balance;}
.psc-post-hero a.pml-hero-eyebrow{text-decoration:none;}
.psc-post-hero a.pml-hero-eyebrow:hover,.psc-post-hero a.pml-hero-eyebrow:focus{color:#fff !important;}
.psc-post-hero .psc-post-hero-meta{font-size:14px;margin:0 auto;color:var(--psc-text-dim);}
@media (max-width:767px){
	.psc-post-hero{padding:40px 0 28px;}
	.psc-post-hero h1{font-size:34px;}
}
.psc-post-hero ~ #content .single-post .article__header,
.psc-post-hero ~ #content .single-article .article__header{display:none;}

.single-post .entry-content > p,
.single-post .entry-content > ul li,
.single-post .entry-content > ol li{font-size:17px;line-height:1.75;color:#2a2833;}
.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol,
.single-post .entry-content > h2,
.single-post .entry-content > h3{max-width:70ch;}
.single-post .entry-content > h2{
	font-family:var(--psc-font-head);font-size:30px;font-weight:500;letter-spacing:.5px;
	line-height:1.1;color:#181818;margin:38px 0 10px;
}
.single-post .entry-content > h3{font-size:20px;font-weight:600;color:#181818;margin:28px 0 8px;}

/* Sidebar + previous/next: the site's card look instead of the theme's grey box. */
.single-post #secondary .widget-title,
.single-post #secondary .widget > h2,
.single-post #secondary .widget > h3{font-family:var(--psc-font-head);font-size:24px;font-weight:500;letter-spacing:.5px;}
.single-post .post-navigation{background:transparent !important;padding:0 !important;margin-top:40px;}
.single-post .post-navigation .nav-links a{
	display:block;height:100%;background:#fff;border:1px solid #e6e4de;border-radius:8px;
	padding:20px 22px;text-decoration:none;transition:border-color .15s ease;
}
.single-post .post-navigation .nav-links a:hover,
.single-post .post-navigation .nav-links a:focus{border-color:var(--psc-gold);}

/* Planning Guides search results: titles in the site's heading font. */
body.post-search-results .article__title{font-family:var(--psc-font-head);font-weight:500;letter-spacing:.5px;}
body.post-search-results .article__title a{color:#181818;}
/* Same edge fix as Planning Guides search: at 1440px the sidebar card sat
   against the right edge of the screen. */
@media (min-width:768px){
	.single-post .site-content__inner{margin-left:0;margin-right:0;padding-left:9px;padding-right:9px;}
}

/* ---- Phone/tablet header: menu left, logo centred, search right
   (Marc's iPad test, 2026-09-25: "Left / Mid / Right").
   Two things fought this. The 993px+ desktop rules above unwrap
   .site-header__left/right with display:contents and give
   .site-header__search a 220px box, and both also reach the handheld
   header between 993 and 1199px. So on an iPad the search icon sat at
   the left of a 220px box (about 3/4 across) and space-between left the
   logo off-centre. Under 993px the wrappers stay intact, so the logo
   hugged the menu icon instead. A three-column grid (1fr auto 1fr)
   centres the logo exactly whatever the side items measure. ---- */
@media (max-width:1199.98px){
	header.handheld-header .site-header__inner{
		display:grid !important;grid-template-columns:1fr auto 1fr;align-items:center;
	}
	header.handheld-header .site-header__left,
	header.handheld-header .site-header__right{display:contents !important;}
	header.handheld-header .site-header__offcanvas{grid-column:1;justify-self:start;}
	header.handheld-header .site-header__logo{grid-column:2;justify-self:center;margin:0;}
	header.handheld-header .site-header__search{
		grid-column:3;justify-self:end;flex:none;width:auto;min-width:0;
	}
	/* Mirror the menu icon: the burger button sits 18px into the gutter
	   (margin-left:-18px), the search box carried 10px padding-right.
	   Measured glyph-to-edge 43/43 at 1024, 68/68 at 834, 16/16 at 375. */
	header.handheld-header .site-header__search{padding-right:0;margin-right:-12px;}
}

/* ---- Screen demo loading layer (2026-09-25) ----
   Marc: "sometimes the projector screen loads like this... screen in a
   screen". The <video> used the whole screen render (6846) as its poster,
   so until the clip arrived a miniature screen sat inside the screen. The
   poster is gone; this layer covers the same screen interior (same box as
   .psc-screen-demo-video) as a projector warming up, and fades once the
   first frame is ready (front-page.php adds .is-ready on loadeddata /
   playing). Data-saver visitors never get the video, so .is-still keeps
   the glow but drops the spinner. */
.psc-screen-demo-loading{
	position:absolute;left:21.1%;top:18.75%;width:56.9%;height:46.8%;border-radius:2px;
	display:flex;align-items:center;justify-content:center;pointer-events:none;
	background:radial-gradient(ellipse at 50% 55%, rgba(201,168,76,.22) 0%, rgba(75,0,130,.28) 38%, #07070c 78%);
	transition:opacity .6s ease;
}
.psc-screen-demo-spinner{
	width:34px;height:34px;border-radius:50%;
	border:3px solid rgba(201,168,76,.25);border-top-color:#c9a84c;
	animation:psc-demo-spin .9s linear infinite;
}
@keyframes psc-demo-spin{to{transform:rotate(360deg);}}
.psc-screen-demo-wrap.is-ready .psc-screen-demo-loading{opacity:0;}
.psc-screen-demo-wrap.is-still .psc-screen-demo-spinner{display:none;}
@media (prefers-reduced-motion:reduce){
	.psc-screen-demo-spinner{animation:none;}
	.psc-screen-demo-loading{transition:none;}
}

/* Trailer mature-content notice (inc/psc-trailer-review.php, 2026-09-25) */
.psc-trailer-modal.psc-noticing .psc-trailer-frame-wrap{display:none}
.psc-trailer-notice{max-width:560px;margin:auto;background:#1b0b36;color:#fff;border:2px solid #c9a84c;border-radius:14px;padding:22px 24px}
.psc-trailer-notice-title{font:700 22px/1.2 'Outfit',sans-serif;color:#f3d27a;margin:0 0 8px}
.psc-trailer-notice-small{font-size:14px;opacity:.85}
.psc-trailer-advisory{display:block;flex-basis:100%;font-size:14px;opacity:.85;margin-top:4px}