/* =========================================================================
   KYNETIQ — site design layer
   Restyles Divi's output to the Kynetiq design system.

   The division of labour: you build and edit pages in Divi; this file makes
   whatever you build land on-brand. Content lives in Divi, design lives here.

   Selectors are scoped to Divi's own class names (.et_pb_*) and kept to the
   lowest specificity that reliably wins, so per-module overrides you set in
   the Builder still take precedence when you deliberately want them to.
   ====================================================================== */

/* ---------- Fonts ------------------------------------------------------
   Satoshi is self-hosted; Divi's own Google Fonts loader is disabled in
   functions.php so nothing fights over the body face.
   ---------------------------------------------------------------------- */

@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-900.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* Safiro — licensed primary face, not bundled. Drop Safiro-Medium.woff2 into
   assets/fonts/ and uncomment; --kq-font-display already points at it.

@font-face {
	font-family: "Safiro";
	src: url("../fonts/Safiro-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
*/

/* ---------- Ground ----------------------------------------------------- */

body {
	background: var(--kq-black);
	color: var(--kq-grey-clean);
	font-family: var(--kq-font-body);
	font-size: clamp(1rem, 0.97rem + 0.18vw, 1.06rem);
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* height:auto is load-bearing — width/height HTML attributes are
   presentational hints, so styling only `width` squashes the image. */
img {
	max-width: 100%;
	height: auto;
}

::selection {
	background: var(--kq-red-speed);
	color: var(--kq-white);
}

/* Keyboard focus must always be visible. Divi removes it in places. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.et_pb_button:focus-visible {
	outline: 2px solid var(--kq-red-movement) !important;
	outline-offset: 3px;
}

/* ---------- Typography -------------------------------------------------
   Divi emits h1–h6 inside .et_pb_module wrappers. Setting the scale here
   means a Text module dropped anywhere inherits the right hierarchy.
   ---------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.et_pb_module h4, .et_pb_module h5, .et_pb_module h6 {
	font-family: var(--kq-font-display);
	font-weight: 900;
	color: var(--kq-white);
	text-transform: uppercase;
	text-wrap: balance;
	padding-bottom: 0;
}

h1, .et_pb_module h1 {
	font-size: clamp(2.5rem, 7.6vw, 5.4rem);
	line-height: 0.94;
	letter-spacing: -0.032em;
}

h2, .et_pb_module h2 {
	font-size: clamp(1.7rem, 4.6vw, 3.1rem);
	line-height: 1.02;
	letter-spacing: -0.028em;
}

h3, .et_pb_module h3 {
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	line-height: 1.14;
	letter-spacing: -0.018em;
}

h4, .et_pb_module h4 {
	font-size: clamp(1.05rem, 1.7vw, 1.2rem);
	line-height: 1.25;
	letter-spacing: -0.012em;
}

h5, .et_pb_module h5,
h6, .et_pb_module h6 {
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.22em;
	color: var(--kq-grey-dark);
}

p {
	padding-bottom: 1.35em;
}

p:last-child {
	padding-bottom: 0;
}

a {
	color: var(--kq-white);
	text-decoration-color: rgba(255, 255, 255, 0.3);
	text-underline-offset: 0.22em;
	transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

a:hover {
	color: var(--kq-white);
	text-decoration-color: var(--kq-red-movement);
}

strong, b {
	color: var(--kq-white);
	font-weight: 700;
}

blockquote {
	border-left: 2px solid var(--kq-red-speed);
	padding-left: clamp(18px, 3vw, 32px);
	margin-left: 0;
	color: var(--kq-grey-modern);
}

hr {
	border: 0;
	border-top: 1px solid var(--kq-line);
}

/* ---------- Utility classes --------------------------------------------
   Add these in a module's Advanced → CSS Class field in Divi. This is how
   you reach brand details the Builder has no control for.
   ---------------------------------------------------------------------- */

/* Wide-tracked caps label — the brand's eyebrow */
.kq-eyebrow,
.kq-eyebrow p {
	font-size: 0.7rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.34em !important;
	text-transform: uppercase !important;
	color: var(--kq-grey-dark) !important;
	line-height: 1.6 !important;
}

/* Lead paragraph, one step up from body */
.kq-lead,
.kq-lead p {
	font-size: clamp(1.06rem, 1rem + 0.45vw, 1.28rem) !important;
	line-height: 1.55 !important;
	color: var(--kq-grey-modern) !important;
}

/* Display statement — for pull quotes and section-opening lines */
.kq-statement,
.kq-statement p {
	font-family: var(--kq-font-display) !important;
	font-size: clamp(1.5rem, 4.4vw, 3rem) !important;
	font-weight: 900 !important;
	line-height: 1.06 !important;
	letter-spacing: -0.026em !important;
	text-transform: uppercase !important;
	color: var(--kq-white) !important;
}

/* The brand's red dash. Put it on an empty Divider or Text module. */
.kq-rule {
	position: relative;
}

.kq-rule::before {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	background: var(--kq-red-speed);
	margin-bottom: 26px;
}

/* Constrain reading measure regardless of the column width */
.kq-measure,
.kq-measure p {
	max-width: 62ch;
}

/* Red full stop / accent for a single character. Wrap it in a span. */
.kq-accent {
	color: var(--kq-red-movement);
}

/* Hairline framing */
.kq-border-top { border-top: 1px solid var(--kq-line); }
.kq-border-bottom { border-bottom: 1px solid var(--kq-line); }

/* ---------- Background image bindings -----------------------------------
   Which photograph a band or hero uses is declared here, not inline in the
   layout. Swapping artwork is then a one-line CSS change instead of
   regenerating layouts and reloading every page in Divi.
   ---------------------------------------------------------------------- */

.kq-img--sprinter { background-image: url("../img/bg-sprinter.jpg"); }
.kq-img--summit   { background-image: url("../img/bg-summit-wide.jpg"); }
.kq-img--concrete { background-image: url("../img/bg-concrete-wide.jpg"); }
.kq-img--plate    { background-image: url("../img/bg-plate-wide.jpg"); }

/* ---------- Page components --------------------------------------------
   These style markup that lives inside a Divi Text module, rather than
   relying on Divi's own CSS Class field. That keeps the design independent
   of the Builder's internals, and the content still edits normally in the
   Text module.
   ---------------------------------------------------------------------- */

/* Page opening: eyebrow, display headline, lead */
.kq-hero { padding: clamp(20px, 5vh, 60px) 0 0; }

.kq-hero h1 { margin: 22px 0 0; max-width: 14ch; }

.kq-hero .kq-hero__sub {
	margin: 26px 0 0;
	max-width: 44ch;
	font-size: clamp(1.06rem, 1rem + 0.45vw, 1.28rem);
	line-height: 1.55;
	color: var(--kq-grey-modern);
}

/* Full-bleed photographic band between story beats.
   Divi constrains rows to 1180px, so the band breaks out of its container
   with symmetric negative margins. Using `auto` width rather than `100vw`
   keeps the scrollbar out of the calculation, so this cannot cause sideways
   scrolling — verified on the live page. */
.kq-band {
	position: relative;
	margin-inline: calc(50% - 50vw);
	height: clamp(210px, 34vh, 360px);
	background-size: cover;
	background-position: center;
	border-top: 1px solid var(--kq-line);
	border-bottom: 1px solid var(--kq-line);
}

.kq-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.42) 45%, rgba(0, 0, 0, 0.86)),
		radial-gradient(90% 80% at 50% 50%, transparent, rgba(0, 0, 0, 0.6));
}

