/* =========================================================
   threadslabin - FRONT PAGE
   Body class: custom-front-page
   Save as:    assets/css/home.css

   Goes with front-page.php and assets/js/home.js.
   Scoped to .tl-home so nothing here reaches another page.
   ========================================================= */

.tl-home {
	--hm-accent: var(--madder, #a8402f);
	--hm-accent-dark: #8c3526;
	--hm-ink: var(--ink, #1a1d1a);

	/* Fallback only. home.js measures the real header and overwrites
	   --header-height on :root, so the hero fits exactly. */
	--hm-header: var(--header-height, 78px);

	/*
	 * One value for the space above and below every band on this page.
	 * Each section used to set its own, so the rhythm drifted from one
	 * to the next. Change it here and the whole page moves together.
	 *
	 * Note this is the space on ONE side: the gap a visitor sees between
	 * two sections is twice it, because the section above contributes
	 * its bottom padding and the one below its top.
	 */
	--hm-band: clamp(2rem, 3.5vw, 2.75rem);
}

/* The hero handles its own spacing */
.tl-home.site-main { padding: 0; }

/* =========================================================
   1. FULL SCREEN HERO

   Height is set three times on purpose, each line overriding
   the last where the browser supports it:

     100vh  - every browser, but on mobile it counts the
              viewport WITHOUT the address bar, so the bottom
              of the hero (and the scroll arrow) ends up
              hidden behind browser chrome
     100dvh - resizes as the address bar hides and shows
     100svh - the smallest the viewport gets, so nothing is
              ever cut off. This is the one we want

   Subtracting the header means the whole hero is visible
   without scrolling, which is the point of a full screen
   hero, and puts the arrow at the true bottom of the screen.
   ========================================================= */

.tl-home .tl-hero {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	isolation: isolate;

	height: calc(100vh - var(--hm-header));
	height: calc(100dvh - var(--hm-header));
	height: calc(100svh - var(--hm-header));

	/* On a short landscape phone a full viewport hero leaves no room
	   for the text, so never go below this */
	min-height: 460px;

	background: var(--hm-ink);
	color: #fff;
}

/* ---------- Video ---------- */

.tl-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--hm-ink);
}

.tl-hero__video,
.tl-hero__still {
	width: 100%;
	height: 100%;
	/* cover is what makes the video fill any screen shape without
	   letterboxing; the sides or the top get cropped instead */
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Fallback when no video and no poster have been set yet */
.tl-hero--novideo {
	background:
		radial-gradient(circle at 20% 15%, rgba(168, 64, 47, 0.5) 0%, rgba(168, 64, 47, 0) 55%),
		linear-gradient(160deg, #2a2f2a 0%, var(--hm-ink) 60%, #101310 100%);
}

/* ---------- Scrim ----------
   Darkens the video enough for white text to stay legible over a
   bright frame, without flattening the footage. Stronger at the
   bottom, where the text and the arrow sit. */

.tl-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(10, 12, 10, 0.55) 0%, rgba(10, 12, 10, 0.3) 35%, rgba(10, 12, 10, 0.72) 100%);
	pointer-events: none;
}

/* =========================================================
   2. HERO CONTENT
   ========================================================= */

.tl-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	/* Room at the bottom so long copy never runs into the arrow */
	padding-block: clamp(2rem, 6vh, 4rem) clamp(5rem, 12vh, 7rem);
}

.tl-hero__eyebrow {
	margin: 0 0 0.9rem;
	font-family: var(--display, system-ui, sans-serif);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.tl-hero__title {
	max-width: 16ch;
	margin: 0 0 1.1rem;
	font-family: var(--display, system-ui, sans-serif);
	font-size: clamp(2.4rem, 6.5vw, 5.2rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.045em;
	color: #fff;
	text-wrap: balance;
}

.tl-hero__text {
	max-width: 46ch;
	margin: 0 0 clamp(1.5rem, 3vw, 2.1rem);
	font-size: clamp(1rem, 1.4vw, 1.14rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.82);
}

/* =========================================================
   3. BUTTONS
   ========================================================= */

.tl-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
}

.tl-home .tl-hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 1em 2em;
	background: var(--hm-accent);
	border: 1px solid var(--hm-accent);
	border-radius: 10px;
	color: #fff;
	font-family: var(--display, system-ui, sans-serif);
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, gap 0.18s ease;
}

.tl-home .tl-hero__btn:hover {
	background: var(--hm-accent-dark);
	border-color: var(--hm-accent-dark);
	color: #fff;
	transform: translateY(-2px);
	gap: 0.8rem;
}

.tl-hero__btn svg { width: 17px; height: 17px; }

.tl-home .tl-hero__btn--ghost {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.34);
	color: #fff;
	/* Keeps the outline readable over a bright video frame */
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.tl-home .tl-hero__btn--ghost:hover {
	background: #fff;
	border-color: #fff;
	color: var(--hm-ink);
}

