/* =========================================================
   FUSSBODEN VINCENZ – GLOBAL DESIGN SYSTEM v1.2
   Black · Silver · Burnished Copper · Forest
   ========================================================= */

:root {
	--fv-black: #0b0c0d;
	--fv-carbon: #151719;
	--fv-graphite: #25282b;
	--fv-silver: #aeb1b3;
	--fv-silver-dark: #6f7478;
	--fv-silver-light: #e0e1e1;
	--fv-platinum: #e7e7e4;
	--fv-ivory: #f3f0ea;
	--fv-white: #faf9f6;
	--fv-accent: #9a6a47;
	--fv-accent-hover: #805337;
	--fv-accent-light: #c7a082;
	--fv-forest: #29332f;
	--fv-text: #181918;
	--fv-text-soft: #51565a;
	--fv-text-muted: #747a7e;
	--fv-text-inverse: #f8f8f5;
	--fv-border: rgba(11,12,13,.12);
	--fv-border-strong: rgba(11,12,13,.21);
	--fv-border-dark: rgba(255,255,255,.14);
	--fv-content: 1420px;
	--fv-content-wide: 1660px;
	--fv-reading: 780px;
	--fv-radius-sm: 10px;
	--fv-radius: 18px;
	--fv-radius-lg: 30px;
	--fv-radius-xl: 42px;
	--fv-radius-pill: 999px;
	--fv-shadow: 0 25px 75px rgba(16,17,18,.10);
	--fv-shadow-dark: 0 30px 90px rgba(0,0,0,.28);
	--fv-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--fv-font-sans: "Manrope", "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;
	--fv-transition-fast: 160ms cubic-bezier(.2,.7,.2,1);
	--fv-transition: 300ms cubic-bezier(.2,.7,.2,1);
	--fv-transition-slow: 800ms cubic-bezier(.2,.7,.2,1);
}

html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--fv-ivory);
	color: var(--fv-text);
	font-family: var(--fv-font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	--theme-text-color: var(--fv-text);
	--theme-link-initial-color: var(--fv-text);
	--theme-link-hover-color: var(--fv-accent);
}
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { transition: color var(--fv-transition-fast), opacity var(--fv-transition-fast), background var(--fv-transition-fast); }
::selection { background: var(--fv-accent); color: #fff; }
:focus-visible { outline: 2px solid var(--fv-accent); outline-offset: 4px; }

/* =========================================================
   BLOCKSY FRONT-PAGE GAP FIX
   Keep the header physically attached to the custom hero.
   ========================================================= */
body.home {
	--content-vertical-spacing: 0px !important;
}
body.home #header,
body.home #header .ct-header,
body.home #main-container,
body.home #main-container > main,
body.home #primary.fv-site-main {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	padding-block-start: 0 !important;
}
body.home #header + #main-container,
body.home #main-container > .ct-container,
body.home #main-container > .ct-container-full {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
/* Blocksy can keep an unused bottom header row alive; collapse it completely. */
body.home #header [data-row="bottom"] {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
}
body.home .fv-site-main,
body.home .fv-hero {
	margin-top: 0 !important;
	padding-top: 0;
}

.fv-site-main { overflow: clip; }
.fv-container { width: min(calc(100% - 64px), var(--fv-content)); margin-inline: auto; }
.fv-container--wide { width: min(calc(100% - 64px), var(--fv-content-wide)); margin-inline: auto; }
.fv-reading { max-width: var(--fv-reading); }
.fv-section { position: relative; padding-block: clamp(84px, 9vw, 145px); }
.fv-section--white { background: var(--fv-white); }

.fv-kicker {
	margin: 0 0 22px;
	color: var(--fv-accent);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .17em;
	text-transform: uppercase;
}
.fv-kicker::before { content: ""; display: inline-block; width: 24px; height: 1px; margin: 0 10px 3px 0; background: currentColor; }
.fv-display {
	margin: 0;
	font-family: var(--fv-font-display);
	font-size: clamp(3rem, 5.4vw, 6.2rem);
	font-weight: 500;
	line-height: .98;
	letter-spacing: -.045em;
}
.fv-lead { font-size: clamp(1.1rem, 1.6vw, 1.38rem); line-height: 1.62; }

.fv-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	min-height: 54px;
	padding: 14px 25px;
	border: 1px solid transparent;
	border-radius: var(--fv-radius-pill);
	background: var(--fv-black);
	color: #fff;
	font-family: var(--fv-font-sans);
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--fv-transition), background var(--fv-transition), border-color var(--fv-transition), box-shadow var(--fv-transition);
}
.fv-button:hover { transform: translateY(-2px); color: #fff; }
.fv-button--accent { background: var(--fv-accent); }
.fv-button--accent:hover { background: var(--fv-accent-hover); box-shadow: 0 12px 30px rgba(154,106,71,.24); }
.fv-button--dark:hover { background: var(--fv-forest); }
.fv-button__icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fv-inline-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--fv-text); font-weight: 800; text-decoration: none; }
.fv-inline-link svg { width: 18px; fill: none; stroke: var(--fv-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--fv-transition); }
.fv-inline-link:hover svg { transform: translateX(5px); }

/* =========================================================
   BLOCKSY HEADER
   ========================================================= */
#header { position: relative; z-index: 1000; }
#header [data-row="middle"] { position: relative; background: var(--fv-black); border-bottom: 1px solid rgba(255,255,255,.08); }
#header [data-row="middle"] > div { min-height: 88px; }
#header .ct-container { width: min(calc(100% - 64px), var(--fv-content)); max-width: var(--fv-content); }
#header .site-logo-container img { max-height: 68px; width: auto; object-fit: contain; transition: transform var(--fv-transition), opacity var(--fv-transition); }
#header .site-logo-container:hover img { transform: scale(1.015); opacity: .94; }
#header .menu { display: flex; align-items: center; gap: clamp(22px,2.2vw,38px); }
#header .menu > li { position: relative; }
#header .menu > li > a { position: relative; display: flex; align-items: center; min-height: 88px; padding: 0; color: var(--fv-silver-light); font-family: var(--fv-font-sans); font-size: 13px; font-weight: 700; letter-spacing: .025em; text-decoration: none; }
#header .menu > li > a:hover, #header .menu > li.current-menu-item > a, #header .menu > li.current-menu-ancestor > a { color: #fff; }
#header .menu > li > a::after { content: ""; position: absolute; left: 0; bottom: 24px; width: 22px; height: 2px; background: var(--fv-accent); transform: scaleX(0); transform-origin: right center; opacity: 0; transition: transform var(--fv-transition), opacity var(--fv-transition); }
#header .menu > li:hover > a::after, #header .menu > li.current-menu-item > a::after, #header .menu > li.current-menu-ancestor > a::after { transform: scaleX(1); transform-origin: left center; opacity: 1; }
#header .ct-header-cta .ct-button, #header .ct-header-cta a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 1px solid var(--fv-accent); border-radius: var(--fv-radius-pill); background: var(--fv-accent); color: #fff; font-size: 0 !important; font-weight: 800; text-decoration: none; transition: transform var(--fv-transition), background var(--fv-transition), box-shadow var(--fv-transition); }
/* Explicitly replace the old label/emoji so Windows cannot render a blue emoji square. */
#header .ct-header-cta .ct-button::before, #header .ct-header-cta a::before { content: "Projekt anfragen"; font-family: var(--fv-font-sans); font-size: 13px; }
#header .ct-header-cta .ct-button:hover, #header .ct-header-cta a:hover { background: var(--fv-accent-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(154,106,71,.23); }
#header .sub-menu { min-width: 250px; padding: 10px; background: rgba(21,23,25,.98); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.30); backdrop-filter: blur(18px); }
#header .sub-menu li a { padding: 12px 14px; border-radius: 8px; color: var(--fv-silver-light); font-size: 14px; }
#header .sub-menu li a:hover { background: rgba(255,255,255,.06); color: #fff; }
#header [data-sticky*="yes"] [data-row="middle"], #header .ct-sticky-container [data-row="middle"] { background: rgba(11,12,13,.94); backdrop-filter: blur(18px); box-shadow: 0 10px 40px rgba(0,0,0,.16); }

/* =========================================================
   HERO
   ========================================================= */