/* Pull quote — the load-bearing lines of a page */
.kq-quote { padding: clamp(20px, 4vh, 46px) 0; }

.kq-quote blockquote {
	margin: 26px 0 0;
	border: 0;
	padding: 0;
	font-family: var(--kq-font-display);
	font-size: clamp(1.6rem, 4.4vw, 3rem);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.026em;
	text-transform: uppercase;
	color: var(--kq-white);
	max-width: 19ch;
	text-wrap: balance;
}

/* The name set in the real wordmark, not type imitating it */
.kq-etym { text-align: center; padding: clamp(20px, 5vh, 60px) 0; }

.kq-etym img {
	width: min(78vw, 560px);
	height: auto;
	margin: 26px auto 0;
}

.kq-etym .kq-etym__gloss {
	margin: 26px auto 0;
	max-width: 44ch;
	color: var(--kq-grey-clean);
}

/* Three-up belief / pillar grid */
.kq-beliefs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1px;
	background: var(--kq-line);
	border: 1px solid var(--kq-line);
	margin-top: clamp(24px, 4vh, 40px);
}

.kq-belief { background: var(--kq-black); padding: clamp(26px, 3.4vw, 38px); }

.kq-belief .kq-belief__n {
	display: block;
	margin-bottom: 18px;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--kq-red-speed);
	font-variant-numeric: tabular-nums;
}

