/**
 * Porto — TrustedTech · designed sections
 * ---------------------------------------------------------------------------
 * Styling for the shortcode sections in inc/sections.php: the hero, trust row,
 * category tiles, dark band and newsletter strip.
 *
 * Self-contained. Every class here is prefixed .tt- and rendered by this child
 * theme, so nothing in this file depends on Porto's markup and nothing in it
 * can be broken by a Porto update.
 *
 * These sections carry their own container width because they're dropped into
 * whatever wrapper Porto or Elementor provides, which may be boxed, full-width
 * or already padded.
 * ---------------------------------------------------------------------------
 */

/* ==========================================================================
   Primitives
   ========================================================================== */

/*
 * Page gutter — the gap between content and the edge of the screen.
 *
 * Two values, because the constraint is different at each end. On a phone
 * space is the scarce resource and every extra millimetre of gutter comes
 * straight out of card width. On a desktop the content is capped at
 * --tt-container regardless, so a generous gutter only actually shows up on
 * screens NARROWER than that cap — laptops around 1000–1300px, which is
 * exactly where the grid was running almost flush to the bezel.
 */
:root {
	/* Phones: exactly the curve these sections already used. Do not change. */
	--tt-gutter: clamp(1rem, 4vw, 2rem);
}

/*
 * 768px, not 992px.
 *
 * 992px looked like the obvious "desktop" line and was wrong in practice:
 * Chrome on Android lays "Desktop site" out at a 980px viewport, so a phone
 * asking for the desktop layout fell just under the query and got no gutter at
 * all — the exact case that was reported. Tablets landed on the wrong side of
 * it too.
 *
 * At 768px this evaluates to 2rem, which is what the old clamp already
 * produced there, so nothing moves at the boundary; it only opens up as the
 * screen gets wider.
 */
@media (min-width: 768px) {
	:root {
		--tt-gutter: clamp(2rem, 3.6vw, 3.25rem);
	}
}

