/*
 * Trade (styles/trade.json): what the tokens cannot say. Loaded on the
 * Trade page only, every rule keyed off html[data-style="trade"] (block
 * stylesheets print after the theme's; see night.css). Dunmore Roofing
 * speaks in condensed black capitals, square corners, solid rules and one
 * strong colour, safety orange, used as a fill with black on it (6.6:1)
 * and never as small text on the light ground (the text accent is a burnt
 * orange, 5.9:1). Hard cuts: no transitions and nothing moves on hover.
 */

/* Capitals for every heading and the business name. */
html[data-style="trade"] .wu-h2,
html[data-style="trade"] .st-hero__title,
html[data-style="trade"] .st-close__title,
html[data-style="trade"] .st-card__title,
html[data-style="trade"] .st-steps__title,
html[data-style="trade"] .st-outcome__subhead,
html[data-style="trade"] .st-brand__name,
html[data-style="trade"] .st-footer__name,
html[data-style="trade"] .st-figures__words,
html[data-style="trade"] .st-price__lead {
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

html[data-style="trade"] .wu-h2 {
	line-height: 0.98;
}

/* Labels: black capitals on an orange tag, square. */
html[data-style="trade"] .wu-chip.st-label {
	padding: 7px 10px 6px;
	border: 0;
	border-radius: 0;
	background: var(--st-orange);
	color: var(--st-black);
	font-family: var(--wu-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

/* Section rules: solid and full strength. */
html[data-style="trade"] .wu-section--rule::before {
	height: 2px;
	background: var(--st-black);
}

/* Header: opaque, a heavy rule under it, the phone number as its button. */
html[data-style="trade"] .st-header {
	border-bottom: 3px solid var(--st-black);
}

html[data-style="trade"] .st-header::before {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

html[data-style="trade"] .st-brand__name {
	font-size: 26px;
	line-height: 1;
}

html[data-style="trade"] .st-brand__tag {
	color: var(--wu-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

html[data-style="trade"] .st-nav a {
	color: var(--wu-text);
	font-family: var(--wu-display);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

html[data-style="trade"] .st-header__cta {
	font-size: 16px;
	font-weight: 700;
}

/* Buttons: square, bold, no travel and no fades. */
html[data-style="trade"] .wu-button {
	padding: 16px 24px;
	font-size: 16px;
	font-weight: 700;
}

html[data-style="trade"] .wu-button--primary {
	border-color: var(--st-orange);
	background: var(--st-orange);
}

html[data-style="trade"] .wu-button--ghost {
	border-width: 2px;
	border-color: currentColor;
}

html[data-style="trade"] .wu-button,
html[data-style="trade"] .wu-button::before,
html[data-style="trade"] .wu-button svg,
html[data-style="trade"] .wu-textlink svg,
html[data-style="trade"] .st-card__img,
html[data-style="trade"] .st-nav a {
	transition: none;
}

html[data-style="trade"] .wu-button:hover,
html[data-style="trade"] .wu-button:hover svg,
html[data-style="trade"] .wu-textlink:hover svg,
html[data-style="trade"] .st-card:hover .st-card__img {
	transform: none;
}

/* The hero: the photograph across the page, black capitals in white over
   a dark wash; on phones the photograph sits above a black band. */
html[data-style="trade"] .st-hero--full .st-hero__title {
	max-width: 11ch;
	line-height: 0.92;
}

html[data-style="trade"] .st-hero--full .st-hero__lead {
	max-width: 40ch;
}

/* Tablets: the text runs most of the width, so the wash rises from the
   bottom instead of fading out to the right (measured: the side wash left
   the lead at 3.6:1 over the lightest pixel at 820px; this one keeps every
   line above 4.5:1). */
@media (min-width: 768px) and (max-width: 1024.98px) {
	html[data-style="trade"] .st-hero--full {
		--st-hero-wash: linear-gradient(0deg, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.82) 62%, rgba(17, 17, 17, 0.35) 100%);
	}
}

@media (max-width: 767.98px) {
	html[data-style="trade"] .st-hero--full .st-hero__grid {
		--wu-text: #fff;
		--wu-muted: rgba(255, 255, 255, 0.86);
		--wu-line: rgba(255, 255, 255, 0.3);
		--wu-line-strong: #fff;
		background: var(--st-black);
		color: var(--wu-text);
		max-width: none;
	}

	html[data-style="trade"] .st-hero--full .st-hero__title {
		color: var(--wu-text);
	}
}

html[data-style="trade"] .st-proof {
	font-weight: 600;
}

html[data-style="trade"] .st-proof li + li::before {
	width: 8px;
	height: 8px;
	border-radius: 0;
	background: var(--st-orange);
}

/* About us: figures large and black, their words in condensed capitals. */
html[data-style="trade"] .st-figures__item {
	border-top: 2px solid var(--st-black);
}

html[data-style="trade"] .st-figures__item:last-child {
	border-bottom: 2px solid var(--st-black);
}

html[data-style="trade"] .st-figures__figure {
	font-size: clamp(56px, 7vw, 96px);
	font-weight: 700;
	letter-spacing: 0;
}

html[data-style="trade"] .st-figures__words {
	color: var(--wu-text);
	font-family: var(--wu-display);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.06em;
}

/* What we do: square cards with a black bar on top. */
html[data-style="trade"] .st-card {
	border: 0;
	border-top: 6px solid var(--st-black);
	background: var(--wu-ground);
}

html[data-style="trade"] .st-card__tag {
	color: var(--wu-accent);
	font-weight: 700;
}

html[data-style="trade"] .st-card__title {
	font-size: 30px;
	line-height: 1;
}

html[data-style="trade"] .st-cards {
	background: var(--wu-surface);
}

/* How a job works: numbers in orange squares. */
html[data-style="trade"] .st-steps__item {
	border-top: 2px solid var(--st-black);
}

html[data-style="trade"] .st-steps__num {
	display: inline-grid;
	place-items: center;
	justify-self: start;
	width: 44px;
	height: 44px;
	background: var(--st-orange);
	color: var(--st-black);
	font-family: var(--wu-display);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0;
}

html[data-style="trade"] .st-steps__title {
	font-size: 28px;
	line-height: 1;
}

/* What it costs: the price on a black panel, the figure in orange. */
html[data-style="trade"] .st-price {
	--wu-text: #fff;
	--wu-muted: #d9d6cf;
	--wu-line: rgba(255, 255, 255, 0.2);
	--wu-line-strong: rgba(255, 255, 255, 0.4);
	border: 0;
	border-radius: 0;
	background: var(--st-black);
	color: var(--wu-text);
}

html[data-style="trade"] .st-price__figure {
	color: var(--st-orange);
	font-size: clamp(56px, 6vw, 80px);
	font-weight: 700;
}

html[data-style="trade"] .st-price .wu-button--primary:hover {
	border-color: #fff;
	background: #fff;
	color: var(--st-black);
}

html[data-style="trade"] .st-price .wu-button--primary::before {
	display: none;
}

html[data-style="trade"] .st-ticks__tick {
	border-radius: 0;
	background: var(--st-orange);
	color: var(--st-black);
}

/* The call: one orange band, black on it (6.6:1). */
html[data-style="trade"] .st-close {
	--wu-text: #111;
	--wu-muted: #111;
	--wu-line: rgba(17, 17, 17, 0.3);
	--wu-ghost-border-hover: #111;
	--wu-ghost-face-hover: rgba(17, 17, 17, 0.08);
	background: var(--st-orange);
	border-top: 0;
}

html[data-style="trade"] .st-close .wu-chip.st-label {
	background: var(--st-black);
	color: #fff;
}

html[data-style="trade"] .st-close .wu-button--primary {
	border-color: var(--st-black);
	background: var(--st-black);
	color: #fff;
}

html[data-style="trade"] .st-close .wu-button--primary::before {
	display: none;
}

html[data-style="trade"] .st-close__title {
	font-size: clamp(48px, 7vw, 104px);
	line-height: 0.92;
}

html[data-style="trade"] .st-close__lines dd {
	font-weight: 700;
}

/* Footer: black. */
html[data-style="trade"] .st-footer {
	--wu-text: #fff;
	--wu-muted: #d9d6cf;
	--wu-line: rgba(255, 255, 255, 0.2);
	background: var(--st-black);
	border-top: 0;
}

/* Focus: a heavy black ring, orange-backed where it sits on black. */
html[data-style="trade"] :where(a, button, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--st-black);
	outline-offset: 3px;
	border-radius: 0;
}

html[data-style="trade"] :where(.st-footer, .st-price, .st-hero--full) :where(a, button):focus-visible {
	outline-color: var(--st-orange);
}