.kq-belief h3 { margin: 0 0 12px; }

.kq-belief p { padding-bottom: 0; font-size: 0.93rem; color: var(--kq-grey-dark); }

/* Two-column comparison, e.g. Today / Tomorrow */
.kq-two {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(28px, 5vw, 64px);
}

.kq-two h3 {
	font-family: var(--kq-font-body);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--kq-red-speed);
	margin: 0 0 16px;
}

/* Closing statement */
.kq-close { text-align: center; padding: clamp(20px, 5vh, 60px) 0; }

.kq-close .kq-close__sig {
	margin: 34px 0 0;
	padding-bottom: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--kq-grey-dark);
}

.kq-close .kq-close__sig strong { color: var(--kq-white); }

/* ---------- Placeholder marker ------------------------------------------
   Wraps any fact I could not verify — warranty terms, delivery coverage,
   contact details. Deliberately loud, so a page cannot be published with an
   invented claim sitting in it unnoticed. Replace the text and drop the
   class. A safety net makes them unmissable in print too.
   ---------------------------------------------------------------------- */

/* Loud on purpose: an unfilled value must never be mistaken for a real
   warranty term, price or phone number. Applies on every page.

   Note there is no CSS-generated label here. An earlier version added
   "CONFIRM:" via ::before, which meant the words existed only in the
   stylesheet — invisible in the Divi editor and impossible to delete from the
   content. Everything you see now is real, selectable text; clearing the
   marker is just removing the surrounding span. */
.kq-todo {
	display: inline-block;
	padding: 2px 9px;
	border: 1px dashed var(--kq-red-movement);
	color: var(--kq-red-movement);
	font-weight: 700;
}

.kq-todo--block {
	display: block;
	padding: 16px 18px;
	margin: 10px 0;
}

@media print {
	.kq-todo { outline: 2px solid var(--kq-red-movement); }
}

/* ---------- Fact list (contact details, specs, terms) ------------------- */

.kq-facts {
	display: grid;
	gap: 0;
	margin: clamp(20px, 3vh, 32px) 0 0;
	border-top: 1px solid var(--kq-line);
}

.kq-facts > div {
	display: grid;
	grid-template-columns: minmax(120px, 200px) 1fr;
	gap: clamp(14px, 3vw, 32px);
	padding: 18px 0;
	border-bottom: 1px solid var(--kq-line);
}

@media (max-width: 560px) {
	.kq-facts > div { grid-template-columns: 1fr; gap: 6px; }
}

.kq-facts dt,
.kq-facts .kq-facts__k {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kq-grey-dark);
	margin: 0;
	padding-top: 0.25em;
}

.kq-facts dd,
.kq-facts .kq-facts__v {
	margin: 0;
	color: var(--kq-grey-clean);
}

.kq-facts a { color: var(--kq-white); text-decoration: none; border-bottom: 1px solid var(--kq-line); }
.kq-facts a:hover { border-bottom-color: var(--kq-red-movement); }

/* ---------- Home page components ---------------------------------------- */

/* Full-bleed elements bring their own spacing. Without this the Divi section
   wraps them in page padding, which shows up as a black band above the hero
   and gaps around the marquee — the image looks cut off rather than bled. */
.et_pb_section:has(.kq-page-hero),
.et_pb_section:has(.kq-marquee) {
	padding: 0;
}

