/* =========================================================================
   THE LAST LOOP
   All visual styling, built from THE LAST LOOP deck.
   Edit here, run build.bat, upload the new ZIP.
   ========================================================================= */

:root {
	/* Near-black ground, hi-vis race green, and two light sections that come
	   straight off the deck (the clock spread and the format spread). */
	--tll-bg: #05070a;
	--tll-bg-2: #0a0d12;
	--tll-bg-3: #10151c;
	--tll-line: #242c37;
	--tll-fg: #ffffff;
	--tll-muted: #9aa7b6;
	--tll-ink: #16181b;
	--tll-accent: #4be80b;
	--tll-accent-ink: #05070a;
	--tll-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--tll-body: "Inter", "Helvetica Neue", Arial, sans-serif;
	--tll-mono: "Space Mono", ui-monospace, Consolas, monospace;
	--tll-max: 1240px;
	--tll-pad: clamp(20px, 5vw, 64px);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
	-webkit-text-size-adjust: 100%;
}

body.tll {
	margin: 0;
	background: var(--tll-bg);
	color: var(--tll-fg);
	font-family: var(--tll-body);
	font-size: 17px;
	line-height: 1.65;
	overflow-x: hidden;
}

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

a {
	color: var(--tll-accent);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	padding: 10px 16px;
	background: var(--tll-accent);
	color: var(--tll-accent-ink);
}

/* ---------- Typography ---------- */

/* The deck's headline voice: wide, heavy, tightly tracked, all caps. */
.tll h1,
.tll h2,
.tll h3,
.tll h4 {
	font-family: var(--tll-display);
	font-weight: 800;
	font-stretch: 125%;
	letter-spacing: -0.01em;
	line-height: 0.95;
	text-transform: uppercase;
	margin: 0 0 0.4em;
}

.tll h1,
.tll .tll-title-xl,
.tll .tll-title-xl .elementor-heading-title {
	font-size: clamp(2.6rem, 8.4vw, 7rem);
	line-height: 0.9;
}

.tll h2,
.tll .tll-heading h2 {
	font-size: clamp(1.9rem, 4.6vw, 3.6rem);
}

.tll h3 {
	font-size: clamp(1.1rem, 2vw, 1.5rem);
}

.tll p {
	margin: 0 0 1em;
}

.tll-accent,
.tll .tll-accent,
.tll-accent .elementor-heading-title {
	color: var(--tll-accent);
}

.tll-eyebrow,
.tll-eyebrow p {
	font-family: var(--tll-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--tll-accent);
	margin: 0 0 1.2em;
}

.tll-eyebrow--light,
.tll-eyebrow--light p {
	color: #ffffff;
	letter-spacing: 0.24em;
}

.tll-eyebrow--ink,
.tll-eyebrow--ink p {
	color: var(--tll-ink);
}

.tll-lead,
.tll-lead p {
	font-size: clamp(1.02rem, 1.7vw, 1.22rem);
	color: #d5dde8;
	max-width: 62ch;
	letter-spacing: 0.03em;
}

.tll-note,
.tll-note p {
	font-family: var(--tll-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #b9c5d4;
}

/* The deck's two signature devices: a slanted green plate behind a headline,
   and a green marker highlight behind a line of small caps. */
.tll-plate,
.tll-plate-heading .elementor-heading-title,
h2.tll-plate-heading {
	display: inline-block;
	position: relative;
	color: var(--tll-ink);
	padding: 0.18em 0.42em;
	margin: 0;
}

.tll-plate::before,
.tll-plate-heading .elementor-heading-title::before,
h2.tll-plate-heading::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--tll-accent);
	clip-path: polygon(0 6%, 100% 0, 99% 94%, 1% 100%);
	z-index: -1;
}

.tll-plate,
.tll-plate-heading,
h2.tll-plate-heading {
	isolation: isolate;
}

.tll-mark {
	display: inline;
	background: var(--tll-accent);
	color: var(--tll-ink);
	padding: 0.08em 0.3em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* ---------- Buttons ---------- */

.tll-btn,
.tll .elementor-button {
	display: inline-block;
	font-family: var(--tll-mono);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 18px 40px;
	border: 2px solid var(--tll-accent);
	background: var(--tll-accent);
	color: var(--tll-accent-ink);
	border-radius: 0;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

/* The hover state stays SOLID. An outline-on-transparent hover disappears when
   the button sits on a photo, which is exactly where these buttons live. */
.tll-btn:hover,
.tll-btn:focus-visible,
.tll .elementor-button:hover,
.tll .elementor-button:focus-visible {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--tll-accent-ink);
	text-decoration: none;
	transform: translateY(-2px);
}

.tll-btn-sm {
	padding: 11px 22px;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
}

/* ---------- Header ---------- */

.tll-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(5, 7, 10, 0.88);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--tll-line);
}

