/*!
 * Twenty Twenty-Five Child — Premium Design System
 * Black / White / Yellow — Networking & Computer Hardware
 * -------------------------------------------------------------------
 * Layered on top of the parent theme's block styles (which already read
 * these same color slugs from theme.json). Nothing here overrides core
 * block editor output — it only styles the custom sections/templates
 * this child theme adds (hero slider, homepage sections, cards, forms).
 */

/* ==========================================================================
   0. Typography  —  Google Sans
   The family is requested by name first ("Google Sans" / "Google Sans Text"),
   so any device or licensed install that actually has it uses the real face.
   Everywhere else the stack falls through to Roboto, which is loaded from
   Google Fonts in inc/class-assets.php (with preconnect + display=swap) and
   is the closest freely-licensed match to Google Sans' proportions.

   One family for the whole site: --ttfc-font-display and --ttfc-font-text
   both resolve to it, and every component already reads those two tokens, so
   headings, body copy, buttons, cards, WooCommerce and the footer all change
   from the single definition below. The block editor and any parent-theme /
   plugin markup that doesn't read the tokens is covered by the global rule
   in section 2.
   ========================================================================== */

/* ==========================================================================
   1. Design Tokens  —  Restrained Luxe
   Graphite ink · bone surface · champagne-gold accent · brushed-metal
   gradients · hairline borders. Every component reads these tokens, so the
   whole site (header, footer, shop, single product, cart, checkout, about,
   contact) shifts palette from here — nothing hardcodes a brand hex.
   ========================================================================== */
:root {
	/* Ink / neutrals */
	--ttfc-black: #0b0d10;          /* graphite-black */
	--ttfc-black-soft: #14171c;
	--ttfc-black-elevated: #1c2027;
	--ttfc-white: #ffffff;
	--ttfc-off-white: #f7f6f3;      /* warm bone */

	/* Champagne / metallic gold accent scale */
	--ttfc-yellow: #c9a24b;         /* primary accent — fills, borders, on-dark text */
	--ttfc-yellow-dark: #94722a;    /* deeper bronze — accent-as-text on light + hovers (AA-safe) */
	--ttfc-gold-light: #e7cd8f;     /* champagne highlight — top of metallic gradients */
	--ttfc-gold-deep: #8a6a24;
	--ttfc-gold-gradient: linear-gradient(135deg, #e7cd8f 0%, #c9a24b 46%, #94722a 100%);
	--ttfc-gold-gradient-soft: linear-gradient(135deg, rgba(231, 205, 143, 0.16), rgba(201, 162, 75, 0.06));

	--ttfc-gray-500: #6b7079;
	--ttfc-gray-300: #d5d7db;
	--ttfc-border: rgba(11, 13, 16, 0.10);
	--ttfc-border-strong: rgba(11, 13, 16, 0.16);
	--ttfc-border-light: rgba(255, 255, 255, 0.12);

	/* Typography — one Google Sans stack for the entire site. Both tokens are
	   kept (rather than collapsed into one) so every existing
	   `font-family: var(--ttfc-font-display)` rule keeps working, and so a
	   future design can split display/text again from here alone. */
	--ttfc-font-sans: "Google Sans", "Google Sans Text", "Product Sans", Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--ttfc-font-display: var(--ttfc-font-sans);
	--ttfc-font-text: var(--ttfc-font-sans);

	--ttfc-radius-sm: 10px;
	--ttfc-radius-md: 18px;
	--ttfc-radius-lg: 26px;
	--ttfc-radius-pill: 999px;

	/* Softer, more layered shadows — luxe reads as depth, not weight */
	--ttfc-shadow-sm: 0 1px 2px rgba(11, 13, 16, 0.04), 0 4px 14px rgba(11, 13, 16, 0.06);
	--ttfc-shadow-md: 0 6px 18px rgba(11, 13, 16, 0.07), 0 18px 44px rgba(11, 13, 16, 0.11);
	--ttfc-shadow-lg: 0 12px 30px rgba(11, 13, 16, 0.09), 0 34px 74px rgba(11, 13, 16, 0.16);
	--ttfc-shadow-glow: 0 0 0 1px rgba(201, 162, 75, 0.38), 0 12px 34px rgba(201, 162, 75, 0.22);

	--ttfc-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ttfc-speed-fast: 0.2s;
	--ttfc-speed: 0.4s;
	--ttfc-speed-slow: 0.8s;

	--ttfc-container: 1340px;
	--ttfc-gutter: clamp(1.25rem, 4vw, 3rem);

	/* Header height, as a token so the bar and the padding that pushes page
	   content out from under it can never disagree. The scrolled state
	   re-declares this on the header element only, so :root keeps the resting
	   height and the body offset below stays a fixed, non-jumping value. */
	--ttfc-header-h: 84px;

	/* Adaptive tokens — page chrome only. Deliberately-dark accent bands
	   (hero overlay, stats, newsletter, footer, page-header) stay on the
	   fixed tokens above and are NOT part of this light/dark system. */
	--ttfc-bg: var(--ttfc-off-white);
	--ttfc-bg-alt: #efece6;         /* one shade deeper than bg, so tinted bands actually read */
	--ttfc-surface: var(--ttfc-white);
	--ttfc-text: #181b1f;
	--ttfc-text-muted: var(--ttfc-gray-500);
	--ttfc-border-c: var(--ttfc-border);
	--ttfc-header-bg: rgba(247, 246, 243, 0.82);
	--ttfc-header-glass: rgba(255, 255, 255, 0.14);
	--ttfc-header-glass-border: rgba(255, 255, 255, 0.28);
	--ttfc-header-text: var(--ttfc-white);
	--ttfc-accent-ink: var(--ttfc-yellow-dark);
	color-scheme: light;
}

:root[data-theme="dark"] {
	--ttfc-bg: #0b0d10;
	--ttfc-bg-alt: #14171c;
	--ttfc-surface: #16191f;
	--ttfc-text: #ece9e2;
	--ttfc-text-muted: #9aa0a8;
	--ttfc-border-c: var(--ttfc-border-light);
	--ttfc-border-strong: rgba(255, 255, 255, 0.2);
	--ttfc-header-bg: rgba(11, 13, 16, 0.8);
	--ttfc-header-glass: rgba(255, 255, 255, 0.06);
	--ttfc-header-glass-border: rgba(255, 255, 255, 0.14);
	--ttfc-header-text: var(--ttfc-white);
	--ttfc-accent-ink: var(--ttfc-gold-light);
	color-scheme: dark;
}

body {
	background: var(--ttfc-bg);
	color: var(--ttfc-text);
	font-family: var(--ttfc-font-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color var(--ttfc-speed) var(--ttfc-ease), color var(--ttfc-speed) var(--ttfc-ease);
}

/* Headings keep the tight tracking that gives the type its engineered feel;
   the family itself is the same Google Sans stack as the body copy. */
h1, h2, h3, h4, h5,
.ttfc-hero__title,
.ttfc-section__title,
.ttfc-stat__number,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--ttfc-font-display);
	letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   Global type coverage.

   The child's own components all read the two font tokens, but core blocks,
   the parent theme, WooCommerce templates and any plugin markup resolve
   WordPress' generated `--wp--preset--font-family--*` variables instead.
   Re-pointing those variables at the Google Sans stack (rather than chasing
   individual selectors with !important) is what makes the change genuinely
   site-wide: anything still asking for "Manrope" or the body/heading presets
   now gets Google Sans, in the front end and in the block editor alike.

   WordPress has emitted these presets on :root in newer versions and on body
   in older ones, so both are covered — and each selector is written one step
   more specific than core's (html:root over :root, html body over body) so
   the override holds no matter which order the two stylesheets print in.
   -------------------------------------------------------------------------- */
html:root,
html body,
.editor-styles-wrapper {
	--wp--preset--font-family--manrope: var(--ttfc-font-sans);
	--wp--preset--font-family--body: var(--ttfc-font-sans);
	--wp--preset--font-family--heading: var(--ttfc-font-sans);
	--wp--preset--font-family--system-font: var(--ttfc-font-sans);
	--wp--preset--font-family--google-sans: var(--ttfc-font-sans);
}

/* Form controls don't inherit the document font on their own, and the
   .wp-site-blocks / editor wrappers carry the parent theme's own family. */
.wp-site-blocks,
.editor-styles-wrapper,
button,
input,
select,
optgroup,
textarea,
.wp-block-button__link,
.button,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	font-family: var(--ttfc-font-sans);
}

/* ==========================================================================
   2. Base / Accessibility
   ========================================================================== */
html {
	scroll-behavior: smooth;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--ttfc-yellow);
	outline-offset: 3px;
	border-radius: 2px;
}

img {
	max-width: 100%;
	height: auto;
}

.ttfc-placeholder-img {
	background: var(--ttfc-bg-alt);
	object-fit: contain;
	padding: 1rem;
}

/* ==========================================================================
   3. Layout Utilities
   ========================================================================== */
.ttfc-container {
	max-width: var(--ttfc-container);
	margin-inline: auto;
	padding-inline: var(--ttfc-gutter);
}

.ttfc-section {
	padding-block: clamp(3rem, 7vw, 6.5rem);
}

.ttfc-section__head {
	max-width: 640px;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.ttfc-section__head--center {
	max-width: 100%;
	text-align: center;
	margin-inline: auto;
}

.ttfc-section__title {
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 0.6rem;
	color: var(--ttfc-text);
}

/* Champagne kicker above each section title — a small, consistent luxe mark. */
.ttfc-section__head .ttfc-section__title::before {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	margin-bottom: 1rem;
	border-radius: var(--ttfc-radius-pill);
	background: var(--ttfc-gold-gradient);
}

.ttfc-section__head--center .ttfc-section__title::before {
	margin-inline: auto;
}

.ttfc-section__subtitle {
	color: var(--ttfc-text-muted);
	font-size: 1.05rem;
	margin: 0 0 1rem;
	line-height: 1.65;
}

.ttfc-section__head--center .ttfc-section__subtitle {
	max-width: 62ch;
	margin-inline: auto;
}

/* For a section head placed on one of the deliberately-dark bands (the stats
   strip), where the default --ttfc-text ink would be near-invisible. */
.ttfc-section__head--light .ttfc-section__title {
	color: var(--ttfc-white);
}

.ttfc-section__head--light .ttfc-section__subtitle {
	color: rgba(255, 255, 255, 0.72);
}

.ttfc-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--ttfc-text);
	border-bottom: 2px solid var(--ttfc-yellow);
	padding-bottom: 2px;
	transition: gap var(--ttfc-speed-fast) var(--ttfc-ease), color var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-link-arrow:hover {
	gap: 0.7rem;
	color: var(--ttfc-accent-ink);
}

.ttfc-link-arrow svg {
	width: 16px;
	height: 16px;
}

/* Social icon row — shared by the footer and the Contact page's aside, so it
   lives with the utilities rather than inside either page's own section. */
.ttfc-social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.ttfc-social-links__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--ttfc-black);
	color: var(--ttfc-white);
	transition: background-color var(--ttfc-speed-fast) var(--ttfc-ease), color var(--ttfc-speed-fast) var(--ttfc-ease), transform var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-social-links__item:hover {
	background: var(--ttfc-gold-gradient);
	color: var(--ttfc-black);
	transform: translateY(-3px);
}

/* On a dark surface the solid black tile disappears into the card, so in dark
   mode the resting state becomes an outlined chip instead. The footer is a
   fixed-dark band in both themes and is unaffected. */
:root[data-theme="dark"] .ttfc-contact-panel .ttfc-social-links__item {
	background: var(--ttfc-bg-alt);
	border: 1px solid var(--ttfc-border-c);
	color: var(--ttfc-text);
}

:root[data-theme="dark"] .ttfc-contact-panel .ttfc-social-links__item:hover {
	background: var(--ttfc-gold-gradient);
	border-color: transparent;
	color: var(--ttfc-black);
}

.ttfc-social-links__item svg {
	width: 18px;
	height: 18px;
}

/* Glassmorphism panel, used on hero content / newsletter / contact form.
   A faint top highlight + inset hairline give it the polished, lit-edge
   look of frosted glass rather than a flat translucent box. */
.ttfc-glass {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%),
		rgba(255, 255, 255, 0.62);
	backdrop-filter: blur(20px) saturate(165%);
	-webkit-backdrop-filter: blur(20px) saturate(165%);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--ttfc-radius-lg);
	box-shadow: var(--ttfc-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Scroll-reveal: JS toggles .is-visible via IntersectionObserver.
   Progressive enhancement — content stays fully visible unless the tiny
   inline script in wp_head confirms JS is available (adds html.js). */
.ttfc-reveal {
	opacity: 1;
	transform: none;
}

html.js .ttfc-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity var(--ttfc-speed-slow) var(--ttfc-ease), transform var(--ttfc-speed-slow) var(--ttfc-ease);
	transition-delay: var(--ttfc-delay, 0ms);
}

html.js .ttfc-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.ttfc-empty-state {
	text-align: center;
	color: var(--ttfc-text-muted);
	padding: 3rem 1rem;
}

/* ==========================================================================
   4. Buttons & Badges
   ========================================================================== */
.ttfc-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.95rem 2rem;
	border-radius: var(--ttfc-radius-sm);
	font-family: var(--ttfc-font-display);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	overflow: hidden;
	transition: transform var(--ttfc-speed-fast) var(--ttfc-ease), box-shadow var(--ttfc-speed-fast) var(--ttfc-ease), background-color var(--ttfc-speed-fast) var(--ttfc-ease), color var(--ttfc-speed-fast) var(--ttfc-ease);
}