/* Full-bleed photographic hero */
.kq-page-hero {
	position: relative;
	margin-inline: calc(50% - 50vw);
	min-height: clamp(480px, 78vh, 720px);
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center 42%;
	overflow: hidden;
}

.kq-page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.25) 34%, rgba(0, 0, 0, 0.92) 100%),
		radial-gradient(75% 65% at 30% 60%, transparent, rgba(0, 0, 0, 0.55));
}

.kq-page-hero__in {
	position: relative;
	z-index: 2;
	width: min(1180px, 100%);
	margin: 0 auto;
	padding: 0 clamp(22px, 5vw, 44px) clamp(44px, 7vh, 80px);
}

.kq-page-hero h1 { margin: 22px 0 0; max-width: 13ch; }

.kq-page-hero__sub {
	margin: 26px 0 0;
	padding-bottom: 0;
	max-width: 44ch;
	font-size: clamp(1.06rem, 1rem + 0.45vw, 1.28rem);
	line-height: 1.55;
	color: var(--kq-grey-modern);
}

/* Link buttons written as plain anchors, so they live in the Text module
   alongside their copy rather than as separate Divi modules to keep in sync */
.kq-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

.kq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 32px;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	background: var(--kq-red-speed);
	color: var(--kq-white);
	transition: background-color 0.25s ease, border-color 0.25s ease,
	            color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.kq-btn:hover { background: var(--kq-red-movement); color: var(--kq-white); transform: translateY(-2px); }

.kq-btn--secondary {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.3);
	color: var(--kq-white);
}

.kq-btn--secondary:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--kq-white); }

/* Scrolling strip, carried over from the launch teaser for continuity */
.kq-marquee {
	display: flex;
	overflow: hidden;
	margin-inline: calc(50% - 50vw);
	padding: 14px 0;
	border-block: 1px solid var(--kq-line);
	background: var(--kq-surface);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.kq-marquee__track {
	display: flex;
	flex: none;
	gap: clamp(20px, 4vw, 42px);
	padding-right: clamp(20px, 4vw, 42px);
	white-space: nowrap;
	animation: kq-slide 30s linear infinite;
}

@keyframes kq-slide {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-100%, 0, 0); }
}

.kq-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: clamp(20px, 4vw, 42px);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--kq-grey-dark);
}

.kq-marquee__item::after {
	content: "";
	width: 5px;
	height: 5px;
	flex: none;
	background: var(--kq-red-speed);
	transform: rotate(45deg);
}

/* Category tiles */
.kq-cats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1px;
	background: var(--kq-line);
	border: 1px solid var(--kq-line);
	margin-top: clamp(24px, 4vh, 40px);
}

.kq-cat {
	display: block;
	background: var(--kq-black);
	padding: clamp(26px, 3.4vw, 38px);
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.kq-cat:hover { background: var(--kq-surface); }

.kq-cat__n {
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--kq-red-speed);
	font-variant-numeric: tabular-nums;
}

.kq-cat h3 { margin: 16px 0 10px; }

.kq-cat p { padding-bottom: 0; font-size: 0.88rem; color: var(--kq-grey-dark); }

.kq-cat__go {
	display: inline-block;
	margin-top: 18px;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--kq-grey-clean);
}

.kq-cat:hover .kq-cat__go { color: var(--kq-white); }

/* Brand wall — holds logos or names, whichever you land on */
.kq-brands { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 4vh, 40px); }

.kq-brand-slot {
	flex: 1 1 150px;
	min-height: 78px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 14px;
	border: 1px dashed rgba(255, 255, 255, 0.16);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #4d4d4d;
}

/* Story teaser band with copy over it */
.kq-teaser {
	position: relative;
	margin-inline: calc(50% - 50vw);
	min-height: clamp(320px, 48vh, 440px);
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	border-block: 1px solid var(--kq-line);
	overflow: hidden;
}

.kq-teaser::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.93) 0%, rgba(0, 0, 0, 0.66) 52%, rgba(0, 0, 0, 0.5) 100%);
}

