/* ============================================================
   Transform Pilot — shared design system : COMPONENTS
   Editorial, restrained, human-designed. Ported from the approved
   page 41848: flat surfaces, teal top-rules, bare 18-22px line icons
   (no plates), one continuous process connector, quiet CTA.
   ============================================================ */

/* ---------- Image hero ------------------------------------- */
/* Deliberate three-tier hero height system.
   STANDARD (default) 460-500px : hubs, detail, editorial pages.
   FEATURE 540-580px            : client-outcome pages with result panels.
   COMPACT 300-340px            : legal pages.
   All tiers share the 1300px grid, header clearance, left edge, eyebrow /
   H1 / body position and max text width; only the min-height and the top
   padding differ. Height never depends on title wrapping (min-height fixed). */
.tp-ds .tp-hero {
	position: relative;
	isolation: isolate;
	min-height: 480px;
	display: flex;
	align-items: center;
	background-color: var(--tp-navy);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
	padding: 118px 0 56px;
	overflow: hidden;
}
.tp-ds .tp-hero--feature { min-height: 560px; }
.tp-ds .tp-hero--standard { min-height: 480px; }
.tp-ds .tp-hero--compact { min-height: 320px; padding-top: 118px; padding-bottom: 40px; }
/* Accessible name carrier for the CSS-background hero image. Empty and
   painted nothing; taken out of flow so it can never affect the hero's
   flex layout or height tiers. */
.tp-ds .tp-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
}
.tp-ds .tp-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(3,22,44,0.90) 0%, rgba(3,22,44,0.72) 32%, rgba(3,22,44,0.30) 62%, rgba(3,22,44,0.14) 100%),
		linear-gradient(180deg, rgba(3,22,44,0.42) 0%, rgba(3,22,44,0) 34%, rgba(3,22,44,0.30) 100%);
}
/* photo-free hero: navy + quiet cyan light + restrained line field */
.tp-ds .tp-hero--pattern { background-color: var(--tp-navy); }
.tp-ds .tp-hero--pattern .tp-hero__scrim {
	background:
		radial-gradient(120% 90% at 8% 0%, rgba(53,194,218,0.12) 0, transparent 58%),
		linear-gradient(180deg, rgba(7,27,52,0.55) 0%, rgba(3,22,44,0) 60%),
		linear-gradient(90deg, rgba(3,22,44,0.72) 0%, rgba(3,22,44,0.35) 55%, rgba(3,22,44,0.15) 100%);
}
.tp-ds .tp-hero__inner { max-width: 680px; }
.tp-ds .tp-hero__title {
	color: #fff;
	font-size: clamp(34px, 4vw, 52px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.02em;
}
.tp-ds .tp-hero__lede {
	color: #E3EDF7;
	font-size: 17px;
	line-height: 1.7;
	max-width: 600px;
	margin-top: 22px;
}
.tp-ds .tp-hero__lead {
	color: #fff;
	font-size: clamp(18px, 1.8vw, 21px);
	font-weight: 600;
	line-height: 1.35;
	margin-top: 18px;
	max-width: 620px;
}

/* ---------- Proof strip (editorial, no plates) ------------- */
.tp-ds .tp-proof {
	background: #F7FAFC;
	border-bottom: 1px solid var(--tp-border);
	padding: 30px 0;
}
.tp-ds .tp-proof__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}
.tp-ds .tp-proof__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
	padding: 2px 28px;
}
.tp-ds .tp-proof__item + .tp-ds .tp-proof__item,
.tp-ds .tp-proof__item + .tp-proof__item { border-left: 1px solid var(--tp-border); }
.tp-ds .tp-proof__item:first-child { padding-left: 0; }
.tp-ds .tp-proof__item:last-child { padding-right: 0; }
.tp-ds .tp-proof__v { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--tp-text); }
.tp-ds .tp-proof__k { display: block; font-size: 14px; line-height: 1.45; color: var(--tp-on-light-strong); margin-top: 3px; }

/* bare line icon slot — shared by proof / steps / cards. No plate. */
.tp-ds .tp-ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--tp-teal);
}
.tp-ds .tp-ico svg { width: 100%; height: 100%; display: block; }
.tp-ds .tp-section--navy .tp-ico { color: var(--tp-cyan); }

/* ---------- Editorial two-column --------------------------- */
.tp-ds .tp-editorial-grid {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}
.tp-ds .tp-editorial-grid__head .tp-kicker {
	color: var(--tp-teal);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	margin-top: 16px;
	max-width: 24ch;
}
.tp-ds .tp-prose { max-width: 760px; }
.tp-ds .tp-prose p { color: var(--tp-on-light-strong); font-size: 17px; line-height: 1.7; }
.tp-ds .tp-prose p + p { margin-top: 20px; }
.tp-ds .tp-section--navy .tp-prose p { color: var(--tp-on-dark-muted); }

