/*
 * ISO DNA overrides
 * Loaded after style.css so the vendor theme stays untouched and upgradable.
 * Palette values come from ISO_Sports_Athlete_Brand_Guidelines.pdf.
 */

/* ------------------------------------------------------------
 * Typography guard
 * Bebas Neue is loaded at a single weight. Anything asking it for 700 makes
 * the browser synthesise a bold, which thickens and blurs a condensed face —
 * that is what made the smaller card titles muddy. Synthesis is switched off
 * on the display headings so a stray weight cannot quietly bring it back.
 * ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.iso-plan-quote strong,
.iso-portal-text strong{
	font-synthesis-weight: none;
}

:root{
	--iso-black: #000000;
	--iso-red: #EE0000;
	--iso-white: #FFFFFF;
	--iso-gray: #808080;
	--iso-surface: #2A2A2A;  /* brand-specified content box */
}

/*
 * The theme's .contact-form inputs are white-on-transparent, which only works
 * inside a dark section. The sign-in card supplies that dark surface so the
 * fields stay readable on the light page background.
 */
.iso-auth-card{
	background-color: var(--iso-surface);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 40px;
	margin-top: 40px;
}

.iso-auth-card .form-label{
	display: block;
	margin-bottom: 8px;
	color: var(--iso-white);
	font-size: 14px;
	letter-spacing: 0.02em;
}

.iso-auth-card .form-check-label{
	color: var(--iso-gray);
}

.iso-auth-card .form-control{
	border-color: rgba(255, 255, 255, 0.18);
}

.iso-auth-card .alert{
	background-color: rgba(238, 0, 0, 0.12);
	border: 1px solid var(--iso-red);
	color: var(--iso-white);
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 24px;
}

/* ============================================================
 * Dark foundation
 * The theme ships light: white body with near-black type. The ISO brand
 * calls for black and charcoal foundations with white type, so this layer
 * inverts the page surface and the content text that sat on it.
 * Small white pills, circles and buttons keep their dark type on purpose.
 * ============================================================ */

body{
	background-color: var(--iso-black);
}

/* Content type that previously sat on the white page background */
h1, h2, h3, h4, h5, h6,
.post-entry h1, .post-entry h2, .post-entry h3,
.post-entry h4, .post-entry h5, .post-entry h6,
.comment-content h1, .comment-content h2, .comment-content h3,
.comment-content h4, .comment-content h5, .comment-content h6,
.comment-content ul li,
.comment-content table tr th,
.comment-list .comment .comment-meta .comment-author a,
.pagination .nav-links a,
.pagination .nav-links span,
.tag-links,
.testimonial-content p,
.contact-info-list .icon-box p,
.faq-contact-box p,
.team-sidebar-contact-list ul li strong{
	color: var(--iso-white);
}

/* Content surfaces that were white cards */
.beyond-game-item,
.accordion-item{
	background-color: var(--iso-surface);
	border-color: rgba(255, 255, 255, 0.08);
}

.service-catagery-list ul li a{
	background-color: var(--iso-surface);
	color: var(--iso-white);
}

/* Scrolled header: plain black, no gradient */
header.main-header .header-sticky.active{
	background: var(--iso-black);
}

/* Google map and other embeds read harshly against black */
.google-map iframe{
	filter: invert(0.92) hue-rotate(180deg);
}

/* ============================================================
 * Hero carousel
 * Layout follows the reference the client approved: ribbon shape over the
 * brand field on the left, athlete photography behind it, outlined wordmark
 * down the edge, thumbnail strip in the corner. Buttons reuse the theme's
 * .btn-default pill so they match the rest of the site.
 * ============================================================ */

.iso-banner{
	position: relative;
	overflow: hidden;
	background-color: var(--iso-black);
}

.iso-banner-slider,
.iso-banner-slider .swiper{
	position: relative;
}

.iso-banner-slide{
	position: relative;
	display: flex;
	align-items: center;
	min-height: 800px;
	overflow: hidden;
}

/* GSAP animates these on slide change */
.iso-banner-shape,
.iso-banner-content > *{
	will-change: transform, opacity;
}

.iso-banner-slide .container{
	position: relative;
	z-index: 3;
}

/* Photography sits full-bleed behind the shape */
.iso-banner-media{
	position: absolute;
	inset: 0;
	z-index: 0;
}

.iso-banner-media picture{
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * The client's pack is already graded to the black-and-red system, so only a
 * light knock-back here — the heavy filter this used to carry was for the
 * daylight stock it replaced, and it drained the red out of these.
 */
.iso-banner-media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--iso-banner-focus, center);
	filter: brightness(0.94);
	will-change: transform;
}

/* A low red wash over the photo, so every sport shares one colour temperature */
.iso-banner-media::after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(238,0,0,.16) 0%, rgba(0,0,0,0) 46%),
	            radial-gradient(70% 90% at 76% 52%, rgba(238,0,0,.13) 0%, rgba(0,0,0,0) 70%);
	mix-blend-mode: screen;
	pointer-events: none;
}

/* The ribbon shape: brand field on the left, transparent over the photo.
   The basketball line-art that used to sit behind the headline is gone: the
   banner now carries four sports, so a single sport's ball cannot brand it. */
.iso-banner-shape{
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: url('../images/banner-shape.svg');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 78% 100%;
}

/* Settle the photo down so white kit does not fight the headline */
.iso-banner-shape::after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 78%, rgba(0,0,0,.62) 100%);
}

/* Keep the masthead legible where the shape runs behind it */
.iso-banner-shape::before{
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 200px;
	background: linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.30) 62%, rgba(0,0,0,0) 100%);
}

.iso-banner-content{
	max-width: 620px;
	padding: 70px 0;
}

.iso-banner-eyebrow{
	display: inline-block;
	margin-bottom: 26px;
	padding-bottom: 12px;
	border-bottom: 2px solid rgba(255, 255, 255, 0.45);
	color: var(--iso-white);
	font-family: var(--e-global-typography-accent-font-family);
	font-size: 18px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.iso-banner-title{
	margin-bottom: 26px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: clamp(44px, 5.6vw, 84px);
	line-height: 0.95em;
	text-transform: uppercase;
}

.iso-banner-intro{
	max-width: 545px;
	margin-bottom: 38px;
	color: rgba(255, 255, 255, 0.88);
	font-size: 15px;
	line-height: 1.75em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.iso-banner-actions{
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Second action mirrors the theme's highlighted hero button */
.iso-banner-actions .btn-default.btn-highlighted{
	background-color: var(--iso-white);
	color: var(--iso-black);
}

.iso-banner-actions .btn-default.btn-highlighted:hover{
	color: var(--iso-white);
}

/* Carousel dots */
.iso-banner-slider .swiper-pagination{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 42px;
	z-index: 4;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.iso-banner-slider .swiper-pagination-bullet{
	width: 10px;
	height: 10px;
	margin: 0;
	opacity: 1;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.35);
	transition: background-color .25s ease, transform .25s ease;
}

.iso-banner-slider .swiper-pagination-bullet-active{
	background-color: var(--iso-red);
	transform: scale(1.35);
}

/* Outlined wordmark running down the right edge */
.iso-banner-edge{
	position: absolute;
	top: 46%;
	right: 34px;
	z-index: 4;
	display: flex;
	gap: 8px;
	transform: translateY(-50%);
	pointer-events: none;
}

.iso-banner-edge span{
	writing-mode: vertical-rl;
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 130px;
	line-height: .92;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.34);
}

/* Thumbnail strip in the lower-right corner */
.iso-banner-thumbs{
	position: absolute;
	right: 40px;
	bottom: 40px;
	z-index: 4;
	display: flex;
	gap: 12px;
	padding: 14px;
	background-color: rgba(255, 255, 255, 0.10);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.16);
}

.iso-banner-thumb{
	width: 84px;
	height: 72px;
	overflow: hidden;
	border: 2px solid transparent;
}

.iso-banner-thumb.is-active{
	border-color: var(--iso-red);
}

.iso-banner-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1199px){
	.iso-banner-edge{ display: none; }
	.iso-banner-shape{ background-size: 108% 100%; }
}

@media (max-width: 991px){
	.iso-banner-slide{ min-height: 640px; }

	/* The ribbon is cut for a wide frame; on a narrow one its diagonal lands
	   mid-screen as a stray wedge. Dropped, with a vertical scrim carrying the
	   text contrast instead. */
	.iso-banner-shape{ background-image: none; }

	/* Deeper through the middle than it used to be: the athlete now fills the
	   frame on a phone, and the intro line sits right over them. */
	.iso-banner-shape::after{
		background:
			linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.52) 46%, rgba(0,0,0,.86) 100%),
			linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 62%, rgba(0,0,0,0) 100%);
	}

	.iso-banner-thumbs{ display: none; }
}

@media (max-width: 575px){
	.iso-banner-slide{ min-height: 560px; }
	.iso-banner-content{ padding: 46px 0; }
	.iso-banner-intro{ font-size: 14px; }

	/* Trimmed so the longer label still clears the gutter on a small phone */
	.iso-banner-actions .btn-default{
		padding-left: 22px;
		font-size: 16px;
	}

	.iso-banner-actions .btn-default i{
		width: 34px;
		height: 34px;
		font-size: 17px;
	}
}

/* ============================================================
 * Utility bar above the masthead
 * ============================================================ */

.iso-topbar{
	position: relative;
	z-index: 20;
	background-color: #0A0A0A;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.iso-topbar-inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 52px;
}

.iso-topbar-left,
.iso-topbar-right{
	display: flex;
	align-items: center;
	gap: 22px;
}

.iso-topbar-social{
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iso-topbar-social a{
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.10);
	color: var(--iso-white);
	font-size: 12px;
	transition: background-color .25s ease, color .25s ease;
}

.iso-topbar-social a:hover{
	background-color: var(--iso-red);
	color: var(--iso-white);
}

.iso-topbar-tagline{
	color: var(--iso-gray);
}

.iso-topbar-link{
	color: var(--iso-white);
}

.iso-topbar-link strong{
	color: var(--iso-red);
	font-weight: inherit;
}

.iso-topbar-link:hover{
	color: var(--iso-red);
}

@media (max-width: 991px){
	.iso-topbar{ display: none; }
}

/* The theme's masthead is absolutely positioned at top:0 and would cover the
   utility bar, so drop it by the bar's height. The sticky state stays at top:0
   because the bar has scrolled away by then. */
 

/* ============================================================
 * Fossphorus credit + hover confetti
 * Ported from the ComplyEZE build (public/frontend-assets/dist/css/style.css)
 * and recoloured for the ISO palette — ComplyEZE burst red on black, which
 * would be invisible against this footer.
 * ============================================================ */

.powered-by{
	position: relative;
	display: inline-block;
}

.powered-by a{
	color: var(--iso-white);
	text-decoration: none;
	white-space: nowrap;
}

.powered-by a img{
	vertical-align: -3px;
	margin-right: 2px;
}

.powered-by a:hover{
	color: var(--iso-red);
}

.confetti-container{
	position: absolute;
	top: -5%;
	left: 15%;
	transform: translate(-52%, -50%);
	width: 100px;
	height: 100px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s;
}

.powered-by:hover .confetti-container{
	opacity: 1;
}

.confetti{
	position: absolute;
	top: 0;
	left: 50%;
	width: calc(60px + (var(--p) * 200px) + calc(var(--random) * 10%));
	height: calc((var(--random) * 120px) + 170px);
	border-radius: 40% 90% 0 0;
	pointer-events: none;
}

.confetti:nth-child(even){
	transform: scale(-1, 1);
	left: auto;
	right: 50%;
}