/* =========================================================
   4. SCROLL CUE

   Two chevrons, the second trailing the first, so the eye
   reads it as downward movement rather than a pulse.
   ========================================================= */

.tl-home .tl-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: clamp(1.1rem, 3vh, 2rem);
	transform: translateX(-50%);
	z-index: 3;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tl-home .tl-hero__scroll:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.tl-home .tl-hero__scroll:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.tl-hero__chevrons {
	position: relative;
	display: block;
	width: 26px;
	height: 30px;
}

.tl-hero__chevrons svg {
	position: absolute;
	left: 0;
	width: 26px;
	height: 26px;
	opacity: 0;
	animation: tl-hero-chevron 2s ease-in-out infinite;
}

.tl-hero__chevrons svg:nth-child(1) { top: -4px; }

/* Half a cycle behind the first, which is what reads as a fall */
.tl-hero__chevrons svg:nth-child(2) {
	top: 4px;
	animation-delay: 0.35s;
}

@keyframes tl-hero-chevron {
	0%   { opacity: 0; transform: translateY(-7px); }
	45%  { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(7px); }
}

/* =========================================================
   6. RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
	.tl-hero__title { max-width: 14ch; }
}

@media (max-width: 600px) {
	.tl-home .tl-hero { min-height: 520px; }

	.tl-hero__title { max-width: none; }
	.tl-hero__text { max-width: none; }

	.tl-hero__actions { flex-direction: column; align-items: stretch; }

	.tl-home .tl-hero__btn { width: 100%; justify-content: center; }

	.tl-home .tl-hero__scroll { width: 46px; height: 46px; }
	.tl-hero__chevrons { width: 22px; height: 26px; }
	.tl-hero__chevrons svg { width: 22px; height: 22px; }
}

/*
 * Landscape phone: the viewport is very short, so a centred hero
 * squeezes the text against the arrow. Shrink the type instead of
 * letting it overflow.
 */
@media (max-height: 520px) and (orientation: landscape) {
	.tl-home .tl-hero { min-height: 0; }
	.tl-hero__title { font-size: clamp(1.8rem, 5vw, 2.6rem); }
	.tl-hero__text { font-size: 0.95rem; margin-bottom: 1rem; }
	.tl-hero__inner { padding-block: 1.5rem 3.5rem; }
	.tl-home .tl-hero__scroll { width: 40px; height: 40px; }
}

/* =========================================================
   7. MOTION

   The video is paused by home.js under reduced motion, and the
   chevrons stop moving here. The arrow stays visible and still
   works as a link.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.tl-hero__chevrons svg {
		animation: none;
		opacity: 0.9;
	}

	.tl-hero__chevrons svg:nth-child(2) { display: none; }

	.tl-home .tl-hero__btn { transition: none !important; }
	.tl-home .tl-hero__btn:hover { transform: none; }
}

/* =========================================================
   8. PRODUCT STRIP

   A scroll-snap track, not a JS carousel. The browser does the
   scrolling, so it drags on touch, flicks with a trackpad, takes
   arrow keys and keeps working if the script never loads. The
   buttons and dots are a convenience layer on top.

   Cards use .tl-card from shop.css, which now loads on the front
   page too (see inc/body-classes.php).
   ========================================================= */

.tl-strip {
	padding-block: var(--hm-band);
	scroll-margin-top: var(--hm-header);
}

/* ---------- Head ---------- */

.tl-strip__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: clamp(1.4rem, 3vw, 2rem);
}

.tl-strip__heading { min-width: 0; }

.tl-strip__eyebrow {
	margin: 0 0 0.4rem;
	font-family: var(--display, system-ui, sans-serif);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hm-accent);
}

.tl-strip__title {
	margin: 0;
	font-family: var(--display, system-ui, sans-serif);
	font-size: clamp(1.7rem, 3.6vw, 2.6rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.035em;
	color: var(--hm-ink);
}

.tl-strip__tools {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.tl-home .tl-strip__all {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--hm-ink);
	font-family: var(--display, system-ui, sans-serif);
	font-size: 0.88rem;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	transition: color 0.16s ease, gap 0.16s ease;
}

.tl-home .tl-strip__all:hover {
	color: var(--hm-accent);
	gap: 0.65rem;
}

.tl-strip__all svg { width: 15px; height: 15px; }

/* ---------- Arrows ---------- */

.tl-strip__nav { display: flex; gap: 0.45rem; }

.tl-home .tl-strip__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: #fff;
	border: 1px solid rgba(26, 29, 26, 0.14);
	border-radius: 50%;
	color: var(--hm-ink);
	cursor: pointer;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
	-webkit-appearance: none;
	appearance: none;
}

.tl-home .tl-strip__arrow:hover:not(:disabled) {
	background: var(--hm-ink);
	border-color: var(--hm-ink);
	color: #fff;
}

.tl-home .tl-strip__arrow:disabled {
	opacity: 0.32;
	cursor: default;
}