.kq-teaser__in {
	position: relative;
	z-index: 2;
	width: min(1180px, 100%);
	margin: 0 auto;
	padding: clamp(40px, 6vh, 68px) clamp(22px, 5vw, 44px);
}

.kq-teaser h2 { margin: 18px 0 0; max-width: 18ch; }

.kq-teaser p { margin: 20px 0 0; padding-bottom: 0; max-width: 44ch; }

@media (prefers-reduced-motion: reduce) {
	.kq-marquee__track { animation: none; }
	.kq-marquee { justify-content: center; }
	.kq-marquee__track:last-child { display: none; }
}

/* ---------- Brand header -----------------------------------------------
   Used by the Theme Builder header layout. The menu comes from
   [kynetiq_menu], so it is still edited in Appearance → Menus.
   ---------------------------------------------------------------------- */

/* The section wrapping the header shouldn't inherit page padding, and it is
   what carries the sticky background. :has() has been broadly supported since
   2023; if it ever fails the header still works, it just sits taller and
   scrolls away rather than sticking. */
.et_pb_section:has(.kq-header) {
	position: sticky;
	top: 0;
	z-index: 100;
	padding: 14px 0;
	background: rgba(0, 0, 0, 0.82);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--kq-line);
}

.et_pb_section:has(.kq-footer) {
	padding-top: clamp(44px, 6vh, 72px);
}

.kq-header {
	position: relative;      /* anchor for the mobile menu panel */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.kq-header__logo {
	display: block;
	flex: none;
	line-height: 0;
}

.kq-header__logo img {
	height: clamp(20px, 2.4vw, 27px);
	width: auto;
}

/* Divi styles every list inside a Theme Builder layout:
     .et-l--header ul { list-style-type: disc; padding: 0 0 23px 1em }
   That is (0,1,1) and outranks a lone `.kq-nav__list`, which is why bullets
   appeared in the header but not the footer — the footer's rule happened to
   tie and win on source order. Scoping one level deeper settles it properly
   rather than reaching for !important. */
.kq-header .kq-nav__list,
.kq-header .kq-nav__list li,
.kq-footer .kq-footer__grid ul,
.kq-footer .kq-footer__grid li {
	list-style: none;
}

.kq-header .kq-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.4vw, 30px);
	margin: 0;
	padding: 0;
	line-height: normal;
}

.kq-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.4vw, 30px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.kq-nav__list li { margin: 0; }

.kq-nav__list a {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--kq-grey-dark);
	text-decoration: none;
	transition: color 0.25s ease;
}

.kq-nav__list a:hover,
.kq-nav__list .current-menu-item > a {
	color: var(--kq-white);
}

/* Add kq-nav-cta to a menu item to render it as the red Shop button */
.kq-nav__list li.kq-nav-cta > a {
	background: var(--kq-red-speed);
	color: var(--kq-white);
	padding: 11px 20px;
	transition: background-color 0.25s ease;
}

.kq-nav__list li.kq-nav-cta > a:hover { background: var(--kq-red-movement); }

.kq-nav-notice {
	margin: 0;
	padding-bottom: 0;
	font-size: 0.8rem;
	color: var(--kq-red-movement);
}

/* Mobile: collapse to a toggle. The button is injected by site.js, so with
   JS off the menu simply stays visible and wraps — never unreachable. */
.kq-nav-toggle {
	display: none;
	flex: none;
	width: 42px;
	height: 42px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--kq-line);
	border-radius: 0;
	cursor: pointer;
	position: relative;
}

.kq-nav-toggle span,
.kq-nav-toggle span::before,
.kq-nav-toggle span::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 18px;
	height: 2px;
	background: var(--kq-white);
	transform: translateX(-50%);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.kq-nav-toggle span { top: 50%; margin-top: -1px; }
.kq-nav-toggle span::before { top: -6px; left: 0; transform: none; }
.kq-nav-toggle span::after { top: 6px; left: 0; transform: none; }