.confetti::before{
	content: '';
	display: block;
	width: 12px;
	height: 6px;
	background-color: var(--color);
	animation: confetti 2s cubic-bezier(0.5, 0, 0.5, 1) both,
		confetti-opacity 2s cubic-bezier(0.5, 0, 0.5, 1) both;
	animation-duration: calc(1.4s + (var(--random) * 0.5s));
	animation-delay: calc(0.6s * (var(--random) - 0.5) * 2);
	animation-iteration-count: infinite;
	offset-path: padding-box;
}

@keyframes confetti{
	0%{
		offset-distance: -10%;
		offset-rotate: 0turn;
	}

	100%{
		offset-distance: 38%;
		offset-rotate: calc(4turn + var(--random) * 2turn);
	}
}

@keyframes confetti-opacity{
	0%{
		opacity: 0;
	}

	20%,
	40%{
		opacity: 1;
	}

	95%,
	100%{
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce){
	.confetti-container{
		display: none;
	}
}

/* ============================================================
 * Footer subscribe column
 * The wide subscribe row moved into the footer grid, taking the slot the
 * Services column vacated. Narrower than the original, so the field and
 * button stack instead of sitting side by side.
 * ============================================================ */

/* The theme's four columns add up to 116% once the subscribe column joins them,
   so they wrapped. Re-proportion them to sit on one row. */
.footer-main-box .footer-about{
	width: 30%;
}

.footer-main-box .footer-links{
	width: 18%;
}

.footer-main-box .footer-info{
	width: 26%;
}

.footer-subscribe-col{
	width: 26%;
	padding-left: 2.6vw;
}

.footer-subscribe-col > p{
	margin-bottom: 22px;
	color: var(--iso-gray);
}

.footer-subscribe-col .footer-subscribe-form{
	width: 100%;
	padding-left: 0;
}

/* Field and send button share one pill, as the theme intended; the button is
   icon-only so it fits the narrower column. */
.footer-subscribe-col .form-group{
	border-color: rgba(255, 255, 255, 0.18);
}

.footer-subscribe-col .form-group:focus-within{
	border-color: var(--iso-red);
}

.footer-subscribe-col .email-field{
	min-width: 0;
	color: var(--iso-white);
	padding: 10px 6px 10px 18px;
}

.footer-subscribe-col .newsletter-btn{
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	background-color: var(--iso-red);
	color: var(--iso-white);
	font-size: 16px;
}

.footer-subscribe-col .newsletter-btn:hover{
	background-color: var(--iso-white);
	color: var(--iso-black);
}

@media (max-width: 991px){
	.footer-subscribe-col{
		width: 100%;
		padding-left: 0;
		margin-top: 40px;
	}
}

/* The three "what we do" plates crossfade as they rotate through the cards. */
.what-we-do-images img{
	transition: opacity 0.3s ease-in-out;
}

/* ============================================================
 * Highlight thumbnails: play affordance on hover
 * ============================================================ */

.match-highlight-img{
	position: relative;
	overflow: hidden;
}

.match-highlight-img::after{
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.match-highlight-img .iso-play{
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	margin: -33px 0 0 -33px;
	border-radius: 50%;
	background-color: var(--iso-red);
	color: var(--iso-white);
	font-size: 22px;
	opacity: 0;
	transform: scale(0.72);
	transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
	pointer-events: none;
}

.match-highlight-item:hover .match-highlight-img::after{
	opacity: 1;
}

.match-highlight-item:hover .match-highlight-img .iso-play{
	opacity: 1;
	transform: scale(1);
}

.match-highlight-img .iso-play::before{
	content: '';
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	border: 2px solid rgba(238, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce){
	.match-highlight-img .iso-play{
		transition: none;
	}
}

/*
 * Second pass on currentColor-style contrast bugs. These selectors take
 * --e-global-color-primary as their TEXT colour but paint no light background of
 * their own, so on the black page they rendered black on black. The "Learn more"
 * label on blog cards was invisible this way, with only its red arrow showing.
 * Anything that does supply its own white pill or circle is deliberately left
 * dark and is not listed here.
 */
.blog-item .readmore-btn,
.post-item-btn a:hover,
.main-menu ul li.highlighted-menu a,
.main-menu ul ul li a:hover,
.team-sidebar-social ul li a,
.progressbar-fill span,
.page-single-post .comment-box .comment-reply-title,
.page-single-post .comment-box .title-comments{
	color: var(--iso-white);
}

.blog-item .readmore-btn:hover{
	color: var(--iso-red);
}

/* ============================================================
 * Navigation
 * The theme sets a size on the nav links but no family, so they fell back to
 * the body face while every other control uses the display face. Match them,
 * and give them a little more size and tracking so they read on the dark bar.
 * ============================================================ */

.main-menu ul li a{
	font-family: var(--e-global-typography-accent-font-family);
	font-size: 21px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.main-menu ul li.active > a,
.main-menu ul li a:hover{
	color: var(--iso-red);
}

/* Header call to action: red pill with a black arrow disc */
.header-btn .btn-default{
	background: var(--iso-red);
	color: var(--iso-white);
}

.header-btn .btn-default i{
	background-color: var(--iso-black);
	color: var(--iso-white);
}

.header-btn .btn-default::after{
	background: var(--iso-black);
}

.header-btn .btn-default:hover i{
	background-color: var(--iso-red);
}

/* ============================================================
 * Mobile
 * The utility bar is hidden below 992px, so the masthead offset that clears it
 * must go too — otherwise the header floats 52px down over the banner copy.
 * The banner then needs enough head room to clear the masthead, and the
 * carousel dots need to sit clear of the buttons rather than on top of them.
 * ============================================================ */

@media (max-width: 991px){
	header.main-header{
		top: 0;
	}

	.iso-banner-slide{
		min-height: 0;
		padding: 132px 0 96px;
	}

	.iso-banner-content{
		max-width: none;
		padding: 0;
	}

	.iso-banner-eyebrow{
		margin-bottom: 18px;
		font-size: 16px;
		letter-spacing: 0.16em;
	}

	.iso-banner-title{
		margin-bottom: 18px;
	}

	.iso-banner-intro{
		max-width: none;
		margin-bottom: 28px;
	}

	/* one column, equal widths, so the two pills line up */
	/* Sized to their labels rather than the viewport: stretched edge to edge
	   over the photograph they read as slabs, not buttons. */
	.iso-banner-actions{
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 12px;
	}

	.iso-banner-actions .btn-default{
		width: auto;
		justify-content: flex-start;
	}

	/* Stay inside the banner frame — static dropped them onto the black
	   below it. The slide's bottom padding leaves room under the buttons. */
	.iso-banner-slider .swiper-pagination{
		bottom: 30px;
	}
}

@media (max-width: 575px){
	.iso-banner-slide{
		padding: 118px 0 84px;
	}

	.iso-banner-title{
		font-size: clamp(34px, 11vw, 46px);
	}

	.iso-banner-intro{
		font-size: 13px;
		line-height: 1.7em;
	}
}

/* ============================================================
 * Mobile: overlay panels that only work beside a wide image
 * The theme floats several cards on top of a section image with absolute
 * positioning. Once the columns stack those cards sit over the artwork or
 * spill past it, so below 992px they return to the normal flow.
 * ============================================================ */

@media (max-width: 991px){
	.about-coach-box,
	.testimonial-counter-boxes{
		position: static;
		inset: auto;
		transform: none;
		margin-top: 18px;
	}

	.testimonial-counter-boxes{
		flex-direction: row;
		flex-wrap: wrap;
		gap: 12px;
	}

	.testimonial-counter-item{
		flex: 1 1 160px;
		min-width: 0;
	}

	/* the rotating "contact us" dial sat in a big gap beside the check list */
	.why-choose-body{
		gap: 24px;
	}

	.why-choose-body .check-list{
		width: 100%;
	}

	.contact-circle-counter-box{
		margin: 0;
	}

	/* fixture rows: team crests inline with the names instead of stacked */
	.match-schedule-item{
		flex-wrap: wrap;
		justify-content: center;
		gap: 14px;
		padding: 22px 18px;
		text-align: center;
	}

	.match-schedule-item .match-team-icon{
		order: 1;
	}

	.match-schedule-item .match-schedule-content{
		order: 2;
		flex: 1 1 100%;
	}
}

/* ============================================================
 * Mobile: footer columns and control sizing
 * The four-column footer widths above are desktop proportions; without this
 * they leave each column a fraction of a phone screen, which is what made
 * "Follow us on" wrap and the social icons fall into a 2x2 block.
 * ============================================================ */

@media (max-width: 991px){
	.footer-main-box .footer-about,
	.footer-main-box .footer-links,
	.footer-main-box .footer-info,
	.footer-subscribe-col{
		width: 100%;
		padding-left: 0;
	}

	.footer-about{
		padding-right: 0;
	}

	.footer-social-link h3{
		font-size: 20px;
		margin-bottom: 12px;
	}

	.footer-social-link ul{
		flex-wrap: nowrap;
	}

	/* the theme's pill is sized for desktop; trim it so it does not dominate */
	.btn-default{
		font-size: 16px;
		padding: 5px 5px 5px 22px;
	}

	.btn-default i{
		width: 34px;
		height: 34px;
		font-size: 16px;
		padding: 6px;
	}

	.readmore-btn,
	.blog-item .readmore-btn{
		font-size: 16px;
	}

	.testimonial-counter-item{
		padding: 14px 18px;
	}

	.testimonial-counter-item .counter-value{
		font-size: 34px;
	}
}

/* Sport name plus its status, on the banner eyebrow */
.iso-banner-eyebrow span{
	display: inline-block;
	margin-left: 12px;
	padding: 4px 12px 3px;
	border-radius: 999px;
	background-color: var(--iso-red);
	color: var(--iso-white);
	font-family: var(--e-global-typography-text-font-family);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	vertical-align: middle;
}

/* The thumbnail strip doubles as the sport switcher */
.iso-banner-thumb{
	position: relative;
	cursor: pointer;
	transition: border-color .25s ease, transform .25s ease;
}

.iso-banner-thumb:hover{
	transform: translateY(-3px);
}

.iso-banner-thumb img{
	filter: brightness(0.62) saturate(0.5);
	transition: filter .25s ease;
}

.iso-banner-thumb.is-active img{
	filter: brightness(0.9) saturate(0.85);
}

.iso-banner-thumb-label{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 3px 4px;
	background-color: rgba(0, 0, 0, 0.72);
	color: var(--iso-white);
	font-family: var(--e-global-typography-text-font-family);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

.iso-banner-thumb.is-active .iso-banner-thumb-label{
	background-color: var(--iso-red);
}

@media (prefers-reduced-motion: reduce){
	.iso-banner-thumb:hover{ transform: none; }
}

/* ============================================================
 * Primary navigation
 * The client's menu carries one dropdown, "Who It's For". The vendor theme
 * has no submenu styling of its own, so it is built here. SlickNav handles
 * the same markup on mobile without any extra work.
 * ============================================================ */

header.main-header .main-menu ul.navbar-nav > li.iso-has-submenu{
	position: relative;
}

.iso-submenu-caret{
	margin-left: 7px;
	font-size: 9px;
	vertical-align: middle;
	transition: transform .25s ease;
}

li.iso-has-submenu:hover > a .iso-submenu-caret{
	transform: rotate(180deg);
}

header.main-header .main-menu ul.navbar-nav li .iso-submenu{
	position: absolute;
	top: calc(100% + 12px);
	left: -18px;
	z-index: 20;
	width: 392px;
	padding: 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	background:
		radial-gradient(120% 70% at 50% 0%, rgba(238, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 60%),
		#0B0B0B;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .7);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}

/* A bridge across the gap, so the menu survives the trip down to it */
header.main-header .main-menu ul.navbar-nav li .iso-submenu::before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -16px;
	height: 16px;
}

header.main-header .main-menu ul.navbar-nav li.iso-has-submenu:hover > .iso-submenu,
header.main-header .main-menu ul.navbar-nav li.iso-has-submenu:focus-within > .iso-submenu{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* The theme styles every nested ul as its own dropdown — absolute, hidden,
   220px wide, red. This one is just a list inside our panel, so it is reset. */
header.main-header .main-menu ul.navbar-nav li .iso-submenu li{
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

header.main-header .main-menu ul.navbar-nav li .iso-submenu li a{
	display: flex;
	gap: 13px;
	align-items: center;
	padding: 11px 12px;
	border-radius: 12px;
	color: var(--iso-white);
	text-transform: none;
	white-space: normal;
	transition: background-color .2s ease;
}

header.main-header .main-menu ul.navbar-nav li .iso-submenu li a:hover,
header.main-header .main-menu ul.navbar-nav li .iso-submenu li.active a{
	background-color: rgba(255, 255, 255, 0.055);
}

.main-menu .iso-submenu-icon{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	border: 1px solid rgba(238, 0, 0, 0.38);
	background-color: rgba(238, 0, 0, 0.12);
	color: var(--iso-red);
	font-size: 14px;
	transition: background-color .2s ease, color .2s ease;
}

.main-menu .iso-submenu li a:hover .iso-submenu-icon{
	background-color: var(--iso-red);
	color: var(--iso-white);
}

.main-menu .iso-submenu-text{
	flex: 1 1 auto;
	min-width: 0;
}

.main-menu .iso-submenu-text strong{
	display: block;
	color: var(--iso-white);
	font-family: var(--e-global-typography-text-font-family);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3em;
	letter-spacing: 0;
}

.main-menu .iso-submenu-text em{
	display: block;
	margin-top: 3px;
	color: rgba(255, 255, 255, 0.52);
	/* The theme uppercases every menu link in the display face; a one-line
	   description has to read as a sentence instead. */
	font-family: var(--e-global-typography-text-font-family);
	font-size: 12.5px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.45em;
	text-transform: none;
}

.main-menu .iso-submenu-go{
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.28);
	font-size: 11px;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .2s ease, transform .2s ease;
}

.main-menu .iso-submenu li a:hover .iso-submenu-go{
	color: var(--iso-red);
	opacity: 1;
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce){
	.main-menu .iso-submenu-go{ transition: none; }
}

/* The masthead pair: a red Log In beside the white Create Profile, matching
   the primary/secondary pairing used on the closing CTA. */
/* Only from 992px up: below that the theme hides .header-btn entirely and the
   actions live in the slide-out menu, so this must not force it back on. */
@media only screen and (min-width: 992px){
	.header-btn{
		display: flex;
		align-items: center;
		gap: 12px;
	}
}

@media only screen and (max-width: 991px){

	/* SlickNav rebuilds the menu for mobile; the desktop dropdown must not show */
	header.main-header .main-menu ul.navbar-nav li .iso-submenu{
		display: none;
	}
}

/* ============================================================
 * Standard content pages
 * Shared layout for How It Works, Sports, the five "Who It's For" pages,
 * Pricing and the footer legal documents.
 * ============================================================ */

.iso-standard-lead{
	max-width: 780px;
	margin-bottom: 56px;
	color: var(--iso-white);
	font-size: 20px;
	line-height: 1.65em;
}

.iso-standard-block{
	max-width: 900px;
	margin-bottom: 54px;
}

.iso-standard-block:last-of-type{
	margin-bottom: 0;
}

.iso-standard-heading{
	margin-bottom: 20px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.08em;
	text-transform: uppercase;
}

.iso-standard-body{
	margin-bottom: 16px;
	color: rgba(255, 255, 255, 0.74);
	font-size: 16px;
	line-height: 1.8em;
}

.iso-standard-terms{
	margin: 26px 0 0;
}

.iso-standard-term{
	padding: 18px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.iso-standard-term:last-child{
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.iso-standard-term dt{
	margin-bottom: 6px;
	color: var(--iso-white);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.iso-standard-term dd{
	margin: 0;
	color: rgba(255, 255, 255, 0.70);
	font-size: 15px;
	line-height: 1.75em;
}

.iso-standard-list{
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.iso-standard-list li{
	display: flex;
	gap: 13px;
	align-items: flex-start;
	margin-bottom: 14px;
	color: rgba(255, 255, 255, 0.80);
	font-size: 16px;
	line-height: 1.7em;
}

.iso-standard-list li i{
	margin-top: 5px;
	color: var(--iso-red);
	font-size: 15px;
}

.iso-standard-note{
	margin-top: 22px;
	padding-left: 16px;
	border-left: 2px solid var(--iso-red);
	color: rgba(255, 255, 255, 0.58);
	font-size: 14px;
	line-height: 1.7em;
}

.iso-standard-quote{
	max-width: 820px;
	margin: 0;
	padding: 26px 0 26px 26px;
	border-left: 3px solid var(--iso-red);
	color: var(--iso-white);
	font-size: clamp(19px, 2.2vw, 25px);
	font-style: italic;
	line-height: 1.5em;
}

.iso-standard-cta{
	margin-top: 56px;
}

/* ============================================================
 * Footer app badges
 * The store artwork here is drawn in-house. Swap in Apple's and Google's
 * official badge files before launch — both have brand guidelines that
 * require their supplied assets.
 * ============================================================ */

.footer-apps{
	margin-top: 30px;
}

/* Sits under the social row, so it reads as one line of label rather than
   a second column heading. */
.footer-apps-title{
	margin-bottom: 12px;
	color: rgba(255, 255, 255, 0.70);
	font-family: var(--e-global-typography-accent-font-family);
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.footer-apps ul{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-app-badge{
	display: block;
	border-radius: 8px;
	transition: transform .25s ease, opacity .25s ease;
}

.footer-app-badge img{
	display: block;
	width: 142px;
	height: auto;
}

.footer-app-badge:hover{
	transform: translateY(-2px);
	opacity: 0.86;
}

.footer-app-badge:focus-visible{
	outline: 2px solid var(--iso-red);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
	.footer-app-badge:hover{ transform: none; }
}

/* ============================================================
 * Home sections
 * Shared shell for the rebuilt home page, then each section's own parts.
 * ============================================================ */

.iso-section{
	position: relative;
	padding: 110px 0;
	background-color: var(--iso-black);
}

/* Content clears the band's glow and grid. */
.iso-section > .container{
	position: relative;
	z-index: 1;
}

/* Every boundary gets a red filament rather than a grey rule — it fires at the
   centre and dies out at the edges, so it reads as a deliberate seam in the
   brand's own colour instead of a border someone forgot to remove. */
.iso-section + .iso-section::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		rgba(238, 0, 0, 0) 0%,
		rgba(238, 0, 0, 0.14) 18%,
		rgba(238, 0, 0, 0.85) 50%,
		rgba(238, 0, 0, 0.14) 82%,
		rgba(238, 0, 0, 0) 100%
	);
	pointer-events: none;
	z-index: 2;
}

/* Tone B, alternating with the base black down the page. The band is what
   carries the texture: a red bloom off the top edge over a 16px blueprint grid
   with a brighter major line every fourth cell. Keeping it to the band rather
   than the whole page is the point — the plain black sections either side are
   what make it land as a change of section.

   Layer order is bloom, majors, minors: first listed paints on top, so the
   bloom tints the grid red near the top edge instead of sitting under it. */
.iso-section-inset{
	background-color: #08080B;
	background-image:
		radial-gradient(125% 70% at 50% 0%, rgba(238, 0, 0, 0.15) 0%, rgba(238, 0, 0, 0) 60%),
		linear-gradient(rgba(255, 255, 255, 0.07) 1px, rgba(0, 0, 0, 0) 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, rgba(0, 0, 0, 0) 1px),
		linear-gradient(rgba(255, 255, 255, 0.028) 1px, rgba(0, 0, 0, 0) 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, rgba(0, 0, 0, 0) 1px);
	background-size:
		100% 100%,
		64px 64px,
		64px 64px,
		16px 16px,
		16px 16px;
	background-position: center top;
	background-repeat: no-repeat, repeat, repeat, repeat, repeat;
}

.iso-section-head{
	margin-bottom: 40px;
}

.iso-section-title{
	margin-bottom: 18px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: clamp(34px, 4.4vw, 58px);
	line-height: 1.02em;
	text-transform: uppercase;
}

.iso-section-lead{
	max-width: 520px;
	margin: 0;
	color: rgba(255, 255, 255, 0.70);
	font-size: 17px;
	line-height: 1.7em;
}

/* Term / description pairs, the client's most repeated pattern */

/* ------------------------------------------------------------
 * The ISO Score card
 * Built as live markup, not a screenshot: the visual direction requires
 * headings, numbers and labels to stay real HTML.
 * ------------------------------------------------------------ */

.iso-score-card{
	position: relative;
	margin: 0;
	padding: 34px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 20px;
	background:
		radial-gradient(120% 90% at 78% 8%, rgba(238, 0, 0, .16) 0%, rgba(0, 0, 0, 0) 60%),
		linear-gradient(160deg, #101010 0%, #070707 60%, #140002 100%);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
	overflow: hidden;
}

/* Faint measurement grid, matching the product panels */
.iso-score-card::before{
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 40px),
		repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 40px);
	pointer-events: none;
}

.iso-score-card > *{
	position: relative;
}

.iso-score-arc{
	transition: stroke-dashoffset 1.6s cubic-bezier(.22, 1, .36, 1);
}

.iso-score-fill{
	display: block;
	width: 0;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #8A0000 0%, var(--iso-red) 100%);
	transition: width 1.25s cubic-bezier(.22, 1, .36, 1);
}

@media only screen and (max-width: 991px){
	.iso-section{ padding: 72px 0; }
	.iso-section-lead{ max-width: none; }
}

@media only screen and (max-width: 575px){
	.iso-score-card{ padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce){
	.iso-score-arc,
	.iso-score-fill{ transition: none; }
}

/* ------------------------------------------------------------
 * Home section 3 — every sport gets its own version
 * ------------------------------------------------------------ */

.iso-section-head-center{
	max-width: 800px;
	margin-inline: auto;
	margin-bottom: 52px;
	text-align: center;
}

.iso-section-head-center .iso-section-lead{
	max-width: none;
}

/* Five sports: three on the top row, two centred under them. The grid runs
   on six columns so the tail can be nudged half a column across. */
.iso-sport-grid{
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iso-sport-card{
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	background-color: #0E0E0E;
	transition: border-color .25s ease, transform .25s ease;
}

.iso-sport-card:nth-child(4):nth-last-child(2){
	grid-column: 2 / span 2;
}

.iso-sport-card:hover{
	border-color: rgba(238, 0, 0, 0.55);
	transform: translateY(-4px);
}

.iso-sport-card-media{
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.iso-sport-card-media picture,
.iso-sport-card-media img{
	display: block;
	width: 100%;
	height: 100%;
}

.iso-sport-card-media img{
	object-fit: cover;
	/* The client's pack arrives graded; this only knocks it back far enough
	   for the status badge to stay readable over it. */
	filter: brightness(0.86);
	transition: filter .3s ease, transform .5s ease;
}

.iso-sport-card:hover .iso-sport-card-media img{
	filter: brightness(1);
	transform: scale(1.04);
}

/* Red wash, again matching the banner grade */
.iso-sport-card-media::after{
	content: '';
	position: absolute;
	inset: 0;
	/* Enough of a top and bottom fall-off to seat the badge and the card body,
	   no more — the frames are already dark where they need to be */
	background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,.48) 100%);
	pointer-events: none;
}

/* Status badge: three states, each carrying a word as well as a colour */
.iso-status{
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 5px 11px 4px;
	border-radius: 999px;
	font-family: var(--e-global-typography-text-font-family);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.iso-status-live{
	background-color: var(--iso-red);
	color: var(--iso-white);
}

.iso-status-pilot{
	background-color: rgba(255, 255, 255, 0.92);
	color: var(--iso-black);
}

.iso-status-development{
	background-color: rgba(0, 0, 0, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.40);
	color: rgba(255, 255, 255, 0.88);
}

.iso-sport-card-body{
	padding: 20px 20px 24px;
}

.iso-sport-card-body h3{
	margin-bottom: 8px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 26px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.iso-sport-card-body p{
	margin: 0;
	color: rgba(255, 255, 255, 0.64);
	font-size: 14px;
	line-height: 1.65em;
}

/* The "your sport is next" strip under the grid */
.iso-sport-next{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	margin-top: 34px;
	padding: 32px 36px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-left: 3px solid var(--iso-red);
	border-radius: 16px;
	background:
		radial-gradient(90% 140% at 4% 50%, rgba(238, 0, 0, .14) 0%, rgba(0, 0, 0, 0) 62%),
		#0E0E0E;
}

.iso-sport-next-copy{
	flex: 1 1 420px;
}

.iso-sport-next-copy h3{
	margin-bottom: 8px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: clamp(24px, 2.6vw, 32px);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.iso-sport-next-copy p{
	max-width: 640px;
	margin: 0;
	color: rgba(255, 255, 255, 0.66);
	font-size: 15px;
	line-height: 1.7em;
}

@media only screen and (max-width: 1199px){
	.iso-sport-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

	/* Two across, with a lone fifth card centred rather than stranded left */
	.iso-sport-card:nth-child(4):nth-last-child(2){ grid-column: span 2; }
	.iso-sport-card:nth-child(5):last-child{ grid-column: 2 / span 2; }
}

@media only screen and (max-width: 575px){
	.iso-sport-grid{ grid-template-columns: 1fr; }
	.iso-sport-card,
	.iso-sport-card:nth-child(4):nth-last-child(2),
	.iso-sport-card:nth-child(5):last-child{ grid-column: auto; }
	.iso-sport-next{ padding: 26px 22px; }

	/* Four stacked 4:3 cards is a long scroll on a phone; crop them shorter */
	.iso-sport-card-media{ aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce){
	.iso-sport-card:hover{ transform: none; }
	.iso-sport-card:hover .iso-sport-card-media img{ transform: none; }
}

/* ------------------------------------------------------------
 * Home section 4 — one number, every layer underneath it
 * ------------------------------------------------------------ */

.iso-checklist{
	margin: 0;
	padding: 0;
	list-style: none;
}

.iso-checklist li{
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 13px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.82);
	font-size: 16px;
	line-height: 1.65em;
}

.iso-checklist li i{
	margin-top: 5px;
	flex: 0 0 auto;
	color: var(--iso-red);
	font-size: 15px;
}

.iso-pullquote{
	margin: 30px 0 0;
	padding: 20px 0 20px 24px;
	border-left: 3px solid var(--iso-red);
	color: var(--iso-white);
	font-size: clamp(18px, 2vw, 23px);
	font-style: italic;
	line-height: 1.5em;
}

/* The charting card */
.iso-chart-card{
	position: relative;
	margin: 0;
	padding: 28px 30px 24px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 20px;
	background:
		radial-gradient(110% 80% at 18% 6%, rgba(238, 0, 0, .14) 0%, rgba(0, 0, 0, 0) 58%),
		linear-gradient(160deg, #101010 0%, #070707 60%, #140002 100%);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}

.iso-chart-head{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 20px;
}

.iso-chart-title{
	display: block;
	color: var(--iso-white);
	font-family: var(--e-global-typography-accent-font-family);
	font-size: 24px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.iso-chart-meta{
	display: block;
	margin-top: 5px;
	color: rgba(255, 255, 255, 0.50);
	font-size: 13px;
}

.iso-chart-delta{
	flex: 0 0 auto;
	padding: 7px 14px 6px;
	border-radius: 999px;
	background-color: rgba(238, 0, 0, 0.16);
	border: 1px solid rgba(238, 0, 0, 0.55);
	color: var(--iso-white);
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.iso-chart{
	display: block;
	width: 100%;
	height: auto;
}

.iso-chart-grid line{
	stroke: rgba(255, 255, 255, 0.09);
	stroke-width: 1;
}

.iso-chart-grid text,
.iso-chart-axis text{
	fill: rgba(255, 255, 255, 0.42);
	font-family: var(--e-global-typography-text-font-family);
	font-size: 12px;
}

/* The line draws and the area fades once the card scrolls into view. JS sets
   the dash values from the real path length, so this starts hidden only when
   JS is there to finish the job. */
.iso-chart-line{
	transition: stroke-dashoffset 1.7s cubic-bezier(.33, 1, .48, 1);
}

.iso-chart-area{
	opacity: 0;
	transition: opacity .9s ease .7s;
}

.iso-chart-dots circle{
	fill: #EE0000;
	stroke: #120000;
	stroke-width: 2;
}

.iso-chart-card.is-animating .iso-chart-dots circle{
	opacity: 0;
	animation: isoDotIn .45s ease forwards;
	animation-delay: var(--dot-delay, 0s);
}

.iso-chart-card.is-drawn .iso-chart-area{
	opacity: 1;
}

@keyframes isoDotIn{
	from{ opacity: 0; transform: scale(.2); }
	to{ opacity: 1; transform: scale(1); }
}

.iso-chart-dots circle{
	transform-box: fill-box;
	transform-origin: center;
}

.iso-chart-foot{
	margin: 16px 0 0;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.42);
	font-size: 12px;
	letter-spacing: 0.04em;
}

@media only screen and (max-width: 575px){
	.iso-chart-card{ padding: 22px 18px 20px; }
	.iso-chart-head{ flex-direction: column; }
}

@media (prefers-reduced-motion: reduce){
	.iso-chart-line,
	.iso-chart-area{ transition: none; }
	.iso-chart-card.is-animating .iso-chart-dots circle{ animation: none; opacity: 1; }
}

/* ------------------------------------------------------------
 * Home section 2 — the athlete profile plate
 * The client's own reference artwork, used whole rather than composited.
 * ------------------------------------------------------------ */

.iso-record-plate{
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	overflow: hidden;
	background-color: #070707;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}

.iso-record-plate picture,
.iso-record-plate img{
	display: block;
	width: 100%;
	height: auto;
}

@keyframes isoDotIn{
	from{ opacity: 0; transform: scale(.2); }
	to{ opacity: 1; transform: scale(1); }
}

@media only screen and (max-width: 575px){
	.iso-chart-card{ padding: 22px 18px 20px; }
	.iso-chart-head{ flex-direction: column; }
}

@media (prefers-reduced-motion: reduce){
	.iso-chart-line,
	.iso-chart-area{ transition: none; }
	.iso-chart-card.is-animating .iso-chart-dots circle{ animation: none; opacity: 1; }
}

/* ------------------------------------------------------------
 * Home section 2 — layered athlete photograph behind the score card
 * The visual direction asks for photography layered with interface panels
 * while keeping hierarchy: the photo sets the tone, the live panel carries
 * the numbers, and the panel always sits on top.
 * ------------------------------------------------------------ */

/* Stacked on phones: photo above, card below, no overlap to fight with */

/* ------------------------------------------------------------
 * Home section 5 — is it enough for college
 * ------------------------------------------------------------ */

.iso-eyebrow{
	display: inline-block;
	margin-bottom: 14px;
	color: var(--iso-red);
	font-family: var(--e-global-typography-text-font-family);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.iso-grade-scale{
	margin-top: 32px;
}

.iso-grade-scale-label{
	display: block;
	margin-bottom: 12px;
	color: rgba(255, 255, 255, 0.50);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* A neutral run from strongest to weakest: no band is singled out, because
   nothing here should read as a grade this athlete has been given. */
.iso-grade-track{
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(90deg,
		var(--iso-red) 0%,
		rgba(238, 0, 0, .62) 32%,
		rgba(255, 255, 255, .34) 66%,
		rgba(255, 255, 255, .14) 100%);
}

.iso-grade-bands{
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.iso-grade-bands li{
	position: relative;
	padding-top: 12px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.25em;
}

/* Tick joining each label back to its point on the run */
.iso-grade-bands li::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 7px;
	background-color: rgba(255, 255, 255, 0.28);
}

.iso-footnote{
	margin-top: 26px;
	padding-left: 16px;
	border-left: 2px solid var(--iso-red);
	color: rgba(255, 255, 255, 0.56);
	font-size: 14px;
	line-height: 1.7em;
}

@media only screen and (max-width: 575px){
	.iso-grade-bands{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px 14px;
	}

	.iso-grade-bands li::before{ display: none; }

	.iso-grade-bands li{
		padding-top: 0;
		padding-left: 14px;
	}

	.iso-grade-bands li::after{
		content: '';
		position: absolute;
		top: 6px;
		left: 0;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: var(--iso-red);
	}
}

/* ------------------------------------------------------------
 * Home section 6 — "Why not just send a highlight tape?"
 * A typographic band with no image: it sits between two dense sections and
 * gives the page somewhere to breathe. The forty bars carry the argument.
 * ------------------------------------------------------------ */

.iso-section-tape{
	position: relative;
	overflow: hidden;
	padding: 128px 0;
}

/* One low red pool behind the type, nothing else */
.iso-section-tape::before{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(1100px, 130%);
	height: 760px;
	transform: translate(-50%, -50%);
	background: radial-gradient(closest-side, rgba(238, 0, 0, .22) 0%, rgba(238, 0, 0, 0) 100%);
	pointer-events: none;
}

.iso-tape{
	position: relative;
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
}

.iso-tape-quote{
	margin: 0 0 22px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: clamp(30px, 4.2vw, 56px);
	line-height: 1.06em;
	text-transform: uppercase;
}

.iso-tape-quote span{
	color: var(--iso-red);
}

.iso-tape-sub{
	max-width: 620px;
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.68);
	font-size: 17px;
	line-height: 1.75em;
}

/* ---- the forty games ---- */

/* Boxed like the other sections' panels, so this one does not read as loose
   type floating on the background */
.iso-tape-games{
	max-width: 840px;
	margin: 52px auto 46px;
	padding: 24px 28px 26px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 20px;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(238, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 62%),
		linear-gradient(160deg, #101010 0%, #070707 60%, #140002 100%);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}

.iso-tape-head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	text-align: left;
}

.iso-tape-head-title{
	color: var(--iso-white);
	font-family: var(--e-global-typography-accent-font-family);
	font-size: 22px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.iso-tape-head-meta{
	color: rgba(255, 255, 255, 0.50);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.iso-tape-bars{
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(3px, 0.7vw, 7px);
	height: 74px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iso-tape-bars li{
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.10);
	transform: scaleY(0.34);
	transform-origin: bottom;
	transition: background-color .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
	transition-delay: calc(var(--i) * 26ms);
}

/* The tape starts as the tallest bar, then the record grows past it */
.iso-tape-bars li.is-tape{
	background-color: var(--iso-white);
	transform: scaleY(1);
	transition-delay: 0s;
}

.iso-tape.is-lit .iso-tape-bars li.is-tape{
	transform: scaleY(0.42);
}

.iso-tape.is-lit .iso-tape-bars li:not(.is-tape){
	background-color: var(--iso-red);
	transform: scaleY(1);
}

.iso-tape-legend{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 30px;
	margin-top: 20px;
}

.iso-tape-legend-item{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, 0.60);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.iso-tape-legend-item i{
	width: 10px;
	height: 10px;
	border-radius: 2px;
}

.iso-tape-legend-item.is-tape i{
	background-color: var(--iso-white);
}

.iso-tape-legend-item.is-rest i{
	background-color: var(--iso-red);
}

.iso-tape-legend-item strong{
	color: var(--iso-white);
	font-variant-numeric: tabular-nums;
}

.iso-tape-punch{
	margin: 0;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: clamp(34px, 5.6vw, 76px);
	line-height: 1.02em;
	text-transform: uppercase;
}

@media only screen and (max-width: 767px){
	.iso-section-tape{ padding: 84px 0; }
	.iso-tape-bars{ height: 56px; gap: 2px; }
	.iso-tape-games{ margin: 40px auto 36px; padding: 20px 16px 22px; }
	.iso-tape-head{ margin-bottom: 16px; padding-bottom: 12px; }
	.iso-tape-head-title{ font-size: 19px; }
}

@media (prefers-reduced-motion: reduce){
	.iso-tape-bars li{ transition: none; transition-delay: 0s; }
}

/* ------------------------------------------------------------
 * Home section 7 — built for everyone around the athlete
 * Eight cards, four across. Nothing here navigates — several roles share a
 * destination in the client's menu, so the cards state the offer and the nav
 * does the routing. No pointer, no lift, no arrow: no false affordance.
 * ------------------------------------------------------------ */

.iso-role-grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iso-role-card{
	display: flex;
}

.iso-role-card-inner{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 26px 24px 28px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(238, 0, 0, .10) 0%, rgba(0, 0, 0, 0) 60%),
		#0E0E0E;
	transition: border-color .25s ease;
}

.iso-role-card-inner:hover{
	border-color: rgba(238, 0, 0, 0.32);
}

.iso-role-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 18px;
	border-radius: 12px;
	border: 1px solid rgba(238, 0, 0, 0.42);
	background-color: rgba(238, 0, 0, 0.12);
	color: var(--iso-red);
	font-size: 18px;
}

.iso-role-card h3{
	margin-bottom: 9px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 22px;
	line-height: 1.12em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.iso-role-card p{
	margin: 0;
	color: rgba(255, 255, 255, 0.64);
	font-size: 14px;
	line-height: 1.65em;
}

@media only screen and (max-width: 1199px){
	.iso-role-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Kept two across on phones — eight cards in one column is a long scroll for
   a section that is only a roll call. The card shrinks instead. */
@media only screen and (max-width: 575px){
	.iso-role-grid{ gap: 12px; }
	.iso-role-card-inner{ padding: 18px 16px 20px; }

	.iso-role-icon{
		width: 38px;
		height: 38px;
		margin-bottom: 14px;
		border-radius: 10px;
		font-size: 15px;
	}

	.iso-role-card h3{
		margin-bottom: 7px;
		font-size: 18px;
	}

	.iso-role-card p{
		font-size: 13.5px;
		line-height: 1.62em;
	}
}

/* ------------------------------------------------------------
 * Home section 9 — put a number on the work
 * A rounded panel inside the container: copy on the black half, the athlete
 * dial on the red one. The dial is contained rather than cropped, over a
 * background sampled from the artwork's own red, so the badges at the top of
 * the dial are never cut off and the fill still reads as one flat field.
 * ------------------------------------------------------------ */

.iso-cta-panel{
	display: flex;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 28px;
	background-color: #050505;
	box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
}

.iso-cta-copy{
	flex: 1 1 54%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 470px;
	padding: 64px 54px;
	/* Faint measurement grid, matching the product panels */
	background-image:
		repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 44px),
		repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 44px);
}

.iso-cta-title{
	max-width: 14ch;
	margin: 0 0 34px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: clamp(34px, 4.2vw, 58px);
	line-height: 1.02em;
	text-transform: uppercase;
}

.iso-cta-actions{
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.iso-cta-visual{
	flex: 0 0 46%;
	background-color: #CA0E0C;
}

.iso-cta-visual picture,
.iso-cta-visual img{
	display: block;
	width: 100%;
	height: 100%;
}

/* The artwork's ratio (1.068) and this half's ratio are within a percent of
   each other, so "cover" fills the half edge to edge and crops almost nothing.
   The background red is the artwork's own, as a fallback for odd viewports. */
.iso-cta-visual img{
	object-fit: cover;
	object-position: center;
}

/* Stacked below 992px, with the copy first so the ask is not buried */
@media only screen and (max-width: 991px){
	.iso-cta-panel{ flex-direction: column; }

	.iso-cta-copy{
		flex: 1 1 auto;
		min-height: 0;
		padding: 44px 32px;
	}

	.iso-cta-title{ max-width: none; }

	.iso-cta-visual{ flex: 1 1 auto; }

	.iso-cta-visual img{
		height: auto;
		aspect-ratio: 16 / 11;
	}
}

/* ------------------------------------------------------------
 * Button variants
 * The theme ships one button: black with a red arrow. A closing CTA needs a
 * clear primary and secondary, so these add a solid red and a solid white.
 * Both invert on hover using the theme's existing left-to-right wipe.
 * ------------------------------------------------------------ */

.btn-default.iso-btn-solid{
	background-color: var(--iso-red);
	color: var(--iso-white);
}

.btn-default.iso-btn-solid::after{
	background-color: var(--iso-white);
}

.btn-default.iso-btn-solid:hover{
	color: var(--iso-black);
}

.btn-default.iso-btn-solid i{
	background-color: var(--iso-white);
	color: var(--iso-red);
}

.btn-default.iso-btn-solid:hover i{
	background-color: var(--iso-red);
	color: var(--iso-white);
}

.btn-default.iso-btn-light{
	background-color: var(--iso-white);
	color: var(--iso-black);
}

.btn-default.iso-btn-light::after{
	background-color: var(--iso-red);
}

.btn-default.iso-btn-light:hover{
	color: var(--iso-white);
}

.btn-default.iso-btn-light i{
	background-color: var(--iso-red);
	color: var(--iso-white);
}

.btn-default.iso-btn-light:hover i{
	background-color: var(--iso-white);
	color: var(--iso-red);
}

.btn-default.iso-btn-solid:focus-visible,
.btn-default.iso-btn-light:focus-visible{
	outline: 2px solid var(--iso-white);
	outline-offset: 3px;
}

@media only screen and (max-width: 767px){
	.iso-cta-copy{ padding: 36px 22px; }

	/* Each action takes its own width and wraps, rather than stretching into
	   two full-bleed slabs. */
	.iso-cta-actions{
		gap: 12px;
	}

	.iso-cta-actions .btn-default{
		width: auto;
		justify-content: flex-start;
	}
}

/* ------------------------------------------------------------
 * The record flow (home section 2)
 * Five stages joined by one line: an assessment becomes a score, the score
 * charts, the chart meets a benchmark, and all of it lands on a profile.
 * ------------------------------------------------------------ */

.iso-flow{
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The run that joins the markers, stopping at the first and last centres */
.iso-flow::before{
	content: '';
	position: absolute;
	top: 22px;
	bottom: 22px;
	left: 21px;
	width: 2px;
	background: linear-gradient(180deg,
		rgba(238, 0, 0, .65) 0%,
		rgba(238, 0, 0, .35) 60%,
		rgba(255, 255, 255, .10) 100%);
}

.iso-flow-step{
	position: relative;
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: 14px 0;
}

.iso-flow-marker{
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(238, 0, 0, 0.45);
	background-color: #120203;
	color: var(--iso-red);
	font-size: 15px;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.iso-flow-step:hover .iso-flow-marker{
	background-color: var(--iso-red);
	border-color: var(--iso-red);
	color: var(--iso-white);
}

.iso-flow-body{
	padding-top: 3px;
}

/* The theme sets h3 in the condensed display face, which rendered smaller
   than the body copy underneath it. Sized up so the stage name leads. */
.iso-flow-body h3{
	margin-bottom: 6px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 25px;
	line-height: 1.1em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.iso-flow-body p{
	margin: 0;
	color: rgba(255, 255, 255, 0.64);
	font-size: 15px;
	line-height: 1.65em;
}

@media only screen and (max-width: 575px){
	.iso-flow::before{ left: 19px; }
	.iso-flow-step{ gap: 16px; }
	.iso-flow-marker{ width: 40px; height: 40px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce){
	.iso-flow-marker{ transition: none; }
}

/* ------------------------------------------------------------
 * Brand mark
 * The supplied logo is squarer than the wordmark it replaces, so it needs a
 * height cap rather than the theme's width cap to sit level in the masthead.
 * ------------------------------------------------------------ */

.navbar-brand img{
	max-width: none;
	height: 66px;
	width: auto;
}

.footer-about .footer-logo img{
	max-width: none;
	height: 70px;
	width: auto;
}

@media only screen and (max-width: 991px){
	.navbar-brand img{ height: 50px; }
}

/* ============================================================
 * Sports page
 * ============================================================ */

.iso-page-hero{
	position: relative;
	padding: 210px 0 120px;
	background-color: var(--iso-black);
	background-image:
		radial-gradient(120% 90% at 18% 0%, rgba(238, 0, 0, .20) 0%, rgba(238, 0, 0, 0) 58%),
		repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 48px),
		repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 48px);
}

.iso-page-hero-title{
	max-width: 16ch;
	margin: 0 0 20px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: clamp(38px, 5.4vw, 74px);
	line-height: 1.01em;
	text-transform: uppercase;
}

.iso-page-hero-lead{
	max-width: 620px;
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 18px;
	line-height: 1.7em;
}

/* Jump links to each sport further down the page */
.iso-page-hero-chips{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}

.iso-page-hero-chips a{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 9px 9px 18px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-accent-font-family);
	font-size: 17px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: border-color .25s ease, background-color .25s ease;
}

.iso-page-hero-chips a:hover{
	border-color: var(--iso-red);
	background-color: rgba(238, 0, 0, 0.12);
}

.iso-page-hero-chips .iso-status{
	position: static;
}

/* ---- how a framework nests ---- */

.iso-tree{
	margin: 0;
	padding: 26px 28px 24px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 20px;
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(238, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 60%),
		linear-gradient(160deg, #101010 0%, #070707 60%, #140002 100%);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}

.iso-tree-head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.iso-tree-title{
	color: var(--iso-white);
	font-family: var(--e-global-typography-accent-font-family);
	font-size: 22px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.iso-tree-meta{
	color: rgba(255, 255, 255, 0.50);
	font-size: 13px;
}

.iso-tree-levels{
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

/* Each level steps in, so the nesting is the diagram */
.iso-tree-level{
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 18px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-left: 3px solid var(--iso-red);
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.03);
}

.iso-tree-level + .iso-tree-level{
	margin-top: 12px;
}

.iso-tree-level.is-skill{ margin-left: 28px; }
.iso-tree-level.is-stat{ margin-left: 56px; }

.iso-tree-level.is-skill{ border-left-color: rgba(238, 0, 0, .62); }
.iso-tree-level.is-stat{ border-left-color: rgba(255, 255, 255, .28); }

/* The elbow joining a level to the one above it */
.iso-tree-level.is-skill::before,
.iso-tree-level.is-stat::before{
	content: '';
	position: absolute;
	left: -17px;
	top: -13px;
	bottom: 50%;
	width: 14px;
	border-left: 1px solid rgba(255, 255, 255, 0.22);
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
	border-bottom-left-radius: 8px;
}

.iso-tree-tag{
	flex: 0 0 auto;
	padding: 4px 10px 3px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.60);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.iso-tree-level strong{
	color: var(--iso-white);
	font-size: 15px;
	font-weight: 600;
}

.iso-tree-foot{
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.46);
	font-size: 13px;
	line-height: 1.6em;
}

/* ---- per-sport blocks ---- */

.iso-eyebrow .iso-status{
	position: static;
	margin-left: 10px;
	vertical-align: middle;
}

.iso-sport-lead{
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 22px 0 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
}

.iso-sport-lead i{
	color: var(--iso-red);
}

.iso-section-sports-next{
	padding-top: 0;
}

.iso-sport-next-copy h2{
	margin-bottom: 8px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: clamp(26px, 3vw, 38px);
	text-transform: uppercase;
}

@media only screen and (max-width: 991px){
	.iso-page-hero{ padding: 150px 0 82px; }
	.iso-page-hero-title{ max-width: none; }
}

@media only screen and (max-width: 575px){
	.iso-tree-level.is-skill{ margin-left: 16px; }
	.iso-tree-level.is-stat{ margin-left: 32px; }
	.iso-tree{ padding: 22px 18px 20px; }
}

/* Photography inside a plate needs the same grade the sport cards use, or a
   daylight shot sits brighter than everything around it. */

/* ---- Sports hero with the composed four-sport banner ---- */

.iso-page-hero-banner{
	overflow: hidden;
	background-image: none;
}

.iso-page-hero-banner .container{
	position: relative;
	z-index: 1;
}

.iso-page-hero-media{
	position: absolute;
	inset: 0;
}

.iso-page-hero-media picture,
.iso-page-hero-media img{
	display: block;
	width: 100%;
	height: 100%;
}

.iso-page-hero-media img{
	object-fit: cover;
	object-position: center;
}

/* Settles the banner into the page above and the section below */
.iso-page-hero-banner::after{
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 62%, rgba(0,0,0,.85) 100%),
		linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.6) 38%, rgba(0,0,0,0) 66%);
	pointer-events: none;
}

/* ---- draft framework note ---- */

.iso-draft-note{
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 26px 0 0;
	padding: 16px 18px;
	border: 1px dashed rgba(255, 255, 255, 0.26);
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.03);
	color: rgba(255, 255, 255, 0.62);
	font-size: 13.5px;
	line-height: 1.65em;
}

.iso-draft-note i{
	margin-top: 3px;
	flex: 0 0 auto;
	color: var(--iso-red);
}

/* The photo tracks alongside a long category list rather than stranding at the top */

/* ---- Sports page: the per-sport blocks ---- */

.iso-sport-aside{
	position: relative;
}

@media only screen and (min-width: 992px){
	/* Tracks the six-item list beside it instead of stranding at the top */
	.iso-sport-aside{
		position: sticky;
		top: 132px;
	}
}

.iso-sport-portrait{
	position: relative;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 20px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}

.iso-sport-portrait picture,
.iso-sport-portrait img{
	display: block;
	width: 100%;
	height: auto;
}

/* Keeps the caption legible over a bright frame and ties the photo to the page */
.iso-sport-portrait::after{
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,.80) 100%),
		linear-gradient(160deg, rgba(238,0,0,.14) 0%, rgba(0,0,0,0) 55%);
	pointer-events: none;
}

.iso-sport-portrait-tag{
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 18px;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 28px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.iso-sport-portrait-tag .iso-status{
	position: static;
}

/* Framework at a glance */
.iso-sport-facts{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 18px 0 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	background-color: rgba(255, 255, 255, 0.12);
}

.iso-sport-facts > div{
	padding: 15px 18px;
	background-color: #0B0B0B;
}

.iso-sport-facts .is-wide{
	grid-column: 1 / -1;
}

.iso-sport-facts dt{
	margin-bottom: 4px;
	color: rgba(255, 255, 255, 0.48);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.iso-sport-facts dd{
	margin: 0;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 26px;
	line-height: 1;
}

.iso-sport-facts .is-wide dd{
	font-family: var(--e-global-typography-text-font-family);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4em;
}

/* Numbered category cards, two across */
.iso-category-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.iso-category{
	position: relative;
	padding: 20px 20px 20px 22px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-left: 2px solid rgba(238, 0, 0, 0.55);
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.025);
	transition: border-color .25s ease, background-color .25s ease;
}

.iso-category:hover{
	border-color: rgba(238, 0, 0, 0.45);
	border-left-color: var(--iso-red);
	background-color: rgba(238, 0, 0, 0.05);
}

.iso-category-index{
	display: block;
	margin-bottom: 8px;
	color: rgba(238, 0, 0, 0.85);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 15px;
	letter-spacing: 0.14em;
}

.iso-category h3{
	margin-bottom: 11px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 20px;
	line-height: 1.16em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.iso-category p{
	margin: 0;
	color: rgba(255, 255, 255, 0.62);
	font-size: 14px;
	line-height: 1.6em;
}

/* Two across on phones as well — six categories in a single column buries the
   sport copy that follows them. The card tightens instead. */
@media only screen and (max-width: 575px){
	.iso-category-grid{ gap: 10px; }

	.iso-category{
		padding: 16px 14px 16px 16px;
	}

	.iso-category-index{
		margin-bottom: 6px;
		font-size: 13px;
	}

	.iso-category h3{
		margin-bottom: 9px;
		font-size: 17px;
	}

	.iso-category p{
		font-size: 13.5px;
		line-height: 1.6em;
	}

	.iso-sport-portrait-tag{ font-size: 23px; }
}

@media (prefers-reduced-motion: reduce){
	.iso-category{ transition: none; }
}

/* ============================================================
 * Pricing page
 * No figures exist yet, so the slot where a price would sit carries the real
 * offer instead. Cards are equal height with their sections aligned, so the
 * three read as one table rather than three loose boxes.
 * ============================================================ */

.iso-included{
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: 28px 32px;
	border: 1px solid rgba(238, 0, 0, 0.35);
	border-left: 3px solid var(--iso-red);
	border-radius: 18px;
	background:
		radial-gradient(90% 160% at 2% 50%, rgba(238, 0, 0, .16) 0%, rgba(0, 0, 0, 0) 60%),
		#0C0C0C;
}

.iso-included-icon{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: rgba(238, 0, 0, 0.14);
	color: var(--iso-red);
	font-size: 19px;
}

.iso-included h2{
	margin-bottom: 8px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: clamp(22px, 2.6vw, 30px);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.iso-included p{
	max-width: 760px;
	margin: 0;
	color: rgba(255, 255, 255, 0.68);
	font-size: 15px;
	line-height: 1.7em;
}

/* ---- plan cards ---- */

.iso-plan-grid{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iso-plan{
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 34px 28px 30px;
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 22px;
	background-color: #0B0B0B;
	transition: border-color .25s ease, transform .25s ease;
}

.iso-plan:hover{
	border-color: rgba(255, 255, 255, 0.22);
}

/* The featured card lifts out of the row, as on a real pricing table */
.iso-plan.is-featured{
	border-color: rgba(238, 0, 0, 0.5);
	background:
		radial-gradient(130% 62% at 50% 0%, rgba(238, 0, 0, .15) 0%, rgba(0, 0, 0, 0) 62%),
		#0E0B0C;
	box-shadow: 0 34px 80px rgba(0, 0, 0, .6);
}

@media only screen and (min-width: 1200px){
	.iso-plan.is-featured{
		transform: translateY(-14px);
	}
}

.iso-plan-ribbon{
	position: absolute;
	top: 0;
	right: 0;
	padding: 8px 18px 7px;
	border-bottom-left-radius: 14px;
	border-top-right-radius: 21px;
	background-color: var(--iso-red);
	color: var(--iso-white);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.iso-plan-head{
	min-height: 148px;
}

.iso-plan-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 18px;
	border-radius: 12px;
	border: 1px solid rgba(238, 0, 0, 0.42);
	background-color: rgba(238, 0, 0, 0.12);
	color: var(--iso-red);
	font-size: 17px;
}

.iso-plan h3{
	margin-bottom: 7px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 27px;
	line-height: 1.08em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.iso-plan-audience{
	margin: 0;
	color: rgba(255, 255, 255, 0.55);
	font-size: 14px;
	line-height: 1.55em;
}

/* Where a figure would sit */
.iso-plan-quote{
	padding: 20px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.iso-plan-quote strong{
	display: block;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 38px;
	font-weight: 400;
	line-height: 1;
}

.iso-plan-quote span{
	display: block;
	margin-top: 6px;
	color: rgba(255, 255, 255, 0.48);
	font-size: 13px;
}

.iso-plan-includes{
	margin: 0 0 22px;
	padding: 22px 0 0;
	list-style: none;
}

.iso-plan-includes li{
	display: flex;
	gap: 11px;
	align-items: flex-start;
	margin-bottom: 12px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 14.5px;
	line-height: 1.5em;
}

.iso-plan-includes i{
	margin-top: 2px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: rgba(238, 0, 0, 0.16);
	color: var(--iso-red);
	font-size: 9px;
}

/* The cadence belongs to the Athlete tier, so it sits inside that card */
.iso-plan-cadence{
	margin-bottom: 22px;
	padding: 15px 16px;
	border: 1px dashed rgba(255, 255, 255, 0.18);
	border-radius: 12px;
}

.iso-plan-cadence-label{
	display: block;
	margin-bottom: 10px;
	color: rgba(255, 255, 255, 0.46);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.iso-plan-cadence-options{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.iso-plan-cadence-options em{
	padding: 5px 10px 4px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.07);
	color: var(--iso-white);
	font-size: 11.5px;
	font-style: normal;
	font-weight: 600;
}

/* Follows the list rather than being pinned to the tallest card's floor */
/* auto pushes the action to the foot of the card, so three tiers of unequal
   length still line their buttons up. */
.iso-plan .btn-default{
	margin-top: auto;
	align-self: stretch;
	justify-content: center;
}

/* ---- the add-ons ---- */

.iso-addon-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.iso-addon{
	display: flex;
	flex-direction: column;
	padding: 28px 30px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-left: 3px solid var(--iso-red);
	border-radius: 18px;
	background-color: #0B0B0B;
	transition: border-color .25s ease;
}

.iso-addon:hover{
	border-color: rgba(238, 0, 0, 0.45);
}

.iso-addon-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 18px;
	border-radius: 12px;
	border: 1px solid rgba(238, 0, 0, 0.42);
	background-color: rgba(238, 0, 0, 0.12);
	color: var(--iso-red);
	font-size: 17px;
}

.iso-addon-tag{
	margin: 0 0 8px;
	color: var(--iso-red);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.iso-addon h3{
	margin-bottom: 9px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: clamp(24px, 2.6vw, 30px);
	line-height: 1.08em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.iso-addon-body{
	margin: 0;
	color: rgba(255, 255, 255, 0.64);
	font-size: 15px;
	line-height: 1.65em;
}

/* auto keeps the bullets on the floor of the card, so a card that has none
   still matches the height of one that does. */
.iso-addon-includes{
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	list-style: none;
}

.iso-addon-includes:only-of-type,
.iso-addon-body + .iso-addon-includes{
	margin-top: auto;
}

.iso-addon-includes li{
	display: flex;
	gap: 9px;
	align-items: center;
	color: rgba(255, 255, 255, 0.82);
	font-size: 14.5px;
}

.iso-addon-includes i{
	color: var(--iso-red);
	font-size: 11px;
}

@media only screen and (max-width: 991px){
	.iso-addon-grid{ grid-template-columns: 1fr; }
}

@media only screen and (max-width: 1199px){
	.iso-plan-grid{ grid-template-columns: 1fr; }
}

@media only screen and (max-width: 1199px){
	.iso-plan-head{ min-height: 0; }
}

@media only screen and (max-width: 575px){
	.iso-included{ flex-direction: column; padding: 24px 22px; }
	.iso-addon{ padding: 24px 22px; }
	.iso-plan{ padding: 30px 22px 26px; }
}

/* ============================================================
 * About page
 * ============================================================ */

.iso-prose{
	margin-bottom: 18px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 16px;
	line-height: 1.8em;
}

.iso-prose-lead{
	color: var(--iso-white);
	font-size: 19px;
	line-height: 1.7em;
}

.iso-textlink{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--iso-red);
	font-family: var(--e-global-typography-accent-font-family);
	font-size: 18px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: gap .25s ease, color .25s ease;
}

.iso-textlink:hover{
	gap: 16px;
	color: var(--iso-white);
}

.iso-section-about-lead .iso-section-title{
	margin-bottom: 24px;
}

.iso-about-portrait{
	position: relative;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 20px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}

.iso-about-portrait picture,
.iso-about-portrait img{
	display: block;
	width: 100%;
	height: auto;
}

.iso-about-portrait::after{
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.62) 100%),
		linear-gradient(160deg, rgba(238,0,0,.14) 0%, rgba(0,0,0,0) 55%);
	pointer-events: none;
}

/* ---- the three regions ---- */

.iso-region-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iso-region{
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 26px 24px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	background-color: #0B0B0B;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 26px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	transition: border-color .25s ease;
}

.iso-region:hover{
	border-color: rgba(238, 0, 0, 0.5);
}

.iso-region i{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(238, 0, 0, 0.14);
	color: var(--iso-red);
	font-size: 16px;
}

/* ---- the three rules ---- */

.iso-rule-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iso-rule{
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 22px 24px;
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-left: 2px solid var(--iso-red);
	border-radius: 14px;
	background-color: #0B0B0B;
}

.iso-rule-index{
	flex: 0 0 auto;
	display: block;
	padding-top: 2px;
	color: rgba(238, 0, 0, 0.85);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 17px;
	letter-spacing: 0.14em;
}

.iso-rule h3{
	margin-bottom: 9px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 20px;
	line-height: 1.22em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.iso-rule p{
	margin: 0;
	color: rgba(255, 255, 255, 0.62);
	font-size: 14.5px;
	line-height: 1.65em;
}

/* How It Works runs the same three rules as three cards rather than a
   split list, so the section reads as one row across the page. */
.iso-pullquote-center{
	max-width: 720px;
	margin-inline: auto;
	padding: 0 0 0 24px;
	text-align: left;
}

.iso-rule-cards{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iso-rule-card{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 34px 28px 30px;
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 18px;
	background-color: #0B0B0B;
	text-align: center;
	transition: border-color .25s ease, transform .25s ease;
}

.iso-rule-card:hover{
	border-color: rgba(238, 0, 0, 0.45);
	transform: translateY(-4px);
}

.iso-rule-card-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 18px;
	border-radius: 50%;
	border: 1px solid rgba(238, 0, 0, 0.40);
	background-color: rgba(238, 0, 0, 0.12);
	color: var(--iso-red);
	font-size: 23px;
	transition: background-color .25s ease, color .25s ease;
}

.iso-rule-card:hover .iso-rule-card-icon{
	background-color: var(--iso-red);
	color: var(--iso-white);
}

.iso-rule-card-index{
	display: block;
	margin-bottom: 10px;
	color: rgba(238, 0, 0, 0.85);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 15px;
	letter-spacing: 0.22em;
}

.iso-rule-card h3{
	margin-bottom: 10px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 22px;
	line-height: 1.18em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.iso-rule-card p{
	margin: 0;
	color: rgba(255, 255, 255, 0.62);
	font-size: 14.5px;
	line-height: 1.65em;
}

@media only screen and (max-width: 991px){
	.iso-rule-cards{ grid-template-columns: 1fr; }
}

@media only screen and (max-width: 991px){
	.iso-region{ font-size: 22px; padding: 20px 18px; }
}

/* ---- About: the four terms ---- */

.iso-term-list{
	margin: 0;
}

.iso-term{
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 20px 22px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-left: 2px solid rgba(238, 0, 0, 0.55);
	border-radius: 14px;
	background-color: #0B0B0B;
	transition: border-color .25s ease, background-color .25s ease;
}

.iso-term + .iso-term{
	margin-top: 12px;
}

.iso-term:hover{
	border-color: rgba(238, 0, 0, 0.42);
	border-left-color: var(--iso-red);
	background-color: rgba(238, 0, 0, 0.045);
}

.iso-term-index{
	flex: 0 0 auto;
	padding-top: 2px;
	color: rgba(238, 0, 0, 0.85);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 16px;
	letter-spacing: 0.14em;
}

.iso-term dt{
	margin-bottom: 5px;
	color: var(--iso-white);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.iso-term dd{
	margin: 0;
	color: rgba(255, 255, 255, 0.62);
	font-size: 14.5px;
	line-height: 1.62em;
}

@media (prefers-reduced-motion: reduce){
	.iso-term{ transition: none; }
}

/* ============================================================
 * Who It's For
 * Five anchored sections on one page. scroll-margin keeps a jump link from
 * parking the heading underneath the sticky masthead.
 * ============================================================ */

.iso-section-audience{
	scroll-margin-top: 110px;
}

.iso-audience-portrait{
	position: relative;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 20px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}

@media only screen and (min-width: 992px){
	.iso-audience-portrait{
		position: sticky;
		top: 132px;
	}
}

.iso-audience-portrait picture,
.iso-audience-portrait img{
	display: block;
	width: 100%;
	height: auto;
}

.iso-audience-portrait::after{
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0,0,0,.24) 0%, rgba(0,0,0,0) 36%, rgba(0,0,0,.82) 100%),
		linear-gradient(160deg, rgba(238,0,0,.14) 0%, rgba(0,0,0,0) 55%);
	pointer-events: none;
}

.iso-audience-portrait figcaption{
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 18px;
	z-index: 1;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 24px;
	line-height: 1.1em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* Two audiences share most of these sections, so their lists sit side by side */
.iso-audience-groups{
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 8px;
}

.iso-audience-groups.is-pair{
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.iso-audience-group{
	padding: 24px 24px 20px;
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-top: 2px solid var(--iso-red);
	border-radius: 14px;
	background-color: #0B0B0B;
}

.iso-audience-group h3{
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 23px;
	line-height: 1.1em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.iso-audience-group h3 span{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	border: 1px solid rgba(238, 0, 0, 0.40);
	background-color: rgba(238, 0, 0, 0.12);
	color: var(--iso-red);
	font-size: 14px;
}

.iso-audience-group ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.iso-audience-group li{
	display: flex;
	gap: 11px;
	align-items: flex-start;
	margin-bottom: 11px;
	color: rgba(255, 255, 255, 0.76);
	font-size: 14.5px;
	line-height: 1.55em;
}

.iso-audience-group li:last-child{
	margin-bottom: 0;
}

.iso-audience-group li i{
	margin-top: 3px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background-color: rgba(238, 0, 0, 0.16);
	color: var(--iso-red);
	font-size: 8.5px;
}

.iso-section-audience .iso-cta-actions{
	margin-top: 30px;
}

.iso-section-audience .iso-cta-note{
	margin-top: 16px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 14px;
}

.iso-section-audience .iso-cta-note a{
	color: var(--iso-red);
	font-weight: 600;
}

@media only screen and (max-width: 991px){
	.iso-audience-groups.is-pair{ grid-template-columns: 1fr; }
	.iso-audience-portrait figcaption{ font-size: 21px; }
}

/* ---- Preloader ---- */

/* The mark replaces the theme's flat red disc, so it needs room inside the
   ring and its own height, or a 192px source renders at the ring's size. */
.theme-preloader .loading-container #loading-icon{
	max-width: 58px;
	width: 58px;
	height: auto;
}

/* ---- The mobile menu ----
 * SlickNav clones the markup into .slicknav_nav, outside .main-menu, so the
 * desktop panel styles do not reach it. It needs its own simple layout:
 * the icon inline with the label, and the blurb under it.
 * ============================================================ */

.slicknav_nav .iso-submenu-caret,
.slicknav_nav .iso-submenu-go{
	display: none;
}

.slicknav_nav .iso-submenu{
	padding-left: 0;
}

.slicknav_nav .iso-submenu > li > a{
	display: flex !important;
	gap: 12px;
	align-items: center;
	padding: 11px 14px;
	border-radius: 10px;
	text-transform: none;
}

.slicknav_nav .iso-submenu-icon{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	border: 1px solid rgba(238, 0, 0, 0.38);
	background-color: rgba(238, 0, 0, 0.12);
	color: var(--iso-red);
	font-size: 13px;
}

.slicknav_nav .iso-submenu-text{
	flex: 1 1 auto;
	min-width: 0;
}

.slicknav_nav .iso-submenu-text strong{
	display: block;
	color: var(--iso-white);
	font-family: var(--e-global-typography-text-font-family);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3em;
	text-transform: none;
}

.slicknav_nav .iso-submenu-text em{
	display: block;
	margin-top: 2px;
	color: rgba(255, 255, 255, 0.50);
	font-family: var(--e-global-typography-text-font-family);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4em;
	text-transform: none;
}

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

.iso-label{
	display: block;
	margin-bottom: 9px;
	color: var(--iso-white);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.iso-label span[aria-hidden]{
	color: var(--iso-red);
}

.iso-optional{
	margin-left: 6px;
	color: rgba(255, 255, 255, 0.40);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: none;
}

.iso-input{
	width: 100%;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.03);
	color: var(--iso-white);
	font-family: var(--e-global-typography-text-font-family);
	font-size: 15px;
	line-height: 1.5em;
	transition: border-color .2s ease, background-color .2s ease;
}

.iso-input::placeholder{
	color: rgba(255, 255, 255, 0.32);
}

.iso-input:focus{
	outline: none;
	border-color: var(--iso-red);
	background-color: rgba(255, 255, 255, 0.05);
}

.iso-input.is-invalid{
	border-color: var(--iso-red);
	background-color: rgba(238, 0, 0, 0.06);
}

select.iso-input{
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%),
	                  linear-gradient(135deg, rgba(255,255,255,.6) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 42px;
}

textarea.iso-input{
	resize: vertical;
	min-height: 130px;
}

/* Errors sit under the field they belong to */
.iso-error{
	margin: 8px 0 0;
	color: #FF6B6B;
	font-size: 13px;
	line-height: 1.45em;
}

.iso-alert{
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 26px;
	padding: 16px 20px;
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.55em;
}

.iso-alert-error{
	border: 1px solid rgba(238, 0, 0, 0.5);
	background-color: rgba(238, 0, 0, 0.10);
	color: #FFECEC;
}

.iso-alert-error i{
	color: var(--iso-red);
}

.iso-form .cf-turnstile{
	margin-top: 4px;
}

.iso-contact-aside{
	padding: 30px 28px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	background-color: #0B0B0B;
}

.iso-contact-aside .iso-section-title{
	font-size: clamp(22px, 2.4vw, 28px);
	margin-bottom: 12px;
}

.iso-minor-heading{
	margin: 28px 0 14px;
	color: rgba(255, 255, 255, 0.50);
	font-family: var(--e-global-typography-text-font-family);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.iso-contact-aside .iso-region{
	font-size: 18px;
	padding: 14px 16px;
}

.iso-contact-aside .iso-region i{
	width: 32px;
	height: 32px;
	font-size: 13px;
}

@media only screen and (max-width: 575px){
	.iso-contact-aside{ padding: 24px 20px; }
}

/* ---- Custom select ----
 * The native control stays in the DOM and keeps posting; it is taken out of
 * view only once the script has drawn a replacement, so with no JS the real
 * one is still there and usable.
 * ============================================================ */

select.iso-select-native{
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.iso-select{
	position: relative;
}

.iso-select-button{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.03);
	color: var(--iso-white);
	font-family: var(--e-global-typography-text-font-family);
	font-size: 15px;
	line-height: 1.5em;
	text-align: left;
	transition: border-color .2s ease, background-color .2s ease;
}

.iso-select-button:hover{
	border-color: rgba(255, 255, 255, 0.28);
}

.iso-select-button:focus-visible,
.iso-select.is-open .iso-select-button{
	outline: none;
	border-color: var(--iso-red);
	background-color: rgba(255, 255, 255, 0.05);
}

.iso-select.is-invalid .iso-select-button{
	border-color: var(--iso-red);
	background-color: rgba(238, 0, 0, 0.06);
}

.iso-select-value.is-placeholder{
	color: rgba(255, 255, 255, 0.38);
}

.iso-select-button i{
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.45);
	font-size: 11px;
	transition: transform .22s ease;
}

.iso-select.is-open .iso-select-button i{
	transform: rotate(180deg);
}

.iso-select-list{
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 30;
	max-height: 264px;
	margin: 0;
	padding: 8px;
	overflow-y: auto;
	list-style: none;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	background:
		radial-gradient(120% 60% at 50% 0%, rgba(238, 0, 0, .10) 0%, rgba(0, 0, 0, 0) 60%),
		#0B0B0B;
	box-shadow: 0 26px 60px rgba(0, 0, 0, .7);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.iso-select.is-open .iso-select-list{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.iso-select-list li{
	padding: 11px 14px;
	border-radius: 9px;
	color: rgba(255, 255, 255, 0.80);
	font-size: 14.5px;
	line-height: 1.4em;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.iso-select-list li.is-placeholder{
	color: rgba(255, 255, 255, 0.40);
}

.iso-select-list li:hover,
.iso-select-list li.is-active{
	background-color: rgba(255, 255, 255, 0.06);
	color: var(--iso-white);
}

.iso-select-list li.is-selected{
	background-color: rgba(238, 0, 0, 0.14);
	color: var(--iso-white);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce){
	.iso-select-list,
	.iso-select-button i{ transition: none; }
}

/* ---- Toast ----
 * Corner-anchored so it is visible wherever the page happens to be scrolled
 * after a submit.
 * ============================================================ */

.iso-toast-stack{
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 11000;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: min(420px, calc(100vw - 32px));
	pointer-events: none;
}

.iso-toast{
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px 18px;
	border: 1px solid rgba(46, 204, 113, 0.42);
	border-left: 3px solid #2ECC71;
	border-radius: 14px;
	background:
		radial-gradient(90% 140% at 0% 50%, rgba(46, 204, 113, .14) 0%, rgba(0, 0, 0, 0) 62%),
		#0B0B0B;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .7);
	pointer-events: auto;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .3s ease, transform .3s ease;
}

.iso-toast.is-visible{
	opacity: 1;
	transform: translateY(0);
}

.iso-toast-icon{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: rgba(46, 204, 113, 0.16);
	color: #2ECC71;
	font-size: 15px;
}

.iso-toast-body{
	flex: 1 1 auto;
	margin: 0;
	padding-top: 6px;
	color: var(--iso-white);
	font-size: 15px;
	line-height: 1.5em;
}

.iso-toast-close{
	flex: 0 0 auto;
	margin-top: 4px;
	padding: 4px;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, 0.40);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: color .2s ease;
}

.iso-toast-close:hover{
	color: var(--iso-white);
}

@media only screen and (max-width: 575px){
	.iso-toast-stack{
		right: 16px;
		left: 16px;
		bottom: 16px;
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce){
	.iso-toast{ transition: none; }
}

/* ============================================================
 * How It Works
 * ============================================================ */

.iso-steps{
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The spine the nodes sit on. Its fill is driven on scroll, so the line
   builds up as you read — the same idea the product sells. */
.iso-steps-spine{
	position: absolute;
	top: 34px;
	bottom: 34px;
	left: 33px;
	width: 2px;
	background-color: rgba(255, 255, 255, 0.10);
}

.iso-steps-spine-fill{
	display: block;
	width: 100%;
	height: 0;
	background: linear-gradient(180deg, var(--iso-red) 0%, rgba(238, 0, 0, .45) 100%);
	transition: height .2s linear;
}

.iso-step{
	position: relative;
	display: flex;
	gap: 26px;
	align-items: flex-start;
	padding-bottom: 42px;
}

.iso-step:last-child{
	padding-bottom: 0;
}

.iso-step-node{
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	border: 1px solid rgba(238, 0, 0, 0.45);
	background-color: #120203;
	color: var(--iso-red);
	font-size: 22px;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.iso-step.is-reached .iso-step-node{
	background-color: var(--iso-red);
	border-color: var(--iso-red);
	color: var(--iso-white);
}

.iso-step-body{
	flex: 1 1 auto;
	padding-top: 6px;
}

.iso-step-index{
	display: block;
	margin-bottom: 8px;
	color: rgba(238, 0, 0, 0.9);
	font-family: var(--e-global-typography-text-font-family);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.iso-step-body h2{
	margin-bottom: 10px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.08em;
	text-transform: uppercase;
}

.iso-step-body p{
	max-width: 660px;
	margin: 0;
	color: rgba(255, 255, 255, 0.68);
	font-size: 16px;
	line-height: 1.75em;
}

/* ---- seven portals ---- */

/* Seven rows read better than a 4+3 card grid, which always left a ragged
   second row. The list sits beside the portrait instead. */
.iso-portal-list{
	margin: 0;
	padding: 0;
	list-style: none;
}

.iso-portal + .iso-portal{
	margin-top: 10px;
}

.iso-portal-row{
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 14px 18px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 14px;
	background-color: #0B0B0B;
	transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}

a.iso-portal-row:hover,
a.iso-portal-row:focus-visible{
	border-color: rgba(238, 0, 0, 0.55);
	background-color: #101010;
	transform: translateX(4px);
}

/* Admins has no public page, so its row is plainly not a link */
.iso-portal.is-static .iso-portal-row{
	border-style: dashed;
	background-color: rgba(255, 255, 255, 0.02);
}

.iso-portal-icon{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 1px solid rgba(238, 0, 0, 0.40);
	background-color: rgba(238, 0, 0, 0.12);
	color: var(--iso-red);
	font-size: 15px;
	transition: background-color .25s ease, color .25s ease;
}

a.iso-portal-row:hover .iso-portal-icon{
	background-color: var(--iso-red);
	color: var(--iso-white);
}

.iso-portal-text{
	display: block;
}

.iso-portal-text strong{
	display: block;
	margin-bottom: 3px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.12em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* The portals figure sits beside a short list, so it centres rather than sticks. */
@media only screen and (min-width: 992px){
	.iso-portal-figure{
		position: relative;
		top: auto;
	}
}

.iso-portal-text em{
	display: block;
	color: rgba(255, 255, 255, 0.62);
	font-size: 14px;
	font-style: normal;
	line-height: 1.6em;
}

@media only screen and (max-width: 575px){
	.iso-steps-spine{ left: 25px; }
	.iso-step{ gap: 18px; }

	.iso-step-node{
		width: 52px;
		height: 52px;
		font-size: 17px;
	}
}

@media (prefers-reduced-motion: reduce){
	.iso-steps-spine-fill{ transition: none; }
	.iso-rule-card:hover{ transform: none; }
	a.iso-portal-row:hover{ transform: none; }
}
/* ============================================================
 * FAQ
 * ============================================================ */

.iso-faq-rail{
	position: relative;
}

@media only screen and (min-width: 992px){
	.iso-faq-rail{
		position: sticky;
		top: 132px;
	}
}

.iso-faq-rail-list{
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 16px;
	background-color: #0B0B0B;
	overflow: hidden;
}

.iso-faq-rail-list li + li{
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.iso-faq-rail-list a{
	position: relative;
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 14px 18px;
	color: rgba(255, 255, 255, 0.72);
	transition: background-color .25s ease, color .25s ease;
}

.iso-faq-rail-list a::before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background-color: var(--iso-red);
	opacity: 0;
	transition: opacity .25s ease;
}

.iso-faq-rail-list a:hover,
.iso-faq-rail-list a:focus-visible,
.iso-faq-rail-list a.is-current{
	background-color: #101010;
	color: var(--iso-white);
}

.iso-faq-rail-list a.is-current::before{
	opacity: 1;
}

.iso-faq-rail-icon{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	border: 1px solid rgba(238, 0, 0, 0.35);
	background-color: rgba(238, 0, 0, 0.10);
	color: var(--iso-red);
	font-size: 13px;
}

.iso-faq-rail-name{
	flex: 1 1 auto;
	font-family: var(--e-global-typography-accent-font-family);
	font-size: 16px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.iso-faq-rail-count{
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.38);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.iso-faq-ask{
	padding: 24px 22px;
	border: 1px dashed rgba(255, 255, 255, 0.16);
	border-radius: 16px;
	background-color: rgba(255, 255, 255, 0.02);
}

.iso-faq-ask h3{
	margin-bottom: 8px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: 22px;
	line-height: 1.12em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.iso-faq-ask p{
	margin-bottom: 18px;
	color: rgba(255, 255, 255, 0.62);
	font-size: 14.5px;
	line-height: 1.65em;
}

.iso-faq-group + .iso-faq-group{
	margin-top: 46px;
}

/* Clears the sticky header when the rail or a chip jumps to a group */
.iso-faq-group{
	scroll-margin-top: 130px;
}

.iso-faq-group-title{
	margin-bottom: 20px;
	color: var(--iso-white);
	font-family: var(--e-global-typography-primary-font-family);
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.06em;
	text-transform: uppercase;
}

.iso-faq-list{
	margin: 0;
	padding: 0;
	list-style: none;
}

.iso-faq-list li + li{
	margin-top: 12px;
}

.iso-faq{
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 14px;
	background-color: #0B0B0B;
	transition: border-color .25s ease;
}

.iso-faq[open],
.iso-faq:hover{
	border-color: rgba(238, 0, 0, 0.45);
}

.iso-faq summary{
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 18px 20px;
	cursor: pointer;
	list-style: none;
}

.iso-faq summary::-webkit-details-marker{
	display: none;
}

.iso-faq summary:focus-visible{
	outline: 2px solid var(--iso-red);
	outline-offset: 2px;
	border-radius: 14px;
}

/* Manrope on purpose. These are whole sentences with punctuation, and Bebas
   sets everything as caps — a question that long is hard work in it. */
.iso-faq-question{
	flex: 1 1 auto;
	color: var(--iso-white);
	font-family: var(--e-global-typography-text-font-family);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45em;
}

.iso-faq-mark{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-top: 1px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.72);
	font-size: 11px;
	transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.iso-faq[open] .iso-faq-mark{
	background-color: var(--iso-red);
	color: var(--iso-white);
	transform: rotate(45deg);
}

.iso-faq-answer{
	padding: 0 62px 20px 20px;
}

.iso-faq-answer p{
	margin: 0;
	color: rgba(255, 255, 255, 0.64);
	font-size: 15px;
	line-height: 1.75em;
}

.iso-faq-answer a{
	color: var(--iso-red);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media only screen and (max-width: 991px){
	.iso-faq-group + .iso-faq-group{ margin-top: 34px; }
}

@media only screen and (max-width: 575px){
	.iso-faq summary{ gap: 12px; padding: 16px; }
	.iso-faq-question{ font-size: 16px; }
	.iso-faq-answer{ padding: 0 16px 18px; }
}

@media (prefers-reduced-motion: reduce){
	.iso-faq[open] .iso-faq-mark{ transition: none; }
}

/* On phones the hero chips already list the groups, so the rail drops out and
   its ask box follows the questions instead of preceding them. */
@media only screen and (max-width: 991px){
	.iso-section-faq .row{
		flex-direction: column;
	}

	.iso-section-faq .col-lg-4{ order: 2; }
	.iso-section-faq .col-lg-8{ order: 1; }
	.iso-faq-rail-list{ display: none; }
}