.tll-header__inner {
	max-width: var(--tll-max);
	margin: 0 auto;
	padding: 14px var(--tll-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.tll-brand__text {
	font-family: var(--tll-display);
	font-weight: 800;
	font-stretch: 125%;
	font-size: 1.3rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tll-fg);
	text-decoration: none;
}

.tll-brand img {
	max-height: 46px;
	width: auto;
}

.tll-nav {
	display: flex;
	align-items: center;
	gap: 30px;
}

.tll-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 26px;
}

.tll-menu a {
	font-family: var(--tll-mono);
	font-size: 0.76rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tll-fg);
	text-decoration: none;
	opacity: 0.82;
}

.tll-menu a:hover {
	opacity: 1;
	color: var(--tll-accent);
	text-decoration: none;
}

.tll-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--tll-line);
	background: transparent;
	cursor: pointer;
}

.tll-burger span {
	display: block;
	height: 2px;
	width: 20px;
	margin: 0 auto;
	background: var(--tll-fg);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ---------- Layout ---------- */

.tll-main {
	display: block;
}

.tll-inner {
	max-width: var(--tll-max);
	margin: 0 auto;
	padding: 0 var(--tll-pad);
	width: 100%;
}

.tll-section {
	padding: clamp(72px, 11vw, 150px) 0;
	position: relative;
}

.tll-page__content--wrapped {
	max-width: var(--tll-max);
	margin: 0 auto;
	padding: 60px var(--tll-pad);
}

.tll-page__header {
	padding: 80px 0 0;
}

.tll-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 5vw, 70px);
	align-items: center;
}

.tll-grid-format {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: clamp(28px, 5vw, 70px);
	align-items: center;
}

.tll-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
}

/* Every photographic section carries the same scrim treatment. */
.tll-hero,
.tll-rules,
.tll-quote,
.tll-facts,
.tll-format,
.tll-partner,
.tll-cta {
	background-size: cover;
	background-position: center;
	position: relative;
	isolation: isolate;
}

body.tll-native .tll-hero::before,
body.tll-native .tll-rules::before,
body.tll-native .tll-quote::before,
body.tll-native .tll-facts::before,
body.tll-native .tll-format::before,
body.tll-native .tll-partner::before,
body.tll-native .tll-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
}

/* ---------- Hero ---------- */

.tll-hero {
	min-height: min(88vh, 860px);
	display: flex;
	align-items: center;
	text-align: center;
}

body.tll-native .tll-hero::before {
	background: linear-gradient(180deg, rgba(5, 7, 10, 0.5), rgba(5, 7, 10, 0.6));
}

.tll-hero .tll-inner,
.tll-hero .elementor-widget-wrap {
	text-align: center;
}

.tll-hero .tll-title-xl {
	margin-bottom: 0.3em;
	text-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
}

/* ---------- Rules ---------- */

body.tll-native .tll-rules::before {
	background: rgba(5, 7, 10, 0.55);
}

.tll-rules .tll-plate-heading,
.tll-rules h2.tll-plate-heading {
	margin-bottom: 0.9em;
}

.tll-rule-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(26px, 3.4vw, 46px);
}

.tll-rule__num {
	display: block;
	font-family: var(--tll-mono);
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.26em;
	color: var(--tll-accent);
	margin-bottom: 0.7em;
}

.tll-rule h3 {
	font-family: var(--tll-mono);
	font-weight: 700;
	font-stretch: normal;
	font-size: 0.95rem;
	letter-spacing: 0.16em;
	line-height: 1.4;
	margin: 0 0 0.6em;
}

.tll-rule p {
	margin: 0;
	color: #cfd8e3;
	font-size: 0.98rem;
	letter-spacing: 0.02em;
	max-width: 34ch;
}

/* ---------- The clock line (light spread) ---------- */

.tll-quote {
	text-align: center;
	color: var(--tll-ink);
}

body.tll-native .tll-quote::before {
	background: rgba(255, 255, 255, 0.1);
}

.tll-clock-lines {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(30px, 7vw, 90px);
	min-height: clamp(220px, 32vw, 420px);
}

.tll-clock-lines .tll-plate {
	font-family: var(--tll-display);
	font-weight: 800;
	font-stretch: 125%;
	font-size: clamp(1.3rem, 3vw, 2.4rem);
	line-height: 1.05;
	text-transform: uppercase;
	text-align: left;
}

/* ---------- Race facts ---------- */

.tll-facts {
	text-align: center;
	padding: clamp(90px, 14vw, 190px) 0;
}

body.tll-native .tll-facts::before {
	background: rgba(5, 7, 10, 0.2);
}