.tl-strip__arrow svg { width: 18px; height: 18px; }

/* ---------- The track ----------
   The negative margin lets the first and last card sit flush with the
   page edge on a phone while still having padding to scroll into. */

.tl-strip__track {
	display: flex;
	gap: 1.25rem;
	list-style: none;

	/*
	 * Room inside the scroll box for the hover lift and the card shadow.
	 *
	 * overflow-x: auto below makes the vertical axis clip too - that is
	 * how CSS works, one axis cannot scroll while the other stays
	 * visible. Without this padding the card's raised top edge and its
	 * shadow were being cut off on hover.
	 *
	 * The negative margin takes the same space back out of the layout,
	 * so the section spaces exactly as it did before.
	 */
	padding-block: 12px 26px;
	margin-block: -12px -18px;
	padding-inline: 0;
	margin-inline: 0;

	/*
	 * The three lines that stop the cards widening the page.
	 *
	 * The phone reported the page at 2439px against a 426px screen, and
	 * named li.tl-card as the thing reaching past the edge - eight cards
	 * laid out in a row that nothing was cutting off.
	 *
	 * overflow-x: auto alone was not enough, because it only clips what
	 * is wider than the BOX, and the box had no width of its own to be
	 * wider than. A flex container with no stated width takes the width
	 * of its contents, so the track simply grew to fit all eight cards
	 * and had nothing left to clip.
	 *
	 * width: 100% pins it to its container instead. min-width: 0 stops
	 * it refusing to shrink below its contents, which is the default for
	 * anything laid out by flex or grid and the usual reason a page is
	 * fine on a laptop and scrolls on a phone.
	 */
	width: 100%;
	max-width: 100%;
	min-width: 0;

	overflow-x: auto;
	overscroll-behavior-x: contain;

	/* The track is draggable with a mouse, so it should say so */
	cursor: grab;
	/*
	 * proximity, not mandatory.
	 *
	 * mandatory forces the browser to land on a snap point after every
	 * scroll. If anything changes the layout while it is settling - and
	 * this track's script does, it enables and disables the arrows on
	 * each scroll event - the browser re-snaps, which fires another
	 * scroll event, which changes the layout again. The loop runs on the
	 * main thread, so the whole page stops answering clicks until it
	 * gives up. That is what made every button on the page go dead after
	 * dragging the slider.
	 *
	 * proximity snaps only when the scroll already finishes near a card,
	 * so it never fights the page.
	 */
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;

	/* The scrollbar is replaced by the arrows and dots */
	scrollbar-width: none;
}

.tl-strip__track::-webkit-scrollbar { display: none; }

.tl-strip__track:focus-visible {
	outline: 2px solid var(--hm-accent);
	outline-offset: 4px;
	border-radius: 4px;
}

/* 4 across on a wide screen */
.tl-strip__track > .tl-card {
	flex: 0 0 calc((100% - 3 * 1.25rem) / 4);
	scroll-snap-align: start;
	margin: 0;
}

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

.tl-strip__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 1.25rem;
}

.tl-strip__dots:empty { display: none; }

.tl-strip__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	background: rgba(26, 29, 26, 0.2);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: width 0.22s ease, background-color 0.22s ease;
	-webkit-appearance: none;
	appearance: none;
}

/*
 * A dot is a <button>, and style.css has a global button:hover that
 * paints one indigo. That rule is more specific than a lone class, so
 * without this an inactive dot flashed indigo on hover.
 */
.tl-home .tl-strip__dot:hover {
	background: rgba(26, 29, 26, 0.45);
}

.tl-strip__dot.is-active {
	width: 22px;
	background: var(--hm-accent);
}

.tl-home .tl-strip__dot.is-active:hover {
	background: var(--hm-accent);
}

/* =========================================================
   9. STRIP RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
	.tl-strip__track { gap: 1rem; }
	.tl-strip__track > .tl-card { flex-basis: calc((100% - 2 * 1rem) / 3); }
}

@media (max-width: 860px) {
	.tl-strip__track > .tl-card { flex-basis: calc((100% - 1rem) / 2); }
}

@media (max-width: 620px) {
	.tl-strip__head { align-items: flex-start; }

	/* Arrows are redundant once the track is thumb-swipeable */
	.tl-strip__nav { display: none; }

	/*
	 * A card and a bit: the sliver of the next one is what tells a
	 * visitor there is more to swipe.
	 *
	 * This used to be done by pulling the track 1.25rem wider than its
	 * container on each side so the cards met the screen edge. That
	 * technique only balances if nothing else adds horizontal padding
	 * anywhere up the tree - and if it is ever off by a pixel, the whole
	 * page scrolls sideways. The peek now comes from the card width
	 * alone, which cannot overflow.
	 */
	.tl-strip__track {
		gap: 0.85rem;
		padding-inline: 0;
		margin-inline: 0;
	}

	.tl-strip__track > .tl-card { flex-basis: 82%; }
}