.tt-section {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

/* For compact rows that shouldn't claim a full section's worth of air. */
.tt-section--tight {
	padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
}

.tt-section > * {
	max-width: var(--tt-container, 1280px);
	margin-inline: auto;
}

/*
 * The wide-screen page gutter — NOT applied on phones, deliberately.
 *
 * Below 768px this rule does not exist, so phones keep the exact edge spacing
 * Porto's own container gives them. An earlier version applied a gutter at
 * every width; on a phone that stacked on top of Porto's container padding and
 * stole width from cards that have none to spare.
 *
 * width, not max-width plus padding: with the border-box sizing WordPress and
 * Porto both set globally, padding is subtracted from max-width, so padding
 * the container would narrow the content on wide screens where the gutter is
 * already hundreds of pixels wide. min() caps at the container and only bites
 * when the viewport is narrower than the cap — which is the case being fixed.
 *
 * The full-bleed sections are untouched by this: .tt-hero, .tt-band and
 * .tt-newsletter are sibling <section> elements, never children of
 * .tt-section, so this selector cannot reach them. They read --tt-gutter on
 * their own padding instead, which keeps every section on one vertical line.
 */
@media (min-width: 768px) {
	.tt-section > * {
		width: min( 100% - calc( var( --tt-gutter ) * 2 ), var( --tt-container, 1280px ) );
	}
}

/*
 * Phones go the other way: closer to the edge, not further from it.
 *
 * Porto's page container pads content in by about 15px. On a desktop that
 * reads as margin; on a 390px screen it is 8% of the width, taken from cards
 * that are already narrow. This claws part of it back.
 *
 * A negative margin rather than a rewritten container width, because the value
 * that needs undoing belongs to Porto and is not ours to restate. Staying
 * smaller than Porto's own padding is what keeps this from causing sideways
 * scroll — it moves content toward the edge, never past it.
 *
 * Full-bleed sections are untouched: .tt-hero, .tt-band and .tt-newsletter
 * already run edge to edge and keep their 1rem of interior breathing room, so
 * headline text stays off the bezel while the cards move out toward it.
 */
@media (max-width: 767px) {
	.tt-section {
		margin-inline: calc( var( --tt-phone-bleed, 7px ) * -1 );
	}
}

/*
 * Column counts are literal at the phone and tablet breakpoints. repeat()
 * takes an <integer>, not a math function — `repeat(min(var(--tt-cols),3), …)`
 * is invalid CSS and the whole declaration gets dropped, silently leaving the
 * previous breakpoint's value. var() is confined to the widest breakpoint,
 * where a failure would at worst stack the cards.
 */
.tt-grid {
	display: grid;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.tt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
	.tt-grid { grid-template-columns: repeat(var(--tt-cols, 4), minmax(0, 1fr)); }
}

/* --- Section heading ------------------------------------------------------ */

.tt-section-head {
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.tt-eyebrow {
	display: inline-block;
	margin-bottom: 6px;
	font-family: var(--ttp-font-heading, inherit);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--ttp-primary, #1d4ed8);
}

.tt-section-head .tt-section-head__title {
	margin: 0;
	font-family: var(--ttp-font-heading, inherit);
	font-size: clamp(1.5rem, 2.4vw + 1rem, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.022em;
	color: var(--ttp-ink, #0b1220);
	text-wrap: balance;
}

.tt-section-head__sub {
	margin: 8px 0 0;
	max-width: 60ch;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--ttp-muted, #64748b);
}

.tt-section-head--center {
	text-align: center;
}

.tt-section-head--center .tt-section-head__sub { margin-inline: auto; }

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

.tt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.85em 1.7em;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--ttp-primary, #1d4ed8);
	color: #fff;
	font-family: var(--ttp-font-heading, inherit);
	font-size: 0.9rem;
	font-weight: 650;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease,
		box-shadow 0.24s ease, transform 0.15s ease;
}

.tt-btn:hover {
	background: var(--ttp-primary-hover, #1a45be);
	color: #fff;
	box-shadow: 0 6px 16px rgb(var(--ttp-primary-rgb, 29 78 216) / 0.28);
	transform: translateY(-1px);
}

.tt-btn--light { background: #fff; color: var(--ttp-ink, #0b1220); }
.tt-btn--light:hover { background: #fff; color: var(--ttp-primary, #1d4ed8); box-shadow: 0 8px 22px rgb(0 0 0 / 0.18); }

.tt-btn--outline-light {
	background: transparent;
	color: #fff;
	border-color: rgb(255 255 255 / 0.35);
}

.tt-btn--outline-light:hover {
	background: rgb(255 255 255 / 0.12);
	border-color: rgb(255 255 255 / 0.6);
	color: #fff;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.tt-btn, .tt-btn:hover { transition: none; transform: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.tt-hero {
	position: relative;
	padding-block: clamp(2.5rem, 7vw, 5.5rem);
	padding-inline: var(--tt-gutter);
	background: var(--ttp-dark, #101c3d);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
	border-radius: 0;
}

/* Ambient glow — cheap depth, no image required. */
.tt-hero::before {
	content: "";
	position: absolute;
	inset: -40% -10% auto -10%;
	height: 140%;
	background:
		radial-gradient(58% 55% at 18% 22%, rgb(var(--ttp-primary-rgb, 29 78 216) / 0.55), transparent 62%),
		radial-gradient(48% 50% at 86% 12%, rgb(var(--ttp-accent-rgb, 6 182 212) / 0.4), transparent 60%);
	z-index: -1;
	pointer-events: none;
}

/* Fine grid — reads as "technology" without a stock photo. */
.tt-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(72% 72% at 50% 40%, #000 30%, transparent 100%);
	-webkit-mask-image: radial-gradient(72% 72% at 50% 40%, #000 30%, transparent 100%);
	z-index: -1;
	pointer-events: none;
}

.tt-hero__inner {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	max-width: var(--tt-container, 1280px);
	margin-inline: auto;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.tt-hero__inner { grid-template-columns: 1.05fr 0.95fr; }
}

.tt-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0.45em 0.95em;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.1);
	border: 1px solid rgb(255 255 255 / 0.16);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.4;
	backdrop-filter: blur(6px);
}

.tt-hero__eyebrow .ttp-icon { color: var(--ttp-accent, #06b6d4); }

.tt-hero .tt-hero__title {
	margin: 16px 0 0;
	font-family: var(--ttp-font-heading, inherit);
	font-size: clamp(2rem, 4.4vw + 1rem, 3.75rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.028em;
	color: #fff;
	text-wrap: balance;
}

.tt-hero .tt-hero__title em {
	font-style: normal;
	background: linear-gradient(100deg, var(--ttp-accent, #06b6d4), #fff 70%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.tt-hero__text {
	margin: 16px 0 0;
	max-width: 52ch;
	font-size: clamp(1rem, 0.5vw + 0.9rem, 1.15rem);
	line-height: 1.6;
	color: rgb(255 255 255 / 0.76);
}

.tt-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.tt-hero__media img {
	width: 100%;
	height: auto;
	border-radius: 22px;
	box-shadow: 0 40px 80px rgb(0 0 0 / 0.4);
}

/* Service panel (hero fallback when no image is set) */
.tt-hero__panel {
	display: grid;
	gap: 1px;
	background: rgb(255 255 255 / 0.1);
	border: 1px solid rgb(255 255 255 / 0.14);
	border-radius: 20px;
	overflow: hidden;
	backdrop-filter: blur(10px);
	box-shadow: 0 30px 70px rgb(0 0 0 / 0.32);
}

.tt-hero__panel-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	background: rgb(255 255 255 / 0.04);
}

.tt-hero__panel-icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgb(255 255 255 / 0.1);
	color: var(--ttp-accent, #06b6d4);
}

.tt-hero__panel-label { font-size: 0.88rem; color: rgb(255 255 255 / 0.72); }
.tt-hero__panel-value { font-size: 0.88rem; font-weight: 700; color: #fff; text-align: end; }

@media (max-width: 600px) {
	.tt-hero__panel-row { grid-template-columns: auto 1fr; row-gap: 2px; }
	.tt-hero__panel-value { grid-column: 2; text-align: start; font-size: 0.8rem; }
}

/* ==========================================================================
   Trust / USP row
   ========================================================================== */

/*
 * Two-up on phones, not one.
 *
 * auto-fit with a 215px minimum resolves to a single column on a 390px screen,
 * which turned four compact trust signals into four full-width bands and pushed
 * the entire catalogue below a second screenful of scrolling. These are glance
 * items — they earn their place by being seen on the way past, not by being
 * large.
 */
.tt-usp-row {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: var(--tt-container, 1280px);
	margin-inline: auto;
	/*
	 * No padding-inline here. This is a direct child of .tt-section, which now
	 * insets it by --tt-gutter; adding the gutter again would push the trust
	 * row further in than every other section on the page.
	 */
}

@media (min-width: 600px) {
	.tt-usp-row {
		gap: 12px;
		grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	}
}

.tt-usp {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--ttp-border, #e2e8f0);
	border-radius: 12px;
	transition: box-shadow 0.24s ease, transform 0.24s ease, border-color 0.24s ease;
}

.tt-usp:hover {
	border-color: transparent;
	box-shadow: 0 2px 4px rgb(var(--ttp-ink-rgb, 11 18 32) / 0.05),
		0 8px 20px rgb(var(--ttp-ink-rgb, 11 18 32) / 0.08);
	transform: translateY(-2px);
}

.tt-usp__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	border-radius: 10px;
	background: var(--ttp-primary-soft, #edf1fc);
	color: var(--ttp-primary, #1d4ed8);
}

.tt-usp .tt-usp__title { display: block; font-family: var(--ttp-font-heading, inherit); font-size: 0.88rem; font-weight: 700; line-height: 1.3; color: var(--ttp-ink, #0b1220); }
.tt-usp__text { display: block; margin-top: 2px; font-size: 0.78rem; line-height: 1.4; color: var(--ttp-muted, #94a3b8); }

/* At two-up the icon has to give up room so the label still reads on one or
   two lines rather than breaking mid-word. */
@media (max-width: 599px) {
	.tt-usp { padding: 12px; gap: 10px; }
	.tt-usp__icon { width: 34px; height: 34px; border-radius: 8px; }
	.tt-usp__icon svg { width: 18px; height: 18px; }
	.tt-usp .tt-usp__title { font-size: 0.78rem; line-height: 1.25; }
	.tt-usp__text { font-size: 0.68rem; line-height: 1.35; }
}

/* ==========================================================================
   Category tiles
   ========================================================================== */

.tt-cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 26px 14px;
	background: #fff;
	border: 1px solid var(--ttp-border, #e2e8f0);
	border-radius: 16px;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.tt-cat-card::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 0;
	background: linear-gradient(180deg, transparent, rgb(var(--ttp-primary-rgb, 29 78 216) / 0.07));
	transition: height 0.4s ease;
	pointer-events: none;
}

.tt-cat-card:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: 0 4px 8px rgb(var(--ttp-ink-rgb, 11 18 32) / 0.05),
		0 18px 40px rgb(var(--ttp-ink-rgb, 11 18 32) / 0.1);
}

.tt-cat-card:hover::after { height: 100%; }

.tt-cat-card__img,
.tt-cat-card__icon {
	width: 84px;
	height: 84px;
	object-fit: contain;
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tt-cat-card__icon {
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: var(--ttp-primary-soft, #edf1fc);
	color: var(--ttp-primary, #1d4ed8);
}

.tt-cat-card:hover .tt-cat-card__img,
.tt-cat-card:hover .tt-cat-card__icon { transform: scale(1.08) rotate(-2deg); }

.tt-cat-card .tt-cat-card__title {
	font-family: var(--ttp-font-heading, inherit);
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--ttp-ink, #0b1220);
}

.tt-cat-card__count { font-size: 0.75rem; color: var(--ttp-muted, #94a3b8); }

@media (max-width: 600px) {
	.tt-cat-card { padding: 18px 10px; }
	.tt-cat-card__img,
	.tt-cat-card__icon { width: 60px; height: 60px; }
	.tt-cat-card__title { font-size: 0.8rem; }
}

/* ==========================================================================
   Dark trust band
   ========================================================================== */

.tt-band {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	padding-inline: var(--tt-gutter);
	background: var(--ttp-dark, #101c3d);
	color: rgb(255 255 255 / 0.78);
}

.tt-band__inner {
	max-width: var(--tt-container, 1280px);
	margin-inline: auto;
}

.tt-band .tt-eyebrow { color: var(--ttp-accent, #06b6d4); }
.tt-band .tt-section-head__title { color: #fff; }
.tt-band .tt-section-head__sub { color: rgb(255 255 255 / 0.7); }

.tt-trust-point {
	padding: 24px;
	background: rgb(255 255 255 / 0.05);
	border: 1px solid rgb(255 255 255 / 0.1);
	border-radius: 16px;
	transition: background-color 0.24s ease, transform 0.24s ease;
}

.tt-trust-point:hover { background: rgb(255 255 255 / 0.08); transform: translateY(-3px); }

.tt-trust-point__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 14px;
	border-radius: 12px;
	background: rgb(var(--ttp-accent-rgb, 6 182 212) / 0.16);
	color: var(--ttp-accent, #06b6d4);
}

.tt-trust-point .tt-trust-point__title {
	margin: 0 0 6px;
	font-family: var(--ttp-font-heading, inherit);
	font-size: 1.15rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.015em;
}

.tt-trust-point__text { margin: 0; font-size: 0.9rem; line-height: 1.65; color: rgb(255 255 255 / 0.7); }

/* The band's grid is 1-up on phones — three dense cards side by side is
   unreadable at that width. */
@media (max-width: 767px) {
	.tt-band .tt-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Newsletter
   ========================================================================== */

.tt-newsletter {
	padding-block: clamp(2rem, 5vw, 3rem);
	padding-inline: var(--tt-gutter);
	background: var(--ttp-primary, #1d4ed8);
	color: rgb(255 255 255 / 0.82);
}

.tt-newsletter__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: var(--tt-container, 1280px);
	margin-inline: auto;
}

.tt-newsletter .tt-newsletter__title {
	margin: 0;
	font-family: var(--ttp-font-heading, inherit);
	font-size: clamp(1.25rem, 1.6vw + 1rem, 1.75rem);
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.02em;
}

.tt-newsletter__text { margin: 6px 0 0; max-width: 46ch; font-size: 0.9rem; line-height: 1.55; }

.tt-newsletter__form {
	display: flex;
	gap: 8px;
	flex: 1 1 340px;
	max-width: 520px;
}

.tt-newsletter__form input[type="email"] {
	flex: 1;
	min-width: 0;
	height: 46px;
	padding-inline: 16px;
	border-radius: 8px;
	border: 1px solid rgb(255 255 255 / 0.25);
	background: rgb(255 255 255 / 0.12);
	color: #fff;
	font-size: 15px;
}

.tt-newsletter__form input[type="email"]::placeholder { color: rgb(255 255 255 / 0.6); }

.tt-newsletter__form input[type="email"]:focus {
	outline: none;
	background: rgb(255 255 255 / 0.18);
	border-color: #fff;
	box-shadow: 0 0 0 3px rgb(255 255 255 / 0.18);
}

.tt-newsletter__form .tt-btn {
	background: #fff;
	color: var(--ttp-primary, #1d4ed8);
	padding-inline: 1.4em;
}

.tt-newsletter__form .tt-btn:hover {
	background: #fff;
	color: var(--ttp-primary-hover, #1a45be);
	box-shadow: 0 8px 22px rgb(0 0 0 / 0.2);
}

/*
 * Stack the field and button below 480px. Side by side, the button's nowrap
 * label squeezes the input down to a few visible characters — an email field
 * you can't read what you typed into is worse than one extra row of height.
 */
@media (max-width: 479px) {
	.tt-newsletter__form {
		flex-direction: column;
		align-items: stretch;
		flex-basis: 100%;
	}

	.tt-newsletter__form .tt-btn { width: 100%; }
}

/* ==========================================================================
   Full bleed
   ========================================================================== */

/*
 * The hero, dark band and newsletter are designed to run edge to edge. Dropped
 * into Porto's default boxed page container they rendered as floating panels
 * with white gutters, which reads as a mistake rather than a choice.
 *
 * `margin-inline: calc(50% - 50vw)` breaks a block out of any centred container
 * to full viewport width. It's a no-op when the parent is already full width —
 * 50% and 50vw are then equal — so it's safe to apply by default rather than
 * asking someone to remember a wrapper class.
 *
 * Their inner wrappers keep max-width and auto margins, so the CONTENT stays
 * aligned with the rest of the page; only the background extends.
 *
 * Add .tt-boxed on an ancestor to opt out.
 */
.tt-hero,
.tt-band,
.tt-newsletter {
	margin-inline: calc(50% - 50vw);
}

.tt-boxed .tt-hero,
.tt-boxed .tt-band,
.tt-boxed .tt-newsletter {
	margin-inline: 0;
}

/*
 * 100vw includes the scrollbar on desktop, so a full-bleed block can sit a few
 * pixels wider than the viewport and produce a horizontal scrollbar. Clipping
 * at the root removes that without affecting anything that scrolls internally.
 */
/*
 * NO overflow clipping on the body — deliberately.
 *
 * `overflow-x: clip` was added here as insurance against the full-bleed
 * sections overshooting by the width of a scrollbar. It caused a worse problem
 * than it solved: Porto's mobile menu slides in from off-canvas, and clipping
 * the body cuts the drawer off at the viewport edge.
 *
 * It also turned out to be unnecessary. Measured at 390 / 768 / 1440 / 1920
 * with the clip removed, scrollWidth equals innerWidth at every width — the
 * `margin-inline: calc(50% - 50vw)` technique resolves against the containing
 * block, not the viewport plus scrollbar, so it never overshoots.
 *
 * If horizontal overflow ever does appear, find and fix the element causing it.
 * Do not clip the body: anything positioned off-canvas disappears with it.
 */

/* ==========================================================================
   Hero slider
   [tt_hero_slider] wrapping two or more [tt_hero] blocks.
   ========================================================================== */

/*
 * The slider takes over the full-bleed break-out, and the slides give it up.
 *
 * Each .tt-hero carries `margin-inline: calc(50% - 50vw)` so it runs edge to
 * edge on its own. Inside a scrolling track that would drag every slide
 * sideways by half the viewport and break the snapping, so the track becomes
 * the thing that bleeds and the slides simply fill it.
 */
.tt-hero-slider {
	position: relative;
	margin-inline: calc(50% - 50vw);
}

.tt-boxed .tt-hero-slider {
	margin-inline: 0;
}

.tt-hero-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Stops a swipe at either end from scrolling the page behind it. */
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.tt-hero-slider__track::-webkit-scrollbar {
	display: none;
}

.tt-hero-slider__track > .tt-hero {
	flex: 0 0 100%;
	min-width: 0;
	margin-inline: 0;
	scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
	.tt-hero-slider__track { scroll-behavior: auto; }
}

/* --- Dots ---------------------------------------------------------------- */

.tt-hero-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(10px, 2vw, 18px);
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 2;
}

.tt-hero-slider__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.38);
	cursor: pointer;
	transition: background-color 0.2s ease, width 0.2s ease;
}

.tt-hero-slider__dot[aria-current="true"] {
	width: 24px;
	border-radius: 5px;
	background: #fff;
}

/*
 * The dots sit on the hero artwork, so the tap target has to be bigger than
 * the mark without making the marks themselves clumsy. A transparent
 * pseudo-element does that without affecting layout.
 */
.tt-hero-slider__dot::before {
	content: "";
	position: absolute;
	width: 34px;
	height: 34px;
	transform: translate(-50%, -50%);
}

.tt-hero-slider__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ==========================================================================
   Slider Revolution hero
   [tt_rev_hero alias="…"] — slides built in Rev Slider, wearing this design.
   ========================================================================== */

/*
 * Everything here is !important, which needs justifying rather than excusing.
 *
 * Rev Slider writes its layer styling as INLINE styles, generated from the
 * values in its editor. Inline styles beat any selector, so a class-based skin
 * loses to the plugin's own defaults every time — !important is the only lever
 * left. It is confined to .tt-rev, so nothing outside a TrustedTech hero is
 * touched, and any layer that should keep its editor styling simply does not
 * get one of these classes.
 */

.tt-rev {
	margin-inline: calc(50% - 50vw);
	background: var(--ttp-dark, #101c3d);
}

.tt-boxed .tt-rev,
.tt-rev.tt-boxed {
	margin-inline: 0;
}

/* --- Layer classes -------------------------------------------------------- */

.tt-rev .tp-caption.tt-rev-eyebrow,
.tt-rev .tt-rev-eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 7px 16px !important;
	border: 1px solid rgb(255 255 255 / 0.18) !important;
	border-radius: 999px !important;
	background: rgb(255 255 255 / 0.07) !important;
	font-family: var(--ttp-font-heading, inherit) !important;
	font-size: 13px !important;
	font-weight: 650 !important;
	color: #fff !important;
	white-space: nowrap !important;
}

.tt-rev .tp-caption.tt-rev-title,
.tt-rev .tt-rev-title {
	font-family: var(--ttp-font-heading, inherit) !important;
	font-weight: 800 !important;
	line-height: 1.04 !important;
	letter-spacing: -0.03em !important;
	color: #fff !important;
}

/* Wrap the emphasised words in <em> in the Rev Slider layer text. */
.tt-rev .tt-rev-title em {
	font-style: normal !important;
	color: var(--ttp-accent, #38bdf8) !important;
}

.tt-rev .tp-caption.tt-rev-text,
.tt-rev .tt-rev-text {
	font-family: var(--ttp-font-body, inherit) !important;
	line-height: 1.6 !important;
	color: rgb(255 255 255 / 0.78) !important;
	white-space: normal !important;
}

/*
 * Rev Slider layers default to nowrap, which on a phone runs a paragraph off
 * both edges. max-width is in ch so the measure stays readable rather than
 * being tied to a pixel width chosen on a desktop.
 */
.tt-rev .tt-rev-text {
	max-width: 46ch !important;
}

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

.tt-rev .tp-caption.tt-btn,
.tt-rev a.tt-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0.85em 1.7em !important;
	border: 1px solid transparent !important;
	border-radius: 8px !important;
	background: var(--ttp-primary, #1d4ed8) !important;
	color: #fff !important;
	font-family: var(--ttp-font-heading, inherit) !important;
	font-weight: 650 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}

/*
 * The variants must out-specify the base rule above, not merely come after it.
 *
 * Both carry !important, so the cascade falls through to specificity — and
 * `.tt-rev .tp-caption.tt-btn` (0,3,0) beats a plain `.tt-rev .tt-btn--light`
 * (0,2,0) regardless of order. Every button came out primary blue until these
 * selectors matched the base rule's shape.
 */
.tt-rev .tp-caption.tt-btn.tt-btn--light,
.tt-rev a.tt-btn.tt-btn--light {
	background: #fff !important;
	color: var(--ttp-ink, #0b1220) !important;
}

.tt-rev .tp-caption.tt-btn.tt-btn--outline-light,
.tt-rev a.tt-btn.tt-btn--outline-light {
	background: transparent !important;
	color: #fff !important;
	border-color: rgb(255 255 255 / 0.35) !important;
}

/* --- The trust panel ------------------------------------------------------ */

/*
 * Built as a Rev Slider layer containing a plain <dl>, so the rows stay
 * editable as text rather than becoming four separately positioned layers that
 * have to be re-aligned by hand at every breakpoint.
 */
.tt-rev .tt-rev-panel {
	padding: 8px 22px !important;
	border: 1px solid rgb(255 255 255 / 0.1) !important;
	border-radius: 16px !important;
	background: rgb(255 255 255 / 0.06) !important;
	backdrop-filter: blur(10px);
	white-space: normal !important;
}

.tt-rev .tt-rev-panel dl {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0;
	margin: 0;
}

.tt-rev .tt-rev-panel dt,
.tt-rev .tt-rev-panel dd {
	margin: 0;
	padding: 14px 0;
	font-size: 14px;
	line-height: 1.4;
	border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

.tt-rev .tt-rev-panel dt { color: rgb(255 255 255 / 0.72); }
.tt-rev .tt-rev-panel dd { font-weight: 700; color: #fff; text-align: right; }

.tt-rev .tt-rev-panel dl > :nth-last-child(-n+2) { border-bottom: 0; }

/* The panel is a side-by-side element on a desktop and a stacked one below. */
@media (max-width: 767px) {
	.tt-rev .tt-rev-panel { padding: 4px 16px !important; }
	.tt-rev .tt-rev-panel dt,
	.tt-rev .tt-rev-panel dd { padding: 11px 0; font-size: 13px; }
}