html body.tll .tll-grid-4,
html body.tll #details .elementor-container {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px clamp(24px, 5vw, 70px);
	width: 100%;
	max-width: var(--tll-max);
	margin-left: auto !important;
	margin-right: auto !important;
	justify-content: center;
}

html body.tll #details .elementor-column {
	width: 100% !important;
}

.tll-fact-label,
.tll-fact-label .elementor-heading-title,
h3.tll-fact-label,
.tll-fact-value,
.tll-fact-value .elementor-heading-title,
h3.tll-fact-value {
	white-space: nowrap;
}

/* Elementor lays a column's widgets out in a flex row that only gives each
   one its content width, so two widgets end up shrunk side by side instead
   of full width and stacked - that is what was pushing the value off-center
   under its label. Switching the row itself to block stacking fixes both:
   text-align now has a full-width box to center in, and label/value stack
   as two lines instead of competing for the same row. */
html body.tll #details .elementor-widget-wrap {
	display: block !important;
}

.tll-fact-label,
.tll-fact-value {
	width: 100% !important;
}

.tll-fact-label,
.tll-fact-label .elementor-heading-title,
h3.tll-fact-label {
	display: block !important;
	text-align: center !important;
	font-family: var(--tll-display);
	font-weight: 800;
	font-stretch: 125%;
	font-size: clamp(1.5rem, 2.8vw, 2.1rem);
	letter-spacing: 0.01em;
	color: var(--tll-fg);
	text-shadow: 0 2px 18px rgba(5, 7, 10, 0.75);
	margin: 0 0 0.3em;
}

.tll-fact-value,
.tll-fact-value .elementor-heading-title,
h3.tll-fact-value {
	font-family: var(--tll-display);
	font-weight: 700;
	font-stretch: 125%;
	font-size: clamp(1.5rem, 2.8vw, 2.1rem);
	color: var(--tll-fg);
	text-shadow: 0 2px 18px rgba(5, 7, 10, 0.75);
	margin: 0;
}

/* ---------- The format (light spread) ---------- */

.tll-format {
	color: var(--tll-ink);
}

body.tll-native .tll-format::before {
	background: rgba(255, 255, 255, 0.12);
}

.tll-manifesto p {
	font-family: var(--tll-mono);
	font-weight: 700;
	font-size: clamp(0.8rem, 1.4vw, 1.02rem);
	letter-spacing: 0.08em;
	line-height: 1.9;
	text-transform: uppercase;
	margin: 0;
}

.tll-plate-heading--right .elementor-heading-title,
h2.tll-plate-heading--right {
	font-size: clamp(2.2rem, 5.6vw, 4.4rem);
	line-height: 0.92;
	text-align: left;
}

.tll-format .tll-grid-format > div:last-child,
.tll-format .tll-plate-heading--right {
	text-align: right;
}

/* ---------- Entry ---------- */

.tll-register {
	position: relative;
	background: var(--tll-bg) url('../images/register.jpg') center / cover no-repeat;
	text-align: center;
}

.tll-register::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(5, 7, 10, 0.62);
	pointer-events: none;
}

.tll-register .tll-inner {
	position: relative;
	z-index: 1;
}

/* ---------- Partners (Unbroken / Badhouse) ---------- */

body.tll-native .tll-partner::before {
	background: linear-gradient(90deg, rgba(5, 7, 10, 0.88) 0%, rgba(5, 7, 10, 0.72) 45%, rgba(5, 7, 10, 0.25) 100%);
}

.tll-partner .tll-inner > * {
	max-width: 62ch;
}

.tll-partner__title,
.tll-partner__title .elementor-heading-title,
h2.tll-partner__title {
	font-size: clamp(2.4rem, 6vw, 4.6rem);
	margin-bottom: 0.35em;
}

.tll-partner__motto {
	display: inline-block;
	font-family: var(--tll-mono);
	font-weight: 700;
	font-size: clamp(0.62rem, 1.1vw, 0.86rem);
	letter-spacing: 0.5em;
	color: var(--tll-accent);
	vertical-align: middle;
	margin-left: 0.8em;
}

.tll-partner__body p,
p.tll-partner__body {
	color: #e3e9f1;
	font-size: clamp(0.96rem, 1.5vw, 1.08rem);
	letter-spacing: 0.04em;
	margin: 0 0 1.1em;
}

.tll-partner__body--accent p,
p.tll-partner__body--accent {
	color: var(--tll-accent);
}

.tll-partner__kicker,
.tll-partner__kicker .elementor-heading-title,
h3.tll-partner__kicker {
	font-size: clamp(1.2rem, 2.4vw, 1.9rem);
	line-height: 1.15;
	color: var(--tll-accent);
	margin: 1.4em 0 0;
}

/* ---------- FAQ ---------- */

.tll-faq {
	background: #ffffff;
	color: var(--tll-ink);
	padding-top: 0;
}

