/* =====================================================================
   HOME — the hero, and the header over it
   =====================================================================
   Rebuilt from the owner's comp (1670 x 942). The hero is the comp's own
   photograph with the real copy, list and stat card laid back over it in
   HTML; see template-parts/home-hero.php for why.

   ABOVE 1200px everything is in one coordinate system. The frame keeps the
   photograph's ratio (1670 x 492, plus the mirrored headroom strip) and is a
   size container, so 1cqw is 16.7px at the comp's width and every number
   below is "px on the comp / 16.7". The header uses vw for the same reason
   (it sits outside the container, and spans the same full width). Text that
   would get too small on a narrower screen has a px floor.

   BELOW 1200px the copy comes first, the photograph follows as a crop of its
   right-hand side, then the list and the stat card.

   Surfaces are white, not cream (the owner's call, 2026-10-04), and the
   photograph's cream wall is neutralised to match.

   Loaded only once ldt_hero_ready() is true (functions.php), in place of
   home-v2.css. Scoped to .home-v2 / .hx: nothing here reaches another page.
   ===================================================================== */

.home-v2 {
	--hx-ink:    #0E0E0E;
	--hx-body:   #363431;
	--hx-muted:  #54514E;
	--hx-orange: #F45A12;
	--hx-paper:  #FFFFFF;
	--hx-sans:   'DM Sans', 'Inter', system-ui, sans-serif;
	--hx-display:'Archivo', 'Inter', system-ui, sans-serif;
}

/* =============================================================== HEADER */

/* Below 1200px: an ordinary white bar. */
.home-v2 .site-header { background: var(--hx-paper); }
.home-v2 .site-header.is-scrolled {
	background: rgba(255,255,255,.94);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom-color: rgba(22,24,28,.08);
}

/* the wordmark: LOGICAL over a heavy DOTTECH, the O in olive, an orange dot */
.site-brand__word {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	font-family: var(--hx-display);
	color: var(--hx-ink);
	text-decoration: none;
	line-height: 1;
	--s: 26px;                      /* DOTTECH's size; the rest follows it */
}
.site-brand__l1 {
	font-size: calc(var(--s) * .665);
	font-weight: 500;
	letter-spacing: .05em;
	line-height: .84;
}
.site-brand__l2 {
	font-size: var(--s);
	font-weight: 800;
	font-stretch: 90%;
	letter-spacing: -.03em;
	line-height: .84;
	margin-top: calc(var(--s) * .2);
}
.site-brand__o { color: #4B5A1A; }
.site-brand__dot {
	position: absolute;
	left: calc(100% + var(--s) * .02);
	top: calc(var(--s) * .055);
	width: calc(var(--s) * .6);
	height: calc(var(--s) * .6);
	border-radius: 50%;
	background: var(--hx-orange);
}

.home-v2 #primary-menu > .nav-item > a,
.home-v2 #primary-menu > .nav-item > .nav-item__trigger {
	font-family: var(--hx-sans);
	color: var(--hx-ink);
}
.home-v2 #primary-menu > .nav-item > a:hover,
.home-v2 #primary-menu > .nav-item > .nav-item__trigger:hover { color: var(--hx-orange); background: transparent; }

/* "Let's Talk": an outlined pill */
.site-header__talk {
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--hx-sans);
	font-weight: 500;
	color: var(--hx-ink);
	background: transparent;
	border: 1.4px solid currentColor;
	border-radius: 999px;
	text-decoration: none;
}
.site-header__talk svg { flex: none; }

/* the drawer the round menu button opens on wide screens */
.site-drawer { display: none; }

/* the phone menu: white like the bar, so its ink links stay readable */
@media (max-width: 768px) {
	.home-v2 .site-nav { background: rgba(255,255,255,.98); border-bottom-color: rgba(22,24,28,.1); }
	.home-v2 #primary-menu > .nav-item > a:hover,
	.home-v2 #primary-menu > .nav-item > .nav-item__trigger:hover { background: rgba(22,24,28,.05); }
	.home-v2 .nav-toggle span { background: var(--hx-ink); }
	.home-v2 .site-header__actions { margin-left: auto; }
	.site-brand__word { --s: 22px; }
}