/* Brushed-metal primary: champagne gold gradient with a quiet sheen that
   sweeps across on hover — the one moment of overt luxe on the page. */
.ttfc-btn--primary {
	background: var(--ttfc-gold-gradient);
	color: #1c1509;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), var(--ttfc-shadow-sm);
	height: 60px;
}

.ttfc-btn--primary::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.55) 12%, transparent 40%);
	transform: translateX(-120%);
	transition: transform var(--ttfc-speed-slow) var(--ttfc-ease);
	pointer-events: none;
}

.ttfc-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: var(--ttfc-shadow-glow);
	color: #1c1509;
}

.ttfc-btn--primary:hover::after {
	transform: translateX(120%);
}

.ttfc-btn--outline {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.ttfc-btn--outline:hover {
	background: rgba(255, 255, 255, 0.12);
	transform: translateY(-2px);
	box-shadow: var(--ttfc-shadow-glow);
}

.ttfc-btn--small {
	padding: 0.6rem 1.25rem;
	font-size: 0.85rem;
	width: 100%;
}

/* Icons inside buttons, everywhere — this used to be scoped to the hero's
   action row only, which left an icon in any other button rendering at the
   SVG's own intrinsic size. */
.ttfc-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-btn:hover svg {
	transform: translateX(2px);
}

/* Ripple click feedback (initRipple appends .ttfc-ripple into the button).
   Buttons that receive it are position:relative + overflow:hidden already. */
.ttfc-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	transform: scale(0);
	opacity: 0.7;
	pointer-events: none;
	animation: ttfc-ripple 0.65s var(--ttfc-ease);
	z-index: 1;
}

@keyframes ttfc-ripple {
	to { transform: scale(2.4); opacity: 0; }
}

.ttfc-badge {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	z-index: 2;
	padding: 0.3rem 0.75rem;
	border-radius: var(--ttfc-radius-pill);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ttfc-badge--sale {
	background: var(--ttfc-black);
	color: var(--ttfc-yellow);
}

/* ==========================================================================
   5. Cinematic Hero
   Full-viewport stage: parallax background + drifting aurora light pools +
   canvas particle field + floating product "renders" + staggered glass
   content. No WebGL, no libraries — canvas 2D + CSS transforms + rAF only.
   ========================================================================== */
.ttfc-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
	isolation: isolate;
	background: #06080b;
	color: var(--ttfc-white);
	/* Mouse-parallax signals, set by initHeroCinematic() in the range -1..1. */
	--hero-mx: 0;
	--hero-my: 0;
}

/* Deep background image — slightly oversized so parallax never reveals an edge. */
.ttfc-hero__bg {
	position: absolute;
	inset: -6%;
	z-index: 0;
	background-size: cover;
	background-position: center;
	transform: translate3d(calc(var(--hero-mx) * -18px), calc(var(--hero-my) * -18px), 0) scale(1.06);
	transition: transform 0.6s var(--ttfc-ease);
	will-change: transform;
}

/* Cinematic scrim: darken the text side + a soft vignette for depth. */
.ttfc-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(95deg, rgba(6, 8, 11, 0.94) 0%, rgba(6, 8, 11, 0.66) 40%, rgba(6, 8, 11, 0.22) 70%, rgba(6, 8, 11, 0.5) 100%),
		radial-gradient(130% 100% at 50% 0%, transparent 52%, rgba(6, 8, 11, 0.66) 100%);
}

/* Aurora — slow-drifting champagne / cool light pools behind the content. */
.ttfc-hero__aurora {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.ttfc-hero__aurora span {
	position: absolute;
	border-radius: 50%;
	filter: blur(72px);
	opacity: 0.55;
	transform: translate3d(calc(var(--hero-mx) * 26px), calc(var(--hero-my) * 26px), 0);
	transition: transform 0.8s var(--ttfc-ease);
}

.ttfc-hero__aurora span:nth-child(1) {
	width: 46vw;
	height: 46vw;
	top: -12%;
	right: -6%;
	background: radial-gradient(circle, rgba(201, 162, 75, 0.55), transparent 66%);
	animation: ttfc-aurora 17s ease-in-out infinite;
}

.ttfc-hero__aurora span:nth-child(2) {
	width: 40vw;
	height: 40vw;
	bottom: -16%;
	left: -8%;
	background: radial-gradient(circle, rgba(120, 150, 190, 0.32), transparent 66%);
	animation: ttfc-aurora 22s ease-in-out infinite reverse;
}

.ttfc-hero__aurora span:nth-child(3) {
	width: 26vw;
	height: 26vw;
	top: 28%;
	left: 42%;
	background: radial-gradient(circle, rgba(231, 205, 143, 0.26), transparent 66%);
	animation: ttfc-aurora 26s ease-in-out infinite;
}

@keyframes ttfc-aurora {
	0%, 100% { translate: 0 0; }
	50% { translate: 3% -4%; }
}

.ttfc-hero__particles {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.ttfc-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
	padding-block: clamp(6rem, 13vh, 9rem);
}

.ttfc-hero__content {
	max-width: 640px;
	transform: translate3d(calc(var(--hero-mx) * 7px), calc(var(--hero-my) * 7px), 0);
	transition: transform 0.6s var(--ttfc-ease);
}

/* Staggered entrance — runs on load once html.js is present (set synchronously
   in <head>), so it needs no per-page JS and can't leave content hidden. With
   JS off, or under reduced-motion (global rule zeroes animation), content just
   shows immediately. */
[data-hero-stagger] { opacity: 1; }

html.js .ttfc-hero [data-hero-stagger] {
	opacity: 0;
	animation: ttfc-hero-in 0.9s var(--ttfc-ease) forwards;
	animation-delay: var(--stagger, 0ms);
}

@keyframes ttfc-hero-in {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: translateY(0); }
}

.ttfc-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-family: var(--ttfc-font-display);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--ttfc-yellow);
	margin: 0 0 1.2rem;
}

.ttfc-hero__eyebrow::before {
	content: "";
	width: 30px;
	height: 2px;
	background: var(--ttfc-gold-gradient);
}

.ttfc-hero__title {
	font-family: var(--ttfc-font-display);
	font-size: clamp(2.6rem, 5.6vw, 5rem);
	line-height: 1.02;
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 0 0 1.3rem;
	color: var(--ttfc-white);
	text-wrap: balance;
}

.ttfc-hero__desc {
	font-size: clamp(1.02rem, 1.4vw, 1.2rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
	margin: 0 0 2.2rem;
	max-width: 48ch;
}

.ttfc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 2.6rem;
}

.ttfc-hero__actions .ttfc-btn--outline {
	color: var(--ttfc-white);
	border-color: rgba(255, 255, 255, 0.45);
}

.ttfc-hero__actions .ttfc-btn svg {
	width: 16px;
	height: 16px;
	transition: transform var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-hero__actions .ttfc-btn:hover svg {
	transform: translateX(4px);
}

/* Animated trust stats. */
.ttfc-hero__trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.ttfc-hero__trust-item {
	display: flex;
	flex-direction: column;
	position: relative;
}

.ttfc-hero__trust-item + .ttfc-hero__trust-item::before {
	content: "";
	position: absolute;
	left: calc(-1 * clamp(0.75rem, 2vw, 1.5rem));
	top: 10%;
	bottom: 10%;
	width: 1px;
	background: rgba(255, 255, 255, 0.16);
}

.ttfc-hero__trust-num {
	font-family: var(--ttfc-font-display);
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	font-weight: 800;
	line-height: 1;
	color: var(--ttfc-white);
	letter-spacing: -0.02em;
}

.ttfc-hero__trust-label {
	margin-top: 0.45rem;
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.6);
}

/* Stage — floating product "renders" in frosted-glass panels. */
.ttfc-hero__stage {
	position: relative;
	height: clamp(340px, 46vh, 540px);
	transform: translate3d(calc(var(--hero-mx) * -16px), calc(var(--hero-my) * -16px), 0);
	transition: transform 0.6s var(--ttfc-ease);
	perspective: 1200px;
}

.ttfc-hero__stage-ring {
	position: absolute;
	inset: 8% 12%;
	border-radius: 50%;
	border: 1px solid rgba(201, 162, 75, 0.28);
	box-shadow: 0 0 80px rgba(201, 162, 75, 0.12) inset;
	animation: ttfc-spin 40s linear infinite;
}

@keyframes ttfc-spin {
	to { transform: rotate(360deg); }
}

.ttfc-hero__render {
	position: absolute;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--ttfc-radius-lg);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04));
	border: 1px solid rgba(255, 255, 255, 0.24);
	backdrop-filter: blur(14px) saturate(150%);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	box-shadow: var(--ttfc-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	padding: clamp(0.75rem, 2vw, 1.25rem);
	transform-style: preserve-3d;
	/* Float animates the individual translate/rotate properties, leaving
	   `transform` free for pointer tilt (set by initTiltCards) — they compose. */
	transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
	transition: transform 0.3s var(--ttfc-ease);
	animation: ttfc-float 7s ease-in-out infinite;
	animation-delay: calc(var(--i) * -1.7s);
	will-change: transform, translate;
}

.ttfc-hero__render.is-tilting {
	transition: none;
}

.ttfc-hero__render img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.55));
	pointer-events: none;
}

.ttfc-hero__render--1 { width: 54%; height: 54%; top: 4%; left: 6%; z-index: 3; }
.ttfc-hero__render--2 { width: 40%; height: 40%; top: 0; right: 2%; z-index: 2; }
.ttfc-hero__render--3 { width: 46%; height: 46%; bottom: 2%; right: 12%; z-index: 3; }
.ttfc-hero__render--4 { width: 34%; height: 34%; bottom: 8%; left: 0; z-index: 2; }

@keyframes ttfc-float {
	0%, 100% { translate: 0 0; rotate: -0.6deg; }
	50% { translate: 0 -18px; rotate: 0.6deg; }
}

/* Scroll cue. */
.ttfc-hero__scroll {
	position: absolute;
	z-index: 3;
	bottom: clamp(1rem, 3vh, 2rem);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	background: transparent;
	border: 0;
	padding: 0.5rem;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--ttfc-font-display);
	font-size: 0.66rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	transition: color var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-hero__scroll:hover { color: var(--ttfc-yellow); }

.ttfc-hero__scroll-line {
	position: relative;
	width: 1px;
	height: 46px;
	background: rgba(255, 255, 255, 0.35);
	overflow: hidden;
}

.ttfc-hero__scroll-line::after {
	content: "";
	position: absolute;
	top: -60%;
	left: 0;
	width: 100%;
	height: 60%;
	background: var(--ttfc-gold-gradient);
	animation: ttfc-scroll-run 1.8s var(--ttfc-ease) infinite;
}

@keyframes ttfc-scroll-run {
	0% { transform: translateY(0); }
	100% { transform: translateY(280%); }
}

@media (max-width: 980px) {
	.ttfc-hero__inner { grid-template-columns: 1fr; }
	.ttfc-hero__stage { display: none; }
	.ttfc-hero { min-height: 92svh; }
}

@media (max-width: 560px) {
	.ttfc-hero__trust { gap: 1.5rem; }
	.ttfc-hero__trust-item + .ttfc-hero__trust-item::before { display: none; }
}

/* ==========================================================================
   6. Featured Collections
   ========================================================================== */
/* Shopify-style vertical collection cards: a cover image on top, then the
   title + link below on a solid surface. Responsive auto-fill grid (no fixed
   column counts) so it reflows 1→4 across at every width. */
/* 4-up slider. `--per` (cards per view) drives each card's flex-basis and
   steps down responsively; the track is a scroll-snap scroller driven by drag
   or the prev/next arrows (initCollectionsSlider). */
.ttfc-collections-slider {
	position: relative;
}

.ttfc-collections__track {
	--per: 4;
	--gap: clamp(1rem, 1.6vw, 1.75rem);
	display: flex;
	gap: var(--gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	padding-block: 0.75rem 1.5rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
	overscroll-behavior-x: contain;
}

.ttfc-collections__track::-webkit-scrollbar { display: none; }
.ttfc-collections__track.is-dragging { cursor: grabbing; }
.ttfc-collections__track.is-dragging .ttfc-collection-card { transition: none; }

.ttfc-collections__track .ttfc-collection-card {
	flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
	scroll-snap-align: start;
}

@media (max-width: 1200px) { .ttfc-collections__track { --per: 3; } }
@media (max-width: 820px)  { .ttfc-collections__track { --per: 2; } }
@media (max-width: 560px)  { .ttfc-collections__track { --per: 1.2; } }

/* Prev/next arrows, centred on the image band. */
.ttfc-collections__nav {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	z-index: 2;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--ttfc-border-c);
	background: var(--ttfc-surface);
	color: var(--ttfc-text);
	box-shadow: var(--ttfc-shadow-md);
	cursor: pointer;
	transition: background-color var(--ttfc-speed-fast) var(--ttfc-ease), color var(--ttfc-speed-fast) var(--ttfc-ease), opacity var(--ttfc-speed-fast) var(--ttfc-ease), transform var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-collections__nav svg { width: 20px; height: 20px; }
.ttfc-collections__nav:hover { background: var(--ttfc-yellow); color: var(--ttfc-black); }
.ttfc-collections__nav--prev { left: -12px; }
.ttfc-collections__nav--next { right: -12px; }

.ttfc-collections__nav:disabled {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 820px) {
	.ttfc-collections__nav { display: none; }
}

.ttfc-collection-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ttfc-surface);
	border: 1px solid var(--ttfc-border-c);
	border-radius: var(--ttfc-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: var(--ttfc-text);
	box-shadow: var(--ttfc-shadow-sm);
	transition: transform var(--ttfc-speed) var(--ttfc-ease), box-shadow var(--ttfc-speed) var(--ttfc-ease), border-color var(--ttfc-speed) var(--ttfc-ease);
}