/* The deck opens the FAQ on a full-bleed green band. */
.tll-faq .tll-eyebrow--ink,
.tll-faq .tll-faq-title {
	position: relative;
}

.tll-faq .tll-inner > .tll-eyebrow--ink {
	margin: 0;
	padding: clamp(40px, 6vw, 70px) 0 0;
}

.tll-faq-title,
.tll-faq .tll-faq-title .elementor-heading-title,
h2.tll-faq-title {
	color: var(--tll-ink);
	margin: 0 0 clamp(30px, 5vw, 60px);
	padding-bottom: clamp(40px, 6vw, 70px);
}

.tll-faq::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: clamp(150px, 20vw, 240px);
	background: var(--tll-accent);
	z-index: 0;
}

.tll-faq .tll-inner,
.tll-faq .elementor-container {
	position: relative;
	z-index: 1;
}

.tll-faq-q,
.tll-faq .elementor-widget-heading.tll-faq-q {
	border-top: 1px solid rgba(22, 24, 27, 0.16);
	margin: 0;
	cursor: pointer;
}

.tll-faq-q .elementor-heading-title,
h3.tll-faq-q {
	font-family: var(--tll-body);
	font-weight: 600;
	font-stretch: normal;
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--tll-ink);
	padding: 22px 46px 22px 0;
	margin: 0;
	position: relative;
	display: block;
	line-height: 1.4;
	transition: color 0.2s ease;
}

.tll-faq-q:hover .elementor-heading-title,
h3.tll-faq-q:hover {
	color: #4a8f14;
}

.tll-faq-q .elementor-heading-title::after,
h3.tll-faq-q::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--tll-mono);
	font-size: 1.3rem;
	color: #3ea800;
}

.tll-faq-q.is-open .elementor-heading-title::after,
h3.tll-faq-q.is-open::after {
	content: "\2212";
}

.tll-faq-a,
.tll-faq .elementor-widget.tll-faq-a {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;
	margin: 0;
}

.tll-faq-a.is-open,
.tll-faq .elementor-widget.tll-faq-a.is-open {
	max-height: 900px;
}

.tll-faq-a p {
	color: #4a5460;
	max-width: 78ch;
	padding: 0 0 24px;
	margin: 0;
}

.tll-faq-a a {
	color: #3ea800;
}

.tll-faq .tll-faq-a:last-child,
.tll-faq .elementor-widget.tll-faq-a:last-child {
	border-bottom: 1px solid rgba(22, 24, 27, 0.16);
}

/* No-JS safety: always readable if the script fails. */
.no-js .tll-faq-a,
.no-js .tll-faq .elementor-widget.tll-faq-a {
	max-height: none;
}

/* ---------- Closing band ---------- */

.tll-cta {
	text-align: center;
}

body.tll-native .tll-cta::before {
	background: rgba(5, 7, 10, 0.72);
}

.tll-cta .tll-inner,
.tll-cta .elementor-widget-wrap {
	text-align: center;
}

.tll-quote-accent,
.tll-quote-accent .elementor-heading-title {
	color: var(--tll-accent);
	font-size: clamp(1.5rem, 3.4vw, 2.6rem);
	margin-bottom: 0.15em;
}

.tll-quote-accent--big,
.tll-quote-accent--big .elementor-heading-title {
	font-size: clamp(1.9rem, 4.6vw, 3.6rem);
	margin-bottom: 0.5em;
}

.tll-cta .tll-lead,
.tll-cta .tll-lead p {
	margin-left: auto;
	margin-right: auto;
	color: #ffffff;
}

/* ---------- Footer ---------- */

.tll-footer {
	background: #000000;
	border-top: 1px solid var(--tll-line);
	padding: 60px 0 40px;
	text-align: center;
}

.tll-footer__inner {
	max-width: var(--tll-max);
	margin: 0 auto;
	padding: 0 var(--tll-pad);
}

.tll-footer__tagline {
	font-family: var(--tll-mono);
	font-size: 0.76rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tll-muted);
}

.tll-footer__menu {
	display: flex;
	justify-content: center;
	gap: 24px;
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.tll-footer__menu a {
	font-family: var(--tll-mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tll-fg);
}

.tll-footer__meta,
.tll-footer__copy,
.tll-footer__credit {
	font-family: var(--tll-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	color: var(--tll-muted);
}

/* ---------- Blog bits ---------- */

.tll-postlist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 34px;
}

.tll-card h2 {
	font-size: 1.4rem;
	margin: 14px 0 8px;
}

.tll-card p {
	color: var(--tll-muted);
}

/* =========================================================================
   Elementor compatibility
   -------------------------------------------------------------------------
   Two things about Elementor drive this whole block:

   1. Elementor's "kit" stylesheet loads AFTER the theme stylesheet and styles
      bare tags (h1-h6, .elementor-button). Every rule here is therefore
      prefixed with `html body.tll` so it out-specifies the kit instead of
      fighting it with !important.

   2. Elementor does NOT print a section's CSS classes into the markup, but it
      DOES print the section's element ID. So section-level styling is keyed off
      the IDs (#hero, #rules, ...), which exist in both the Elementor render and
      the plain-HTML fallback.
   ========================================================================= */

html body.tll h1,
html body.tll h2,
html body.tll h3,
html body.tll h4,
html body.tll .elementor-heading-title {
	font-family: var(--tll-display);
	font-weight: 800;
	font-stretch: 125%;
	letter-spacing: -0.01em;
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--tll-fg);
}