@media (max-width: 420px) {
	.tl-strip__track > .tl-card { flex-basis: 84%; }
}

/* =========================================================
   10. STRIP MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.tl-strip__track { scroll-behavior: auto; }

	.tl-home .tl-strip__arrow,
	.tl-home .tl-strip__all,
	.tl-strip__dot { transition: none !important; }
}


/* =========================================================
   11. HIGHLIGHTS STRIP

   Sits directly above the footer. Four claims, hairline
   dividers between them, no boxes: the strip is a closing
   note, not another card section competing with the product
   slider above it.
   ========================================================= */

/*
 * The one rule that stays. This band closes the page, so a hairline
 * here reads as the start of the footer rather than as a divider
 * between two content sections.
 */
.tl-usp {
	padding-block: var(--hm-band);
	border-top: 1px solid rgba(26, 29, 26, 0.1);
}

/*
 * The strip was sitting much closer to the content above it than to the
 * footer below. Its own padding is even; the extra came from style.css,
 * which puts margin-top: clamp(2.5rem, 6vw, 4rem) on .site-footer. That
 * margin landed on top of the strip's bottom padding.
 *
 * Removed on the front page only, so the strip's padding is the single
 * thing setting the gap on both sides. Every other page keeps the
 * footer margin it has always had.
 */
.custom-front-page .site-footer {
	margin-top: 0;
}

.tl-usp__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tl-usp__item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0;
	padding: 0.5rem clamp(0.75rem, 2vw, 1.5rem);
}

/* Hairline between columns only, never before the first one */
.tl-usp__item + .tl-usp__item {
	border-left: 1px solid rgba(26, 29, 26, 0.1);
}

.tl-usp__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: #fff;
	border: 1px solid rgba(26, 29, 26, 0.12);
	border-radius: 12px;
	color: var(--hm-ink);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tl-usp__item:hover .tl-usp__icon {
	background: var(--hm-ink);
	border-color: var(--hm-ink);
	color: #fff;
}

.tl-usp__icon svg { width: 21px; height: 21px; }

.tl-usp__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.tl-usp__text strong {
	font-family: var(--display, system-ui, sans-serif);
	font-size: 0.97rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--hm-ink);
}

.tl-usp__text span {
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--ink-soft, #5d625c);
}

/* =========================================================
   12. HIGHLIGHTS RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
	.tl-usp__item { gap: 0.7rem; padding-inline: 0.85rem; }
	.tl-usp__icon { width: 40px; height: 40px; }
	.tl-usp__text strong { font-size: 0.92rem; }
	.tl-usp__text span { font-size: 0.81rem; }
}

/* Two by two. The vertical rule now has to fall between the
   columns, and a horizontal one between the rows. */
@media (max-width: 880px) {
	.tl-usp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.tl-usp__item { padding: 1rem 0.85rem; }

	.tl-usp__item + .tl-usp__item { border-left: 0; }

	.tl-usp__item:nth-child(even) {
		border-left: 1px solid rgba(26, 29, 26, 0.1);
	}

	.tl-usp__item:nth-child(n + 3) {
		border-top: 1px solid rgba(26, 29, 26, 0.1);
	}
}

@media (max-width: 520px) {

	.tl-usp__list { grid-template-columns: 1fr; }

	.tl-usp__item {
		padding: 0.85rem 0;
		border-left: 0 !important;
	}

	.tl-usp__item + .tl-usp__item {
		border-top: 1px solid rgba(26, 29, 26, 0.1);
	}

	.tl-usp__icon { width: 38px; height: 38px; }
	.tl-usp__icon svg { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
	.tl-usp__icon { transition: none !important; }
}


/* =========================================================
   13. FAQ SECTION

   The accordion itself is styled by assets/css/faq.css, which
   is now a component rather than a page. Only the two column
   frame around it lives here.

   Two columns rather than the full width list used on the FAQ
   page: on a home page the heading has to keep working as the
   reader scrolls the answers, and a sticky left column does
   that without repeating itself.
   ========================================================= */

.tl-faq {
	padding-block: var(--hm-band);
}

.tl-faq__layout {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	align-items: start;
	gap: clamp(1.75rem, 4vw, 3.5rem);
}

/* ---------- Left column ---------- */

.tl-faq__aside {
	position: sticky;
	/* Clears the sticky site header */
	top: calc(var(--hm-header) + 24px);
}

.tl-faq__eyebrow {
	margin: 0 0 0.5rem;
	font-family: var(--display, system-ui, sans-serif);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hm-accent);
}

.tl-faq__title {
	margin: 0 0 0.9rem;
	font-family: var(--display, system-ui, sans-serif);
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.035em;
	color: var(--hm-ink);
	text-wrap: balance;
}

.tl-faq__text {
	max-width: 38ch;
	margin: 0 0 1.4rem;
	font-size: 0.99rem;
	line-height: 1.7;
	color: var(--ink-soft, #5d625c);
}

.tl-home .tl-faq__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--hm-ink);
	font-family: var(--display, system-ui, sans-serif);
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	transition: color 0.16s ease, gap 0.16s ease;
}