.ttfc-collection-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--ttfc-shadow-lg);
	border-color: var(--ttfc-border-strong);
}

/* Fixed-ratio media box + object-fit:cover keeps every image uniform and
   fully filled regardless of its native dimensions. */
.ttfc-collection-card__media {
	display: block;
	aspect-ratio: 5 / 4;
	min-height: 260px;
	overflow: hidden;
	background: var(--ttfc-bg-alt);
}

.ttfc-collection-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ttfc-speed-slow) var(--ttfc-ease);
}

.ttfc-collection-card:hover .ttfc-collection-card__media img {
	transform: scale(1.06);
}

.ttfc-collection-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1.4rem 1.6rem 1.6rem;
	flex: 1;
}

.ttfc-collection-card__title {
	font-family: var(--ttfc-font-display);
	font-size: clamp(1.25rem, 1.8vw, 1.55rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--ttfc-text);
}

.ttfc-collection-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: auto;
	color: var(--ttfc-yellow-dark);
	font-weight: 600;
	font-size: 0.9rem;
	transition: gap var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-collection-card:hover .ttfc-collection-card__cta {
	gap: 0.6rem;
}

.ttfc-collection-card__cta svg {
	width: 14px;
	height: 14px;
}

/* ==========================================================================
   7. Featured Products
   ========================================================================== */
.ttfc-products__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 2vw, 1.75rem);
}

.ttfc-product-card {
	/* ul.products is a CSS Grid; grid items default to a content-based
	   minimum width, not 0 (same class of bug documented on the single
	   product gallery/summary columns) — an enterprise hardware SKU/model
	   number long enough to be one unbroken token (e.g. "WS-C2960X-24TS-LL")
	   would otherwise force this card's track wider than its neighbors and
	   throw off the whole row's alignment. */
	min-width: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ttfc-surface);
	border: 1px solid var(--ttfc-border-c);
	border-radius: var(--ttfc-radius-md);
	overflow: hidden;
	box-shadow: var(--ttfc-shadow-sm);
	transition: transform var(--ttfc-speed) var(--ttfc-ease), box-shadow var(--ttfc-speed) var(--ttfc-ease), background-color var(--ttfc-speed) var(--ttfc-ease), border-color var(--ttfc-speed) var(--ttfc-ease);
}

/* A hairline champagne bar wipes across the top edge on hover — a small,
   restrained signature that ties the card to the brand accent. */
.ttfc-product-card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--ttfc-gold-gradient);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--ttfc-speed) var(--ttfc-ease);
	z-index: 4;
	pointer-events: none;
}

.ttfc-product-card:hover::after,
.ttfc-product-card:focus-within::after {
	transform: scaleX(1);
}

.ttfc-product-card:hover {
	transform: translateY(-8px);
	border-color: var(--ttfc-border-strong);
	box-shadow: var(--ttfc-shadow-lg);
}

/* Pointer 3D tilt (initTiltCards) — composed with the hover lift. While the
   pointer is moving we drop the transition so the card tracks the cursor;
   on leave, the class is removed and it eases back. */
.ttfc-product-card.is-tilting {
	transform: translateY(-8px) perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
	transition: box-shadow var(--ttfc-speed) var(--ttfc-ease), border-color var(--ttfc-speed) var(--ttfc-ease);
}

.ttfc-product-card__media {
	position: relative;
	display: block;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
	background: var(--ttfc-bg-alt);
	overflow: hidden;
}

/* Enterprise hardware photography reads best fully visible on a neutral
   backdrop (ports/connectors intact) rather than tightly cropped — so the
   image is inset and "contain" fitted like Apple/ASUS/Cisco listing pages,
   not cover-cropped like a lifestyle/fashion card. Generous but not overly
   padded, so the product still reads as large and prominent. */
.ttfc-product-card__media img {
	position: absolute;
	inset: 1.1rem;
	object-fit: contain;
	transition: transform var(--ttfc-speed-slow) var(--ttfc-ease);
}

.ttfc-product-card:hover .ttfc-product-card__media img {
	transform: scale(1.06);
}

.ttfc-product-card__body {
	flex: 1;
	padding: 1.5rem 1.5rem 1.65rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.ttfc-product-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	overflow-wrap: break-word;
	word-break: break-word;
	min-height: 2.6em;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.ttfc-product-card__title a {
	color: var(--ttfc-text);
	text-decoration: none;
}

.ttfc-product-card__title a:hover {
	color: var(--ttfc-yellow-dark);
}

.ttfc-product-card__price {
	font-weight: 700;
	color: var(--ttfc-text);
}

.ttfc-product-card__price del {
	color: var(--ttfc-text-muted);
	font-weight: 400;
	margin-right: 0.4rem;
}

.ttfc-product-card__price ins {
	text-decoration: none;
	color: var(--ttfc-yellow-dark);
}

/* ==========================================================================
   8. Brands
   ========================================================================== */
.ttfc-brands__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

.ttfc-brand-tile {
	width: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter var(--ttfc-speed) var(--ttfc-ease), opacity var(--ttfc-speed) var(--ttfc-ease), transform var(--ttfc-speed) var(--ttfc-ease);
}

.ttfc-brand-tile:hover {
	filter: grayscale(0);
	opacity: 1;
	transform: translateY(-3px);
}

.ttfc-brand-tile img {
	max-height: 60px;
	width: auto;
	margin-inline: auto;
}

.ttfc-brands__grid--page {
	justify-content: flex-start;
}

/* Infinite logo marquee (homepage). Logos are duplicated in the markup, so a
   translateX(-50%) loops seamlessly. Trailing space is a per-tile margin (not
   a flex gap) so -50% lands exactly on one set boundary. Edge fade via mask;
   pauses on hover. */
.ttfc-brands__marquee {
	position: relative;
	overflow: hidden;
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--ttfc-gold-gradient-soft);
	border-block: 1px solid var(--ttfc-border-c);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ttfc-brands__track {
	display: flex;
	width: max-content;
	align-items: center;
	animation: ttfc-marquee 38s linear infinite;
}

.ttfc-brands__marquee:hover .ttfc-brands__track,
.ttfc-brands__marquee:focus-within .ttfc-brands__track {
	animation-play-state: paused;
}

.ttfc-brands__track .ttfc-brand-tile {
	flex: 0 0 auto;
	margin-right: clamp(2.5rem, 5vw, 4.5rem);
}

@keyframes ttfc-marquee {
	to { transform: translateX(-50%); }
}

/* ==========================================================================
   9. Why Choose Us
   ========================================================================== */
.ttfc-why {
	background: var(--ttfc-bg-alt);
}

.ttfc-why__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 2vw, 1.75rem);
}

.ttfc-why-card {
	background: var(--ttfc-surface);
	border-radius: var(--ttfc-radius-md);
	padding: 2rem 1.5rem;
	text-align: left;
	box-shadow: var(--ttfc-shadow-sm);
	transition: transform var(--ttfc-speed) var(--ttfc-ease), box-shadow var(--ttfc-speed) var(--ttfc-ease), background-color var(--ttfc-speed) var(--ttfc-ease);
}

.ttfc-why-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--ttfc-shadow-md);
}

.ttfc-why-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--ttfc-yellow);
	color: var(--ttfc-black);
	margin-bottom: 1.25rem;
}

.ttfc-why-card__icon svg {
	width: 26px;
	height: 26px;
}

.ttfc-why-card__title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
}

.ttfc-why-card__text {
	color: var(--ttfc-text-muted);
	margin: 0;
	font-size: 0.95rem;
}

/* ==========================================================================
   10. Animated Stats
   ========================================================================== */
.ttfc-stats {
	background: var(--ttfc-black);
	color: var(--ttfc-white);
}

.ttfc-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	text-align: center;
}

.ttfc-stat__number {
	display: block;
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	font-weight: 800;
	color: var(--ttfc-yellow);
	line-height: 1;
	margin-bottom: 0.5rem;
}

.ttfc-stat__label {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* About-page variant: the band gets a heading, and the figures are separated
   by hairlines so the row reads as a considered strip rather than four
   free-floating numbers. The divider is drawn on the left edge of every item
   except the first, so it never leaves a trailing rule at the end of a row. */
.ttfc-stats--about .ttfc-stats__grid {
	gap: 0;
}

.ttfc-stats--about .ttfc-stat {
	padding: 0.5rem clamp(0.75rem, 2vw, 1.75rem);
	border-left: 1px solid var(--ttfc-border-light);
}

.ttfc-stats--about .ttfc-stat:first-child {
	border-left: 0;
}

.ttfc-stats--about .ttfc-stat__number {
	background: var(--ttfc-gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ==========================================================================
   11. Testimonials
   ========================================================================== */
/* A tinted band, like "Why Choose Us", so the white cards read as cards
   rather than as floating text on the page background. */
.ttfc-testimonials {
	background: var(--ttfc-bg-alt);
}

/* Scroll-snap carousel: the viewport scrolls, the track is a flex row and
   each card is a snap target. Cards-per-view is driven purely by
   --ttfc-tst-per-view below, so the breakpoints are the single source of
   truth for both the layout and (via getComputedStyle in main.js) the
   number of pagination dots. */
.ttfc-testimonials__carousel {
	--ttfc-tst-per-view: 1;
	--ttfc-tst-gap: clamp(1rem, 2.5vw, 1.75rem);
	position: relative;
}

.ttfc-testimonials__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Room for the cards' hover lift, shadow and focus ring, which the
	   scroll container would otherwise clip. Negative margins cancel it so
	   the section's own vertical rhythm is unchanged. */
	padding-block: 1.5rem;
	margin-block: -1.5rem;
	-webkit-overflow-scrolling: touch;
}

.ttfc-testimonials__viewport::-webkit-scrollbar {
	display: none;
}

.ttfc-testimonials__viewport:focus-visible {
	outline: 2px solid var(--ttfc-yellow);
	outline-offset: 4px;
	border-radius: var(--ttfc-radius-md);
}

.ttfc-testimonials__track {
	display: flex;
	gap: var(--ttfc-tst-gap);
	align-items: stretch;
}

.ttfc-testimonial-card {
	/* Each card is exactly 1/per-view of the viewport, minus its share of
	   the gaps, so a "page" of cards always lands flush with both edges. */
	flex: 0 0 calc(
		(100% - (var(--ttfc-tst-per-view) - 1) * var(--ttfc-tst-gap)) / var(--ttfc-tst-per-view)
	);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	text-align: center;
	background: var(--ttfc-surface);
	border: 1px solid var(--ttfc-border-c);
	border-radius: var(--ttfc-radius-lg);
	box-shadow: var(--ttfc-shadow-sm);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	transition: transform var(--ttfc-speed) var(--ttfc-ease), box-shadow var(--ttfc-speed) var(--ttfc-ease), border-color var(--ttfc-speed) var(--ttfc-ease);
}

.ttfc-testimonial-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ttfc-shadow-md);
	border-color: color-mix(in srgb, var(--ttfc-yellow) 45%, transparent);
}

.ttfc-testimonial-card__stars {
	display: flex;
	justify-content: center;
	gap: 0.25rem;
	color: var(--ttfc-yellow);
	margin-bottom: 1.25rem;
}

.ttfc-testimonial-card__stars svg {
	width: 18px;
	height: 18px;
}

.ttfc-testimonial-card__quote {
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	font-weight: 400;
	line-height: 1.65;
	/* Pushes the author block to the bottom so every card in a row lines
	   up, however long or short its quote is. */
	margin: 0 0 1.75rem;
	flex: 1 1 auto;
	color: var(--ttfc-text);
}

.ttfc-testimonial-card__quote p:last-child {
	margin-bottom: 0;
}

.ttfc-testimonial-card__author {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

.ttfc-testimonial-card__avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
}

.ttfc-testimonial-card__name {
	display: block;
	font-style: normal;
	font-weight: 700;
}

.ttfc-testimonial-card__role {
	display: block;
	color: var(--ttfc-text-muted);
	font-size: 0.85rem;
}

/* Controls are revealed by main.js (it clears [hidden]) once it knows the
   track actually overflows — with only a couple of testimonials on a wide
   screen there is nothing to page through, and with no JS at all the arrows
   and dots would do nothing.

   `display` is scoped to :not([hidden]) for the same reason the mobile menu
   and search overlay above are: an author-stylesheet `display` on the bare
   class outranks the UA stylesheet's [hidden] rule, so the controls would
   sit there visible and inert instead of staying hidden. */
.ttfc-testimonials__controls {
	align-items: center;
	justify-content: center;
	gap: clamp(0.75rem, 2vw, 1.25rem);
	margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.ttfc-testimonials__controls:not([hidden]) {
	display: flex;
}

.ttfc-testimonials__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--ttfc-border-strong);
	background: var(--ttfc-surface);
	color: var(--ttfc-text);
	cursor: pointer;
	transition: background-color var(--ttfc-speed-fast) var(--ttfc-ease), color var(--ttfc-speed-fast) var(--ttfc-ease), border-color var(--ttfc-speed-fast) var(--ttfc-ease), transform var(--ttfc-speed-fast) var(--ttfc-ease), opacity var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-testimonials__arrow svg {
	width: 20px;
	height: 20px;
}

.ttfc-testimonials__arrow:hover {
	background: var(--ttfc-yellow);
	border-color: var(--ttfc-yellow);
	color: var(--ttfc-black);
	transform: scale(1.06);
}