/* ---- over the photograph (1200px and up) ---- */
@media (min-width: 1200px) {
	.home-v2 .site-header {
		position: fixed;
		top: 0; left: 0; right: 0;
		background: transparent;
	}
	.admin-bar.home-v2 .site-header { top: 32px; }

	.home-v2 .site-header__inner {
		max-width: none;
		height: 4.8vw;                 /* 80px at 1670 */
		padding: 0 3.89vw 0 5.81vw;    /* 65 right, 97 left */
		gap: 0;
	}
	/* the bar's first link starts where the comp's does: 391px */
	.home-v2 .site-brand { width: 17.6vw; flex: none; }
	.home-v2 .site-brand__word { --s: max(18px, 1.62vw); margin-top: .16vw; }

	.home-v2 .site-nav { margin-left: 0; }
	.home-v2 #primary-menu { gap: max(18px, 2.2vw); }
	.home-v2 #primary-menu > .nav-item > a,
	.home-v2 #primary-menu > .nav-item > .nav-item__trigger {
		position: relative;
		padding: .7vw 0;
		font-size: max(12.5px, .81vw);
		font-weight: 500;
		letter-spacing: -.005em;
		border-radius: 0;
	}
	.home-v2 #primary-menu .nav-item__chevron { display: none; }
	/* the current page's short orange rule */
	.home-v2 #primary-menu > .current-menu-item > a::after {
		content: "";
		position: absolute;
		left: 2%; right: 2%;
		bottom: max(2px, .1vw);
		height: 2px;
		border-radius: 2px;
		background: var(--hx-orange);
	}

	.home-v2 .site-header__actions { margin-left: auto; gap: 0; }
	.home-v2 .site-header__talk {
		height: max(36px, 2.64vw);             /* 44px */
		padding: 0 max(18px, 1.6vw) 0 max(20px, 1.83vw);
		min-width: max(124px, 8.92vw);         /* 149px */
		justify-content: space-between;
		font-size: max(12.5px, .81vw);
		color: #fff;
		border-color: rgba(255,255,255,.62);
	}
	.home-v2 .site-header__talk svg { width: max(14px, .9vw); height: auto; }
	.home-v2 .site-header__talk:hover { background: #fff; color: var(--hx-ink); border-color: #fff; }

	/* the hairline between the pill and the round button */
	.home-v2 .site-header__actions::before {
		content: "";
		order: 1;
		width: 1px;
		height: max(26px, 2.1vw);
		margin: 0 max(14px, 1.26vw);
		background: rgba(255,255,255,.38);
	}
	.home-v2 .site-header__talk { order: 0; }
	.home-v2 .nav-toggle {
		order: 2;
		display: grid;
		place-content: center;
		gap: max(4px, .33vw);
		width: max(36px, 2.72vw);              /* 45px */
		height: max(36px, 2.72vw);
		padding: 0;
		border: 1.4px solid rgba(255,255,255,.72);
		border-radius: 50%;
		background: transparent;
		cursor: pointer;
	}
	.home-v2 .nav-toggle span { width: max(15px, 1.14vw); height: 1.6px; margin: 0; background: #fff; }
	body.home-v2.nav-open .nav-toggle span:nth-child(1) { transform: translateY(calc(max(4px, .33vw) + 1.6px)) rotate(45deg); }
	body.home-v2.nav-open .nav-toggle span:nth-child(3) { transform: translateY(calc(-1 * (max(4px, .33vw) + 1.6px))) rotate(-45deg); }
	.home-v2 .nav-toggle:hover { background: rgba(255,255,255,.12); }

	.home-v2 .site-drawer {
		display: block;
		position: absolute;
		top: calc(100% - .4vw);
		right: 3.89vw;
		min-width: 220px;
		padding: 10px;
		border-radius: 14px;
		background: rgba(20,19,17,.96);
		box-shadow: 0 24px 48px -20px rgba(0,0,0,.6);
		opacity: 0; visibility: hidden; transform: translateY(-6px);
		transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
	}
	body.home-v2.nav-open .site-drawer { opacity: 1; visibility: visible; transform: none; }
	.home-v2 .site-drawer ul { list-style: none; margin: 0; padding: 0; }
	.home-v2 .site-drawer a {
		display: block;
		padding: 10px 14px;
		border-radius: 9px;
		font-family: var(--hx-sans);
		font-size: 14.5px;
		color: #F2EEE8;
		text-decoration: none;
	}
	.home-v2 .site-drawer a:hover { background: rgba(255,255,255,.08); color: #fff; }

	/* once the page scrolls the bar turns white, and the light controls go ink */
	.home-v2 .site-header.is-scrolled .site-header__talk { color: var(--hx-ink); border-color: rgba(14,14,14,.55); }
	.home-v2 .site-header.is-scrolled .site-header__talk:hover { background: var(--hx-ink); color: #fff; border-color: var(--hx-ink); }
	.home-v2 .site-header.is-scrolled .site-header__actions::before { background: rgba(14,14,14,.2); }
	.home-v2 .site-header.is-scrolled .nav-toggle { border-color: rgba(14,14,14,.55); }
	.home-v2 .site-header.is-scrolled .nav-toggle span { background: var(--hx-ink); }
	.home-v2 .site-header.is-scrolled .nav-toggle:hover { background: rgba(14,14,14,.06); }
}

/* ============================================================ MEGA MENU
   The Services panel, in the page's own look: a white sheet, ink type,
   Archivo column heads with an orange-tinted icon chip, DM Sans links, and
   the call-to-action as a dark card. main.css paints it for the dark theme
   with !important on the links, so the overrides here match that. */
.home-v2 .mega__inner {
	background: #FFFFFF;
	border: 1px solid rgba(22,24,28,.08);
	border-radius: 18px;
	box-shadow: 0 30px 60px -28px rgba(20,20,20,.35), 0 4px 14px rgba(20,20,20,.06);
	backdrop-filter: none; -webkit-backdrop-filter: none;
	padding: 22px;
	gap: 6px 16px;
}
.home-v2 .mega__head {
	font-family: var(--hx-display) !important;
	font-weight: 800 !important;
	font-size: 14px !important;
	letter-spacing: -.01em;
	color: var(--hx-ink) !important;
	padding: 6px 8px !important;
	border-bottom: 1px solid rgba(22,24,28,.07);
	border-radius: 8px 8px 0 0;
	margin-bottom: 6px;
}
.home-v2 .mega__head:hover { background: rgba(244,90,18,.06); color: var(--hx-orange) !important; }
.home-v2 .mega__head-icon {
	color: var(--hx-orange);
	background: rgba(244,90,18,.1);
	border: 1px solid rgba(244,90,18,.22);
}
.home-v2 .mega__list a {
	font-family: var(--hx-sans);
	font-size: 13.5px !important;
	color: #4A4743 !important;
	padding: 6px 10px !important;
}
.home-v2 .mega__list a:hover { color: var(--hx-ink) !important; background: rgba(22,24,28,.04); }
.home-v2 .mega__cta {
	background: #141413;
	border: 0;
	border-radius: 14px;
	padding: 18px;
}
.home-v2 .mega__cta-title { font-family: var(--hx-display); font-weight: 800; color: #FFFFFF; letter-spacing: -.01em; }
.home-v2 .mega__cta-sub { font-family: var(--hx-sans); color: rgba(255,255,255,.72); }
.home-v2 .mega__cta .btn--primary {
	background: var(--hx-orange);
	color: #fff !important;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	font-family: var(--hx-sans);
	font-weight: 600;
}
.home-v2 .mega__cta .btn--primary:hover { background: #E54E08; }
.home-v2 .mega__cta-all { color: #FFB27F !important; font-family: var(--hx-sans); }

/* the phone menu: the panel opens inline under "Services" */
@media (max-width: 768px) {
	.home-v2 .mega__inner {
		background: transparent; border: 0; box-shadow: none; padding: 6px 0 8px 0;
		border-left: 2px solid rgba(244,90,18,.25); border-radius: 0;
	}
	.home-v2 .mega__head { border-bottom: 0; }
	.home-v2 .mega__cta { margin: 8px 12px 0; }
}

/* ================================================================= HERO */

.hx {
	position: relative;
	z-index: 5;                 /* the stat card hangs over the band below */
	background: var(--hx-paper);
	color: var(--hx-ink);
	font-family: var(--hx-sans);
}

.hx__frame {
	position: relative;
	container-type: inline-size;
}

.hx__scene img { display: block; width: 100%; height: auto; }

/* ---- the copy ---- */

.hx__eyebrow {
	display: flex;
	align-items: center;
	gap: .9em;
	margin: 0;
	font-family: var(--hx-sans);
	font-weight: 600;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--hx-muted);
	line-height: 1;
}
.hx__eyebrow::before {
	content: "";
	flex: none;
	width: .85em; height: .85em;
	border-radius: 50%;
	background: var(--hx-orange);
	margin-right: .78em;
}

.hx__title {
	margin: 0;
	font-family: var(--hx-display);
	font-weight: 900;
	font-stretch: 90%;
	line-height: .75;
	letter-spacing: -.05em;
	color: var(--hx-ink);
}
.hx__accent {
	position: relative;
	color: var(--hx-orange);
	white-space: nowrap;
	letter-spacing: -.025em;      /* the comp sets the second line a touch looser */
	margin-left: .14em;
}
/* the hand-drawn stroke under "Impact.", rising to the right and running
   past the full stop, as in the comp */
.hx__swash {
	position: absolute;
	left: 54.5%;
	width: 48.5%;
	bottom: .045em;
	height: .14em;
	color: var(--hx-orange);
	overflow: visible;
}

.hx__lead {
	margin: 0;
	max-width: 23em;
	line-height: 1.25;
	font-weight: 400;
	color: var(--hx-body);
	letter-spacing: -.003em;
}

.hx__actions { display: flex; flex-wrap: wrap; }

.hx__btn {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	border-radius: 999px;
	font-family: var(--hx-sans);
	text-decoration: none;
	white-space: nowrap;
	transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.hx__btn svg { flex: none; }
.hx__btn--go {
	background: var(--hx-orange);
	color: #fff;
	font-weight: 500;
	box-shadow: 0 .55em 1.4em -.7em rgba(244,90,18,.75);
}
.hx__btn--go:hover { transform: translateY(-2px); background: #E54E08; }
.hx__btn--go svg { width: 1.05em; height: auto; transition: transform var(--t-fast); }
.hx__btn--go:hover svg { transform: translateX(3px); }
.hx__btn--work {
	justify-content: space-between;
	background: rgba(255,255,255,.18);
	color: var(--hx-ink);
	font-weight: 600;
	border: 1.3px solid #9A968F;
}
.hx__btn--work:hover { background: var(--hx-ink); color: #fff; border-color: var(--hx-ink); }
.hx__play {
	display: grid;
	place-items: center;
	flex: none;
	border-radius: 50%;
	background: #fff;
	color: #0E0E0E;
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.hx__play svg { width: 34%; height: auto; margin-left: 9%; }

/* ---- the numbered list on the dark panel ---- */

.hx__list ol { list-style: none; margin: 0; padding: 0; }
.hx__list li,
.hx__list a { display: flex; align-items: baseline; }
.hx__list a { flex: 1; color: inherit; text-decoration: none; }
.hx__list b {
	flex: none;
	font-weight: 400;
	color: #F08A3E;
	font-variant-numeric: tabular-nums;
}
.hx__list span {
	position: relative;
	flex: 1;
	color: #F4F1EC;
	font-weight: 400;
	white-space: nowrap;
}
/* under each row: a faint full-width rule with a short orange one over it */
.hx__list span::before,
.hx__list span::after {
	content: "";
	position: absolute;
	left: 0;
	height: 1.5px;
}
.hx__list span::before { right: 0; background: rgba(255,255,255,.1); }
.hx__list span::after  { width: 2.6em; background: #E07A33; }
.hx__list a:hover span { color: #fff; }
.hx__list a:hover b { color: #FF9A4D; }

/* ---- the stat card ---- */

.hx__stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 189fr 171fr 205fr 236fr;
	background-color: #FFFFFF;
	background-image: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)), var(--hx-card-paper, none);
	background-size: auto, 520px auto;
	box-shadow: 0 14px 34px -14px rgba(20,20,20,.28), 0 2px 6px rgba(20,20,20,.06);
}
.hx__stats li { position: relative; }
.hx__stats li + li::before {
	content: "";
	position: absolute;
	left: 0;
	width: 1px;
	background: #DAD6D0;
}
.hx__stats strong {
	display: block;
	font-family: var(--hx-sans);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.035em;
	color: #050505;
	font-variant-numeric: lining-nums;
}
.hx__stats span {
	display: block;
	line-height: 1.1;
	color: var(--hx-body);
}
.hx__stats span::after {
	content: "";
	display: block;
	height: 2px;
	border-radius: 2px;
	background: var(--hx-orange);
}

/* ------------------------------------------- 1200px and up: the composition */

@media (min-width: 1200px) {
	/* Room above the copy: the photograph is extended upward by --ext with a
	   mirror of its own top rows (there is nothing in them but wall, stone
	   and panel; the sticky note starts 41px down), so the header and the
	   copy get air without cropping or squashing the picture. */
	.hx { --ext: 2.28cqw; }
	.hx__frame { aspect-ratio: 1670 / 530; }
	.hx__frame::before {
		content: "";
		position: absolute;
		left: 0; right: 0; top: 0;
		height: var(--ext);
		background: var(--hx-scene, none) center top / 100% auto no-repeat;
		transform: scaleY(-1);
	}
	.hx__scene { position: absolute; left: 0; right: 0; bottom: 0; top: var(--ext); z-index: 0; }
	.hx__scene img { height: 100%; object-fit: cover; }

	/* The photograph's wall is a warm cream; the page is white. Over the left
	   of the picture (where the copy sits on plain wall) the colour is drawn
	   out of it and it is lifted a touch, fading out before the desk so the
	   objects keep their warmth. */
	.hx__frame::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		-webkit-backdrop-filter: saturate(.2) brightness(1.035);
		backdrop-filter: saturate(.2) brightness(1.035);
		/* two areas: the left of the picture top to bottom, and the bare wall
		   behind the handwritten list (above the books, left of the plant) */
		-webkit-mask-image: linear-gradient(90deg, #000 0, #000 33%, transparent 49%), radial-gradient(ellipse 12% 34% at 39% 26%, #000 50%, transparent 100%);
		mask-image: linear-gradient(90deg, #000 0, #000 33%, transparent 49%), radial-gradient(ellipse 12% 34% at 39% 26%, #000 50%, transparent 100%);
	}

	.hx__copy {
		position: absolute;
		z-index: 2;
		left: 5.81cqw;                 /* 97 */
		top: calc(6.2cqw + var(--ext));
	}
	.hx__eyebrow { font-size: max(9.5px, .6cqw); position: relative; top: .12cqw; }
	.hx__title {
		font-size: 5.99cqw;            /* 100px at 1670: a 68px cap, as the comp */
		margin-top: 1.5cqw;
		margin-left: -.18cqw;
	}
	.hx__lead {
		font-size: max(14px, 1.13cqw);
		margin-top: 1.45cqw;
	}
	.hx__actions { gap: 1.2cqw; margin-top: 1.6cqw; margin-left: .12cqw; }
	.hx__btn { height: max(40px, 2.81cqw); font-size: max(13.5px, .93cqw); }
	.hx__btn--go {
		width: max(178px, 12.93cqw);           /* 216 */
		padding: 0 2.2cqw 0 2.26cqw;
		gap: 1.65cqw;
		justify-content: flex-start;
	}
	.hx__btn--work {
		width: max(168px, 12.1cqw);            /* 202 */
		padding: 0 .82cqw 0 1.98cqw;
		gap: 1.2cqw;
	}
	.hx__play { width: max(26px, 1.9cqw); height: max(26px, 1.9cqw); }

	.hx__list {
		position: absolute;
		z-index: 2;
		left: 79.74cqw;                /* 1332 */
		top: calc(4.96cqw + var(--ext));
		width: 11.6cqw;
	}
	.hx__list li { height: 2.365cqw; }         /* 39.5px rows */
	.hx__list b { width: 2.46cqw; font-size: 1.1cqw; }
	.hx__list span { font-size: max(11px, .9cqw); }
	.hx__list span::before,
	.hx__list span::after { bottom: -.82em; }
	.hx__list span::before { right: -1.7cqw; }

	.hx__stats {
		position: absolute;
		z-index: 3;
		left: 46.29cqw;                /* 773 */
		top: calc(25.09cqw + var(--ext));   /* 419 on the photograph */
		width: 48.02cqw;               /* 802 */
		height: 6.11cqw;               /* 102 */
		border-radius: .62cqw;
	}
	.hx__stats li { padding: 1.2cqw 0 0 2.38cqw; }
	.hx__stats li:first-child { padding-left: 2.51cqw; }
	.hx__stats li + li::before { top: 1.26cqw; bottom: 1.5cqw; left: -.21cqw; }
	.hx__stats strong { font-size: max(19px, 1.64cqw); letter-spacing: -.06em; }
	.hx__stats span { font-size: max(11px, .82cqw); margin-top: .32cqw; }
	.hx__stats span::after { width: 1.5cqw; margin-top: .62cqw; }
}

/* ---------------------------------------------------- below 1200px: stacked */

@media (max-width: 1199.98px) {
	.hx { padding-top: clamp(28px, 5vw, 48px); }
	.hx__frame { display: flex; flex-direction: column; }
	.hx__copy { padding: 0 var(--gutter); max-width: 680px; }
	.hx__eyebrow { font-size: 11px; letter-spacing: .24em; }
	.hx__title { font-size: clamp(52px, 14.5vw, 96px); margin-top: 18px; }
	.hx__lead { font-size: clamp(15.5px, 2.2vw, 18px); margin-top: 20px; }
	.hx__actions { gap: 12px; margin-top: 24px; }
	.hx__btn { height: 50px; font-size: 15px; }
	.hx__btn--go { padding: 0 24px; gap: 18px; }
	.hx__btn--work { padding: 0 8px 0 24px; gap: 16px; }
	.hx__play { width: 34px; height: 34px; }

	/* the photograph's right-hand side: the desk, the note, the panel */
	.hx__scene {
		position: relative;
		margin-top: clamp(28px, 5vw, 44px);
		aspect-ratio: 1110 / 415;
		overflow: hidden;
	}
	.hx__scene img {
		position: absolute;
		top: 0;
		left: calc(-560 / 1110 * 100%);
		width: calc(1670 / 1110 * 100%);
		max-width: none;
	}

	.hx__list {
		margin: 0;
		padding: 18px var(--gutter) 22px;
		background: #161513;
	}
	.hx__list ol { max-width: 560px; }
	.hx__list li { padding: 12px 0 16px; }
	.hx__list b { width: 44px; font-size: 18px; }
	.hx__list span { font-size: 15.5px; }
	.hx__list span::before,
	.hx__list span::after { bottom: -9px; }

	.hx__stats {
		margin: -14px var(--gutter) 0;
		position: relative;
		z-index: 2;
		border-radius: 12px;
		grid-template-columns: 1fr 1fr;
	}
	.hx__stats li { padding: 18px 0 16px 22px; }
	.hx__stats li + li::before { top: 18px; bottom: 18px; }
	.hx__stats li:nth-child(3)::before { display: none; }
	.hx__stats li:nth-child(n+3) { border-top: 1px solid #E6E3DE; }
	.hx__stats strong { font-size: 26px; }
	.hx__stats span { font-size: 14px; margin-top: 7px; }
	.hx__stats span::after { width: 24px; margin-top: 10px; }
}

@media (min-width: 700px) and (max-width: 1199.98px) {
	.hx__stats { grid-template-columns: 189fr 171fr 205fr 236fr; }
	.hx__stats li:nth-child(n+3) { border-top: 0; }
	.hx__stats li:nth-child(3)::before { display: block; }
}

@media (prefers-reduced-motion: reduce) {
	.hx__btn, .hx__btn svg { transition: none; }
	.hx__btn--go:hover { transform: none; }
}