/**
 * DLS brand tokens (DLS-142) — the single source of design variables for the
 * new homepage blocks. Values come from the :root block of the client's
 * Homepage.html (build r61).
 *
 * Scope: every token lives under `.dls-brand`, which the "DLS Home" blocks add
 * to their wrapper. Blocks use ONLY these variables (no hard-coded colours or
 * sizes). To roll the brand out site-wide later, change the scope selector
 * below to `body` (or load this file globally) — no block needs rewriting.
 *
 * Font: Instrument Sans (variable, 400-700), self-hosted (SIL OFL 1.1).
 */

/* ---------- Instrument Sans (declared once; only downloaded when used) ---------- */
@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
.dls-brand {
	/* colour */
	--white: #ffffff;
	--black: #000000;
	--discovery-purple: #32126E; /* Discovery Purple, the client's primary purple (palette Oct 2026) */
	--purple-light: #7552b2;
	--purple-soft: #f2edf7;
	--orange: #f45a28;
	--heading-1: #000000;
	--heading-2: #32126E;
	--para: #000000;
	--grey-light: #f7f5f2;
	--border: #d1d3d4;
	--dark: #808285;
	/* #f7f9fb is what the template RENDERS: a late `:root{--surface-neutral:#f7f9fb}` overrides the first #f7f5f2 (checked in the browser). Used by the KPI strip, the Mid CTA curve and Business Areas. */
	--surface-neutral: #f7f9fb;
	--tile-idle: #f7f5f2;
	--tile-rail: #f2edf7;

	/* type scale (font-size / line-height) */
	--fs-xxs: 14px; --lh-xxs: 22px;
	--fs-xs: 16px;  --lh-xs: 26px;
	--fs-sm: 18px;  --lh-sm: 27px;
	--fs-md: 20px;  --lh-md: 30px;
	--fs-lg: 24px;  --lh-lg: 34px;
	--fs-xxl: 35px; --lh-xxl: 45px;
	--fs-xxxl: 46px; --lh-xxxl: 57px;
	--fs-6xl: 95px; --lh-6xl: 100px;

	/* spacing */
	--s-xxxs: 3px; --s-xxs: 5px; --s-xs: 10px; --s-sm: 15px; --s-md: 20px;
	--s-lg: 25px; --s-xl: 30px; --s-xxl: 60px; --s-3xl: 80px; --s-4xl: 120px; --s-5xl: 190px;

	/* radii */
	--r-0: 4px; --r-mid: 8px; --r-full: 20px;

	/* layout */
	--pad: 120px;      /* minimum section side padding */
	--content: 1440px; /* content column cap on wide screens */
	--maxw: none;
	--ease: cubic-bezier(.22, .61, .36, 1);

	/* base text */
	font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: var(--fs-md);
	line-height: var(--lh-md);
	font-variation-settings: "wdth" 100;
	color: var(--para);
	-webkit-text-size-adjust: 100%;
}

/* ---------- Responsive token overrides (same breakpoints as the template) ---------- */
@media (max-width: 1500px) {
	.dls-brand { --pad: 72px; --fs-6xl: 78px; --lh-6xl: 84px; }
}
@media (max-width: 1240px) {
	.dls-brand {
		--pad: 48px; --fs-6xl: 64px; --lh-6xl: 70px;
		--fs-xxxl: 38px; --lh-xxxl: 48px; --fs-xxl: 29px; --lh-xxl: 38px;
	}
}
@media (max-width: 900px) {
	.dls-brand {
		--pad: 40px; --fs-6xl: 48px; --lh-6xl: 54px;
		--fs-xxxl: 32px; --lh-xxxl: 41px; --fs-xxl: 26px; --lh-xxl: 34px;
		--fs-lg: 21px; --lh-lg: 30px; --fs-md: 18px; --lh-md: 28px;
	}
}
@media (max-width: 560px) {
	.dls-brand { --pad: 22px; }
}

/* ---------- Shared base (scoped) ---------- */
.dls-brand,
.dls-brand *,
.dls-brand *::before,
.dls-brand *::after {
	box-sizing: border-box;
}
.dls-brand img { max-width: 100%; display: block; }
.dls-brand a { color: inherit; text-decoration: none; }
.dls-brand p { margin: 0; }
.dls-brand h1,
.dls-brand h2,
.dls-brand h3,
.dls-brand h4 { margin: 0; font-weight: 400; font-family: inherit; }
.dls-brand :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.dls-brand .sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Buttons (shared by every block; one hover colour: orange) ---------- */
.dls-brand .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s-xs);
	border-radius: 9999px; text-transform: uppercase; white-space: nowrap; cursor: pointer;
	font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: normal; text-decoration: none;
	transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.dls-brand .btn svg { width: 14px; height: 14px; flex: none; }
