* {
	box-sizing: border-box
}

body {
	margin: 0;
	font: 16px/1.4 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	color: #ffffff;
	background: linear-gradient(160deg, #5e50c9, #153a69) fixed;
	background: #043647;
}

.wrap {
	margin: 0 auto;
	padding: 0 28px;
}

.contain {
	max-width: 1200px;
	margin: 0px auto;
}

/* Header */
	.header {
		position: sticky;
		top: 0;
		z-index: 10;
		background: #043647;
	}
	
	.header .desktop a, .header .membership a {
		color: white;
		font-size: 18px;
		text-decoration: none;
		margin-left: 20px;
		letter-spacing: 1px;
	}
	
	.header a.tinylogin {
		display: none;	
	}
	.header a.pill {
		background: #e9552c;
		border: 2px solid #ffffff;
		font-weight: bold;
		color: #fff;
		padding: 10px 15px;
		border-radius: 100px;
	}
	
	.header a.break-left {
		border-left: 1px solid rgba(255, 255, 255, 0.5);
		padding: 20px 0px 20px 30px;
		margin-left: 30px;
	}
	
	.header a.break-right {
		border-right: 1px solid rgba(255, 255, 255, 0.5);
		padding: 20px 30px 20px 0px;
		margin-right: 80px;
	}

	.header .bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px 18px;
		max-width: 1200px;
		margin: 0px auto;
		position: relative;
	}

	.header .login {
		border: 1px solid rgba(255, 255, 255, .3);
		padding: .45rem .8rem;
		border-radius: 999px;
		font-size: .9rem;
		text-decoration: none;
		color: #fff
	}

	.header .menu-btn {
		background: transparent;
		border: 0;
		color: #fff;
		font-size: 48px;
		padding: 6px 10px;
		cursor: pointer;
		position: absolute;
		right: 20px;
		top: 30px;
	}

	.header .logo {
		width: 150px;
	}

/* Drawer */
	.backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .45);
		opacity: 0;
		pointer-events: none;
		transition: .2s;
		z-index: 100;
	}
	
	.backdrop.show {
		opacity: 1;
		pointer-events: auto
	}
	
	.drawer {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(84vw, 360px);
		background: #043647;
		transform: translateX(100%);
		transition: .25s transform ease;
		padding: 24px;
		z-index: 200;
	}
	
	.drawer.open {
		box-shadow: -8px 0 24px rgba(0, 0, 0, .35);
		transform: none
	}
	
	.drawer nav {
		margin-top: 30px;
	}
	
	.drawer a {
		display: block;
		color: #fff;
		text-decoration: none;
		padding: 14px 4px;
		font-size: 1.15rem;
		border-bottom: 1px solid rgba(255, 255, 255, .08)
	}
	
	.drawer h3 {
		margin: 4px 0 8px;
		font-size: 1.2rem;
		opacity: .9
	}
	
	.drawer .close {
		position: absolute;
		top: 20px;
		right: 30px;
		font-size: 40px;
		background: transparent;
		border: 0;
		color: #fff;
		cursor: pointer
	}
	
	
/* Strapline */
	.strapline {
		background: #5F55A5;
		text-align: center;
	}
	.strapline h1 {
		margin: 0px;
		padding: 10px 0px;
	}
	.strapline h1 span {
		font-style: normal;
		font-weight: 100;
		padding-left: 20px;
	}
	.strapline h1 strong {
		font-weight: bold;
		color: #F3684C;
	}

