/* =========================================================
   AMME / Creators & Marketers School case study
   Desktop (>= 992px): the Figma canvas is 1515px wide. --u is one design pixel at the
   current page width, so every --x / --y / --w / --h value below is taken straight from Figma.
   Phone / tablet (< 992px): sections stack in normal flow.
   ========================================================= */

.amme-cs{
	--amme-purple:#84579d;
	--amme-dark:#322d35;
	--amme-darker:#231e27;
	--amme-orange:#fcae40;
	container-type:inline-size;
	background:var(--amme-purple);
	color:#fff;
	overflow:hidden;
}
.amme-cs *{--u:calc(100cqw / 1515);}
.amme-cs img{display:block;max-width:none;}
.amme-cs h1,.amme-cs h2,.amme-cs p{margin:0;}

/* Layout primitives */
.amme-cs .band{position:relative;height:calc(var(--h) * var(--u));margin-top:calc(var(--mt, 0) * var(--u));}
.amme-cs .clip{overflow:hidden;}
.amme-cs .abs{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));}
.amme-cs .abs > img,
.amme-cs img.abs{width:100%;height:auto;}
.amme-cs img.abs{width:calc(var(--w) * var(--u));}
.amme-cs .full{width:100%;height:auto;margin-top:calc(var(--mt, 0) * var(--u));}

/* Section colours. The dark run fades from #322d35 to #231e27 like the design. */
.amme-cs .dark{display:flow-root;background:linear-gradient(to bottom, var(--amme-dark) 12.18%, var(--amme-darker) 42.92%);}
.amme-cs .dark-solid{background:var(--amme-dark);}