.ttfc-testimonials__arrow:disabled {
	opacity: 0.35;
	cursor: default;
	transform: none;
	background: var(--ttfc-surface);
	border-color: var(--ttfc-border-c);
	color: var(--ttfc-text);
}

.ttfc-testimonials__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.6rem;
}

.ttfc-testimonials__dot {
	width: 10px;
	height: 10px;
	border-radius: var(--ttfc-radius-pill);
	border: 2px solid var(--ttfc-border-strong);
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: background-color var(--ttfc-speed-fast) var(--ttfc-ease), border-color var(--ttfc-speed-fast) var(--ttfc-ease), width var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-testimonials__dot.is-active {
	width: 28px;
	background: var(--ttfc-yellow);
	border-color: var(--ttfc-yellow);
}

@media (min-width: 768px) {
	.ttfc-testimonials__carousel {
		--ttfc-tst-per-view: 2;
	}
}

@media (min-width: 1100px) {
	.ttfc-testimonials__carousel {
		--ttfc-tst-per-view: 3;
	}
}

/* Honour the OS "reduce motion" setting for the scroll animation too —
   main.js already skips autoplay under the same preference. */
@media (prefers-reduced-motion: reduce) {
	.ttfc-testimonials__viewport {
		scroll-behavior: auto;
	}

	.ttfc-testimonial-card:hover {
		transform: none;
	}
}

/* ==========================================================================
   12. Newsletter
   ========================================================================== */
.ttfc-newsletter {
	padding-block: clamp(2rem, 6vw, 4rem);
}

.ttfc-newsletter__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: clamp(2rem, 5vw, 3.5rem);
	background: var(--ttfc-black);
	color: var(--ttfc-white);
	border-color: var(--ttfc-border-light);
}

.ttfc-newsletter__copy {
	flex: 1 1 320px;
}

.ttfc-newsletter__copy h2 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
}

.ttfc-newsletter__copy p {
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
}

.ttfc-newsletter__form {
	flex: 1 1 380px;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	position: relative;
}

.ttfc-newsletter__form input[type="email"] {
	flex: 1 1 220px;
	
	border-radius: var(--ttfc-radius-sm);
	border: 1px solid var(--ttfc-border-light);
	background: rgba(255, 255, 255, 0.08);
	color: var(--ttfc-white);
	font-size: 1rem;
	padding: 0px;
    height: 70px;
    text-align: center;
}

.ttfc-newsletter__form input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.ttfc-form-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ttfc-form-message {
	flex-basis: 100%;
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
	min-height: 1.2em;
}

.ttfc-form-message.is-success {
	color: var(--ttfc-yellow);
}

.ttfc-form-message.is-error {
	color: #ff6b6b;
}

/* ==========================================================================
   13. Page Header Band + Generic Page Content
   ========================================================================== */
.ttfc-page-header {
	position: relative;
	overflow: hidden;
	/* A graphite gradient rather than flat black, with a soft champagne pool
	   behind the title (::before below) — the same treatment as the closing
	   CTA panel, so the two ends of a page match. */
	background: linear-gradient(150deg, var(--ttfc-black) 0%, var(--ttfc-black-elevated) 100%);
	color: var(--ttfc-white);
	padding-block: clamp(3rem, 8vw, 5.5rem);
	text-align: center;
	margin-top: 2pc !important;
	margin-bottom: 2pc;
}

.ttfc-page-header::before {
	content: "";
	position: absolute;
	top: -55%;
	left: 50%;
	width: min(900px, 110%);
	height: 340px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(201, 162, 75, 0.2), transparent 70%);
	pointer-events: none;
}

/* The media variant paints its own photo + scrim, so the glow would only
   muddy it. */
.ttfc-page-header--media::before {
	display: none;
}

/*
 * The stock band keeps a gap above and below (see the margins above, which
 * other templates rely on). On the two redesigned pages the header is a
 * full-bleed hero that should sit flush under the fixed bar and run straight
 * into the first section — a strip of page background above a dark hero reads
 * as a rendering mistake rather than a design. !important is only here to
 * beat the !important on the rule above.
 */
.ttfc-page--about .ttfc-page-header,
.ttfc-page--contact .ttfc-page-header {
	margin-top: 0 !important;
	margin-bottom: 0;
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.ttfc-page--about .ttfc-page-header--media,
.ttfc-page--contact .ttfc-page-header--media {
	padding-block: clamp(5rem, 13vw, 8.5rem);
}

/* Optional media variant: used when the page has a Featured Image set
   (see page-about.php) — same markup shape as the hero slider's overlay
   pattern, just shorter. */
.ttfc-page-header--media {
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	padding-block: clamp(5.5rem, 14vw, 9rem);
}

.ttfc-page-header__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 10, 10, 0.6) 0%, rgba(10, 10, 10, 0.8) 100%);
}

.ttfc-page-header__inner {
	position: relative;
	z-index: 1;
}

.ttfc-page-header__eyebrow {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.4rem 1rem;
	border-radius: var(--ttfc-radius-pill);
	background: rgba(201, 162, 75, 0.15);
	border: 1px solid rgba(201, 162, 75, 0.4);
	color: var(--ttfc-yellow);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ttfc-page-header__title {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	margin: 0;
}

.ttfc-page-header__subtitle {
	max-width: 680px;
	margin: 1.1rem auto 0;
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.7;
}

/* Optional CTA row under the page-header copy (Contact / About). */
.ttfc-page-header__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.85rem;
	margin-top: 2rem;
}

.ttfc-page-header__actions .ttfc-btn--outline {
	color: var(--ttfc-white);
	border-color: rgba(255, 255, 255, 0.45);
}

/* Small champagne kicker above a heading, shared by the Contact form card and
   the About page's narrative sections. The section-head kicker bar is a
   separate thing (.ttfc-section__title::before) — this is the text version,
   for headings that sit inside a card rather than above a section. */
.ttfc-eyebrow {
	display: block;
	margin: 0 0 0.6rem;
	font-size: 0.74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ttfc-accent-ink);
}

/* Alternating section background for visual rhythm on long pages. */
.ttfc-section--tint {
	background: var(--ttfc-bg-alt);
}

.ttfc-page-content {
	max-width: 820px;
	margin-inline: auto;
	font-size: 1.05rem;
	line-height: 1.7;
}

.ttfc-checkout-disabled__content {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	padding-block: clamp(1rem, 4vw, 2rem);
}

/* Closing call to action. A graphite panel with a champagne hairline and a
   soft radial glow — the one dark element on an otherwise light page, so it
   reads as the end of the story rather than just another card. */
.ttfc-cta-band__inner {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: clamp(2.25rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
	border-radius: var(--ttfc-radius-lg);
	background: linear-gradient(140deg, var(--ttfc-black) 0%, var(--ttfc-black-elevated) 100%);
	border: 1px solid rgba(201, 162, 75, 0.3);
	box-shadow: var(--ttfc-shadow-lg);
	color: var(--ttfc-white);
}

.ttfc-cta-band__inner::before {
	content: "";
	position: absolute;
	top: -40%;
	left: 50%;
	width: min(720px, 90%);
	height: 320px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(201, 162, 75, 0.22), transparent 70%);
	pointer-events: none;
}

.ttfc-cta-band__inner > * {
	position: relative;
}

.ttfc-cta-band__inner h2 {
	margin: 0 0 0.85rem;
	font-size: clamp(1.6rem, 3.2vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ttfc-cta-band__text {
	max-width: 56ch;
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.7;
}

.ttfc-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.85rem;
	margin-top: 2rem;
}

.ttfc-cta-band__actions .ttfc-btn--outline {
	color: var(--ttfc-white);
	border-color: rgba(255, 255, 255, 0.4);
}

/* The eyebrow's default bronze is tuned for a light surface; on the dark
   panel it needs the champagne highlight instead. */
.ttfc-eyebrow--light {
	color: var(--ttfc-gold-light);
}

/* ==========================================================================
   14. Contact Page
   --------------------------------------------------------------------------
   Three stacked blocks: a row of "contact method" cards under the page
   header, then the form + aside (map, hours, socials), then the FAQs. Every
   block is optional in the template, so each grid here is written to look
   deliberate at any count rather than assuming all four fields are filled in.
   ========================================================================== */

/* ---------- Contact method cards ---------- */
.ttfc-contact-methods-section {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.ttfc-contact-methods {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
}

/* The template prints how many cards it rendered, so a store with only a
   phone and an email gets two wide cards instead of two narrow ones stranded
   at the left of a four-column grid. */
.ttfc-contact-methods--1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.ttfc-contact-methods--2 { grid-template-columns: repeat(2, 1fr); }
.ttfc-contact-methods--3 { grid-template-columns: repeat(3, 1fr); }

.ttfc-contact-method {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border-radius: var(--ttfc-radius-md);
	border: 1px solid var(--ttfc-border-c);
	background: var(--ttfc-surface);
	box-shadow: var(--ttfc-shadow-sm);
	color: var(--ttfc-text);
	text-decoration: none;
	overflow: hidden;
	transition: transform var(--ttfc-speed) var(--ttfc-ease), box-shadow var(--ttfc-speed) var(--ttfc-ease), border-color var(--ttfc-speed) var(--ttfc-ease);
}

/* Champagne hairline that wipes across the top edge on hover — the same
   accent the product cards use, so the two read as one family. */
.ttfc-contact-method::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--ttfc-gold-gradient);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ttfc-speed) var(--ttfc-ease);
}

a.ttfc-contact-method:hover {
	transform: translateY(-6px);
	box-shadow: var(--ttfc-shadow-md);
	border-color: var(--ttfc-border-strong);
}

a.ttfc-contact-method:hover::before {
	transform: scaleX(1);
}

.ttfc-contact-method__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 0.9rem;
	border-radius: var(--ttfc-radius-sm);
	background: var(--ttfc-gold-gradient-soft);
	border: 1px solid rgba(201, 162, 75, 0.28);
	color: var(--ttfc-accent-ink);
	transition: background var(--ttfc-speed) var(--ttfc-ease), color var(--ttfc-speed) var(--ttfc-ease);
}

.ttfc-contact-method__icon svg {
	width: 22px;
	height: 22px;
}

a.ttfc-contact-method:hover .ttfc-contact-method__icon {
	background: var(--ttfc-gold-gradient);
	border-color: transparent;
	color: var(--ttfc-black);
}

.ttfc-contact-method__label {
	font-size: 0.74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ttfc-text-muted);
}

.ttfc-contact-method__value {
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.5;
	/* Long addresses and email addresses must not push the card wider than
	   its grid track on narrow screens. */
	overflow-wrap: anywhere;
}

.ttfc-contact-method__action {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.9rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--ttfc-accent-ink);
}

.ttfc-contact-method__action svg {
	width: 14px;
	height: 14px;
	transition: transform var(--ttfc-speed-fast) var(--ttfc-ease);
}

a.ttfc-contact-method:hover .ttfc-contact-method__action svg {
	transform: translateX(3px);
}

/* ---------- Form + aside ---------- */
.ttfc-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(1.75rem, 3.5vw, 3rem);
	align-items: start;
}

.ttfc-contact__form-wrap {
	padding: clamp(1.6rem, 3.5vw, 3rem);
	border-radius: var(--ttfc-radius-lg);
	border: 1px solid var(--ttfc-border-c);
	background: var(--ttfc-surface);
	box-shadow: var(--ttfc-shadow-md);
}

.ttfc-contact__form-head {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.ttfc-contact__form-head h2 {
	margin: 0 0 0.6rem;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ttfc-contact__form-intro {
	margin: 0;
	color: var(--ttfc-text-muted);
	line-height: 1.7;
	max-width: 52ch;
}

/* Two-up field grid: name/email and phone/subject pair off on desktop, the
   message spans the full width, and everything stacks below 640px. */
.ttfc-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem clamp(1rem, 2vw, 1.5rem);
}

.ttfc-form-row--full {
	grid-column: 1 / -1;
}

/* Keeps the "Send a message" jump link from the page header clear of the
   fixed bar. scrollIntoView() honours scroll-margin on the element actually
   targeted by the hash, which is the <form>. */
.ttfc-contact-form {
	scroll-margin-top: calc(var(--ttfc-header-h) + 32px);
}

.ttfc-contact-form .ttfc-form-row {
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.ttfc-contact-form label {
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.01em;
	color: var(--ttfc-text);
}

.ttfc-form-required {
	color: var(--ttfc-accent-ink);
}

.ttfc-form-optional {
	font-weight: 500;
	color: var(--ttfc-text-muted);
}

.ttfc-contact-form input,
.ttfc-contact-form textarea {
    width: 90%;
    padding: 0.4rem 0.05rem;
	
	border-radius: var(--ttfc-radius-sm);
	border: 1px solid var(--ttfc-border-c);
	font: inherit;
	color: var(--ttfc-text);
	background: var(--ttfc-bg-alt);
	transition: background-color var(--ttfc-speed-fast) var(--ttfc-ease), border-color var(--ttfc-speed-fast) var(--ttfc-ease), box-shadow var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-contact-form textarea {
	resize: vertical;
	min-height: 150px;
}

.ttfc-contact-form input::placeholder,
.ttfc-contact-form textarea::placeholder {
	color: var(--ttfc-text-muted);
}

.ttfc-contact-form input:focus,
.ttfc-contact-form textarea:focus {
	background: var(--ttfc-surface);
	border-color: rgba(201, 162, 75, 0.55);
	box-shadow: 0 0 0 4px rgba(201, 162, 75, 0.14);
	outline: none;
}

.ttfc-contact-form input.is-invalid,
.ttfc-contact-form textarea.is-invalid {
	border-color: #d9534f;
	box-shadow: 0 0 0 4px rgba(217, 83, 79, 0.12);
}

.ttfc-contact-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	margin-top: 1.75rem;
}

.ttfc-contact-form__note {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
	flex: 1 1 260px;
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--ttfc-text-muted);
}

.ttfc-contact-form__note svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	margin-top: 0.15em;
	color: var(--ttfc-accent-ink);
}

