/* ==========================================================================
   MyWorkshop — brand layer
   ==========================================================================

   Sits on top of the untouched template (theme.css + theme-light.css) and
   changes colour only. No rule here sets a width, height, margin, padding,
   grid or font size on the page's own sections, so the layout is exactly the
   source site's.

   Loaded after theme-light.css and before mobile.css. Overrides are prefixed
   with body.mw, which ties theme-light's body.tt-lightmode-on on specificity
   and then wins on source order.

   Colour roles
   ------------
   The four logo colours are bright and fail contrast as text on white (white
   on #34A853 is about 3:1). So there are two tiers:

     bright  #4285F4 #EA4335 #FBBC04 #34A853   decoration only — the logo,
                                               rules, rings, washes, tints
     600     #1A73E8 #D93025 #B06000 #188038   anything that must be read —
                                               text, filled buttons, fills
                                               carrying white text

   Every 600 shade measures at least 4.5:1 on white (WCAG AA). Yellow cannot
   carry white text at any useful shade, so a yellow fill always takes ink
   (#202124, 9.4:1) instead, and yellow as text uses the amber #B06000.
   ======================================================================== */

:root {
	--g-blue: #4285F4;
	--g-red: #EA4335;
	--g-yellow: #FBBC04;
	--g-green: #34A853;

	--g-blue-600: #1A73E8;
	--g-blue-700: #1765CC; /* hover state for blue fills */
	--g-red-600: #D93025;
	--g-yellow-text: #B06000;
	--g-green-700: #188038;

	--g-blue-50: #E8F0FE;
	--g-red-50: #FCE8E6;
	--g-yellow-50: #FEF7E0;
	--g-green-50: #E6F4EA;

	--g-ink: #202124;
	--g-ink-2: #3C4043;
	--g-muted: #5F6368;
	--g-line: #DADCE0;
	--g-surface: #F8F9FA;

	--g-gradient: linear-gradient(115deg, var(--g-blue) 0%, var(--g-red) 38%, var(--g-yellow) 68%, var(--g-green) 100%);

	/* Template variables, re-pointed. Defined on :root as well as on body so
	   the very first paint — before theme.js adds tt-lightmode-on — is already
	   white rather than flashing the template's black. */
	--tt-main-color: var(--g-blue-600);
	--tt-link-color: var(--g-blue-600);
	--tt-link-hover-color: var(--g-blue-700);
	--tt-bg-color: #FFFFFF;
	--tt-text-color: var(--g-ink);
	--tt-page-trans-overlay-bg-color: #FFFFFF;
}

body.mw,
body.mw.tt-lightmode-on {
	--tt-main-color: var(--g-blue-600);
	--tt-dark-color: #FFFFFF;
	--tt-light-color: var(--g-ink);
	--tt-bg-color: #FFFFFF;
	--tt-text-color: var(--g-ink);
	--tt-text-muted-color: var(--g-muted);
	--tt-border-color: var(--g-line);
	--tt-link-color: var(--g-blue-600);
	--tt-link-hover-color: var(--g-blue-700);
	--tt-linear-text-bg-color: rgb(32 33 36 / 14%);
	--tt-page-trans-overlay-bg-color: #FFFFFF;
	--tt-ball-border-color: var(--g-line);
	--tt-ball-magnetic-color: var(--g-blue);
	--tt-ball-bg-color: color-mix(in oklab, var(--g-blue-600) 92%, transparent);
	--tt-ball-color: #FFFFFF;
	--tt-force-to-light-color: #FFFFFF;

	background-color: #FFFFFF;
	color: var(--g-ink);
}


/* --------------------------------------------------------------------------
   Four-colour rotation
   --------------------------------------------------------------------------
   Every repeating list cycles blue, red, yellow, green in logo order. Each
   item gets a small set of local variables and every rule below reads those,
   so one item's whole look is decided in one place.

   Testimonials are matched through their wrapper's direct children rather
   than .tt-stte-item, because GSAP wraps each pinned card in its own
   .pin-spacer at runtime — after that, every card is :nth-child(1) of its
   own wrapper and would all come out blue. */