html body.tll h1,
html body.tll .tll-title-xl .elementor-heading-title,
html body.tll h1.tll-title-xl {
	font-size: clamp(2.6rem, 8.4vw, 7rem);
	line-height: 0.9;
}

html body.tll h2,
html body.tll h2.elementor-heading-title {
	font-size: clamp(1.9rem, 4.6vw, 3.6rem);
}

html body.tll h3,
html body.tll h3.elementor-heading-title {
	font-size: clamp(1.1rem, 2vw, 1.5rem);
}

/* Race facts (location, date, ...) run larger than a normal h3. */
html body.tll .tll-fact-label .elementor-heading-title,
html body.tll h3.tll-fact-label,
html body.tll .tll-fact-value .elementor-heading-title,
html body.tll h3.tll-fact-value {
	font-size: clamp(1.5rem, 2.8vw, 2.1rem);
}

html body.tll .tll-accent .elementor-heading-title,
html body.tll .tll-accent,
html body.tll .tll-quote-accent .elementor-heading-title {
	color: var(--tll-accent);
}

html body.tll .tll-faq-q .elementor-heading-title,
html body.tll h3.tll-faq-q {
	font-family: var(--tll-body);
	font-weight: 600;
	font-stretch: normal;
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--tll-ink);
	line-height: 1.4;
}

html body.tll .tll-faq-title .elementor-heading-title,
html body.tll h2.tll-faq-title {
	color: var(--tll-ink);
}

/* ---- Buttons: the kit paints these blue by default ---- */

html body.tll .elementor-button,
html body.tll a.elementor-button,
html body.tll .elementor-button-wrapper .elementor-button {
	font-family: var(--tll-mono);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 18px 40px;
	border: 2px solid var(--tll-accent);
	border-radius: 0;
	background-color: var(--tll-accent);
	color: var(--tll-accent-ink);
	fill: var(--tll-accent-ink);
}

html body.tll .elementor-button:hover,
html body.tll .elementor-button:focus-visible,
html body.tll a.elementor-button:hover,
html body.tll a.elementor-button:focus-visible {
	background-color: #ffffff;
	border-color: #ffffff;
	color: var(--tll-accent-ink);
	fill: var(--tll-accent-ink);
}

/* ---- Section rhythm, keyed off the anchors ---- */

html body.tll #hero,
html body.tll #rules,
html body.tll #clock,
html body.tll #details,
html body.tll #what-is,
html body.tll #unbroken,
html body.tll #badhouse,
html body.tll #faq,
html body.tll #contact {
	padding-top: clamp(72px, 11vw, 150px);
	padding-bottom: clamp(72px, 11vw, 150px);
}

html body.tll #details {
	padding-top: clamp(90px, 14vw, 190px);
	padding-bottom: clamp(90px, 14vw, 190px);
}

/* Entry: full-bleed background photo with dark overlay, centred copy - same
   treatment as the other photo sections. */
html body.tll #register {
	position: relative;
	background-color: var(--tll-bg);
	background-image: url('../images/register.jpg');
	background-size: cover;
	background-position: center center;
	padding-top: clamp(90px, 13vw, 180px);
	padding-bottom: clamp(90px, 13vw, 180px);
}

html body.tll #register::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(5, 7, 10, 0.62);
	z-index: 0;
	pointer-events: none;
}

html body.tll #register > .elementor-container {
	position: relative;
	z-index: 1;
}

html body.tll #register .elementor-column:first-child {
	width: 100% !important;
}

html body.tll #register .elementor-column:first-child .elementor-widget-wrap {
	justify-content: center;
	text-align: center;
}

html body.tll #register .elementor-widget {
	width: 100%;
	text-align: center;
}

/* The photo is the background now - drop the image column. */
html body.tll #register .elementor-column:last-child:not(:first-child) {
	display: none;
}

html body.tll #register .tll-lead,
html body.tll #register .tll-lead p {
	margin-left: auto;
	margin-right: auto;
}

html body.tll #register .elementor-button-wrapper,
html body.tll #register .elementor-widget-button {
	text-align: center;
	justify-content: center;
}