.tl-home .tl-faq__link:hover {
	color: var(--hm-accent);
	gap: 0.7rem;
}

.tl-faq__link svg { width: 15px; height: 15px; }

/* ---------- Right column ---------- */

.tl-faq__list {
	display: grid;
	gap: 0.7rem;
	min-width: 0;
}

/*
 * The accordion arrives with space above it already on.
 *
 * assets/css/faq.css puts margin-top on .faq-accordion, because on the
 * FAQs page it follows the page header and needs clearing from it. Here
 * it is the second half of a two-part layout whose own gap has already
 * set that distance, so the two were stacking up - which is why the
 * heading and the questions read as separate sections on a phone.
 */
.tl-home .tl-faq__list {
	margin-top: 0;
}

/* =========================================================
   14. FAQ RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {
	.tl-faq__layout { grid-template-columns: 0.9fr 1.1fr; }
	.tl-faq__text { max-width: none; }
}

/* Stacked: the heading scrolls away with the content, so sticky
   would only pin it over the answers */
@media (max-width: 820px) {
	/*
	 * The gap is set on its own once the columns collapse.
	 *
	 * Side by side, that clamp is the space BETWEEN the two columns and
	 * a wide one is right. Stacked, the same value becomes vertical
	 * space between a heading and the questions it introduces - and at
	 * 3.5rem it read as two unrelated sections rather than one.
	 */
	.tl-faq__layout {
		grid-template-columns: 1fr;
		row-gap: 1.1rem;
	}

	.tl-faq__aside {
		position: static;
		top: auto;
	}

	.tl-faq__text { margin-bottom: 1.1rem; }
}

@media (max-width: 520px) {
	.tl-faq__text { font-size: 0.95rem; }
	.tl-faq__list { gap: 0.6rem; }
}


/* =========================================================
   15. LATEST POSTS

   The cards are .tl-post from blog.css. The section carries
   the tl-blog class so those rules and their colour tokens
   apply, which means only the section frame is set here.
   ========================================================= */

/*
 * .tl-blog brings its own vertical padding for the listing page. On the
 * home page the section spacing is set alongside the other bands
 * instead, so it is reset here rather than fought with later.
 */
/*
 * No rule above the section. With every band spaced the same, the gap
 * is what separates them; a line on top of that gap only chopped the
 * page into strips.
 */
.tl-home .tl-blogs {
	padding-block: var(--hm-band);
}

.tl-blogs__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: clamp(1.4rem, 3vw, 2rem);
}

.tl-blogs__heading { min-width: 0; }

.tl-blogs__eyebrow {
	margin: 0 0 0.4rem;
	font-family: var(--display, system-ui, sans-serif);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hm-accent);
}

.tl-blogs__title {
	margin: 0;
	font-family: var(--display, system-ui, sans-serif);
	font-size: clamp(1.7rem, 3.6vw, 2.6rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.035em;
	color: var(--hm-ink);
	text-wrap: balance;
}

.tl-home .tl-blogs__all {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--hm-ink);
	font-family: var(--display, system-ui, sans-serif);
	font-size: 0.88rem;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	transition: color 0.16s ease, gap 0.16s ease;
}

.tl-home .tl-blogs__all:hover {
	color: var(--hm-accent);
	gap: 0.65rem;
}

.tl-blogs__all svg { width: 15px; height: 15px; }

/*
 * Three across. blog.css sets two, because the listing page gives up a
 * column to its sidebar; here the row has the full width.
 */
.tl-home .tl-blogs .tl-posts {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem 1.25rem;
	margin-bottom: 0;
}

/* =========================================================
   16. LATEST POSTS RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {
	.tl-home .tl-blogs .tl-posts { gap: 1.25rem 1rem; }
}

@media (max-width: 860px) {
	.tl-home .tl-blogs .tl-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Two columns and three posts leave a gap in the second row. The
	 * third is dropped rather than left sitting on its own, so the block
	 * always reads as a complete row.
	 */
	.tl-home .tl-blogs .tl-posts > .tl-post:nth-child(3) { display: none; }
}

