/*!
Theme Name: better
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: better
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

better is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {

}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}



/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

 /* =============================================
     Proportional scaling from a 1440px baseline
     Convert px → vw with: calc(px / 14.4 * 1vw)
     ============================================= */
  :root{
    /* Colors */
    --cream: #FFF9ED;
    --green: #33CC66;
    --ink:   #000;

    /* Reusable “px at 1440” helpers */
    --bdr:    calc(3   / 14.4 * 1vw);
    --shadow: calc(8   / 14.4 * 1vw);
    --shadow-long: calc(20   / 14.4 * 1vw);  

    /* Background offset (desktop baseline) */
    --bg-offset-y: calc(-600/14.4 * 1vw);
  }

  * { box-sizing: border-box; }

/* Scrolls with content, repeats vertically, bleeds slightly past edges */
html{
  /* clip horizontal overflow without freezing the background */
  overflow-x: clip;
  background-color: var(--cream);
  background-image: url("https://www.betterstudios.io/wp-content/uploads/2025/11/bg-scaled.jpg");
  background-repeat: repeat-y;
  background-position: 50% var(--bg-offset-y);
  /* overdraw by 8px to avoid sub-pixel slivers on mobile */
  background-size: calc(100vw + 8px) auto;
  background-attachment: scroll;
}
@supports not (overflow: clip){
  html{ overflow-x: hidden; }
}

/* body: no background; do final overflow clamp just in case */
body{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  overflow-x: hidden;
}


  /* ======================
     Header (scrolls)
     ====================== */
  .site-header{
    position: relative; /* anchor for absolute STORE button */
    padding-top:  calc(40 / 14.4 * 1vw);  /* 40px top @1440 */
    padding-left: calc(70 / 14.4 * 1vw);
    padding-right: calc(70 / 14.4 * 1vw);
  }

  .logo{
    display: block;
    width:  calc(406 / 14.4 * 1vw);
    height: calc(45  / 14.4 * 1vw); /* 45px @1440 */
    margin: 0;
  }

  /* Exactly 40px gap below the logo before the video block starts */
  .after-logo-gap{ height: calc(40 / 14.4 * 1vw); }

  /* STORE button: positioned relative to header, not fixed */
  .store-btn{
    position: absolute;
    top:   calc(40 / 14.4 * 1vw);
    right: calc(70 / 14.4 * 1vw);
    width:  calc(145 / 14.4 * 1vw);
    height: calc(50  / 14.4 * 1vw);
    display: flex;
    align-items: center;    /* vertical center */
    justify-content: center;
    background: var(--cream);
    color: var(--green);
    border: var(--bdr) solid var(--ink);
    box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
    text-decoration: none;
    font-weight: 400; /* regular */
    font-size: calc(20 / 14.4 * 1vw);
    letter-spacing: 0.02em;
    transition: background-color .2s ease, color .2s ease, transform .12s ease, box-shadow .12s ease;
    user-select: none;
  }
  .store-btn:hover { background: var(--green); color: var(--cream); }
  .store-btn:active{
    transform: translate(calc(2/14.4 * 1vw), calc(2/14.4 * 1vw));
    box-shadow: calc(6/14.4 * 1vw) calc(6/14.4 * 1vw) 0 var(--ink);
  }

    .hotline audio {
        width: 100%;border: var(--bdr) solid var(--ink);
    box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
        border-radius: 50px;
    }
.my-btn{
    height: calc(50  / 14.4 * 1vw) ;
    width: auto;
    display: flex;
    align-items: center;    /* vertical center */
    justify-content: center;
    background: #F372B9;
    color: var(--cream) !important;
    border: var(--bdr) solid var(--ink);
    box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
    text-decoration: none;
    font-weight: 400; /* regular */
    font-size: calc(20 / 14.4 * 1vw);
    letter-spacing: 0;
    padding: 0 calc(30 / 14.4 * 1vw);
    line-height: calc(50  / 14.4 * 1vw);
    transition: background-color .2s ease, color .2s ease, transform .12s ease, box-shadow .12s ease;
    width: fit-content; /* or auto */
  flex: 0 0 auto; cursor: pointer;
  }
.my-btn.green {background: var(--green);}
  .my-btn:hover { background: var(--cream); color: var(--ink) !important; }
  .my-btn:active{
    transform: translate(calc(2/14.4 * 1vw), calc(2/14.4 * 1vw));
    box-shadow: calc(6/14.4 * 1vw) calc(6/14.4 * 1vw) 0 var(--ink);
  }