body.mw .tt-ppl-item:nth-child(4n+1),
body.mw .tt-hac-item:nth-child(4n+1),
body.mw .tt-avlist-item:nth-child(4n+1),
body.mw .tt-sticky-testimonials > :nth-child(4n+1) {
	--acc: var(--g-blue-600);      /* fill */
	--acc-ink: #FFFFFF;            /* text on that fill */
	--acc-text: var(--g-blue-600); /* this colour as text on white */
	--acc-bright: var(--g-blue);   /* decoration */
	--acc-tint: var(--g-blue-50);  /* tonal surface */
}
body.mw .tt-ppl-item:nth-child(4n+2),
body.mw .tt-hac-item:nth-child(4n+2),
body.mw .tt-avlist-item:nth-child(4n+2),
body.mw .tt-sticky-testimonials > :nth-child(4n+2) {
	--acc: var(--g-red-600);
	--acc-ink: #FFFFFF;
	--acc-text: var(--g-red-600);
	--acc-bright: var(--g-red);
	--acc-tint: var(--g-red-50);
}
body.mw .tt-ppl-item:nth-child(4n+3),
body.mw .tt-hac-item:nth-child(4n+3),
body.mw .tt-avlist-item:nth-child(4n+3),
body.mw .tt-sticky-testimonials > :nth-child(4n+3) {
	--acc: var(--g-yellow);
	--acc-ink: var(--g-ink);
	--acc-text: var(--g-yellow-text);
	--acc-bright: var(--g-yellow);
	--acc-tint: var(--g-yellow-50);
}
body.mw .tt-ppl-item:nth-child(4n+4),
body.mw .tt-hac-item:nth-child(4n+4),
body.mw .tt-avlist-item:nth-child(4n+4),
body.mw .tt-sticky-testimonials > :nth-child(4n+4) {
	--acc: var(--g-green-700);
	--acc-ink: #FFFFFF;
	--acc-text: var(--g-green-700);
	--acc-bright: var(--g-green);
	--acc-tint: var(--g-green-50);
}


/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

body.mw .tt-logo-text a.mw-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* Inherits the header's colour, so it is white over the hero photo and
	   ink once the header fills on scroll — the template already flips the
	   header colour for exactly that. */
	color: inherit;
	font-family: var(--tt-body-font);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1;
	text-transform: none;
	/* Box geometry matches the source's text logo exactly: 20px tall, sitting
	   at the top of its line. As an inline-flex box on the baseline it would
	   leave descender space below and push the footer down by 5px. */
	height: 20px;
	vertical-align: top;
}
body.mw .mw-logo .mw-mark {
	display: block;
	height: 20px;
	width: auto;
	flex-shrink: 0;
}
/* theme.css still has .tt-logo-text a span { color: main } from the old
   two-tone text logo, and the wordmark span matches it — without this the
   wordmark turns blue over the hero photo even though its link is white. */
body.mw .tt-logo-text a.mw-logo .mw-word,
body.mw .tt-logo-text a.mw-logo .mw-word b {
	color: inherit;
}
body.mw .tt-logo-text a.mw-logo .mw-word b {
	font-weight: 700;
}
body.mw #tt-footer .tt-logo-text a.mw-logo {
	color: var(--g-ink);
}


/* --------------------------------------------------------------------------
   Preloader / page transition — white, with an ink counter
   -------------------------------------------------------------------------- */

body.mw .tt-ptr-prel-text.tt-ptr-prel-counter .tt-ptr-prel-count {
	color: var(--g-ink);
}
body.mw .tt-ptr-prel-text span:not(.tt-ptr-prel-count) {
	color: var(--g-blue-600);
}


/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

body.mw #tt-header.tt-filled {
	border-bottom-color: var(--g-line);
	box-shadow: 0 1px 2px rgb(60 64 67 / 8%), 0 2px 6px rgb(60 64 67 / 6%);
}
body.mw #tt-header.tt-filled::before {
	background-color: rgb(255 255 255 / 96%);
}