.kq-header.is-open .kq-nav-toggle span { background: transparent; }
.kq-header.is-open .kq-nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.kq-header.is-open .kq-nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
	.kq-nav-toggle { display: block; }

	.kq-header .kq-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: rgba(0, 0, 0, 0.97);
		border-top: 1px solid var(--kq-line);
		border-bottom: 1px solid var(--kq-line);
		display: none;
		z-index: 30;
	}

	.kq-header.is-open .kq-nav { display: block; }

	.kq-header .kq-nav__list,
	.kq-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.kq-nav__list a {
		display: block;
		padding: 16px clamp(22px, 5vw, 44px);
		border-bottom: 1px solid var(--kq-line);
	}

	.kq-nav__list li.kq-nav-cta > a {
		padding: 16px clamp(22px, 5vw, 44px);
	}
}

/* ---------- Brand footer -----------------------------------------------
   Laid out with CSS grid inside a single Divi Text module rather than as a
   four-column Divi row. That keeps the whole footer in one editable block
   and avoids depending on Divi's multi-column structure.
   ---------------------------------------------------------------------- */

.kq-footer { padding: clamp(10px, 2vh, 24px) 0 0; }

.kq-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: clamp(26px, 4vw, 48px);
}

@media (max-width: 860px) {
	.kq-footer__grid { grid-template-columns: repeat(2, 1fr); }
	.kq-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
	.kq-footer__grid { grid-template-columns: 1fr; }
}

.kq-footer__brand img {
	width: clamp(140px, 18vw, 170px);
	height: auto;
}

.kq-footer__brand p {
	margin: 18px 0 0;
	padding-bottom: 0;
	max-width: 26ch;
	font-size: 0.86rem;
	color: var(--kq-grey-dark);
}

.kq-footer h4 {
	font-family: var(--kq-font-body);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kq-grey-dark);
	margin: 0 0 16px;
}

.kq-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.kq-footer li { margin: 0; }

.kq-footer a {
	font-size: 0.88rem;
	color: var(--kq-grey-clean);
	text-decoration: none;
	transition: color 0.25s ease;
}

.kq-footer a:hover { color: var(--kq-white); }

.kq-footer__base {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: clamp(30px, 5vh, 52px);
	padding-top: 24px;
	border-top: 1px solid var(--kq-line);
	font-size: 0.76rem;
	color: var(--kq-grey-dark);
}

/* ---------- Sections and rows ------------------------------------------ */

.et_pb_section {
	background-color: var(--kq-black);
	padding: clamp(56px, 9vh, 110px) 0;
}

/* A page built as one-block-per-section stacks two lots of padding at every
   join, which reads as dead space rather than rhythm. Collapsing the top
   padding of any section that follows another leaves a single, even gap.
   Add .kq-pad-top to restore it where a section genuinely needs its own
   breathing room — e.g. when it carries a different background. */
.et_pb_section + .et_pb_section {
	padding-top: 0;
}

.et_pb_section.kq-pad-top {
	padding-top: clamp(56px, 9vh, 110px);
}

.et_pb_row {
	max-width: 1180px;
	padding: 0 clamp(22px, 5vw, 44px);
	width: 100%;
}

/* Full-bleed section: add .kq-bleed in the section's CSS Class field */
.et_pb_section.kq-bleed .et_pb_row {
	max-width: none;
	padding: 0;
}

/* Tighter section when two sit back to back */
.et_pb_section.kq-tight {
	padding: clamp(30px, 5vh, 56px) 0;
}

/* ---------- Buttons -----------------------------------------------------
   Square corners for text buttons; circular is reserved for icon buttons.
   Divi injects an arrow glyph via ::after — removed, since the brand uses
   a rule rather than an arrow.
   ---------------------------------------------------------------------- */