/* Carousel */
	.carousel {
		position: relative;
		width: 100%;
		overflow: hidden;
		background: #000;
	}
	
	.carousel-track {
		display: flex;
		transition: transform .4s ease;
	}
	
	.slide {
		position: relative;
		flex: 0 0 auto;
		height: 350px;
	}
	
	.slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	
	/* Simple overlay (optional) */
	.slide .overlay {
		position: absolute;
		left: 32px;
		bottom: 28px;
		left: 0px;
		bottom: 0px;
		right: 0px;
		padding: 60px 30px 26px;
		color: #fff;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000000);
	}
	
	.slide .overlay h2 {
		margin: 0 0 8px;
		font: 700 36px/1.1 system-ui, Arial;
		letter-spacing: .5px;
		text-transform: uppercase;
	}
	
	.slide .overlay .date {
		color: #00b3ad;
		font: 700 18px/1.2 system-ui, Arial;
		padding: 5px 0px;
	}
	
	.slide .overlay .btn {
		position: absolute;
		right: 30px;
		bottom: 26px;
		padding: 10px 18px;
		border: 2px solid #fff;
		border-radius: 22px;
		color: #fff;
		text-decoration: none;
		text-transform: uppercase;
		font: 600 13px/1 system-ui, Arial;
	}
	.slide .overlay .btn:hover {
		background: #DB5E3C;
	}
	
	/* Arrows */
	.carousel .arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 44px;
		height: 44px;
		border: 2px solid #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		background: rgba(0, 0, 0, .25);
		cursor: pointer;
		user-select: none;
	}
	
	.carousel .prev {
		left: 12px;
	}
	
	.carousel .next {
		right: 12px;
	}
	
	.carousel .arrow span {
		font-size: 20px;
		line-height: 1;
	}
	
	/* Dots */
	.dots {
		position: absolute;
		left: 50%;
		bottom: 14px;
		transform: translateX(-50%);
		display: flex;
		gap: 8px;
	}
	
	.dots button {
		width: 16px;
		height: 16px;
		border-radius: 50%;
		border: none;
		padding: 0;
		margin: 0;
		background: #777;
		opacity: .6;
		cursor: pointer;
		display: inline-block;
		/* force square box */
	}
	
	.dots button.active {
		background: #fff;
		opacity: 1;
	}
	
	@media (max-width:900px) {
		.slide {
			height: 320px;
		}
	
		.slide .overlay h2 {
			font-size: 30px;
		}
	}
	
	@media (max-width:600px) {
		.slide {
			height: 300px;
		}
	
		.slide .overlay h2 {
			font-size: 24px;
		}
		.carousel .arrow {
			display: none;
		}
		.slide .overlay {
			padding: 60px 20px 40px;
		}
		.slide .overlay .btn {
			bottom: 15px;
			right: 20px;	
		}
		.carousel .dots {
			left: 20px;
			transform: translateX(0);
		}
		.slide .overlay .date {
			padding: 0px;
		}
	}