/* "Get Started" — Google's filled button: blue, white label */
body.mw .tt-btn-secondary,
body.mw.ph-image-on.tt-ph-visible:not(.ph-bg-is-light-on) #tt-header:not(.tt-filled) .tt-btn-secondary {
	background-color: var(--g-blue-600) !important;
}
body.mw .tt-btn-secondary:hover {
	background-color: var(--g-blue-700) !important;
}
body.mw .tt-btn-secondary > *,
body.mw .tt-btn-secondary > *::after,
body.mw.ph-image-on.tt-ph-visible:not(.ph-bg-is-light-on) #tt-header:not(.tt-filled) .tt-btn-secondary > *,
body.mw.ph-image-on.tt-ph-visible:not(.ph-bg-is-light-on) #tt-header:not(.tt-filled) .tt-btn-secondary > *::after {
	color: #FFFFFF !important;
}

/* Menu: active item and hover in blue */
body.mw .tt-main-menu-list > li.active > a,
body.mw .tt-main-menu-list > li > a:hover {
	color: var(--g-blue-600);
}
body.mw.ph-image-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-main-menu-list > li > a:hover {
	color: #FFFFFF;
	opacity: .8;
}


/* --------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------
   White background; "My Workshop" in the logo gradient; the original line
   about comparing quotes; a blue primary action and two proof points.
   Under it, the handshake photo: a circle around the cursor (or finger)
   reveals it, with the hero text carrying on in white across the photo —
   the same see-through effect as hobbyworkshop.my.

   Everything in this block is scoped to #page-header. The hero is still one
   screen tall, so no other section moves.
   -------------------------------------------------------------------------- */

/* Lens radius, shared by the clip, the ring and the lens type size so they
   always stay in proportion. */
body.mw #page-header {
	--mw-r: clamp(124px, 15vw, 230px);
}
body.mw #page-header.mw-hero-white {
	background-color: #FFFFFF;
}

/* --- Headline ------------------------------------------------------------ */

/* Sized by the smaller of width and height. The hero's padding leaves
   (screen height − 230px) for content on desktop; 20vh keeps the title,
   description, buttons and proof row inside that from 1280×720 up. */
body.mw #page-header .ph-caption-title.mw-hero-title {
	font-size: clamp(64px, min(12vw, 20vh), 230px);
	line-height: .9;
}
/* The logo gradient. theme.js wraps each word in its own span and slides
   them up, so the gradient goes on the word spans; myworkshop.js sets their
   size and offset so it runs as one sweep across both words instead of
   restarting on each. Flatter than the logo's 115deg: across a short
   two-line block a steep angle lands violet, not blue, on the "W". */
body.mw #page-header .mw-hero-title .tt-cap-word {
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	padding-right: .02em; /* the clip trims the last glyph's overhang otherwise */
}
body.mw #page-header .mw-hero-title .tt-cap-word {
	background-image: linear-gradient(100deg, var(--g-blue) 6%, var(--g-red) 38%, var(--g-yellow) 66%, var(--g-green) 94%);
	background-size: var(--mw-gw, 100%) var(--mw-gh, 100%);
	background-position: var(--mw-gx, 0) var(--mw-gy, 0);
}

body.mw #page-header .ph-caption-description {
	margin-top: clamp(16px, 2.6vh, 28px);
	font-size: clamp(14px, 1.3vw, 18px);
	line-height: 1.45;
	letter-spacing: .02em;
	color: var(--g-ink-2);
}

/* --- Actions ------------------------------------------------------------- */

body.mw .mw-hero-cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 14px;
	margin-top: clamp(20px, 3.4vh, 34px);
}
body.mw .mw-hero-cta .tt-btn {
	margin: 0;
	padding: 0 30px;
}
/* Primary: Google's filled blue with a soft blue lift. The secondary keeps
   the site's standard blue outline. */
body.mw .mw-hero-cta .tt-btn-secondary {
	box-shadow: 0 1px 2px rgb(60 64 67 / 30%), 0 4px 14px rgb(26 115 232 / 28%);
}

/* --- Proof row ----------------------------------------------------------- */

body.mw #page-header .mw-hero-proof {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 20px;
	margin: clamp(16px, 2.6vh, 24px) 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--g-ink-2);
}
body.mw .mw-hero-proof li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
body.mw .mw-hero-proof li::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--g-green-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* --- Phones -------------------------------------------------------------- */