@media (max-width: 600px) {

	.tl-home .tl-blogs .tl-posts {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	/* One per row, so all three fit without a hole */
	.tl-home .tl-blogs .tl-posts > .tl-post:nth-child(3) { display: block; }

	.tl-blogs__head { align-items: flex-start; }
}


/* =========================================================
   17. STORY SECTION
   ========================================================= */

.tl-story {
	padding-block: var(--hm-band);
}

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

   The reference puts the whole block on a coloured card rather than on
   the page. That is what separates it from the sections above and below
   without needing a rule between them.

   The pattern is three soft radial gradients rather than an image: it
   scales to any width, costs no request, and cannot go blurry. */

.tl-story__panel {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3.5rem);
	border-radius: clamp(16px, 2vw, 28px);
	background:
		radial-gradient(60% 55% at 12% 12%, rgba(168, 64, 47, 0.42) 0%, rgba(168, 64, 47, 0) 62%),
		radial-gradient(45% 45% at 92% 82%, rgba(168, 64, 47, 0.3) 0%, rgba(168, 64, 47, 0) 66%),
		radial-gradient(70% 60% at 68% 4%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 60%),
		linear-gradient(155deg, #2a2f2a 0%, var(--hm-ink) 55%, #101310 100%);
	background-color: var(--hm-ink);
	color: #fff;
}

/* A very faint diagonal weave over the top. Barely visible, but it
   stops the panel reading as a flat block of colour. */
.tl-story__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.022) 0px,
		rgba(255, 255, 255, 0.022) 1px,
		transparent 1px,
		transparent 9px
	);
	pointer-events: none;
}

.tl-story__layout {
	display: grid;
	grid-template-columns: 1fr 0.8fr;
	align-items: center;
	gap: clamp(1.75rem, 4vw, 3.5rem);
}

/* ---------- Left ---------- */

/*
 * The badge is a taped label in the reference. Here it is a small pill
 * with a slight tilt, which gives the same handmade note without
 * borrowing the sticker graphic.
 */
/*
 * A width cap, not just centring.
 *
 * The column is wide, so centring alone left the badge, the title and
 * the cards each finding their own middle with a lot of air between
 * them. Capping the block makes them read as one stack.
 */
.tl-story__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, 27rem);
	margin-inline: auto;
	text-align: center;
}

.tl-story__badge {
	--tl-tape: #ffd84d;
	--tl-tape-edge: #d4a92c;

	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 1.25rem;
	padding: 0.55em 1.3em;
	background: var(--tl-tape);
	border-radius: 10px;
	color: var(--hm-ink);
	font-family: var(--display, system-ui, sans-serif);
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transform: rotate(-2.5deg);

	/*
	 * The edge is a darker shade of the label itself, not the accent.
	 * A madder bar under a yellow label read as a separate object
	 * sticking out from behind it rather than as the label's own
	 * thickness.
	 */
	box-shadow:
		0 3px 0 0 var(--tl-tape-edge),
		0 8px 18px rgba(0, 0, 0, 0.3);
}

/* The pin holding it on, sitting half off the top edge */
.tl-story__pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	margin-top: -0.15em;
	color: var(--hm-ink);
	transform: rotate(-12deg);
}

.tl-story__pin svg { width: 100%; height: 100%; }

