/* ==========================================================================
   VENTURE — main stylesheet
   Design source: Figma "For Development" (1440px desktop grid)
   Palette:
     --black   #000000   page background
     --red     #FE4E4E   accent / filled CTA
     --red-2   #FF4F4F   gradient red
     --glow    #D64848   image glow shadows
     --white   #FFFFFF
   Type:
     Display  : Nohemi Light, 96px / -2% tracking / uppercase (gradient fill)
     Body     : Open Sauce Sans 16px / +1% tracking / uppercase
     Buttons  : Schibsted Grotesk SemiBold 16px / uppercase
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
	font-family: 'Nohemi';
	src: url('../fonts/Nohemi-Light.woff2') format('woff2');
	font-weight: 300;
	font-display: swap;
}
@font-face {
	font-family: 'Nohemi';
	src: url('../fonts/Nohemi-Regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Open Sauce Sans';
	src: url('../fonts/OpenSauceSans-Regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Open Sauce Sans';
	src: url('../fonts/OpenSauceSans-Medium.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: 'Open Sauce Sans';
	src: url('../fonts/OpenSauceSans-Bold.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}

/* ---------- Tokens & reset ---------- */
:root {
	--black: #000;
	--red: #FE4E4E;
	--red-2: #FF4F4F;
	--glow: #D64848;
	--white: #fff;

	--font-display: 'Nohemi', 'Arial Narrow', sans-serif;
	--font-body: 'Open Sauce Sans', 'Helvetica Neue', Arial, sans-serif;
	--font-btn: 'Schibsted Grotesk', Arial, sans-serif;

	--size-display: clamp(44px, 6.7vw, 96px);
	--gutter: clamp(20px, 2.8vw, 40px);
	--container: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--black);
	color: var(--white);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.4;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; }
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ---------- Type utilities ---------- */
.display {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: var(--size-display);
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
.display--red   { background-image: linear-gradient(64deg, var(--red-2) 47%, #000 108%); }
.display--white { background-image: linear-gradient(45deg, #fff 47%, #000 108%); }

.label {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--white);
}
.label--bold { font-weight: 700; }

.nav-link {
	font-family: var(--font-body);
	font-size: 16px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--white);
	text-decoration: none;
}
.nav-link--underline { font-weight: 500; text-decoration: underline; text-underline-position: from-font; }
.nav-link:hover { color: var(--red); }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	padding: 24px 40px;
	font-family: var(--font-btn);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn--fill { background: var(--red); color: var(--black); }
.btn--fill:hover { background: var(--white); }
.btn--outline { border: 1px solid var(--white); color: var(--white); min-width: 304px; }
.btn--outline:hover { border-color: var(--red); color: var(--red); }

/* ---------- Header ---------- */
.site-header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	max-width: var(--container);
	margin: 0 auto;
	padding: 30px var(--gutter) 0;
}
.site-header > .nav-link { justify-self: start; }
.site-logo { justify-self: center; }
.site-logo img { width: 40px; height: auto; }
.site-header__links {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: clamp(20px, 3.3vw, 48px);
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	max-width: var(--container);
	margin: 0 auto;
	padding: clamp(40px, 7vw, 110px) var(--gutter) 0;
}
.hero__top {
	display: grid;
	grid-template-columns: minmax(0, 461fr) minmax(0, 899fr);
	gap: 0;
	align-items: start;
}
.hero__title-left { max-width: 5.2em; }
.hero__images {
	display: flex;
	gap: clamp(16px, 2.3vw, 34px);
	justify-content: flex-end;
	align-items: flex-start;
}
.hero__img--large { width: clamp(280px, 40.5vw, 583px); flex-shrink: 0; }
.hero__img--small { width: clamp(120px, 17.2vw, 248px); }
.hero__img--glow img { mix-blend-mode: screen; }
.hero__title-right {
	margin-top: clamp(24px, 3vw, 48px);
	margin-left: auto;
	max-width: 6.3em;
	text-align: right;
	background-image: linear-gradient(69deg, var(--red-2) 70%, #000 102%);
}
.hero__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 32px clamp(32px, 6vw, 90px);
	margin-top: clamp(40px, 5vw, 72px);
	padding-bottom: clamp(60px, 8vw, 120px);
}
/* Soft red ambience easing the hero into the services section */
.hero::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: -12%;
	width: 55%;
	height: 45%;
	background: radial-gradient(ellipse 60% 70% at 75% 60%, rgba(214, 72, 72, .13), transparent 70%);
	pointer-events: none;
}
.hero { position: relative; }
.hero__foot-left { display: flex; flex-direction: column; gap: clamp(28px, 5vw, 92px); }
.hero__foot-note { max-width: 322px; font-weight: 700; }

/* ---------- Services (pinned scroll-step) ----------
   The section is 3 viewport-heights tall; its content is sticky, so
   scrolling through it steps the active service and fills the rail.
   --progress (0→1) is set by JS in assets/js/main.js.               */
.services {
	position: relative;
	height: 300vh;
	max-width: var(--container);
	margin: 0 auto;
	--progress: 0;
}
.services__pin {
	position: sticky;
	top: 0;
	min-height: 100vh;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	padding: 0 var(--gutter);
}
.services__rail {
	position: absolute;
	left: var(--gutter);
	top: 18vh;
	bottom: 18vh;
	width: 15px;
}
.services__track {
	position: absolute;
	left: 7px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(255, 255, 255, .25);
}
.services__fill {
	position: absolute;
	left: 7px;
	top: 0;
	height: 100%;
	width: 1px;
	background: var(--red);
	transform: scaleY(var(--progress));
	transform-origin: top;
	box-shadow: 0 0 12px 1px rgba(254, 78, 78, .5);
}
.services__dot {
	position: absolute;
	left: 0;
	top: calc(var(--progress) * (100% - 15px));
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--red);
	box-shadow: 0 0 24px 6px rgba(254, 78, 78, .55);
}
.services__list {
	display: flex;
	flex-direction: column;
	gap: clamp(36px, 4.5vw, 64px);
	padding-left: clamp(48px, 5.2vw, 75px);
}
.service { display: flex; flex-direction: column; gap: 8px; }
.service .display {
	line-height: .92;
	background-image: linear-gradient(32deg, rgba(64, 64, 64, .45) 47%, rgba(0, 0, 0, .45) 108%);
	transition: background-image .5s ease, transform .5s ease;
	transform: translateX(0);
}
.service__desc {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .5s ease, opacity .5s ease .1s;
}
/* Active states driven by data-active on .services */
.services[data-active="0"] .service[data-index="0"] .display,
.services[data-active="1"] .service[data-index="1"] .display,
.services[data-active="2"] .service[data-index="2"] .display {
	background-image: linear-gradient(45deg, #fff 47%, #333 130%);
	transform: translateX(6px);
}
.services[data-active="0"] .service[data-index="0"] .service__desc,
.services[data-active="1"] .service[data-index="1"] .service__desc,
.services[data-active="2"] .service[data-index="2"] .service__desc {
	max-height: 80px;
	opacity: 1;
}
.services__mockup img {
	width: 100%;
	transform: translateY(calc(var(--progress) * -36px)) scale(calc(1 + var(--progress) * .03));
	transition: transform .15s linear;
}

/* ---------- Why us ---------- */
.why {
	position: relative;
	max-width: var(--container);
	margin: 0 auto;
	padding: clamp(100px, 14vw, 200px) var(--gutter);
	min-height: min(660px, 80vh);
	display: grid;
	align-items: center;
	overflow: hidden;
}
/* Faint grid backdrop behind the copy only, fading out well before the floats.
   Sits ABOVE the blended renders (z-index 1 vs 0) so they can't brighten it. */
.why::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 48% 52% at 50% 50%, #000 20%, transparent 68%);
	mask-image: radial-gradient(ellipse 48% 52% at 50% 50%, #000 20%, transparent 68%);
	pointer-events: none;
}
/* Subtle red ambience low in the section, kept central so it doesn't
   sit under the corner renders */
.why::after {
	content: '';
	position: absolute;
	inset: auto 20% -18% 20%;
	height: 45%;
	z-index: 0;
	background: radial-gradient(ellipse 60% 60% at 50% 100%, rgba(214, 72, 72, .11), transparent 68%);
	pointer-events: none;
}
.why__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	max-width: 463px;
	margin: 0 auto;
	text-align: center;
}
.why__inner .display { background-image: linear-gradient(27deg, var(--red-2) 47%, #000 108%); }
.why__inner .btn { margin-top: 9px; }
.why__float { position: absolute; z-index: 0; pointer-events: none; }
.why__float img {
	width: 100%;
	/* Renders come on black backgrounds; screen-blending on the black page
	   makes those backgrounds invisible so only the object + glow show. */
	mix-blend-mode: screen;
}
/* Figma frame 1000004902 arrangement (positions as % of a 1440x659 frame):
   wef 2: large, top-left, ~46deg / wef 1: top-right, ~21deg
   wef 3: bottom center-left, ~12deg / wef 4: bottom-right, ~12deg */
.why__float--2 { top: 4%;   left: 8%;    width: clamp(180px, 26vw, 380px);  transform: rotate(46deg); }
.why__float--1 { top: 10%;  right: 11%;  width: clamp(120px, 15.5vw, 225px); transform: rotate(21deg); }
.why__float--3 { bottom: 6%; left: 27%;  width: clamp(110px, 14.5vw, 210px); transform: rotate(12deg); }
.why__float--4 { bottom: 9%; right: 14%; width: clamp(100px, 12vw, 175px);   transform: rotate(12deg); }

/* ---------- Partner statement ---------- */
.partner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 29px;
	max-width: var(--container);
	margin: 0 auto;
	padding: clamp(80px, 11vw, 170px) var(--gutter);
	text-align: center;
}
/* Ring/mesh backdrop (export "Vector" from Figma as bg-rings.svg into
   assets/img/). Masked so it fades out on every side — no hard edges. */
.partner::before {
	content: '';
	position: absolute;
	inset: -12% 0;
	background: url('../img/bg-rings.svg') center 40% / min(1700px, 150vw) auto no-repeat;
	opacity: .8;
	-webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, #000 30%, transparent 74%);
	mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, #000 30%, transparent 74%);
	pointer-events: none;
}
.partner__glow {
	position: absolute;
	top: 8%;
	left: 50%;
	transform: translateX(-72%);
	width: clamp(340px, 46vw, 700px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(214, 72, 72, .5) 0%, transparent 62%);
	filter: blur(46px);
	pointer-events: none;
}
.partner__title { position: relative; max-width: 798px; }
.partner__industries { max-width: 608px; }

/* ---------- Benefits ---------- */
.benefits {
	display: grid;
	grid-template-columns: minmax(0, 411px) minmax(200px, 573px) minmax(0, 1fr);
	gap: 30px;
	align-items: center;
	max-width: var(--container);
	margin: 0 auto;
	padding: clamp(60px, 8vw, 120px) var(--gutter) clamp(80px, 10vw, 150px);
}
.benefits__title { background-image: linear-gradient(67deg, var(--red-2) 47%, #000 108%); }
.benefits__wires svg { width: 100%; height: 380px; }
.benefits__list { display: flex; flex-direction: column; gap: 70px; }
.benefits__list li { white-space: nowrap; }

/* ---------- Footer ---------- */
.site-footer { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) var(--gutter); }
.site-footer__panel {
	position: relative;
	min-height: clamp(420px, 57vw, 819px);
	padding: 31px 32px;
	background:
		linear-gradient(54deg, var(--red-2) 1%, #000 107%),
		#d9d9d9;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.site-footer__logo { width: 86px; height: auto; }
.site-footer__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: clamp(24px, 6vw, 96px);
	padding: 0 clamp(0px, 1.5vw, 20px);
}
.site-footer__links { display: flex; gap: 36px; }
.site-footer__giant {
	margin-top: clamp(24px, 4vw, 45px);
	font-family: var(--font-display);
	font-weight: 400;
	/* vw-scaled but hard-capped: the panel maxes out at 1440px wide, so the
	   type must too — otherwise it clips on wide monitors */
	font-size: clamp(56px, 16.3vw, 226px);
	line-height: .84;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	text-align: center;
	background-image: linear-gradient(153deg, #000 58%, #d04040 112%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	white-space: nowrap;
}
.site-footer__giant span { display: block; }

/* ---------- Fallback page ---------- */
.fallback-page { max-width: 800px; margin: 0 auto; padding: 80px var(--gutter); }
.fallback-page__content { margin-top: 32px; text-transform: none; }

/* ---------- Reveal animation ---------- */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal { opacity: 1; transform: none; transition: none; }
	.service .display, .service__desc, .services__mockup img { transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
	/* Unpin services on small screens: normal stacked flow,
	   active item driven by IntersectionObserver in main.js */
	.services { height: auto; }
	.services__pin {
		position: static;
		min-height: 0;
		grid-template-columns: 1fr;
		padding: clamp(60px, 8vw, 120px) var(--gutter);
	}
	.services__rail { display: none; }
	.services__mockup img { transform: none; }
	.benefits {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.benefits__wires { display: none; }
	.benefits__list { gap: 28px; }
	.benefits__list li { white-space: normal; }
	.hero__images { margin-top: 24px; justify-content: flex-start; }
	.hero__title-right { margin-left: 0; text-align: left; max-width: none; }
	.why__float--2 { display: none; }
}

@media (max-width: 640px) {
	.site-header__links {
		grid-column: 1 / -1;
		justify-self: center;
		flex-wrap: wrap;
		justify-content: center;
	}
	.site-header__links .btn { height: 48px; padding: 14px 20px; }
	.btn--outline { min-width: 0; width: 100%; max-width: 304px; }
	.hero__img--small { display: none; }
	.why__float { opacity: .5; }
	.site-footer__nav { flex-direction: column; align-items: flex-start; gap: 12px; }
}