html body.tll #register .elementor-widget-button {
	margin-top: 12px;
	margin-bottom: 12px;
}

html body.tll #faq {
	background-color: #ffffff;
	padding-top: 0;
}

html body.tll #clock,
html body.tll #what-is {
	color: var(--tll-ink);
}

/* Keep the inner content on the grid even if the kit's width differs. */
html body.tll .elementor-section > .elementor-container {
	max-width: var(--tll-max);
	/* Elementor's column gap adds 15px inside every widget wrap. Subtract it
	   here so widget text starts on exactly the same line as the header logo
	   and the footer, which pad by --tll-pad alone. */
	padding-left: max(0px, calc(var(--tll-pad) - 15px));
	padding-right: max(0px, calc(var(--tll-pad) - 15px));
}

/* ---- Hero ---- */

/* Small type sits straight on photography here, so it gets its own scrim. */
html body.tll #hero .tll-eyebrow p,
html body.tll #hero .tll-note p,
html body.tll #contact .tll-lead p,
.tll-hero .tll-eyebrow,
.tll-hero .tll-note,
.tll-cta .tll-lead {
	text-shadow: 0 2px 16px rgba(5, 7, 10, 0.95);
}

html body.tll #hero > .elementor-container {
	min-height: min(78vh, 820px);
	align-items: center;
}

html body.tll #hero .elementor-widget-wrap,
html body.tll #clock .elementor-widget-wrap,
html body.tll #contact .elementor-widget-wrap,
html body.tll #details .elementor-widget-wrap {
	text-align: center;
}

html body.tll #contact .tll-lead p {
	margin-left: auto;
	margin-right: auto;
}

/* ---- The format ---- */

html body.tll #what-is > .elementor-container {
	align-items: center;
}

html body.tll #what-is .elementor-column:last-child .elementor-widget-wrap {
	justify-content: flex-end;
	text-align: right;
}

/* ---- Partners ---- */

html body.tll #unbroken .elementor-column:first-child .elementor-widget-wrap > *,
html body.tll #badhouse .elementor-column:first-child .elementor-widget-wrap > * {
	max-width: 62ch;
}

/* ---- FAQ: the widget wrapper is the accordion row ---- */

html body.tll #faq .elementor-widget.tll-faq-q {
	border-top: 1px solid rgba(22, 24, 27, 0.16);
	margin-bottom: 0;
	cursor: pointer;
}

html body.tll #faq .elementor-widget.tll-faq-q .elementor-heading-title {
	padding: 22px 46px 22px 0;
	margin: 0;
	position: relative;
	display: block;
}

html body.tll #faq .elementor-widget.tll-faq-a {
	max-height: 0;
	overflow: hidden;
	margin-bottom: 0;
	transition: max-height 0.3s ease;
}

html body.tll #faq .elementor-widget.tll-faq-a.is-open {
	max-height: 1000px;
}

html body.tll #faq .elementor-widget:last-child {
	border-bottom: 1px solid rgba(22, 24, 27, 0.16);
}

/* ---- Spacing between stacked widgets ---- */

html body.tll .elementor-widget:not(:last-child) {
	margin-bottom: 16px;
}

html body.tll #faq .elementor-widget:not(:last-child),
html body.tll #rules .tll-rule-items {
	margin-bottom: 0;
}

/* The theme must never constrain an Elementor page - Elementor owns the width. */
html body.tll-elementor .tll-page__content {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.tll-rule-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 860px) {
	.tll-burger {
		display: flex;
	}

	.tll-nav {
		position: fixed;
		inset: 64px 0 auto 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		background: var(--tll-bg-2);
		border-bottom: 1px solid var(--tll-line);
		padding: 20px var(--tll-pad) 30px;
		transform: translateY(-120%);
		transition: transform 0.28s ease;
		z-index: 99;
	}

	.tll-nav.is-open {
		transform: translateY(0);
	}

	.tll-menu {
		flex-direction: column;
		gap: 0;
		width: 100%;
	}

	.tll-menu li {
		width: 100%;
		border-bottom: 1px solid var(--tll-line);
	}

	.tll-menu a {
		display: block;
		padding: 16px 0;
		font-size: 0.9rem;
	}

	.tll-nav .tll-btn {
		margin-top: 20px;
	}

	.tll-grid-2,
	.tll-grid-format {
		grid-template-columns: 1fr;
	}

	.tll-format .tll-grid-format > div:last-child,
	.tll-format .tll-plate-heading--right {
		text-align: left;
	}

	.tll-clock-lines {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}

}