.dls-brand .btn svg * { transition: stroke .25s var(--ease), fill .25s var(--ease); }
.dls-brand .btn:hover svg [stroke] { stroke: currentColor; }
/* Padding by size: S 5/15, M 10/15, L 10/25 (gap 15 on L) */
.dls-brand .btn--sm { padding: var(--s-xxs) var(--s-sm); font-size: var(--fs-xxs); line-height: var(--lh-xxs); }
.dls-brand .btn--md { padding: calc(var(--s-xs) + 1px) var(--s-lg) calc(var(--s-xs) - 1px); /* same padding as .btn--lg so every button spaces alike; 1px down: Instrument Sans sits high in its line box, this centres the letters */ font-size: var(--fs-sm); line-height: var(--lh-sm); }
.dls-brand .btn--lg { padding: calc(var(--s-xs) + 1px) var(--s-lg) calc(var(--s-xs) - 1px); gap: var(--s-sm); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.dls-brand .btn--white { background: var(--white); color: var(--discovery-purple); }
.dls-brand .btn--white:hover { background: var(--orange); color: var(--white); }
.dls-brand .btn--filled { background: var(--discovery-purple); color: var(--white); border: 1px solid var(--discovery-purple); }
.dls-brand .btn--filled:hover { background: var(--orange); border-color: var(--orange); }
.dls-brand .btn--outline { background: var(--white); color: var(--discovery-purple); border: 1px solid var(--discovery-purple); }
.dls-brand .btn--outline:hover { background: var(--orange); color: var(--white); border-color: var(--orange); }
/* Text button: arrow only (client, 25 Sep: no circle). The "pulse effect" the
   client mentioned is NOT built; open item in the dev guide. */
.dls-brand .btn--text {
	font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	display: inline-flex; align-items: center; gap: var(--s-xs); color: var(--discovery-purple);
	font-weight: 600; font-size: var(--fs-sm); line-height: var(--lh-sm);
	border-radius: var(--r-mid); text-transform: uppercase;
}
.dls-brand .btn--text svg,
.dls-brand .btn--text img { width: 20px; height: 20px; transition: transform .25s var(--ease); }
.dls-brand .btn--text:hover { color: var(--orange); }
.dls-brand .btn--text svg g rect { display: none; }
.dls-brand .btn--text svg path { fill: var(--discovery-purple); transition: fill .25s var(--ease); }
.dls-brand .btn--text:hover svg path { fill: var(--orange); }
.dls-brand .btn--text:hover svg,
.dls-brand .btn--text:hover img { transform: translateX(4px); } /* the arrow slides 4px right (template .btn--text) */

@media (prefers-reduced-motion: reduce) {
	.dls-brand *,
	.dls-brand *::before,
	.dls-brand *::after { scroll-behavior: auto !important; }
}

/* ---------- Reveal on scroll (shared by every DLS Home block) ----------
   The hidden state only applies once ss-reveal.js has switched it on
   (html.dls-reveal-on), so nothing stays invisible if the script fails and the
   Elementor editor always shows the content. */
html.dls-reveal-on .dls-brand .reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
}
html.dls-reveal-on .dls-brand .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html.dls-reveal-on .dls-brand .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Base resets inside a block (the template's global resets, scoped; zero specificity via :where) ---------- */
.dls-brand :where(h1, h2, h3, h4, p) { margin: 0; }
.dls-brand :where(h1, h2, h3, h4) { font-weight: 400; font-family: inherit; }
.dls-brand :where(a) { color: inherit; text-decoration: none; font-family: inherit; }
.dls-brand :where(img) { max-width: 100%; display: block; }
.dls-brand :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.dls-brand :where(:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.dls-brand .sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Links inside a block inherit the block's font. The theme/Elementor kit sets `a { font-family: Lato }`
   with higher specificity than the :where() reset above, so this one is deliberately stronger. */
.dls-brand.dls-home a,
.dls-brand.dls-home button { font-family: inherit; }