/* =========================================================================
   IT Family Quote — shared presentation layer
   Brand ported 1:1 from itfamily.dev. Block-specific styles live with each
   block (plugin); this file holds the primitives every quote page shares:
   bridge tokens, base typography, c-button, status badge, header, sticky bar,
   footer, dark banner and the interactive canvas background.
   ========================================================================= */

/* ---- Bridge tokens: map the live-site --color-* names onto theme.json presets
   so the ported component CSS reads identically to the source. --------------- */
:root {
	--color-primary: var(--wp--preset--color--primary);
	--color-primary-darker: var(--wp--preset--color--primary-darker);
	--color-dark: var(--wp--preset--color--dark);
	--color-lighter-black: var(--wp--preset--color--lighter-black);
	--color-white: var(--wp--preset--color--white);
	--color-full-white: var(--wp--preset--color--full-white);
	--color-light: var(--wp--preset--color--light);
	--color-yellow: var(--wp--preset--color--yellow);
	--color-grey-100: var(--wp--preset--color--grey-100);
	--color-grey-200: var(--wp--preset--color--grey-200);
	--color-grey-300: var(--wp--preset--color--grey-300);
	--color-grey-400: var(--wp--preset--color--grey-400);
	--color-dark-10: rgba(2, 3, 8, 0.1);
	--color-dark-20: rgba(2, 3, 8, 0.2);
	--color-dark-50: rgba(2, 3, 8, 0.58); /* nudged darker so small muted text clears WCAG AA (4.5:1) on the off-white bg */
	--color-dark-60: rgba(2, 3, 8, 0.6);
	--color-dark-70: rgba(2, 3, 8, 0.7);
	--color-white-50: rgba(243, 243, 243, 0.5);

	--font-dm: var(--wp--preset--font-family--dm-sans);
	--font-instrument: var(--wp--preset--font-family--instrument-serif);

	--radius-card: 12px;
	--radius-banner: 24px;
	--shadow-card: 0 10px 40px rgba(2, 3, 8, 0.08);
	--shadow-deep: 0 24px 60px rgba(2, 3, 8, 0.18);
}