.ttfc-contact-form__note a {
	color: var(--ttfc-accent-ink);
	font-weight: 600;
}

/* .ttfc-form-message is shared with the newsletter form, where it sits on a
   dark band — inside this light card the success colour has to read against
   the surface instead of against black. */
.ttfc-contact-form .ttfc-form-message {
	margin-top: 1rem;
	font-weight: 600;
}

.ttfc-contact-form .ttfc-form-message.is-success {
	color: var(--ttfc-accent-ink);
}

.ttfc-contact-form .ttfc-form-message.is-error {
	color: #d9534f;
}

/* ---------- Aside panels (intro copy, map, hours + socials) ---------- */
.ttfc-contact__aside {
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.ttfc-contact-panel {
	border-radius: var(--ttfc-radius-lg);
	border: 1px solid var(--ttfc-border-c);
	background: var(--ttfc-surface);
	box-shadow: var(--ttfc-shadow-sm);
	overflow: hidden;
}

.ttfc-contact-panel__body {
	padding: clamp(1.35rem, 2.5vw, 1.85rem);
}

.ttfc-contact-panel--intro .ttfc-page-content {
	max-width: none;
	margin-inline: 0;
	font-size: 1rem;
}

.ttfc-contact-panel--intro .ttfc-page-content > :first-child {
	margin-top: 0;
}

.ttfc-contact-panel--intro .ttfc-page-content > :last-child {
	margin-bottom: 0;
}

.ttfc-contact-panel__title {
	margin: 0 0 0.65rem;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* A second heading inside the same panel (Follow us, under Opening hours). */
.ttfc-contact-panel__title + .ttfc-contact-panel__title,
.ttfc-contact-panel__hours + .ttfc-contact-panel__title {
	margin-top: 1.5rem;
}

.ttfc-contact-panel__address,
.ttfc-contact-panel__hours {
	margin: 0 0 1rem;
	color: var(--ttfc-text-muted);
	line-height: 1.7;
}

.ttfc-contact-panel__hours {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-bottom: 0;
}

.ttfc-contact-panel__hours svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	margin-top: 0.2em;
	color: var(--ttfc-accent-ink);
}

/* ---------- Live map ---------- */
.ttfc-contact-map {
	position: relative;
	/* A ratio box rather than a fixed pixel height, so the embed keeps its
	   proportions from a 400px phone to a 1600px desktop. */
	aspect-ratio: 4 / 3;
	background: var(--ttfc-bg-alt);
}

.ttfc-contact-map__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	/* The stock Google embed is a bright white slab in dark mode; a light
	   filter settles it into the page without hiding any detail. */
	filter: saturate(0.9);
}

:root[data-theme="dark"] .ttfc-contact-map__frame {
	filter: invert(0.9) hue-rotate(180deg) saturate(0.75) brightness(0.95);
}

/* ---------- FAQs ---------- */
.ttfc-faq-wrap {
	max-width: 860px;
	margin-inline: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.ttfc-contact-methods,
	.ttfc-contact-methods--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 960px) {
	.ttfc-contact__grid {
		grid-template-columns: 1fr;
	}

	/* On one column the map no longer needs to be a tall portrait box. */
	.ttfc-contact-map {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 640px) {
	.ttfc-contact-methods,
	.ttfc-contact-methods--2,
	.ttfc-contact-methods--3 {
		grid-template-columns: 1fr;
	}

	.ttfc-form-grid {
		grid-template-columns: 1fr;
	}

	.ttfc-contact-form__foot {
		align-items: stretch;
		gap: 1rem;
	}

	.ttfc-contact-form__foot .ttfc-btn {
		width: 100%;
	}

	.ttfc-page-header__actions .ttfc-btn {
		width: 100%;
	}
}

/* ==========================================================================
   15. Site Header
   ========================================================================== */
.ttfc-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--ttfc-header-bg);
	backdrop-filter: blur(18px) saturate(170%);
	-webkit-backdrop-filter: blur(18px) saturate(170%);
	border-bottom: 1px solid var(--ttfc-border-c);
	padding-top: env(safe-area-inset-top);
	transform: translateY(0);
	transition: background-color var(--ttfc-speed) var(--ttfc-ease), border-color var(--ttfc-speed) var(--ttfc-ease), box-shadow var(--ttfc-speed) var(--ttfc-ease), transform var(--ttfc-speed) var(--ttfc-ease);
	height: 8pc;
}

/* A champagne hairline along the bottom edge — the same restrained metallic
   accent used on section headings and cards, so the bar reads as part of the
   design system rather than a plain browser-chrome strip. It fades in with
   the solid state so it never sits over the transparent-on-hero header. */
.ttfc-site-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(201, 162, 75, 0.55), transparent);
	opacity: 0;
	transition: opacity var(--ttfc-speed) var(--ttfc-ease);
	pointer-events: none;
}

.ttfc-site-header.ttfc-scrolled::after {
	opacity: 1;
}

/* Scrolled: a slightly tighter bar and a real shadow. The height change is a
   token override so it animates from one number, instead of the stray
   `height: 8pc` that previously made the bar *taller* on scroll. */
.ttfc-site-header.ttfc-scrolled {
	--ttfc-header-h: 68px;
	box-shadow: var(--ttfc-shadow-sm);
}

.ttfc-site-header.ttfc-hide {
	transform: translateY(-100%);
}

/* Only the front page has a hero to sit over — everywhere else the header
   is solid/glass from the very first paint. */
body.ttfc-has-hero .ttfc-site-header:not(.ttfc-scrolled) {
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}

body.ttfc-has-hero .ttfc-site-header:not(.ttfc-scrolled) .ttfc-site-header__menu > li > a,
body.ttfc-has-hero .ttfc-site-header:not(.ttfc-scrolled) .ttfc-nav-cats__toggle,
body.ttfc-has-hero .ttfc-site-header:not(.ttfc-scrolled) .ttfc-site-header__site-name,
body.ttfc-has-hero .ttfc-site-header:not(.ttfc-scrolled) .ttfc-site-header__icon-btn,
body.ttfc-has-hero .ttfc-site-header:not(.ttfc-scrolled) .ttfc-header-contact,
body.ttfc-has-hero .ttfc-site-header:not(.ttfc-scrolled) .ttfc-header-contact__value {
	color: var(--ttfc-header-text);
}

body.ttfc-has-hero .ttfc-site-header:not(.ttfc-scrolled) .ttfc-header-contact__label {
	color: rgba(255, 255, 255, 0.66);
}

/* Over the hero the chips need their own translucent surface — the light
   --ttfc-bg-alt fill they use on a solid bar would be an opaque white block
   sitting on the artwork. */
body.ttfc-has-hero .ttfc-site-header:not(.ttfc-scrolled) .ttfc-header-contact__icon {
	background: var(--ttfc-header-glass);
	border-color: var(--ttfc-header-glass-border);
	color: var(--ttfc-gold-light);
}

body.ttfc-has-hero .ttfc-site-header:not(.ttfc-scrolled) .ttfc-site-header__sep {
	background: var(--ttfc-header-glass-border);
}

body.ttfc-has-hero .ttfc-site-header:not(.ttfc-scrolled) .ttfc-site-header__icon-btn:hover,
body.ttfc-has-hero .ttfc-site-header:not(.ttfc-scrolled) .ttfc-header-contact:hover .ttfc-header-contact__icon,
body.ttfc-has-hero .ttfc-site-header:not(.ttfc-scrolled) .ttfc-site-header__burger:hover {
	background: var(--ttfc-header-glass);
}

.ttfc-site-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.75rem);
	min-height: var(--ttfc-header-h);
	transition: min-height var(--ttfc-speed) var(--ttfc-ease);
}

.ttfc-site-header__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	margin-right: auto;
}

.ttfc-site-header__logo img {
	max-height: 42px;
	width: auto;
	display: block;
}

.ttfc-site-header__site-name {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ttfc-text);
	transition: color var(--ttfc-speed) var(--ttfc-ease);
}

.ttfc-site-header__nav {
	margin-right: auto;
}

.ttfc-site-header__menu {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ttfc-site-header__menu > li > a {
	position: relative;
	display: inline-block;
	padding: 0.45rem 0;
	color: var(--ttfc-text);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	transition: color var(--ttfc-speed-fast) var(--ttfc-ease);
}

/* A champagne underline that wipes out from the centre. Drawn as a pseudo
   element rather than a border so hovering never changes the link's box and
   nudges the rest of the row by 2px. */
.ttfc-site-header__menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: var(--ttfc-radius-pill);
	background: var(--ttfc-gold-gradient);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-site-header__menu > li > a:hover {
	color: var(--ttfc-accent-ink);
}

.ttfc-site-header__menu > li > a:hover::after,
.ttfc-site-header__menu > li.current-menu-item > a::after,
.ttfc-site-header__menu > li.current_page_item > a::after,
.ttfc-site-header__menu > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

.ttfc-site-header__menu > li.current-menu-item > a,
.ttfc-site-header__menu > li.current_page_item > a,
.ttfc-site-header__menu > li.current-menu-ancestor > a {
	color: var(--ttfc-accent-ink);
}

.ttfc-site-header__menu .sub-menu {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0.6rem;
	position: absolute;
	min-width: 200px;
	background: var(--ttfc-surface);
	border: 1px solid var(--ttfc-border-c);
	border-radius: var(--ttfc-radius-sm);
	box-shadow: var(--ttfc-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--ttfc-speed-fast) var(--ttfc-ease), transform var(--ttfc-speed-fast) var(--ttfc-ease), visibility var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-site-header__menu li {
	position: relative;
}

.ttfc-site-header__menu li:hover > .sub-menu,
.ttfc-site-header__menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ttfc-site-header__menu .sub-menu a {
	display: block;
	padding: 0.5rem 0.75rem;
	color: var(--ttfc-text);
	text-decoration: none;
	border-radius: var(--ttfc-radius-sm);
	font-size: 0.9rem;
	font-weight: 500;
}

.ttfc-site-header__menu .sub-menu a:hover {
	background: var(--ttfc-bg-alt);
	color: var(--ttfc-yellow-dark);
}

.ttfc-site-header__actions {
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 1.2vw, 1rem);
	flex-shrink: 0;
}

.ttfc-site-header__tools {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

/* --------------------------------------------------------------------------
   Header contact chips (phone + email)

   These sit on the right of the bar, opposite the navigation. Each is an icon
   tile plus a two-line text block (muted caption over the value). The text is
   nowrap so a long number never wraps mid-value and doubles the bar's height —
   the responsive rules further down drop the caption, then the value entirely,
   rather than letting the row reflow.
   -------------------------------------------------------------------------- */
.ttfc-site-header__contact {
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 1.4vw, 1.25rem);
}

.ttfc-header-contact {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.3rem 0.4rem;
	border-radius: var(--ttfc-radius-pill);
	color: var(--ttfc-text);
	text-decoration: none;
	transition: color var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-header-contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var(--ttfc-border-c);
	background: var(--ttfc-bg-alt);
	color: var(--ttfc-accent-ink);
	transition: background-color var(--ttfc-speed-fast) var(--ttfc-ease), color var(--ttfc-speed-fast) var(--ttfc-ease), border-color var(--ttfc-speed-fast) var(--ttfc-ease), transform var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-header-contact__icon svg {
	width: 17px;
	height: 17px;
}

.ttfc-header-contact:hover .ttfc-header-contact__icon {
	background: var(--ttfc-gold-gradient);
	border-color: transparent;
	color: var(--ttfc-black);
	transform: translateY(-1px);
}

.ttfc-header-contact__text {
	display: flex;
	flex-direction: column;
	line-height: 0.25;
	white-space: nowrap;
}

.ttfc-header-contact__label {
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--ttfc-text-muted);
	transition: color var(--ttfc-speed-fast) var(--ttfc-ease);
	display: none;
}

.ttfc-header-contact__value {
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--ttfc-text);
	transition: color var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-header-contact:hover .ttfc-header-contact__value {
	color: var(--ttfc-accent-ink);
}

/* Hairline between the contact chips and the search/theme buttons. */
.ttfc-site-header__sep {
	width: 1px;
	height: 30px;
	flex-shrink: 0;
	background: var(--ttfc-border-c);
}

.ttfc-site-header__icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--ttfc-text);
	cursor: pointer;
	transition: background-color var(--ttfc-speed-fast) var(--ttfc-ease), color var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-site-header__icon-btn:hover {
	background: var(--ttfc-bg-alt);
}

.ttfc-site-header__icon-btn svg {
	width: 20px;
	height: 20px;
}

.ttfc-site-header__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--ttfc-text);
	cursor: pointer;
	transition: background-color var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-site-header__burger:hover {
	background: var(--ttfc-bg-alt);
}

/* Animated hamburger -> X morph, driven by the aria-expanded state main.js
   already sets — no extra markup/JS needed. */