@media (max-width: 620px) {
	.tll-rule-grid {
		grid-template-columns: 1fr;
	}

	/* Keep the 2x2 facts grid, but let the words shrink to fit their column
	   instead of wrapping to a second line. Matches the specificity of the
	   html body.tll override above so it actually wins at this width. */
	html body.tll .tll-fact-label .elementor-heading-title,
	html body.tll h3.tll-fact-label,
	html body.tll .tll-fact-value .elementor-heading-title,
	html body.tll h3.tll-fact-value,
	.tll-fact-label,
	.tll-fact-label .elementor-heading-title,
	h3.tll-fact-label,
	.tll-fact-value,
	.tll-fact-value .elementor-heading-title,
	h3.tll-fact-value {
		font-size: 4.1vw;
	}

	.tll-partner__motto {
		display: block;
		margin: 0.6em 0 0;
		letter-spacing: 0.3em;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	* {
		animation: none !important;
		transition: none !important;
	}
}

/* =========================================================================
   Elementor: the deck's plate / marker devices and the FAQ band
   -------------------------------------------------------------------------
   Elementor's kit colours every .elementor-heading-title, and it does not
   print section CSS classes - so the green plates, the marker highlight and
   the FAQ's green band all need an `html body.tll` + ID equivalent here.
   ========================================================================= */

html body.tll .tll-plate,
html body.tll .tll-plate-heading .elementor-heading-title,
html body.tll h2.tll-plate-heading {
	display: inline-block;
	position: relative;
	isolation: isolate;
	color: var(--tll-ink);
	padding: 0.18em 0.42em;
	margin: 0;
}

html body.tll .tll-plate::before,
html body.tll .tll-plate-heading .elementor-heading-title::before,
html body.tll h2.tll-plate-heading::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--tll-accent);
	clip-path: polygon(0 6%, 100% 0, 99% 94%, 1% 100%);
	z-index: -1;
}

html body.tll .tll-mark {
	background: var(--tll-accent);
	color: var(--tll-ink);
	padding: 0.08em 0.3em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

html body.tll #clock .tll-clock-lines {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(30px, 7vw, 90px);
	min-height: clamp(220px, 32vw, 420px);
	text-align: left;
}

html body.tll #clock .tll-plate {
	font-family: var(--tll-display);
	font-weight: 800;
	font-stretch: 125%;
	font-size: clamp(1.3rem, 3vw, 2.4rem);
	line-height: 1.05;
	text-transform: uppercase;
}

html body.tll #rules .tll-rule-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(26px, 3.4vw, 46px);
}

html body.tll #rules .tll-rule h3 {
	font-family: var(--tll-mono);
	font-weight: 700;
	font-stretch: normal;
	font-size: 0.95rem;
	letter-spacing: 0.16em;
	line-height: 1.4;
	margin: 0 0 0.6em;
}

html body.tll #faq::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: clamp(150px, 20vw, 240px);
	background: var(--tll-accent);
	z-index: 0;
}

html body.tll #faq > .elementor-container {
	position: relative;
	z-index: 1;
}

html body.tll #faq .tll-eyebrow p {
	color: var(--tll-ink);
	margin: 0;
	padding: clamp(40px, 6vw, 70px) 0 0;
}

html body.tll #faq .tll-faq-title .elementor-heading-title {
	padding-bottom: clamp(40px, 6vw, 70px);
	margin: 0;
}

@media (max-width: 1024px) {
	html body.tll #rules .tll-rule-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	html body.tll #clock .tll-clock-lines {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 620px) {
	html body.tll #rules .tll-rule-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   Minor motion
   -------------------------------------------------------------------------
   The hero's entrance, the header's scroll shadow, staggered reveals for the
   rules grid / facts strip / FAQ list, and a few small hover touches. Every
   rule in this block is skipped outright by the reduced-motion query above.
   ========================================================================= */

/* ---- Hero entrance (plays once, on load) ---- */

.tll-hero .tll-eyebrow,
.tll-hero .tll-title-xl,
.tll-hero .tll-btn,
html body.tll #hero .elementor-widget {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.tll-hero .tll-title-xl {
	transition-delay: 0.08s;
}

.tll-hero .tll-btn,
html body.tll #hero .elementor-widget:last-child {
	transition-delay: 0.16s;
}

html body.tll #hero .elementor-widget:nth-child(1) {
	transition-delay: 0s;
}

html body.tll #hero .elementor-widget:nth-child(2) {
	transition-delay: 0.08s;
}

html body.tll #hero .elementor-widget:nth-child(3) {
	transition-delay: 0.16s;
}

.tll-hero--in .tll-eyebrow,
.tll-hero--in .tll-title-xl,
.tll-hero--in .tll-btn,
html body.tll #hero.tll-hero--in .elementor-widget {
	opacity: 1;
	transform: none;
}

/* No-JS safety: never hide the hero if the trigger class never arrives. */
.no-js .tll-hero .tll-eyebrow,
.no-js .tll-hero .tll-title-xl,
.no-js .tll-hero .tll-btn,
.no-js html body.tll #hero .elementor-widget {
	opacity: 1;
	transform: none;
}