@media (max-width: 600px) {
	/* Bigger title on phones: the desktop floor (64px) spans only ~60% of a
	   375px screen and leaves the hero looking empty. 22vw makes "Workshop"
	   about 80% of the width; 13vh stops it crowding the buttons on short
	   phones. */
	body.mw #page-header .ph-caption-title.mw-hero-title {
		font-size: min(22vw, 13vh);
	}
	/* One full-width, thumb-height primary; the secondary under it. Stacked
	   rather than side by side: two buttons do not fit 375px without
	   shrinking their labels below a comfortable size. */
	body.mw .mw-hero-cta {
		flex-direction: column;
		align-items: stretch;
		width: min(100%, 340px);
		margin-left: auto;
		margin-right: auto;
		gap: 10px;
	}
	body.mw .mw-hero-cta .tt-btn {
		justify-content: center;
		height: 54px;
		font-size: 14px;
	}
	body.mw .mw-hero-cta .tt-btn .tt-btn-inner,
	body.mw .mw-hero-cta .tt-btn > span {
		justify-content: center;
	}
	body.mw #page-header .mw-hero-proof {
		gap: 8px 14px;
		font-size: 11px;
		letter-spacing: .05em;
	}
	body.mw .mw-hero-proof li::before {
		width: 16px;
		height: 16px;
		background-size: 10px;
	}
}

/* --- The photo reveal --------------------------------------------------
   The mask layer is the handshake photo (with the dark tint it had as the
   old hero background) plus a white copy of the hero text. A circle of it
   follows the cursor; everywhere else the white page shows.

   Open/close animates a registered number, --mw-k, from 0 to 1 rather than
   transitioning clip-path: a clip-path transition would also ease every
   position change, so the circle would trail behind the cursor. */
@property --mw-k {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

body.mw .ph-mask {
	--mw-k: 0;
	color: #FFFFFF;
	background-color: #1f1f1f;
	background-image:
		linear-gradient(rgb(4 4 4 / 50%), rgb(4 4 4 / 50%)),
		url("../img/site/handshake-hero.jpg");
	background-image:
		linear-gradient(rgb(4 4 4 / 50%), rgb(4 4 4 / 50%)),
		image-set(
			url("../img/site/handshake-hero.avif") type("image/avif"),
			url("../img/site/handshake-hero.webp") type("image/webp"),
			url("../img/site/handshake-hero.jpg") type("image/jpeg"));
	background-size: cover;
	background-position: center;
	clip-path: circle(max(0px, var(--mw-r) * var(--mw-k)) at var(--x, 50%) var(--y, 50%));
	transition: --mw-k .42s cubic-bezier(.2, .9, .25, 1.12);
	/* The ease overshoots, so on closing --mw-k dips just below 0. A negative
	   circle radius is invalid, and an invalid clip-path means no clip at all
	   — the whole photo would flash over the hero for a frame. The max()
	   above holds it at zero. */
}
body.mw.ph-mask-active .ph-mask {
	--mw-k: 1;
	clip-path: circle(max(0px, var(--mw-r) * var(--mw-k)) at var(--x, 50%) var(--y, 50%));
}
/* The one-time reveal on touch screens opens more slowly, so it reads as an
   introduction rather than a flicker. */
body.mw.mw-peek .ph-mask {
	transition-duration: .7s;
}

/* The white copy of the hero text, over the photo. */
body.mw #page-header .ph-mask .mw-hero-title .tt-cap-word {
	background: none;
	-webkit-text-fill-color: #FFFFFF;
	color: #FFFFFF;
}
body.mw #page-header .ph-mask .ph-caption-description {
	color: rgb(255 255 255 / 92%);
}
body.mw #page-header .ph-mask .mw-hero-proof {
	color: rgb(255 255 255 / 92%);
}
body.mw .ph-mask .mw-hero-proof li::before {
	background-color: var(--g-green);
}
/* Secondary button as it looked on the photo: white outline and label. */
body.mw .ph-mask .mw-hero-btn-ghost {
	box-shadow: inset 0 0 0 2px rgb(255 255 255 / 85%);
}
body.mw .ph-mask .mw-hero-btn-ghost > *,
body.mw .ph-mask .mw-hero-btn-ghost > *::after {
	color: #FFFFFF;
}