/* ---- Base ---------------------------------------------------------------- */
body {
	background-color: var(--color-full-white);
	color: var(--color-dark);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

em { font-style: italic; }

/* Serif-italic brand accent inside any heading (the IT Family signature) */
.itf-em,
.itf-quote h1 em,
.itf-quote h2 em,
.itf-quote h3 em,
.itf-quote .itf-serif {
	font-family: var(--font-instrument);
	font-style: italic;
	color: var(--color-primary);
	letter-spacing: -0.02em;
}

/* ---- Fluid type helpers (ported from globals.scss) ----------------------- */
.p-24 { font-size: clamp(1.225rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.21; letter-spacing: -0.04em; }
.p-20 { font-size: clamp(1.2rem, 1.15rem + 0.25vw, 1.25rem); line-height: 1.45; letter-spacing: -0.02em; }
.p-18 { font-size: clamp(1.12rem, 1.1rem + 0.1vw, 1.125rem); line-height: 1.4; letter-spacing: -0.02em; }
.p-16 { font-size: 1rem; line-height: 1.5; }
.p-14 { font-size: 0.875rem; line-height: 1.4; }
.text-muted { color: var(--color-dark-60); }
.text-center { text-align: center; }

/* ---- Vertical rhythm (content-block) ------------------------------------- */
.itf-block {
	margin-top: clamp(3.5rem, 0.5rem + 8vw, 5rem);
}
.itf-block:first-child { margin-top: 0; }
.itf-block.has-background {
	padding-top: clamp(3.5rem, 8vw, 5rem);
	padding-bottom: clamp(3.5rem, 8vw, 5rem);
}
.itf-block.has-background + .has-background { margin-top: 0; }

.itf-wrap { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.itf-wrap--wide { max-width: 1600px; }
.itf-wrap--narrow { max-width: 760px; }

/* =========================================================================
   c-button — ported from Button.scss (animated arrow slide on hover)
   ========================================================================= */
.c-button {
	display: inline-block;
	margin-bottom: 0;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	background: var(--color-grey-100);
	color: var(--color-dark);
	border-radius: 10px;
	transition: 0.3s ease-out;
	line-height: 1.3;
	position: relative;
	padding: 12px 28px;
	user-select: none;
	white-space: nowrap;
	font-weight: 500;
	font-size: 1rem;
	text-decoration: none;
	border: none;
	font-family: inherit;
}
.c-button:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}
.c-button:hover { background: var(--color-grey-200); color: var(--color-dark); }

.c-button.has-icon { display: inline-flex; align-items: center; gap: 8px; }

.c-button__icon-wrapper {
	display: inline-block;
	position: relative;
	width: 41px;
	height: 11px;
	overflow: hidden;
}
.c-button__icon {
	display: inline-flex;
	position: absolute;
	top: 0;
	left: 6px;
	transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.c-button__icon svg { width: 21px; height: 11px; }
.c-button__icon--left { transform: translateX(-100%); opacity: 0; }
.c-button__icon--right { transform: translateX(0); }
.c-button:hover .c-button__icon--left { transform: translateX(0); opacity: 1; }
.c-button:hover .c-button__icon--right { transform: translateX(100%); opacity: 0; }

.c-button--primary {
	background-color: var(--color-primary);
	color: var(--color-white);
}
.c-button--primary .c-button__icon svg { stroke: var(--color-white); }
.c-button--primary:hover,
.c-button--primary:focus { background-color: var(--color-primary-darker); color: var(--color-light); }

.c-button--secondary {
	background-color: var(--color-white);
	color: var(--color-primary);
	padding: 12px 20px;
}
.c-button--secondary .c-button__icon svg { stroke: var(--color-primary); }

.c-button--bordered {
	background: transparent;
	color: var(--color-dark);
	border: 1px solid var(--color-dark);
}
.c-button--bordered .c-button__icon svg { stroke: currentColor; }
.c-button--bordered:hover { color: var(--color-light); background: var(--color-dark); }

.c-button:disabled,
.c-button.is-disabled {
	opacity: 0.7;
	pointer-events: none;
	cursor: not-allowed;
}

/* =========================================================================
   Status badge — Draft / Sent / Accepted / Expired
   ========================================================================= */
.itf-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;
	white-space: nowrap;
}
.itf-badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}
.itf-badge--draft { background: var(--color-grey-200); color: var(--color-dark-60); }
.itf-badge--sent { background: rgba(0, 0, 255, 0.08); color: var(--color-primary); }
.itf-badge--accepted { background: rgba(33, 160, 80, 0.12); color: #1f9d55; }
.itf-badge--expired { background: rgba(2, 3, 8, 0.08); color: var(--color-dark-50); }
.itf-badge--recommended { background: var(--color-yellow); color: var(--color-dark); }
.itf-badge--recommended::before { display: none; }

/* =========================================================================
   Quote header
   ========================================================================= */
.itf-header {
	position: relative;
	z-index: 50;
	padding: 28px 0;
}
.itf-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.itf-header__logo { display: flex; align-items: center; }
.itf-header__logo img,
.itf-header__logo svg { height: 40px; width: auto; display: block; }
.itf-header__meta {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	font-size: 0.875rem;
	color: var(--color-dark-60);
}
.itf-header__meta-item { display: flex; flex-direction: column; line-height: 1.3; }
.itf-header__meta-label {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-dark-50);
	font-weight: 600;
}
.itf-header__meta-value { font-weight: 500; color: var(--color-dark); }

/* =========================================================================
   Sticky mini-bar (appears on scroll)
   ========================================================================= */
.itf-stickybar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px clamp(1rem, 4vw, 2.5rem);
	background: rgba(251, 251, 251, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--color-dark-10);
	transform: translateY(-100%);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.itf-stickybar.is-visible { transform: translateY(0); }
.itf-stickybar__info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.itf-stickybar__logo img,
.itf-stickybar__logo svg { height: 26px; width: auto; display: block; }
.itf-stickybar__title {
	font-weight: 600;
	font-size: 0.95rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.itf-stickybar__title em { font-family: var(--font-instrument); font-style: italic; color: var(--color-primary); }
@media (max-width: 640px) {
	.itf-stickybar__title { display: none; }
}

/* =========================================================================
   Dark banner (banner--dark) — final CTA
   ========================================================================= */
.itf-banner--dark {
	background: var(--color-dark);
	border-radius: var(--radius-banner);
	margin: 0 16px;
	padding: 100px 40px;
	position: relative;
	overflow: hidden;
	text-align: center;
}
.itf-banner--dark .itf-banner__inner {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	position: relative;
	z-index: 1;
}
.itf-banner--dark .itf-banner__subtitle { color: var(--color-white-50); font-size: 1.25rem; margin: 0; letter-spacing: -0.02em; }
.itf-banner--dark .itf-banner__title {
	color: var(--color-white);
	font-size: clamp(2rem, 1rem + 5vw, 4.5rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin: 0;
	text-wrap: balance;
}
.itf-banner--dark .itf-banner__title em {
	font-family: var(--font-instrument);
	font-style: italic;
	color: var(--color-white);
}
.itf-banner--dark .itf-banner__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.itf-banner--dark .c-button--secondary {
	color: var(--color-dark);
	background-color: var(--color-white);
}
.itf-banner--dark .c-button--secondary .c-button__icon svg { stroke: var(--color-dark); }
.itf-banner--dark .c-button--secondary:hover { background-color: var(--color-light); }
.itf-banner--dark .c-button--ghost {
	background: transparent;
	color: var(--color-white);
	border: 1px solid rgba(243, 243, 243, 0.3);
}
.itf-banner--dark .c-button--ghost:hover { background: rgba(243, 243, 243, 0.08); color: var(--color-white); }
@media (max-width: 1024px) { .itf-banner--dark { padding: 72px 32px; } }
@media (max-width: 768px) { .itf-banner--dark { padding: 56px 24px; border-radius: 16px; } }

/* =========================================================================
   Footer
   ========================================================================= */
.itf-footer {
	margin-top: clamp(4rem, 8vw, 6rem);
	padding: 48px 0;
	border-top: 1px solid var(--color-dark-10);
	color: var(--color-dark-60);
	font-size: 0.875rem;
}
.itf-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.itf-footer__logo img,
.itf-footer__logo svg { height: 30px; width: auto; }
.itf-footer a { color: var(--color-primary); }

/* =========================================================================
   Interactive canvas background (subtle, performance-friendly)
   ========================================================================= */
.itf-bg-canvas {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: -1;
	background: transparent;
}
@media (prefers-reduced-motion: reduce) {
	.itf-bg-canvas { display: none; }
}

/* =========================================================================
   Accepted state lock
   ========================================================================= */
.itf-accepted-banner {
	background: rgba(33, 160, 80, 0.1);
	border: 1px solid rgba(33, 160, 80, 0.3);
	color: #157a40;
	border-radius: var(--radius-card);
	padding: 16px 24px;
	margin: 24px auto;
	max-width: 1200px;
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 500;
}
body.itf-is-accepted .itf-interactive-lock {
	opacity: 0.55;
	pointer-events: none;
	user-select: none;
}

/* =========================================================================
   Quote deck — full-viewport vertical slider (v1.3.0)
   The full-viewport look is kept, but the scroll-to-slide wheel hijack and CSS
   scroll-snap were removed: the page is now ONE coherent, freely scrollable
   document smoothed by GSAP ScrollSmoother (see assets/js/deck.js). Slides flow
   naturally (min-height:100dvh) so tall content (pricing, FAQ) is never clipped
   and never double-scrolls. The deck is still gated behind .itfq-deck-on (added
   by deck.js) so a no-JS / reduced-motion visit degrades to a normal long-scroll
   page. Fixed chrome (header, mini-bar, modal, side-nav, counter, hint) lives
   OUTSIDE #smooth-content so ScrollSmoother's transform never breaks it.
   ========================================================================= */
:root { --itfq-header-h: 76px; }

body.single-quote.itfq-deck-on {
	overflow-x: hidden;
	scrollbar-width: none;
}
body.single-quote.itfq-deck-on::-webkit-scrollbar { width: 0; height: 0; }

/* ScrollSmoother scaffold — neutral pass-through wrappers. ScrollSmoother sets
   the positioning/transform inline at runtime; with JS off (or reduced motion,
   when we skip init) these stay transparent and the page scrolls natively. */
#smooth-wrapper, #smooth-content { max-width: none; margin: 0; padding: 0; }

.itfq-deck.itf-quote { max-width: none; margin: 0; padding: 0; }
.itfq-deck .wp-block-post-content { max-width: none; }

/* Each quote block (wrapped by the plugin) becomes a full-bleed slide that fills
   at least one viewport — keeping the deck look. With ScrollSmoother smoothing
   the MAIN page scroll (not nested containers), slides now FLOW: tall content
   (pricing, FAQ) grows the slide past the viewport and scrolls as part of the
   one smooth page scroll, instead of clipping into a nested scroller. */
.itfq-deck .itf-slide {
	position: relative;
	min-height: 100vh;           /* fallback for old browsers */
	min-height: 100dvh;
	/* Break out of WordPress' constrained layout so the (dark) slide is truly
	   edge-to-edge. !important beats core's `margin:auto !important` and the
	   `max-width:contentSize` that `.is-layout-constrained` injects on children. */
	width: 100vw;
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	display: flex;
	flex-direction: column;
	justify-content: safe center; /* centre when it fits, fall back to top when content overflows */
	align-items: center;
	overflow: visible;           /* tall slides flow into the page, no inner scroller */
	padding-top: calc(var(--itfq-header-h) + clamp(1.25rem, 4vh, 2.75rem));
	padding-bottom: clamp(2rem, 6vh, 4rem);
	box-sizing: border-box;
}
/* Re-create the brand 1200px content column inside the full-bleed slide. */
.itfq-deck .itf-slide > .itf-block {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding-left: clamp(20px, 5vw, 64px);
	padding-right: clamp(20px, 5vw, 64px);
	box-sizing: border-box;
}

/* Light slides stay transparent so the brand canvas shows through;
   dark slides cover it on the brand near-black. */
.itfq-deck .itf-slide--dark {
	background: var(--color-dark, #020308);
	color: var(--color-white, #F3F3F3);
}
.itf-slide--dark :is(h1,h2,h3,h4,p,li,td,th,figcaption,blockquote) { color: var(--color-white, #F3F3F3); }
.itf-slide--dark :is(h1,h2,h3) em { color: var(--color-white, #F3F3F3); }
.itf-slide--dark :is([class*="__desc"],[class*="__note"],[class*="__label"],[class*="__meta"],.text-muted) {
	color: rgba(243, 243, 243, 0.66);
}
.itf-slide--dark :is(.itf-deliverables__item,.itf-process__step,.itf-tech__chip,[class*="__card"],[class*="__item"]) {
	background: rgba(243, 243, 243, 0.05);
	border-color: rgba(243, 243, 243, 0.16);
}
/* Span elements with explicit colours that need to go white on dark slides */
.itf-slide--dark .itf-deliverables__check {
	background: rgba(255, 255, 255, 0.12);
	color: var(--color-white);
}
.itf-slide--dark .itf-deliverables__check svg { stroke: var(--color-white); }
.itf-slide--dark .itf-process__num { color: rgba(243, 243, 243, 0.6); }
.itf-slide--dark .itf-process__step-title { color: var(--color-white); }
.itf-slide--dark .itf-process__step-desc { color: rgba(243, 243, 243, 0.66); }
.itf-slide--dark .itf-tech__label { color: var(--color-white); }

/* ---- accept-banner: full-bleed in deck dark slides ---- */
/* The slide already provides the dark bg; strip the banner's own border-radius,
   margin and max-width so it fills the viewport edge-to-edge. */
.itfq-deck .itf-slide--dark > .itf-block.itf-accept-banner {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}
.itfq-deck .itf-slide--dark .itf-banner--dark {
	border-radius: 0;
	margin: 0;
}

/* ---- fixed deck chrome ---- */
body.single-quote.itfq-deck-on .itf-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 60;
	padding: 13px 0;
	background: rgba(251, 251, 251, 0.82);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--color-dark-10);
}
body.single-quote.itfq-deck-on .itf-header__inner { max-width: none; padding: 0 clamp(1rem, 4vw, 2.5rem); }

/* sticky accept bar lives at the BOTTOM in deck mode (top is the header). */
body.single-quote.itfq-deck-on .itf-stickybar {
	top: auto; bottom: 0;
	transform: translateY(100%);
	border-top: 1px solid var(--color-dark-10);
	border-bottom: 0;
}
body.single-quote.itfq-deck-on .itf-stickybar.is-visible { transform: translateY(0); }

/* accepted banner: persistent strip just under the header. */
body.single-quote.itfq-deck-on .itf-accepted-banner {
	position: fixed;
	top: var(--itfq-header-h); left: 0; right: 0;
	z-index: 55;
	margin: 0; border-radius: 0;
	justify-content: center;
}

/* ---- slide counter (NN / total + section label) ---- */
.itfq-counter {
	position: fixed;
	left: clamp(1rem, 4vw, 2.5rem);
	top: calc(var(--itfq-header-h) + clamp(0.6rem, 2vh, 1rem)); /* under the fixed header, clear of the bottom accept bar */
	z-index: 40;
	display: flex; align-items: baseline; gap: 0.6rem;
	font-family: var(--font-dm);
	pointer-events: none;
	color: var(--color-dark);
	transition: color 0.3s ease;
}
body.itfq-slide-dark .itfq-counter { color: var(--color-white); }
/* On accepted quotes the green banner sits under the header — drop the counter below it. */
body.single-quote.itfq-deck-on.itf-is-accepted .itfq-counter { top: calc(var(--itfq-header-h) + 3.6rem); }
.itfq-counter__num { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.itfq-counter__num b { font-size: 1.15rem; }
.itfq-counter__total { opacity: 0.55; }
.itfq-counter__label { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; font-weight: 600; opacity: 0.85; }

/* ---- side numbered nav (desktop) ---- */
.itfq-nav {
	position: fixed;
	right: clamp(0.75rem, 2vw, 1.6rem);
	top: 50%; transform: translateY(-50%);
	z-index: 40;
	display: flex; flex-direction: column; align-items: flex-end; gap: 11px;
	list-style: none; margin: 0; padding: 0;
}
.itfq-nav li { display: flex; justify-content: flex-end; }
/* Button only holds the dot; the label is positioned absolutely so it never
   shifts the dot — keeping every dot in one clean vertical line. */
.itfq-nav__btn {
	position: relative;
	display: flex; align-items: center;
	background: none; border: 0; cursor: pointer; padding: 3px 0;
	color: var(--color-dark); font-family: var(--font-dm);
	transition: color 0.3s ease;
}
body.itfq-slide-dark .itfq-nav__btn { color: rgba(255, 255, 255, 0.9); }
.itfq-nav__dot {
	width: 10px; height: 10px; border-radius: 50%;
	border: 2px solid currentColor; background: transparent;
	box-shadow: 0 0 0 2px rgba(128, 128, 128, 0.18);
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.itfq-nav__label {
	position: absolute;
	right: calc(100% + 12px); top: 50%;
	font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap;
	opacity: 0; transform: translateY(-50%) translateX(6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}
.itfq-nav__btn:hover .itfq-nav__label,
.itfq-nav__btn.is-active .itfq-nav__label { opacity: 1; transform: translateY(-50%); }
.itfq-nav__btn.is-active { color: var(--color-primary); }
body.itfq-slide-dark .itfq-nav__btn.is-active { color: var(--color-white); }
.itfq-nav__btn.is-active .itfq-nav__dot { background: currentColor; transform: scale(1.3); box-shadow: none; }
.itfq-nav__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* ---- scroll hint (first slide only) ---- */
.itfq-scroll-hint {
	position: fixed; left: 50%; bottom: clamp(1rem, 4vh, 1.75rem); transform: translateX(-50%);
	z-index: 39; pointer-events: none;
	display: flex; flex-direction: column; align-items: center; gap: 5px;
	font-family: var(--font-dm); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--color-dark-50); transition: opacity 0.35s ease;
}
body.itfq-slide-dark .itfq-scroll-hint { color: rgba(243, 243, 243, 0.6); }
.itfq-scroll-hint svg { animation: itfq-bob 1.7s ease-in-out infinite; }
@keyframes itfq-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* footer = short closing strip at the very end of the deck. (Footer is hidden
   on quote pages — see "Footer removed" rule below — but keep this tidy.) */
body.single-quote.itfq-deck-on .itf-footer {
	min-height: auto;
	padding: 2.75rem 1rem;
}

/* ---- mobile ---- */
@media (max-width: 640px) {
	.itfq-nav { display: none; }
	.itfq-counter { left: 1rem; top: calc(var(--itfq-header-h) + 0.5rem); }
	/* Clear the slide counter line so headings of tall (top-aligned) slides
	   don't collide with it. */
	.itfq-deck .itf-slide { padding-top: calc(var(--itfq-header-h) + 2.75rem); }
}

/* ---- reduced motion: no smoothing, no animation ----
   deck.js also skips ScrollSmoother init under prefers-reduced-motion, so the
   page is a plain native scroll; here we just stop the hint's bob. */
@media (prefers-reduced-motion: reduce) {
	.itfq-scroll-hint svg { animation: none; }
}

/* Deck hero: long single-word client names (e.g. "DESKinžinjering") must not
   overflow the viewport on small screens. */
.itfq-deck .itf-slide .itf-hero__title { overflow-wrap: break-word; }
@media (max-width: 640px) {
	.itfq-deck .itf-slide .itf-hero__title { font-size: clamp(2rem, 9.5vw, 3.2rem); }
}

/* =========================================================================
   Quote tweaks (2026-06-17): wider hero, accept-slide disclaimer, no footer
   ========================================================================= */

/* Hero content column widened to 900px (was 760 in the block style). */
.itf-hero .itf-hero__inner { max-width: 900px; }

/* Legal disclaimer under the single Accept button on the final slide. */
.itf-banner__disclaimer {
	max-width: 560px;
	margin: 4px auto 0;
	font-size: 0.84rem;
	line-height: 1.55;
	color: rgba(243, 243, 243, 0.62);
	text-align: center;
}

/* Footer removed from quote pages — the deck is slides only and ends on the
   Accept slide. (Belt-and-suspenders to the template change.) */
body.single-quote .itf-footer,
body.single-quote > footer.wp-block-template-part,
body.single-quote .wp-block-template-part:has(.itf-footer) { display: none; }

/* Team grid: centre the members (a single member no longer sits on the left). */
.itf-team .itf-team__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px 36px;
}
.itf-team .itf-team__card { width: 200px; }

/* Process steps: centre them (a 3-step process no longer hugs the left of the 4-col grid). */
.itf-process .itf-process__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 20px;
}
.itf-process .itf-process__step { width: 280px; max-width: 100%; }