.fv-hero { --fv-spot-x: 34%; --fv-spot-y: 42%; position: relative; isolation: isolate; min-height: calc(100svh - 88px); margin: 0 !important; background: linear-gradient(135deg, #0b0c0d 0%, #151719 56%, #111315 100%); color: var(--fv-text-inverse); overflow: hidden; }
.fv-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px); background-size: 74px 74px; mask-image: linear-gradient(to right,#000,transparent 58%); pointer-events: none; }
.fv-hero::after { content: ""; position: absolute; inset: 0 42% 0 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at var(--fv-spot-x) var(--fv-spot-y), rgba(214,154,120,.11) 0%, rgba(214,154,120,.045) 19%, transparent 43%); opacity: .9; transition: opacity .35s ease; }
.fv-hero__grid { position: relative; z-index: 1; min-height: inherit; display: grid; grid-template-columns: minmax(0,.86fr) 1px minmax(0,1.14fr); align-items: stretch; }
.fv-hero__content { display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(38px,5vw,90px) 76px 0; }
.fv-hero__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 28px; color: var(--fv-silver); font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.fv-hero__eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--fv-accent); transform: scaleX(.25); transform-origin: left center; transition: transform .8s cubic-bezier(.2,.7,.2,1) .28s; }
.fv-hero.is-ready .fv-hero__eyebrow::before { transform: scaleX(1); }
.fv-hero__title { max-width: 780px; margin: 0; color: #fff; font-family: var(--fv-font-display); font-size: clamp(4.4rem,7.3vw,8.5rem); font-weight: 500; line-height: .80; letter-spacing: -.07em; }
.fv-hero__lead { max-width: 620px; margin: 40px 0 0; color: var(--fv-silver-light); font-size: clamp(1.05rem,1.35vw,1.25rem); line-height: 1.65; }
.fv-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: 36px; }
.fv-hero__text-link { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 13px; font-weight: 750; text-decoration: none; }
.fv-hero__text-link svg { width: 17px; fill: none; stroke: var(--fv-accent-light); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--fv-transition); }
.fv-hero__text-link:hover { color: #fff; }
.fv-hero__text-link:hover svg { transform: translateX(5px); }
.fv-hero__services { display: flex; flex-wrap: wrap; gap: 13px 24px; margin-top: 58px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.10); }
.fv-hero__services span { position: relative; color: var(--fv-silver); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.fv-hero__services span:not(:last-child)::after { content: ""; position: absolute; right: -13px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--fv-accent); transform: translateY(-50%); }
.fv-hero__divider { align-self: stretch; background: linear-gradient(to bottom,transparent,rgba(210,212,214,.55) 15%,rgba(115,119,124,.38) 50%,rgba(210,212,214,.5) 85%,transparent); transform: scaleY(0); transform-origin: top; transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .3s; }
.fv-hero__visual { --fv-parallax-x: 0px; --fv-parallax-y: 0px; min-width: 0; padding: 0 0 0 clamp(26px,3vw,48px); perspective: 1200px; }
.fv-hero__image-wrap { position: relative; height: 100%; min-height: 620px; overflow: hidden; background: #24272a; box-shadow: var(--fv-shadow-dark); transform: translate3d(var(--fv-parallax-x), var(--fv-parallax-y), 0); transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease; }
.fv-hero__image-wrap::before { content: ""; position: absolute; z-index: 3; top: -22%; bottom: -22%; left: -44%; width: 22%; pointer-events: none; opacity: 0; transform: skewX(-16deg); background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.04) 22%, rgba(255,255,255,.32) 50%, rgba(255,255,255,.05) 76%, transparent 100%); }
.fv-hero.is-ready .fv-hero__image-wrap::before { animation: fv-metal-sweep 1.35s cubic-bezier(.25,.65,.25,1) .85s 1 both; }
.fv-hero__visual:hover .fv-hero__image-wrap { box-shadow: 0 38px 110px rgba(0,0,0,.34); }
.fv-hero__image { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; object-position: center; transform: scale(1.015); filter: saturate(.86) contrast(1.04); transition: transform 16s linear, filter .8s ease; will-change: transform; }
.fv-hero__image-wrap::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.42),transparent 42%), linear-gradient(90deg,rgba(11,12,13,.08),transparent 28%); pointer-events: none; }
.fv-hero.is-ready .fv-hero__image { transform: scale(1.065); }
.fv-hero__visual:hover .fv-hero__image { filter: saturate(.98) contrast(1.04); }
.fv-hero__project-card { position: absolute; left: 28px; bottom: 28px; z-index: 4; min-width: 285px; padding: 18px 20px; background: rgba(11,12,13,.82); border: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(14px); color: #fff; transform: translateY(10px); opacity: 0; transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s ease, background .3s ease; }
.fv-hero.is-ready .fv-hero__project-card { transform: translateY(0); opacity: 1; transition-delay: .48s; }
.fv-hero__project-card:hover { background: rgba(11,12,13,.92); transform: translateY(-4px); }
.fv-hero__project-kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; color: var(--fv-silver); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.fv-hero__project-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--fv-accent); }
.fv-hero__project-card strong { display: block; font-family: var(--fv-font-display); font-size: 20px; font-weight: 500; }
.fv-hero__project-card small { display: block; margin-top: 5px; color: var(--fv-silver-light); font-size: 10px; }
.fv-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.fv-hero.is-ready .fv-reveal { opacity: 1; transform: translateY(0); }
.fv-hero.is-ready .fv-hero__divider { transform: scaleY(1); }
.fv-hero.is-ready .fv-hero__content .fv-reveal:nth-child(2) { transition-delay: .08s; }
.fv-hero.is-ready .fv-hero__content .fv-reveal:nth-child(3) { transition-delay: .16s; }
.fv-hero.is-ready .fv-hero__content .fv-reveal:nth-child(4) { transition-delay: .24s; }
.fv-hero.is-ready .fv-hero__content .fv-reveal:nth-child(5) { transition-delay: .32s; }
.fv-hero.is-ready .fv-hero__visual.fv-reveal { transition-delay: .18s; }

@keyframes fv-metal-sweep {
	0% { left: -44%; opacity: 0; }
	18% { opacity: .78; }
	72% { opacity: .34; }
	100% { left: 128%; opacity: 0; }
}

/* =========================================================
   TRUST BAR
   ========================================================= */
.fv-trustbar { background: var(--fv-white); border-bottom: 1px solid var(--fv-border); }
.fv-trustbar__inner { min-height: 88px; display: grid; grid-template-columns: repeat(4,1fr); align-items: stretch; }
.fv-trustbar__inner > div { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 18px 30px; border-left: 1px solid var(--fv-border); }
.fv-trustbar__inner > div:last-child { border-right: 1px solid var(--fv-border); }
.fv-trustbar strong { font-family: var(--fv-font-display); font-size: 20px; font-weight: 500; }
.fv-trustbar span { color: var(--fv-text-muted); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }

/* =========================================================
   INTRO / SECTION HEADS
   ========================================================= */
.fv-intro { background: var(--fv-ivory); }
.fv-intro__grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,.7fr); gap: clamp(60px,9vw,150px); align-items: start; }
.fv-intro__copy { padding-top: 50px; }
.fv-intro__copy p { color: var(--fv-text-soft); line-height: 1.75; }
.fv-section-head { display: grid; grid-template-columns: 1fr minmax(280px,430px); gap: 70px; align-items: end; margin-bottom: 62px; }
.fv-section-head > p { margin: 0 0 8px; color: var(--fv-text-soft); line-height: 1.7; }
.fv-section-head--light .fv-display { color: #fff; }
.fv-section-head--light > p { color: var(--fv-silver); }

/* =========================================================
   SERVICES
   ========================================================= */
.fv-services { background: var(--fv-white); border-block: 1px solid var(--fv-border); }
.fv-services__grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--fv-border); border-left: 1px solid var(--fv-border); }
.fv-service-card { position: relative; min-height: 330px; padding: 42px 38px 38px; border-right: 1px solid var(--fv-border); border-bottom: 1px solid var(--fv-border); background: rgba(255,255,255,.5); transition: background var(--fv-transition), transform var(--fv-transition); }
.fv-service-card:hover { background: var(--fv-ivory); transform: translateY(-3px); }
.fv-service-card__num { color: var(--fv-accent); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.fv-service-card h3 { margin: 56px 0 16px; font-family: var(--fv-font-display); font-size: clamp(1.8rem,2.4vw,2.7rem); font-weight: 500; line-height: 1.02; }
.fv-service-card p { margin: 0; color: var(--fv-text-soft); line-height: 1.65; }
.fv-service-card a { position: absolute; left: 38px; bottom: 34px; color: var(--fv-text); font-size: 12px; font-weight: 800; text-decoration: none; border-bottom: 1px solid var(--fv-accent); }

/* =========================================================
   ADVICE
   ========================================================= */
.fv-advice { background: var(--fv-platinum); }
.fv-advice__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.86fr); gap: clamp(55px,8vw,130px); align-items: center; }
.fv-advice__visual { position: relative; min-height: 620px; overflow: hidden; }
.fv-advice__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fv-image-caption { position: absolute; left: 20px; bottom: 20px; padding: 10px 13px; background: rgba(11,12,13,.82); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(10px); }
.fv-advice__content .fv-lead { color: var(--fv-text); }
.fv-advice__content > p:not(.fv-kicker) { color: var(--fv-text-soft); }
.fv-checklist { list-style: none; padding: 0; margin: 32px 0 38px; border-top: 1px solid var(--fv-border-strong); }
.fv-checklist li { position: relative; padding: 15px 0 15px 28px; border-bottom: 1px solid var(--fv-border); color: var(--fv-text-soft); }
.fv-checklist li::before { content: ""; position: absolute; left: 1px; top: 22px; width: 8px; height: 8px; border-right: 1.5px solid var(--fv-accent); border-bottom: 1.5px solid var(--fv-accent); transform: rotate(45deg); }