@media (max-width: 768px){
.my-btn{
    height: calc(50  / 3.9 * 1vw) ;

    font-weight: 400; /* regular */
    font-size: calc(20 / 3.9 * 1vw);
    padding: 0 calc(30 / 3.9 * 1vw);
    line-height: calc(50  / 3.9 * 1vw);
    transition: background-color .2s ease, color .2s ease, transform .12s ease, box-shadow .12s ease;
  }
}

  /* =========
     Main area
     ========= */
  .stage{
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .video-card-link{ display: inline-block; text-decoration: none; color: inherit; outline: none; }

  .video-card{
    position: relative;
    width:  calc(1300 / 14.4 * 1vw);
    height: calc(700  / 14.4 * 1vw);
    background: #000000;
    border: var(--bdr) solid var(--ink);
    box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
    overflow: hidden;
    border-radius: 0; /* square corners */
      cursor: pointer; transition: all .3s ease;
  }

  .video-card video,
  .video-card img.fallback{
    position: absolute;
    inset: -1px;                         /* bleed 1px to kill subpixel gaps */
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    object-fit: cover;
    display: block; transition: all .3s ease;
  }

/* 
.video-card:hover  { box-shadow: var(--shadow-long) var(--shadow-long) 0 var(--ink); transform: translate(calc(-6/14.4 * 1vw),calc(-6/14.4 * 1vw));}
*/
.video-card:hover video {opacity: 0.6}



  /* ==========================
     CSS-only scrolling banner
     ========================== */
  .banner{
    position: absolute; left: 0; right: 0; bottom: 0;
    height: calc(60 / 14.4 * 1vw);
    background: #34CC66;
    border-top: var(--bdr) solid var(--ink);
    overflow: hidden;
    display: flex;
    align-items: center;
       transition: all .3s ease;
  }

  .scrolling-text2{
    position: relative;
    width: 100%;
    display: flex;
    overflow: hidden;
    align-items: center;
    height:100%;
  }

  .scrolling-text2 .scroll{
    display: inline-block;
    white-space: nowrap;
    text-transform: uppercase;
    margin: 0; 
    color: var(--ink);
    font-family: "Brice", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: calc(21 / 14.4 * 1vw);
    letter-spacing: 0.06em;
    line-height: 1;
    animation: marquee 26s linear infinite;
    /* padding-top: calc(var(--bdr) / 2); */
  }

.scrolling-text2.slower .scroll{
    animation: marquee 36s linear infinite;
  }

  @keyframes marquee{
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }

  @media (prefers-reduced-motion: reduce){
    .scrolling-text2 .scroll { animation: none; }
  }

  /* ===== Right-half video section ===== */
  .right-section {
    width: 100%;
    margin-top: calc(50 / 14.4 * 1vw);
    position: relative;
  }

  /* Right half: anchor from center, extend to right +3px to hide right border on edge */
  .video-card--right {
    margin-left: calc(50vw + (25 / 14.4 * 1vw));
    width: calc(50vw - (25 / 14.4 * 1vw) + (3 / 14.4 * 1vw));
    aspect-ratio: 750 / 600;
    position: relative;
    background: #000000;
    border: var(--bdr) solid var(--ink);
    box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
    overflow: hidden;
    border-radius: 0;
    height: auto;
  }
  .video-card--right video,
  .video-card--right img.fallback { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; display: block; }

  /* Banner variant for yellow background */
  .banner--yellow { background: #FFFF70; border-top: var(--bdr) solid var(--ink); }

  /* The star graphic */
  .right-star {
    position: absolute;
    width: calc(122 / 14.4 * 1vw);
    left: calc(175 / 14.4 * 1vw);
    top:  calc((50 + 112) / 14.4 * 1vw);
    pointer-events: none;
    user-select: none;
  }

  /* Lower left block */
  .left-section--lower { margin-top: calc(-100 / 14.4 * 1vw); position: relative;}

  /* Lower-left card (true 700:440 ratio, flush left) */
  .video-card--lower-left {
    position: relative;
    width: calc(50vw - (25 / 14.4 * 1vw));   /* no +3px on left */
    aspect-ratio: 700 / 440;
   left: calc(-1 * (var(--bdr) + (8 / 14.4 * 1vw))); /* bdr + 8px at 1440 */
    margin-left: 0;
    background: #000000;
    border: var(--bdr) solid var(--ink);
    box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
    overflow: hidden;
    border-radius: 0;
    height: auto;
  }
  .video-card--lower-left video,
  .video-card--lower-left img.fallback { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; display: block; }

  /* Pink banner for TRASHY APPAREL section */
  .banner--pink { background: #F372BA; border-top: var(--bdr) solid var(--ink); }

  .right-section--fourth {
     margin-top: calc(-1 * ((50vw - (25 / 14.4 * 1vw)) * (600 / 750)) / 4);
    position: relative;
  }

  .video-card--right-inset {
    position: relative;
    margin-left: calc(50vw + (25 / 14.4 * 1vw));
    width: calc(50vw - (25 / 14.4 * 1vw) - (70 / 14.4 * 1vw)); /* inset from right edge */
    aspect-ratio: 4 / 5;
    background: #000000;
    border: var(--bdr) solid var(--ink);
    box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
    overflow: hidden;
    border-radius: 0;
    height: auto;
  }
  .video-card--right-inset video,
  .video-card--right-inset img.fallback { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; display: block; }

  .banner--aqua { background: #C4E8E0; border-top: var(--bdr) solid var(--ink); }

  .left-section--fifth {
    margin-top: calc(-1 * ((50vw - (25 / 14.4 * 1vw) - (70 / 14.4 * 1vw)) * (5 / 4)) / 4);
    position: relative;
  }

  .video-card--left-750x600 {
    position: relative;
    width: calc(50vw - (25 / 14.4 * 1vw));
    aspect-ratio: 750 / 600;
    left: calc(-1 * (var(--bdr) + (8 / 14.4 * 1vw))); /* bdr + 8px at 1440 */
    margin-left: 0;
    background: #000000;
    border: var(--bdr) solid var(--ink);
    box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
    overflow: hidden;
    border-radius: 0;
    height: auto;
  
    }
  .video-card--left-750x600 video,
  .video-card--left-750x600 img.fallback { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; display: block; }
    
.right-section--sixth {
  margin-top: calc(-1 * ((50vw - (25 / 14.4 * 1vw)) * (600 / 750)) / 4);
  position: relative;
}

/* Green banner variant */
.banner--green {
  background: #34CC66;
  border-top: var(--bdr) solid var(--ink);
}

  /* ================= MOBILE BREAKPOINT (<=768px) — 390px baseline ================= */
  @media (max-width: 768px) {



    :root{
      /* thinner strokes/shadows + bg offset using 390 baseline */
      --bdr:    calc(2 / 3.9 * 1vw);   /* 2px @390 */
      --shadow: calc(5 / 3.9 * 1vw);   /* 5px @390 */
      --bg-offset-y: calc(-600/3.9 * 1vw);
    }

    /* Tighter top spacing on mobile + 90% STORE button */
    .site-header{
      padding-top: calc(20 / 3.9 * 1vw);
      padding-left: calc(15 / 3.9 * 1vw);
      padding-right: calc(15 / 3.9 * 1vw);
    }
    .store-btn{
      top: calc(10 / 3.9 * 1vw);
      right: calc(15 / 3.9 * 1vw);
      width:  calc(96 / 3.9 * 1vw);   /* ~90% of 120 */
      height: calc(40  / 3.9 * 1vw);   /* ~90% of 44 */
      font-size: calc(15 / 3.9 * 1vw); /* ~90% of 18 */
      border-width: var(--bdr);
      box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
    }

    /* Logo 200px wide on mobile */
    .logo{ width: calc(210 / 3.9 * 1vw); height: auto; }

    /* Global: stagger cards vertically — no overlaps on mobile */
    .right-section,
    .left-section,
    .right-section--fourth,
    .left-section--fifth {
      margin-top: calc(40 / 3.9 * 1vw) !important; /* replace any negative overlaps */
    }

    /* Top video: full-width, 4:5, 15px margins + extra top gap */
    .stage .video-card{
      width: calc(100vw - (30 / 3.9 * 1vw));  /* 15px left/right */
      margin-left:  calc(15 / 3.9 * 1vw);
      margin-right: calc(15 / 3.9 * 1vw);
      margin-top:   calc(20 / 3.9 * 1vw);     /* extra spacing you requested */
      height: auto;
      aspect-ratio: 4 / 5;
      border: var(--bdr) solid var(--ink);
      box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
    }

    /* 70% banner height + 70% type size/spacing */
    .banner{ height: calc(42 / 3.9 * 1vw); }
    .scrolling-text2 .scroll{
      font-size:     calc(14.7 / 3.9 * 1vw);
      padding-right: calc(44.8 / 3.9 * 1vw);
    }

    /* Section 2 (RIGHT) — 70% width, “kiss” right edge by hiding border+shadow */
    .video-card--right{
      width: 70vw;
      height: auto;
      aspect-ratio: 750 / 600;
      margin-left: auto;
      margin-right: calc(-1 * (var(--bdr) + var(--shadow))); /* hide border+shadow offscreen */
      border: var(--bdr) solid var(--ink);
      box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
    }

    /* Section 3 (LEFT) — 70% width, “kiss” left edge by hiding border+shadow */
    .video-card--lower-left{
      width: 70vw;
      height: auto;
      aspect-ratio: 700 / 440;
      margin-left: calc(-1 * (var(--bdr) + var(--shadow)));
      margin-right: 0;
      left: 0;
      border: var(--bdr) solid var(--ink);
      box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
    }

    /* Section 4 (RIGHT) — becomes full width like top (4:5) */
    .video-card--right-inset{
      width: calc(100vw - (30 / 3.9 * 1vw));
      margin-left:  calc(15 / 3.9 * 1vw);
      margin-right: calc(15 / 3.9 * 1vw);
      height: auto;
      aspect-ratio: 4 / 5;
      border: var(--bdr) solid var(--ink);
      box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
    }

    /* Section 5 (LEFT) — 70% width, “kiss” left edge */
    .video-card--left-750x600{
      width: 70vw;
      height: auto;
      aspect-ratio: 750 / 600;
      margin-left: calc(-1 * (var(--bdr) + var(--shadow)));
      margin-right: 0;
      left: 0;
      border: var(--bdr) solid var(--ink);
      box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
    }

    /* Kill rounding gaps on all mobile variants */
    .video-card video,
    .video-card img.fallback,
    .video-card--right video,
    .video-card--right img.fallback,
    .video-card--lower-left video,
    .video-card--lower-left img.fallback,
    .video-card--right-inset video,
    .video-card--right-inset img.fallback,
    .video-card--left-750x600 video,
    .video-card--left-750x600 img.fallback {
      inset: -1px;
      width: calc(100% + 2px);
      height: calc(100% + 2px);
    }

    /* Star: +15% size, align to 15px left, move ~60px higher overall */
    .right-star{
      width: calc(57.5 / 3.9 * 1vw);  /* ~+15% from 50 */
      left:  calc(15    / 3.9 * 1vw);
      top:   calc(20    / 3.9 * 1vw); /* 80 → 20 */
    }
    
  .video-card--right{
    margin-right: calc(-1 * (var(--bdr) + var(--shadow)));
  }
  /* LEFT edge: same logic mirrored */
  .video-card--lower-left,
  .video-card--left-750x600{
    margin-left: calc(-1 * (var(--bdr) + var(--shadow)));
    left: 0;
  }  
  /* Make the link a block so its child can right-align via auto margin */
.video-card-link{ display:block; }

/* Section 6 (and any right-side cards): right align + hide border+shadow offscreen */
.right-section--sixth .video-card--right,
.right-section .video-card--right{
  margin-left: auto;
  margin-right: calc(-1 * (var(--bdr) + var(--shadow)));
  width: 70vw;                 /* keep 70% mobile width */
  aspect-ratio: 750 / 600;
  height: auto;
}

    /* Left-side cards on mobile:
   - keep left edge offscreen (border+shadow)
   - right edge aligns to 15px margin
   - explicit aspect ratios so height doesn't collapse */
.video-card--lower-left{
  width: calc(100vw - (50 / 3.9 * 1vw));
  margin-left:  calc(-1 * (var(--bdr) + var(--shadow)));
  margin-right: calc(15 / 3.9 * 1vw);
  left: 0;

  height: auto;
  aspect-ratio: 700 / 440;              /* explicit ratio */
  border: var(--bdr) solid var(--ink);
  box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
  overflow: hidden;
}

.video-card--left-750x600{
  width: calc(100vw - (70 / 3.9 * 1vw));
  margin-left:  calc(-1 * (var(--bdr) + var(--shadow)));
  margin-right: calc(15 / 3.9 * 1vw);
  left: 0;

  height: auto;
  aspect-ratio: 750 / 600;              /* explicit ratio */
  border: var(--bdr) solid var(--ink);
  box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
  overflow: hidden;
}

/* keep the no-gap bleed */
.video-card--lower-left video,
.video-card--lower-left img.fallback,
.video-card--left-750x600 video,
.video-card--left-750x600 img.fallback{
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  display: block;
}
  
      
  }
    
/* Ensure the section is the positioning context */
.right-section--fourth { position: relative; }

/* Desktop star for Section 4 */
.right-section--fourth .star-2{
  position: absolute;
  width: calc(88 / 14.4 * 1vw);      /* 88px @1440 */
  left:  calc(70 / 14.4 * 1vw);      /* align to 70px page margin */
  top:   calc(315 / 14.4 * 1vw);     /* 315px from the section top */
  pointer-events: none;
  user-select: none;
  z-index: 2;                         /* above video card */
}

/* Hide on mobile */
@media (max-width: 768px){
  .right-section--fourth .star-2{ display: none; }
}

    /* ===== Section 7: Left-aligned, starts ~3/4 down Section 6 (DESKTOP) ===== */
.left-section--seventh{
  /* Section 6 height = (50vw - 25px) * (600/750) ⇒ pull up 1/4 of that */
  margin-top: calc(-1 * ((50vw - (25 / 14.4 * 1vw)) * (600 / 750)) / 4);
  position: relative;
}

/* Left card with 70px page margin; right edge aligned like other left sections */
.video-card--left-inset{
  position: relative;
  margin-left: calc(70 / 14.4 * 1vw);                           /* 70px page margin */
  width: calc(50vw - (25 / 14.4 * 1vw) - (70 / 14.4 * 1vw));    /* keeps right edge at center−25px */
  aspect-ratio: 700 / 440;                                       /* same as Section 3 */
  background: #000000;
  border: var(--bdr) solid var(--ink);
  box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
  overflow: hidden;
  border-radius: 0;
  height: auto;                                                  /* aspect-ratio controls height */
}

/* bleed media to avoid subpixel gaps */
.video-card--left-inset video,
.video-card--left-inset img.fallback{
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  display: block;
}
/* Make sure Section 7 can position the star */
.left-section--seventh { position: relative; }

/* Star on the right for Section 7 (desktop) */
.left-section--seventh .star-3, .left-section--lower .star-3{
  position: absolute;
  width: calc(90 / 14.4 * 1vw);   /* 90px @1440 */
  right: calc(220 / 14.4 * 1vw);  /* align to 120px page inset on right */
  top: 80%;                       /* 80% down the section */
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
    
@media (max-width: 768px){
.video-card--left-inset{
  width: calc(100vw - (30 / 3.9 * 1vw)); /* 15px margins on each side */
  margin-left:  calc(15 / 3.9 * 1vw);
  margin-right: calc(15 / 3.9 * 1vw);

  height: auto;              /* let aspect-ratio define height */
  aspect-ratio: 700 / 440;   /* keep desktop proportion */

  left: auto;                /* remove desktop offscreen shift */
  border: var(--bdr) solid var(--ink);
  box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
}
    .left-section--seventh .star-3, .left-section--lower .star-3{ display: none;}
}

/* ===== Full-width section like the top hero video ===== */
.fullwidth-section--second{
  margin-top: calc(70 / 14.4 * 1vw); /* spacing above on desktop */
  width: 100%;
  display: flex;
  justify-content: center;
}

.video-card--fullwidth{
  width: calc(1300 / 14.4 * 1vw);
  height: calc(700 / 14.4 * 1vw);
  border: var(--bdr) solid var(--ink);
  box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
  position: relative;
  overflow: hidden;
  border-radius: 0;
}

.video-card--fullwidth video,
.video-card--fullwidth img.fallback{
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  display: block;
}

/* Placeholder banner until we choose colors/text */
.banner--placeholder{
  background: #34CC66; /* green for now — tell me what you want */
  border-top: var(--bdr) solid var(--ink);
}
@media (max-width: 768px){
.fullwidth-section--second{
  margin-top: calc(40 / 3.9 * 1vw) !important;
}

.video-card--fullwidth{
  width: calc(100vw - (30 / 3.9 * 1vw));
  margin-left:  calc(15 / 3.9 * 1vw);
  margin-right: calc(15 / 3.9 * 1vw);
  height: auto;
  aspect-ratio: 4 / 5;
  border: var(--bdr) solid var(--ink);
  box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
}

.video-card--fullwidth video,
.video-card--fullwidth img.fallback{
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
}
}

/* Full-page black sweep that rises from bottom */
#sweepCover{
  position: fixed;
  inset: 0;
  background: #000;
  transform: translateY(100%);
  z-index: 999999;          /* above everything */
  pointer-events: none;     /* don’t block clicks until animating */
}

#sweepCover.is-active{
  transition: transform 360ms cubic-bezier(.22,.61,.36,1);
  transform: translateY(0);
}

/* Make the card look/behave like a link */
.js-sweep-link{ cursor: pointer; }
.js-sweep-link:focus-visible{ outline: 2px dashed #000; outline-offset: 4px; }


.right-section,
.left-section {
  pointer-events: none;
}

.right-section .video-card,
.left-section .video-card {
  pointer-events: auto;
}



 /* ========= CLIMAXX page  ========= */

    /* Start black; flip to cream + fixed bg when .is-ready is on <body> */
    :root{
      /* relies on your existing variables: --cream, --ink, --bdr, --shadow */
    }

    html, body { height:100%; }
    body.page-climaxx{
      margin:0;
      background:#000;                   /* start black */
      color: var(--ink, #000);
      overflow-x:hidden;
    }

    /* After preload finishes, fade bg to cream + fixed hero image */
    body.page-climaxx.is-ready{
      background-color: var(--cream, #FFF9ED);
   
      transition: background-color 320ms ease-in-out;
    }
body.page-climaxx.is-ready .climaxx-bg-shell{
  min-height: 100vh;
  background-image: url("https://www.betterstudios.io/wp-content/uploads/2025/11/bg2.jpg");
  background-repeat: repeat-y;     
  background-size: 100% auto;       
  background-position: center top;
    background-attachment: fixed;
  /* IMPORTANT: no background-attachment here at all */
}
    /* Preloader: black cover while we load primary assets */
    #climaxxPreloader{
      position: fixed; inset: 0;
      background:#000;
      display:flex; align-items:center; justify-content:center;
      z-index: 999999;
      opacity: 1;
      transition: opacity 300ms ease;
    }
    #climaxxPreloader.is-hidden{ opacity:0; pointer-events:none; }

    /* Minimal dot loader (optional) */
    .pre-dot{
      width: calc(10 / 14.4 * 1vw);
      height: calc(10 / 14.4 * 1vw);
      border-radius: 50%;
      background:#FFF;
      animation: prePulse 900ms ease-in-out infinite alternate;
    }
    @keyframes prePulse { from{opacity:.3; transform: scale(.85);} to{opacity:1; transform: scale(1);} }

/* Preloader container stays the same */
#climaxxPreloader{
  position: fixed; inset: 0;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  z-index: 999999;
  opacity: 1;
  transition: opacity 300ms ease;
}
#climaxxPreloader.is-hidden{ opacity:0; pointer-events:none; }

/* =========================
   Cream circular spinner
   ========================= */
.pre-spinner{
  position: relative;
  width:  calc(60 / 14.4 * 1vw);   /* ~60px @1440 */
  height: calc(60 / 14.4 * 1vw);
  border-radius: 50%;
  /* Outer ring */
  border: calc(4 / 14.4 * 1vw) solid rgba(255,249,237,0.1);   
  border-top-color: #FFF9ED;  /* cream highlight */
  border-right-color: #FFF9ED;
  animation: spinOuter 900ms cubic-bezier(.22,.61,.36,1) infinite;
}


@keyframes spinOuter{
  0%   { transform: rotate(0deg); }
  60%  { transform: rotate(320deg); }  /* ease through most of the turn */
  100% { transform: rotate(360deg); }  /* quick finish = nice snap */
}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .pre-spinner{ animation: none; }
  .pre-spinner::after{ animation: none; }
}

/* Mobile sizing (390px baseline) */
@media (max-width: 768px){
  .pre-spinner{
    width:  calc(40 / 3.9 * 1vw);   /* ~40px @390 */
    height: calc(40 / 3.9 * 1vw);
    border-width: calc(3 / 3.9 * 1vw);
  }
  .pre-spinner::after{
    inset: calc(4 / 3.9 * 1vw);
    border-width: calc(3 / 3.9 * 1vw);
    filter: drop-shadow(0 0 calc(1.5 / 3.9 * 1vw) rgba(255,249,237,0.35));
  }
}


.climaxx-close{
  position: fixed;
  top:   calc(60 / 14.4 * 1vw);   /* 40px @1440 */
  right: calc(55 / 14.4 * 1vw);   /* 40px @1440 */
  width:  calc(60 / 14.4 * 1vw);  /* 60px wide */
  height: calc(60 / 14.4 * 1vw);  /* 46px tall */
  background: var(--cream);
  border: var(--bdr) solid var(--ink);     /* 3px @1440 */
  box-shadow: var(--shadow) var(--shadow) 0 var(--ink); /* 8px shadow */
  display: block;
  z-index: 10000;
  cursor: pointer;
  transition: background-color .2s ease;
    border-radius: 0 0 0 26px;
}

/* X bars — scaled for desktop */
.climaxx-close::before,
.climaxx-close::after{
  content: "";
  position: absolute;
  left: 51%; top: 46%;
  width:  calc(22 / 14.4 * 1vw);  /* ~22px */
  height: calc(3  / 14.4 * 1vw);  /* ~3px bar */
  background: var(--ink);
  transform-origin: center;
}

.climaxx-close::before{
  transform: translate(-50%, -50%) rotate(45deg);
}
.climaxx-close::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Hover / focus: green box, black X */
.climaxx-close:hover,
.climaxx-close:focus-visible{
  background: var(--green);
  outline: none;
}

    /* Player wrapper — 930px wide, 125px from top (centered) */
    .climaxx-stage{
      display:flex; justify-content:center;
      padding-top: calc(50 / 14.4 * 1vw);
      padding-bottom: calc(0 / 14.4 * 1vw);
        
    }
    .player-wrap{
      width: calc(1330 / 14.4 * 1vw);
    }

    /* Thumb (16:9) with border + shadow like your video cards */
    .player-thumb{
      position:relative;
      aspect-ratio: 16 / 9;
      border: var(--bdr, 3px) solid var(--ink, #000);
      box-shadow: var(--shadow, 8px) var(--shadow, 8px) 0 var(--ink, #000);
      overflow:hidden;
      background:#000;
    }
    .player-thumb img{
      position:absolute; inset:-1px;
      width: calc(100% + 2px); height: calc(100% + 2px);
      object-fit: cover; display:block;
    }
    .player-thumb video{
      position:absolute; inset:-1px;
      width: calc(100% + 2px); height: calc(100% + 2px);
      object-fit: cover; display:block;
    }
    .player-play, .climaxx-details-left .player-play{
      position:absolute; inset:0;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer;
    }
    .player-play img, .climaxx-details-left .player-play img{
      width: calc(100 / 14.4 * 1vw); height:auto; display:block;
      filter: drop-shadow(0 0 4px rgba(0,0,0,.3));
    }

    /* When playing, show native controls; video replaces thumb */
    .player-video{
      display:none;
      position:relative;
      aspect-ratio: 16 / 9;
      border: var(--bdr, 3px) solid var(--ink, #000);
      box-shadow: var(--shadow, 8px) var(--shadow, 8px) 0 var(--ink, #000);
      overflow:hidden;
      background:#000;
    }
    .player-video video{
      position:absolute; inset:-1px;
      width: calc(100% + 2px); height: calc(100% + 2px);
      object-fit: cover; display:block;
    }
    .is-playing .player-thumb{ display:none; }
    .is-playing .player-video{ display:block; }



/* ===== Button resets (kills gray bg, overlay, radius, borders) ===== */

.player-play, .climaxx-details-left .player-play{
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  color: inherit;
  line-height: 1;
  -webkit-tap-highlight-color: transparent; /* iOS gray flash */
}

/* Keep accessibility, but use a clean focus ring */

.player-play:focus-visible{
  outline: 2px dashed #000;
  outline-offset: 4px;
}

/* Ensure the close “X” is just the two lines you drew */
.climaxx-close{ cursor: pointer; }

/* The play button covers the thumb, but is visually empty */
.player-play, .climaxx-details-left .player-play{
  position: absolute;
  inset: 0;
  cursor: pointer;
}

/* Center the play icon pixel-perfectly */
.player-play img, .climaxx-details-left .player-play img{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: calc(100 / 14.4 * 1vw); /* adjust if you want bigger/smaller */
  height: auto;
  display: block;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.3));
  pointer-events: none; /* click passes through the img to the button */
    box-shadow: none; border: none;
}

/* Ensure the thumb itself isn't adding any overlay */
.player-thumb{
  background: #000; /* just video/thumbnail—no overlays */
}
.player-thumb img{
  mix-blend-mode: normal;
  opacity: 1;   transition: all 0.3s ease;
}


/* ===============================
   Hover / focus transition effects
   =============================== */

/* Smooth transitions */
.player-thumb,
.player-play img {
  transition: all 0.3s ease;
}



/* Scale the play icon slightly more */
.player-play:hover img,
.player-play:focus-visible img {
  transform: translate(-50%, -50%) scale(1.08);
}

/* ================= MOBILE (<=768px) — CLIMAXX ================= */
@media (max-width: 768px){

  /* Make the page bg image cover on mobile */
  body.page-climaxx.is-ready{
    background-attachment: fixed;   /* iOS */
   background-size: cover;
  }
body.page-climaxx.is-ready .climaxx-bg-shell{
        background-attachment: fixed;   /* iOS */
   background-size: cover;
    }
  /* Full-width player inside 15px margins */
  .climaxx-stage{
    padding-top: calc(0 / 3.9 * 1vw);
    padding-bottom: calc(0 / 3.9 * 1vw);
  }
  .player-wrap{
    width: calc(100vw - (0 / 3.9 * 1vw));   /* 15px L/R */
    margin-left:  calc(0 / 3.9 * 1vw);
    margin-right: calc(0 / 3.9 * 1vw);
  }

  /* Close button: fixed cream box with shadow; smaller X lines */
  .climaxx-close{
    position: fixed;
    top:   calc(10 / 3.9 * 1vw);
    right: calc(15 / 3.9 * 1vw);
    width:  calc(40 / 3.9 * 1vw);   /* ~46px @390 */
    height: calc(33 / 3.9 * 1vw);   /* ~32px @390 */
    background: var(--cream);
    border: var(--bdr) solid var(--ink);     /* 2px @390 via your vars */
    box-shadow: var(--shadow) var(--shadow) 0 var(--ink); /* 5px @390 */
    border-radius: 0;
    z-index: 10000;
  }
  /* the X bars (centered 12×12; 2px thick) */
  .climaxx-close::before,
  .climaxx-close::after{
    width:  calc(14 / 3.9 * 1vw);
    height: calc(2  / 3.9 * 1vw);
    background: var(--ink);
    left: 50%; top: 50%;
    transform-origin: center;
  }
  .climaxx-close::before{ transform: translate(-50%,-50%) rotate(45deg); }
  .climaxx-close::after { transform: translate(-50%,-50%) rotate(-45deg); }

  /* Hover/focus: green bg (keeps black “X”) */
  .climaxx-close:hover,
  .climaxx-close:focus-visible{
    background: var(--green);
    outline: none; /* you already have a dashed focus ring elsewhere; remove if duplicative */
  }

    .climaxx-close:hover::before{background: var(--cream);}
    .climaxx-close:hover::after {background: var(--cream);}
    .player-play img{
      width: calc(90 / 3.9 * 1vw); 
    }
  /* Ensure the play button and thumb still fill and animate nicely */
  .player-thumb, 
  .player-play img{
    transition: all 0.3s ease;
  }
  .player-thumb:hover img,
  .player-thumb:focus-within img{
    transform: scale(1.04);
  }
  .player-play:hover img,
  .player-play:focus-visible img{
    transform: translate(-50%, -50%) scale(1.08);
  }
    .player-thumb, .player-play { box-shadow: var(--shadow) var(--shadow) 0 var(--ink);}    
}

/* Visually hidden utility (safe to re-define if you already have one) */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ================================
   CLIMAXX DETAILS SECTION (desktop)
   ================================ */

.climaxx-details{
  display:flex;
    font-family: "Brice";
  justify-content:center;
  padding-top:    calc(60 / 14.4 * 1vw);  /* 60px top @1440 */
  padding-bottom: calc(0 / 14.4 * 1vw);  /* 60px bottom @1440 */
}

.climaxx-details-inner{
  width: calc(1330 / 14.4 * 1vw);          /* same as video width */
  display: grid;
  grid-template-columns: auto 1fr;        /* left fixed, right fills */
  column-gap: calc(80 / 14.4 * 1vw);      /* 80px gap @1440 */
  align-items: stretch;                   /* make grid items match row height */
}


.climaxx-details-left{
  width: calc(625 / 14.4 * 1vw);
}

.climaxx-shot{
  margin: 0 0 calc(40 / 14.4 * 1vw);     /* 40px bottom @1440 */
}
.climaxx-shot img{
  display:block;
  width:100%;
  height:auto;
  border: var(--bdr) solid var(--ink);
  box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
}
.climaxx-shot video {
    display: block;
    width: 100%;
    height: auto;
    border: var(--bdr) solid var(--ink);
    box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
}

.climaxx-shot.ultrawide video {
    display: flex;
    align-content: center;
    align-self: center;
    width: 100%;
    height: auto;
    border: var(--bdr) solid var(--ink);
    box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
}


.climaxx-details-right{
  width: 100%;
  align-self: stretch;   /* ensure it spans full row height */
  padding-bottom: calc(40 / 14.4 * 1vw);;
margin-top: calc(463 / 14.4 * 1vw);    transition: margin-top .4s ease;
}

/* Sticky block: sticks 60px from top until container bottom is reached */
.climaxx-sticky{
  position: sticky;
  top: calc(60 / 14.4 * 1vw);            /* 60px @1440 */
}

/* Logo SVG width 286px @1440 */
.climaxx-logo{
  margin: 0 0 calc(40 / 14.4 * 1vw);
}
.climaxx-logo img{
  display:block;
  width: 100%;
  height:auto;
}

/* H2: 26px, lh 30px, bold */
.climaxx-subhead{
  margin: 0 0 calc(40 / 14.4 * 1vw);
  font-weight: 700;
  font-size:  calc(36 / 14.4 * 1vw);
  line-height: calc(38 / 14.4 * 1vw);
}

/* Paragraph: 16px, lh 30px, 40px bottom margin */
.climaxx-copy{
  margin: 0 ;
  padding: 0 calc(0 / 14.4 * 1vw) calc(30 / 14.4 * 1vw)  0;  
  font-size:  calc(18 / 14.4 * 1vw);
  line-height: calc(36 / 14.4 * 1vw);
}

.climaxx-copy h3 {line-height: 1.3;
    padding-right: calc(10 / 14.4 * 1vw);
}

/* ==========================
   MOBILE (<=768px) behavior
   ========================== */

@media (max-width: 768px){
  .climaxx-details{
    padding-top:    calc(30 / 3.9 * 1vw);
    padding-bottom: calc(0 / 3.9 * 1vw);
  }

 .climaxx-details-inner{
    width: calc(100vw - (30 / 3.9 * 1vw));   /* 15px side margins */
    margin-left:  calc(15 / 3.9 * 1vw);
    margin-right: calc(15 / 3.9 * 1vw);
    display: flex;                           /* use flexbox */
    flex-direction: column;                  /* stack */
  }

  /* Flip order: text first, images second */
  .climaxx-details-right{
    order: 1;
    width: 100%;
    padding-bottom: calc(30 / 3.9 * 1vw);;
      margin-top: 0; 
  }
  .climaxx-details-left{
    order: 2;
    width: 100%;
  }
  .climaxx-details-left,
  .climaxx-details-right{
    width: 100%;
  }
    

  .climaxx-shot{
    margin-bottom: calc(30 / 3.9 * 1vw);
  }

  /* Turn off sticky on mobile (normal flow) */
  .climaxx-sticky{
    position: static;
  }

  .climaxx-logo{
    margin-bottom: calc(30 / 3.9 * 1vw);
  }
  .climaxx-logo img{
    width: 100%; /* slightly smaller logo on mobile */
  }

  .climaxx-subhead{
    font-size:  calc(18 / 3.9 * 1vw);
    line-height: calc(26 / 3.9 * 1vw);
    margin-bottom: calc(24 / 3.9 * 1vw);
  }

  .climaxx-copy{
    font-size:  calc(14 / 3.9 * 1vw);
    line-height: calc(24 / 3.9 * 1vw);
    margin-bottom: 0;
      padding-bottom: 0;
  }
    .climaxx-copy h3 {
    padding-right: 0;
}
  
}
/* Full-width yellow banner (Climaxxx credits) */
.climaxx-credits-banner{
  width: 100%;
  margin-top: calc(40 / 14.4 * 1vw);
  margin-bottom: calc(0 / 14.4 * 1vw);
  height: calc(60 / 14.4 * 1vw);             /* same height as main banners */
  background: #FFFF70;
  border-top: var(--bdr) solid var(--ink);
  border-bottom: var(--bdr) solid var(--ink);
  box-shadow: var(--shadow) 0 0 var(--ink);  /* optional subtle depth */
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* The inner marquee container reuses your scrolling-text2 class */
.climaxx-credits-banner .scrolling-text2{
  height: 100%;
  align-items: center;
}

/* Reuse your .scroll rules (font, animation, spacing). 
   We only add top-padding if you’re using the bdr-centering trick. */
.climaxx-credits-banner .scroll{
 /*  padding-top: var(--bdr);  keeps vertical centering consistent */
}

@media (max-width: 768px){
.banner{ height: calc(42 / 3.9 * 1vw); }    
  .climaxx-credits-banner{
      display: flex;
    height: calc(42 / 3.9 * 1vw); /* a bit taller than the other banners */
  }
}

/* ===============================
   CLIMAXX wide image (image 4)
   =============================== */
.climaxx-wide-shot{
  display: flex;
  justify-content: center;
  padding-top:    calc(40 / 14.4 * 1vw);
  padding-bottom: calc(20 / 14.4 * 1vw);
}

.climaxx-wide-shot-inner{
  width: calc(1330 / 14.4 * 1vw); /* same width as video/details */
}

/* Reuse existing .climaxx-shot styling but allow a full-width variant if needed */
.climaxx-shot--wide img{
  display: block;
  width: 100%;
  height: auto;
  border: var(--bdr) solid var(--ink);
  box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
}

/* Mobile: follow the same 15px margins pattern */
@media (max-width: 768px){
  .climaxx-wide-shot{
    padding-top:    calc(0 / 3.9 * 1vw);
    padding-bottom: calc(10 / 3.9 * 1vw);
  }

  .climaxx-wide-shot-inner{
    width: calc(100vw - (30 / 3.9 * 1vw));   /* 15px side margins */
    margin-left:  calc(15 / 3.9 * 1vw);
    margin-right: calc(15 / 3.9 * 1vw);
  }
}

/* Sticky wrapper stays the same */
.climaxx-sticky{
  position: sticky;
  top: calc(60 / 14.4 * 1vw);
}

/* Cream box with border + shadow */
.climaxx-panel{
  background: var(--cream);
  border: var(--bdr) solid var(--ink);
  box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
  padding: calc(40 / 14.4 * 1vw);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Red header strip with bottom border & extra padding */
.climaxx-panel-header{
  background: #D6403E;
  border-bottom: var(--bdr) solid var(--ink);
  padding: calc(50 / 14.4 * 1vw) calc(40 / 14.4 * 1vw);
  margin: calc(-40 / 14.4 * 1vw) calc(-40 / 14.4 * 1vw) calc(32 / 14.4 * 1vw); 
  /* negative side/top margins pull it full-bleed inside the box */
}
.shitibank-panel-header{
    background: #74c6db;
}
.climaxx-details-right.shitibank{
margin-top: calc(481 / 14.4 * 1vw);   
}
.shitibank-title {
    font-size: calc(39 / 14.4 * 1vw);
    line-height: 1em;
}

.hotline-panel-header{
    background: #C4E8E0;
}
.climaxx-details-right.hotline{
margin-top: calc(481 / 14.4 * 1vw);   
}

.lbm-panel-header{
    background: #F372BA;
}
.climaxx-details-right.lbm{
margin-top: calc(493 / 14.4 * 1vw);   
}
.greenwash2-panel-header{
    background: #34CC66;
}
.climaxx-details-right.greenwash2{
margin-top: calc(467 / 14.4 * 1vw);   
}

.greenwash1-panel-header{
    background: #C4E8E0;
}
.climaxx-details-right.greenwash1{
margin-top: calc(514 / 14.4 * 1vw);   
}
.candles-panel-header{
    background: #C4E8E0;
}
.climaxx-details-right.candles{
margin-top: calc(499 / 14.4 * 1vw);   
}
.chaos-panel-header{
    background: #C4E8E0;
}
.climaxx-details-right.chaos{
margin-top: calc(495 / 14.4 * 1vw);   
}


.climaxx-details-right.elon{
margin-top: calc(495 / 14.4 * 1vw);   
}
.buddies-panel-header{
    background: #C4E8E0;
}
.climaxx-details-right.buddies{
margin-top: calc(520 / 14.4 * 1vw);   
}

/* Logo styling inside header */
.climaxx-logo{
  margin: 0;
  text-align: left;
}
.climaxx-logo img{
  display: block;
  width: 100%;
  height: auto;
}

/* Body content spacing */
.climaxx-panel-body{
  padding: 0;
}

/* (You can keep your existing .climaxx-subhead and .climaxx-copy rules) */

/* Banner inside the panel, aligned to the bottom */
.climaxx-panel-banner{
  margin-top: auto; 
    border: var(--bdr) solid var(--ink); background: #FFFF70;
}

/* Keep vertical centering/padding in the inner marquee */
.climaxx-panel-banner .scrolling-text2{ 
  height: 100%;
  align-items: center;
}
.climaxx-panel-banner .scroll{
 /*  padding-top: var(--bdr); same centering trick as other banners */
}
@media (max-width: 768px){
  .climaxx-sticky{
    position: static; /* no sticky on mobile */
  }

  .climaxx-panel{
    padding: calc(24 / 3.9 * 1vw);
  }

  .climaxx-panel-header{
    margin: calc(-24 / 3.9 * 1vw) calc(-24 / 3.9 * 1vw) calc(20 / 3.9 * 1vw);
    padding: calc(32 / 3.9 * 1vw) calc(20 / 3.9 * 1vw);
  }

  .climaxx-logo img{
    width: 100%;
  }

  .climaxx-panel-banner{
    margin-left:  calc(-26 / 3.9 * 1vw);
    margin-right: calc(-26 / 3.9 * 1vw);
    margin-bottom: calc(-26 / 3.9 * 1vw);
      position: relative;
  }
}

/* Default: desktop */
.climaxx-stage--mobile{
  display: none;               /* hide top player on desktop */
}

.climaxx-shot--player-desktop{
        margin-right: calc(-560 / 14.4 * 1vw);
  display: block;              /* show desktop shot */
}

/* Make sure the player fills the shot width */
.climaxx-shot--player-desktop .player-wrap{
  width: 100%;
}
.climaxx-details-right.is-playing {
      margin-top: calc(706 / 14.4 * 1vw);

}

/* Mobile breakpoint */
@media (max-width: 768px){
  .climaxx-stage--mobile{
    display: block;            /* show top player on mobile */
  }

  .climaxx-shot--player-desktop{
    display: none;             /* hide desktop player on mobile */
  }
    .climaxx-details-right.is-playing {
      margin-top: 0;
   
}
    .shitibank-title {
    font-size: calc(23 / 3.9 * 1vw);
}
}





/* === Cube wrapper styled like the video card === */
.cube-player {
  position: relative;
  width: 100%;
  /* aspect-ratio matches your video-y feel; tweak as needed */
  aspect-ratio: 9 / 8;
  border: var(--bdr) solid var(--ink);
  box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
  overflow: hidden;
  background: #689ac1;
  max-width: calc(1200 / 14.4 * 1vw);
  margin: 0 auto;
}
.lbm .cube-player {aspect-ratio: 3 / 2;}

/* cube canvas container */
.cube3d--climaxx {
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  background: var(--cream);
  box-shadow: none;
  position: relative;
}

/* generic cube container */
.cube3d {
  width: 100%;
  height: 100%;
  position: relative;
}

/* IMPORTANT: let JS control height; don't force 100% of 0 */
.cube3d canvas {
  display: block;
  width: 100%;
  height: auto;
}

/* Optional: desktop-only layout nudge if you still want it */
.climaxx-shot--cube-desktop {
  margin-right: calc(-560 / 14.4 * 1vw);
}

.site-footer{
  background: #000;
  color: #fff;
  margin-top: calc(0 / 14.4 * 1vw); /* space above footer */
}
.section--last {margin-bottom: calc(80 / 14.4 * 1vw); /* space above footer */}

.footer-inner{
  padding-top:  calc(32 / 14.4 * 1vw);
  padding-bottom: calc(32 / 14.4 * 1vw);
  padding-left:  calc(70 / 14.4 * 1vw); /* same as header */
  padding-right: calc(70 / 14.4 * 1vw); /* same as header */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(24 / 14.4 * 1vw);
}

.footer-logo{
  display: block;
  width: calc(300 / 14.4 * 1vw); /* 300px @1440 */
  height: auto;
}

.footer-copy{
  margin: calc(12 / 14.4 * 1vw) 0 0;
  font-size: calc(10 / 14.4 * 1vw);
  line-height: 1.5;
  opacity: .9;
}

.footer-right{
  display: flex;
  align-items: center;
}

.footer-social-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.footer-ig-icon{
  display: block;
  width: calc(40 / 14.4 * 1vw); /* 60px @1440 */
  height: auto;
}


/* MOBILE: cube full-width within stage margins */
@media (max-width: 768px) {
.site-footer{
    margin-top: calc(0 / 3.9 * 1vw);
  }
.section--last {margin-bottom: calc(60 / 3.9 * 1vw); /* space above footer */}
  .footer-inner{
    padding-left:  calc(15 / 3.9 * 1vw);
    padding-right: calc(15 / 3.9 * 1vw);
    padding-top:   calc(24 / 3.9 * 1vw);
    padding-bottom: calc(40 / 3.9 * 1vw);

    display: flex;
    flex-direction: column;
    align-items: center;   /* <-- center horizontally */
    text-align: center;    /* <-- center the text */
    gap: calc(16 / 3.9 * 1vw);
  }

  .footer-left,
  .footer-right{
    display: flex;
    flex-direction: column;
    align-items: center; /* center icons & text */
  }

  .footer-logo{
    width: calc(200 / 3.9 * 1vw);
    height: auto;
  }

  .footer-copy{
    margin-top: calc(12 / 3.9 * 1vw);
    font-size: calc(10 / 3.9 * 1vw);
    opacity: 0.9;
  }

  .footer-ig-icon{
    width: calc(36 / 3.9 * 1vw);
    height: auto;
  }

  .cube-player--mobile {
    width: calc(100vw - (30 / 3.9 * 1vw)); /* same as mobile video card */
    margin-left:  calc(15 / 3.9 * 1vw);
    margin-right: calc(15 / 3.9 * 1vw);
    aspect-ratio: 9 / 8;
  }
  .climaxx-details-right.shitibank, .climaxx-details-right.hotline, .climaxx-details-right.greenwash1, .climaxx-details-right.greenwash2, .climaxx-details-right.lbm, .climaxx-details-right.candles, .climaxx-details-right.chaos, .climaxx-details-right.buddies, .climaxx-details-right.elon {margin-top: 0;}
}