/* ---- Header: a slightly deeper shadow once the page has scrolled ---- */

.tll-header {
	transition: box-shadow 0.25s ease, background 0.25s ease;
}

.tll-header.is-scrolled {
	background: rgba(5, 7, 10, 0.96);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

/* ---- Rule cards: small lift + accent number on hover ---- */

.tll-rule {
	transition: transform 0.25s ease;
}

.tll-rule:hover {
	transform: translateY(-4px);
}

.tll-rule:hover .tll-rule__num {
	color: var(--tll-accent);
	transition: color 0.2s ease;
}

/* ---- FAQ plus/minus: rotate instead of swap ---- */

.tll-faq-q .elementor-heading-title::after,
h3.tll-faq-q::after {
	display: inline-block;
	transition: transform 0.25s ease;
}

.tll-faq-q.is-open .elementor-heading-title::after,
h3.tll-faq-q.is-open::after {
	content: "+";
	transform: rotate(135deg);
}

/* ---- Partner kicker underline. ---- */

.tll-partner__kicker {
	position: relative;
	display: inline-block;
}

.tll-partner__kicker::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -0.15em;
	height: 2px;
	background: var(--tll-accent);
	transition: right 0.6s ease;
}

.tll-partner:hover .tll-partner__kicker::after {
	right: 0;
}

/* ---- Nav links: underline draws in on hover instead of just a colour swap ---- */

.tll-menu a {
	position: relative;
}

.tll-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -4px;
	height: 1px;
	background: var(--tll-accent);
	transition: right 0.25s ease;
}

.tll-menu a:hover::after {
	right: 0;
}

@media (prefers-reduced-motion: reduce) {
	.tll-hero .tll-eyebrow,
	.tll-hero .tll-title-xl,
	.tll-hero .tll-btn,
	html body.tll #hero .elementor-widget,
	.tll-rule,
	.tll-partner__kicker::after,
	.tll-menu a::after {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- Animated section backgrounds ----------
   The <video> is injected by main.js into #rules, #clock, #badhouse and
   #contact and replaces the section photo. It is never cropped: the section
   takes the video's own aspect ratio (--tll-video-ratio) and the video uses
   object-fit: contain. If the copy needs more height than that ratio gives,
   the section grows and the spare space is filled with --tll-video-fill. */

.tll-has-video {
	--tll-video-fill: #05070A;
}

.tll-has-video--clock {
	--tll-video-fill: #a8aaae;
}

/* Elementor does not always carry the theme's section classes, so the
   stacking context the video relies on is set here explicitly - without it
   the z-index:-2 video would sit behind the page background. */
html body.tll .tll-has-video {
	position: relative !important;
	isolation: isolate !important;
	background-image: none !important;
	background-color: var(--tll-video-fill) !important;
	transition: none !important;
}

.tll-bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	z-index: -2;
	pointer-events: none;
	background: var(--tll-video-fill);
}

@media (min-width: 761px) {
	html body.tll .tll-has-video {
		aspect-ratio: var(--tll-video-ratio, 16 / 9);
		min-height: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: clamp(40px, 5vw, 80px) !important;
		padding-bottom: clamp(40px, 5vw, 80px) !important;
	}

	html body.tll .tll-has-video > .elementor-container,
	html body.tll .tll-has-video > .tll-inner {
		width: 100%;
	}

	/* A lighter scrim so the video itself stays clear. */
	html body.tll #contact.tll-has-video > .elementor-background-overlay {
		opacity: 0.45 !important;
	}

	body.tll-native .tll-cta.tll-has-video::before {
		background: rgba(5, 7, 10, 0.45);
	}
}

/* Phones: a wide video cannot hold the copy without cropping, so it sits on
   top of the section at full width and the copy follows underneath. */
@media (max-width: 760px) {
	html body.tll .tll-has-video {
		padding-top: 0 !important;
	}

	html body.tll .tll-bg-video {
		position: relative;
		inset: auto;
		display: block;
		height: auto;
		aspect-ratio: var(--tll-video-ratio, 16 / 9);
		z-index: 0;
		margin-bottom: 44px;
	}

	html body.tll .tll-has-video > .elementor-background-overlay,
	body.tll-native .tll-has-video::before {
		display: none;
	}
}

/* ---------- Race facts: mountain range background ----------
   Framed low enough that the facts sit over the darker ridges, high enough to
   keep the peaks and the sunset sky in view. */

html body.tll #details {
	background-position: center 80% !important;
}

@media (max-width: 760px) {
	html body.tll #details > .elementor-background-overlay {
		opacity: 0.42 !important;
	}

	body.tll-native .tll-facts::before {
		background: rgba(5, 7, 10, 0.42);
	}
}