.et_pb_button,
.et_pb_button:hover,
body .et_pb_button {
	font-family: var(--kq-font-body);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 16px 32px !important;
	border-width: 1px;
	border-radius: 0;
	border-style: solid;
	line-height: 1;
	transition: background-color 0.25s ease, border-color 0.25s ease,
	            color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.et_pb_button::after,
.et_pb_button::before {
	display: none !important;
}

/* Primary — the one red thing in a view */
.et_pb_button,
body .et_pb_button {
	background-color: var(--kq-red-speed);
	border-color: var(--kq-red-speed);
	color: var(--kq-white);
}

.et_pb_button:hover,
body .et_pb_button:hover {
	background-color: var(--kq-red-movement);
	border-color: var(--kq-red-movement);
	color: var(--kq-white);
	transform: translateY(-2px);
	padding: 16px 32px !important;
}

/* Secondary — add .kq-btn-secondary in the button's CSS Class field */
body .et_pb_button.kq-btn-secondary {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.3);
	color: var(--kq-white);
}

body .et_pb_button.kq-btn-secondary:hover {
	background-color: rgba(255, 255, 255, 0.07);
	border-color: var(--kq-white);
}

/* Ghost — a rule that grows on hover, no box */
body .et_pb_button.kq-btn-ghost {
	background-color: transparent;
	border-color: transparent;
	color: var(--kq-grey-clean);
	padding-left: 0 !important;
	padding-right: 0 !important;
	position: relative;
}

body .et_pb_button.kq-btn-ghost:hover {
	color: var(--kq-white);
	transform: none;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body .et_pb_button.kq-btn-ghost::after {
	content: "" !important;
	display: block !important;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 22px;
	height: 1px;
	background: currentColor;
	opacity: 1;
	transition: width 0.25s ease;
}

body .et_pb_button.kq-btn-ghost:hover::after {
	width: 38px;
}

/* ---------- Forms ------------------------------------------------------ */

.et_pb_contact_form_container input,
.et_pb_contact_form_container textarea,
.et_pb_contact_form_container select,
.et_pb_newsletter_form input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
	font-family: var(--kq-font-body) !important;
	font-size: 0.95rem !important;
	color: var(--kq-white) !important;
	background-color: var(--kq-surface, #080607) !important;
	border: 1px solid var(--kq-line) !important;
	border-radius: 0 !important;
	padding: 15px 18px !important;
	transition: border-color 0.25s ease;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--kq-red-movement) !important;
}

::placeholder {
	color: #5a5a5a !important;
	opacity: 1;
}

.et_pb_contact_form_label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--kq-grey-dark);
}

/* ---------- Header -----------------------------------------------------
   Applies to Divi's stock header. If you build one in Theme Builder
   instead, these are harmless no-ops.
   ---------------------------------------------------------------------- */

#main-header {
	background-color: rgba(0, 0, 0, 0.82) !important;
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--kq-line);
	box-shadow: none !important;
}

/* Divi scales the logo by a percentage of the header height, which leaves the
   lockup either tiny or bloated. Pin it to a fixed height instead — the mark
   and wordmark are drawn at fixed proportions and should not drift. */
#logo {
	max-height: none !important;
	height: clamp(20px, 2.4vw, 27px) !important;
	width: auto !important;
}

.et_header_style_left #et-top-navigation,
.et_header_style_left .et-fixed-header #et-top-navigation {
	padding-top: 0 !important;
}

.et_header_style_left .logo_container {
	display: flex;
	align-items: center;
}

/* Divi shrinks the header on scroll; keep the two states the same so the
   lockup does not jump as you scroll past the hero. */
.et-fixed-header#main-header {
	background-color: rgba(0, 0, 0, 0.92) !important;
	box-shadow: none !important;
}

.et-fixed-header #logo {
	height: clamp(20px, 2.4vw, 27px) !important;
}

/* Search toggle — off-brand as a magnifier; keep it muted if left enabled */
#et_top_search .et-search-form,
#et_search_icon::before {
	color: var(--kq-grey-dark);
}

#et_search_icon:hover::before {
	color: var(--kq-white);
}

/* Mobile menu */
.et_mobile_menu {
	padding: 8px 0;
}

.et_mobile_menu li a {
	padding: 14px 20px !important;
	border-bottom: 1px solid var(--kq-line) !important;
}

.mobile_menu_bar::before {
	color: var(--kq-white) !important;
}

#top-menu li a,
.et_mobile_menu li a {
	font-size: 0.68rem !important;
	font-weight: 700;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--kq-grey-dark) !important;
	transition: color 0.25s ease;
	opacity: 1;
}

