/**
 * Servicii — "Precizie de fabrică, de la cotă la montaj".
 *
 * The page borrows the language of a technical drawing rather than a
 * lifestyle catalogue: a faint drafting grid behind the hero, crop marks on the
 * photographs, dimension lines that draw themselves, and specification sheets
 * where a brochure would put a list of adjectives. Every claim on the page is one
 * the business already makes elsewhere on the site.
 *
 * Section rhythm: ink hero → white pillars → warm services → ink process →
 * white works → red call to action.
 *
 * Replaces v3-atelier.css on this page (that file stays on disk, unused, so the
 * previous design can be restored by switching the enqueue back).
 */

/* ── Tokens ───────────────────────────────────────────────────────────────── */

body.iq-atelier {
	--sv-ink: #0F0F10;
	--sv-ink-2: #17181A;
	--sv-paper: #FFFFFF;
	--sv-warm: #EFEAE3;
	--sv-rule: #E4E2DF;
	--sv-graphite: #55585C;
	--sv-red: #7C0B0B;
	--sv-red-deep: #480404;
	--sv-on-dark: rgba(255, 255, 255, .72);
	--sv-on-dark-dim: rgba(255, 255, 255, .6);
	--sv-line-dark: rgba(255, 255, 255, .16);
	--sv-display: 'Manrope', system-ui, sans-serif;
	--sv-body: 'Inter', system-ui, sans-serif;
	--sv-ease: cubic-bezier(.22, .61, .36, 1);
	--sv-shell: 1320px;
	--sv-pad-x: max(20px, calc((100% - var(--sv-shell)) / 2));
	--sv-pad-y: clamp(64px, 8vw, 120px);

	/* Woodmart draws focus rings with `!important` from these. */
	--wd-otl-width: 3px;
	--wd-otl-style: solid;
	--wd-otl-color: var(--sv-red);
	--wd-otl-offset: 3px;
}

/* ── Elementor plumbing ───────────────────────────────────────────────────── */

body.iq-atelier .elementor .e-con {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--container-max-width: none;
	--content-width: 100%;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--grid-gap: 0px;
}

body.iq-atelier .elementor .e-con-inner { display: contents; }
body.iq-atelier .elementor .elementor-widget { width: 100%; }
body.iq-atelier .elementor .elementor-widget-container { display: block; margin: 0; padding: 0; }
body.iq-atelier .elementor .elementor-widget-image,
body.iq-atelier .elementor .elementor-widget-image figure { margin: 0; line-height: 0; }

:where(body.iq-atelier .elementor) *,
:where(body.iq-atelier .elementor) *::before,
:where(body.iq-atelier .elementor) *::after { box-sizing: border-box; }
:where(body.iq-atelier .elementor) img { display: block; max-width: 100%; height: auto; }
:where(body.iq-atelier .elementor) :is(h1, h2, h3) { margin: 0; font-family: var(--sv-display); font-weight: 600; }
:where(body.iq-atelier .elementor) :is(p, dl, dd, figure) { margin: 0; }
:where(body.iq-atelier .elementor) a { color: inherit; text-decoration: none; }

body.iq-atelier .elementor {
	font-family: var(--sv-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--sv-ink-2);
	background: var(--sv-paper);
}

body.iq-atelier .wd-page-title,
body.iq-atelier .wd-sidebar,
body.iq-atelier .widget-area { display: none !important; }

body.iq-atelier .elementor :is(a, button):focus-visible {
	outline: 3px solid var(--wd-otl-color, var(--sv-red));
	outline-offset: 3px;
}

/* ── Sections ─────────────────────────────────────────────────────────────── */

body.iq-atelier .elementor .e-con.sv-sec {
	display: block;
	padding: var(--sv-pad-y) var(--sv-pad-x);
	position: relative;
}

body.iq-atelier .elementor .e-con.sv-sec--dark { background: var(--sv-ink); color: #FFFFFF; --wd-otl-color: #FFFFFF; }
body.iq-atelier .elementor .e-con.sv-sec--warm { background: var(--sv-warm); }

/* Shared head: kicker, title, optional aside. */
body.iq-atelier .elementor .e-con.sv-head {
	display: grid;
	gap: 14px;
	margin-block-end: clamp(32px, 4vw, 56px);
}

@media (min-width: 1000px) {
	body.iq-atelier .elementor .e-con.sv-head--split {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: clamp(28px, 3vw, 48px);
		align-items: end;
	}
}

body.iq-atelier .elementor .e-con.sv-head > .e-con { display: grid; gap: 14px; }

body.iq-atelier .elementor .sv-kicker .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--sv-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sv-red);
}

/* A short dimension tick before every kicker: the page's recurring mark. */
body.iq-atelier .elementor .sv-kicker .elementor-heading-title::before {
	content: '';
	inline-size: 28px;
	block-size: 9px;
	border-inline: 1px solid currentColor;
	background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
}