.tl-story__title {
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	font-family: var(--display, system-ui, sans-serif);
	font-size: clamp(2.4rem, 6vw, 4.6rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.045em;
	color: #fff;
	text-wrap: balance;
}

.tl-story__stats {
	display: grid;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: center;
}

.tl-story__stat {
	margin: 0;
	padding: 1.15rem 1.75rem;
	background: #fff;
	border: 0;
	border-radius: 999px;
	/* The offset shadow is what gives the reference cards their weight */
	box-shadow: 0 4px 0 0 var(--hm-accent);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tl-story__stat:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 0 0 var(--hm-accent);
}

.tl-story__stat strong {
	display: block;
	font-family: var(--display, system-ui, sans-serif);
	font-size: clamp(1.25rem, 2.3vw, 1.6rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--hm-accent);
}

.tl-story__stat span {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.92rem;
	letter-spacing: 0.02em;
	color: var(--ink-soft, #5d625c);
}

/* ---------- Right: the browser frame ---------- */

.tl-story__media {
	display: flex;
	justify-content: center;
}

.tl-story__frame {
	position: relative;
	width: min(100%, 310px);
	padding: 30px 10px 10px;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
	/* The tilt from the reference, kept small: any more and the browser
	   chrome stops reading as a window */
	transform: rotate(-2deg);
	transition: transform 0.3s ease;
}

.tl-story__frame:hover { transform: rotate(0deg); }

.tl-story__chrome {
	position: absolute;
	top: 11px;
	left: 14px;
	display: flex;
	gap: 6px;
}

.tl-story__chrome i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #e0ded6;
}

.tl-story__chrome i:nth-child(1) { background: #ff5f57; }
.tl-story__chrome i:nth-child(2) { background: #febc2e; }
.tl-story__chrome i:nth-child(3) { background: #28c840; }

.tl-story__screen {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	background: var(--hm-ink);
	/* Vertical, like a phone story */
	aspect-ratio: 9 / 16;
}

.tl-story__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Centre play / pause ----------

   A full-size transparent button, so a click anywhere on the video
   toggles playback. The circle inside is what the visitor sees. */

.tl-home .tl-story__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.tl-home .tl-story__play:hover { background: transparent; }

/*
 * No circle behind it.
 *
 * The reference sets a bare pixel arrow on the frame, which is what
 * makes it look like a cursor rather than a video player chrome. A
 * white shape alone would vanish on a bright frame, so the weight comes
 * from a drop shadow instead of a plate.
 */
.tl-story__play-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	color: #fff;
	filter:
		drop-shadow(0 0 1px rgba(0, 0, 0, 0.55))
		drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.tl-story__play:hover .tl-story__play-icon {
	transform: scale(1.08);
}

.tl-story__play-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Playing: the circle goes, the click target stays */
.tl-story__frame.is-playing .tl-story__play-icon {
	opacity: 0;
	transform: scale(0.8);
	pointer-events: none;
}

/* ---------- Corner controls ---------- */

.tl-home .tl-story__ctrl {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: rgba(26, 29, 26, 0.55);
	border: 0;
	border-radius: 9px;
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background-color 0.18s ease, transform 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.tl-home .tl-story__ctrl:hover {
	background: var(--hm-accent);
	color: #fff;
	transform: scale(1.06);
}

.tl-story__ctrl svg { width: 17px; height: 17px; }

.tl-story__ctrl.is-full { top: 12px; right: 12px; }
.tl-story__ctrl.is-sound { bottom: 12px; right: 12px; }

/* The sound button shows one of two icons, never both */
.tl-story__unmuted { display: none; }

.tl-story__frame.is-unmuted .tl-story__muted { display: none; }
.tl-story__frame.is-unmuted .tl-story__unmuted { display: inline-flex; }

/* =========================================================
   18. STORY RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {
	.tl-story__layout { grid-template-columns: 1fr 0.95fr; gap: 2rem; }
	.tl-story__frame { width: min(100%, 290px); }
}

@media (max-width: 820px) {
	.tl-story__layout {
		grid-template-columns: 1fr;
		gap: 2.25rem;
		justify-items: center;
		text-align: center;
	}

	.tl-story__copy { max-width: 32rem; }

	/* Straight on, because there is no longer a column edge for the
	   tilt to play against */
	.tl-story__frame { transform: none; }
}

@media (max-width: 520px) {

	.tl-story__panel {
		padding: 1.5rem 1.15rem 1.75rem;
		border-radius: 14px;
	}

	.tl-story__frame {
		width: min(100%, 270px);
		padding: 26px 8px 8px;
		border-radius: 14px;
	}

	.tl-story__badge { font-size: 0.78rem; padding: 0.55em 1.2em; }
	.tl-story__stat { padding: 1rem 1.4rem; }

	.tl-story__play-icon { width: 52px; height: 52px; }

	.tl-home .tl-story__ctrl { width: 32px; height: 32px; }
	.tl-story__ctrl.is-full { top: 9px; right: 9px; }
	.tl-story__ctrl.is-sound { bottom: 9px; right: 9px; }
}

@media (prefers-reduced-motion: reduce) {
	.tl-story__frame,
	.tl-story__stat,
	.tl-story__play-icon,
	.tl-home .tl-story__ctrl { transition: none !important; }

	.tl-story__frame:hover { transform: rotate(-2deg); }
	.tl-story__stat:hover { transform: none; }
}


/* =========================================================
   19. BAND SPACING ON SMALL SCREENS

   One override for the whole page, instead of four sections
   each stepping down by a different amount.
   ========================================================= */

@media (max-width: 600px) {
	.tl-home { --hm-band: 1.75rem; }
}


/* =========================================================
   20. OVERFLOW GUARD

   Nothing on this page should ever be wider than the screen.
   Media and tables are the usual culprits, and a grid or flex
   child refuses to shrink below its content unless told it
   may - which is what min-width: 0 does.
   ========================================================= */

.tl-home,
.tl-home section {
	max-width: 100%;
}

/*
 * The slider is capped to the screen, not to its parent.
 *
 * The track only works because its contents are wider than it is: that
 * is what gives it something to scroll. If anything upstream stretches
 * the page - and on this page something does, the console measured it
 * at 2439px against a 426px screen - then .wrap stretches with it, all
 * eight cards fit side by side, and three things break at once: there
 * is nothing left to drag, the snap points never engage, and a track
 * two thousand pixels wide sits on top of the page swallowing taps
 * meant for whatever is underneath.
 *
 * Measuring against the viewport instead of the parent keeps the track
 * the width of the screen whatever the page does around it.
 */
.tl-home .tl-strip > .wrap {
	max-width: 100vw;
}

.tl-home img,
.tl-home video,
.tl-home iframe {
	max-width: 100%;
}

.tl-strip__heading,
.tl-story__copy,
.tl-blogs__heading,
.tl-faq__aside,
.tl-usp__text {
	min-width: 0;
}

/* Long words and URLs break rather than push the layout out */
.tl-story__stat span,
.tl-usp__text span,
.tl-faq__text {
	overflow-wrap: anywhere;
}


/* =========================================================
   21. SLIDER DRAG STATE

   Applied by the script only while a mouse drag is in
   progress.
   ========================================================= */

.tl-strip__track.is-dragging {
	cursor: grabbing;
	/* Without this the drag highlights the product titles instead of
	   moving the track */
	user-select: none;
	-webkit-user-select: none;
	scroll-behavior: auto;
}

.tl-strip__track.is-dragging a,
.tl-strip__track.is-dragging img {
	/* Stops the browser starting its own link or image drag */
	-webkit-user-drag: none;
	pointer-events: none;
}

/* Touch keeps the browser's own panning, which is smoother than
   anything a script can do, so the grab cursor is pointless there */
@media (hover: none) {
	.tl-strip__track { cursor: default; }
}


/* =========================================================
   REELS - WATCH AND BUY

   Five vertical clips. One row on a desktop, 3 + 2 on a
   tablet, one at a time on a phone.
   ========================================================= */

.tl-reels {
	padding-block: var(--hm-band);
}

.tl-reels__head {
	display: flex;
	/* One line of heading against one line of link: baseline puts the two
	   on the same line of type rather than lining up the boxes. */
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.tl-reels__heading {
	min-width: 0;
	max-width: 46rem;
}

.tl-reels__title {
	margin: 0;
	font-family: var(--hm-display);
	font-weight: 800;
	font-size: clamp(1.7rem, 3.6vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--hm-ink);
}

.tl-reels__all {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding-bottom: 2px;
	border-bottom: 2px solid currentColor;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--hm-ink);
	text-decoration: none;
	transition: color 0.18s ease;
}

.tl-reels__all:hover,
.tl-reels__all:focus-visible { color: var(--hm-accent); }
.tl-reels__all svg { width: 17px; height: 17px; }

/* ---------- The row ---------- */

.tl-reels__track {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;

	/* Same lesson as the product slider: a flex container with no width
	   of its own takes the width of its contents, and then there is
	   nothing for overflow to clip. */
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* Five across. The gap is taken out before dividing, or the last one
   wraps on its own. */
.tl-reels__item {
	flex: 0 0 calc((100% - 4rem) / 5);
	min-width: 0;
	margin: 0;
	border-radius: var(--hm-radius, 14px);
	overflow: hidden;
	background: #11120f;
	box-shadow: 0 10px 30px rgba(26, 29, 26, 0.12);
}

.tl-reels__video {
	display: block;
	width: 100%;
	/* Vertical clips. A fixed ratio keeps the row level even while the
	   files are still loading, so nothing jumps as they arrive. */
	aspect-ratio: 9 / 16;
	object-fit: cover;

	/* There is no controls attribute, and this makes sure a tap cannot
	   summon the browser's own overlay either. */
	pointer-events: none;
}

.tl-reels__dots { display: none; }

/*
 * The copies exist only for the carousel loop.
 *
 * Above 1024 the row wraps rather than scrolling, so ten items become
 * two rows of the same five clips. They are hidden rather than not
 * created, because the width can change after load - rotating a tablet,
 * dragging a window - and rebuilding the whole row on every resize would
 * restart all five videos.
 */
@media (min-width: 1025px) {
	.tl-reels__item.is-clone { display: none; }
}

/* ---------- Tablet and phone: a carousel ----------

   Below 1024 the five stop fitting across, and wrapping them 3 + 2 left
   a half-empty second row with nothing to do. They scroll instead, the
   same way on both sizes - three visible on a tablet, one on a phone,
   with the next always showing at the edge so it is clearly swipeable.
   ------------------------------------------------- */

@media (max-width: 1024px) {
	.tl-reels__track {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 0.85rem;
		overflow-x: auto;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	.tl-reels__track::-webkit-scrollbar { display: none; }

	/*
	 * No scroll-snap here.
	 *
	 * The loop works by scrolling into a second, cloned set and then
	 * jumping back without animation. Snapping fights that jump - it
	 * drags the track to the nearest card afterwards, and the seam shows.
	 */
	.tl-reels__item {
		/* A shade under a third, so the fourth peeks in */
		flex: 0 0 31%;
	}

	.tl-reels__dots {
		display: flex;
		justify-content: center;
		gap: 7px;
		margin-top: 1rem;
	}

	.tl-reels__dot {
		width: 7px;
		height: 7px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: var(--hm-rule, #d8d6cd);
		transition: width 0.25s ease, background 0.25s ease;
	}

	.tl-reels__dot.is-active {
		width: 20px;
		background: var(--hm-accent);
	}
}

@media (max-width: 720px) {
	.tl-reels__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	/* One at a time, with the next one's edge showing */
	.tl-reels__item {
		flex: 0 0 82%;
	}

	.tl-reels__dots {
		display: flex;
		justify-content: center;
		gap: 7px;
		margin-top: 1rem;
	}

	.tl-reels__dot {
		width: 7px;
		height: 7px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: var(--hm-rule, #d8d6cd);
		transition: width 0.25s ease, background 0.25s ease;
	}

	.tl-reels__dot.is-active {
		width: 20px;
		background: var(--hm-accent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tl-reels__track { scroll-behavior: auto; }
}