#top-menu li a:hover,
#top-menu li.current-menu-item > a,
.et_mobile_menu li a:hover {
	color: var(--kq-white) !important;
	opacity: 1;
}

#top-menu li.current-menu-item > a {
	color: var(--kq-white) !important;
}

.et_mobile_menu {
	background-color: var(--kq-black) !important;
	border-top: 1px solid var(--kq-line);
}

/* Menu item with the CSS class kq-nav-cta becomes the shop button */
#top-menu li.kq-nav-cta > a {
	background: var(--kq-red-speed);
	color: var(--kq-white) !important;
	padding: 11px 20px !important;
	transition: background-color 0.25s ease;
}

#top-menu li.kq-nav-cta > a:hover {
	background: var(--kq-red-movement);
}

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

#main-footer {
	background-color: var(--kq-black);
	border-top: 1px solid var(--kq-line);
}

#footer-widgets {
	padding: clamp(44px, 6vh, 72px) 0 clamp(28px, 4vh, 44px) !important;
}

#footer-widgets .footer-widget {
	margin-bottom: 24px !important;
}

/* Widget titles take the eyebrow treatment, matching section labels */
#main-footer .widgettitle,
#main-footer .widget-title {
	font-family: var(--kq-font-body);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kq-grey-dark);
	margin: 0 0 16px;
	padding: 0;
}

#main-footer .et_pb_widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

#main-footer .et_pb_widget li {
	padding: 0;
	border: 0;
}

#footer-bottom {
	background-color: transparent !important;
	border-top: 1px solid var(--kq-line);
	padding: 24px 0;
}

#footer-info,
#footer-info a {
	/* Dark Grey rather than a faint alpha — 5.7:1 on black, passes WCAG AA. */
	font-size: 0.76rem;
	color: var(--kq-grey-dark);
}

#footer-info a:hover {
	color: var(--kq-white);
}

/* Divi's footer social icons, brought in line with the coming-soon screen */
#main-footer .et-social-icons {
	float: none;
	display: flex;
	gap: 10px;
	justify-content: center;
	margin: 0 0 18px;
}

#main-footer .et-social-icon a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	color: var(--kq-grey-clean);
	font-size: 15px;
	transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

#main-footer .et-social-icon a:hover {
	color: var(--kq-white);
	border-color: var(--kq-red-movement);
	background-color: rgba(255, 0, 37, 0.14);
	transform: translateY(-3px);
}

.et_pb_widget a {
	color: var(--kq-grey-clean);
	text-decoration: none;
}

.et_pb_widget a:hover {
	color: var(--kq-white);
}

/* Footer credit. Add .kq-credit to a Text module, or use it in the Divi
   footer bottom bar. Quieter than the copyright line by design. */
.kq-credit,
.kq-credit p {
	font-size: 0.74rem !important;
	/* 5.7:1 on black — quiet, but still passes WCAG AA as a link. */
	color: var(--kq-grey-dark) !important;
	line-height: 1.7 !important;
}

.kq-credit a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.kq-credit a:hover,
.kq-credit a:focus-visible {
	color: var(--kq-white);
	border-bottom-color: var(--kq-red-movement);
}

/* ---------- Scroll reveal ----------------------------------------------
   Add .kq-reveal to any module, row or section in Divi and it rises into
   place on scroll. .kq-reveal-d1 / -d2 stagger siblings.

   The hidden state is applied only once JS confirms it can reveal again,
   so without JS — or with reduced motion — the page arrives finished.
   ---------------------------------------------------------------------- */

.kq-js .kq-reveal {
	opacity: 0;
	transform: translateY(24px);
}

.kq-js .kq-reveal.kq-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

.kq-js .kq-reveal.kq-in.kq-reveal-d1 { transition-delay: 0.13s; }
.kq-js .kq-reveal.kq-in.kq-reveal-d2 { transition-delay: 0.26s; }
.kq-js .kq-reveal.kq-in.kq-reveal-d3 { transition-delay: 0.39s; }

/* ---------- Reduced motion --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.kq-js .kq-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}