.ttfc-site-header__burger svg line {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform var(--ttfc-speed-fast) var(--ttfc-ease), opacity var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-site-header__burger[aria-expanded="true"] svg line:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.ttfc-site-header__burger[aria-expanded="true"] svg line:nth-child(2) {
	opacity: 0;
}

.ttfc-site-header__burger[aria-expanded="true"] svg line:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

body.ttfc-has-hero .ttfc-site-header:not(.ttfc-scrolled) .ttfc-site-header__burger {
	color: var(--ttfc-header-text);
}

/* Theme toggle: sun/moon crossfade, current mode's icon hidden via [data-theme]. */
.ttfc-theme-toggle__icon--dark {
	position: absolute;
	opacity: 0;
	transform: scale(0.6) rotate(-30deg);
	transition: opacity var(--ttfc-speed) var(--ttfc-ease), transform var(--ttfc-speed) var(--ttfc-ease);
}

.ttfc-theme-toggle__icon--light {
	transition: opacity var(--ttfc-speed) var(--ttfc-ease), transform var(--ttfc-speed) var(--ttfc-ease);
}

:root[data-theme="dark"] .ttfc-theme-toggle__icon--light {
	opacity: 0;
	transform: scale(0.6) rotate(30deg);
}

:root[data-theme="dark"] .ttfc-theme-toggle__icon--dark {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

/* Search overlay */
.ttfc-search-overlay {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 110;
	background: var(--ttfc-bg);
	border-bottom: 1px solid var(--ttfc-border-c);
	box-shadow: var(--ttfc-shadow-lg);
	padding-block: 1.5rem;
	transform: translateY(-100%);
	opacity: 0;
	transition: transform var(--ttfc-speed) var(--ttfc-ease), opacity var(--ttfc-speed) var(--ttfc-ease);
}

.ttfc-search-overlay:not([hidden]) {
	transform: translateY(0);
	opacity: 1;
}

.ttfc-search-overlay__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-top: calc(76px + env(safe-area-inset-top));
}

.ttfc-search-overlay__form {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-bottom: 2px solid var(--ttfc-border-c);
	padding-bottom: 0.5rem;
}

.ttfc-search-overlay__form input[type="search"] {
	flex: 1;
	border: none;
	background: transparent;
	color: var(--ttfc-text);
	font-size: 1.5rem;
	font-family: inherit;
}

.ttfc-search-overlay__form input[type="search"]:focus {
	outline: none;
}

/* Mobile off-canvas menu */
.ttfc-mobile-menu {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 120;
	width: min(340px, 86vw);
	background: var(--ttfc-surface);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	color: var(--ttfc-text);
	box-shadow: -8px 0 40px rgba(0, 0, 0, 0.25);
	border-left: 1px solid var(--ttfc-border-c);
	transform: translateX(100%);
	transition: transform var(--ttfc-speed) var(--ttfc-ease);
	overflow-y: auto;
	padding-top: env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
}

.ttfc-mobile-menu:not([hidden]) {
	transform: translateX(0);
}

.ttfc-mobile-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem;
	border-bottom: 1px solid var(--ttfc-border-c);
}

.ttfc-mobile-menu__title {
	font-weight: 700;
	font-size: 1.1rem;
}

.ttfc-mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0.5rem;
}

.ttfc-mobile-menu__list .sub-menu {
	list-style: none;
	margin: 0;
	padding-left: 1rem;
}

.ttfc-mobile-menu__list a {
	display: block;
	padding: 0.85rem 0.75rem;
	border-radius: var(--ttfc-radius-sm);
	color: var(--ttfc-text);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid var(--ttfc-border-c);
	transition: background-color var(--ttfc-speed-fast) var(--ttfc-ease), color var(--ttfc-speed-fast) var(--ttfc-ease), padding-left var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-mobile-menu__list a:hover {
	background: var(--ttfc-bg-alt);
	color: var(--ttfc-yellow-dark);
	padding-left: 1.1rem;
}

/* Contact block at the foot of the off-canvas menu — the small-screen home
   for the phone/email chips the header drops below 560px. */
.ttfc-mobile-menu__contact {
	margin: 0.5rem;
	padding: 1.1rem 0.75rem 1.25rem;
	border-top: 1px solid var(--ttfc-border-c);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.ttfc-mobile-menu__contact a {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	color: var(--ttfc-text);
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.45;
	transition: color var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-mobile-menu__contact a:hover {
	color: var(--ttfc-accent-ink);
}

.ttfc-mobile-menu__contact svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	margin-top: 0.15em;
	color: var(--ttfc-accent-ink);
}

.ttfc-mobile-menu-backdrop {
	position: fixed;
	inset: 0;
	z-index: 115;
	background: rgba(10, 10, 10, 0.5);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ttfc-speed) var(--ttfc-ease), visibility var(--ttfc-speed) var(--ttfc-ease);
}

.ttfc-mobile-menu-backdrop.is-visible {
	opacity: 1;
	visibility: visible;
}

html.ttfc-scroll-lock {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Categories dropdown (desktop nav) — built from the live product_cat list,
   see inc/class-category-nav.php. Opened by main.js (class .is-open) rather
   than by a CSS :hover/:focus-within rule, so aria-expanded and the visible
   state can never disagree.
   -------------------------------------------------------------------------- */
.ttfc-nav-cats {
	position: relative;
}

.ttfc-nav-cats__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0;
	border: none;
	border-bottom: 2px solid transparent;
	background: transparent;
	font: inherit;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: inherit;
	color: var(--ttfc-text);
	cursor: pointer;
	transition: color var(--ttfc-speed-fast) var(--ttfc-ease), border-color var(--ttfc-speed-fast) var(--ttfc-ease);
	margin-top: 22px;
}

.ttfc-nav-cats__toggle:hover,
.ttfc-nav-cats.is-open > .ttfc-nav-cats__toggle {
	color: var(--ttfc-yellow-dark);
	border-color: var(--ttfc-yellow);
}

.ttfc-nav-cats__chevron {
	width: 16px;
	height: 16px;
	flex: none;
	transition: transform var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-nav-cats.is-open .ttfc-nav-cats__chevron {
	transform: rotate(180deg);
}

.ttfc-nav-cats__panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 5;
	/* Padding, not margin: a margin gap would break the pointer's path from
	   the toggle to the panel and close it on the way down. */
	padding-top: 0.75rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--ttfc-speed-fast) var(--ttfc-ease), transform var(--ttfc-speed-fast) var(--ttfc-ease), visibility var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-nav-cats.is-open > .ttfc-nav-cats__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Flipped to the right edge by main.js when the panel would otherwise run
   past the viewport. */
.ttfc-nav-cats.is-flipped > .ttfc-nav-cats__panel {
	left: auto;
	right: 0;
}

.ttfc-nav-cats__inner {
	min-width: 240px;
	max-width: calc(100vw - 2.5rem);
	max-height: min(70vh, 34rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0.6rem;
	background: var(--ttfc-surface);
	border: 1px solid var(--ttfc-border-c);
	border-radius: var(--ttfc-radius-sm);
	box-shadow: var(--ttfc-shadow-md);
}

/* Long or nested category sets get a multi-column panel instead of one very
   tall list; a short flat set stays a compact single column. */
.ttfc-nav-cats--wide .ttfc-nav-cats__inner {
	width: min(46rem, calc(100vw - 2.5rem));
}

.ttfc-nav-cats__list,
.ttfc-nav-cats__sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ttfc-nav-cats--wide .ttfc-nav-cats__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0.1rem 1.25rem;
	align-items: start;
}

.ttfc-nav-cats__item {
	min-width: 0;
}

.ttfc-nav-cats__link {
	display: block;
	padding: 0.5rem 0.6rem;
	border-radius: var(--ttfc-radius-sm);
	color: var(--ttfc-text);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.35;
	transition: background-color var(--ttfc-speed-fast) var(--ttfc-ease), color var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-nav-cats__link:hover,
.ttfc-nav-cats__link:focus-visible {
	background: var(--ttfc-bg-alt);
	color: var(--ttfc-yellow-dark);
}

.ttfc-nav-cats__link.is-current {
	color: var(--ttfc-yellow-dark);
}

.ttfc-nav-cats__sublist {
	margin: 0 0 0.4rem 0.6rem;
	padding-left: 0.6rem;
	border-left: 1px solid var(--ttfc-border-c);
}

.ttfc-nav-cats__sublist .ttfc-nav-cats__link {
	padding-block: 0.35rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--ttfc-text-muted);
}

.ttfc-nav-cats__sublist .ttfc-nav-cats__link:hover,
.ttfc-nav-cats__sublist .ttfc-nav-cats__link:focus-visible,
.ttfc-nav-cats__sublist .ttfc-nav-cats__link.is-current {
	color: var(--ttfc-yellow-dark);
}

/* --------------------------------------------------------------------------
   Categories accordion (mobile off-canvas menu)
   -------------------------------------------------------------------------- */
.ttfc-mobile-cats__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	padding: 0.85rem 0.75rem;
	border: none;
	border-bottom: 1px solid var(--ttfc-border-c);
	border-radius: var(--ttfc-radius-sm);
	background: transparent;
	color: var(--ttfc-text);
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--ttfc-speed-fast) var(--ttfc-ease), color var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-mobile-cats__toggle:hover,
.ttfc-mobile-cats__toggle[aria-expanded="true"] {
	background: var(--ttfc-bg-alt);
	color: var(--ttfc-yellow-dark);
}

.ttfc-mobile-cats__chevron {
	width: 18px;
	height: 18px;
	flex: none;
	transition: transform var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-mobile-cats__toggle[aria-expanded="true"] .ttfc-mobile-cats__chevron {
	transform: rotate(180deg);
}

/* No `display` here on purpose — an author-stylesheet display on the bare
   class outranks the UA stylesheet's [hidden] rule and the panel would never
   close. Visibility is the `hidden` attribute's job alone. */
.ttfc-mobile-cats__panel {
	padding: 0.15rem 0 0.4rem;
}

.ttfc-mobile-cats__list,
.ttfc-mobile-cats__sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ttfc-mobile-cats__sublist {
	margin-left: 0.75rem;
	padding-left: 0.5rem;
	border-left: 1px solid var(--ttfc-border-c);
}

/* Scoped under .ttfc-mobile-menu__list so these beat that block's generic
   `.ttfc-mobile-menu__list a` rules, which are one element-selector more
   specific than a bare class. */
.ttfc-mobile-menu__list .ttfc-mobile-cats__link {
	display: block;
	padding: 0.7rem 0.75rem 0.7rem 1.1rem;
	border-radius: var(--ttfc-radius-sm);
	border-bottom: 1px solid var(--ttfc-border-c);
	color: var(--ttfc-text);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
}

.ttfc-mobile-menu__list .ttfc-mobile-cats__link:hover,
.ttfc-mobile-menu__list .ttfc-mobile-cats__link:focus-visible,
.ttfc-mobile-menu__list .ttfc-mobile-cats__link.is-current {
	background: var(--ttfc-bg-alt);
	color: var(--ttfc-yellow-dark);
	padding-left: 1.3rem;
}

.ttfc-mobile-menu__list .ttfc-mobile-cats__sublist .ttfc-mobile-cats__link {
	font-size: 0.88rem;
	color: var(--ttfc-text-muted);
}

.ttfc-mobile-menu__list .ttfc-mobile-cats__sublist .ttfc-mobile-cats__link:hover,
.ttfc-mobile-menu__list .ttfc-mobile-cats__sublist .ttfc-mobile-cats__link.is-current {
	color: var(--ttfc-yellow-dark);
}

.ttfc-mobile-cats__item:last-child > .ttfc-mobile-cats__link {
	border-bottom: none;
}

/* --------------------------------------------------------------------------
   Header responsive ladder

   The bar sheds detail in stages instead of wrapping: the "Call us"/"Email us"
   captions go first, then the email chip, then the phone value (leaving a
   tap-to-call icon), and finally the chips altogether on the smallest screens —
   where the same links are repeated at the foot of the off-canvas menu.
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
	.ttfc-header-contact__label {
		display: none;
	}

	.ttfc-header-contact__text {
		line-height: 1.1;
	}
}

@media (max-width: 1120px) {
	/* Two long values plus the nav no longer fit — keep the phone (the link
	   people actually act on) and reduce email to its icon. */
	.ttfc-header-contact--email .ttfc-header-contact__text {
		display: none;
	}

	.ttfc-header-contact--email {
		gap: 0;
	}
}

@media (max-width: 1000px) {
	.ttfc-header-contact__text {
		display: none;
	}

	.ttfc-header-contact {
		gap: 0;
		padding: 0;
	}
}

@media (max-width: 900px) {
	.ttfc-site-header__nav {
		display: none;
	}

	.ttfc-site-header__burger {
		display: inline-flex;
	}

	/* The logo already carries margin-right:auto, so with the nav gone the
	   actions stay pinned right. */
	.ttfc-site-header__sep {
		display: none;
	}
}

@media (max-width: 560px) {
	.ttfc-site-header__contact {
		display: none;
	}

	.ttfc-header-contact__icon {
		width: 34px;
		height: 34px;
	}
}












@media only screen and (max-width: 1024px) {
   .ttfc-site-header  {
        height: 7pc;
        border-radius: 0 0 23px 29px;
    }
}





/* Push page content below the now fixed-position header, except on the
   front page where the hero is meant to sit underneath it. Covers both the
   classic-template path (<main> is a direct child of <body>) and native
   block templates, which wrap everything in a ".wp-site-blocks" div.
   Reads the same --ttfc-header-h token the bar sizes itself from — the
   scrolled state re-declares that token on the header element only, so this
   offset stays put instead of the page jumping as the bar shrinks. */
body:not(.ttfc-has-hero) > main,
body:not(.ttfc-has-hero) .wp-site-blocks > main {
	padding-top: calc(var(--ttfc-header-h) + env(safe-area-inset-top));
}

/* ==========================================================================
   16. Elementor Compatibility Helpers
   ========================================================================== */
body.elementor-page .wp-block-post-content,
body.elementor-page .entry-content {
	max-width: none;
}

