/* Get to grips with Materiality - static rebuild of the Joomla / Gantry rt_chimera one-pager.
   No JavaScript. Fonts are self-hosted. */

/* ---------- Fonts ---------- */
@font-face { font-family: 'Roboto'; font-weight: 400; font-style: normal; font-display: swap;
	src: url(../fonts/roboto-regular.woff) format('woff'); }
@font-face { font-family: 'Roboto'; font-weight: 700; font-style: normal; font-display: swap;
	src: url(../fonts/roboto-bold.woff) format('woff'); }
@font-face { font-family: 'Walkway'; font-weight: 400; font-style: normal; font-display: swap;
	src: url(../fonts/walkway-bold.woff) format('woff'); }
@font-face { font-family: 'FontAwesome'; font-weight: 400; font-style: normal; font-display: block;
	src: url(../fonts/fontawesome-webfont.woff) format('woff'); }

/* Only the Font Awesome 4 glyphs this page uses */
.fa { display: inline-block; font: normal normal normal 1em/1 FontAwesome; -webkit-font-smoothing: antialiased; }
.fa-star::before { content: "\f005"; }
.fa-phone::before { content: "\f095"; }
.fa-desktop::before { content: "\f108"; }
.fa-envelope-o::before { content: "\f003"; }
.fa-twitter::before { content: "\f099"; }
.fa-linkedin::before { content: "\f0e1"; }