/* Touch screens: the template switches the lens off entirely; myworkshop.js
   drives it instead and adds this class. */
body.mw.mw-touch-lens .ph-mask {
	display: block !important;
}
body.mw.mw-touch-lens #page-header .page-header-inner:not(.ph-mask) .mw-hero-title {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	touch-action: pan-y;
}

@media (prefers-reduced-motion: reduce) {
	body.mw .ph-mask { transition: none; }
}


/* --------------------------------------------------------------------------
   Section headings and copy
   -------------------------------------------------------------------------- */

body.mw .tt-heading-title.tt-text-reveal > span,
body.mw .tt-heading-title {
	color: var(--g-ink);
}
body.mw .tt-heading-subtitle,
body.mw .tt-heading-subtitle.tt-text-reveal > span {
	color: var(--g-blue-600);
}

body.mw ::selection {
	color: #FFFFFF;
	-webkit-text-fill-color: #FFFFFF;
	background: var(--g-blue-600);
}
body.mw ::-moz-selection {
	color: #FFFFFF;
	background: var(--g-blue-600);
}


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

/* Outline: blue ring and label; fills blue on hover */
body.mw .tt-btn-outline {
	box-shadow: inset 0 0 0 2px var(--g-blue-600);
}
body.mw .tt-btn-outline > *,
body.mw .tt-btn-outline > *::after {
	color: var(--g-blue-600);
}
body.mw .tt-btn-outline:hover {
	box-shadow: inset 0 0 0 2px var(--g-blue-600);
	background-color: var(--g-blue-600);
}
body.mw .tt-btn-outline:hover > *,
body.mw .tt-btn-outline:hover > *::after {
	color: #FFFFFF;
}

/* Big round "Get Started": blue ring, with the offset echo ring drawn in the
   logo gradient. The ring is a gradient border made by masking out the
   padding box, so only the 2px edge shows. */
body.mw .tt-big-round-ptn-inner {
	border-color: var(--g-blue-600);
	color: var(--g-ink);
}
body.mw .tt-big-round-ptn-inner:hover,
body.mw .tt-big-round-ptn-inner:focus {
	background-color: var(--g-blue-600);
	color: #FFFFFF;
}
body.mw .tt-big-round-ptn-inner::before {
	border: 2px solid transparent;
	background: conic-gradient(from 200deg, var(--g-blue), var(--g-red), var(--g-yellow), var(--g-green), var(--g-blue)) border-box;
	-webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
}


/* --------------------------------------------------------------------------
   How it works — five steps
   -------------------------------------------------------------------------- */

/* Both the big numeral and the small one beneath it (part of the source
   design) follow the step's colour, so each row reads as one colour. */
body.mw .tt-ppli-count,
body.mw .tt-ppli-count::before {
	color: var(--acc-text);
}
body.mw .tt-ppli-count::before {
	opacity: .85;
}
body.mw:not(.is-mobile) .tt-ppl-item:hover .tt-ppli-count::before {
	color: var(--acc-text);
	opacity: 1;
}
body.mw .tt-ppli-category {
	color: var(--acc-text);
}
body.mw .tt-ppl-item::after {
	background-color: var(--acc-bright);
}
body.mw .tt-ppl-item::before {
	background: linear-gradient(90deg, color-mix(in srgb, var(--acc-bright) 12%, transparent) 0%, transparent 65%);
}


/* --------------------------------------------------------------------------
   Scrolling text bands — one blue, one white
   -------------------------------------------------------------------------- */

body.mw .tt-scrolling-text.scrt-color-reverse {
	background-color: var(--g-blue-600);
	color: #FFFFFF;
}
body.mw .tt-scrolling-text.scrt-color-reverse .tt-scrt-separator > svg {
	fill: #FFFFFF;
}
body.mw .tt-scrolling-text:not(.scrt-color-reverse) {
	background-color: #FFFFFF;
	color: var(--g-ink);
	/* Hairlines as inset shadows, not borders: a border adds 2px to the band
	   and the layout must match the source to the pixel. */
	box-shadow: inset 0 1px 0 var(--g-line), inset 0 -1px 0 var(--g-line);
}
body.mw .tt-scrolling-text:not(.scrt-color-reverse) .tt-scrt-separator > svg {
	fill: var(--g-red);
}