.ttfc-elementor-content .wp-block-post-title,
.ttfc-elementor-content .wp-block-post-featured-image {
	display: none;
}

/* Baseline polish for pages/posts built with Elementor, so widget content
   (headings, buttons, images) reads as part of the same premium design
   system instead of Elementor's own plain defaults. Entirely inert unless
   Elementor is installed and active on that specific page — see
   TTFC_Elementor_Compat::body_classes(). Deliberately no !important: an
   editor can still override any of this per-widget in Elementor itself. */
.ttfc-elementor-content .elementor-heading-title,
.ttfc-elementor-content h1,
.ttfc-elementor-content h2,
.ttfc-elementor-content h3,
.ttfc-elementor-content h4 {
	color: var(--ttfc-text);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ttfc-elementor-content .elementor-widget-text-editor p,
.ttfc-elementor-content p {
	color: var(--ttfc-text-muted);
	line-height: 1.75;
}

.ttfc-elementor-content .elementor-image img,
.ttfc-elementor-content .elementor-widget-image img,
.ttfc-elementor-content .wp-block-image img {
	border-radius: var(--ttfc-radius-md);
	box-shadow: var(--ttfc-shadow-md);
}

.ttfc-elementor-content .elementor-button,
.ttfc-elementor-content a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: var(--ttfc-yellow);
	color: var(--ttfc-black);
	border: none;
	border-radius: var(--ttfc-radius-sm);
	font-weight: 700;
	padding: 0.95rem 2rem;
	transition: transform var(--ttfc-speed-fast) var(--ttfc-ease), box-shadow var(--ttfc-speed-fast) var(--ttfc-ease), background-color var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-elementor-content .elementor-button:hover,
.ttfc-elementor-content a.button:hover {
	background: var(--ttfc-yellow-dark);
	color: var(--ttfc-black);
	transform: translateY(-2px);
	box-shadow: var(--ttfc-shadow-glow);
}

.ttfc-elementor-content .elementor-section {
	padding-block: clamp(1.5rem, 4vw, 3rem);
}

/* ==========================================================================
   17. Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1024px) {
	.ttfc-products__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.ttfc-why__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.ttfc-products__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ttfc-stats__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}

	.ttfc-newsletter__inner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.ttfc-newsletter__form {
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.ttfc-products__grid,
	.ttfc-why__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   18. Site Footer
   ========================================================================== */
.ttfc-site-footer {
	max-width: none;
}

.ttfc-footer {
	background: var(--ttfc-black-soft);
	color: rgba(255, 255, 255, 0.85);
	padding-block: clamp(3rem, 6vw, 5rem) 0;
	position: relative;
}

.ttfc-footer__grid {
	display: grid;
	/* Widest track for the brand column, equal tracks for the link columns.
	   The modifier below sets how many of those there are — the template
	   counts the columns it actually rendered, so removing a column never
	   leaves a hole in the row. Defaults to the three-column layout (brand +
	   categories + contact), which is the normal case. */
	grid-template-columns: 1.6fr repeat(2, 1fr);
	gap: clamp(2rem, 4vw, 3rem);
	padding-bottom: clamp(2.5rem, 6vw, 4rem);
	border-bottom: 1px solid var(--ttfc-border-light);
}

/* No categories yet and no footer widgets: brand + contact only, so give the
   brand column less of a lead and keep the pair visually centred. */
.ttfc-footer__grid--cols-2 {
	grid-template-columns: 1.6fr 1fr;
}

.ttfc-footer__grid--cols-4 {
	grid-template-columns: 1.6fr repeat(3, 1fr);
}

.ttfc-footer__logo img {
	max-height: 110px;
	width: auto;
}

.ttfc-footer__site-name {
	margin: 0 0 0.75rem;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--ttfc-white);
}

.ttfc-footer__about {
	margin: 0.9rem 0 1.4rem;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.7;
	max-width: 34ch;
}

.ttfc-footer__heading {
	margin: 0 0 1.25rem;
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ttfc-white);
}

.ttfc-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.ttfc-footer__links a {
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
	transition: color var(--ttfc-speed-fast) var(--ttfc-ease), padding-left var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-footer__links a:hover {
	color: var(--ttfc-yellow);
	padding-left: 4px;
}

.ttfc-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.ttfc-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	color: rgba(255, 255, 255, 0.65);
}

.ttfc-footer__contact li svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	margin-top: 0.15em;
	color: var(--ttfc-yellow);
}

.ttfc-footer__contact a {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	color: inherit;
	text-decoration: none;
	transition: color var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-footer__contact a:hover {
	color: var(--ttfc-yellow);
}

.ttfc-footer__col--widgets .ttfc-widget-title {
	margin: 0 0 1.25rem;
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ttfc-white);
}

.ttfc-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
	padding-block: 1.75rem;
}

.ttfc-footer__copyright {
	margin: 0;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------------------------
   Accepted payment methods

   Each badge is a fixed-size card-shaped chip, so the row stays even whether
   a slot holds an official SVG (which arrives at whatever aspect ratio the
   brand publishes) or the text wordmark fallback. object-fit-style sizing is
   done with max-width/max-height on the SVG rather than width:100%, so a
   short-and-wide mark and a tall one both sit centred in the same chip.
   -------------------------------------------------------------------------- */
.ttfc-payments {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex-wrap: wrap;
	display: none;
}

.ttfc-payments__label {
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.45);
}

.ttfc-payments__list {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.ttfc-payments__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 36px;
	padding: 0 0.35rem;
	border-radius: 6px;
	/* A light plate behind the badge: card logos are drawn for white
	   backgrounds and mostly vanish on the footer's graphite. */
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.16);
	overflow: hidden;
	transition: background-color var(--ttfc-speed-fast) var(--ttfc-ease), transform var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-payments__item:hover {
	background: var(--ttfc-white);
	transform: translateY(-2px);
}

.ttfc-payments__item svg {
	display: block;
	max-width: 100%;
	max-height: 22px;
	width: auto;
	height: auto;
}

/* Wordmark fallback, shown until an official SVG is dropped into
   assets/icons/payments/. Sized down hard so a long name like "Mastercard"
   still fits the chip instead of overflowing it. */
.ttfc-payments__mark {
	font-size: 0.58rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	text-align: center;
	color: var(--ttfc-black);
	white-space: nowrap;
	max-width: 100%;
}

/* The longest brand name doesn't fit the chip at the shared size. A per-brand
   nudge is only needed while the wordmark fallback is showing — once
   mastercard.svg is in assets/icons/payments/ this rule stops applying to
   anything, because the fallback element is no longer rendered. */
.ttfc-payments__item--mastercard .ttfc-payments__mark {
	font-size: 0.48rem;
}

@media (max-width: 1024px) {
	.ttfc-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.ttfc-footer__grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.ttfc-footer__about {
		max-width: none;
		margin-inline: auto;
	}

	.ttfc-social-links,
	.ttfc-footer__contact li {
		justify-content: center;
	}

	/* The bottom bar stops being a two-up row and stacks, payments first —
	   a trust signal reads better above the copyright line than below it. */
	.ttfc-footer__bottom {
		flex-direction: column-reverse;
		justify-content: center;
		text-align: center;
		gap: 1.25rem;
	}

	.ttfc-payments {
		flex-direction: column;
		gap: 0.6rem;
	}

	.ttfc-payments__list {
		justify-content: center;
	}
}

/* ==========================================================================
   19. Back To Top
   ========================================================================== */
.ttfc-back-to-top {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 50;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: var(--ttfc-yellow);
	color: var(--ttfc-black);
	box-shadow: var(--ttfc-shadow-md);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--ttfc-speed) var(--ttfc-ease), transform var(--ttfc-speed) var(--ttfc-ease), visibility var(--ttfc-speed) var(--ttfc-ease), background-color var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ttfc-back-to-top:hover {
	background: var(--ttfc-yellow-dark);
}

.ttfc-back-to-top__icon {
	width: 18px;
	height: 18px;
	transform: rotate(-90deg);
}

/* ==========================================================================
   20. FAQ Accordion (Single Product / About / Contact)
   ========================================================================== */
.ttfc-faq-accordion {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 820px;
}

.ttfc-faq-item {
	border: 1px solid var(--ttfc-border-c);
	border-radius: var(--ttfc-radius-sm);
	padding: 1rem 1.25rem;
	background: var(--ttfc-surface);
}

.ttfc-faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	color: var(--ttfc-text);
}

.ttfc-faq-item__question::-webkit-details-marker {
	display: none;
}

.ttfc-faq-item__icon {
	position: relative;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.ttfc-faq-item__icon::before,
.ttfc-faq-item__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--ttfc-text);
	transform: translate(-50%, -50%);
	transition: transform var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-faq-item__icon::before {
	width: 100%;
	height: 2px;
}

.ttfc-faq-item__icon::after {
	width: 2px;
	height: 100%;
}

.ttfc-faq-item[open] .ttfc-faq-item__icon::after {
	transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}

.ttfc-faq-item__answer {
	margin-top: 0.85rem;
	color: var(--ttfc-text-muted);
	line-height: 1.7;
}

/* ==========================================================================
   21. About Page — Story, Mission/Vision, Team
   ========================================================================== */

/* ---------- Story: sticky heading rail + editor content ---------- */
.ttfc-about-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.ttfc-about-story__rail {
	/* Sticks past the fixed header while the (usually longer) content column
	   scrolls beside it. position:sticky degrades to static wherever the grid
	   collapses to one column, so no media-query cleanup is needed. */
	position: sticky;
	top: calc(var(--ttfc-header-h) + 32px);
}

.ttfc-about-story__rail .ttfc-section__title {
	margin-bottom: 0;
	font-size: clamp(1.6rem, 2.8vw, 2.35rem);
}

.ttfc-about-story__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--ttfc-border-c);
}

.ttfc-about-story__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	color: var(--ttfc-text);
	text-decoration: none;
}

.ttfc-about-story__phone-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--ttfc-gold-gradient-soft);
	border: 1px solid rgba(201, 162, 75, 0.28);
	color: var(--ttfc-accent-ink);
	transition: background var(--ttfc-speed-fast) var(--ttfc-ease), color var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-about-story__phone-icon svg {
	width: 18px;
	height: 18px;
}

.ttfc-about-story__phone:hover .ttfc-about-story__phone-icon {
	background: var(--ttfc-gold-gradient);
	border-color: transparent;
	color: var(--ttfc-black);
}

.ttfc-about-story__phone-label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ttfc-text-muted);
}

.ttfc-about-story__phone-value {
	display: block;
	font-size: 1rem;
	font-weight: 700;
}

/* The content column is already constrained by its grid track, so the shared
   .ttfc-page-content centring would only narrow it a second time. */
.ttfc-about-story__content {
	max-width: none;
	margin-inline: 0;
}

.ttfc-about-story__content > :first-child {
	margin-top: 0;
}

.ttfc-about-story__content > :last-child {
	margin-bottom: 0;
}

/* A champagne drop-cap rule on the opening paragraph — a small editorial
   flourish that only applies when there actually is a paragraph. */
.ttfc-about-story__content > p:first-of-type {
	font-size: 1.15rem;
	line-height: 1.75;
	color: var(--ttfc-text);
}

@media (max-width: 900px) {
	.ttfc-about-story__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Mission / Vision ---------- */
.ttfc-mission-vision__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.ttfc-mission-vision__card {
	background: var(--ttfc-surface);
	border: 1px solid var(--ttfc-border-c);
	border-radius: var(--ttfc-radius-md);
	padding: clamp(2rem, 4vw, 2.75rem);
	box-shadow: var(--ttfc-shadow-sm);
	transition: transform var(--ttfc-speed) var(--ttfc-ease), box-shadow var(--ttfc-speed) var(--ttfc-ease);
}

.ttfc-mission-vision__card:hover {
	transform: translateY(-6px);
	box-shadow: var(--ttfc-shadow-md);
}

.ttfc-mission-vision__card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--ttfc-yellow);
	color: var(--ttfc-black);
	margin-bottom: 1.5rem;
}

.ttfc-mission-vision__card__icon svg {
	width: 26px;
	height: 26px;
}

.ttfc-mission-vision__card h2,
.ttfc-mission-vision__card h3 {
	margin: 0 0 0.75rem;
	font-size: 1.35rem;
	font-weight: 700;
}

.ttfc-mission-vision__card p {
	margin: 0;
	color: var(--ttfc-text-muted);
	line-height: 1.7;
}

.ttfc-team__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.ttfc-team-card {
	text-align: center;
	background: var(--ttfc-surface);
	border-radius: var(--ttfc-radius-md);
	padding: 2rem 1.5rem;
	box-shadow: var(--ttfc-shadow-sm);
	transition: transform var(--ttfc-speed) var(--ttfc-ease), box-shadow var(--ttfc-speed) var(--ttfc-ease);
}

.ttfc-team-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--ttfc-shadow-md);
}

/* A soft champagne halo behind the portrait, so a plain headshot (or the
   placeholder avatar) still reads as a designed element. */
.ttfc-team-card__media {
	position: relative;
	display: inline-block;
	margin-bottom: 1.25rem;
}

.ttfc-team-card__media::before {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	background: var(--ttfc-gold-gradient-soft);
	opacity: 0;
	transition: opacity var(--ttfc-speed) var(--ttfc-ease);
}

.ttfc-team-card:hover .ttfc-team-card__media::before {
	opacity: 1;
}

.ttfc-team-card__photo {
	position: relative;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto;
	display: block;
	border: 4px solid var(--ttfc-bg-alt);
	box-shadow: 0 0 0 1px var(--ttfc-border-c);
}