/* ---------- Portfolio grid (hub cards) --------------------- */
.tp-ds .tp-portfolio {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 28px;
}
.tp-ds .tp-pcard {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	background: var(--tp-bg-white);
	border: 1px solid var(--tp-border);
	border-top: 2px solid var(--tp-teal);
	border-radius: var(--tp-radius);
	padding: 24px 24px 22px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.tp-ds a.tp-pcard:hover,
.tp-ds a.tp-pcard:focus-visible {
	border-color: var(--tp-teal);
	background-color: #FBFDFE;
	transform: translateY(-1px);
}
.tp-ds a.tp-pcard:focus-visible { outline: 2px solid var(--tp-focus); outline-offset: 3px; }
.tp-ds .tp-pcard__ico { margin-bottom: 14px; }
.tp-ds .tp-pcard__title { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--tp-on-light); }
.tp-ds .tp-pcard__desc { font-size: 15px; line-height: 1.6; color: var(--tp-on-light-strong); margin-top: 10px; }
.tp-ds .tp-pcard__more { margin-top: auto; padding-top: 18px; color: var(--tp-link); font-size: 14.5px; font-weight: 600; }
.tp-ds a.tp-pcard:hover .tp-arrow { transform: translate(3px, -1px); }
.tp-ds .tp-pcard__more .tp-arrow { transition: transform 0.18s ease; }

/* ---------- Capability grid (flat top-ruled cells, no box) -- */
.tp-ds .tp-caps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px 32px;
	margin-top: 26px;
}
.tp-ds .tp-cap {
	border-top: 1px solid var(--tp-border);
	padding: 16px 0 0;
	min-width: 0;
}
.tp-ds .tp-cap__ico { margin-bottom: 10px; }
.tp-ds .tp-cap__title { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--tp-on-light); }
.tp-ds .tp-cap__body { font-size: 14.5px; line-height: 1.6; color: var(--tp-on-light-strong); margin-top: 8px; }

/* ---------- Outcomes (flat panels, teal top-rule) ---------- */
.tp-ds .tp-outcomes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin-top: 26px;
}
.tp-ds .tp-outcome {
	border-top: 2px solid var(--tp-teal);
	padding: 18px 18px 4px 0;
	min-width: 0;
}
.tp-ds .tp-outcome__title { display: block; font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--tp-on-light); }
.tp-ds .tp-outcome__body { font-size: 15px; line-height: 1.6; color: var(--tp-on-light-strong); margin-top: 10px; }