body.iq-atelier .elementor .sv-sec--dark .sv-kicker .elementor-heading-title { color: rgba(239, 234, 227, .86); }

body.iq-atelier .elementor .sv-h2 .elementor-heading-title {
	max-inline-size: 20ch;
	font-size: clamp(30px, 3.4vw, 48px);
	line-height: 1.08;
	letter-spacing: -.03em;
	color: inherit;
}

body.iq-atelier .elementor .sv-head__aside,
body.iq-atelier .elementor .sv-head__aside p {
	max-inline-size: 46ch;
	font-size: 17px;
	color: var(--sv-graphite);
}

body.iq-atelier .elementor .sv-sec--dark :is(.sv-head__aside, .sv-head__aside p) { color: var(--sv-on-dark); }

body.iq-atelier .elementor .sv-head__aside a,
body.iq-atelier .elementor .sv-inline-link {
	color: var(--sv-red);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: .25em;
}

body.iq-atelier .elementor .sv-sec--dark .sv-head__aside a { color: #FFFFFF; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

body.iq-atelier .elementor .e-con.sv-actions { display: flex; flex-wrap: wrap; gap: 12px; }
body.iq-atelier .elementor .sv-actions > .elementor-widget { width: auto; }

/* `all: unset` has to come first or it wipes what precedes it. */
body.iq-atelier .elementor .sv-btn .elementor-button {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 52px;
	padding: 0 26px;
	border: 1px solid transparent;
	border-radius: 2px;
	font-family: var(--sv-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background 240ms var(--sv-ease), color 240ms var(--sv-ease), border-color 240ms var(--sv-ease);
}

body.iq-atelier .elementor .sv-btn .elementor-button-text { all: unset; }

body.iq-atelier .elementor .sv-btn--primary .elementor-button { background: var(--sv-red); color: #FFFFFF; }
body.iq-atelier .elementor .sv-btn--primary .elementor-button:hover { background: var(--sv-red-deep); }

body.iq-atelier .elementor .sv-btn--ghost .elementor-button { border-color: rgba(255, 255, 255, .42); color: #FFFFFF; }
body.iq-atelier .elementor .sv-btn--ghost .elementor-button:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .08); }

body.iq-atelier .elementor .sv-btn--light .elementor-button { background: #FFFFFF; color: var(--sv-red); }
body.iq-atelier .elementor .sv-btn--light .elementor-button:hover { background: var(--sv-warm); }

body.iq-atelier .elementor .sv-btn .elementor-button:focus-visible { outline: 3px solid var(--wd-otl-color); outline-offset: 3px; }

/* ── Live opening-hours line ──────────────────────────────────────────────── */

body.iq-atelier .elementor .sv-status {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sv-on-dark);
}

body.iq-atelier .elementor .sv-status__dot {
	flex: 0 0 auto;
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	transform: translateY(-1px);
}

body.iq-atelier .elementor .sv-status[data-state="open"] .sv-status__dot {
	background: #3FBF6E;
	box-shadow: 0 0 0 0 rgba(63, 191, 110, .55);
	animation: sv-pulse 2.2s ease-out infinite;
}

body.iq-atelier .elementor .sv-status[data-state="closed"] .sv-status__dot { background: #E3A13B; }

@keyframes sv-pulse {
	70% { box-shadow: 0 0 0 8px rgba(63, 191, 110, 0); }
	100% { box-shadow: 0 0 0 0 rgba(63, 191, 110, 0); }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

/* The drafting grid, fading out towards the edges so it never competes with
   the text. Pure CSS: no image, no request. */
body.iq-atelier .elementor .e-con.sv-hero {
	display: grid;
	gap: clamp(36px, 4vw, 56px);
	padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6vw, 88px);
	overflow: hidden;
	isolation: isolate;
}

body.iq-atelier .elementor .e-con.sv-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(120% 90% at 70% 40%, #000 30%, transparent 78%);
	mask-image: radial-gradient(120% 90% at 70% 40%, #000 30%, transparent 78%);
	pointer-events: none;
}

@media (min-width: 1000px) {
	body.iq-atelier .elementor .e-con.sv-hero {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		align-items: center;
	}

	body.iq-atelier .elementor .sv-hero > .sv-pillnav-wrap { grid-column: 1 / -1; }
}

body.iq-atelier .elementor .e-con.sv-hero__text { display: grid; gap: 20px; align-content: center; }

body.iq-atelier .elementor .sv-crumbs,
body.iq-atelier .elementor .sv-crumbs p { font-size: 14px; color: var(--sv-on-dark-dim); }
body.iq-atelier .elementor .sv-crumbs a { color: var(--sv-on-dark); text-decoration: underline; text-underline-offset: .2em; }

body.iq-atelier .elementor .sv-hero__title .elementor-heading-title {
	font-size: clamp(38px, 5vw, 72px);
	line-height: 1.02;
	letter-spacing: -.035em;
	color: #FFFFFF;
	text-wrap: balance;
}

body.iq-atelier .elementor .sv-hero__lead,
body.iq-atelier .elementor .sv-hero__lead p {
	max-inline-size: 48ch;
	font-size: clamp(17px, 1.3vw, 19px);
	line-height: 1.6;
	color: var(--sv-on-dark);
}

/* Media frame: film, crop marks, a dimension line along the top, a pause
   button. The frame is 16:10 so the landscape footage keeps its subject. */
body.iq-atelier .elementor .sv-media {
	position: relative;
	aspect-ratio: 16 / 10;
	margin: 18px 0 0;
}

body.iq-atelier .elementor .sv-media__frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 4px;
	background: #000000;
}

body.iq-atelier .elementor .sv-media video,
body.iq-atelier .elementor .sv-media img {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	display: block;
}

body.iq-atelier .elementor .sv-media__chips {
	position: absolute;
	inset: auto auto 14px 14px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.iq-atelier .elementor .sv-media__chips li {
	margin: 0;
	padding: 6px 10px;
	border-radius: 2px;
	background: rgba(15, 15, 16, .72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #FFFFFF;
}

body.iq-atelier .elementor button.sv-media__toggle {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	inset: auto 14px 14px auto;
	z-index: 3;
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 50%;
	background: rgba(15, 15, 16, .5);
	color: #FFFFFF;
	cursor: pointer;
}

body.iq-atelier .elementor button.sv-media__toggle[hidden] { display: none; }
body.iq-atelier .elementor button.sv-media__toggle:hover { background: rgba(255, 255, 255, .18); }

body.iq-atelier .elementor button.sv-media__toggle::before {
	content: '';
	inline-size: 11px;
	block-size: 13px;
	background:
		linear-gradient(currentColor, currentColor) left / 4px 100% no-repeat,
		linear-gradient(currentColor, currentColor) right / 4px 100% no-repeat;
}

body.iq-atelier .elementor button.sv-media__toggle[data-state="play"]::before {
	inline-size: 0;
	block-size: 0;
	margin-inline-start: 4px;
	background: none;
	border-block: 7px solid transparent;
	border-inline-start: 12px solid currentColor;
}

/* ── Drawing marks: crop corners and dimension lines ──────────────────────── */

.sv-crop { position: relative; }

.sv-crop::before,
.sv-crop::after {
	content: '';
	position: absolute;
	z-index: 2;
	inline-size: 18px;
	block-size: 18px;
	pointer-events: none;
	border-color: currentColor;
	border-style: solid;
	opacity: .9;
}

.sv-crop::before { inset: -9px auto auto -9px; border-width: 1px 0 0 1px; }
.sv-crop::after { inset: auto -9px -9px auto; border-width: 0 1px 1px 0; }

body.iq-atelier .elementor .sv-dim {
	position: absolute;
	inset: -20px 0 auto;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 11px;
	border-inline: 1px solid rgba(255, 255, 255, .7);
	pointer-events: none;
}

body.iq-atelier .elementor .sv-dim::before {
	content: '';
	position: absolute;
	inset: 50% 0 auto;
	block-size: 1px;
	background: rgba(255, 255, 255, .7);
	transform-origin: center;
	animation: sv-draw 1100ms var(--sv-ease) both 200ms;
}

body.iq-atelier .elementor .sv-dim span {
	position: relative;
	padding: 0 12px;
	background: var(--sv-ink);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, .82);
}

@keyframes sv-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Pillar nav under the hero ────────────────────────────────────────────── */

body.iq-atelier .elementor .sv-pillnav {
	display: grid;
	border-block-start: 1px solid var(--sv-line-dark);
}

@media (min-width: 700px) {
	body.iq-atelier .elementor .sv-pillnav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

body.iq-atelier .elementor .sv-pillnav a {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	column-gap: 14px;
	row-gap: 4px;
	align-items: baseline;
	padding: 22px 4px 22px 0;
	border-block-end: 1px solid var(--sv-line-dark);
	color: #FFFFFF;
}

@media (min-width: 700px) {
	body.iq-atelier .elementor .sv-pillnav a { padding-inline: 0 24px; border-block-end: 0; }
	body.iq-atelier .elementor .sv-pillnav a + a { padding-inline-start: 24px; border-inline-start: 1px solid var(--sv-line-dark); }
}

body.iq-atelier .elementor .sv-pillnav span { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--sv-on-dark-dim); }
body.iq-atelier .elementor .sv-pillnav strong { font-family: var(--sv-display); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
body.iq-atelier .elementor .sv-pillnav em { grid-column: 2; font-style: normal; font-size: 15px; color: var(--sv-on-dark); }

body.iq-atelier .elementor .sv-pillnav a::after {
	content: '↓';
	grid-row: 1;
	grid-column: 3;
	color: var(--sv-on-dark-dim);
	transition: transform 240ms var(--sv-ease), color 240ms var(--sv-ease);
}

/* Hover: a red rule draws along the top, like a dimension being set. */
body.iq-atelier .elementor .sv-pillnav a::before {
	content: '';
	position: absolute;
	inset: -1px 24px auto 0;
	block-size: 2px;
	background: var(--sv-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 420ms var(--sv-ease);
}

body.iq-atelier .elementor .sv-pillnav a + a::before { inset-inline-start: 24px; }
body.iq-atelier .elementor .sv-pillnav a:hover::before,
body.iq-atelier .elementor .sv-pillnav a:focus-visible::before { transform: scaleX(1); }
body.iq-atelier .elementor .sv-pillnav a:hover::after { transform: translateY(3px); color: #FFFFFF; }

/* ── Pillars (tabs as specification sheets) ───────────────────────────────── */

.sv-tabs {
	display: flex;
	gap: 0;
	margin-block-end: clamp(24px, 3vw, 40px);
	border-block-end: 1px solid var(--sv-rule);
	overflow-x: auto;
	scrollbar-width: none;
}

.sv-tabs::-webkit-scrollbar { display: none; }
.sv-tabs[hidden] { display: none; }

body.iq-atelier .elementor button.sv-tab {
	all: unset;
	box-sizing: border-box;
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	flex: 0 0 auto;
	min-block-size: 56px;
	padding: 16px 22px 18px 0;
	margin-inline-end: 22px;
	font-family: var(--sv-display);
	font-size: clamp(17px, 1.6vw, 22px);
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--sv-graphite);
	cursor: pointer;
	transition: color 240ms var(--sv-ease);
}

body.iq-atelier .elementor button.sv-tab .sv-tab__num { font-family: var(--sv-body); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }

body.iq-atelier .elementor button.sv-tab::after {
	content: '';
	position: absolute;
	inset: auto 0 -1px 0;
	block-size: 2px;
	background: var(--sv-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 360ms var(--sv-ease);
}

body.iq-atelier .elementor button.sv-tab:hover { color: var(--sv-ink-2); }
body.iq-atelier .elementor button.sv-tab[aria-selected="true"] { color: var(--sv-ink-2); }
body.iq-atelier .elementor button.sv-tab[aria-selected="true"]::after { transform: scaleX(1); }
body.iq-atelier .elementor button.sv-tab:focus-visible { outline: 3px solid var(--sv-red); outline-offset: -3px; }

.sv-panel {
	display: grid;
	gap: clamp(28px, 3.5vw, 64px);
	align-items: center;
	color: var(--sv-ink-2);
}

.sv-panel + .sv-panel { margin-block-start: 56px; }
.is-tabs .sv-panel + .sv-panel { margin-block-start: 0; }
.sv-panel[hidden] { display: none; }

.is-tabs .sv-panel:not([hidden]) { animation: sv-in 460ms var(--sv-ease) both; }

@keyframes sv-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (min-width: 1000px) {
	.sv-panel { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

.sv-anchor { position: absolute; margin-block-start: -120px; }

body.iq-atelier .elementor .sv-panel__fig {
	color: var(--sv-ink-2);
	aspect-ratio: 16 / 10;
	margin: 9px;
}

body.iq-atelier .elementor .sv-panel__fig img {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	border-radius: 2px;
}

.sv-panel__num {
	font-size: 13px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: .06em;
	color: var(--sv-red);
}

.sv-panel__num span { color: var(--sv-graphite); }

body.iq-atelier .elementor .sv-panel__kicker { display: none; }

body.iq-atelier .elementor .sv-panel__title {
	margin-block-start: 10px;
	font-size: clamp(26px, 2.6vw, 38px);
	line-height: 1.1;
	letter-spacing: -.03em;
	text-wrap: balance;
}

.sv-panel__lead {
	margin-block-start: 16px;
	max-inline-size: 48ch;
	font-size: 17px;
	color: var(--sv-graphite);
}

/* The specification sheet: label left, value right, ruled like a title block. */
.sv-spec {
	margin-block-start: 28px;
	border-block-start: 1px solid var(--sv-ink-2);
}

.sv-spec__row {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 16px;
	padding-block: 14px;
	border-block-end: 1px solid var(--sv-rule);
}

.sv-spec dt {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sv-graphite);
}

.sv-spec dd { margin: 0; font-weight: 500; color: var(--sv-ink-2); }

/* ── Services ─────────────────────────────────────────────────────────────── */

body.iq-atelier .elementor .e-con.sv-cards {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
}

@media (min-width: 700px) {
	body.iq-atelier .elementor .e-con.sv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
	body.iq-atelier .elementor .e-con.sv-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

body.iq-atelier .elementor .e-con.sv-card {
	position: relative;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	gap: 10px;
	padding: 12px 12px 20px;
	background: var(--sv-paper);
	border-radius: 2px;
	transition: box-shadow 320ms var(--sv-ease), transform 320ms var(--sv-ease);
}

body.iq-atelier .elementor .e-con.sv-card:hover { box-shadow: 0 18px 40px rgba(15, 15, 16, .1); transform: translateY(-3px); }

body.iq-atelier .elementor .sv-card__fig { position: relative; overflow: hidden; margin-block-end: 8px; }

body.iq-atelier .elementor .sv-card__fig img {
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 700ms var(--sv-ease);
}

body.iq-atelier .elementor .e-con.sv-card:hover .sv-card__fig img { transform: scale(1.04); }

/* On hover a dimension line runs across the photograph. */
body.iq-atelier .elementor .sv-card__fig::after {
	content: '';
	position: absolute;
	inset: auto 14px 14px;
	block-size: 11px;
	border-inline: 1px solid #FFFFFF;
	background: linear-gradient(#FFFFFF, #FFFFFF) center / 100% 1px no-repeat;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4));
	transform: scaleX(0);
	transition: transform 520ms var(--sv-ease);
}

body.iq-atelier .elementor .e-con.sv-card:hover .sv-card__fig::after { transform: scaleX(1); }

body.iq-atelier .elementor .sv-card__title .elementor-heading-title {
	padding-inline: 8px;
	font-size: 21px;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--sv-ink-2);
}

body.iq-atelier .elementor .sv-card__body,
body.iq-atelier .elementor .sv-card__body p { padding-inline: 4px; font-size: 15px; color: var(--sv-graphite); }
body.iq-atelier .elementor .sv-card__body { padding-inline: 4px; }

body.iq-atelier .elementor .sv-card__link .elementor-button {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 44px;
	padding-inline: 8px;
	font-weight: 600;
	color: var(--sv-red);
	cursor: pointer;
}

body.iq-atelier .elementor .sv-card__link .elementor-button-text { all: unset; }
body.iq-atelier .elementor .sv-card__link .elementor-button::after { content: '→'; transition: transform 240ms var(--sv-ease); }
body.iq-atelier .elementor .e-con.sv-card:hover .sv-card__link .elementor-button::after { transform: translateX(4px); }

/* The whole card is the link target; the visible link stays the named one. */
body.iq-atelier .elementor .sv-card__link .elementor-button::before { content: ''; position: absolute; inset: 0; }

/* ── Process ──────────────────────────────────────────────────────────────── */

.sv-flow { position: relative; color: #FFFFFF; }

/* The rail behind the step tabs, filled up to the chosen step. */
.sv-flow__rail {
	display: none;
	position: absolute;
	inset: 27px 0 auto;
	block-size: 2px;
	background: var(--sv-line-dark);
}

.sv-flow__fill {
	display: block;
	block-size: 100%;
	background: #FFFFFF;
	transform: scaleX(var(--sv-p, 0));
	transform-origin: left;
	transition: transform 520ms var(--sv-ease);
}

.sv-flow.is-tabs .sv-flow__rail { display: block; }

.sv-flow .sv-tabs {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--sv-steps, 4), minmax(0, 1fr));
	border: 0;
	margin-block-end: clamp(28px, 3.4vw, 48px);
	overflow: visible;
}

body.iq-atelier .elementor .sv-flow button.sv-tab {
	display: grid;
	justify-items: start;
	gap: 12px;
	margin: 0;
	padding: 0 12px 0 0;
	min-block-size: 0;
	font-size: clamp(15px, 1.5vw, 20px);
	color: var(--sv-on-dark-dim);
}

body.iq-atelier .elementor .sv-flow button.sv-tab::after { display: none; }

/* The node on the rail. */
body.iq-atelier .elementor .sv-flow button.sv-tab .sv-tab__num {
	display: grid;
	place-items: center;
	inline-size: 56px;
	block-size: 56px;
	border: 1px solid var(--sv-line-dark);
	border-radius: 50%;
	background: var(--sv-ink);
	font-size: 14px;
	color: var(--sv-on-dark);
	transition: background 320ms var(--sv-ease), color 320ms var(--sv-ease), border-color 320ms var(--sv-ease);
}

body.iq-atelier .elementor .sv-flow button.sv-tab:hover { color: #FFFFFF; }
body.iq-atelier .elementor .sv-flow button.sv-tab:hover .sv-tab__num { border-color: #FFFFFF; }
body.iq-atelier .elementor .sv-flow button.sv-tab[aria-selected="true"] { color: #FFFFFF; }
body.iq-atelier .elementor .sv-flow button.sv-tab[aria-selected="true"] .sv-tab__num { background: #FFFFFF; border-color: #FFFFFF; color: var(--sv-ink); }
body.iq-atelier .elementor .sv-flow button.sv-tab:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 4px; }

.sv-step { display: grid; gap: 24px; }
.sv-step + .sv-step { margin-block-start: 48px; }
.is-tabs .sv-step + .sv-step { margin-block-start: 0; }
.sv-step[hidden] { display: none; }
.is-tabs .sv-step:not([hidden]) { animation: sv-in 460ms var(--sv-ease) both; }

@media (min-width: 1000px) {
	.sv-step { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 3vw, 48px); align-items: start; }
}

.sv-step__num { font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: .08em; color: var(--sv-on-dark-dim); }
.is-tabs .sv-step__num { display: none; }

body.iq-atelier .elementor .sv-step__title { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -.03em; color: #FFFFFF; }
.sv-step__summary { margin-block-start: 12px; max-inline-size: 36ch; font-size: 17px; color: var(--sv-on-dark); }

.sv-step__grid { display: grid; gap: 1px; background: var(--sv-line-dark); border: 1px solid var(--sv-line-dark); }

@media (min-width: 700px) {
	.sv-step__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sv-step__cell { padding: 22px 22px 26px; background: var(--sv-ink); }

.sv-step__cell dt {
	margin-block-end: 10px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sv-on-dark-dim);
}

.sv-step__cell dd { margin: 0; font-size: 16px; line-height: 1.55; color: #FFFFFF; }
.sv-step__cell--get { background: #1B1B1D; }
.sv-step__cell--get dt { color: rgba(239, 234, 227, .86); }

/* Phones: the step labels would crowd the rail, so only the nodes stay. */
@media (max-width: 599px) {
	body.iq-atelier .elementor .sv-flow button.sv-tab { font-size: 13px; gap: 8px; }
	body.iq-atelier .elementor .sv-flow button.sv-tab .sv-tab__num { inline-size: 44px; block-size: 44px; }
	.sv-flow__rail { inset-block-start: 21px; }
}

/* ── Works ────────────────────────────────────────────────────────────────── */

body.iq-atelier .elementor .e-con.sv-works__grid { display: grid; gap: clamp(16px, 2vw, 24px); }

@media (min-width: 800px) {
	body.iq-atelier .elementor .e-con.sv-works__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

body.iq-atelier .elementor .e-con.sv-work { position: relative; display: grid; gap: 12px; }

body.iq-atelier .elementor .sv-work__fig { overflow: hidden; }
body.iq-atelier .elementor .sv-work__fig img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 700ms var(--sv-ease); }
body.iq-atelier .elementor .e-con.sv-work:hover .sv-work__fig img { transform: scale(1.04); }

body.iq-atelier .elementor .sv-work__title .elementor-heading-title {
	font-size: 19px;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--sv-ink-2);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: .2em;
	transition: text-decoration-color 320ms var(--sv-ease);
}

body.iq-atelier .elementor .e-con.sv-work:hover .sv-work__title .elementor-heading-title { text-decoration-color: currentColor; }

body.iq-atelier .elementor .sv-work__link .elementor-button {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	min-block-size: 44px;
	align-items: center;
	font-size: 15px;
	font-weight: 500;
	color: var(--sv-graphite);
	cursor: pointer;
}

body.iq-atelier .elementor .sv-work__link .elementor-button-text { all: unset; }
body.iq-atelier .elementor .sv-work__link .elementor-button::before { content: ''; position: absolute; inset: 0; }

body.iq-atelier .elementor .sv-head__link .elementor-button {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 44px;
	font-weight: 600;
	color: var(--sv-red);
	text-decoration: underline;
	text-underline-offset: .25em;
	cursor: pointer;
}

body.iq-atelier .elementor .sv-head__link .elementor-button-text { all: unset; }
body.iq-atelier .elementor .sv-head__link { width: auto; justify-self: start; }

@media (min-width: 1000px) {
	body.iq-atelier .elementor .sv-head--split .sv-head__link { justify-self: end; }
}

/* ── Call to action ───────────────────────────────────────────────────────── */

body.iq-atelier .elementor .e-con.sv-cta {
	background: var(--sv-red);
	color: #FFFFFF;
	--wd-otl-color: #FFFFFF;
	padding-block: clamp(56px, 7vw, 96px);
}

body.iq-atelier .elementor .e-con.sv-cta__inner { display: grid; gap: 28px; }

@media (min-width: 1000px) {
	body.iq-atelier .elementor .e-con.sv-cta__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: 48px; }
}

body.iq-atelier .elementor .e-con.sv-cta__text,
body.iq-atelier .elementor .e-con.sv-cta__side { display: grid; gap: 16px; align-content: end; }

body.iq-atelier .elementor .sv-cta .sv-kicker .elementor-heading-title { color: rgba(255, 255, 255, .86); }
body.iq-atelier .elementor .sv-cta .sv-h2 .elementor-heading-title { color: #FFFFFF; }
body.iq-atelier .elementor .sv-cta__body,
body.iq-atelier .elementor .sv-cta__body p { max-inline-size: 48ch; font-size: 17px; color: rgba(255, 255, 255, .88); }
body.iq-atelier .elementor .sv-cta .sv-status { color: rgba(255, 255, 255, .9); }

/* ── Motion preferences ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	body.iq-atelier .elementor *,
	body.iq-atelier .elementor *::before,
	body.iq-atelier .elementor *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
}

/* Crop-mark colour per ground. */
body.iq-atelier .elementor .sv-hero .sv-crop { color: rgba(255, 255, 255, .55); }
body.iq-atelier .elementor .sv-panel__fig.sv-crop { color: var(--sv-ink-2); }

/* Elementor gives heading titles their own weight; the theme's type rules lose
   to it, so the page restates weight at the title itself. */
body.iq-atelier .elementor :is(.sv-hero__title, .sv-h2, .sv-card__title, .sv-work__title) .elementor-heading-title { font-family: var(--sv-display); font-weight: 600; }

/* Elementor containers default to a column; the action rows are rows. */
body.iq-atelier .elementor .e-con.sv-actions { flex-direction: row; align-items: center; }

/* In the hero the dimension line already marks the top edge, so only the
   bottom-right crop corner stays. */
body.iq-atelier .elementor .sv-hero .sv-crop::before { display: none; }
body.iq-atelier .elementor .sv-dim { inset-block-start: -24px; }

/* The rail runs from the first node's centre to the last one's: the last step
   sits flush right, so both ends of the line land on a node. */
.sv-flow .sv-tabs { grid-template-columns: repeat(calc(var(--sv-steps, 4) - 1), minmax(0, 1fr)) max-content; }
body.iq-atelier .elementor .sv-flow button.sv-tab:last-child { justify-items: end; text-align: end; padding-inline-end: 0; }
.sv-flow__rail { inset-inline: 28px; }

@media (max-width: 599px) {
	.sv-flow__rail { inset-inline: 22px; }
}

/* Phones: three equal tabs, labels only, so "Promptitudine" is never cut off
   behind a scroll the visitor cannot see. */
@media (max-width: 599px) {
	.sv-pillars .sv-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
	.sv-pillars .sv-tabs[hidden] { display: none; }
	body.iq-atelier .elementor .sv-pillars button.sv-tab { justify-content: center; margin: 0; padding: 14px 2px 16px; font-size: 14px; letter-spacing: -.015em; }
	body.iq-atelier .elementor .sv-pillars button.sv-tab .sv-tab__num { display: none; }
}

/* ── Cards: the whole card is the link ────────────────────────────────────────
   Elementor positions every widget, so the stretched `::before` on the button
   only covered the button's own widget — the photograph was not clickable.
   The widgets inside a card drop back to static; the card stays positioned. */
body.iq-atelier .elementor :is(.sv-card, .sv-work) > .elementor-element { position: static; }

/* ── Works on phones and small tablets: a swipe rail ─────────────────────────
   Three full-width 4:5 photographs stacked to nearly 1,900px. Below 800px the
   works become a rail: one card and the edge of the next, the title laid over
   the photograph, and a position bar under it. */
@media (max-width: 799px) {
	body.iq-atelier .elementor .e-con.sv-works { padding-block: 56px 48px; }

	body.iq-atelier .elementor .sv-works .e-con.sv-head {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		column-gap: 16px;
		row-gap: 8px;
		margin-block-end: 20px;
	}

	body.iq-atelier .elementor .sv-works .e-con.sv-head > .e-con { gap: 8px; }
	body.iq-atelier .elementor .sv-works .sv-h2 .elementor-heading-title { font-size: 30px; }

	body.iq-atelier .elementor .sv-works .sv-head__link .elementor-button { font-size: 15px; }

	body.iq-atelier .elementor .e-con.sv-works__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(80%, 320px);
		gap: 12px;
		/* Bleed to the screen edge. Elementor sizes containers through its own
		   width and margin variables, so both are restated here. */
		--width: auto;
		--margin-left: -20px;
		--margin-right: -20px;
		width: auto;
		max-width: none;
		margin-inline: -20px;
		padding-inline: 20px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 20px;
		scrollbar-width: none;
	}

	body.iq-atelier .elementor .e-con.sv-works__grid::-webkit-scrollbar { display: none; }

	/* One stack: photograph, then title and link laid over its lower edge. */
	body.iq-atelier .elementor .e-con.sv-work {
		grid-template-areas: 'stack';
		gap: 0;
		overflow: hidden;
		border-radius: 4px;
		isolation: isolate;
		scroll-snap-align: start;
	}

	/* The last card snaps to the end, or it could never be fully reached. */
	body.iq-atelier .elementor .e-con.sv-work:last-child { scroll-snap-align: end; }

	body.iq-atelier .elementor .sv-work > .elementor-element { grid-area: stack; }

	body.iq-atelier .elementor .sv-work__fig img { aspect-ratio: 4 / 5; }

	body.iq-atelier .elementor .e-con.sv-work::after {
		content: '';
		position: absolute;
		inset: 45% 0 0;
		z-index: 1;
		background: linear-gradient(transparent, rgba(15, 15, 16, .82));
		pointer-events: none;
	}

	body.iq-atelier .elementor .sv-work__title {
		z-index: 2;
		align-self: end;
		padding: 0 16px 46px;
		pointer-events: none;
	}

	body.iq-atelier .elementor .sv-work__title .elementor-heading-title {
		font-size: 19px;
		line-height: 1.25;
		color: #FFFFFF;
		text-wrap: balance;
	}

	body.iq-atelier .elementor .sv-work__link {
		z-index: 2;
		align-self: end;
		padding: 0 16px 10px;
	}

	body.iq-atelier .elementor .sv-work__link .elementor-button {
		gap: 8px;
		color: rgba(255, 255, 255, .88);
	}

	body.iq-atelier .elementor .sv-work__link .elementor-button::after { content: '→'; }

	/* Position under the rail: a bar and "1 / 3". Added by the page script. */
	body.iq-atelier .elementor .sv-rail-meta {
		display: flex;
		align-items: center;
		gap: 14px;
		margin-block-start: 16px;
	}

	body.iq-atelier .elementor .sv-rail-bar {
		flex: 1 1 auto;
		block-size: 2px;
		overflow: hidden;
		background: var(--sv-rule);
	}

	body.iq-atelier .elementor .sv-rail-bar span {
		display: block;
		block-size: 100%;
		inline-size: var(--sv-rail-size, 33%);
		background: var(--sv-ink-2);
		transform: translateX(var(--sv-rail-at, 0%));
		transition: transform 120ms linear;
	}

	body.iq-atelier .elementor .sv-rail-count {
		font-size: 13px;
		font-weight: 500;
		font-variant-numeric: tabular-nums;
		color: var(--sv-graphite);
	}
}

/* The position bar belongs to the rail only. */
@media (min-width: 800px) {
	body.iq-atelier .elementor .sv-rail-meta { display: none; }
}

/* ── Four services under the hero ─────────────────────────────────────────── */

/* The bar was drawn for three pillars; with four services it is two by two on
   tablets and one row from 1000px. */
@media (min-width: 700px) {
	body.iq-atelier .elementor .sv-pillnav:has(> a:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.iq-atelier .elementor .sv-pillnav:has(> a:nth-child(4)) a:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
	body.iq-atelier .elementor .sv-pillnav:has(> a:nth-child(4)) a:nth-child(odd)::before { inset-inline-start: 0; }
	body.iq-atelier .elementor .sv-pillnav:has(> a:nth-child(4)) a:nth-child(-n+2) { border-block-end: 1px solid var(--sv-line-dark); }
}

@media (min-width: 1000px) {
	body.iq-atelier .elementor .sv-pillnav:has(> a:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	body.iq-atelier .elementor .sv-pillnav:has(> a:nth-child(4)) a:nth-child(-n+2) { border-block-end: 0; }
	body.iq-atelier .elementor .sv-pillnav:has(> a:nth-child(4)) a:nth-child(n+2) { padding-inline-start: 24px; border-inline-start: 1px solid var(--sv-line-dark); }
	body.iq-atelier .elementor .sv-pillnav:has(> a:nth-child(4)) a:nth-child(n+2)::before { inset-inline-start: 24px; }
	body.iq-atelier .elementor .sv-pillnav:has(> a:nth-child(4)) strong { font-size: 18px; }
	body.iq-atelier .elementor .sv-pillnav:has(> a:nth-child(4)) em { font-size: 14px; }
}

/* Descriptions start under their titles, whether the neighbour wraps or not. */
body.iq-atelier .elementor .sv-pillnav:has(> a:nth-child(4)) a { align-content: start; }

/* Phones: four service tabs, two by two, every label whole. */
@media (max-width: 599px) {
	.sv-pillars .sv-tabs:has(> .sv-tab:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); border-block-end: 0; }
	body.iq-atelier .elementor .sv-pillars .sv-tabs:has(> .sv-tab:nth-child(4)) button.sv-tab { min-block-size: 48px; padding: 12px 4px 14px; border-block-end: 1px solid var(--sv-rule); }
}