.ttfc-team-card__name {
	margin: 0 0 0.25rem;
	font-size: 1.05rem;
	font-weight: 700;
}

.ttfc-team-card__role {
	margin: 0 0 0.6rem;
	color: var(--ttfc-text-muted);
	font-size: 0.9rem;
}

.ttfc-team-card__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ttfc-bg-alt);
	color: var(--ttfc-text);
	transition: background-color var(--ttfc-speed-fast) var(--ttfc-ease), color var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-team-card__social:hover {
	background: var(--ttfc-yellow);
	color: var(--ttfc-black);
}

.ttfc-team-card__social svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 900px) {
	.ttfc-mission-vision__grid {
		grid-template-columns: 1fr;
	}

	.ttfc-team__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 780px) {
	/* Two stats per row: the vertical hairline now has to reset on every
	   other item, not just the first, or a rule appears at the row start. */
	.ttfc-stats__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ttfc-stats--about .ttfc-stats__grid {
		gap: 2rem 0;
	}

	.ttfc-stats--about .ttfc-stat:nth-child(odd) {
		border-left: 0;
	}
}

@media (max-width: 480px) {
	.ttfc-team__grid {
		grid-template-columns: 1fr;
	}
}




/* ==========================================================================
   22. Category Detail Page + Quote Inquiry Form
   The premium, term-driven page that replaces the product_cat archive
   (template-parts/category-detail.php). Presentation-first: a cinematic
   graphite hero and champagne accents carry the "premium tech" register,
   while the quote form itself is deliberately quiet — a bone/surface card
   with plain hairline inputs, because a form asking for a phone number
   reads as more trustworthy when it looks less designed.
   ========================================================================== */

/* ---------- Hero ---------- */
.ttfc-cat-hero {
	position: relative;
	overflow: hidden;
	background: var(--ttfc-black);
	color: var(--ttfc-white);
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
	margin-top: 2pc;
	border-bottom: 1px solid rgba(201, 162, 75, 0.28);
}

.ttfc-cat-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1.06);
	filter: saturate(0.85);
}

/* Two stacked washes: a vertical darkener for text contrast, plus a
   left-weighted graphite gradient so the copy column stays readable no
   matter how bright the category image is. */
.ttfc-cat-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(11, 13, 16, 0.96) 0%, rgba(11, 13, 16, 0.82) 45%, rgba(11, 13, 16, 0.55) 100%),
		linear-gradient(180deg, rgba(11, 13, 16, 0.4) 0%, rgba(11, 13, 16, 0.75) 100%);
}

.ttfc-cat-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}

.ttfc-cat-hero:not(.ttfc-cat-hero--media) .ttfc-cat-hero__inner {
	grid-template-columns: minmax(0, 1fr);
	max-width: 900px;
}

.ttfc-cat-hero__eyebrow {
	display: inline-block;
	margin: 0 0 1.1rem;
	padding: 0.4rem 1rem;
	border-radius: var(--ttfc-radius-pill);
	background: rgba(201, 162, 75, 0.15);
	border: 1px solid rgba(201, 162, 75, 0.4);
	color: var(--ttfc-yellow);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ttfc-cat-hero__title {
	font-family: var(--ttfc-font-display);
	font-size: clamp(2.25rem, 5.5vw, 4rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 0 0 1.1rem;
}

.ttfc-cat-hero__intro {
	max-width: 56ch;
	margin: 0 0 2rem;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.78);
}

.ttfc-cat-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
}

.ttfc-cat-hero__actions .ttfc-btn--outline {
	color: var(--ttfc-white);
	border-color: rgba(255, 255, 255, 0.35);
}

/* Framed product/brand still — the hairline + champagne glow reads as
   "engineered" rather than a plain dropped-in photo. */
.ttfc-cat-hero__figure {
	position: relative;
	border-radius: var(--ttfc-radius-lg);
	overflow: hidden;
	border: 1px solid rgba(201, 162, 75, 0.32);
	box-shadow: var(--ttfc-shadow-lg);
	background: var(--ttfc-black-elevated);
}

.ttfc-cat-hero__figure img,
.ttfc-cat-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 420px;
	object-fit: cover;
}

/* ---------- Stats strip ---------- */
.ttfc-cat-stats {
	background: var(--ttfc-black-soft);
	color: var(--ttfc-white);
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

.ttfc-cat-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	background: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--ttfc-radius-md);
	overflow: hidden;
}

.ttfc-cat-stats__item {
	background: var(--ttfc-black-soft);
	padding: clamp(1.1rem, 2.5vw, 1.6rem) 1.25rem;
	text-align: center;
}

.ttfc-cat-stats__value {
	display: block;
	font-family: var(--ttfc-font-display);
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	background: var(--ttfc-gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ttfc-cat-stats__label {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.82rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

/* ---------- About ---------- */
.ttfc-cat-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

/* The Key Capabilities column is optional per category. With no second
   column the description would otherwise be stranded in a narrow 1.1fr
   track, so collapse to a single measured column of readable copy. */
.ttfc-cat-about--single .ttfc-cat-about__grid {
	grid-template-columns: minmax(0, 1fr);
	max-width: 78ch;
}

.ttfc-cat-about__copy p {
	margin: 0 0 1.1rem;
	font-size: 1.03rem;
	line-height: 1.8;
	color: var(--ttfc-text-muted);
}

.ttfc-cat-about__highlights {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.ttfc-cat-highlight {
	display: flex;
	gap: 0.9rem;
	padding: 1.1rem 1.25rem;
	background: var(--ttfc-surface);
	border: 1px solid var(--ttfc-border-c);
	border-radius: var(--ttfc-radius-md);
	box-shadow: var(--ttfc-shadow-sm);
	transition: transform var(--ttfc-speed-fast) var(--ttfc-ease), box-shadow var(--ttfc-speed-fast) var(--ttfc-ease), border-color var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-cat-highlight:hover {
	transform: translateY(-2px);
	border-color: rgba(201, 162, 75, 0.45);
	box-shadow: var(--ttfc-shadow-md);
}

.ttfc-cat-highlight__mark {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--ttfc-gold-gradient-soft);
	border: 1px solid rgba(201, 162, 75, 0.38);
	color: var(--ttfc-yellow-dark);
}

.ttfc-cat-highlight__mark svg {
	width: 18px;
	height: 18px;
}

.ttfc-cat-highlight__body {
	display: block;
}

.ttfc-cat-highlight__title {
	display: block;
	font-family: var(--ttfc-font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--ttfc-text);
	margin-bottom: 0.2rem;
}

.ttfc-cat-highlight__text {
	display: block;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--ttfc-text-muted);
}

/* ---------- Technology & solutions ---------- */
.ttfc-cat-solutions__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

.ttfc-cat-solution {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--ttfc-surface);
	border: 1px solid var(--ttfc-border-c);
	border-radius: var(--ttfc-radius-md);
	overflow: hidden;
	transition: transform var(--ttfc-speed-fast) var(--ttfc-ease), box-shadow var(--ttfc-speed-fast) var(--ttfc-ease), border-color var(--ttfc-speed-fast) var(--ttfc-ease);
}

/* Champagne hairline that fills in on hover — the same restrained accent
   move the product cards use, so the page feels part of the same system. */
.ttfc-cat-solution::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: var(--ttfc-gold-gradient);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ttfc-speed) var(--ttfc-ease);
}

.ttfc-cat-solution:hover {
	transform: translateY(-4px);
	border-color: rgba(201, 162, 75, 0.4);
	box-shadow: var(--ttfc-shadow-md);
}

.ttfc-cat-solution:hover::before {
	transform: scaleX(1);
}

.ttfc-cat-solution__index {
	display: block;
	font-family: var(--ttfc-font-display);
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: var(--ttfc-yellow-dark);
	margin-bottom: 0.75rem;
}

.ttfc-cat-solution__title {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--ttfc-text);
}

.ttfc-cat-solution__text {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.7;
	color: var(--ttfc-text-muted);
}

/* ---------- Quote inquiry section ---------- */
.ttfc-cat-quote {
	position: relative;
	background: var(--ttfc-black);
	color: var(--ttfc-white);
	padding-block: clamp(3rem, 7vw, 5.5rem);
	scroll-margin-top: 6rem;
}

.ttfc-cat-quote__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.ttfc-cat-quote__eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ttfc-yellow);
}

.ttfc-cat-quote__title {
	font-family: var(--ttfc-font-display);
	font-size: clamp(1.75rem, 3.2vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 1rem;
}

.ttfc-cat-quote__intro {
	margin: 0 0 1.75rem;
	font-size: 1.02rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.75);
}

.ttfc-cat-quote__points {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.ttfc-cat-quote__points li {
	position: relative;
	padding-left: 1.75rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}

.ttfc-cat-quote__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ttfc-gold-gradient);
}

.ttfc-cat-quote__contact {
	display: grid;
	gap: 0.6rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ttfc-cat-quote__contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: rgba(255, 255, 255, 0.86);
	text-decoration: none;
	font-size: 0.95rem;
	transition: color var(--ttfc-speed-fast) var(--ttfc-ease);
}

.ttfc-cat-quote__contact a:hover {
	color: var(--ttfc-yellow);
}

.ttfc-cat-quote__contact svg {
	width: 17px;
	height: 17px;
	color: var(--ttfc-yellow);
}

/* The form card: light surface against the dark band. This is the one
   component on the page that stays plain on purpose. */
.ttfc-cat-quote__panel {
	background: var(--ttfc-surface);
	color: var(--ttfc-text);
	border: 1px solid var(--ttfc-border-c);
	border-radius: var(--ttfc-radius-lg);
	padding: clamp(1.5rem, 3.5vw, 2.75rem);
	box-shadow: var(--ttfc-shadow-lg);
}

.ttfc-quote-form__for {
	margin: 0 0 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--ttfc-border-c);
	font-size: 0.88rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ttfc-text-muted);
}

.ttfc-quote-form__for strong {
	color: var(--ttfc-text);
	font-weight: 700;
}

.ttfc-quote-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem 1.25rem;
}

.ttfc-quote-field--full {
	grid-column: 1 / -1;
}

.ttfc-quote-field label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.87rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--ttfc-text);
}

.ttfc-quote-field__req {
	color: var(--ttfc-yellow-dark);
}

.ttfc-quote-field input,
.ttfc-quote-field select,
.ttfc-quote-field textarea {
	width: 100%;
	min-height: 48px;
	/*padding: 0.75rem 0.95rem;*/
	font-family: var(--ttfc-font-text);
	font-size: 0.97rem;
	color: var(--ttfc-text);
	background: var(--ttfc-bg);
	border: 1px solid var(--ttfc-border-strong);
	border-radius: var(--ttfc-radius-sm);
	transition: border-color var(--ttfc-speed-fast) var(--ttfc-ease), box-shadow var(--ttfc-speed-fast) var(--ttfc-ease), background-color var(--ttfc-speed-fast) var(--ttfc-ease);
	appearance: none;
	-webkit-appearance: none;
}

.ttfc-quote-field textarea {
	min-height: 130px;
	resize: vertical;
	line-height: 1.6;
}

/* Native select arrow is removed by appearance:none above — redraw it as a
   champagne chevron so the control still reads as a dropdown. */
.ttfc-quote-field select {
	background-image: linear-gradient(45deg, transparent 50%, #94722a 50%), linear-gradient(135deg, #94722a 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.5rem;
}

.ttfc-quote-field input::placeholder,
.ttfc-quote-field textarea::placeholder {
	color: var(--ttfc-text-muted);
	opacity: 0.75;
}

.ttfc-quote-field input:focus,
.ttfc-quote-field select:focus,
.ttfc-quote-field textarea:focus {
	outline: none;
	background: var(--ttfc-surface);
	border-color: var(--ttfc-yellow);
	box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.18);
}

.ttfc-quote-field input.is-invalid,
.ttfc-quote-field select.is-invalid,
.ttfc-quote-field textarea.is-invalid {
	border-color: #d9534f;
	box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.14);
}

.ttfc-quote-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1.75rem;
}

.ttfc-quote-form__submit {
	min-width: 200px;
}

.ttfc-quote-form__note {
	margin: 0;
	font-size: 0.86rem;
	color: var(--ttfc-text-muted);
}

/* .ttfc-form-message is shared with the newsletter/contact forms, where it
   sits on a dark band; inside this light card the success/error colours need
   to read against the surface instead. */
.ttfc-cat-quote__panel .ttfc-form-message {
	margin-top: 1rem;
	font-weight: 600;
}

.ttfc-cat-quote__panel .ttfc-form-message.is-success {
	color: var(--ttfc-yellow-dark);
}

.ttfc-cat-quote__panel .ttfc-form-message.is-error {
	color: #c0392b;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.ttfc-cat-hero__inner,
	.ttfc-cat-quote__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ttfc-cat-hero__figure {
		order: -1;
		max-width: 560px;
	}

	.ttfc-cat-about__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 720px) {
	.ttfc-quote-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ttfc-cat-hero__actions .ttfc-btn {
		flex: 1 1 100%;
	}

	.ttfc-quote-form__submit {
		width: 100%;
	}

	.ttfc-quote-form__foot {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}

@media (max-width: 480px) {
	.ttfc-cat-stats__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ttfc-cat-highlight {
		flex-direction: column;
		gap: 0.6rem;
	}

	/* iOS zooms the page in when a focused input's font-size is under 16px —
	   the form is long enough that this is very noticeable mid-fill. */
	.ttfc-quote-field input,
	.ttfc-quote-field select,
	.ttfc-quote-field textarea {
		font-size: 16px;
	}
}