/* ---------- Tokens ---------- */
:root {
	--purple: #672f70;
	--pink: #e16ef4;
	--gold: #b17e15;
	--text: #444;
	--alt-bg: #f7f7f7;
	--dark: #3b3b3b;
	--darker: #333;
	--muted: #aaa;
	--heading-font: 'Walkway', Verdana, Helvetica, Arial, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font: 15px/26px Roboto, Verdana, Helvetica, Arial, sans-serif;
	color: var(--text);
	background: #fff;
}
img { max-width: 100%; height: auto; border: 0; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-weight: 400; }
p { margin: 0 0 15px; }
ul { list-style: none; margin: 0; padding: 0; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

.readon {
	display: inline-block;
	padding: 8px 20px;
	border: 2px solid var(--gold);
	color: var(--gold);
	text-transform: uppercase;
	font-size: 17px;
	line-height: 23px;
	transition: background .2s, color .2s;
}
.readon:hover { background: var(--gold); color: #fff; text-decoration: none; }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 6vh 20px 64px;
	background: var(--purple);
	color: #fff;
	text-align: center;
}
.hero::after { /* zigzag edge, as in the original banner graphic */
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 54px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='162' height='65' viewBox='0 0 162 65'%3E%3Cpath d='M0 65 L81 0 L162 65 Z' fill='%23fff'/%3E%3C/svg%3E") 0 100% / 135px 54px repeat-x;
}
.hero-stars { width: min(310px, 70vw, 40vh); margin-bottom: 10px; }
.hero h1 {
	margin: 6vh 0 6px;
	font: clamp(30px, 5.2vw, 60px)/1.3 var(--heading-font);
	color: rgba(255, 255, 255, .5);
	white-space: nowrap;
}
.hero h1 span { color: #fff; }
.hero-desc { margin-top: 10px; font-size: 18px; line-height: 27px; max-width: 420px; }
.hero-desc p { margin: 0; }
.hero-desc .hero-kicker { font-size: 30px; line-height: 40px; margin-bottom: 18px; }
.hero-accreditations { width: min(246px, 60vw, 30vh); margin-top: auto; padding-top: 24px; }

/* Hero entrance (matches the original WOW/animate.css sequence) */
.hero h1 { animation: bounceInDown 1s .3s both; }
.hero-kicker { animation: zoomIn 1s 1.5s both; }
.hero-desc p:not(.hero-kicker) { animation: bounceInUp 1s 1.5s both; }

/* ---------- Animations (keyframes from animate.css, MIT) ---------- */
@keyframes bounceInDown {
	0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
	0% { opacity: 0; transform: translate3d(0, -3000px, 0); }
	60% { opacity: 1; transform: translate3d(0, 25px, 0); }
	75% { transform: translate3d(0, -10px, 0); }
	90% { transform: translate3d(0, 5px, 0); }
	100% { transform: none; }
}
@keyframes bounceInUp {
	0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
	0% { opacity: 0; transform: translate3d(0, 3000px, 0); }
	60% { opacity: 1; transform: translate3d(0, -20px, 0); }
	75% { transform: translate3d(0, 10px, 0); }
	90% { transform: translate3d(0, -5px, 0); }
	100% { transform: none; }
}
@keyframes bounceInLeft {
	0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
	0% { opacity: 0; transform: translate3d(-3000px, 0, 0); }
	60% { opacity: 1; transform: translate3d(25px, 0, 0); }
	75% { transform: translate3d(-10px, 0, 0); }
	90% { transform: translate3d(5px, 0, 0); }
	100% { transform: none; }
}
@keyframes zoomIn {
	0% { opacity: 0; transform: scale3d(.3, .3, .3); }
	50% { opacity: 1; }
}
@keyframes fadeInLeftBig {
	0% { opacity: 0; transform: translate3d(-2000px, 0, 0); }
	100% { opacity: 1; transform: none; }
}

/* Scroll-triggered: hidden only once site.js has confirmed it can reveal them */
.js-anim [data-animate] { opacity: 0; }
.js-anim [data-animate].is-in { opacity: 1; animation: 1s both; animation-delay: var(--delay, 0s); }
.js-anim [data-animate="bounceInLeft"].is-in { animation-name: bounceInLeft; }
.js-anim [data-animate="fadeInLeftBig"].is-in { animation-name: fadeInLeftBig; }

@media (prefers-reduced-motion: reduce) {
	.hero h1, .hero-kicker, .hero-desc p { animation: none !important; }
	.js-anim [data-animate] { opacity: 1; animation: none !important; }
}

/* ---------- Sticky header (appears once scrolled past most of the hero) ---------- */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 3000;
	height: 90px;
	background: var(--dark);
	box-shadow: 0 4px 0 rgba(0, 0, 0, .2);
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease, visibility .5s ease;
}
.site-header.is-visible { opacity: 1; visibility: visible; }
.site-header .container { height: 100%; display: flex; align-items: center; }
.site-header a { display: block; margin-left: 30px; }
.site-header img { display: block; width: 89px; height: 60px; }
/* keep anchor targets clear of the fixed header */
section[id] { scroll-margin-top: 90px; }

/* Stop off-screen entrance animations causing sideways scroll */
.hero, .section { overflow: hidden; }
.scroll-down { position: relative; z-index: 1; margin-top: 12px; }
.scroll-down img { display: block; }

/* ---------- Sections ---------- */
.section { padding: 35px 0 60px; }
.section-alt { background: var(--alt-bg); }
.section-dark { background: var(--dark); color: var(--muted); }

.section-title {
	margin: 10px 0 25px;
	padding-bottom: 12px;
	font: 45px/72px var(--heading-font);
	letter-spacing: 1px;
	color: var(--purple);
	text-align: center;
}
.section-title span { color: var(--pink); }
.section-title::after {
	content: "";
	display: block;
	width: 180px;
	height: 1px;
	margin: 6px auto 0;
	background: var(--pink);
}
.section-dark .section-title { color: #fff; }
.section-sub { text-align: center; font-size: 19.5px; line-height: 35px; margin-bottom: 40px; }

/* Icon + text lists (important / business case) */
.icon-list { max-width: 1050px; margin: 40px auto 0; }
.icon-list li { display: flex; align-items: center; gap: 30px; margin-bottom: 35px; }
.icon-list img { flex: 0 0 auto; width: 131px; }
.icon-list h3 { margin: 0 0 6px; font-size: 22.5px; line-height: 32px; color: var(--purple); }
.icon-list p { margin: 0; }
.icon-list-wide { max-width: none; }
.icon-list-wide img { width: 120px; }

/* Services */
.intro { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.lead { font-size: 19.5px; line-height: 35px; margin-bottom: 20px; }
.lead-sm { font-size: 18px; line-height: 32px; }
.service-elements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.service-elements img { display: block; margin: 0 auto; width: 100%; max-width: 380px; }

/* Costed options */
.options {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
	align-items: start;
}
.option { background: #fff; border-radius: 2px; text-align: center; overflow: hidden; }
.option > img { display: block; width: 100%; }
.option h3 {
	margin: 0;
	padding: 15px 15px 0;
	background: var(--text);
	font: 27px/35px var(--heading-font);
}
.option h3 a { color: #fff; }
.option h3::after {
	content: "";
	display: block;
	width: 80px;
	height: 1px;
	margin: 14px auto 0;
	background: rgba(255, 255, 255, .3);
}
.option .price {
	position: relative;
	margin: 0 0 25px;
	padding: 18px 15px 20px;
	background: var(--text);
	color: #f7f7f7;
	font-size: 17px;
	font-weight: 700;
}
.option .price::after { /* little pointer under the price */
	content: "";
	position: absolute;
	left: 50%; bottom: -8px;
	margin-left: -8px;
	border: 8px solid transparent;
	border-bottom: 0;
	border-top-color: var(--text);
}
.option .stars { font-size: 18px; letter-spacing: 2px; }
.features { padding: 0 15px; }
.features li { font-size: 16.5px; line-height: 26px; padding: 0 0 10px; }
.features li + li::before { /* plus separator between features */
	content: "+";
	display: block;
	width: 15px; height: 15px;
	margin: 6px auto 16px;
	border: 1px solid var(--text);
	border-radius: 2px;
	font: 13px/12px Roboto, sans-serif;
}
.option-cta { padding: 15px 15px 20px; margin: 0; }

/* Free resources */
#free { text-align: center; }
#free p { margin-bottom: 20px; }
.downloads { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.downloads .readon { border-width: 1px; font-size: 19px; line-height: 26px; }

/* ---------- Footer ---------- */
.contact { background: var(--darker); color: var(--muted); padding: 40px 0 30px; text-align: center; }
.contact h2 { margin: 10px 0 25px; font: 24px/38px var(--heading-font); letter-spacing: 1px; color: #fff; }
.offices { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; gap: 30px 80px; }
.contact-line { margin: 0; }
.contact-line .fa { width: 1.4em; color: var(--muted); }

.copyright { background: var(--dark); color: var(--muted); padding: 30px 0; }
.copyright .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-logo img { display: block; width: 134px; }
.to-top img { display: block; }
.social { display: flex; gap: 2px; }
.social a {
	display: block;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .1);
	color: var(--muted);
	font-size: 18px;
	line-height: 40px;
	text-align: center;
}
.social a:hover { background: var(--gold); color: #fff; text-decoration: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.options { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.container { padding: 0 16px; }
	.hero { padding: 60px 16px 90px; }
	.hero h1 { white-space: normal; font-size: 40px; line-height: 52px; margin-top: 6vh; }
	.hero-desc .hero-kicker { font-size: 24px; }
	.hero::after { height: 32px; background-size: 80px 32px; }
	.section { padding: 25px 0 40px; }
	.section-title { font-size: 32px; line-height: 44px; }
	.section-sub, .lead { font-size: 17px; line-height: 28px; }
	.lead-sm { font-size: 16px; line-height: 26px; }
	.icon-list li { align-items: flex-start; gap: 16px; }
	.icon-list img { width: 90px; }
	.icon-list-wide img { width: 80px; }
	.icon-list h3 { font-size: 19px; line-height: 26px; }
	.service-elements { grid-template-columns: 1fr; }
	.service-elements img { max-width: 320px; }
	.options { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
	.downloads { flex-direction: column; }
	.downloads .readon { font-size: 16px; text-align: center; }
	.offices { grid-template-columns: 1fr; }
	.copyright .container { flex-direction: column; }
	.footer-logo img { width: 112px; }
	.site-header { height: 70px; }
	.site-header a { margin-left: 0; }
	.site-header img { width: 74px; height: 50px; }
	section[id] { scroll-margin-top: 70px; }
}