/* --------------------------------------------------------------------------
   Services — horizontal accordion
   -------------------------------------------------------------------------- */

body.mw .tt-hac-item-count::before {
	color: var(--acc-text);
}

/* Desktop: the open card fills with its own colour */
@media (min-width: 1025px) {
	body.mw .tt-hac-alter-hover .tt-hac-item:first-child,
	body.mw .tt-hac-alter-hover .tt-hac-item.active {
		background-color: var(--acc);
		color: var(--acc-ink);
		border-color: transparent;
	}
	body.mw .tt-hac-alter-hover .tt-hac-item:first-child .tt-hac-item-count::before,
	body.mw .tt-hac-alter-hover .tt-hac-item.active .tt-hac-item-count::before {
		color: var(--acc-ink);
	}
	body.mw .tt-hac-alter-hover .tt-hac-item:first-child .tt-btn-outline,
	body.mw .tt-hac-alter-hover .tt-hac-item.active .tt-btn-outline {
		box-shadow: inset 0 0 0 2px var(--acc-ink);
	}
	body.mw .tt-hac-alter-hover .tt-hac-item:first-child .tt-btn-outline > *,
	body.mw .tt-hac-alter-hover .tt-hac-item:first-child .tt-btn-outline > *::after,
	body.mw .tt-hac-alter-hover .tt-hac-item.active .tt-btn-outline > *,
	body.mw .tt-hac-alter-hover .tt-hac-item.active .tt-btn-outline > *::after {
		color: var(--acc-ink);
	}
	body.mw .tt-hac-alter-hover .tt-hac-item:first-child .tt-btn-outline:hover,
	body.mw .tt-hac-alter-hover .tt-hac-item.active .tt-btn-outline:hover {
		background-color: var(--acc-ink);
	}
	body.mw .tt-hac-alter-hover .tt-hac-item:first-child .tt-btn-outline:hover > *,
	body.mw .tt-hac-alter-hover .tt-hac-item:first-child .tt-btn-outline:hover > *::after,
	body.mw .tt-hac-alter-hover .tt-hac-item.active .tt-btn-outline:hover > *,
	body.mw .tt-hac-alter-hover .tt-hac-item.active .tt-btn-outline:hover > *::after {
		color: var(--acc);
	}

	/* The first card hands its colour back once another is opened */
	body.mw .tt-hac-alter-hover .tt-hac-item:first-child.inactive {
		background-color: #FFFFFF;
		color: var(--g-ink);
		border-color: var(--g-line);
	}
	body.mw .tt-hac-alter-hover .tt-hac-item:first-child.inactive .tt-hac-item-count::before {
		color: var(--acc-text);
	}
	body.mw .tt-hac-alter-hover .tt-hac-item:first-child.inactive .tt-btn-outline {
		box-shadow: inset 0 0 0 2px var(--g-blue-600);
	}
	body.mw .tt-hac-alter-hover .tt-hac-item:first-child.inactive .tt-btn-outline > *,
	body.mw .tt-hac-alter-hover .tt-hac-item:first-child.inactive .tt-btn-outline > *::after {
		color: var(--g-blue-600);
	}
}

/* Tablet and phone: there is no hover to open a card, so every card shows
   at once. Solid fills on all of them would be loud — tonal surfaces in each
   card's colour instead, with ink text. */
@media (max-width: 1024px) {
	body.mw .tt-hac-alter-hover .tt-hac-item {
		background-color: var(--acc-tint);
		color: var(--g-ink);
		border-color: transparent;
	}
	body.mw .tt-hac-alter-hover .tt-hac-item .tt-btn-outline {
		box-shadow: inset 0 0 0 2px var(--acc-text);
	}
	body.mw .tt-hac-alter-hover .tt-hac-item .tt-btn-outline > *,
	body.mw .tt-hac-alter-hover .tt-hac-item .tt-btn-outline > *::after {
		color: var(--acc-text);
	}
}


/* --------------------------------------------------------------------------
   Photo clipper
   -------------------------------------------------------------------------- */

body.mw .tt-clipper-btn {
	background-color: var(--g-blue-600);
	color: #FFFFFF;
}