/* Type */
.amme-cs .title{font-size:calc(26 * var(--u));line-height:calc(31.607 * var(--u));font-weight:400;text-transform:uppercase;color:#fff;}
.amme-cs .para,
.amme-cs .para p{font-size:calc(25 * var(--u));line-height:calc(30 * var(--u));letter-spacing:calc(0.3148 * var(--u));color:#fff;}
.amme-cs .intro .para p + p{margin-top:calc(30 * var(--u));}
.amme-cs .logo img{width:100%;height:auto;}

/* Brand film */
.amme-cs .amme-video{position:relative;aspect-ratio:1515 / 714;overflow:hidden;background:#000;}
.amme-cs .amme-video .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.amme-cs .amme-video iframe{position:absolute;top:50%;left:50%;width:100%;aspect-ratio:16 / 9;height:auto;border:0;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity 600ms ease-in-out;}
.amme-cs .amme-video iframe.is-playing{opacity:1;}
.amme-cs .video-sound{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:2;padding:12px 16px;border:0;border-radius:6px;background:#000;color:#fff;font-family:'open sans', sans-serif;font-size:17px;font-weight:700;line-height:1;cursor:pointer;transition:background 300ms ease-in-out;}
.amme-cs .video-sound:hover{background:#ed008c;}
.amme-cs .amme-video{cursor:none;}

/* Pink play-circle cursor over the film, same as the homepage reel (pages/index/index.css) */
#cursor.play_video .c_icon{width:110px;height:110px;top:0;left:0;background:#ec268f;border-color:#ec268f;border-radius:200px;overflow:hidden;}
#cursor.play_video .c_icon:after{content:"";position:absolute;top:50%;left:50%;margin:0 0 0 10px;width:auto;height:auto;border:15px solid transparent;border-left:25px solid #fff;transform:translate(-50%,-50%);}
#cursor.play_video .c_text{display:none;}

/* Staircase colour bars */
.amme-cs .bar{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(378.75 * var(--u));height:calc(49 * var(--u));}
.amme-cs .bar.p{background:#85579c;}
.amme-cs .bar.t{background:#3ebab8;}
.amme-cs .bar.o{background:var(--amme-orange);}

/* "Marketing isn't a subject" box, corner brackets and palette */
.amme-cs .quote-box{height:calc(365.706 * var(--u));background:var(--amme-dark);}
.amme-cs .brackets span{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--hh) * var(--u));}
.amme-cs .brackets .frame{box-sizing:border-box;border:calc(4 * var(--u)) solid var(--amme-orange);background:var(--amme-dark);}
.amme-cs .brackets .cover{background:var(--amme-dark);}
.amme-cs .quote{font-size:calc(29.925 * var(--u));line-height:calc(39.9 * var(--u));letter-spacing:calc(0.3865 * var(--u));text-align:center;color:#fff;}
.amme-cs .palette{display:flex;height:calc(380 * var(--u));margin:0;padding:0;list-style:none;}
.amme-cs .palette li{position:relative;flex:0 0 calc(94.667 * var(--u));}
.amme-cs .palette li.c4{flex-basis:calc(496 * var(--u));}
.amme-cs .palette span{position:absolute;left:calc(14 * var(--u));top:calc(182 * var(--u));font-family:"Inter", sans-serif;font-size:calc(12 * var(--u));line-height:calc(20.153 * var(--u));letter-spacing:calc(0.1952 * var(--u));text-transform:uppercase;color:#000;}
.amme-cs .palette .c4 span{left:calc(31 * var(--u));}
.amme-cs .palette .c1{background:#85579c;}
.amme-cs .palette .c2{background:#faaf40;}
.amme-cs .palette .c3{background:#3ebab8;}
.amme-cs .palette .c4{background:#fff;}

/* "Lifetime of momentum" on the white wedge */
.amme-cs .wedge{z-index:1;}
.amme-cs .momentum{background:var(--amme-purple);} /* the artwork above has this purple baked in */
.amme-cs .lifetime{z-index:2;text-transform:none;font-family:"Inter", sans-serif;font-weight:700;font-size:calc(98 * var(--u));line-height:calc(103.5 * var(--u));text-align:center;color:var(--amme-darker);opacity:.6;}

/* Scroll animations (amme.js adds .amme-motion) */
.amme-cs .px-frame{overflow:hidden;}
.amme-cs .px-frame > img{display:block;width:100%;height:auto;will-change:transform;}
.amme-cs.amme-motion .dark{background:linear-gradient(to bottom, rgba(35,30,39,0) 12.18%, var(--amme-darker) 42.92%);} /* page colour shows through */
.amme-cs.amme-motion .dark-solid{background:transparent;}

/* Closing call to action uses the site's standard .btn-visit-website (pages/portfolio/portfolio.css) */
.amme-cs .visit-wrap .btn-visit-website{vertical-align:top;}


/* =========================================================
   Phone / tablet: stack everything
   ========================================================= */
@media (max-width: 991.98px){
	.amme-cs *{--u:1px;}
	.amme-cs .band{height:auto;margin-top:0;padding:40px 16px;display:flex;flex-direction:column;gap:20px;}
	.amme-cs .abs{position:relative;left:auto;top:auto;width:100% !important;}
	.amme-cs .full{margin-top:0;}
	.amme-cs .intro{padding-top:110px;} /* clear the fixed site header */
	.amme-cs .logo{width:150px !important;}
	.amme-cs .title{font-size:20px;line-height:26px;}
	.amme-cs .para,
	.amme-cs .para p{font-size:17px;line-height:24px;letter-spacing:0.2px;}
	.amme-cs .intro .para p + p{margin-top:16px;}

	.amme-cs .amme-video{aspect-ratio:16 / 9;}
	.amme-cs .video-sound{top:10px;padding:9px 12px;font-size:14px;}

	.amme-cs .bars{display:none;}
	.amme-cs .clip{overflow:visible;}

	.amme-cs .band > .title{order:4;}
	.amme-cs .band > .para{order:5;}
	.amme-cs .band > .visit-wrap{order:6;}
	.amme-cs .quote-box,
	.amme-cs .brackets{display:none;}
	.amme-cs .quote{order:2;padding:28px 16px;border:3px solid var(--amme-orange);font-size:22px;line-height:30px;}
	.amme-cs .palette{order:3;height:160px;}
	.amme-cs .palette li{flex:1 1 0;}
	.amme-cs .palette li.c4{flex:2 1 0;}
	.amme-cs .palette span,
	.amme-cs .palette .c4 span{left:8px;top:70px;font-size:10px;line-height:16px;}

	.amme-cs .momentum{padding-bottom:0;}
	.amme-cs .wedge{display:none;}
	.amme-cs .lifetime{margin:0 -16px;padding:40px 16px;background:#fff;font-size:44px;line-height:48px;}
}