/* How it works */
	.howitworks {
		padding: 50px 0px 75px;
	}
	.steps {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 18px;
		padding-top: 20px;
	}
	.step-card {
		background: #F36A4C;
		color: white;
		border-radius: 16px;
		padding: 18px;
		box-shadow: 0 8px 24px rgba(0,0,0,0.4);
		text-align: center;
	}
	.step-card h3 {
		color: #003547;
		margin: 6px 0 8px;
		font-size: 20px;
	}
	.step-card p { margin: 0; line-height: 1.4; }
	.step-num {
		width: 36px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		background: #003547;
		color: white;
		font-weight: 800;
		border-radius: 999px;
		box-shadow: 0 4px 10px rgba(0,0,0,0.35);
		margin: 0 auto;
	}
	
	.cta {
		display: inline-block;
		background: #2a5fb7;
		color: #fff;
		text-decoration: none;
		font-weight: 700;
		padding: .65rem 1rem;
		border-radius: 999px;
		border: 2px solid white;
		margin-top: 10px;
		cursor: pointer;
	}
	.orange { background: #DB5E3C; }
	.pink { background: #D54498; }
	.green { background: #34B883; }
	
	.mobile {
		display: none;
	}

/* Films */
	.films {
		background: #F3694C;
		background: linear-gradient(180deg, #F3694C, #043647);
		padding: 50px 0px;
	}
	.films .film-list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 18px;
		margin: 20px 0;
		clear: both;
	}
	
	.films .film-card {
		background: #fff;
		border: 1px solid #e5e5e5;
		border-radius: 8px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		text-decoration:none;
		color:inherit;
	}
	.film-card:hover { box-shadow:0 0 6px rgba(0,0,0,0.2); }
	
	.films .film-card .poster {
		position: relative;
		width: 100%
	}
	
	/* UK One Sheet ~ 27x40 portrait */
	.films .film-card .poster::before {
		content: "";
		display: block;
		aspect-ratio: 27/40;
		background: #f4f4f4
	}
	
	.films .film-card img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover
	}
	
	.films .film-card .body {
		padding: 12px 14px;
		display: flex;
		flex-direction: column;
		gap: 8px
	}
	
	.films .film-title {
		font: 600 16px/1.35 system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
		margin: 0;
		color: #043647;
	}
	
	.films .film-meta {
		color: #666;
		font: 400 13px/1.4 system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif
	}
	
	.films .btn-more {
		margin-top: auto;
		display: inline-block;
		text-decoration: none;
		background: #222;
		color: #fff;
		border-radius: 6px;
		padding: 9px 12px;
		font: 600 13px/1 system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
		text-align: center
	}
	
	.films .btn-more:hover {
		background: #000
	}
	
	.film-page .film-info {
		float: left;
		width: 65%;
	}
	.film-page .film-poster {
		width: 35%;
		float: left;
		text-align: right;
	}
	.film-page .film-poster img {
		width: 90%;
	}
	.film-page .film-info .stat {
		float: left;
		width: 50%;
		margin: 20px 0;
	}
	.film-page .film-info .stat h4 {
		margin: 0px;
		font-size: 30px;
		opacity: 0.7;
	}
	
	@media (max-width: 980px) {
		.film-page .film-info, .film-page .film-poster {
			float: left;
			width: 100%;
		}
		.film-page .film-poster img {
			width: 100%;
			padding-top: 25px;
		}
		
		.film-page .film-info .stat h4 {
			font-size: 20px;
		}
	}

/* What is The Cinema Club */
	.about {
		background: #1B2530;
		background: linear-gradient(180deg, #33ADAF, #1C4854);
		padding: 50px 0px;
	}
	.about .info {
		width: 55%;
		float: left;
	}
	.about .cards {
		width:40%;
		float: right;
		position: relative;
	}
	.about .cards img {
		width: 70%;
		margin:20px auto 0px;
		display: block;
		
		transform: rotate(-15deg);
	}
	.about .cards.map img  {
		transform: none;	
	}
	.about .cards.logos img {
		transform: none;
		width: 200px;
	}
	.about .cards img.tilt {
		position: absolute;
		left: 30%;
		top: 55%;
		transform: rotate(-8deg);
	}
	.orangetag {
		background: #E9552C;
		float: left;
		padding: 10px 20px;
		transform: rotate(-3deg);
		margin: 10px;
	}
	.titletag {
		margin: 0px 0px 20px;
		font-size: 35px;
		padding: 0px 20px 5px 0px;
		border-bottom: 1px solid white;
		float: left;
	}
	.about a {
		color: white;
	}
	.about p {
		font-size: 16px;
		line-height: 25px;
	}
	.about .cta {
		margin-right: 10px;
		text-align: center;
		width: 150px;
		text-transform: uppercase;
		color: white;
	}
	
/* Footer */
	.footer { background: #0b1d29; color: #b9c6d3; }
	.footer-grid {
		display: grid;
		grid-template-columns: 2fr 1fr 1fr 1fr;
		gap: 24px;
		padding: 40px 0;
	}
	.footer-logo { width: 150px; }
	.footer-nav h4, .footer-legal h4 { color: #fff; margin: 0 0 8px; }
	.footer-nav ul, .footer-legal ul { list-style: none; padding: 0; margin: 0; }
	.footer-nav li, .footer-legal li { margin: 6px 0; }
	.footer a { color: #cfe3ff; text-decoration: none; }
	.footer a:hover { text-decoration: underline; }
	.footer-cta .btn { display: inline-block; margin-bottom: 8px; }
	.footer-copy { border-top: 1px solid rgba(255,255,255,0.08); }
	.footer-copy p { margin: 0; padding: 14px 0; font-size: 14px; }
	
	.footer a.btn { padding: 10px 14px; border-radius: 24px; background: #4b5bb7; color: #fff; text-decoration: none; }
	.btn-primary { background: #4b5bb7; border: 2px white solid; font-weight: bold; text-decoration: none; }

	.advert {
		width: 728px;
		position: relative;
		margin: 0px auto 40px; /* centres it */
	}
	
	/* On small screens make it a square advert */
	@media (max-width: 750px) {
		.advert {
			width: 300px;
		}
	}	

/* Membership */
	.copied {
		background: #F18C2B;
		border: 2px solid white;
		color: white;
		position: fixed;
		left: 50%;
		bottom: -100px;
		width: 250px;
		margin-left: -125px;
		text-align: center;
		padding: 10px;
		border-radius: 20px;
		text-transform: uppercase;
		font-weight: bold;
		transition: bottom 0.5s ease;
	}
	
	.copied.show {
		bottom: 40px;
	}
	
	.vouchers {
	  display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
	  gap: 20px;
	  margin-top: 20px;
	}
	
	.vouchers .voucher {
	  perspective: 1000px;
	  cursor: pointer;
	  aspect-ratio: 8 / 5;
	  position: relative;
	  width: 100%;
	}
	
	.vouchers .voucher-inner {
	  position: relative;
	  width: 100%;
	  height: 100%;
	  transform-style: preserve-3d;
	  transition: transform 0.6s;
	}
	
	.vouchers .voucher.flipped .voucher-inner {
	  transform: rotateY(180deg);
	}
	
	.vouchers .voucher-front,
	.vouchers .voucher-back {
	  position: absolute;
	  top: 0; left: 0;
	  width: 100%; height: 100%;
	  backface-visibility: hidden;
	  border: 1px solid #ccc;
	  border-radius: 6px;
	  padding: 16px;
	  background: #fff;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  background-repeat: no-repeat;
	  background-position: center center;
	  background-size: cover;
	  
	}
	
	.voucher .voucher-front .onesheet {
		position: absolute;
		width: 80px;
		left: 20px;
		bottom: 20px;	
	}
	.voucher .voucher-front .fade {
		position: absolute;
		top: 50%;
		bottom: 0px;
		left: 0px;
		right: 0px;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000000);
		opacity: 0.8;
		border-radius: 6px;
	}
	
	.vouchers .voucher-front .redeemed {
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background: rgba(0, 53, 71, 0.9);
		padding: 10px;
		color: white;
	}
	
	.voucher .voucher-front .details {
		position: absolute;
		bottom: 20px;
		left: 120px;
		right: 20px;
		color: white;
	}
	.voucher .voucher-front .details p {
		font-size: 12px;
		color: #F18D2B;
		padding: 5px 0px 0px;
		margin: 0px;
		max-height: 0px;
		overflow: hidden;
		transition: max-height 1s ease;
	}
	.voucher .voucher-front:hover p {
		max-height: 500px;
	}
	.voucher .voucher-front .details h1 {
		margin: 0px;
		font-size: 20px;
	}
	
	.voucher .voucher-front .details p .cta {
		width: 100px;
		padding: 4px 8px;
		margin: 0px 10px 0xp 0px;
	}
	
	.vouchers .voucher-front p {
	  margin: 0 0 8px;
	  font-size: 0.9rem;
	  color: #444;
	}
	
	.vouchers .voucher-back {
	  transform: rotateY(180deg);
	  background-image: url('/assets/images/tcc_card_back.png');
	}
	
	.vouchers .voucher-code {
	  font-family: monospace;
	  font-weight: bold;
	  background: #D64398;
	  color: white;
	  padding: 6px 10px;
	  border-radius: 4px;
	  font-size: 20px;
	  letter-spacing: 3px;
	  position: absolute;
	  right: 10px;
	  bottom: 10px;
	}
	
	.vouchers .qr {
	  position: absolute;
	  left: 21%;
	  top: 13%;
	  height: 41%;
	}


/* Responsiveness */
	@media (max-width:1100px) {
		.desktop {
			display: none;
		}
	
		.mobile {
			display: block;
		}
	}
	
	@media (max-width: 980px) {
		.steps { 
			grid-template-columns: 1fr;
		}
		.footer-grid {
			grid-template-columns: 1fr 1fr;
		}
	}
	
	@media (max-width:800px) {
		.strapline span {
			font-size: 20px;
			display: block;
		}
	}
	
	@media (max-width:700px) {
		.about {
			padding-top: 25px;
		}
		.about .cards {
			width: 85%;
			float: none;
			padding-bottom: 23vw;
		}
		.about .info {
			width: 100%;
		}
		.about .cards img.tilt {
			top: 25%;
		}
		.footer-grid { 
			grid-template-columns: 1fr;
		}
	}
	
	@media (max-width:600px) {
		.mobile .membership {
			xdisplay: none;
		}
		.membership a {
			display: none;
		}
		
		.login .submit {
			width: 100%;
			margin-bottom: 20px;
		}
	
		.header .bar {
			padding: 8px 0px;
		}
	
		.header .menu-btn {
			right: 0px;
			top: 27px;
		}
	}