/* --------------------------------------------------------------------------
   Testimonials — white cards with Google elevation and a colour cap
   -------------------------------------------------------------------------- */

body.mw .tt-sticky-testimonials.tt-stte-reversed-colors .tt-stte-card {
	background-color: #FFFFFF;
	color: var(--g-ink);
	/* No border — the source card has none, and 1px each side would make
	   every card 2px taller than the original. The outline is drawn as an
	   inset shadow instead, which takes no space. */
	border: none;
	box-shadow:
		inset 0 4px 0 var(--acc-bright),
		inset 0 0 0 1px var(--g-line),
		0 1px 3px rgb(60 64 67 / 12%),
		0 8px 24px rgb(60 64 67 / 8%);
}
body.mw .tt-stte-card-counter::before {
	color: var(--acc-text);
	opacity: 1;
}
/* The template fades this with opacity .5, which read fine on the source's
   black page but measures 2.2:1 on white — a WCAG fail. Google's grey at
   full opacity carries the same "secondary" weight at 6:1. */
body.mw .tt-stte-subtext {
	color: var(--g-muted);
	opacity: 1;
}


/* --------------------------------------------------------------------------
   Trust cards ("Built Right")
   -------------------------------------------------------------------------- */

body.mw .tt-avlist-col-title::before {
	background-color: var(--acc-bright);
}
body.mw .tt-avlist-info {
	background-color: var(--acc-tint);
	color: var(--acc-text);
}
body.mw .tt-avlist-item::after {
	-webkit-text-stroke-color: var(--acc-bright);
	opacity: .35;
}

/* Hover: the card fills with its own colour and the type follows */
body.mw:not(.is-mobile) .tt-avlist-item:hover,
body.mw:not(.is-mobile) .tt-avlist-item:focus-within {
	background-color: var(--acc);
	border-color: var(--acc);
	box-shadow: 0 18px 44px color-mix(in srgb, var(--acc) 28%, transparent);
}
body.mw:not(.is-mobile) .tt-avlist-item:hover .tt-avlist-title,
body.mw:not(.is-mobile) .tt-avlist-item:focus-within .tt-avlist-title,
body.mw:not(.is-mobile) .tt-avlist-item:hover .tt-avlist-description,
body.mw:not(.is-mobile) .tt-avlist-item:focus-within .tt-avlist-description {
	color: var(--acc-ink);
}
body.mw:not(.is-mobile) .tt-avlist-item:hover::after,
body.mw:not(.is-mobile) .tt-avlist-item:focus-within::after {
	-webkit-text-stroke-color: var(--acc-ink);
	opacity: .4;
}
body.mw:not(.is-mobile) .tt-avlist-item:hover .tt-avlist-col-title::before,
body.mw:not(.is-mobile) .tt-avlist-item:focus-within .tt-avlist-col-title::before {
	background-color: var(--acc-ink);
}
body.mw:not(.is-mobile) .tt-avlist-item:hover .tt-avlist-info,
body.mw:not(.is-mobile) .tt-avlist-item:focus-within .tt-avlist-info {
	background-color: #FFFFFF;
	color: var(--acc-text);
}


/* --------------------------------------------------------------------------
   Footer — the four colours as a single rule along its top edge
   -------------------------------------------------------------------------- */

body.mw #tt-footer {
	position: relative;
	border-top: none;
}
body.mw #tt-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg,
		var(--g-blue) 0 25%, var(--g-red) 25% 50%,
		var(--g-yellow) 50% 75%, var(--g-green) 75% 100%);
}
body.mw .tt-footer-widget-heading {
	color: var(--g-ink);
}
body.mw #tt-footer .tt-link {
	color: var(--g-ink-2);
}
body.mw #tt-footer .tt-link:hover {
	color: var(--g-blue-600);
}
body.mw .tt-footer-copyright {
	color: var(--g-muted);
	opacity: 1; /* template's .6 measured 2.6:1 on white */
}


/* --------------------------------------------------------------------------
   Scroll-to-top progress ring
   -------------------------------------------------------------------------- */

body.mw .tt-stt-progress::after {
	color: var(--g-blue-600);
}
body.mw svg.tt-stt-progress-circle path {
	stroke: var(--g-blue-600);
}