/* =========================================================
   PROJECT SLIDER
   ========================================================= */
.fv-projects { background: var(--fv-black); color: #fff; }
.fv-projects .fv-kicker { color: var(--fv-accent-light); }
.fv-slider-controls { display: flex; gap: 9px; justify-self: end; align-self: end; }
.fv-slider-controls button { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: background var(--fv-transition), border-color var(--fv-transition), transform var(--fv-transition); }
.fv-slider-controls button:hover { background: var(--fv-accent); border-color: var(--fv-accent); transform: translateY(-2px); }
.fv-slider-controls svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fv-project-slider { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(430px,38vw); gap: 18px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: none; padding: 0 max(32px,calc((100vw - var(--fv-content))/2)) 18px; }
.fv-project-slider::-webkit-scrollbar { display: none; }
.fv-project-slide { position: relative; min-height: 610px; scroll-snap-align: start; overflow: hidden; background: var(--fv-graphite); }
.fv-project-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.88); transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease; }
.fv-project-slide:hover img { transform: scale(1.025); filter: saturate(1); }
.fv-project-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.55),transparent 48%); pointer-events: none; }
.fv-project-slide__meta { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 26px; display: flex; align-items: end; justify-content: space-between; gap: 20px; color: #fff; }
.fv-project-slide__meta span { color: var(--fv-accent-light); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.fv-project-slide__meta strong { max-width: 70%; font-family: var(--fv-font-display); font-size: 26px; font-weight: 500; text-align: right; }
.fv-project-slide__placeholder { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; text-align: center; background: linear-gradient(135deg,#1d2022,#2a2d30); color: var(--fv-silver); }
.fv-project-slide__placeholder span { font-family: var(--fv-font-display); font-size: 28px; }
.fv-project-slide__placeholder small { font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.fv-projects__note { margin: 24px 0 0; color: var(--fv-silver-dark); font-size: 11px; }

/* =========================================================
   ABOUT MARCEL
   ========================================================= */
.fv-about { background: var(--fv-ivory); }
.fv-about__grid { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1fr); gap: clamp(60px,9vw,150px); align-items: center; }
.fv-about__content { max-width: 620px; }
.fv-about__content p:not(.fv-kicker) { color: var(--fv-text-soft); line-height: 1.75; }
.fv-about__content .fv-lead { color: var(--fv-text); margin-top: 34px; }
.fv-about__signature { margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--fv-border); font-family: var(--fv-font-display); font-size: 28px; }
.fv-about__signature span { display: block; margin-top: 3px; color: var(--fv-text-muted); font-family: var(--fv-font-sans); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.fv-about__visual { position: relative; min-height: 660px; overflow: hidden; background: var(--fv-platinum); }
.fv-about__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fv-about__badge { position: absolute; right: 24px; bottom: 24px; padding: 18px 20px; background: rgba(11,12,13,.86); color: #fff; backdrop-filter: blur(12px); }
.fv-about__badge span { display: block; margin-bottom: 8px; color: var(--fv-accent-light); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.fv-about__badge strong { font-family: var(--fv-font-display); font-size: 22px; font-weight: 500; line-height: 1.05; }

/* =========================================================
   PROCESS
   ========================================================= */
.fv-process { background: var(--fv-white); border-block: 1px solid var(--fv-border); }
.fv-process__grid { display: grid; grid-template-columns: minmax(320px,.72fr) minmax(0,1fr); gap: clamp(70px,10vw,160px); align-items: start; }
.fv-process header { position: sticky; top: 130px; }
.fv-process header > p:last-child { max-width: 430px; color: var(--fv-text-soft); line-height: 1.7; }
.fv-process__steps { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.fv-process__steps li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 28px; padding: 0 0 40px; }
.fv-process__steps li:not(:last-child)::before { content: ""; position: absolute; left: 31px; top: 60px; bottom: 0; width: 1px; background: linear-gradient(var(--fv-accent),rgba(154,106,71,.15)); }
.fv-process__steps > li > span { position: relative; z-index: 1; width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid rgba(154,106,71,.55); border-radius: 50%; background: var(--fv-white); color: var(--fv-accent); font-family: var(--fv-font-display); font-size: 17px; }
.fv-process__steps h3 { margin: 2px 0 7px; font-size: 15px; font-weight: 850; }
.fv-process__steps p { margin: 0; color: var(--fv-text-soft); line-height: 1.65; }

/* =========================================================
   SUSTAINABILITY
   ========================================================= */
.fv-sustainability { background: var(--fv-forest); color: #fff; }
.fv-sustainability .fv-kicker { color: #d7b092; }
.fv-sustainability .fv-display { color: #fff; }
.fv-sustainability__grid { display: grid; grid-template-columns: 130px minmax(0,.9fr) minmax(0,.7fr); gap: clamp(34px,6vw,90px); align-items: start; }
.fv-sustainability__grid > div:last-child { padding-top: 42px; }
.fv-sustainability__grid > div:last-child p { color: rgba(255,255,255,.72); line-height: 1.75; }
.fv-sustainability__mark { width: 120px; height: 120px; display: grid; grid-template-columns: 1fr 1px 1fr; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; font-family: var(--fv-font-display); font-size: 32px; }
.fv-sustainability__mark i { width: 1px; height: 48px; background: rgba(255,255,255,.28); transform: rotate(30deg); }

/* =========================================================
   PARTNERS
   ========================================================= */
.fv-partners { background: var(--fv-platinum); }
.fv-partners__head { display: grid; grid-template-columns: .35fr .7fr 1fr; gap: 40px; align-items: end; margin-bottom: 48px; }
.fv-partners__head .fv-kicker { margin: 0; }
.fv-partners__head h2 { margin: 0; font-family: var(--fv-font-display); font-size: clamp(2.5rem,4vw,4.5rem); font-weight: 500; line-height: 1; }
.fv-partners__head > p:last-child { margin: 0; color: var(--fv-text-soft); line-height: 1.7; }
.fv-partners__logos { display: grid; grid-template-columns: repeat(6,1fr); border-top: 1px solid var(--fv-border); border-left: 1px solid var(--fv-border); }
.fv-partners__logos > div { min-height: 130px; display: grid; place-items: center; padding: 24px; border-right: 1px solid var(--fv-border); border-bottom: 1px solid var(--fv-border); background: rgba(255,255,255,.45); }
.fv-partners__logos img { max-width: 130px; max-height: 62px; filter: grayscale(1); opacity: .7; }
.fv-partners__empty { min-height: 120px; display: grid; place-items: center; border: 1px dashed var(--fv-border-strong); color: var(--fv-text-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

/* =========================================================
   FAQ
   ========================================================= */
.fv-faq { background: var(--fv-ivory); }
.fv-faq__grid { display: grid; grid-template-columns: minmax(300px,.72fr) minmax(0,1fr); gap: clamp(70px,10vw,160px); }
.fv-faq__items { border-top: 1px solid var(--fv-border-strong); }
.fv-faq details { border-bottom: 1px solid var(--fv-border); }
.fv-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; cursor: pointer; font-size: 15px; font-weight: 800; }
.fv-faq summary::-webkit-details-marker { display: none; }
.fv-faq summary span { position: relative; width: 18px; height: 18px; flex: 0 0 18px; }
.fv-faq summary span::before, .fv-faq summary span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1px; background: var(--fv-accent); transform: translate(-50%,-50%); transition: transform var(--fv-transition); }
.fv-faq summary span::after { transform: translate(-50%,-50%) rotate(90deg); }
.fv-faq details[open] summary span::after { transform: translate(-50%,-50%) rotate(0); }
.fv-faq details p { max-width: 720px; margin: -4px 0 26px; color: var(--fv-text-soft); line-height: 1.75; }

/* =========================================================
   CONTACT / NATIVE FORM (Fluent SMTP compatible)
   ========================================================= */
.fv-contact { background: var(--fv-carbon); color: #fff; }
.fv-contact .fv-kicker { color: var(--fv-accent-light); }
.fv-contact .fv-display { color: #fff; }
.fv-contact__grid { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1fr); gap: clamp(60px,9vw,145px); align-items: start; }
.fv-contact__intro .fv-lead { color: var(--fv-silver-light); max-width: 620px; }
.fv-contact__promise { display: grid; grid-template-columns: 44px 1fr; gap: 18px; margin-top: 25px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.fv-contact__promise > span { color: var(--fv-accent-light); font-family: var(--fv-font-display); font-size: 17px; }
.fv-contact__promise p { margin: 0; color: var(--fv-silver); font-size: 13px; line-height: 1.55; }
.fv-contact__promise strong { display: block; margin-bottom: 3px; color: #fff; font-size: 13px; }
.fv-form-card { padding: clamp(28px,4vw,52px); background: var(--fv-white); color: var(--fv-text); box-shadow: var(--fv-shadow-dark); }
.fv-form { display: grid; gap: 20px; }
.fv-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fv-form label { display: grid; gap: 8px; color: var(--fv-text); font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.fv-form input:not([type="checkbox"]), .fv-form select, .fv-form textarea { width: 100%; min-height: 50px; border: 0; border-bottom: 1px solid var(--fv-border-strong); border-radius: 0; padding: 11px 0; background: transparent; color: var(--fv-text); font: inherit; font-size: 14px; box-shadow: none; }
.fv-form textarea { resize: vertical; min-height: 130px; }
.fv-form input:focus, .fv-form select:focus, .fv-form textarea:focus { outline: none; border-bottom-color: var(--fv-accent); }
.fv-form__consent { grid-template-columns: 18px 1fr !important; align-items: start; gap: 11px !important; color: var(--fv-text-soft) !important; font-weight: 500 !important; line-height: 1.5; }
.fv-form__consent input { margin-top: 3px; accent-color: var(--fv-accent); }
.fv-form__submit { justify-self: start; border: 0; }
.fv-form__small { margin: -5px 0 0; color: var(--fv-text-muted); font-size: 9px; }
.fv-form__small code { font-size: inherit; }
.fv-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.fv-form-message { margin-bottom: 20px; padding: 14px 16px; border-left: 3px solid var(--fv-accent); background: var(--fv-ivory); font-size: 13px; }
.fv-form-message.is-error { border-color: #a53d37; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
	.fv-services__grid { grid-template-columns: repeat(2,1fr); }
	.fv-project-slider { grid-auto-columns: minmax(420px,55vw); }
	.fv-partners__logos { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 999px) {
	.fv-hero::after { inset: 0; opacity: .35; }
	.fv-hero__image-wrap { transform: none !important; }

	#header [data-row="middle"] > div { min-height: 74px; }
	#header .ct-container { width: calc(100% - 32px); }
	#header .site-logo-container img { max-height: 56px; }
	#offcanvas, #offcanvas .ct-panel-inner { background: var(--fv-black); }
	#offcanvas .mobile-menu li a { color: var(--fv-silver-light); }
	.fv-hero { min-height: auto; }
	.fv-hero__grid { width: 100%; grid-template-columns: 1fr; }
	.fv-hero__content { padding: 68px 24px 52px; }
	.fv-hero__divider { display: none; }
	.fv-hero__visual { padding: 0; }
	.fv-hero__image-wrap { min-height: 60svh; }
	.fv-hero__title { font-size: clamp(4rem,13vw,6.5rem); }
	.fv-trustbar__inner { width: 100%; grid-template-columns: repeat(2,1fr); }
	.fv-trustbar__inner > div:nth-child(3) { border-top: 1px solid var(--fv-border); }
	.fv-trustbar__inner > div:nth-child(4) { border-top: 1px solid var(--fv-border); }
	.fv-intro__grid, .fv-advice__grid, .fv-about__grid, .fv-process__grid, .fv-faq__grid, .fv-contact__grid { grid-template-columns: 1fr; gap: 55px; }
	.fv-intro__copy { padding-top: 0; }
	.fv-advice__visual, .fv-about__visual { min-height: 58svh; }
	.fv-about__content { max-width: 760px; }
	.fv-process header { position: static; }
	.fv-sustainability__grid { grid-template-columns: 100px 1fr; }
	.fv-sustainability__grid > div:last-child { grid-column: 2; padding-top: 0; }
	.fv-partners__head { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 700px) {
	.fv-container, .fv-container--wide { width: calc(100% - 32px); }
	.fv-section { padding-block: 78px; }
	.fv-display { font-size: clamp(2.8rem,13vw,4.6rem); }
	.fv-hero__content { padding: 54px 20px 42px; }
	.fv-hero__title { font-size: clamp(3.8rem,17vw,5.4rem); line-height: .82; }
	.fv-hero__lead { margin-top: 28px; font-size: 1rem; }
	.fv-hero__actions { align-items: flex-start; flex-direction: column; gap: 20px; margin-top: 28px; }
	.fv-hero__services { margin-top: 40px; }
	.fv-hero__image-wrap { min-height: 54svh; }
	.fv-hero__project-card { left: 16px; right: 16px; bottom: 16px; min-width: 0; }
	.fv-trustbar__inner > div { padding: 16px; }
	.fv-trustbar strong { font-size: 18px; }
	.fv-section-head { grid-template-columns: 1fr; gap: 26px; margin-bottom: 40px; }
	.fv-services__grid { grid-template-columns: 1fr; }
	.fv-service-card { min-height: 300px; padding: 34px 28px; }
	.fv-service-card a { left: 28px; bottom: 28px; }
	.fv-advice__visual, .fv-about__visual { min-height: 52svh; }
	.fv-project-slider { grid-auto-columns: 84vw; padding-left: 16px; padding-right: 16px; }
	.fv-project-slide { min-height: 500px; }
	.fv-slider-controls { justify-self: start; }
	.fv-sustainability__grid { grid-template-columns: 1fr; gap: 28px; }
	.fv-sustainability__grid > div:last-child { grid-column: auto; }
	.fv-sustainability__mark { width: 90px; height: 90px; font-size: 24px; }
	.fv-partners__logos { grid-template-columns: repeat(2,1fr); }
	.fv-form__row { grid-template-columns: 1fr; }
	.fv-form-card { padding: 26px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.fv-hero__image-wrap { transform: none !important; }
	.fv-hero::after { display: none; }
}

/* =========================================================
   v1.2 PREMIUM REFINEMENT
   Typography · palette · spacing · hard Blocksy gap fix
   ========================================================= */

/* The light strip visible below Blocksy's header is about 20–22px on the
   current desktop configuration. Pull the custom front page into that space
   and neutralise any wrapper spacing that Blocksy still outputs. */
body.home #header,
body.home #header .ct-header,
body.home #header [data-device="desktop"],
body.home #header [data-device="mobile"] {
	background: var(--fv-black) !important;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

body.home #header [data-row="top"],
body.home #header [data-row="bottom"] {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

body.home #header [data-row="bottom"] {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
}

body.home #main-container,
body.home #main-container > main,
body.home #primary.fv-site-main,
body.home .fv-hero {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

@media (min-width: 1000px) {
	body.home #header + #main-container {
		margin-top: -21px !important;
	}
}

/* ---------------------------------------------------------
   Readability first
   --------------------------------------------------------- */
body {
	font-size: 17.5px;
	line-height: 1.7;
	background: var(--fv-white);
}

.fv-site-main p {
	font-size: clamp(1.03rem, .35vw + .98rem, 1.13rem);
	line-height: 1.72;
}

.fv-display {
	font-size: clamp(3.15rem, 5vw, 6rem);
	line-height: .99;
	letter-spacing: -.043em;
}

.fv-lead {
	font-size: clamp(1.18rem, 1.25vw, 1.38rem);
	line-height: 1.62;
}

.fv-kicker {
	font-size: 12px;
	letter-spacing: .16em;
}

.fv-button {
	min-height: 56px;
	padding-inline: 28px;
	font-size: 14px;
}

#header .menu > li > a {
	font-size: 14px;
	letter-spacing: .018em;
}

#header .ct-header-cta .ct-button::before,
#header .ct-header-cta a::before {
	font-size: 14px;
}

.fv-hero__eyebrow {
	font-size: 12px;
	letter-spacing: .145em;
}

.fv-hero__lead {
	font-size: clamp(1.12rem, 1.2vw, 1.28rem);
	line-height: 1.68;
}

.fv-hero__text-link {
	font-size: 14px;
}

.fv-hero__services span,
.fv-trustbar span,
.fv-service-card__num,
.fv-image-caption,
.fv-project-slide__meta span,
.fv-about__badge span,
.fv-partners__empty {
	font-size: 11px;
}

.fv-trustbar strong {
	font-size: 17px;
}

.fv-service-card h3,
.fv-process__steps h3 {
	font-size: clamp(1.45rem, 1.7vw, 1.85rem);
}

.fv-service-card p,
.fv-process__steps p,
.fv-advice__content > p:not(.fv-kicker),
.fv-about__content p:not(.fv-kicker),
.fv-faq details p {
	font-size: clamp(1.03rem, .3vw + .98rem, 1.1rem);
}

.fv-faq summary {
	font-size: 17px;
	line-height: 1.45;
}

.fv-form label {
	font-size: 13px;
}

.fv-form input:not([type="checkbox"]),
.fv-form select,
.fv-form textarea {
	font-size: 16px;
	line-height: 1.5;
}

/* ---------------------------------------------------------
   More exclusive, quieter material palette
   --------------------------------------------------------- */
.fv-trustbar {
	background: #faf9f6;
}

.fv-intro {
	background:
		radial-gradient(circle at 12% 15%, rgba(154,106,71,.07), transparent 28%),
		linear-gradient(180deg, #f5f2ec 0%, #f1ede6 100%);
}

.fv-services {
	background: #faf9f6;
}

.fv-service-card {
	background: rgba(255,255,255,.66);
}

.fv-service-card:hover {
	background: #f2eee7;
	box-shadow: 0 24px 60px rgba(19,20,20,.07);
}

.fv-advice {
	background:
		linear-gradient(130deg, #e4e5e3 0%, #eeeeea 58%, #f4f1eb 100%);
}

.fv-projects {
	background:
		radial-gradient(circle at 78% 12%, rgba(154,106,71,.12), transparent 25%),
		linear-gradient(145deg, #090a0b 0%, #151719 100%);
}

.fv-about {
	background:
		linear-gradient(180deg, #f4f1eb 0%, #efeae2 100%);
}

.fv-process {
	background: #faf9f6;
}

.fv-sustainability {
	background:
		radial-gradient(circle at 15% 20%, rgba(199,160,130,.10), transparent 30%),
		linear-gradient(135deg, #26312d 0%, #303d37 100%);
}

.fv-partners {
	background: linear-gradient(180deg, #e8e8e5 0%, #f0eee9 100%);
}

.fv-faq {
	background: #f4f1eb;
}

.fv-contact {
	background:
		radial-gradient(circle at 18% 16%, rgba(154,106,71,.13), transparent 30%),
		linear-gradient(145deg, #101213 0%, #1a1d1f 100%);
}

/* Metallic hairlines between large areas. */
.fv-section::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: min(calc(100% - 64px), var(--fv-content));
	height: 1px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, rgba(116,121,125,.20) 20%, rgba(116,121,125,.32) 50%, rgba(116,121,125,.20) 80%, transparent);
	pointer-events: none;
}

.fv-projects::after,
.fv-contact::after,
.fv-sustainability::after {
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.08) 20%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.08) 80%, transparent);
}

/* ---------------------------------------------------------
   Premium micro-interactions
   --------------------------------------------------------- */
.fv-project-slide img,
.fv-advice__visual img,
.fv-about__visual img {
	transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .7s ease;
}

.fv-project-slide:hover img,
.fv-advice__visual:hover img,
.fv-about__visual:hover img {
	transform: scale(1.025);
}

.fv-project-slide {
	box-shadow: 0 26px 75px rgba(0,0,0,.20);
}

.fv-form-card {
	border: 1px solid rgba(255,255,255,.28);
	box-shadow: 0 32px 90px rgba(0,0,0,.26);
}

.fv-partners__logos > div {
	transition: background var(--fv-transition), transform var(--fv-transition);
}

.fv-partners__logos > div:hover {
	background: rgba(255,255,255,.78);
	transform: translateY(-3px);
}

/* Gentle in-view motion. Content remains fully visible without JS. */
.fv-js .fv-section > .fv-container,
.fv-js .fv-section > .fv-container--wide,
.fv-js .fv-trustbar__inner {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}

.fv-js .fv-section.is-inview > .fv-container,
.fv-js .fv-section.is-inview > .fv-container--wide,
.fv-js .fv-trustbar.is-inview .fv-trustbar__inner {
	opacity: 1;
	transform: translateY(0);
}

/* Hero has its own entrance choreography; never hide it with the generic rule. */
.fv-js .fv-hero > .fv-container,
.fv-js .fv-hero > .fv-container--wide {
	opacity: 1;
	transform: none;
}

@media (max-width: 700px) {
	body {
		font-size: 16.5px;
	}

	.fv-site-main p {
		font-size: 1.04rem;
		line-height: 1.68;
	}

	.fv-button {
		font-size: 14px;
	}

	.fv-faq summary {
		font-size: 16px;
	}

	.fv-section::after {
		width: calc(100% - 32px);
	}
}

/* =========================================================
   v1.3 RESPONSIVE PREMIUM SYSTEM
   Handwerk typography · fluid spacing · mobile experience
   ========================================================= */

/* ---------------------------------------------------------
   TYPOGRAPHY
   Lora gives the brand a crafted, architectural character;
   Manrope keeps navigation, copy and forms calm and legible.
   Both are intentionally declared with robust local fallbacks.
   --------------------------------------------------------- */
:root {
	--fv-font-display: "Lora", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--fv-font-sans: "Manrope", Inter, "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;
	--fv-page-gutter: clamp(20px, 4vw, 64px);
	--fv-section-space: clamp(76px, 8vw, 136px);
}

html {
	font-size: 100%;
	overflow-x: clip;
}

body {
	font-family: var(--fv-font-sans);
	font-size: clamp(16px, .18vw + 15.5px, 18px);
	line-height: 1.72;
	overflow-x: clip;
}

.fv-site-main,
.fv-site-main * {
	min-width: 0;
}

.fv-site-main p,
.fv-site-main li,
.fv-site-main label,
.fv-site-main summary {
	text-wrap: pretty;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

.fv-display,
.fv-hero__title,
.fv-service-card h3,
.fv-process__steps h3,
.fv-partners__head h2,
.fv-about__signature,
.fv-project-slide__meta strong {
	font-family: var(--fv-font-display);
	text-wrap: balance;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

.fv-display {
	font-size: clamp(2.9rem, 4.9vw, 5.9rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -.038em;
}

.fv-lead {
	max-width: 66ch;
	font-size: clamp(1.12rem, .55vw + 1rem, 1.34rem);
	line-height: 1.68;
	letter-spacing: -.006em;
}

.fv-site-main p {
	max-width: 72ch;
	font-size: clamp(1rem, .24vw + .96rem, 1.1rem);
	line-height: 1.76;
}

.fv-kicker,
.fv-hero__eyebrow {
	line-height: 1.35;
	letter-spacing: .14em;
}

/* ---------------------------------------------------------
   FLUID LAYOUT / SECTION RHYTHM
   --------------------------------------------------------- */
.fv-container,
.fv-container--wide {
	width: min(calc(100% - (var(--fv-page-gutter) * 2)), var(--fv-content));
}

.fv-container--wide {
	max-width: var(--fv-content-wide);
}

.fv-section {
	padding-block: var(--fv-section-space);
}

.fv-section-head {
	gap: clamp(32px, 6vw, 86px);
	margin-bottom: clamp(40px, 5vw, 68px);
}

/* ---------------------------------------------------------
   DEFINITIVE BLOCKSY HEADER → HERO JOIN
   A transform is used because it is independent from the
   internal Blocksy wrapper that creates the visible light gap.
   --------------------------------------------------------- */
body.home {
	--fv-header-gap-compensation: 22px;
}

body.home #main-container,
body.home #main-container > main,
body.home #primary,
body.home .fv-site-main {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

body.home #main-container > .ct-container,
body.home #main-container > .ct-container-full,
body.home #main-container > [class*="ct-container"] {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

@media (min-width: 1000px) {
	body.home .fv-site-main {
		position: relative;
		z-index: 2;
		transform: translateY(calc(-1 * var(--fv-header-gap-compensation)));
		margin-bottom: calc(-1 * var(--fv-header-gap-compensation)) !important;
	}

	body.home #header + #main-container {
		margin-top: 0 !important;
	}
}

/* ---------------------------------------------------------
   HERO – easier to read on every viewport
   --------------------------------------------------------- */
.fv-hero__content {
	padding-top: clamp(64px, 6vw, 90px);
	padding-bottom: clamp(64px, 6vw, 90px);
}

.fv-hero__title {
	max-width: 8.7ch;
	font-size: clamp(4rem, 7vw, 8.1rem);
	font-weight: 600;
	line-height: .88;
	letter-spacing: -.055em;
}

.fv-hero__lead {
	max-width: 53ch;
	font-size: clamp(1.08rem, .55vw + 1rem, 1.26rem);
	line-height: 1.72;
}

.fv-hero__actions {
	row-gap: 16px;
}

.fv-hero__image-wrap,
.fv-advice__visual,
.fv-about__visual,
.fv-project-slide {
	border-radius: clamp(0px, 1.25vw, 20px);
}

/* ---------------------------------------------------------
   CARD TEXT SAFETY
   --------------------------------------------------------- */
.fv-service-card,
.fv-form-card,
.fv-contact__promise,
.fv-process__steps li,
.fv-trustbar__inner > div {
	min-width: 0;
}

.fv-service-card h3 {
	font-size: clamp(1.65rem, 1.55vw, 2rem);
	line-height: 1.15;
	letter-spacing: -.025em;
}

.fv-service-card p {
	line-height: 1.7;
}

.fv-process__steps h3 {
	font-family: var(--fv-font-sans);
	font-size: clamp(1.12rem, .45vw + 1rem, 1.35rem);
	font-weight: 750;
	line-height: 1.35;
	letter-spacing: -.015em;
}

.fv-process__steps p,
.fv-contact__promise p {
	line-height: 1.68;
}

/* ---------------------------------------------------------
   TABLET / SMALL LAPTOP
   --------------------------------------------------------- */
@media (max-width: 1280px) {
	:root {
		--fv-page-gutter: clamp(28px, 3vw, 44px);
		--fv-section-space: clamp(78px, 7.5vw, 112px);
	}

	#header .menu {
		gap: clamp(18px, 1.7vw, 28px);
	}

	#header .menu > li > a {
		font-size: 13px;
	}

	.fv-hero__grid {
		grid-template-columns: minmax(0, .93fr) 1px minmax(0, 1.07fr);
	}

	.fv-hero__content {
		padding-right: clamp(32px, 4vw, 56px);
	}

	.fv-hero__title {
		font-size: clamp(4.1rem, 6.3vw, 6.8rem);
	}

	.fv-project-slider {
		grid-auto-columns: minmax(400px, 48vw);
	}
}

/* ---------------------------------------------------------
   TABLET / PORTRAIT
   --------------------------------------------------------- */
@media (max-width: 999px) {
	:root {
		--fv-page-gutter: clamp(22px, 4.5vw, 38px);
		--fv-section-space: clamp(72px, 10vw, 104px);
	}

	body.home {
		--fv-header-gap-compensation: 0px;
	}

	body.home .fv-site-main {
		transform: none;
		margin-bottom: 0 !important;
	}

	#header [data-row="middle"] > div {
		min-height: 72px;
	}

	#header .site-logo-container img {
		max-height: 54px;
	}

	.fv-hero__content {
		padding: clamp(56px, 8vw, 80px) var(--fv-page-gutter) clamp(44px, 6vw, 62px);
	}

	.fv-hero__title {
		max-width: 9.2ch;
		font-size: clamp(4.2rem, 11.5vw, 6.5rem);
		line-height: .9;
	}

	.fv-hero__lead {
		max-width: 60ch;
	}

	.fv-hero__image-wrap {
		min-height: clamp(460px, 66svh, 720px);
		border-radius: 0;
	}

	.fv-intro__grid,
	.fv-advice__grid,
	.fv-about__grid,
	.fv-process__grid,
	.fv-faq__grid,
	.fv-contact__grid {
		gap: clamp(44px, 7vw, 68px);
	}

	.fv-advice__content {
		order: 1;
	}

	.fv-advice__visual {
		order: 2;
	}

	.fv-advice__visual,
	.fv-about__visual {
		min-height: clamp(430px, 58svh, 670px);
	}

	.fv-project-slider {
		grid-auto-columns: minmax(360px, 66vw);
	}

	.fv-project-slide {
		min-height: clamp(470px, 65vw, 610px);
	}
}

/* ---------------------------------------------------------
   MOBILE – intentionally more editorial and tactile
   --------------------------------------------------------- */
@media (max-width: 700px) {
	:root {
		--fv-page-gutter: 20px;
		--fv-section-space: clamp(68px, 18vw, 92px);
	}

	body {
		font-size: 16px;
		line-height: 1.7;
		padding-bottom: 76px;
	}

	.fv-container,
	.fv-container--wide {
		width: calc(100% - 40px);
	}

	.fv-display {
		font-size: clamp(2.65rem, 12.2vw, 4.15rem);
		line-height: 1.04;
		letter-spacing: -.035em;
	}

	.fv-site-main p {
		font-size: 1rem;
		line-height: 1.72;
	}

	.fv-lead {
		font-size: 1.08rem;
		line-height: 1.68;
	}

	.fv-kicker,
	.fv-hero__eyebrow {
		font-size: 10px;
		line-height: 1.45;
		letter-spacing: .13em;
	}

	/* Hero becomes a composed mobile story: copy, chips, image. */
	.fv-hero__content {
		padding: 48px 20px 38px;
	}

	.fv-hero__eyebrow {
		margin-bottom: 22px;
	}

	.fv-hero__title {
		font-size: clamp(3.8rem, 16vw, 5.35rem);
		line-height: .9;
		letter-spacing: -.05em;
	}

	.fv-hero__lead {
		margin-top: 26px;
		font-size: 1.04rem;
		line-height: 1.66;
	}

	.fv-hero__actions {
		margin-top: 28px;
		gap: 15px;
	}

	.fv-hero__actions .fv-button {
		width: 100%;
	}

	.fv-hero__text-link {
		align-self: flex-start;
		padding: 8px 0;
	}

	.fv-hero__services {
		width: calc(100vw - 20px);
		margin-top: 34px;
		margin-right: -20px;
		padding: 16px 20px 3px 0;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		border-top-color: rgba(255,255,255,.10);
	}

	.fv-hero__services::-webkit-scrollbar {
		display: none;
	}

	.fv-hero__services span {
		flex: 0 0 auto;
		scroll-snap-align: start;
		padding: 9px 13px;
		border: 1px solid rgba(255,255,255,.11);
		border-radius: 999px;
		background: rgba(255,255,255,.035);
		font-size: 10px;
		letter-spacing: .1em;
	}

	.fv-hero__services span::after {
		display: none !important;
	}

	.fv-hero__image-wrap {
		min-height: clamp(420px, 68svh, 560px);
	}

	.fv-hero__project-card {
		left: 14px;
		right: 14px;
		bottom: 14px;
		padding: 15px 16px;
		border-radius: 12px;
	}

	.fv-hero__project-card strong {
		font-size: 18px;
		line-height: 1.2;
	}

	/* Trust becomes a swipeable premium ribbon with a visible next-card peek. */
	.fv-trustbar {
		overflow: hidden;
	}

	.fv-trustbar__inner {
		width: 100%;
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding: 12px 20px 14px;
		gap: 10px;
	}

	.fv-trustbar__inner::-webkit-scrollbar {
		display: none;
	}

	.fv-trustbar__inner > div {
		flex: 0 0 min(76vw, 300px);
		min-height: 102px;
		padding: 18px 20px;
		border: 1px solid var(--fv-border) !important;
		border-radius: 16px;
		background: rgba(255,255,255,.82);
		scroll-snap-align: start;
	}

	.fv-trustbar strong {
		font-family: var(--fv-font-display);
		font-size: 1.35rem;
		font-weight: 600;
	}

	.fv-trustbar span {
		font-size: 10px;
		line-height: 1.35;
	}

	.fv-section-head {
		gap: 20px;
		margin-bottom: 34px;
	}

	/* Services become a thumb-friendly horizontal story instead of a long stack. */
	.fv-services {
		overflow: hidden;
	}

	.fv-services__grid {
		display: flex;
		width: calc(100vw - 20px);
		margin-right: -20px;
		overflow-x: auto;
		gap: 14px;
		padding: 0 20px 14px 0;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 0;
		scrollbar-width: none;
	}

	.fv-services__grid::-webkit-scrollbar {
		display: none;
	}

	.fv-service-card {
		flex: 0 0 min(84vw, 350px);
		min-height: 360px;
		padding: 30px 26px;
		border: 1px solid var(--fv-border);
		border-radius: 22px;
		scroll-snap-align: start;
		box-shadow: 0 18px 48px rgba(19,20,20,.07);
	}

	.fv-service-card h3 {
		font-size: 1.75rem;
		line-height: 1.15;
	}

	.fv-service-card p {
		font-size: .99rem;
		line-height: 1.68;
	}

	.fv-service-card a {
		left: 26px;
		right: 26px;
		bottom: 26px;
	}

	.fv-advice__visual,
	.fv-about__visual {
		min-height: clamp(390px, 74vw, 510px);
		border-radius: 20px;
	}

	.fv-checklist {
		padding-left: 0;
	}

	.fv-project-slider {
		grid-auto-columns: min(86vw, 360px);
		gap: 12px;
		padding: 0 20px 14px;
		scroll-padding-left: 20px;
	}

	.fv-project-slide {
		min-height: clamp(440px, 118vw, 540px);
		border-radius: 20px;
	}

	.fv-project-slide__meta {
		left: 20px;
		right: 20px;
		bottom: 20px;
		align-items: flex-end;
	}

	.fv-project-slide__meta strong {
		font-size: 1.35rem;
		line-height: 1.18;
	}

	.fv-swipe-hint {
		display: flex;
		align-items: center;
		gap: 9px;
		margin: -12px 20px 22px;
		color: var(--fv-silver);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
	}

	.fv-swipe-hint span {
		color: var(--fv-accent-light);
		animation: fv-swipe-hint 1.7s ease-in-out infinite;
	}

	.fv-process__steps li {
		grid-template-columns: 50px minmax(0,1fr);
		gap: 18px;
		padding-bottom: 30px;
	}

	.fv-process__steps > li > span {
		width: 50px;
		height: 50px;
		font-size: 15px;
	}

	.fv-process__steps li:not(:last-child)::before {
		left: 24px;
		top: 50px;
	}

	.fv-process__steps h3 {
		margin-top: 0;
		font-size: 1.12rem;
	}

	.fv-partners__logos {
		grid-template-columns: repeat(2, minmax(0,1fr));
	}

	.fv-partners__logos > div {
		min-height: 106px;
		padding: 18px;
	}

	.fv-faq summary {
		gap: 20px;
		font-size: 1rem;
		line-height: 1.45;
	}

	.fv-contact__promise {
		grid-template-columns: 38px minmax(0,1fr);
		gap: 14px;
	}

	.fv-form-card {
		padding: 24px 18px;
		border-radius: 20px;
	}

	.fv-form label {
		font-size: 12px;
		line-height: 1.45;
	}

	.fv-form input:not([type="checkbox"]),
	.fv-form select,
	.fv-form textarea {
		width: 100%;
		min-height: 50px;
		font-size: 16px;
		line-height: 1.45;
	}

	.fv-form textarea {
		min-height: 150px;
	}

	.fv-form__submit {
		width: 100%;
	}

	/* Mobile conversion dock. Hidden at top, appears after user starts reading. */
	.fv-mobile-cta {
		position: fixed;
		z-index: 9998;
		left: 12px;
		right: 12px;
		bottom: max(10px, env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 58px;
		padding: 8px 10px 8px 20px;
		border: 1px solid rgba(255,255,255,.13);
		border-radius: 18px;
		background: rgba(11,12,13,.92);
		color: #fff;
		box-shadow: 0 18px 50px rgba(0,0,0,.24);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		font-size: 13px;
		font-weight: 800;
		text-decoration: none;
		transform: translateY(calc(100% + 24px));
		opacity: 0;
		pointer-events: none;
		transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
	}

	.fv-mobile-cta::after {
		content: "↗";
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		border-radius: 12px;
		background: var(--fv-accent);
		font-size: 18px;
	}

	body.fv-mobile-cta-visible .fv-mobile-cta {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}
}

/* ---------------------------------------------------------
   SMALL PHONES
   --------------------------------------------------------- */
@media (max-width: 480px) {
	:root {
		--fv-page-gutter: 16px;
	}

	.fv-container,
	.fv-container--wide {
		width: calc(100% - 32px);
	}

	#header .ct-container {
		width: calc(100% - 24px);
	}

	#header [data-row="middle"] > div {
		min-height: 66px;
	}

	#header .site-logo-container img {
		max-height: 48px;
	}

	.fv-hero__content {
		padding: 42px 16px 34px;
	}

	.fv-hero__title {
		font-size: clamp(3.45rem, 17vw, 4.65rem);
		line-height: .91;
	}

	.fv-hero__lead {
		font-size: 1rem;
	}

	.fv-hero__services {
		width: calc(100vw - 16px);
		margin-right: -16px;
		padding-right: 16px;
	}

	.fv-button {
		min-height: 52px;
		padding-inline: 22px;
		font-size: 13px;
	}

	.fv-services__grid {
		width: calc(100vw - 16px);
		margin-right: -16px;
		padding-right: 16px;
	}

	.fv-service-card {
		flex-basis: min(88vw, 330px);
		min-height: 350px;
		padding: 28px 24px;
	}

	.fv-service-card a {
		left: 24px;
		right: 24px;
	}

	.fv-project-slider {
		grid-auto-columns: 88vw;
		padding-left: 16px;
		padding-right: 16px;
		scroll-padding-left: 16px;
	}

	.fv-project-slide {
		min-height: 430px;
	}

	.fv-partners__logos {
		grid-template-columns: 1fr 1fr;
	}
}

/* Wide but short screens (e.g. tablets in landscape / small laptops). */
@media (min-width: 1000px) and (max-height: 780px) {
	.fv-hero {
		min-height: 690px;
	}

	.fv-hero__content {
		padding-top: 58px;
		padding-bottom: 58px;
	}

	.fv-hero__title {
		font-size: clamp(4rem, 6.2vw, 6.7rem);
	}

	.fv-hero__lead {
		margin-top: 26px;
	}

	.fv-hero__services {
		margin-top: 36px;
	}
}

@keyframes fv-swipe-hint {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(5px); }
}

/* =========================================================
   19. MOBILE MENU TRIGGER — SILVER / WHITE
   ========================================================= */
@media (max-width: 999px) {
	/* Blocksy mobile hamburger: premium silver instead of theme blue */
	#header .ct-header-trigger,
	#header [data-id="trigger"] .ct-header-trigger,
	#header [data-id="trigger"] button {
		color: var(--fv-silver-light) !important;
		--theme-icon-color: var(--fv-silver-light) !important;
		--theme-button-text-initial-color: var(--fv-silver-light) !important;
		--theme-button-text-hover-color: #ffffff !important;
		border-color: rgba(210, 212, 214, .30) !important;
		background: rgba(255, 255, 255, .035) !important;
	}

	#header .ct-header-trigger svg,
	#header .ct-header-trigger .ct-icon,
	#header [data-id="trigger"] svg,
	#header [data-id="trigger"] .ct-icon {
		color: inherit !important;
		fill: currentColor !important;
		stroke: currentColor !important;
	}

	/* Covers Blocksy's three-bar trigger variants */
	#header .ct-header-trigger .ct-trigger,
	#header .ct-header-trigger .ct-trigger span,
	#header [data-id="trigger"] .ct-trigger,
	#header [data-id="trigger"] .ct-trigger span {
		color: var(--fv-silver-light) !important;
		border-color: currentColor !important;
		background-color: currentColor !important;
	}

	#header .ct-header-trigger:hover,
	#header .ct-header-trigger:focus-visible,
	#header [data-id="trigger"] button:hover,
	#header [data-id="trigger"] button:focus-visible {
		color: #ffffff !important;
		--theme-icon-color: #ffffff !important;
		border-color: rgba(255, 255, 255, .60) !important;
		background: rgba(255, 255, 255, .08) !important;
	}

	/* Off-canvas close control follows the same visual language */
	#offcanvas .ct-toggle-close,
	#offcanvas .ct-toggle-close svg,
	#offcanvas .ct-toggle-close .ct-icon {
		color: var(--fv-silver-light) !important;
		--theme-icon-color: var(--fv-silver-light) !important;
		fill: currentColor !important;
		stroke: currentColor !important;
	}
}

/* =========================================================
   v1.4 DESKTOP HORIZONTAL REFINEMENT
   Wider hero · lower vertical footprint · more editorial width
   ========================================================= */

/* Desktop should feel like a premium interior studio rather than a tall
   stacked landing page. Keep mobile/tablet behavior from v1.3 intact. */
@media (min-width: 1000px) {
	:root {
		--fv-content: 1540px;
		--fv-content-wide: 1800px;
		--fv-section-space: clamp(78px, 6vw, 112px);
	}

	/* -----------------------------------------------------
	   HERO — full-bleed to the right edge
	   ----------------------------------------------------- */
	body.home .fv-hero {
		min-height: clamp(690px, 76svh, 820px);
		max-height: 840px;
	}

	body.home .fv-hero > .fv-container--wide {
		width: 100%;
		max-width: none;
		margin-inline: 0;
	}

	.fv-hero__grid {
		grid-template-columns: minmax(520px, 39.5%) 1px minmax(0, 60.5%);
	}

	.fv-hero__content {
		padding-top: clamp(56px, 5vw, 76px);
		padding-right: clamp(42px, 4vw, 72px);
		padding-bottom: clamp(56px, 5vw, 76px);
		padding-left: max(48px, calc((100vw - var(--fv-content)) / 2));
	}

	.fv-hero__title {
		max-width: 11ch;
		font-size: clamp(4.8rem, 5.7vw, 7.2rem);
		line-height: .91;
		letter-spacing: -.05em;
	}

	.fv-hero__lead {
		max-width: 48ch;
		margin-top: 28px;
		font-size: clamp(1.06rem, .45vw + 1rem, 1.2rem);
		line-height: 1.64;
	}

	.fv-hero__actions {
		margin-top: 28px;
	}

	.fv-hero__services {
		margin-top: 40px;
		padding-top: 18px;
	}

	.fv-hero__visual {
		padding-left: 0;
	}

	.fv-hero__image-wrap {
		min-height: clamp(690px, 76svh, 820px);
		border-radius: 0;
		box-shadow: none;
	}

	.fv-hero__image {
		object-position: center 46%;
	}

	.fv-hero__project-card {
		left: 30px;
		bottom: 26px;
	}

	/* -----------------------------------------------------
	   GLOBAL DESKTOP RHYTHM — broader, less vertically stacked
	   ----------------------------------------------------- */
	.fv-section {
		padding-block: var(--fv-section-space);
	}

	.fv-section-head {
		grid-template-columns: minmax(0, 1.15fr) minmax(320px, 470px);
		gap: clamp(48px, 5vw, 86px);
		margin-bottom: clamp(38px, 4vw, 54px);
	}

	.fv-intro__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(380px, .75fr);
		gap: clamp(70px, 7vw, 120px);
	}

	.fv-intro__copy {
		padding-top: 24px;
	}

	.fv-service-card {
		min-height: 300px;
		padding: 34px 34px 32px;
	}

	.fv-service-card h3 {
		margin-top: 40px;
	}

	.fv-service-card a {
		left: 34px;
		bottom: 28px;
	}

	.fv-advice__grid {
		grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
		gap: clamp(64px, 6vw, 108px);
	}

	.fv-advice__visual {
		min-height: 520px;
	}

	.fv-project-slider {
		grid-auto-columns: minmax(460px, 34vw);
		gap: 20px;
	}

	.fv-project-slide {
		min-height: 520px;
	}

	.fv-about__grid {
		grid-template-columns: minmax(420px, .8fr) minmax(0, 1.12fr);
		gap: clamp(70px, 7vw, 118px);
	}

	.fv-about__content {
		max-width: 700px;
	}

	.fv-about__visual {
		min-height: 550px;
	}

	.fv-process__grid {
		grid-template-columns: minmax(390px, .8fr) minmax(0, 1.2fr);
		gap: clamp(70px, 7vw, 120px);
	}

	.fv-process__steps li {
		padding-bottom: 30px;
	}

	.fv-sustainability__grid {
		grid-template-columns: 110px minmax(0, 1.08fr) minmax(380px, .92fr);
		gap: clamp(42px, 5vw, 78px);
	}

	.fv-sustainability__mark {
		width: 104px;
		height: 104px;
	}

	.fv-partners__logos > div {
		min-height: 112px;
	}

	.fv-faq__grid,
	.fv-contact__grid {
		grid-template-columns: minmax(420px, .8fr) minmax(0, 1.2fr);
		gap: clamp(72px, 7vw, 120px);
	}
}

/* Large desktop: let the photography become the hero, not a framed card. */
@media (min-width: 1500px) {
	.fv-hero__grid {
		grid-template-columns: minmax(560px, 37.5%) 1px minmax(0, 62.5%);
	}

	.fv-hero__title {
		font-size: clamp(5rem, 5.25vw, 6.9rem);
	}
}

/* Short desktop screens stay compact instead of forcing a viewport-height hero. */
@media (min-width: 1000px) and (max-height: 820px) {
	body.home .fv-hero,
	.fv-hero__image-wrap {
		min-height: 650px;
		max-height: 720px;
	}

	.fv-hero__content {
		padding-top: 46px;
		padding-bottom: 46px;
	}

	.fv-hero__title {
		font-size: clamp(4.35rem, 5.5vw, 6.25rem);
	}

	.fv-hero__lead {
		margin-top: 22px;
	}

	.fv-hero__actions {
		margin-top: 22px;
	}

	.fv-hero__services {
		margin-top: 30px;
	}
}

/* =========================================================
   v1.4.1 HERO BALANCE REFINEMENT
   Desktop: generous copy column + wide photography
   Mobile: editorial image-overlay hero inspired by approved mockup
   ========================================================= */

@media (min-width: 1000px) {
	/* The previous 37/63 split made the copy feel squeezed. A 44/56 balance
	   keeps the photography dominant while giving the message room to breathe. */
	.fv-hero__grid {
		grid-template-columns: minmax(610px, 44%) 1px minmax(0, 56%);
	}

	.fv-hero__content {
		padding-left: max(54px, calc((100vw - var(--fv-content)) / 2));
		padding-right: clamp(54px, 4.2vw, 86px);
	}

	.fv-hero__eyebrow {
		max-width: 38ch;
		line-height: 1.55;
	}

	.fv-hero__title {
		max-width: 8.9ch;
		font-size: clamp(5rem, 5.35vw, 7.05rem);
		line-height: .88;
		letter-spacing: -.052em;
	}

	.fv-hero__lead {
		max-width: 49ch;
		font-size: clamp(1.08rem, .35vw + 1rem, 1.2rem);
		line-height: 1.68;
	}

	.fv-hero__visual {
		min-width: 0;
	}

	.fv-hero__image {
		object-position: center 46%;
	}
}

@media (min-width: 1500px) {
	.fv-hero__grid {
		grid-template-columns: minmax(650px, 42.5%) 1px minmax(0, 57.5%);
	}

	.fv-hero__title {
		max-width: 9ch;
		font-size: clamp(5.25rem, 5vw, 6.85rem);
	}
}

/* ---------------------------------------------------------
   MOBILE HERO — image and message become one composition
   --------------------------------------------------------- */
@media (max-width: 999px) {
	body.home .fv-hero {
		position: relative;
		min-height: clamp(660px, 88svh, 860px);
		background: var(--fv-black);
	}

	.fv-hero__grid {
		position: relative;
		min-height: inherit;
		width: 100%;
		isolation: isolate;
		display: block;
	}

	.fv-hero__visual {
		position: absolute;
		inset: 0;
		z-index: 0;
		padding: 0;
		min-height: inherit;
	}

	.fv-hero__image-wrap {
		position: absolute;
		inset: 0;
		min-height: 100%;
		height: 100%;
		box-shadow: none;
		transform: none !important;
	}

	.fv-hero__image {
		inset: 0;
		width: 100%;
		height: 100%;
		object-position: 58% center;
		filter: saturate(.82) contrast(1.02) brightness(.78);
		transform: scale(1.02);
	}

	.fv-hero.is-ready .fv-hero__image {
		transform: scale(1.055);
	}

	.fv-hero__image-wrap::after {
		z-index: 2;
		background:
			linear-gradient(90deg, rgba(7,8,9,.97) 0%, rgba(7,8,9,.89) 35%, rgba(7,8,9,.45) 67%, rgba(7,8,9,.12) 100%),
			linear-gradient(0deg, rgba(7,8,9,.78) 0%, rgba(7,8,9,.16) 46%, rgba(7,8,9,.18) 100%);
	}

	.fv-hero__content {
		position: relative;
		z-index: 4;
		min-height: inherit;
		width: min(100%, 690px);
		padding: clamp(64px, 10vw, 92px) 26px 52px;
		justify-content: flex-start;
	}

	.fv-hero__eyebrow {
		max-width: 30ch;
		margin-bottom: 30px;
		color: rgba(255,255,255,.76);
		font-size: clamp(.72rem, 2.3vw, .84rem);
		line-height: 1.7;
		letter-spacing: .145em;
	}

	.fv-hero__title {
		max-width: 8ch;
		font-size: clamp(4.05rem, 15.2vw, 6.2rem);
		line-height: .86;
		letter-spacing: -.055em;
		text-wrap: balance;
	}

	.fv-hero__lead {
		max-width: 25ch;
		margin-top: 32px;
		color: rgba(255,255,255,.86);
		font-size: clamp(1rem, 3.7vw, 1.14rem);
		line-height: 1.62;
	}

	.fv-hero__actions {
		margin-top: 30px;
		gap: 18px;
	}

	.fv-hero__actions .fv-button {
		min-height: 56px;
		padding-inline: 26px;
	}

	.fv-hero__text-link {
		color: rgba(255,255,255,.92);
	}

	.fv-hero__services {
		margin-top: auto;
		padding-top: 30px;
		padding-bottom: 4px;
		border-color: rgba(255,255,255,.16);
		background: transparent;
	}

	.fv-hero__services span {
		color: rgba(255,255,255,.70);
	}

	.fv-hero__project-card {
		display: none;
	}
}

@media (max-width: 700px) {
	body.home .fv-hero {
		min-height: clamp(680px, 90svh, 820px);
	}

	.fv-hero__content {
		padding: 48px 22px 34px;
	}

	.fv-hero__eyebrow {
		margin-bottom: 24px;
	}

	.fv-hero__title {
		font-size: clamp(3.85rem, 16.3vw, 5.15rem);
		line-height: .87;
	}

	.fv-hero__lead {
		max-width: 23ch;
		margin-top: 26px;
		font-size: clamp(1rem, 4.35vw, 1.08rem);
		line-height: 1.58;
	}

	.fv-hero__actions {
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 26px;
	}

	.fv-hero__actions .fv-button {
		width: auto;
	}

	.fv-hero__services {
		margin-top: auto;
		padding-top: 24px;
	}
}

@media (max-width: 480px) {
	.fv-hero__content {
		padding-inline: 20px;
	}

	.fv-hero__title {
		font-size: clamp(3.55rem, 17.3vw, 4.65rem);
	}

	.fv-hero__lead {
		max-width: 22ch;
	}

	.fv-hero__text-link {
		font-size: 12.5px;
	}
}