/* ---------- Process steps (one continuous connector) ------- */
.tp-ds .tp-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 44px;
	margin-top: 34px;
}
.tp-ds .tp-steps::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 10px;
	width: calc(75% + 33px);
	height: 1px;
	background: rgba(53,194,218,0.25);
	z-index: 0;
}
.tp-ds .tp-step { position: relative; z-index: 1; min-width: 0; }
.tp-ds .tp-step__ico {
	position: relative; z-index: 1;
	box-sizing: content-box;
	width: 20px; height: 20px;
	padding: 0 7px; margin-left: -7px;
	background: var(--tp-navy);
	color: var(--tp-cyan);
	display: flex; align-items: center;
}
.tp-ds .tp-step__ico svg { width: 20px; height: 20px; }
.tp-ds .tp-step__num { display: block; color: var(--tp-cyan); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; margin-top: 14px; }
.tp-ds .tp-step__title { color: #fff; font-size: 16px; font-weight: 700; line-height: 1.35; margin-top: 8px; }
.tp-ds .tp-step__body { color: var(--tp-on-dark-muted); font-size: 15px; line-height: 1.6; margin-top: 10px; }

/* ---------- Quote (editorial pull quote) ------------------- */
.tp-ds .tp-quote {
	position: relative;
	background: var(--tp-navy);
	border-radius: var(--tp-radius);
	padding: 28px 38px 30px 66px;
	color: #fff;
}
.tp-ds .tp-quote__mark { position: absolute; top: 20px; left: 30px; color: var(--tp-cyan); font-size: 42px; line-height: 1; font-weight: 700; }
.tp-ds .tp-quote__text { font-size: 18px; font-weight: 600; line-height: 1.5; }
.tp-ds .tp-quote__attr { margin-top: 14px; }
.tp-ds .tp-quote__attr b { display: block; color: var(--tp-cyan); font-size: 14.5px; font-weight: 700; }
.tp-ds .tp-quote__attr span { display: block; color: var(--tp-on-dark-faint); font-size: 13.5px; margin-top: 3px; }

/* ---------- Related cards (ruled index) -------------------- */
.tp-ds .tp-related {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 26px;
}
.tp-ds .tp-rcard {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	background: var(--tp-bg-white);
	border: 1px solid var(--tp-border);
	border-top: 2px solid var(--tp-teal);
	border-radius: var(--tp-radius);
	padding: 22px 22px 22px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.tp-ds a.tp-rcard:hover,
.tp-ds a.tp-rcard:focus-visible { border-color: var(--tp-teal); background-color: #FBFDFE; transform: translateY(-1px); }
.tp-ds a.tp-rcard:focus-visible { outline: 2px solid var(--tp-focus); outline-offset: 3px; }
.tp-ds .tp-rcard__eyebrow { display: block; color: #4A5C70; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 9px; }
.tp-ds .tp-rcard__title { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--tp-on-light); }
.tp-ds .tp-rcard__body { font-size: 15px; line-height: 1.6; color: var(--tp-on-light-strong); margin-top: 10px; }
.tp-ds .tp-rcard__more { margin-top: auto; padding-top: 18px; color: var(--tp-link); font-size: 14.5px; font-weight: 600; }
.tp-ds a.tp-rcard:hover .tp-arrow { transform: translate(3px, -1px); }

/* ---------- CTA (quiet navy) ------------------------------- */
.tp-ds .tp-cta { position: relative; isolation: isolate; background: var(--tp-navy); padding: 50px 0; overflow: hidden; text-align: center; }
.tp-ds .tp-cta__pattern {
	position: absolute; inset: 0; z-index: -1;
	background-image:
		radial-gradient(120% 90% at 8% 0%, rgba(53,194,218,0.10) 0, transparent 58%),
		linear-gradient(180deg, rgba(7,27,52,0.55) 0%, rgba(3,22,44,0) 60%);
}
.tp-ds .tp-cta .tp-eyebrow { color: var(--tp-cyan); }
.tp-ds .tp-cta .tp-h2 { color: #fff; }
.tp-ds .tp-cta__lede { color: var(--tp-on-dark-muted); font-size: 17px; line-height: 1.7; max-width: 760px; margin: 14px auto 0; }
.tp-ds .tp-btn {
	display: inline-block; margin-top: 26px;
	background: var(--tp-teal); color: #fff;
	font-size: 15px; font-weight: 700; text-decoration: none;
	padding: 15px 30px; border-radius: var(--tp-radius);
	transition: background-color 0.18s ease, transform 0.18s ease;
}
.tp-ds .tp-btn:hover, .tp-ds .tp-btn:focus-visible { background: var(--tp-teal-deep); color: #fff; transform: translateY(-1px); }
.tp-ds .tp-btn:focus-visible { outline: 2px solid var(--tp-cyan); outline-offset: 3px; }
.tp-ds .tp-btn .tp-arrow { margin-left: 6px; }

/* ---------- FAQ accordion ---------------------------------- */
.tp-ds .tp-faqcat { margin-top: 34px; }
.tp-ds .tp-faqcat__title { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: var(--tp-teal); margin-bottom: 12px; }
.tp-ds .tp-acc { border-top: 1px solid var(--tp-border); }
.tp-ds .tp-acc__item { border-bottom: 1px solid var(--tp-border); }
.tp-ds .tp-acc__btn {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
	width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
	padding: 18px 2px; font: inherit; color: var(--tp-on-light);
	font-size: 17px; font-weight: 600; line-height: 1.45;
}
.tp-ds .tp-acc__btn:focus-visible { outline: 2px solid var(--tp-focus); outline-offset: 2px; }
.tp-ds .tp-acc__sign { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; color: var(--tp-teal); transition: transform 0.2s ease; }
.tp-ds .tp-acc__btn[aria-expanded="true"] .tp-acc__sign { transform: rotate(45deg); }
.tp-ds .tp-acc__panel { overflow: hidden; }
.tp-ds .tp-acc__panel[hidden] { display: none; }
.tp-ds .tp-acc__panel p { font-size: 16px; line-height: 1.7; color: var(--tp-on-light-strong); padding: 0 2px 20px; max-width: 820px; }

/* ---------- Product / engagement cards --------------------- */
.tp-ds .tp-prodgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.tp-ds .tp-prod {
	display: flex; flex-direction: column; height: 100%;
	background: var(--tp-bg-white); border: 1px solid var(--tp-border);
	border-top: 2px solid var(--tp-teal); border-radius: var(--tp-radius);
	padding: 24px 24px 24px;
}
.tp-ds .tp-prod__eyebrow { display: block; color: #4A5C70; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
.tp-ds .tp-prod__title { font-size: 17px; font-weight: 700; line-height: 1.3; }
.tp-ds .tp-prod__title a { color: var(--tp-on-light); text-decoration: none; }
.tp-ds .tp-prod__title a:hover { color: var(--tp-link-hover); }
.tp-ds .tp-prod__body { font-size: 15px; line-height: 1.6; color: var(--tp-on-light-strong); margin-top: 10px; }
.tp-ds .tp-prod__foot { margin-top: auto; padding-top: 18px; }
.tp-ds .tp-prod__more { color: var(--tp-link); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.tp-ds .tp-prod__more:hover { color: var(--tp-link-hover); }

/* ---------- Testimonials (editorial, no portraits/stars/carousel) ---------- */
.tp-ds .tp-quotes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 26px;
}
.tp-ds .tp-quotecard {
	display: flex;
	flex-direction: column;
	background: var(--tp-bg-white);
	border: 1px solid var(--tp-border);
	border-top: 2px solid var(--tp-teal);
	border-radius: var(--tp-radius);
	padding: 24px 24px 22px;
	min-width: 0;
}
.tp-ds .tp-quotecard__title { font-size: 14px; font-weight: 800; letter-spacing: 0.02em; color: var(--tp-teal); margin-bottom: 12px; }
/* Extra selector depth (.tp-quotes) so this beats the theme's global blockquote
   style (which otherwise inflates the quote to ~26px) on EVERY testimonials
   block — homepage, Testimonials page, and Services — keeping them consistent. */
.tp-ds .tp-quotes .tp-quotecard__quote { font-size: 15.5px; line-height: 1.65; color: var(--tp-text); }
.tp-ds .tp-quotecard__attr { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--tp-border); }
.tp-ds .tp-quotecard__name { display: block; font-size: 14.5px; font-weight: 700; color: var(--tp-on-light); }
.tp-ds .tp-quotecard__role { display: block; font-size: 13.5px; color: var(--tp-text-muted); margin-top: 2px; }
/* dark variant (services hub testimonials on navy) */
.tp-ds .tp-section--navy .tp-quotecard { background: var(--tp-navy-secondary); border-color: var(--tp-hairline-dark); border-top-color: var(--tp-cyan); }
.tp-ds .tp-section--navy .tp-quotecard__title { color: var(--tp-cyan); }
.tp-ds .tp-section--navy .tp-quotecard__quote { color: var(--tp-on-dark); }
.tp-ds .tp-section--navy .tp-quotecard__attr { border-top-color: var(--tp-hairline-dark); }
.tp-ds .tp-section--navy .tp-quotecard__name { color: #fff; }
.tp-ds .tp-section--navy .tp-quotecard__role { color: var(--tp-on-dark-faint); }

/* ---------- Feature list (editorial numbered/bulleted rows) ---------- */
.tp-ds .tp-features { margin-top: 22px; display: grid; gap: 2px; }
.tp-ds .tp-feature {
	display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 16px;
	padding: 18px 0; border-top: 1px solid var(--tp-border); align-items: start;
}
.tp-ds .tp-feature:last-child { border-bottom: 1px solid var(--tp-border); }
.tp-ds .tp-feature__ico { width: 20px; height: 20px; color: var(--tp-teal); margin-top: 2px; }
.tp-ds .tp-feature__ico svg { width: 100%; height: 100%; }
.tp-ds .tp-feature__title { font-size: 16.5px; font-weight: 700; color: var(--tp-on-light); }
.tp-ds .tp-feature__body { font-size: 15px; line-height: 1.6; color: var(--tp-on-light-strong); margin-top: 4px; }

/* ---------- Legal / long-form document layout ---------- */
.tp-ds .tp-legal { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 48px; align-items: start; }
.tp-ds .tp-legal__toc { position: sticky; top: 96px; }
.tp-ds .tp-legal__toc h2 { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tp-text-muted); margin-bottom: 12px; }
.tp-ds .tp-legal__toc a { display: block; font-size: 14px; line-height: 1.5; color: var(--tp-link); text-decoration: none; padding: 4px 0; }
.tp-ds .tp-legal__toc a:hover, .tp-ds .tp-legal__toc a:focus-visible { color: var(--tp-link-hover); text-decoration: underline; }
.tp-ds .tp-legal__body { max-width: 820px; font-size: 16px; line-height: 1.7; color: var(--tp-text-secondary); }
.tp-ds .tp-legal__body h2 { font-size: 22px; font-weight: 700; color: var(--tp-on-light); margin: 34px 0 12px; scroll-margin-top: 96px; }
.tp-ds .tp-legal__body h3 { font-size: 18px; font-weight: 700; color: var(--tp-on-light); margin: 22px 0 8px; }
.tp-ds .tp-legal__body p { margin: 0 0 14px; }
.tp-ds .tp-legal__body ul, .tp-ds .tp-legal__body ol { margin: 0 0 14px 22px; list-style: disc; }
.tp-ds .tp-legal__body ol { list-style: decimal; }
.tp-ds .tp-legal__body li { margin: 0 0 6px; }
.tp-ds .tp-legal__body a { color: var(--tp-link); }
.tp-ds .tp-legal__body table { width: 100%; border-collapse: collapse; margin: 0 0 16px; display: block; overflow-x: auto; }
.tp-ds .tp-legal__body th, .tp-ds .tp-legal__body td { border: 1px solid var(--tp-border); padding: 8px 10px; text-align: left; font-size: 14.5px; }
.tp-ds .tp-legal__updated { font-size: 14px; color: var(--tp-text-muted); margin-bottom: 20px; }

/* ---------- Careers search/filter + results ---------- */
.tp-ds .tp-careers-controls { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 18px; }
.tp-ds .tp-careers-controls label { font-size: 13px; font-weight: 700; color: var(--tp-text-secondary); display: block; margin-bottom: 6px; }
.tp-ds .tp-careers-controls select, .tp-ds .tp-careers-controls input {
	font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius); background: #fff; color: var(--tp-text); min-width: 220px;
}
.tp-ds .tp-careers-controls select:focus-visible, .tp-ds .tp-careers-controls input:focus-visible { outline: 2px solid var(--tp-focus); outline-offset: 2px; }
.tp-ds .tp-careers-empty {
	border: 1px solid var(--tp-border); border-radius: var(--tp-radius); background: var(--tp-bg-light);
	padding: 40px 32px; text-align: center; margin-top: 8px;
}
.tp-ds .tp-careers-empty__title { font-size: 19px; font-weight: 700; color: var(--tp-on-light); }
.tp-ds .tp-careers-empty__body { font-size: 15.5px; line-height: 1.6; color: var(--tp-on-light-strong); margin-top: 8px; }

/* ---------- Process column variants + wrapped (multi-row) ---------- */
.tp-ds .tp-steps--3 { grid-template-columns: repeat(3, 1fr); }
.tp-ds .tp-steps--3::before { width: calc(66.66% + 22px); }
/* When steps wrap to multiple rows the single horizontal connector is removed
   (it only reads correctly across one row); rows get comfortable spacing. */
.tp-ds .tp-steps--wrap { row-gap: 40px; }
.tp-ds .tp-steps--wrap::before { display: none; }
.tp-ds .tp-steps--wrap .tp-step__ico { background: none; padding: 0; margin-left: 0; }

/* ---------- Contact (form embed + details) ---------- */
.tp-ds .tp-contact { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 56px; align-items: start; }
.tp-ds .tp-contact__formhead { font-size: 22px; font-weight: 700; color: var(--tp-on-light); }
.tp-ds .tp-contact__formintro { font-size: 16px; line-height: 1.6; color: var(--tp-on-light-strong); margin: 8px 0 18px; }
.tp-ds .tp-contact__consent { font-size: 13.5px; line-height: 1.55; color: var(--tp-text-muted); margin-top: 14px; }
.tp-ds .tp-contact__consent a { color: var(--tp-link); }
/* let The7/Elementor form styling stand; just ensure inputs are full width + readable */
.tp-ds .tp-contact__form .elementor-form { max-width: none; }
.tp-ds .tp-contact__form .elementor-field-group { margin-bottom: 12px; }

/* ============================================================
   MULTI-SLIDE HERO (homepage). Carries all four approved hero
   messages; every slide stays in the DOM and only visibility
   changes, so no approved copy is ever removed from the page.
   ============================================================ */
.tp-ds .tp-hero--slides { position: relative; display: block; padding: 0; overflow: hidden; }
.tp-ds .tp-hero--slides .tp-hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	background-color: var(--tp-navy);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease;
	padding: 118px 0 56px;
	isolation: isolate;
}
.tp-ds .tp-hero--slides .tp-hero__slide.is-active { opacity: 1; visibility: visible; position: relative; }
.tp-ds .tp-hero--slides .tp-hero__title--alt {
	font-size: inherit; font-weight: inherit; line-height: inherit;
	color: inherit; margin: inherit;
}
.tp-ds .tp-hero__controls {
	position: absolute; right: 16px; bottom: 16px; z-index: 20;
	display: flex; align-items: center; gap: 10px;
}
.tp-ds .tp-hero__pause {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0; line-height: 0; cursor: pointer;
	border: 1px solid rgba(255,255,255,.55); border-radius: 50%;
	background: rgba(3,22,44,.62); color: #fff;
}
.tp-ds .tp-hero__pause:hover { background: rgba(3,22,44,.86); }
.tp-ds .tp-hero__pause svg { width: 18px; height: 18px; fill: currentColor; pointer-events: none; }
.tp-ds .tp-hero__dots { display: flex; gap: 8px; }
.tp-ds .tp-hero__dot {
	width: 10px; height: 10px; padding: 0; cursor: pointer; border-radius: 50%;
	border: 1px solid rgba(255,255,255,.7); background: transparent;
}
.tp-ds .tp-hero__dot.is-active { background: #fff; }
.tp-ds .tp-hero__pause:focus-visible,
.tp-ds .tp-hero__dot:focus-visible { outline: 3px solid var(--tp-cyan); outline-offset: 3px; }
@media (max-width: 767px) {
	.tp-ds .tp-hero__controls { right: 10px; bottom: 10px; }
	.tp-ds .tp-hero__pause { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.tp-ds .tp-hero--slides .tp-hero__slide { transition: none; }
}
.tp-ds .tp-cta__note { color: var(--tp-on-dark-muted); font-size: 15px; margin-top: 16px; }

/* ============================================================
   HOMEPAGE POLISH — scoped to .tp-page-home so no other page
   inherits these rhythm/scale decisions.
   ============================================================ */

/* (2) Icons were 20px and read as afterthoughts. Give them a
   balanced presence and align them optically with the first text line. */
.tp-ds.tp-page-home .tp-ico { width: 30px; height: 30px; margin-top: 0; }
.tp-ds.tp-page-home .tp-proof__item { gap: 16px; padding: 4px 34px; align-items: center; }
.tp-ds.tp-page-home .tp-proof { padding: 40px 0; }
.tp-ds.tp-page-home .tp-proof__v { font-size: 21px; letter-spacing: -0.01em; }
.tp-ds.tp-page-home .tp-proof__k { font-size: 14.5px; margin-top: 5px; }
.tp-ds.tp-page-home .tp-cap { border-top-width: 1px; padding-top: 20px; }
.tp-ds.tp-page-home .tp-cap__ico { margin-bottom: 14px; }
.tp-ds.tp-page-home .tp-cap__title { font-size: 17px; }
.tp-ds.tp-page-home .tp-caps { gap: 32px 40px; margin-top: 8px; }

/* (3) Editorial band with a real image panel instead of an empty box. */
.tp-ds .tp-editorial-media {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 64px;
	align-items: center;
}
.tp-ds .tp-editorial-media__body { max-width: 620px; }
.tp-ds .tp-editorial-media__body .tp-editorial-grid__head { margin-bottom: 20px; }
.tp-ds .tp-editorial-media__fig { margin: 0; }
.tp-ds .tp-editorial-media__fig img {
	display: block;
	width: 100%;
	/* Reserve height from the image's own ratio so the figure never collapses
	   to a zero-height box while the lazy image is still loading. The old
	   height:100% resolved against a content-sized (and therefore zero-height)
	   figure, which starved the lazy-load observer and left an empty panel. */
	height: auto;
	aspect-ratio: 1792 / 1024;
	max-height: 460px;
	object-fit: cover;
	border-radius: var(--tp-radius-panel);
	border: 1px solid var(--tp-border);
}

/* (1) Three testimonials read as considered, not crowded. */
.tp-ds.tp-page-home .tp-quotes { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
.tp-ds.tp-page-home .tp-quotecard { padding: 30px 28px 26px; }
.tp-ds.tp-page-home .tp-quotecard__quote { font-size: 15.5px; line-height: 1.68; }
.tp-ds.tp-page-home .tp-quotecard__title { font-size: 12px; letter-spacing: .1em; }

/* Testimonials page — the base .tp-quotecard__quote (15.5px) is overridden to
   ~26px by the theme's global blockquote style, which the homepage escapes via
   its own page-scoped rule. Restore the considered size here and pin the
   attribution to the card bottom so uneven-length quotes stay balanced. */
.tp-ds.tp-page-testimonials .tp-quotes { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
.tp-ds.tp-page-testimonials .tp-quotecard { padding: 28px 26px 24px; }
.tp-ds.tp-page-testimonials .tp-quotecard__quote { font-size: 15.5px; line-height: 1.68; }
.tp-ds.tp-page-testimonials .tp-quotecard__title { font-size: 12px; letter-spacing: .1em; }
.tp-ds.tp-page-testimonials .tp-quotecard__attr { margin-top: auto; }
@media (max-width: 1024px) { .tp-ds.tp-page-testimonials .tp-quotes { grid-template-columns: 1fr; } }

/* (4) Vertical rhythm: fewer, larger beats; wider heading measure. */
.tp-ds.tp-page-home .tp-section { padding: 96px 0; }
.tp-ds.tp-page-home .tp-h2 { font-size: clamp(27px, 2.5vw, 36px); line-height: 1.16; letter-spacing: -0.018em; }
.tp-ds.tp-page-home .tp-prose { max-width: 620px; }
.tp-ds.tp-page-home .tp-prose p { font-size: 17px; line-height: 1.72; }
.tp-ds.tp-page-home .tp-prose p + p { margin-top: 18px; }
.tp-ds.tp-page-home .tp-cta { padding: 104px 0; }
.tp-ds.tp-page-home .tp-cta__lede { font-size: 17px; line-height: 1.7; }

@media (max-width: 1024px) {
	.tp-ds .tp-editorial-media { grid-template-columns: 1fr; gap: 34px; }
	.tp-ds .tp-editorial-media__fig img { max-height: 320px; }
	.tp-ds.tp-page-home .tp-quotes { grid-template-columns: 1fr; gap: 18px; }
	.tp-ds.tp-page-home .tp-caps { grid-template-columns: repeat(2, 1fr); gap: 26px 30px; }
	.tp-ds.tp-page-home .tp-proof__list { grid-template-columns: 1fr; }
	.tp-ds.tp-page-home .tp-proof__item { padding: 14px 0; border-left: 0 !important; }
	.tp-ds.tp-page-home .tp-proof__item + .tp-proof__item { border-top: 1px solid var(--tp-border); }
}
@media (max-width: 767px) {
	.tp-ds.tp-page-home .tp-section { padding: 60px 0; }
	.tp-ds.tp-page-home .tp-cta { padding: 68px 0; }
	.tp-ds.tp-page-home .tp-caps { grid-template-columns: 1fr; }
	.tp-ds.tp-page-home .tp-ico { width: 26px; height: 26px; }
}

/* ============================================================
   HOMEPAGE HERO — full-viewport, art-directed, one slide owns
   its image + eyebrow + title + subcopy + CTA together.
   ============================================================ */
.tp-ds .tp-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tp-ds .tp-home-hero{position:relative;isolation:isolate;min-height:760px;min-height:max(760px,100svh);display:flex;align-items:stretch;overflow:hidden;background:var(--tp-navy)}
@supports not (height:100svh){.tp-ds .tp-home-hero{min-height:max(760px,100vh)}}
.tp-ds .tp-home-slider{position:relative;flex:1 1 auto;display:grid}
.tp-ds .tp-home-slide{grid-area:1/1;position:relative;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .72s cubic-bezier(.4,0,.2,1);pointer-events:none}
.tp-ds .tp-home-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.tp-ds .tp-home-slide__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.tp-ds .tp-home-slide__media img{width:100%;height:100%;object-fit:cover;object-position:var(--tp-pos,70% center);display:block}
/* art-directed scrim: full navy tint + stronger left wash + quiet base */
.tp-ds .tp-home-slide__scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(3,22,44,calc(var(--tp-scrim,.54) + .28)) 0%,rgba(3,22,44,var(--tp-scrim,.54)) 34%,rgba(3,22,44,calc(var(--tp-scrim,.54) - .26)) 66%,rgba(3,22,44,calc(var(--tp-scrim,.54) - .34)) 100%),
  linear-gradient(180deg,rgba(3,22,44,.44) 0%,rgba(3,22,44,0) 26%,rgba(3,22,44,0) 62%,rgba(3,22,44,.42) 100%)}
.tp-ds .tp-home-slide__content{max-width:820px;padding:150px 0 190px}
.tp-ds .tp-home-slide__eyebrow{display:block;color:var(--tp-cyan);font-size:13px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;margin-bottom:20px}
.tp-ds .tp-home-slide__title{color:#fff;font-size:clamp(44px,5.2vw,82px);font-weight:700;line-height:1.02;letter-spacing:-.028em;margin:0;text-wrap:balance}
.tp-ds .tp-home-slide__lede{color:#DCE8F4;font-size:clamp(17px,1.35vw,21px);line-height:1.58;max-width:640px;margin-top:26px}
.tp-ds .tp-home-slide__actions{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
.tp-ds .tp-btn--hero{padding:16px 30px;font-size:16px}
/* controls, aligned to the content grid */
.tp-ds .tp-home-hero__controlwrap{position:absolute;left:50%;transform:translateX(-50%);bottom:46px;z-index:6;pointer-events:none}
.tp-ds .tp-home-hero__controls{display:flex;align-items:center;gap:12px;pointer-events:auto}
.tp-ds .tp-hctl{width:46px;height:46px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.42);border-radius:50%;background:rgba(3,22,44,.42);color:#fff;cursor:pointer;backdrop-filter:blur(6px);transition:background .16s ease,border-color .16s ease}
.tp-ds .tp-hctl:hover{background:rgba(3,22,44,.78);border-color:rgba(255,255,255,.7)}
.tp-ds .tp-hctl::before{content:"";display:block;width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor}
.tp-ds .tp-hctl--prev::before{transform:rotate(-135deg);margin-left:3px}
.tp-ds .tp-hctl--next::before{transform:rotate(45deg);margin-right:3px}
.tp-ds .tp-hctl--playpause::before{width:10px;height:12px;border:0;background:linear-gradient(90deg,currentColor 0 3px,transparent 3px 7px,currentColor 7px 10px)}
.tp-ds .tp-hctl--playpause.is-paused::before{width:0;height:0;border:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.tp-ds .tp-home-hero__tabs{display:flex;gap:9px;margin-left:10px}
.tp-ds .tp-htab{width:38px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center}
.tp-ds .tp-htab span{display:block;width:100%;height:3px;background:rgba(255,255,255,.36);transition:background .18s ease}
.tp-ds .tp-htab.is-active span,.tp-ds .tp-htab:hover span{background:var(--tp-cyan)}
.tp-ds .tp-hctl:focus-visible,.tp-ds .tp-htab:focus-visible{outline:3px solid var(--tp-cyan);outline-offset:3px}
@media (max-width:1024px){
  .tp-ds .tp-home-hero{min-height:760px;min-height:max(700px,86svh)}
  .tp-ds .tp-home-slide__content{padding:140px 0 170px}
}
@media (max-width:767px){
  .tp-ds .tp-home-hero{min-height:600px;min-height:max(560px,100svh)}
  .tp-ds .tp-home-slide__media img{object-position:var(--tp-pos-m,68% center)}
  .tp-ds .tp-home-slide__content{padding:118px 0 150px;max-width:100%}
  .tp-ds .tp-home-slide__title{font-size:clamp(34px,8.6vw,46px);line-height:1.06}
  .tp-ds .tp-home-slide__lede{font-size:16.5px;margin-top:20px}
  .tp-ds .tp-home-slide__actions{margin-top:28px}
  .tp-ds .tp-home-hero__controlwrap{bottom:26px}
  .tp-ds .tp-hctl{width:42px;height:42px}
  .tp-ds .tp-htab{width:26px}
}
@media (prefers-reduced-motion:reduce){.tp-ds .tp-home-slide{transition:none}}

/* ---------- Media-backed bands (approved homepage pack) ----------------
   Same premium treatment as the hero: cover image, manifest object-position
   via --tp-pos, per-image navy scrim via --tp-scrim, copy kept in the left
   copy-safe zone. Never a flat black rectangle. */
.tp-ds .tp-section--media,
.tp-ds .tp-cta--media {
	position: relative;
	isolation: isolate;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: var(--tp-pos, 70% center);
	color: #fff;
}
.tp-ds .tp-section--media > .tp-section__scrim,
.tp-ds .tp-cta--media > .tp-cta__pattern {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(3,22,44,calc(var(--tp-scrim,.5) + .26)) 0%, rgba(3,22,44,var(--tp-scrim,.5)) 38%, rgba(3,22,44,calc(var(--tp-scrim,.5) - .22)) 72%, rgba(3,22,44,calc(var(--tp-scrim,.5) - .3)) 100%),
		linear-gradient(180deg, rgba(3,22,44,.34) 0%, rgba(3,22,44,0) 30%, rgba(3,22,44,0) 68%, rgba(3,22,44,.34) 100%);
}
/* copy stays readable and inside the left copy-safe zone */
.tp-ds .tp-section--media .tp-wrap > * { max-width: 780px; }
.tp-ds .tp-section--media .tp-cap { border-top-color: rgba(255,255,255,.28); }
.tp-ds .tp-section--media .tp-cap__title { color: #fff; }
.tp-ds .tp-section--media .tp-cap__body { color: var(--tp-on-dark-muted); }
.tp-ds .tp-section--media .tp-ico { color: var(--tp-cyan); }
.tp-ds .tp-section--media .tp-eyebrow { color: var(--tp-cyan); }
.tp-ds .tp-section--media .tp-h2 { color: #fff; }
.tp-ds .tp-cta--media .tp-cta__lede,
.tp-ds .tp-cta--media .tp-cta__note { color: #DCE8F4; }
@media (max-width: 767px) {
	.tp-ds .tp-section--media,
	.tp-ds .tp-cta--media { background-position: var(--tp-pos-m, 68% center); }
	.tp-ds .tp-section--media .tp-wrap > * { max-width: 100%; }
}

/* Keep the checklist inside the darker copy-safe zone of the industries band
   (manifest: use the darker left 30-40%; keep the district centre-right clear). */
.tp-ds .tp-section--media .tp-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
.tp-ds .tp-section--media .tp-wrap > .tp-caps { max-width: 620px; }
.tp-ds .tp-section--media { padding: 104px 0; }
@media (max-width: 767px) {
	.tp-ds .tp-section--media .tp-caps { grid-template-columns: 1fr; max-width: 100%; }
	.tp-ds .tp-section--media { padding: 64px 0; }
}

/* (Engagements) WooCommerce [products] grid inside a design-system page.
   Layout/typography only — WooCommerce owns price, add-to-cart and stock. */
.tp-ds .tp-ds-products ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}
.tp-ds .tp-ds-products ul.products::before,
.tp-ds .tp-ds-products ul.products::after { content: none; }
.tp-ds .tp-ds-products ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	background: #fff;
	border: 1px solid var(--tp-border);
	border-top: 2px solid var(--tp-teal);
	border-radius: var(--tp-radius-panel);
	padding: 22px 22px 26px;
	text-align: left;
	display: flex;
	flex-direction: column;
}
.tp-ds .tp-ds-products li.product img { border-radius: 4px; margin-bottom: 16px; }
.tp-ds .tp-ds-products li.product .woocommerce-loop-product__title {
	font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--tp-navy); padding: 0 0 6px;
}
.tp-ds .tp-ds-products li.product .price { color: var(--tp-navy); font-weight: 600; margin: 0 0 16px; }
.tp-ds .tp-ds-products li.product .price del { color: #7A8794; font-weight: 400; }
.tp-ds .tp-ds-products li.product a.button,
.tp-ds .tp-ds-products li.product a.add_to_cart_button {
	margin-top: auto;
	align-self: flex-start;
	background: var(--tp-teal);
	color: #fff;
	border-radius: 4px;
	padding: 10px 18px;
	font-weight: 600;
	letter-spacing: .01em;
	transition: background .18s ease;
}
.tp-ds .tp-ds-products li.product a.button:hover,
.tp-ds .tp-ds-products li.product a.add_to_cart_button:hover { background: #176571; }
@media (max-width: 900px) {
	.tp-ds .tp-ds-products ul.products { grid-template-columns: 1fr; }
}