/* ==========================================================================
   EVO Marketing — main stylesheet
   Dark cinematic identity, EVO green (#08A683), script accents (Mayonice).
   ========================================================================== */

/* Fonts (self-hosted, latin subset) ---------------------------------------- */
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin.woff2") format("woff2"); font-weight: 500 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Mayonice"; src: url("../fonts/mayonice.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* Fallbacks sized like Inter Tight / Inter (widths and line heights measured
   against Arial): the text shown before the web fonts arrive takes the same
   room, so the swap does not move the page (layout shift). */
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 500 900; size-adjust: 94%; ascent-override: 103.2%; descent-override: 25.5%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 300 500; size-adjust: 106.5%; ascent-override: 91.1%; descent-override: 22.5%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 600 700; size-adjust: 101.2%; ascent-override: 95.8%; descent-override: 23.7%; line-gap-override: 0%; }
@font-face { font-family: "Mayonice Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400; size-adjust: 104.3%; ascent-override: 86.3%; descent-override: 20.1%; line-gap-override: 0%; }

/* Tokens ------------------------------------------------------------------- */
:root {
	--green: #08a683;
	--green-2: #19d9a6;
	--green-3: #7cf3cf;
	--green-deep: #04251d;
	--green-a10: rgb(8 166 131 / .10);
	--green-a20: rgb(8 166 131 / .20);
	--green-a40: rgb(8 166 131 / .40);
	--bg: #050606;
	--bg-2: #0a0c0b;
	--surface: #0f1211;
	--surface-2: #151918;
	--line: rgb(255 255 255 / .08);
	--line-2: rgb(255 255 255 / .14);
	--text: #e9eeec;
	--muted: #a2aca8;
	--dim: #6d7773;
	--white: #fff;
	--radius: 22px;
	--radius-sm: 14px;
	--radius-lg: 32px;
	--container: 1240px;
	--gutter: clamp(20px, 4vw, 40px);
	--section: clamp(72px, 10vw, 140px);
	--font: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--display: "Inter Tight", "Inter Tight Fallback", "Inter", ui-sans-serif, system-ui, sans-serif;
	--script: "Mayonice", "Mayonice Fallback", "Brush Script MT", cursive;
	--ease: cubic-bezier(.22, 1, .36, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--glow: 0 0 0 1px rgb(8 166 131 / .45), 0 0 34px -6px rgb(25 217 166 / .55), inset 0 0 26px -12px rgb(25 217 166 / .45);
	--shadow: 0 30px 80px -30px rgb(0 0 0 / .8);
	color-scheme: dark;
}

/* Base --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .5s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); filter: blur(6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 1.0625rem/1.65 var(--font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
body::before { /* film grain */
	content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes grain { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } }

img, svg, video, picture { display: block; max-width: 100%; height: auto; }
picture.pic { display: contents; }
a { color: inherit; text-decoration: none; }
:is(.prose, .shead__intro, .hero__lead, .answer, .card__text, .faq__a, .split__body, .contact__note, .form, .consent, .cta__text, .stat__note, .tabs__body, .feature-list, .aside-card, .mapbox__address, .article__meta, .crumbs, .fold__body) a:not([class]) { color: var(--green-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; }
:is(.prose, .shead__intro, .hero__lead, .answer, .card__text, .faq__a, .split__body, .contact__note, .form, .consent, .cta__text, .stat__note, .tabs__body, .feature-list, .aside-card, .mapbox__address, .article__meta, .fold__body) a:not([class]):hover { color: var(--green-3); }
.crumbs a:not([class]) { text-decoration: none; color: var(--muted); }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--white); font-weight: 600; }
::selection { background: var(--green); color: #fff; }
:focus-visible { outline: 2px solid var(--green-2); outline-offset: 3px; border-radius: 6px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 10000; padding: 10px 16px; background: var(--green); color: #fff; border-radius: 10px; transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: none; }
.site-main:focus { outline: none; }
.linklike { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { --container: 860px; }

/* Typography --------------------------------------------------------------- */
.heading, .h1, .h2, .h3, .display { font-family: var(--display); font-weight: 800; letter-spacing: -.025em; line-height: 1.02; text-transform: uppercase; color: var(--white); margin: 0; text-wrap: balance; }
.display { font-size: clamp(2.4rem, 6.4vw, 5.6rem); letter-spacing: -.035em; line-height: .98; }
.h1 { font-size: clamp(2.2rem, 5.2vw, 4.4rem); }
.h2 { font-size: clamp(1.9rem, 4vw, 3.4rem); }
.h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); letter-spacing: -.01em; line-height: 1.1; }
.accent {
	font-family: var(--script); font-weight: 400; text-transform: none; letter-spacing: 0;
	font-size: 1.12em; line-height: 1; padding: 0 .06em;
	color: var(--green-2);
	filter: drop-shadow(0 0 18px rgb(25 217 166 / .3));
}
.accent, .accent .w > span {
	background-image: linear-gradient(100deg, var(--green-3), var(--green-2) 45%, var(--green) 90%);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.eyebrow { font: 700 .78rem/1.2 var(--display); letter-spacing: .26em; text-transform: uppercase; color: var(--green-2); margin: 0 0 18px; display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--green-2)); }

/* Buttons ------------------------------------------------------------------ */
.btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.btns--center { justify-content: center; }
.btn {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	min-height: 52px; padding: 14px 26px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
	font: 700 .82rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
	transition: background .3s, border-color .3s, box-shadow .3s, color .3s;
	isolation: isolate; overflow: hidden;
}
.btn__icon { display: inline-grid; place-items: center; width: 22px; height: 22px; transition: transform .35s var(--ease); }
.btn__icon .icon { width: 18px; height: 18px; }
.btn:hover .btn__icon { transform: translateX(4px); }
.btn--primary { background: linear-gradient(135deg, var(--green-2), var(--green) 55%, #067d63); color: #fff; box-shadow: 0 12px 34px -14px rgb(25 217 166 / .8), inset 0 1px 0 rgb(255 255 255 / .25); }
.btn--primary::after { /* shine sweep */
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .38) 48%, transparent 66%);
	transform: translateX(-120%); transition: transform .9s var(--ease);
}
.btn--primary:hover::after { transform: translateX(120%); }
.btn--primary:hover { box-shadow: 0 18px 44px -14px rgb(25 217 166 / 1), inset 0 1px 0 rgb(255 255 255 / .3); }
.btn--ghost { color: var(--white); border-color: rgb(8 166 131 / .55); background: rgb(8 166 131 / .06); backdrop-filter: blur(8px); }
.btn--ghost:hover { border-color: var(--green-2); background: rgb(8 166 131 / .16); box-shadow: 0 0 30px -8px rgb(25 217 166 / .6); }
.btn--white { background: #fff; color: #031a14; }
.btn--link { min-height: 0; padding: 0; border: 0; letter-spacing: .08em; color: var(--green-2); }
.btn--sm { min-height: 44px; padding: 11px 20px; font-size: .74rem; }
.btn--lg { min-height: 58px; padding: 16px 30px; }

/* Header ------------------------------------------------------------------- */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 1001; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--green), var(--green-3)); box-shadow: 0 0 12px var(--green-2); }

.site-header { position: fixed; inset: 0 0 auto; z-index: 1000; padding: 14px var(--gutter); transition: padding .4s var(--ease); }
.site-header__bar {
	position: relative; max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
	padding: 10px 14px 10px 22px; border-radius: 999px; border: 1px solid transparent;
	transition: background .4s, border-color .4s, box-shadow .4s, backdrop-filter .4s;
}
.site-header.is-scrolled { padding-top: 10px; }
.site-header.is-scrolled .site-header__bar { background: rgb(8 10 9 / .72); border-color: var(--line); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 20px 50px -30px #000; }
.site-header.is-hidden { transform: translateY(-120%); }
.site-header { transition: transform .5s var(--ease), padding .4s var(--ease); }
.nav ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav--right { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.nav__link { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px; font: 600 .78rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .86); border-radius: 999px; transition: color .25s, background .25s; }
.nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 1px; background: var(--green-2); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav__link:hover, .nav__link.is-active, .nav__link[aria-expanded="true"] { color: #fff; }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__caret { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.brand { display: block; color: var(--green); }
.brand__logo { width: 112px; height: auto; transition: width .4s var(--ease), filter .4s; filter: drop-shadow(0 0 18px rgb(8 166 131 / .35)); }
.site-header.is-scrolled .brand__logo { width: 92px; }
.brand:hover .brand__logo { filter: drop-shadow(0 0 26px rgb(25 217 166 / .7)); }
.evo-logo__script { stroke: currentColor; stroke-width: 0; }

/* Logo intro: the script signature writes itself. */
.brand__logo .evo-logo__word { animation: logo-word 1.1s var(--ease) both; transform-origin: 50% 70%; transform-box: fill-box; }
.brand__logo .evo-logo__script { animation: logo-script 1.6s .45s var(--ease) both; }
@keyframes logo-word { from { opacity: 0; transform: translateY(30%) scale(.9); filter: blur(6px); } }
@keyframes logo-script { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.burger { display: none; position: relative; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: rgb(255 255 255 / .03); cursor: pointer; justify-self: end; }
.burger span { position: absolute; left: 14px; right: 14px; height: 1.5px; background: #fff; transition: transform .45s var(--ease), top .45s var(--ease); }
.burger span:first-child { top: 19px; }
.burger span:last-child { top: 27px; }
.burger[aria-expanded="true"] span:first-child { top: 23px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 23px; transform: rotate(-45deg); }

/* Mega menu */
.mega { position: absolute; left: 50%; top: calc(100% + 8px); width: min(1180px, calc(100vw - 2 * var(--gutter))); transform: translateX(-50%); padding-top: 6px; }
.mega[hidden] { display: block; visibility: hidden; pointer-events: none; }
.mega__inner {
	display: grid; grid-template-columns: repeat(4, 1fr) 1.05fr; gap: 6px; padding: 18px; border-radius: 28px;
	background: radial-gradient(120% 140% at 0% 0%, rgb(8 166 131 / .16), transparent 46%), rgb(10 12 11 / .94);
	border: 1px solid var(--line-2); backdrop-filter: blur(24px); box-shadow: 0 40px 100px -30px #000;
	opacity: 0; transform: translateY(-10px) scale(.985); transform-origin: 50% 0; transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.mega.is-open .mega__inner { opacity: 1; transform: none; }
.mega__col { padding: 10px; }
.mega__title { margin: 0 0 10px; font: 700 .7rem/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--green-2); }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega__link { display: flex; gap: 12px; padding: 10px; border-radius: 14px; transition: background .25s; }
.mega__link:hover { background: rgb(255 255 255 / .05); }
.mega__link strong { display: block; font: 600 .92rem/1.25 var(--display); }
.mega__link small { display: block; margin-top: 3px; font-size: .78rem; line-height: 1.4; color: var(--muted); }
.mega__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--green-a10); color: var(--green-2); border: 1px solid var(--green-a20); }
.mega__icon .icon { width: 18px; height: 18px; }
.mega__col--areas { border-left: 1px solid var(--line); padding-left: 22px; }
.mega__areas a { display: block; padding: 6px 0; color: var(--muted); font-size: .9rem; transition: color .2s, transform .3s var(--ease); }
.mega__areas a:hover { color: #fff; transform: translateX(4px); }
.mega__all { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font: 700 .76rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--green-2); }
.mega__all .icon { width: 16px; }

/* Drawer (mobile) */
.drawer { position: fixed; inset: 0; z-index: 999; background: rgb(3 5 4 / .96); backdrop-filter: blur(20px); padding: 96px var(--gutter) 30px; overflow-y: auto; opacity: 0; transition: opacity .4s var(--ease); }
.drawer.is-open { opacity: 1; }
.drawer__inner { max-width: 560px; margin: 0 auto; }
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list > li { border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 50ms + 80ms); }
.drawer.is-open .drawer__list > li { opacity: 1; transform: none; }
.drawer__list > li > a, .drawer__list summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font: 800 1.5rem/1.1 var(--display); text-transform: uppercase; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.drawer__list summary::-webkit-details-marker { display: none; }
.drawer__list summary .icon { width: 22px; transition: transform .3s; }
.drawer__list details[open] summary .icon { transform: rotate(45deg); }
.drawer__list details ul { list-style: none; padding: 0 0 14px; margin: 0; display: grid; gap: 2px; }
.drawer__list details a { display: block; padding: 8px 0; color: var(--muted); }
.drawer__cta { margin-top: 26px; width: 100%; }
.drawer__contact { display: grid; gap: 10px; margin-top: 24px; color: var(--muted); }
.drawer__contact a { display: flex; gap: 10px; align-items: center; }
.drawer__contact .icon { width: 18px; color: var(--green-2); }
html.no-scroll { overflow: hidden; }

/* Sections ----------------------------------------------------------------- */
.section { position: relative; padding-block: var(--section); }
.section--compact { padding-block: calc(var(--section) * .5); }
.section + .section:not(.section--hero):not(.tone--deep):not(.section--cta) { padding-top: calc(var(--section) * .55); }
.tone--deep { background: linear-gradient(180deg, transparent, rgb(255 255 255 / .018) 12%, rgb(255 255 255 / .018) 88%, transparent); }
.tone--deep::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 80% 0%, rgb(8 166 131 / .1), transparent 70%); pointer-events: none; }
.tone--glow::before { content: ""; position: absolute; inset: 10% 0; background: radial-gradient(50% 50% at 50% 50%, rgb(8 166 131 / .14), transparent 70%); pointer-events: none; }
.section__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; opacity: .18; }
.section__bg img { width: 100%; height: 120%; object-fit: cover; filter: grayscale(.6) contrast(1.1); }
.section__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg), transparent 30%, transparent 70%, var(--bg)); }
.section { isolation: isolate; }

.shead { display: grid; gap: 24px; margin-bottom: clamp(36px, 5vw, 64px); }
.shead--split { grid-template-columns: 1.25fr .9fr; align-items: end; gap: clamp(24px, 6vw, 90px); }
.shead--center { text-align: center; justify-items: center; }
.shead--center .shead__intro { max-width: 720px; }
.shead__intro { color: var(--muted); font-size: 1.05rem; }
.shead__intro strong { color: var(--text); }

/* Hero ---------------------------------------------------------------------- */
.section--hero { padding: 0; }
.hero { position: relative; min-height: 78vh; display: flex; align-items: center; padding: clamp(130px, 16vw, 190px) 0 clamp(64px, 8vw, 110px); overflow: hidden; isolation: isolate; }
.hero--home { min-height: 100svh; text-align: center; }
.hero--center { text-align: center; }
.hero--article { min-height: 0; padding-bottom: 40px; }
.hero--project, .hero--page { min-height: 70vh; }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg-img, .hero__bg-video { position: absolute; inset: -6% 0 0; }
.hero__bg-img img { width: 100%; height: 112%; object-fit: cover; opacity: .55; }
.hero__bg-video { opacity: 0; transition: opacity 1.6s var(--ease); overflow: hidden; }
.hero__bg-video.is-ready { opacity: .62; }
/* Once the video plays, the poster image fades out (no ghost image under the video). Kept when the video is not loaded (mobile, reduced motion, save-data). */
.hero__bg-img { transition: opacity 1.4s var(--ease) .4s; }
.hero__bg:has(.hero__bg-video.is-ready) .hero__bg-img { opacity: 0; }
.hero__bg-video { container-type: size; }
.hero__bg-video iframe { position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); transform: translate(-50%, -50%); border: 0; pointer-events: none; }
.hero__shade { position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 40%, transparent, rgb(5 6 6 / .55) 70%), linear-gradient(180deg, rgb(5 6 6 / .55), transparent 30%, transparent 55%, var(--bg) 98%); }
.hero--home .hero__shade { background: radial-gradient(70% 55% at 50% 45%, rgb(5 6 6 / .2), rgb(5 6 6 / .7) 80%), linear-gradient(180deg, rgb(5 6 6 / .6), transparent 25%, transparent 50%, rgb(4 37 29 / .55) 82%, var(--bg)); }
.hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%); -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%); }
@keyframes grid-pan { to { background-position: 72px 72px, 72px 72px; } }
.hero__aurora { position: absolute; inset: 0; opacity: .75; }
/* Decorative layers sized on the screen, not on the hero: their percentages
   (top: -30%, height: 140%…) no longer move when the hero grows while the
   page loads (images, fonts), which counted as a full-screen layout shift. */
.hero__aurora, .hero__beams { position: absolute; inset: 0 0 auto; height: 100vh; }
.hero__aurora span { position: absolute; border-radius: 50%; animation: aurora 18s var(--ease-in-out) infinite alternate; will-change: transform; }
.hero__aurora span:nth-child(1) { width: 46vw; height: 46vw; left: -10vw; top: 30%; background: radial-gradient(circle, rgb(8 166 131 / .55), transparent 65%); }
.hero__aurora span:nth-child(2) { width: 40vw; height: 40vw; right: -8vw; top: -10%; background: radial-gradient(circle, rgb(25 217 166 / .35), transparent 65%); animation-duration: 22s; animation-delay: -6s; }
.hero__aurora span:nth-child(3) { width: 34vw; height: 34vw; left: 35%; bottom: -20%; background: radial-gradient(circle, rgb(4 120 95 / .5), transparent 65%); animation-duration: 26s; animation-delay: -12s; }
@keyframes aurora { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(8vw,-6vh) scale(1.15); } 100% { transform: translate(-6vw,8vh) scale(.92); } }
.hero--home .hero__aurora { opacity: .5; }

.hero__inner { position: relative; display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; }
.hero__inner:has(.hero__media) { grid-template-columns: 1.1fr .9fr; }
.hero--home .hero__inner { justify-items: center; }
.hero__content { max-width: 860px; }
.hero--home .hero__content { max-width: 1120px; display: grid; justify-items: center; }
.hero__title { margin-bottom: 26px; }
.hero__tagline { font: 600 clamp(1.15rem, 2.2vw, 1.7rem)/1.3 var(--display); color: #fff; margin: 0 0 18px; letter-spacing: -.01em; }
.hero__lead { color: rgb(233 238 236 / .82); font-size: clamp(1.02rem, 1.4vw, 1.18rem); max-width: 720px; }
.hero--home .hero__lead { margin-inline: auto; }
.hero__checks { margin-top: 30px; }
.hero--home .hero__checks { justify-content: center; }
/* Centered heroes: the buttons are in .hero__main (block), not grid items of .hero__content. */
:is(.hero--home, .hero--center) .hero__btns { justify-content: center; }
.hero__rating { margin-top: 28px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 38px 0 0; }
.hero__facts > div { border-left: 1px solid var(--green-a40); padding-left: 16px; }
.hero__facts dt { font: 800 1.5rem/1.1 var(--display); color: #fff; }
.hero__facts dd { margin: 4px 0 0; font-size: .86rem; color: var(--muted); }
.hero__media { position: relative; }
.hero__badge { position: absolute; left: -18px; bottom: 26px; padding: 12px 18px; border-radius: 16px; background: rgb(10 12 11 / .85); border: 1px solid var(--green-a40); backdrop-filter: blur(12px); font: 700 .86rem/1.3 var(--display); box-shadow: var(--glow); animation: float 6s var(--ease-in-out) infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }
.hero__scroll { position: absolute; left: 50%; bottom: 28px; width: 26px; height: 42px; border: 1.5px solid rgb(255 255 255 / .35); border-radius: 20px; transform: translateX(-50%); }
.hero__scroll span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 3px; background: var(--green-2); animation: scroll-dot 2s var(--ease) infinite; }
@keyframes scroll-dot { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }
.hero .crumbs { margin-bottom: 26px; }
.big404 { font: 900 clamp(8rem, 26vw, 18rem)/.8 var(--display); letter-spacing: -.06em; margin: 0 0 10px; background: linear-gradient(180deg, #fff, rgb(255 255 255 / .05)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Breadcrumbs */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .8rem; color: var(--dim); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.crumbs a { color: var(--muted); transition: color .2s; }
.crumbs a:hover { color: var(--green-2); }
.hero--home .crumbs, .hero--center .crumbs ol { justify-content: center; }

/* Lists --------------------------------------------------------------------- */
.checks { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.split .checks, .tabs .checks, .card .checks, .case .checks { display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; color: var(--text); font-size: .98rem; line-height: 1.45; }
.checks .icon { flex: none; width: 20px; height: 20px; padding: 3px; margin-top: 1px; border-radius: 50%; color: #fff; background: var(--green); stroke-width: 2.6; box-shadow: 0 0 14px -2px rgb(25 217 166 / .7); }
.checks--sm li { font-size: .92rem; }
.checks--sm .icon { width: 18px; height: 18px; }

/* Frames, media ------------------------------------------------------------- */
.frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); transform-style: preserve-3d; }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.frame:hover img { transform: scale(1.04); }
.frame--glow { box-shadow: var(--glow), var(--shadow); }
.frame--glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgb(255 255 255 / .12), transparent 30%); pointer-events: none; }
.frame--portrait { aspect-ratio: 3 / 4; max-width: 460px; margin-inline: auto; }

/* Video facade */
.video { position: relative; margin: 0; aspect-ratio: var(--ratio, 16/9); border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--glow), var(--shadow); }
.video__btn { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .6s; filter: saturate(.9) brightness(.82); }
.video:hover .video__poster { transform: scale(1.05); filter: saturate(1) brightness(.95); }
.video--noposter { background: radial-gradient(circle at 50% 40%, var(--green-deep), #000); }
.video__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgb(8 166 131 / .9); color: #fff; box-shadow: 0 0 0 0 rgb(25 217 166 / .6); animation: pulse 2.4s var(--ease) infinite; transition: transform .4s var(--ease); }
.video__play .icon { width: 26px; height: 26px; margin-left: 4px; }
.video:hover .video__play { transform: scale(1.1); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(25 217 166 / .55); } 70% { box-shadow: 0 0 0 26px rgb(25 217 166 / 0); } 100% { box-shadow: 0 0 0 0 rgb(25 217 166 / 0); } }
.video__label { position: absolute; left: 16px; bottom: 14px; font: 700 .74rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video.is-playing .video__play { display: none; }
.video--vertical { max-width: 420px; margin-inline: auto; }

/* Answer box (AEO) ------------------------------------------------------------ */
.answer { position: relative; padding: clamp(26px, 4vw, 40px); border-radius: var(--radius); background: linear-gradient(135deg, rgb(8 166 131 / .12), rgb(255 255 255 / .02) 60%); border: 1px solid var(--green-a40); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06); }
.answer::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 3px; border-radius: 3px; background: linear-gradient(var(--green-3), var(--green)); box-shadow: 0 0 18px var(--green-2); }
.answer__label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 700 .76rem/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--green-2); }
.answer__label .icon { width: 18px; }
.answer__text { font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.6; color: #fff; }
.answer__points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 26px; }
.answer__points li { display: flex; gap: 10px; color: var(--muted); font-size: .95rem; }
.answer__points .icon { flex: none; width: 18px; color: var(--green-2); stroke-width: 2.4; margin-top: 3px; }

/* Logos marquee --------------------------------------------------------------- */
.logos { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logos__track { display: flex; width: max-content; gap: 18px; margin: 0; padding: 6px 0; list-style: none; animation: marquee 48s linear infinite; }
.logos:hover .logos__track { animation-play-state: paused; }
.logos__item { flex: none; display: grid; place-items: center; width: 200px; height: 100px; padding: 18px 26px; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px -18px rgb(0 0 0 / .8); transition: transform .4s var(--ease), box-shadow .4s; }
.logos__item:hover { transform: translateY(-4px); box-shadow: var(--glow); }
.logos__item img { max-height: 60px; width: auto; object-fit: contain; filter: grayscale(.15); }
.logos__word { font: 800 1.02rem/1.1 var(--display); color: #0d2a22; text-align: center; letter-spacing: -.01em; }
@keyframes marquee { to { transform: translateX(calc(-50% - 9px)); } }

/* Cards ------------------------------------------------------------------------ */
.cards { display: grid; gap: 16px; }
.cards--cols-2 { grid-template-columns: repeat(2, 1fr); }
.cards--cols-3 { grid-template-columns: repeat(3, 1fr); }
.cards--cols-4 { grid-template-columns: repeat(4, 1fr); }
.card {
	--mx: 50%; --my: 50%;
	position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 34px); border-radius: var(--radius);
	background: linear-gradient(180deg, rgb(255 255 255 / .035), rgb(255 255 255 / .012)); border: 1px solid var(--line); overflow: hidden; isolation: isolate;
	transition: transform .5s var(--ease), border-color .4s, box-shadow .4s;
}
.card--wide { grid-column: span 2; }
[data-spotlight]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(25 217 166 / .16), transparent 45%); opacity: 0; transition: opacity .4s; pointer-events: none; }
[data-spotlight]:hover::before { opacity: 1; }
.card--link:hover { transform: translateY(-6px); border-color: var(--green-a40); box-shadow: 0 30px 60px -30px rgb(25 217 166 / .45); }
.card__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: var(--green-2); background: var(--green-a10); border: 1px solid var(--green-a20); transition: transform .6s var(--ease), background .3s, color .3s; }
.card__icon .icon { width: 26px; height: 26px; }
.card:hover .card__icon { transform: rotate(-8deg) scale(1.08); background: var(--green); color: #fff; }
.card__num { font: 900 2.6rem/1 var(--display); color: transparent; -webkit-text-stroke: 1px var(--green-a40); transition: -webkit-text-stroke-color .3s; }
.card:hover .card__num { -webkit-text-stroke-color: var(--green-2); }
.card__tag { position: absolute; top: 22px; right: 22px; padding: 6px 10px; border-radius: 999px; font: 700 .64rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--green-3); background: var(--green-a10); border: 1px solid var(--green-a40); }
.card__title { margin: 6px 0 0; font: 800 1.2rem/1.15 var(--display); text-transform: uppercase; letter-spacing: -.005em; color: #fff; }
.card__text { color: var(--muted); font-size: .97rem; }
.card__more { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 8px; font: 700 .74rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--green-2); }
.card__more .icon { width: 16px; transition: transform .35s var(--ease); }
.card:hover .card__more .icon, .postcard:hover .card__more .icon { transform: translateX(5px); }
.cards--line { gap: 0; border-top: 1px solid var(--line); }
.cards--line .card { flex-direction: row; align-items: flex-start; gap: 24px; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); background: none; padding-inline: 0; }
.cards--line .card__body { flex: 1; }
.cards--plain .card { background: none; }
.cards--numbered .card { padding-top: 30px; }

/* Split ---------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(36px, 7vw, 100px); align-items: center; }
.split--reverse .split__media { order: 2; }
.split--nomedia { grid-template-columns: 1fr; max-width: 900px; }
.split__media { position: relative; }
.split__logo { position: absolute; left: -4%; top: -14%; width: 62%; z-index: 2; color: var(--green); filter: drop-shadow(0 20px 40px rgb(0 0 0 / .6)); pointer-events: none; }
.split__logo + .frame { margin-top: 18%; }
.split__note { margin-top: 14px; font-size: .86rem; color: var(--dim); text-align: center; }
.split__body .heading { margin-bottom: 22px; }
.prose--lead { color: var(--muted); font-size: 1.06rem; }
.feature-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; }
.feature-list li { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); transition: background .3s; }
.feature-list li:last-child { border-bottom: 1px solid var(--line); }
.feature-list__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--green-2); border: 1px solid var(--green-a40); background: var(--green-a10); transition: transform .5s var(--ease); }
.feature-list li:hover .feature-list__icon { transform: scale(1.1) rotate(-6deg); }
.feature-list__icon .icon { width: 22px; height: 22px; }
.feature-list__title { margin: 2px 0 4px; font: 800 1.02rem/1.2 var(--display); text-transform: uppercase; color: #fff; }
.feature-list p { margin: 0; color: var(--muted); font-size: .95rem; }

/* Tabs ----------------------------------------------------------------------- */
.tabs__list { position: relative; display: flex; justify-content: center; gap: 6px; width: max-content; max-width: 100%; margin: 0 auto 40px; padding: 6px; border-radius: 999px; background: rgb(255 255 255 / .04); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs__tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 700 .76rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color .3s; }
.tabs__tab .icon { width: 18px; }
.tabs__tab.is-active { color: #fff; }
.tabs__ink { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 999px; background: linear-gradient(135deg, var(--green-2), var(--green)); box-shadow: 0 8px 26px -10px rgb(25 217 166 / .9); transition: transform .55s var(--ease), width .55s var(--ease); }
.tabs__panel { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.tabs__panel[hidden] { display: none; }
.tabs__panel.is-entering .tabs__media { animation: tab-media .8s var(--ease) both; }
.tabs__panel.is-entering .tabs__body > * { animation: tab-text .7s var(--ease) both; }
.tabs__panel.is-entering .tabs__body > *:nth-child(2) { animation-delay: .06s; }
.tabs__panel.is-entering .tabs__body > *:nth-child(3) { animation-delay: .12s; }
.tabs__panel.is-entering .tabs__body > *:nth-child(4) { animation-delay: .18s; }
@keyframes tab-media { from { opacity: 0; transform: scale(.96); clip-path: inset(8% 8% 8% 8% round 30px); } }
@keyframes tab-text { from { opacity: 0; transform: translateY(16px); } }
.tabs__body .h3 { margin-bottom: 14px; }
.tabs__body p { color: var(--muted); }
.tabs__body .btn { margin-top: 26px; }

/* Stats ------------------------------------------------------------------------ */
.stats { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.stats .shead { margin: 0; }
.stats__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0; }
.stat { position: relative; padding: 26px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(160deg, rgb(8 166 131 / .1), transparent 55%); overflow: hidden; }
.stat::after { content: ""; position: absolute; right: -30%; bottom: -60%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(25 217 166 / .18), transparent 70%); }
.stat__value { display: flex; align-items: baseline; margin: 0 0 4px; font: 900 clamp(2.6rem, 5vw, 4rem)/1 var(--display); letter-spacing: -.04em; color: #fff; }
.stat__prefix, .stat__suffix { color: var(--green-2); font-size: .6em; }
.stat__label { order: 2; font: 700 .9rem/1.3 var(--display); text-transform: uppercase; letter-spacing: .04em; color: #fff; }
.stat { display: flex; flex-direction: column; }
.stat__value { order: 1; }
.stat__note { order: 3; margin: 8px 0 0; font-size: .82rem; color: var(--dim); line-height: 1.45; }

/* Reviews ---------------------------------------------------------------------- */
.reviews { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: end; margin-bottom: 40px; }
.reviews__head .shead { margin-bottom: 26px; }
.reviews__head .btns { margin-top: 26px; }
.quote-hl { position: relative; margin: 0; padding: clamp(28px, 4vw, 44px); border-radius: var(--radius-lg); background: radial-gradient(120% 100% at 100% 0%, rgb(8 166 131 / .28), transparent 50%), var(--surface); border: 1px solid var(--green-a40); box-shadow: var(--glow); overflow: hidden; isolation: isolate; }
.quote-hl__mark { position: absolute; right: 26px; top: 20px; width: 70px; height: 70px; color: var(--green); opacity: .3; }
.quote-hl blockquote { margin: 0; }
.quote-hl blockquote p { font: 800 clamp(1.5rem, 2.8vw, 2.3rem)/1.15 var(--display); letter-spacing: -.02em; color: #fff; text-transform: uppercase; }
.quote-hl figcaption { margin-top: 18px; font: 600 1.4rem/1 var(--script); color: var(--green-2); }
.quote-hl figcaption span { font-family: var(--font); font-size: .82rem; color: var(--muted); }
.reviews__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.review { position: relative; margin: 0; padding: 26px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 14px; isolation: isolate; overflow: hidden; transition: transform .5s var(--ease), border-color .3s; }
.review:hover { transform: translateY(-4px); border-color: var(--green-a40); }
.review__top { display: flex; align-items: center; gap: 12px; }
.review__avatar { object-fit: cover; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--green-2), var(--green-deep)); font: 800 1.05rem/1 var(--display); color: #fff; }
.review__author { font: 700 .98rem/1.2 var(--display); color: #fff; }
.review__meta { display: flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--dim); }
.review__stars { display: inline-flex; color: #fbbc05; }
.review__stars .icon { width: 13px; height: 13px; }
.review__g { width: 22px; height: 22px; margin-left: auto; }
.review__topic { align-self: flex-start; padding: 5px 10px; border-radius: 999px; font: 700 .66rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--green-3); background: var(--green-a10); }
.review__text { margin: 0; color: var(--text); font-size: .96rem; line-height: 1.6; }

/* Rating badge */
.rating { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 999px; background: rgb(255 255 255 / .05); border: 1px solid var(--line-2); backdrop-filter: blur(10px); transition: border-color .3s, transform .4s var(--ease); }
.rating:hover { border-color: var(--green-a40); transform: translateY(-2px); }
.rating__g { width: 22px; height: 22px; }
.rating__stars { display: inline-flex; color: #fbbc05; }
.rating__stars .icon { width: 15px; height: 15px; }
.rating__text { font-size: .86rem; color: var(--muted); }
.rating__text strong { color: #fff; }
.rating--lg { padding: 14px 22px 14px 16px; }
.rating--footer { margin-top: 18px; }

/* Carousel ---------------------------------------------------------------------- */
.carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 24vw, 300px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 10px var(--gutter) 30px; margin-inline: calc(var(--gutter) * -1); scrollbar-width: none; overscroll-behavior-x: contain; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__item { scroll-snap-align: start; }
.carousel__item .video { transition: transform .5s var(--ease); }
.carousel__item:hover .video { transform: translateY(-6px) rotate(-.6deg); }
.carousel__nav { display: flex; align-items: center; gap: 16px; justify-content: center; }
/* Side arrows (video testimonials): over the edges of the strip, centred on the videos */
.carousel__stage { position: relative; }
.carousel__btn--side { position: absolute; z-index: 2; top: calc(50% - 10px); width: 54px; height: 54px; margin-top: -27px; background: rgb(5 6 6 / .72); border-color: rgb(255 255 255 / .2); color: #fff; box-shadow: 0 14px 30px -12px rgb(0 0 0 / .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.carousel__btn--prev { left: -27px; }
.carousel__btn--next { right: -27px; }
.carousel__btn--side:hover { background: var(--green); border-color: var(--green); }
.carousel__btn--side[aria-disabled="true"] { opacity: .3; cursor: default; background: rgb(5 6 6 / .72); border-color: rgb(255 255 255 / .2); transform: none; }
.carousel__btn--side { transition: opacity .3s, border-color .3s, background .3s, transform .3s var(--ease); }
.carousel__nav--bar { margin-top: 4px; }
.carousel__btn { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line-2); background: rgb(255 255 255 / .03); cursor: pointer; transition: border-color .3s, background .3s, transform .3s var(--ease); }
.carousel__btn:hover { border-color: var(--green-2); background: var(--green-a20); transform: scale(1.06); }
.carousel__btn .icon { width: 20px; }
.carousel__progress { width: min(240px, 40vw); height: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.carousel__progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, .2)); background: var(--green-2); transition: transform .3s var(--ease); }

/* Projects ------------------------------------------------------------------------ */
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.projects__cell { display: contents; }
.projects__cell.is-hidden { display: none; }
.pcard { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); isolation: isolate; transition: transform .5s var(--ease), border-color .3s, box-shadow .4s; }
.pcard:hover { transform: translateY(-6px); border-color: var(--green-a40); box-shadow: 0 30px 70px -30px rgb(25 217 166 / .5); }
.pcard__link { display: block; height: 100%; }
.pcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: radial-gradient(circle at 30% 20%, var(--green-deep), #000); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .5s; filter: brightness(.82); }
.pcard:hover .pcard__media img { transform: scale(1.07); filter: brightness(1); }
.pcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgb(5 6 6 / .7)); }
.pcard__ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; font: 800 1.4rem/1.1 var(--display); text-transform: uppercase; text-align: center; color: rgb(255 255 255 / .8); }
.pcard__play { position: absolute; z-index: 1; left: 18px; bottom: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(8 166 131 / .9); transition: transform .4s var(--ease); }
.pcard__play .icon { width: 16px; margin-left: 2px; }
.pcard:hover .pcard__play { transform: scale(1.12); }
.pcard__logo { position: absolute; z-index: 1; right: 14px; top: 14px; display: grid; place-items: center; width: 56px; height: 56px; padding: 8px; border-radius: 14px; background: #fff; }
.pcard__logo img { max-height: 40px; max-width: 100%; width: auto; height: auto; object-fit: contain; filter: none; }
.pcard__body { padding: 20px 22px 24px; }
.pcard__tags { display: block; margin-bottom: 8px; font: 700 .66rem/1.3 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--green-2); }
.pcard__title { margin: 0; font: 800 1.18rem/1.15 var(--display); text-transform: uppercase; color: #fff; }
.pcard__domain { margin: 6px 0 0; font-size: .88rem; color: var(--muted); }
.pcard__arrow { position: absolute; right: 18px; bottom: 22px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--green-2); transition: transform .4s var(--ease), background .3s; }
.pcard__arrow .icon { width: 18px; }
.pcard:hover .pcard__arrow { transform: rotate(45deg); background: var(--green); color: #fff; border-color: var(--green); }

.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 40px; }
.filters__btn { padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: rgb(255 255 255 / .03); cursor: pointer; font: 700 .74rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); transition: all .3s var(--ease); }
.filters__btn:hover { color: #fff; border-color: var(--green-a40); }
.filters__btn.is-active { color: #fff; background: var(--green); border-color: var(--green); box-shadow: 0 10px 30px -12px rgb(25 217 166 / .9); }

/* Process -------------------------------------------------------------------------- */
.process { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.process--3 { --n: 3; } .process--4 { --n: 4; } .process--5 { --n: 5; } .process--2 { --n: 2; }
.process::before { content: ""; position: absolute; left: 30px; right: 30px; top: 30px; height: 1px; background: var(--line-2); }
.process::after { content: ""; position: absolute; left: 30px; right: 30px; top: 30px; height: 1px; background: linear-gradient(90deg, var(--green), var(--green-3)); box-shadow: 0 0 12px var(--green-2); transform-origin: 0 50%; transform: scaleX(var(--line-p, 0)); transition: transform 1.8s var(--ease); }
.process.is-visible::after { --line-p: 1; }
.process__step { position: relative; padding-top: 84px; }
.process__dot { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--bg); border: 1px solid var(--green-a40); color: var(--green-2); box-shadow: 0 0 0 6px var(--bg); transition: background .4s, color .4s, box-shadow .4s; }
.process__dot .icon { width: 24px; }
.process__step:hover .process__dot { background: var(--green); color: #fff; box-shadow: 0 0 0 6px var(--bg), 0 0 30px var(--green-2); }
.process__label { display: block; margin-bottom: 8px; font: 700 .7rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--green-2); }
.process__title { margin: 0 0 8px; font: 800 1.15rem/1.15 var(--display); text-transform: uppercase; color: #fff; }
.process__step p { margin: 0; color: var(--muted); font-size: .95rem; }

/* FAQ ------------------------------------------------------------------------------ */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.faq__head { position: sticky; top: 110px; min-width: 0; container-type: inline-size; }
/* Long titles (« Vos questions sur l’acquisition client ») stay inside their column: size follows the column, words may break as a last resort */
.faq__head .shead .h2 { font-size: clamp(1.7rem, 9cqi, 3.4rem); overflow-wrap: break-word; hyphens: auto; }
.faq__head .shead .h2 .nw { white-space: normal; }
.faq__head .btns { margin-top: 10px; }
.faq__toc { display: grid; gap: 4px; margin-top: 26px; }
.faq__toc a { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); color: var(--muted); font: 600 .9rem/1.2 var(--display); transition: all .3s; }
.faq__toc a:hover { color: #fff; border-color: var(--green-a40); background: var(--green-a10); }
.faq__group + .faq__group { margin-top: 48px; }
.faq__group-title { margin: 0 0 14px; font: 700 .78rem/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--green-2); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-of-type, .faq__group-title + .faq__item { border-top: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q { margin: 0; font: 700 clamp(1rem, 1.5vw, 1.14rem)/1.35 var(--display); color: #fff; transition: color .3s; text-transform: none; letter-spacing: 0; }
.faq__item summary:hover .faq__q { color: var(--green-3); }
.faq__toggle { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); transition: background .3s, border-color .3s, transform .5s var(--ease); }
.faq__toggle::before, .faq__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: #fff; transition: transform .4s var(--ease); }
.faq__toggle::after { transform: rotate(90deg); }
.faq__item[open] .faq__toggle { background: var(--green); border-color: var(--green); transform: rotate(180deg); }
.faq__item[open] .faq__toggle::after { transform: rotate(0); }
.faq__a { padding: 0 60px 24px 0; color: var(--muted); overflow: hidden; }
.faq__a p { font-size: 1rem; }

/* CTA -------------------------------------------------------------------------------- */
.cta { position: relative; display: grid; place-items: center; min-height: 420px; padding: clamp(50px, 8vw, 100px) clamp(24px, 6vw, 80px); border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; text-align: center; border: 1px solid var(--green-a40); box-shadow: var(--glow); background: #020302; }
.cta__bg { position: absolute; inset: -10% 0; z-index: -2; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: grayscale(.4); }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 50% 100%, rgb(8 166 131 / .45), transparent 60%), linear-gradient(180deg, rgb(2 3 2 / .7), rgb(2 3 2 / .3)); }
.cta__beam { position: absolute; z-index: -1; left: 50%; top: 50%; width: 140vmax; height: 140vmax; margin: -70vmax 0 0 -70vmax; background: conic-gradient(from 0deg, transparent 0 70%, rgb(25 217 166 / .25) 80%, transparent 90%); animation: spin 10s linear infinite; opacity: .6; will-change: transform; contain: strict; }
.cta { contain: paint; }
@keyframes spin { to { transform: rotate(360deg); } }
.cta__inner { max-width: 820px; }
.cta__title { font: 900 clamp(2.2rem, 5.4vw, 4.6rem)/1 var(--display); text-transform: uppercase; letter-spacing: -.035em; color: #fff; filter: drop-shadow(0 0 30px rgb(25 217 166 / .45)); margin: 0; }
.cta__text { margin-top: 20px; color: rgb(233 238 236 / .82); font-size: 1.1rem; }

/* Words ---------------------------------------------------------------------------- */
.words__title { text-align: center; max-width: 980px; margin: 0 auto 50px; background: linear-gradient(180deg, #fff 30%, rgb(255 255 255 / .35)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.words__title .accent { -webkit-text-fill-color: transparent; }
.words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.words__item { position: relative; display: grid; justify-items: center; gap: 16px; padding: 46px 20px; border-radius: var(--radius); background: linear-gradient(160deg, rgb(8 166 131 / .2), rgb(4 37 29 / .25) 40%, var(--surface)); border: 1px solid var(--green-a40); box-shadow: var(--glow); overflow: hidden; isolation: isolate; transition: transform .5s var(--ease); }
.words__icon { color: var(--green-3); }
.words__icon .icon { width: 40px; height: 40px; stroke-width: 1.3; }
.words__label { font: 900 clamp(1.8rem, 3.4vw, 2.8rem)/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; color: #fff; }
.words__text { color: var(--muted); font-size: .95rem; text-align: center; }

/* Team ------------------------------------------------------------------------------- */
.team { --cols: 5; --gap: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.team > .member { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; } /* same widths as the former grid, incomplete last row centred */
.member__photo { aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); transition: border-color .4s, box-shadow .4s; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.9) contrast(1.05); transition: filter .7s var(--ease), transform 1.2s var(--ease); }
.member:hover .member__photo { border-color: var(--green-a40); box-shadow: var(--glow); }
.member:hover .member__photo img { filter: none; transform: scale(1.05); }
.member__name { margin: 14px 0 2px; font: 800 1.05rem/1.1 var(--display); text-transform: uppercase; color: #fff; }
.member__role { margin: 0; font-size: .86rem; color: var(--green-2); }

/* Results --------------------------------------------------------------------------- */
.roas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 40px; padding: 0; list-style: none; }
.roas__tile { position: relative; border-radius: var(--radius); background: linear-gradient(160deg, rgb(8 166 131 / .18), var(--surface) 60%); border: 1px solid var(--green-a40); box-shadow: var(--glow); overflow: hidden; isolation: isolate; transition: transform .5s var(--ease); }
.roas__tile:hover { transform: translateY(-6px); }
.roas__tile a { display: grid; gap: 8px; justify-items: center; padding: 30px 16px; text-align: center; }
.roas__value { display: flex; align-items: baseline; gap: 4px; font: 900 clamp(2.6rem, 5vw, 3.8rem)/1 var(--display); letter-spacing: -.04em; color: #fff; }
.roas__value small { font: 700 .82rem/1 var(--display); letter-spacing: .04em; color: var(--green-2); }
.roas__client { font: 700 .78rem/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.case { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(26px, 3.4vw, 40px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); isolation: isolate; overflow: hidden; }
.case .eyebrow { margin: 0; align-self: flex-start; }
.case__client { margin: 0; font: 900 1.6rem/1.05 var(--display); text-transform: uppercase; color: #fff; }
.case__roas { display: flex; align-items: baseline; gap: 6px; margin: 4px 0; font: 900 3.2rem/1 var(--display); letter-spacing: -.04em; color: var(--green-2); text-shadow: 0 0 30px rgb(25 217 166 / .35); }
.case__roas small { font: 700 .9rem/1 var(--display); letter-spacing: .04em; color: var(--green-3); }
.case__headline { align-self: flex-start; margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--green-a10); border: 1px solid var(--green-a20); color: var(--green-3); font-size: .86rem; font-weight: 600; }
.bars { display: grid; gap: 12px; margin-top: 10px; }
.bar__label { display: block; margin-bottom: 6px; font-size: .82rem; color: var(--muted); }
.bar__track { display: block; height: 8px; border-radius: 8px; background: rgb(255 255 255 / .06); overflow: hidden; }
.bar__fill { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--green-3)); box-shadow: 0 0 14px rgb(25 217 166 / .5); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.6s var(--ease) .2s; }
.case.is-visible .bar__fill { transform: scaleX(1); }
.case__source { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 0; padding-top: 14px; border-top: 1px dashed var(--line-2); font-size: .82rem; color: var(--dim); }
.case__source .icon { flex: none; width: 18px; color: var(--green-2); }
.case__source strong { color: var(--muted); }
.case .btn { align-self: flex-start; margin-top: 8px; }

/* Prose -------------------------------------------------------------------------------- */
.longform--aside { display: grid; grid-template-columns: 1fr 300px; gap: clamp(30px, 6vw, 80px); align-items: start; }
.longform__aside { position: sticky; top: 110px; display: grid; gap: 18px; }
.prose { color: rgb(233 238 236 / .86); font-size: 1.04rem; }
.prose h2 { margin: 2em 0 .6em; font: 800 clamp(1.4rem, 2.4vw, 2rem)/1.12 var(--display); text-transform: uppercase; letter-spacing: -.015em; color: #fff; }
.prose h3 { margin: 1.6em 0 .5em; font: 700 1.2rem/1.25 var(--display); color: #fff; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.prose li { margin: .35em 0; }
.prose li::marker { color: var(--green-2); }
.prose blockquote { margin: 1.6em 0; padding: 18px 24px; border-left: 3px solid var(--green); background: var(--green-a10); border-radius: 0 16px 16px 0; color: #fff; }
.prose blockquote cite { display: block; margin-top: 8px; font-style: normal; font-size: .86rem; color: var(--muted); }
.prose img { border-radius: var(--radius-sm); margin: 1.4em 0; }
.prose figure { margin: 1.6em 0; }
.prose hr { border: 0; height: 1px; background: var(--line-2); margin: 2em 0; }
.prose--article { font-size: 1.1rem; line-height: 1.75; }
.table-wrap { overflow-x: auto; margin: 1.6em 0; border-radius: var(--radius-sm); border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font: 700 .76rem/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--green-2); background: rgb(255 255 255 / .03); }
tbody th { color: #fff; font-weight: 600; }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr { transition: background .25s; }
tbody tr:hover { background: rgb(255 255 255 / .02); }
.compare .is-hl { background: var(--green-a10); color: #fff; }
.compare thead .is-hl { color: var(--green-3); }
.compare__note { margin-top: 14px; font-size: .86rem; color: var(--dim); }
.toc { padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.toc__title { margin: 0 0 10px; font: 700 .74rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--green-2); }
.toc ol { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: .9rem; }
.toc a { color: var(--muted); }
.toc a:hover, .toc a.is-active { color: #fff; }
.aside-card { position: relative; padding: 26px; border-radius: var(--radius); background: linear-gradient(160deg, rgb(8 166 131 / .16), var(--surface) 60%); border: 1px solid var(--green-a40); overflow: hidden; isolation: isolate; }
.aside-card__title { margin: 0 0 10px; font: 800 1.2rem/1.15 var(--display); text-transform: uppercase; color: #fff; }
.aside-card p { color: var(--muted); font-size: .95rem; }
.aside-card .btns { margin-top: 18px; }

/* Links --------------------------------------------------------------------------------- */
.links { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.links__item { position: relative; display: flex; align-items: center; gap: 16px; height: 100%; padding: 20px 22px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgb(255 255 255 / .02); overflow: hidden; isolation: isolate; transition: border-color .3s, transform .4s var(--ease); }
.links__item:hover { border-color: var(--green-a40); transform: translateY(-3px); }
.links__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--green-a10); color: var(--green-2); }
.links__icon .icon { width: 22px; }
.links__body { flex: 1; display: grid; gap: 3px; }
.links__title { font: 800 .98rem/1.2 var(--display); text-transform: uppercase; color: #fff; }
.links__text { font-size: .86rem; color: var(--muted); line-height: 1.45; }
.links__arrow { flex: none; color: var(--green-2); transition: transform .4s var(--ease); }
.links__arrow .icon { width: 20px; }
.links__item:hover .links__arrow { transform: translate(3px, -3px); }
.links--pills { display: flex; flex-wrap: wrap; justify-content: flex-start; }
.links--pills .links__item { padding: 10px 16px 10px 10px; border-radius: 999px; }
.links--pills .links__icon { width: 32px; height: 32px; border-radius: 50%; }
.links--pills .links__icon .icon { width: 16px; }
.links--pills .links__title { font-size: .84rem; }
.links__areas { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.links__areas-lead { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.links__areas-lead > .icon { flex: none; width: 18px; margin-top: .15em; color: var(--green-2); }
.links__areas-lead a { color: #fff; text-decoration: underline; text-decoration-color: var(--green-a40); text-underline-offset: 3px; transition: text-decoration-color .3s, color .3s; }
.links__areas-lead a:hover { color: var(--green-3); text-decoration-color: currentColor; }
.links__areas-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.links__areas-list a { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgb(255 255 255 / .02); color: rgb(255 255 255 / .86); font-size: .84rem; line-height: 1.2; transition: border-color .3s, color .3s, background .3s; }
.links__areas-list a:hover { border-color: var(--green-a40); color: #fff; }
.links__areas-list a.is-featured { border-color: var(--green-a40); background: var(--green-a10); color: #fff; }
/* « Région · Ville(s) » labels: wrap between the two parts, never overflow */
.area-label { display: inline; }
.area-label__region { color: var(--green-3); }
.area-label__sep { opacity: .55; }
:is(.links__areas-list, .pills) a { max-width: 100%; text-align: left; }
:is(.links__areas-list, .pills) a > .area-label { min-width: 0; overflow-wrap: break-word; }
.pills a > .icon { flex: none; }
.site-footer__col .area-label__region { color: inherit; opacity: .7; }

/* Pills */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.pills a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: .86rem; color: var(--muted); transition: all .3s; }
.pills a:hover { color: #fff; border-color: var(--green); background: var(--green-a10); }
.pills .icon { width: 15px; color: var(--green-2); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.tags li { padding: 7px 12px; border-radius: 999px; background: var(--green-a10); border: 1px solid var(--green-a20); font: 700 .7rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--green-3); }

/* Map ------------------------------------------------------------------------------------ */
.mapbox { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.mapbox .shead { margin-bottom: 26px; }
.mapbox__address { font-style: normal; padding: 20px 22px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); line-height: 1.7; color: var(--muted); }
.mapbox__address strong { color: #fff; }
.mapbox__map { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--green-a40); box-shadow: var(--glow); background: radial-gradient(circle at 50% 45%, rgb(8 166 131 / .3), transparent 55%), repeating-radial-gradient(circle at 50% 45%, transparent 0 38px, rgb(255 255 255 / .04) 38px 39px), var(--surface); }
.mapbox__placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 20px; color: var(--muted); }
.mapbox__placeholder > .icon { width: 54px; height: 54px; color: var(--green-2); animation: float 5s var(--ease-in-out) infinite; }
.mapbox__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.4) invert(.92) hue-rotate(180deg) contrast(.9); }

/* Contact & form ---------------------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 6vw, 80px); align-items: start; }
.contact__list { display: grid; gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }
.contact__list a { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgb(255 255 255 / .02); transition: border-color .3s, transform .4s var(--ease); }
.contact__list a:hover { border-color: var(--green-a40); transform: translateX(4px); }
.contact__list small { display: block; font: 700 .68rem/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--green-2); margin-bottom: 5px; }
.contact__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--green-a10); color: var(--green-2); border: 1px solid var(--green-a20); }
.contact__icon .icon { width: 20px; }
.contact__note { color: var(--muted); font-size: .92rem; }
.contact__img { margin-top: 24px; aspect-ratio: 4 / 3; }

.form { position: relative; padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgb(255 255 255 / .045), rgb(255 255 255 / .015)); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.form__title { margin: 0 0 24px; font: 800 1.5rem/1.1 var(--display); text-transform: uppercase; color: #fff; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { position: relative; }
.field--full { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
	width: 100%; padding: 26px 18px 10px; border-radius: 14px; border: 1px solid var(--line-2); background: rgb(0 0 0 / .35);
	color: #fff; font: 400 1rem/1.4 var(--font); transition: border-color .3s, box-shadow .3s, background .3s; appearance: none; -webkit-appearance: none;
}
.field textarea { resize: vertical; min-height: 140px; }
.field select { cursor: pointer; padding-right: 44px; }
.field select option { color: #111; }
.field label { position: absolute; left: 18px; top: 18px; color: var(--muted); font-size: 1rem; pointer-events: none; transform-origin: 0 0; transition: transform .3s var(--ease), color .3s; }
.field label span { color: var(--green-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); background: rgb(8 166 131 / .06); box-shadow: 0 0 0 4px rgb(8 166 131 / .15); }
.field input:not([type=checkbox]):focus + label, .field input:not([type=checkbox]):not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select:focus + label, .field select:valid + label { transform: translateY(-10px) scale(.75); color: var(--green-3); }
.field__caret { position: absolute; right: 16px; top: 22px; width: 18px; color: var(--muted); pointer-events: none; }
.field--check { display: flex; gap: 12px; align-items: flex-start; }
.field--check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; padding: 0; border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.field--check input:checked { background: var(--green); border-color: var(--green); }
.field--check input:checked::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.field--check label { position: static; transform: none !important; font-size: .88rem; line-height: 1.5; color: var(--muted); pointer-events: auto; }
.field__err { display: block; min-height: 0; margin-top: 6px; font-size: .8rem; color: #ff8a8a; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #ff6b6b; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 22px; }
.form__legal { flex: 1 1 260px; margin: 0; font-size: .74rem; color: var(--dim); }
.form__legal a { color: var(--muted); }
.form__status { margin-top: 18px; display: none; padding: 16px 18px; border-radius: 14px; font-size: .95rem; }
.form__status.is-success, .form__status.is-error { display: block; animation: tab-text .5s var(--ease) both; }
.form__status.is-success { background: var(--green-a20); border: 1px solid var(--green); color: #fff; }
.form__status.is-error { background: rgb(255 80 80 / .1); border: 1px solid rgb(255 107 107 / .5); color: #ffd1d1; }
.form.is-sending .btn { pointer-events: none; opacity: .7; }
.form.is-sending .btn__icon { animation: send 1s var(--ease) infinite; }
@keyframes send { 50% { transform: translate(6px, -6px); opacity: .3; } }
.grecaptcha-badge { visibility: hidden !important; }

/* Marquee words --------------------------------------------------------------------------- */
.section--marquee { padding-block: clamp(30px, 5vw, 60px); overflow: hidden; }
.marquee { overflow: hidden; transform: rotate(-2deg); margin-inline: -4vw; padding: 14px 0; background: linear-gradient(90deg, var(--green), #067d63); box-shadow: 0 20px 60px -20px rgb(25 217 166 / .6); }
.marquee--reverse { transform: rotate(1.5deg); background: var(--surface); border-block: 1px solid var(--line); box-shadow: none; }
.marquee__track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: marquee 32s linear infinite; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee li { display: flex; align-items: center; gap: 28px; padding-right: 28px; font: 900 clamp(1.4rem, 3vw, 2.4rem)/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.marquee .accent { background: none; color: #031a14; -webkit-text-fill-color: #031a14; filter: none; }
.marquee--reverse .accent { color: var(--green-2); -webkit-text-fill-color: var(--green-2); }
.marquee__sep { font-size: .6em; opacity: .7; }

/* Posts --------------------------------------------------------------------------------------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.postcard { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); isolation: isolate; transition: transform .5s var(--ease), border-color .3s; }
.postcard:hover { transform: translateY(-6px); border-color: var(--green-a40); }
.postcard__link { display: flex; flex-direction: column; height: 100%; }
.postcard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(circle at 30% 20%, var(--green-deep), #000); }
.postcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.postcard:hover .postcard__media img { transform: scale(1.06); }
.postcard__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 22px 24px 26px; }
.postcard time { font: 700 .7rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--green-2); }
.postcard__title { margin: 0; font: 800 1.12rem/1.2 var(--display); color: #fff; }
.postcard p { margin: 0; color: var(--muted); font-size: .92rem; }
.pagination { margin-top: 40px; }
.pagination .nav-links { display: flex; justify-content: center; gap: 8px; }
.pagination .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); }
.pagination .current { background: var(--green); border-color: var(--green); }

/* Article / project / misc ------------------------------------------------------------------------ */
.article__meta { color: var(--muted); font-size: .92rem; }
.article__cover { margin-top: -10px; }
/* Cover in a 16:9 frame: vertical photos are cropped around their centre instead of towering over the article. */
.article__cover .frame { aspect-ratio: 16 / 9; }
.article__cover .frame :is(picture, img) { display: block; width: 100%; height: 100%; }
.article__cover .frame img { object-fit: cover; object-position: 50% 55%; }
.article__related { margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--line); }
.project__logo { display: inline-grid; place-items: center; padding: 14px 20px; margin-bottom: 26px; border-radius: 18px; background: #fff; }
.project__logo img { max-height: 70px; width: auto; }
.project__desc { margin-top: 10px; }
.project__result { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-radius: 14px; background: var(--green-a10); border: 1px solid var(--green-a40); color: #fff; }
.project__result .icon { width: 22px; color: var(--green-2); }
.project__photo { aspect-ratio: 21 / 9; }
.hero--project .hero__media .video { max-height: 78vh; }
.searchform { display: flex; gap: 10px; margin-bottom: 30px; }
.searchform input { flex: 1; padding: 14px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: rgb(0 0 0 / .35); color: #fff; font: inherit; }
.search-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.search-results a { display: grid; gap: 4px; padding: 18px; border-radius: 14px; border: 1px solid var(--line); }
.search-results span { color: var(--muted); font-size: .92rem; }

/* Footer ------------------------------------------------------------------------------------------- */
.site-footer { position: relative; padding: clamp(70px, 9vw, 120px) 0 30px; margin-top: calc(var(--section) * .35); border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-2), #020303); overflow: hidden; isolation: isolate; }
.site-footer__glow { position: absolute; z-index: -1; left: 50%; top: -260px; width: 900px; height: 520px; transform: translateX(-50%); background: radial-gradient(closest-side, rgb(8 166 131 / .22), transparent); filter: blur(20px); }
.site-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(30px, 5vw, 70px); }
.brand--footer .brand__logo { width: 150px; }
.brand--footer .brand__logo .evo-logo__word, .brand--footer .brand__logo .evo-logo__script { animation: none; }
.site-footer__brand .site-footer__nap { margin-top: 22px; }
.site-footer__nap { display: grid; gap: 10px; font-style: normal; font-size: .92rem; color: var(--muted); }
.site-footer__nap > * { display: flex; gap: 10px; align-items: flex-start; }
.site-footer__nap a:hover { color: #fff; }
.site-footer__nap .icon { flex: none; width: 18px; color: var(--green-2); margin-top: 2px; }
.social { display: flex; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); color: #fff; transition: all .35s var(--ease); }
.social a:hover { background: var(--green); border-color: var(--green); transform: translateY(-4px); box-shadow: 0 12px 26px -10px rgb(25 217 166 / .9); }
.social .icon { width: 18px; }
.site-footer__title { margin: 0 0 18px; font: 700 .78rem/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: #fff; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer__col a { color: var(--muted); font-size: .92rem; transition: color .25s, padding .35s var(--ease); }
.site-footer__col a:hover { color: var(--green-3); padding-left: 4px; }
.site-footer__word { margin: clamp(50px, 8vw, 90px) 0 0; color: transparent; }
.site-footer__word .evo-logo { width: 100%; height: auto; }
.site-footer__word .evo-logo path { fill: rgb(255 255 255 / .025); stroke: rgb(255 255 255 / .16); stroke-width: 22; }
.site-footer__word .evo-logo__word { stroke-dasharray: 160000; stroke-dashoffset: 160000; transition: stroke-dashoffset 5s var(--ease), fill 2s 2s; }
.site-footer__word.is-visible .evo-logo__word { stroke-dashoffset: 0; fill: rgb(8 166 131 / .06); }
.site-footer__word .evo-logo__script { stroke: rgb(25 217 166 / .45); fill: rgb(8 166 131 / .2); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--dim); }
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; list-style: none; }
.site-footer__bottom a:hover, .site-footer__bottom button:hover { color: #fff; }
.split__logo .evo-logo__word { animation: none; }

/* Consent ---------------------------------------------------------------------------------------- */
.consent { position: fixed; z-index: 1002; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: center; pointer-events: none; }
.consent[hidden] { display: none; }
.consent__inner { pointer-events: auto; width: min(720px, 100%); padding: 22px 24px; border-radius: 24px; background: rgb(10 12 11 / .94); border: 1px solid var(--line-2); backdrop-filter: blur(20px); box-shadow: 0 30px 80px -20px #000; animation: consent-in .7s var(--ease) both; }
@keyframes consent-in { from { opacity: 0; transform: translateY(30px) scale(.97); } }
.consent__title { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 800 1.05rem/1.2 var(--display); text-transform: uppercase; color: #fff; }
.consent__title .icon { width: 22px; color: var(--green-2); }
.consent__text { margin: 0; font-size: .9rem; color: var(--muted); }
.consent__prefs { display: grid; gap: 10px; margin-top: 16px; padding: 16px; border-radius: 14px; background: rgb(255 255 255 / .03); font-size: .92rem; }
.consent__prefs[hidden] { display: none; }
.consent__prefs label { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.consent__prefs input { accent-color: var(--green); width: 18px; height: 18px; }
.consent__prefs small { color: var(--dim); }
.consent__btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* Reveal animations ------------------------------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transition: opacity .9s var(--ease), transform 1s var(--ease), clip-path 1.2s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js [data-reveal="up"] { transform: translateY(36px); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="scale"] { transform: scale(.96); }
.js [data-reveal="left"] { transform: translateX(-40px); }
.js [data-reveal="right"] { transform: translateX(40px); }
.js [data-reveal="clip"] { opacity: 1; clip-path: inset(12% 8% 12% 8% round 40px); transform: scale(1.04); }
.js [data-reveal].is-visible { opacity: 1; transform: none; filter: none; }
.js [data-reveal="clip"].is-visible { clip-path: inset(-20% -20% -20% -20%); }
.js [data-delay="1"] { --d: 1; } .js [data-delay="2"] { --d: 2; } .js [data-delay="3"] { --d: 3; } .js [data-delay="4"] { --d: 4; } .js [data-delay="5"] { --d: 5; }

/* Split-word headings */
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .02em .14em; margin: -.08em -.02em -.14em; }
.js [data-split] .w > span { display: inline-block; transform: translateY(110%) rotate(4deg); opacity: 0; transition: transform 1.1s var(--ease), opacity .8s var(--ease); transition-delay: calc(var(--wi, 0) * 55ms + var(--d, 0) * 90ms); }
.js [data-split].is-visible .w > span { transform: none; opacity: 1; }
.js [data-split] .accent .w > span { transition-duration: 1.4s; }
[data-split] .accent { position: relative; }
.js [data-split] .accent::after { content: ""; position: absolute; left: .05em; right: .05em; bottom: -.02em; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--green-3), var(--green)); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .7s; opacity: .7; }
.js [data-split].is-visible .accent::after { transform: scaleX(1); }

/* Tilt */
[data-tilt] { transition: transform .6s var(--ease); transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }


/* ==========================================================================
   PREMIUM LAYER — loader, cursor, viewfinder, beams, chips, statement scrub,
   bento, projects rail, reviews marquee, orb CTA, text-roll buttons.
   ========================================================================== */
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* Loader (first visit of the session) */
.loader { position: fixed; inset: 0; z-index: 10001; display: grid; place-items: center; pointer-events: none; background: radial-gradient(70% 60% at 50% 50%, #06140f, #020303 70%); clip-path: inset(0 0 0 0); }
.no-loader .loader, .loader.is-done { display: none; }
.loader__glow { position: absolute; left: 50%; top: 50%; width: min(900px, 140vw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgb(25 217 166 / .22), rgb(25 217 166 / .05) 40%, transparent 65%); opacity: 0; animation: ld-glow 1.4s var(--ease) .05s forwards; }
@keyframes ld-glow { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.loader__corners i { position: absolute; width: 34px; height: 34px; border: 1.5px solid rgb(124 243 207 / .55); opacity: 0; animation: ld-corner .9s var(--ease) .1s forwards; }
.loader__corners i:nth-child(1) { left: 6vw; top: 8vh; border-width: 1.5px 0 0 1.5px; --cx: -30px; --cy: -30px; }
.loader__corners i:nth-child(2) { right: 6vw; top: 8vh; border-width: 1.5px 1.5px 0 0; --cx: 30px; --cy: -30px; }
.loader__corners i:nth-child(3) { left: 6vw; bottom: 8vh; border-width: 0 0 1.5px 1.5px; --cx: -30px; --cy: 30px; }
.loader__corners i:nth-child(4) { right: 6vw; bottom: 8vh; border-width: 0 1.5px 1.5px 0; --cx: 30px; --cy: 30px; }
@keyframes ld-corner { from { opacity: 0; transform: translate(var(--cx), var(--cy)); } to { opacity: 1; transform: none; } }
.loader__inner { position: relative; display: grid; justify-items: center; gap: 30px; }
.loader__mark { position: relative; width: min(300px, 62vw); transform-origin: 50% 50%; will-change: transform; }
.loader__logo { display: block; width: 100%; height: auto; color: var(--green); overflow: visible; filter: drop-shadow(0 0 30px rgb(25 217 166 / .35)); }
.loader__logo .evo-logo__word { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: ld-word .85s var(--ease) .1s forwards; }
@keyframes ld-word { from { opacity: 0; transform: translateY(26%) scale(.92); } to { opacity: 1; transform: none; } }
.loader__logo .evo-logo__script { clip-path: inset(0 100% 0 0); animation: ld-script .75s var(--ease-in-out) .45s forwards; }
@keyframes ld-script { to { clip-path: inset(0 0 0 0); } }
.loader__shine { position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--logo) center / 100% 100% no-repeat; mask: var(--logo) center / 100% 100% no-repeat;
	background: linear-gradient(105deg, transparent 35%, rgb(220 255 244 / .95) 48%, rgb(124 243 207 / .6) 52%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 130% 0; animation: ld-shine .8s var(--ease-in-out) .85s forwards; }
@keyframes ld-shine { to { background-position: -30% 0; } }
.loader__bar { position: relative; width: min(220px, 50vw); height: 1px; background: rgb(255 255 255 / .1); overflow: hidden; }
.loader__bar > span { position: absolute; inset: 0; background: linear-gradient(90deg, var(--green), var(--green-3)); box-shadow: 0 0 10px var(--green-2); transform-origin: 0 50%; transform: scaleX(0); }
.loader__rec, .loader__count { position: absolute; bottom: calc(8vh + 6px); font: 700 .7rem/1 var(--display); letter-spacing: .3em; color: var(--muted); font-variant-numeric: tabular-nums; }
.loader__rec { left: calc(6vw + 50px); display: inline-flex; align-items: center; gap: 9px; }
.loader__rec i { width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 10px #ff4d4d; animation: rec 1s steps(2) infinite; }
.loader__count { right: calc(6vw + 50px); color: #fff; }
/* Exit: the logo flies to the header, the screen lifts */
.loader.is-leaving .loader__mark { transition: transform .9s var(--ease-in-out); }
.loader.is-leaving :is(.loader__bar, .loader__rec, .loader__count, .loader__corners) { opacity: 0; transition: opacity .25s; }
.loader.is-leaving .loader__glow { opacity: 0; transition: opacity .5s; animation: none; }
.loader.is-leaving .loader__logo { filter: none; transition: filter .4s; }
/* The flying logo stays visible above the lifting screen */
.loader__inner { z-index: 2; }
html.logo-flying .loader { clip-path: none; background: transparent; transition: none; }
html.logo-flying .loader::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(70% 60% at 50% 50%, #06140f, #020303 70%); animation: ld-lift .85s var(--ease-in-out) .12s forwards; }
@keyframes ld-lift { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
html:is(.is-loading, .logo-flying) .site-header .brand__logo { opacity: 0; }
html.has-loader .site-header .brand__logo :is(.evo-logo__word, .evo-logo__script) { animation: none; }
/* Page reveals wait for the lift */
html.is-loading [data-reveal].is-visible { opacity: 0; transform: translateY(36px); }
html.is-loading [data-split].is-visible .w > span { opacity: 0; transform: translateY(110%) rotate(4deg); animation: none; }
html.is-loading .hero [data-reveal] { transition-delay: 0s; }

/* Cursor */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
	html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
	html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }
	.cursor { display: block; position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; transition: opacity .3s; }
	.cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; will-change: transform; transform: translate3d(-100px, -100px, 0); }
	.cursor__dot::before { content: ""; position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--green-3); box-shadow: 0 0 10px var(--green-2); transition: opacity .2s; }
	.cursor__ring > .cursor__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); }
	.cursor__ring::before { content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 1px solid rgb(124 243 207 / .55); transform: scale(1); transition: transform .4s var(--ease), background .3s, border-color .3s; }
	.cursor.is-link .cursor__ring::before { transform: scale(1.6); background: rgb(8 166 131 / .14); border-color: var(--green-2); }
	.cursor.has-label .cursor__ring::before { transform: scale(2.4); background: var(--green); border-color: var(--green); }
	.cursor.is-down .cursor__ring::before { transform: scale(.85); }
	.cursor.has-label .cursor__dot::before { opacity: 0; }
	.cursor__label { font: 800 .7rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #fff; white-space: nowrap; opacity: 0; transition: opacity .25s, transform .4s var(--ease); }
	.cursor.has-label .cursor__label { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	.cursor.is-hidden { opacity: 0; }
}

/* Viewfinder */
.vf { position: absolute; inset: 96px clamp(14px, 2.4vw, 34px) clamp(14px, 2.4vw, 34px); z-index: 1; pointer-events: none; font: 600 .66rem/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: rgb(255 255 255 / .55); }
.vf__corner { position: absolute; width: 34px; height: 34px; border: 0 solid rgb(255 255 255 / .55); }
.vf__corner--tl { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; }
.vf__corner--tr { right: 0; top: 0; border-width: 1.5px 1.5px 0 0; }
.vf__corner--bl { left: 0; bottom: 0; border-width: 0 0 1.5px 1.5px; }
.vf__corner--br { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; }
.vf__rec { position: absolute; left: 48px; top: 10px; display: flex; align-items: center; gap: 8px; color: #fff; }
.vf__rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 12px #ff3b3b; animation: rec 1.2s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: .15; } }
.vf__tc { position: absolute; right: 48px; top: 10px; font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .7); }
.vf__meta { position: absolute; left: 48px; bottom: 12px; }
.hero--home .vf { bottom: 92px; }
.vf__meta--r { left: auto; right: 48px; }
.vf__focus { position: absolute; left: 50%; top: 46%; width: 70px; height: 50px; margin: -25px 0 0 -35px; border: 1px solid rgb(124 243 207 / .35); animation: focus 4s var(--ease-in-out) infinite; }
.vf__focus::before, .vf__focus::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgb(124 243 207 / .5); }
.vf__focus::before { width: 12px; height: 1px; margin-left: -6px; }
.vf__focus::after { width: 1px; height: 12px; margin-top: -6px; }
@keyframes focus { 0%, 100% { transform: scale(1); opacity: .5; } 45% { transform: scale(.82); opacity: 1; border-color: rgb(25 217 166 / .9); } 55% { transform: scale(.86); } }
.vf__bat { position: absolute; right: 48px; bottom: 9px; width: 24px; height: 11px; border: 1px solid rgb(255 255 255 / .6); border-radius: 2px; display: none; }
.vf__bat i { position: absolute; inset: 2px 6px 2px 2px; background: var(--green-2); }
.hero--home .vf__focus { opacity: .5; }
.hero:not(.hero--home) .vf { inset: 100px clamp(14px, 2.4vw, 34px) 18px; opacity: .8; }

/* Beams & mouse spotlight */
.hero__beams span { position: absolute; top: -30%; width: 60vw; height: 140%; background: conic-gradient(from 180deg at 50% 0%, transparent 0 168deg, rgb(124 243 207 / .12) 176deg, rgb(255 255 255 / .06) 180deg, rgb(124 243 207 / .12) 184deg, transparent 192deg); transform-origin: 50% 0; animation: beam 14s var(--ease-in-out) infinite alternate; will-change: transform; }
.hero__beams span:nth-child(1) { left: -10vw; transform: rotate(-18deg); }
.hero__beams span:nth-child(2) { right: -10vw; animation-delay: -7s; transform: rotate(18deg); }
@keyframes beam { 0% { transform: rotate(-22deg); opacity: .5; } 50% { opacity: 1; } 100% { transform: rotate(14deg); opacity: .6; } }
.hero__beams span:nth-child(2) { animation-name: beam2; }
@keyframes beam2 { 0% { transform: rotate(22deg); opacity: .6; } 50% { opacity: 1; } 100% { transform: rotate(-12deg); opacity: .5; } }
.hero__spot { position: absolute; inset: 0; background: radial-gradient(600px circle at var(--hx, 50%) var(--hy, 40%), rgb(25 217 166 / .16), transparent 60%); transition: opacity .6s; }

/* Hero: bigger, more editorial */
.hero--home .display { font-size: clamp(2.7rem, 7.6vw, 7.4rem); letter-spacing: -.045em; line-height: .92; }
.hero--home .display .accent { font-size: 1.05em; }
.hero--home .hero__content { padding-bottom: 30px; }
.hero--home { padding-bottom: 150px; }
.hero__eyebrow { padding: 8px 14px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .12); background: rgb(255 255 255 / .04); backdrop-filter: blur(10px); }
.hero__eyebrow::before { width: 8px; height: 8px; border-radius: 50%; background: var(--green-2); box-shadow: 0 0 0 4px rgb(25 217 166 / .2); animation: pulse 2.4s var(--ease) infinite; }
.hero:not(.hero--home) .h1 { font-size: clamp(2.4rem, 5.8vw, 5rem); letter-spacing: -.04em; line-height: .95; }

/* Chips */
.hero__chips { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.chip { --cx: 0px; --cy: 0px; position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 18px; background: linear-gradient(135deg, rgb(255 255 255 / .1), rgb(255 255 255 / .03)); border: 1px solid rgb(255 255 255 / .14); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 30px 60px -30px #000, inset 0 1px 0 rgb(255 255 255 / .15); translate: var(--cx) var(--cy); transition: translate .9s var(--ease); animation: chip-in 1.2s var(--ease) both, float 7s var(--ease-in-out) infinite; }
.chip--1 { left: 5%; top: 36%; animation-delay: 1.2s, 2s; }
.chip--2 { right: 5%; top: 26%; animation-delay: 1.4s, 3s; }
.chip--3 { right: 8%; top: 62%; animation-delay: 1.6s, 1s; }
@keyframes chip-in { from { opacity: 0; transform: translateY(30px) scale(.9); filter: blur(8px); } }
.chip__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--green-2), var(--green)); color: #fff; box-shadow: 0 8px 20px -8px rgb(25 217 166 / .9); }
.chip__icon .icon { width: 18px; }
.chip__body strong { display: block; font: 800 1.05rem/1.1 var(--display); color: #fff; letter-spacing: -.01em; }
.chip__body small { display: block; margin-top: 3px; font-size: .74rem; color: var(--muted); }
@media (max-width: 1280px) { .hero__chips { display: none; } }

/* Ticker */
.hero__ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; contain: paint; overflow: hidden; padding: 18px 0; border-top: 1px solid rgb(255 255 255 / .08); background: linear-gradient(180deg, transparent, rgb(5 6 6 / .6)); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hero__ticker-track { display: flex; align-items: center; gap: 34px; width: max-content; animation: marquee 40s linear infinite; }
.hero__ticker span { font: 900 clamp(1.4rem, 2.6vw, 2.2rem)/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgb(255 255 255 / .35); white-space: nowrap; }
.hero__ticker span .accent { -webkit-text-stroke: 0; font-size: 1.15em; }
.hero__ticker i { font-style: normal; color: var(--green-2); font-size: .9rem; }

/* Spinning badge */
.spin { position: relative; display: grid; place-items: center; width: 120px; height: 120px; }
.spin__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 14s linear infinite; overflow: visible; will-change: transform; }
.spin__ring text { font: 700 9.4px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; fill: rgb(255 255 255 / .8); }
.spin__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--green-2), var(--green)); color: #fff; box-shadow: 0 10px 30px -8px rgb(25 217 166 / .9); transition: transform .5s var(--ease); }
.spin__icon .icon { width: 22px; }
.hero__scroll { left: auto; right: clamp(24px, 4vw, 60px); bottom: 104px; width: auto; height: auto; border: 0; border-radius: 0; transform: none; z-index: 3; }
.hero__scroll .spin__icon .icon { transform: rotate(90deg); }
.hero__scroll:hover .spin__icon { transform: scale(1.12); }

/* Text-roll buttons */
.btn__label[data-text] { position: relative; display: inline-block; vertical-align: top; line-height: 1.15; clip-path: inset(-.45em -6px -.35em -6px); }
.btn__label[data-text] > span { display: inline-block; transition: transform .55s var(--ease); }
.btn__label[data-text]::after { content: attr(data-text); position: absolute; left: 0; top: 0; transform: translateY(170%); transition: transform .55s var(--ease); white-space: nowrap; }
.btn:hover .btn__label[data-text] > span { transform: translateY(-170%); }
.btn:hover .btn__label[data-text]::after { transform: translateY(0); }
.btn--ghost { background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .16); }
.btn--ghost::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--a), transparent 0 60%, var(--green-3) 75%, transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s; animation: border-spin 3s linear infinite; }
.btn--ghost:hover::before { opacity: 1; }
@keyframes border-spin { to { --a: 360deg; } }

/* Animated light border on cards */
.card, .pcard, .review, .case, .stat, .links__item, .postcard, .aside-card, .words__item, .roas__tile { --a: 0deg; }
.card::after, .pcard::after, .links__item::after, .postcard::after, .case::after {
	content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
	background: conic-gradient(from var(--a), transparent 0 55%, rgb(124 243 207 / .9) 70%, rgb(8 166 131 / .4) 80%, transparent 92%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0; transition: opacity .5s;
}
.card:hover::after, .pcard:hover::after, .links__item:hover::after, .postcard:hover::after, .case:hover::after { opacity: 1; animation: border-spin 2.6s linear infinite; }

/* Bento services */
.cards--bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(210px, auto); gap: 14px; }
.cards--bento .card { padding: 30px; }
.cards--bento .card:nth-child(1) { grid-column: span 2; grid-row: span 2; background: radial-gradient(120% 90% at 0% 0%, rgb(8 166 131 / .32), transparent 55%), radial-gradient(80% 60% at 100% 100%, rgb(4 120 95 / .25), transparent 60%), var(--surface); border-color: var(--green-a40); }
.cards--bento .card:nth-child(1) .card__title { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.cards--bento .card:nth-child(1) .card__text { font-size: 1.05rem; max-width: 460px; color: var(--text); }
.cards--bento .card:nth-child(1) .card__icon { width: 74px; height: 74px; border-radius: 22px; }
.cards--bento .card:nth-child(1) .card__icon .icon { width: 36px; height: 36px; }
.cards--bento .card:nth-child(1)::before { opacity: .6; }
.cards--bento .card:nth-child(2), .cards--bento .card:nth-child(3), .cards--bento .card:nth-child(4), .cards--bento .card:nth-child(9) { grid-column: span 2; }
.cards--bento .card:nth-child(1) .checks { margin-top: 16px; }
.cards--bento .card:nth-child(1) { min-height: 440px; }
.cards--bento .card:nth-child(1) .card__icon { margin-bottom: auto; }
.cards--bento .card:nth-child(1) .card__more { margin-top: 18px; }
.cards--bento .card:nth-child(1) .card__more { font-size: .82rem; }
.cards--bento .card:nth-child(1)::marker { content: none; }

/* Statement (scroll-scrubbed manifesto) */
.statement { max-width: 1100px; }
.statement__text { margin: 0; font: 800 clamp(1.9rem, 4.2vw, 3.9rem)/1.08 var(--display); letter-spacing: -.035em; color: #fff; text-wrap: pretty; }
.js .statement__text .sw { opacity: .4; transition: opacity .25s linear; } /* .4: still dimmed, readable (contrast 3:1 on the dark background). */
.js .statement__text .sw.is-on { opacity: 1; }
.statement__text .accent { font-size: 1.1em; }
.statement__sign { margin-top: 30px; font: 400 1.6rem/1 var(--script); color: var(--green-2); }
.section--statement { padding-block: calc(var(--section) * 1.1); }

/* Projects rail (horizontal scroll while scrolling down) */
.section--projects:has(.rail) { padding: 0; }
.rail { position: relative; }
.rail__sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 3vh, 34px); padding-top: 90px; overflow: hidden; }
.rail__head .h2 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); }
.rail .pcard--tall .pcard__media { aspect-ratio: auto; height: min(52vh, 520px); }
.rail__head .shead { margin-bottom: 0; }
.rail__viewport { overflow: visible; }
.rail__track { display: flex; gap: 22px; padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); width: max-content; will-change: transform; }
.rail__item { position: relative; flex: none; width: clamp(260px, 26vw, 380px); }
.rail__item--end { display: grid; place-items: center; width: clamp(220px, 20vw, 300px); }
.rail__num { position: absolute; z-index: 3; left: 18px; top: 16px; font: 800 .78rem/1 var(--display); letter-spacing: .2em; color: #fff; text-shadow: 0 2px 10px #000; }
.pcard--tall .pcard__media { aspect-ratio: 3 / 4; }
.pcard--tall .pcard__logo { top: auto; bottom: 16px; }
.rail__progress { height: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.rail__progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--green), var(--green-3)); }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
	.rail { height: auto !important; }
	.rail__sticky { position: static; height: auto; padding-block: var(--section); }
	.rail__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.rail__viewport::-webkit-scrollbar { display: none; }
	.rail__track { transform: none !important; padding-bottom: 10px; }
	.rail__item { scroll-snap-align: center; width: 78vw; }
	.rail__progress { display: none; }
}

/* Reviews marquee */
.reviews { margin-bottom: 50px; }
.reviews__rows { display: grid; gap: 16px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.reviews__track { display: flex; gap: 16px; width: max-content; animation: marquee 70s linear infinite; }
.reviews__dup { display: contents; }
.reviews__rows:hover .reviews__track { animation-play-state: paused; }
.reviews__track .review { width: clamp(300px, 30vw, 420px); flex: none; }
.review { background: linear-gradient(180deg, rgb(255 255 255 / .04), rgb(255 255 255 / .015)); }

/* Orb CTA */
.cta { min-height: 520px; text-align: left; place-items: stretch; }
.cta__inner { max-width: none; width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
.cta__inner .btns { justify-content: flex-start; }
.cta__title { font-size: clamp(2.4rem, 6vw, 5.6rem); line-height: .95; letter-spacing: -.045em; }
.cta__grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(60% 80% at 70% 60%, #000, transparent); -webkit-mask-image: radial-gradient(60% 80% at 70% 60%, #000, transparent); transform: perspective(600px) rotateX(40deg) translateY(30%) scale(1.6); transform-origin: 50% 100%; }
.cta__orb { position: relative; display: grid; place-items: center; width: clamp(150px, 16vw, 210px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--green-3), var(--green) 45%, #045a47); box-shadow: 0 30px 80px -20px rgb(25 217 166 / .8), inset 0 2px 0 rgb(255 255 255 / .4); transition: box-shadow .4s; }
.cta__orb:hover { box-shadow: 0 40px 100px -20px rgb(25 217 166 / 1), inset 0 2px 0 rgb(255 255 255 / .5); }
.cta__orb .spin { width: 82%; height: 82%; }
.cta__orb .spin__ring text { fill: #fff; font-size: 10px; }
.cta__orb .spin__icon { background: #031a14; width: 56px; height: 56px; box-shadow: none; }
.cta__orb:hover .spin__icon { transform: rotate(45deg) scale(1.1); }

/* Image curtain reveal */
.js [data-reveal="clip"] .frame::before, .js [data-reveal="clip"] .video::before { content: ""; position: absolute; inset: 0; z-index: 5; background: linear-gradient(135deg, var(--green-2), var(--green)); transform-origin: 100% 50%; transform: scaleX(1); transition: transform .85s var(--ease-in-out) .1s; pointer-events: none; }
.js [data-reveal="clip"].is-visible .frame::before, .js [data-reveal="clip"].is-visible .video::before { transform: scaleX(0); }

/* Section rhythm: glowing hairline between major sections */
.tone--deep::after { content: ""; position: absolute; left: 50%; top: 0; width: min(900px, 80%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgb(25 217 166 / .6), transparent); }

/* Section heads: larger, airier */
.shead .h2 { font-size: clamp(2.1rem, 4.6vw, 4rem); letter-spacing: -.035em; line-height: .98; }
.eyebrow { font-size: .74rem; }

/* Footer logo fill on scroll */
.site-footer__word .evo-logo path.evo-logo__word { fill: rgb(8 166 131 / calc(.03 + var(--fill, 0) * .32)); stroke: rgb(124 243 207 / calc(.15 + var(--fill, 0) * .35)); }
.site-footer__word .evo-logo path.evo-logo__script { fill: rgb(124 243 207 / calc(.1 + var(--fill, 0) * .6)); }
.site-footer__word { filter: drop-shadow(0 0 40px rgb(8 166 131 / calc(var(--fill, 0) * .35))); }

/* Vignette */




/* Conversion: CTA form, assurance, floating pill, sticky bar */
.cta:has(.cta__form) { place-items: stretch; }
.cta:has(.cta__form) .cta__inner { grid-template-columns: 1fr minmax(320px, 520px); align-items: start; }
.cta__form .form { background: rgb(5 6 6 / .72); backdrop-filter: blur(16px); }
.cta__form .form__grid { grid-template-columns: 1fr 1fr; }
.assure { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.assure li { display: flex; align-items: center; gap: 12px; color: var(--text); font-size: 1rem; }
.assure .icon { width: 20px; height: 20px; color: var(--green-2); flex: none; }
.assure a { color: #fff; font-weight: 600; }
.cta__rating { margin-top: 26px; }
.convert { position: fixed; z-index: 990; inset: auto 0 0 0; pointer-events: none; }
.convert__pill { position: absolute; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 14px; border-radius: 999px; pointer-events: auto; background: linear-gradient(135deg, var(--green-2), var(--green) 60%, #067d63); color: #fff; box-shadow: 0 20px 50px -14px rgb(25 217 166 / .8), inset 0 1px 0 rgb(255 255 255 / .3); opacity: 0; transform: translateY(30px) scale(.9); transition: opacity .5s var(--ease), transform .6s var(--ease), box-shadow .3s; }
.convert.is-on .convert__pill { opacity: 1; transform: none; }
.convert__pill strong { display: block; font: 800 .9rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.convert__pill small { display: block; font-size: .74rem; opacity: .85; }
.convert__pill .icon { width: 20px; }
.convert__dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgb(255 255 255 / .7); animation: pulse 2s var(--ease) infinite; }
.convert__bar { display: none; }
.has-consent-open .convert { display: none; }
@media (max-width: 760px) {
	.convert__pill { display: none; }
	.convert__bar { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgb(5 6 6 / .9); backdrop-filter: blur(16px); border-top: 1px solid var(--line-2); pointer-events: auto; transform: translateY(110%); transition: transform .5s var(--ease); }
	.convert.is-on .convert__bar { transform: none; }
	.convert__bar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 14px; border: 1px solid var(--line-2); font: 800 .8rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
	.convert__bar a.is-main { background: linear-gradient(135deg, var(--green-2), var(--green)); border-color: transparent; box-shadow: 0 10px 26px -10px rgb(25 217 166 / .9); }
	.convert__bar .icon { width: 18px; }
	body { padding-bottom: 76px; }
	.consent { bottom: 86px; }
}
@media (max-width: 1060px) {
	.cta:has(.cta__form) .cta__inner { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
	.cta__form .form__grid { grid-template-columns: 1fr; }
}


/* Landing pages: no menu distraction, one goal */
.is-landing .nav ul, .is-landing .burger, .is-landing .site-header__cta-m, .is-landing .mega, .is-landing .site-footer__top nav, .is-landing .convert__pill { display: none !important; }
.is-landing .site-header__bar { grid-template-columns: 1fr auto; }
.is-landing .brand { justify-self: start; }
.is-landing .nav--right { display: flex !important; }
.is-landing .site-header__cta { display: inline-flex !important; }
.contact__rating { margin: 22px 0 6px; }
.contact .assure { margin: 0 0 6px; }
.section__bg { opacity: .1; mix-blend-mode: luminosity; }


/* ---------- QA fixes ---------- */
.nw { white-space: nowrap; }
.btn { max-width: 100%; }
.split > *, .stats > *, .faq > *, .contact > *, .mapbox > *, .reviews > *, .tabs__panel > *, .cta__inner > *, .hero__inner > * { min-width: 0; }
@media (max-width: 600px) {
	.btn { white-space: normal; text-align: center; line-height: 1.25; }
	.btn__label[data-text]::after { display: none; }
	.btn:hover .btn__label[data-text] > span { transform: none; }
}
.words__title { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; }
.words__title .accent { -webkit-text-fill-color: transparent; }

/* Landing pages: logo left, one button right, no breadcrumb */
.is-landing .nav--left { display: none !important; }
.is-landing .site-header__bar { grid-template-columns: auto 1fr; }
.is-landing .nav--right ul { display: none !important; }
.is-landing .crumbs { display: none; }

/* cards--line: title above text, always */
.cards--line { grid-template-columns: repeat(var(--cl, 2), 1fr); column-gap: 40px; }
.cards--line.cards--cols-3 { --cl: 3; } .cards--line.cards--cols-4 { --cl: 4; } .cards--line.cards--cols-2 { --cl: 2; }
.cards--line .card { flex-direction: column; gap: 10px; padding: 26px 0; }
.cards--line .card__icon { width: 44px; height: 44px; }

/* Contrast & sizes */
:root { --dim: #8b9590; }
.filters__btn.is-active { background: #067a61; border-color: #067a61; }
.card__tag, .pcard__tags, .review__topic, .roas__client { font-size: .72rem; }
.site-footer__col a { display: inline-block; padding: 5px 0; }
.field--check input { width: 24px; height: 24px; }
.mapbox__address a { display: inline-block; padding: 8px 0; }

/* Rhythm: tighter sections */
:root { --section: clamp(64px, 8vw, 118px); }
.section--answer { padding-block: calc(var(--section) * .45) !important; }

/* Hero: CTA above the fold */
.hero:not(.hero--home) .h1 { font-size: clamp(2.1rem, 4.3vw, 3.9rem); }
.hero--home .display { font-size: clamp(2.5rem, 6.1vw, 6rem); }
.hero { padding-top: clamp(118px, 13vw, 160px); }
.hero__title { margin-bottom: 20px; }
.hero__btns { margin-top: 26px; }
.hero--home .vf__focus { display: none; }
.chip--1 { left: 2.5%; top: 44%; }
.chip--2 { right: 2.5%; top: 24%; }
.chip--3 { right: 4%; top: 64%; }
@media (max-width: 1500px) { .hero__chips { display: none; } }

/* Floating pill: compact, never over content of the right column */
.convert__pill { padding: 10px 16px 10px 12px; }
.convert__pill small { display: none; }
.convert__pill strong { font-size: .78rem; }

/* Quote highlight */
.quote-hl { padding-right: clamp(70px, 8vw, 110px); }
.quote-hl__mark { width: 52px; height: 52px; top: 22px; right: 22px; }
.quote-hl figcaption span { white-space: nowrap; }

/* Grids: center an orphan last item */
@media (min-width: 1061px) {
	.cards--cols-3:not(.cards--bento) > .card:last-child:nth-child(3n + 1) { grid-column: 2; }
	.projects--grid > .pcard:last-child:nth-child(3n + 1) { grid-column: 2; }
}

/* Rail end */
.rail__item--end { width: clamp(220px, 18vw, 260px); }

/* Tabs on mobile: fade hint */
@media (max-width: 680px) {
	.tabs__list { mask-image: linear-gradient(90deg, #000 80%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); }
	.hero__eyebrow { font-size: .7rem; }
}
@media (max-width: 1060px) {
}
.contact__note { display: none; }


/* CRM mock (HTML/CSS illustration) */
.mock { position: relative; border-radius: 24px; overflow: hidden; background: linear-gradient(160deg, #0f1513, #070909); border: 1px solid var(--line-2); box-shadow: var(--glow), var(--shadow); font-size: 12px; transform: perspective(1400px) rotateY(-8deg) rotateX(4deg); transition: transform .8s var(--ease); }
.mock:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.mock__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / .02); }
.mock__bar span { width: 9px; height: 9px; border-radius: 50%; background: #3a403e; }
.mock__bar span:first-child { background: #ff5f57; } .mock__bar span:nth-child(2) { background: #febc2e; } .mock__bar span:nth-child(3) { background: #28c840; }
.mock__bar em { margin-left: 10px; font-style: normal; color: var(--dim); font-size: 11px; letter-spacing: .04em; }
.mock__body { display: grid; grid-template-columns: 42px 1fr; min-height: 300px; }
.mock__side { display: grid; align-content: start; gap: 12px; padding: 16px 0; justify-items: center; border-right: 1px solid var(--line); }
.mock__side i { width: 18px; height: 18px; border-radius: 6px; background: rgb(255 255 255 / .07); }
.mock__side i.is-on { background: var(--green); box-shadow: 0 0 12px var(--green-2); }
.mock__board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px; }
.mock__col { display: grid; align-content: start; gap: 8px; }
.mock__col-title { display: flex; justify-content: space-between; margin: 0 0 4px; font: 700 10px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mock__col-title b { padding: 1px 6px; border-radius: 999px; background: var(--green-a20); color: var(--green-3); }
.mock__card { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 10px; background: rgb(255 255 255 / .04); border: 1px solid var(--line); opacity: 0; transform: translateY(10px); }
.is-visible .mock__card, .mock.is-visible .mock__card { animation: mock-card .6s var(--ease) forwards; animation-delay: calc(var(--i) * 110ms + .3s); }
@keyframes mock-card { to { opacity: 1; transform: none; } }
.mock__col:last-child .mock__card { border-color: var(--green-a40); background: var(--green-a10); }
.mock__av { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--green-2), var(--green-deep)); font: 800 8px/1 var(--display); color: #fff; }
.mock__card strong { display: block; font-size: 10.5px; line-height: 1.2; color: #fff; font-weight: 600; }
.mock__card small { display: block; font-size: 9.5px; color: var(--dim); }
.mock__chart { display: flex; align-items: flex-end; gap: 8px; height: 70px; margin: 0 14px 16px 56px; padding-top: 10px; border-top: 1px dashed var(--line); }
.mock__chart span { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--green-3), var(--green)); transform-origin: 50% 100%; transform: scaleY(0); opacity: .85; }
.is-visible .mock__chart span { animation: mock-bar 1s var(--ease) forwards; animation-delay: calc(var(--i) * 80ms + .8s); }
@keyframes mock-bar { to { transform: scaleY(1); } }
.mock__toast { position: absolute; right: 16px; top: 54px; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: rgb(10 14 13 / .92); border: 1px solid var(--green-a40); box-shadow: 0 20px 40px -16px #000, 0 0 24px -8px rgb(25 217 166 / .6); opacity: 0; transform: translateY(-14px) scale(.95); }
.is-visible .mock__toast { animation: mock-toast 6s var(--ease) 2s infinite; }
@keyframes mock-toast { 0% { opacity: 0; transform: translateY(-14px) scale(.95); } 10%, 70% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-14px) scale(.95); } }
.mock__toast strong { display: block; font: 700 11px/1.2 var(--display); color: #fff; }
.mock__toast small { display: block; font-size: 10px; color: var(--muted); }
.mock__ping { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--green-2); box-shadow: 0 0 0 0 rgb(25 217 166 / .6); animation: pulse 1.6s var(--ease) infinite; }
@media (max-width: 680px) {
	.mock { transform: none; font-size: 11px; }
	.mock__board { grid-template-columns: repeat(2, 1fr); }
	.mock__col:nth-child(n + 3) { display: none; }
}


/* Light logos get a dark backdrop */
.pcard__logo.is-dark, .project__logo.is-dark { background: #0b0f0e; border: 1px solid var(--line-2); }
/* Footer accordions (mobile) */
.site-footer__acc > summary { list-style: none; cursor: default; }
.site-footer__acc > summary::-webkit-details-marker { display: none; }
@media (max-width: 680px) {
	.site-footer__acc { border-bottom: 1px solid var(--line); }
	.site-footer__acc > summary { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 18px 0; cursor: pointer; }
	.site-footer__acc > summary::after { content: "+"; font-size: 1.3rem; color: var(--green-2); transition: transform .3s var(--ease); }
	.site-footer__acc[open] > summary::after { transform: rotate(45deg); }
	.site-footer__acc ul { padding-bottom: 16px; }
	.site-footer__top { gap: 0; }
	.site-footer__brand { margin-bottom: 24px; }
	.rating--footer { margin-top: 22px; }
}


/* ---------- QA pass 2 ---------- */
.cta__title { font-size: clamp(2.3rem, 4.4vw, 4.4rem); overflow-wrap: anywhere; hyphens: manual; }
.cta:has(.cta__form) .cta__title { font-size: clamp(2.2rem, 3.6vw, 3.6rem); }
.rating { display: inline-flex; }
.rating--footer { flex-wrap: nowrap; }
.rating--footer .rating__text { white-space: nowrap; }
.field--check input + label { color: var(--muted); transform: none !important; }
.field--check label a { color: var(--green-3); }
.accent + .nw__p, .accent + .w { margin-left: -.16em; }
.rail__num { opacity: 0; transition: opacity .6s var(--ease) .4s; }
.rail__item:has(.pcard.is-visible) .rail__num { opacity: 1; }
.split__logo { left: -5%; top: -9%; width: 44%; z-index: 3; }
.split__logo + .frame { margin-top: 0; }
.split--reverse .split__logo { left: auto; right: -5%; }
.quote-hl blockquote p { font-size: clamp(1.35rem, 2.2vw, 1.95rem); }
.quote-hl__mark { opacity: .22; }
/* Review cards: equal, compact, expandable */
.reviews__track { align-items: stretch; }
/* Clamped with JS only (main.js shows « Lire la suite » when the text is really cut): without JS the review is whole. */
.js .review__text p { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.js .review.is-open .review__text p { display: block; -webkit-line-clamp: unset; overflow: visible; }
.review__more { align-self: flex-start; margin-top: -4px; padding: 6px 0; border: 0; background: none; cursor: pointer; font: 700 .72rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--green-2); transition: color .25s; }
.review__more[hidden] { display: none; }
.review__more:hover { color: var(--green-3); }
.review__more:focus-visible { outline: 2px solid var(--green-2); outline-offset: 4px; border-radius: 4px; }
/* A review being read stops the marquee (touch screens have no hover). */
.reviews__rows.has-open .reviews__track { animation-play-state: paused; }
/* Floating pill: icon only, label on hover */
.convert__pill { width: 58px; height: 58px; padding: 0; justify-content: center; gap: 0; overflow: hidden; transition: width .5s var(--ease), opacity .5s var(--ease), transform .6s var(--ease), box-shadow .3s; }
.convert__pill > span:not(.convert__dot) { max-width: 0; opacity: 0; white-space: nowrap; transition: max-width .5s var(--ease), opacity .3s; }
.convert__pill .icon { display: none; }
.convert__pill:hover, .convert__pill:focus-visible { width: 236px; padding: 0 20px; gap: 12px; justify-content: flex-start; }
.convert__pill:hover > span:not(.convert__dot), .convert__pill:focus-visible > span:not(.convert__dot) { max-width: 200px; opacity: 1; }
.convert__dot { width: 14px; height: 14px; }
.convert__pill::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 24px no-repeat; transition: opacity .3s; }
.convert__pill .convert__dot { position: absolute; right: 9px; top: 9px; width: 9px; height: 9px; }
.convert__pill:hover::after, .convert__pill:focus-visible::after { opacity: 0; }
@media (max-width: 680px) {
	.hero__eyebrow { font-size: .75rem; }
	.stats__list { grid-template-columns: 1fr; }
	.is-landing .site-header__cta { white-space: nowrap; font-size: .68rem; padding-inline: 14px; }
}
@media (max-width: 1060px) {
	.projects--grid > .pcard, .projects__cell > .pcard { grid-column: auto !important; }
}


/* ==========================================================================
   RHYTHM & READABILITY — graphite sheets, deep green, one grid
   ========================================================================== */
:root {
	--muted: #b3bdb8;
	--sheet-m: clamp(8px, 1.1vw, 18px);
	--sheet-r: clamp(26px, 3vw, 46px);
}
body { line-height: 1.7; }

/* One grid: header, sections and footer share the same content edges. */
.site-header { padding-inline: 0; }
.site-header__bar { width: min(100% - 2 * var(--gutter) + 36px, var(--container) + 36px); padding: 10px 10px 10px 18px; }
.container--narrow { --container: 900px; }

/* « En bref »: full width, two columns */
.answer { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px 56px; align-items: start; padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 56px); }
.answer__label { grid-column: 1 / -1; }
.answer__text { font-size: clamp(1.08rem, 1.5vw, 1.28rem); }
.answer__points { margin: 0; grid-template-columns: 1fr; gap: 14px; padding-left: 28px; border-left: 1px solid var(--green-a40); }
.answer__points li { color: var(--text); font-size: .98rem; }

/* Long-form text: aligned on the grid, comfortable measure */
.longform:not(.longform--aside) > .prose, .section--content .prose { max-width: 76ch; }
.prose p, .prose li { max-width: 76ch; }

/* ---------- Graphite sheets (lighter than the black, still dark) ---------- */
.tone--graphite, .tone--light {
	--bg: #141a18;
	--surface: rgb(255 255 255 / .045);
	--line: rgb(255 255 255 / .09);
	--line-2: rgb(255 255 255 / .15);
	--muted: #bcc6c1;
	position: relative;
	margin-inline: var(--sheet-m);
	border-radius: var(--sheet-r);
	background: radial-gradient(90% 70% at 100% 0%, rgb(8 166 131 / .1), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgb(8 166 131 / .06), transparent 60%), linear-gradient(180deg, #171e1b, #121715);
	border: 1px solid rgb(255 255 255 / .06);
	padding-block: var(--section) !important;
	isolation: isolate;
}
:is(.tone--graphite, .tone--light) .container { width: min(100% - 2 * (var(--gutter) - var(--sheet-m)), var(--container)); }
:is(.tone--graphite, .tone--light) .container--narrow { --container: 900px; }
:is(.tone--graphite, .tone--light)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: radial-gradient(rgb(255 255 255 / .06) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, #000, transparent 45%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 45%); pointer-events: none; }
:is(.tone--graphite, .tone--light) :is(.card, .review, .stat, .case, .links__item, .postcard, .pcard, .aside-card, .toc, .mapbox__address) { background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .025)); border-color: rgb(255 255 255 / .09); box-shadow: 0 24px 50px -32px #000; }
:is(.tone--graphite, .tone--light) .quote-hl { background: radial-gradient(120% 100% at 100% 0%, rgb(8 166 131 / .26), transparent 55%), #1b2320; }
:is(.tone--graphite, .tone--light) .logos__item { box-shadow: 0 16px 30px -18px #000; }
:is(.tone--graphite, .tone--light) .prose, :is(.tone--graphite, .tone--light) .faq__a { color: #d3dbd7; }
:is(.tone--graphite, .tone--light) thead th { background: rgb(255 255 255 / .05); }
.tone--graphite + .tone--graphite, .tone--light + .tone--light { margin-top: 14px; }

/* ---------- Deep green ---------- */
.tone--green {
	--bg: #04251d;
	--surface: rgb(255 255 255 / .05);
	--line: rgb(255 255 255 / .12);
	--line-2: rgb(255 255 255 / .2);
	--muted: #c6d6d0;
	--dim: #9fb6ad;
	position: relative;
	margin-inline: var(--sheet-m);
	border-radius: var(--sheet-r);
	background: radial-gradient(80% 90% at 15% 0%, #0b6b53, transparent 60%), radial-gradient(70% 80% at 100% 100%, #07503e, transparent 60%), linear-gradient(180deg, #053226, #031c15);
	padding-block: var(--section) !important;
	isolation: isolate;
	overflow: hidden;
}
.tone--green .container { width: min(100% - 2 * (var(--gutter) - var(--sheet-m)), var(--container)); }
.tone--green::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(70% 70% at 30% 30%, #000, transparent 80%); -webkit-mask-image: radial-gradient(70% 70% at 30% 30%, #000, transparent 80%); pointer-events: none; }
.tone--green .eyebrow { color: #7cf3cf; }
.tone--green .accent, .tone--green .accent .w > span { background-image: linear-gradient(100deg, #b6ffe9, #7cf3cf 50%, #3fe0b5); }
.tone--green .stat { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .14); backdrop-filter: none; }
.tone--green .stat__prefix, .tone--green .stat__suffix { color: #7cf3cf; }
.tone--green .section__bg { opacity: .07; }
.tone--green .process__dot { background: #053226; box-shadow: 0 0 0 6px #053226; }
.tone--green .process::before { background: rgb(255 255 255 / .2); }
.tone--green .words__item { background: linear-gradient(160deg, rgb(255 255 255 / .1), rgb(255 255 255 / .02)); border-color: rgb(124 243 207 / .35); box-shadow: 0 30px 60px -30px #000; }
.tone--green + :is(.tone--light, .tone--graphite), :is(.tone--light, .tone--graphite) + .tone--green { margin-top: 14px; }

/* Breathing room between a sheet and the dark sections around it */
.tone--light, .tone--graphite, .tone--green { margin-block: 14px; }
.section--article.tone--light { margin-top: 0; }

@media (max-width: 680px) {
	.answer { grid-template-columns: 1fr; }
	.answer__points { padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px solid var(--green-a40); }
	.site-header__bar { width: calc(100% - 2 * var(--gutter) + 24px); padding: 8px 8px 8px 14px; }
}


/* ==========================================================================
   WOW LAYER 3
   ========================================================================== */
/* Headings: per-word white → mint gradient + a sheen that crosses once */
.js [data-split] .w > span { background-image: linear-gradient(180deg, #ffffff 35%, #cfe2db 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.js [data-split] .accent .w > span, .js [data-split] .accent > .w > span { background-image: linear-gradient(100deg, var(--green-3), var(--green-2) 45%, var(--green) 90%); }
.heading { position: relative; }
.js [data-split].is-visible::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .22) 50%, transparent 58%) no-repeat; background-size: 250% 100%; background-position: 160% 0; mix-blend-mode: overlay; animation: sheen 1.8s 1s var(--ease) forwards; }
@keyframes sheen { to { background-position: -60% 0; } }

/* Hero dust in the projector beams */
.hero__dust { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; pointer-events: none; }

/* Header: a pill slides between the hovered links */
.nav { position: relative; }
.nav__pill { position: absolute; top: 50%; left: 0; height: 38px; width: 0; margin-top: -19px; border-radius: 999px; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .08); opacity: 0; pointer-events: none; transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s; z-index: -1; }
.nav.has-pill .nav__pill { opacity: 1; }
.nav__link::after { display: none; }
.nav__link.is-active { color: var(--green-3); }

/* Client logos: monochrome white on glass, true colours on hover */
.logos__item { background: rgb(255 255 255 / .035); border: 1px solid rgb(255 255 255 / .08); box-shadow: none; backdrop-filter: blur(6px); transition: background .5s var(--ease), border-color .4s, transform .5s var(--ease); }
.logos__item { position: relative; }
.logos__item img { transition: opacity .5s var(--ease), filter .5s var(--ease); }
.logos__mono { position: absolute; left: 50%; top: 50%; max-width: calc(100% - 52px); max-height: 60px; width: auto; height: auto; transform: translate(-50%, -50%); opacity: .8; pointer-events: none; }
.logos__item:has(.logos__mono) .logos__color { opacity: 0; }
.logos__item:not(:has(.logos__mono)) .logos__color { filter: brightness(0) invert(1); opacity: .78; }
.logos__item:hover .logos__mono { opacity: 0; }
.logos__item:hover .logos__color { opacity: 1 !important; filter: none !important; }
.logos__word { color: rgb(255 255 255 / .78); }
.logos__item:hover { background: #fff; border-color: #fff; transform: translateY(-4px); }
.logos__item:hover img { filter: none; opacity: 1; }
.logos__item:hover .logos__word { color: #0d2a22; }

/* Graphite & green sheets unfold on scroll, light runs along their top edge */
.js :is(.tone--graphite, .tone--light, .tone--green) { transform: translateY(40px) scale(.975); opacity: .4; transition: transform 1.2s var(--ease), opacity 1s var(--ease); }
.js :is(.tone--graphite, .tone--light, .tone--green).is-in { transform: none; opacity: 1; }
:is(.tone--graphite, .tone--light, .tone--green)::after { content: ""; position: absolute; top: -1px; left: 8%; right: 8%; height: 1px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgb(124 243 207 / .9), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: edge-run 7s linear infinite; opacity: .8; pointer-events: none; }
@keyframes edge-run { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
.tone--deep::after { animation: edge-run 7s linear infinite; background-size: 40% 100%; background-repeat: no-repeat; }

/* Primary buttons breathe */
.btn--primary { animation: breathe 4.5s var(--ease-in-out) infinite; }
@keyframes breathe { 50% { box-shadow: 0 16px 46px -12px rgb(25 217 166 / 1), inset 0 1px 0 rgb(255 255 255 / .3); } }

/* Tabs: autoplay progress */
.tabs__tab { position: relative; overflow: hidden; }
.tabs__bar { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: rgb(255 255 255 / .9); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; }
.tabs.is-auto .tabs__tab.is-active .tabs__bar { opacity: .7; animation: tabbar var(--tab-dur, 7s) linear forwards; }
@keyframes tabbar { to { transform: scaleX(1); } }

/* Section heads: eyebrow chip */
.eyebrow { padding: 7px 14px 7px 12px; border-radius: 999px; background: rgb(8 166 131 / .08); border: 1px solid rgb(8 166 131 / .22); }
.eyebrow::before { width: 6px; height: 6px; border-radius: 50%; background: var(--green-2); box-shadow: 0 0 10px var(--green-2); }
.hero__eyebrow::before { width: 8px; height: 8px; }

/* Cards: glare on hover (light catching the surface) */
.card, .pcard, .words__item { --gx: 50%; }
.card > :first-child { position: relative; }
.card:hover { border-color: rgb(124 243 207 / .3); }

/* Images: subtle film grade, full colour on hover */
.frame img, .pcard__media img, .postcard__media img { filter: saturate(.92) contrast(1.04); }
.frame:hover img, .pcard:hover .pcard__media img, .postcard:hover img { filter: saturate(1.05) contrast(1.05); }

@media (prefers-reduced-motion: reduce) {
	.js :is(.tone--graphite, .tone--light, .tone--green) { transform: none; opacity: 1; }
	.js [data-split] .w > span { -webkit-text-fill-color: currentColor; background: none; }
}


/* ==========================================================================
   QA PASS 3
   ========================================================================== */
/* Tabs: panels stacked in one cell → the block keeps the height of the tallest */
.tabs__panels { display: grid; }
.tabs__panel, .tabs__panel[hidden] { grid-area: 1 / 1; display: grid; visibility: hidden; opacity: 0; transition: opacity .5s var(--ease), visibility 0s .5s; }
.tabs__panel.is-active { visibility: visible; opacity: 1; transition: opacity .5s var(--ease); }
.tabs__tab { flex: none; }
.video--tall { width: auto; height: min(68vh, 560px); max-width: 100%; margin-inline: auto; }
.tabs__media .video--tall, .split__media .video--tall, .hero__media .video--tall { height: min(64vh, 540px); }
@media (max-width: 680px) { .video--tall { height: min(70vh, 520px); } }

/* Heading sheen: inside the letters, word by word (no grey band) */
.js [data-split].is-visible::after { content: none; }
.js [data-split] .w > span { background-image: linear-gradient(105deg, transparent 40%, rgb(124 243 207 / .95) 50%, transparent 60%), linear-gradient(180deg, #ffffff 35%, #cfe2db 100%); background-size: 300% 100%, 100% 100%; background-repeat: no-repeat; background-position: 150% 0, 0 0; }
.js [data-split].is-visible .w > span { animation: wsheen 1.4s calc(var(--wi, 0) * 50ms + .9s) var(--ease) forwards; }
@keyframes wsheen { to { background-position: -50% 0, 0 0; } }
.js [data-split] .accent .w > span { background-image: linear-gradient(100deg, var(--green-3), var(--green-2) 45%, var(--green) 90%); background-size: 100% 100%; animation: none; }

/* Projects rail: always fits the screen height */
.rail .pcard--tall .pcard__media { height: clamp(190px, calc(100vh - 470px), 520px); }

/* Team logo: above the photo, never over faces, never outside */
.split__media:has(.split__logo) { padding-top: 17%; }
.split__logo, .split--reverse .split__logo { top: 0; left: 0; right: auto; width: 44%; }
.split__media { overflow: clip; overflow-clip-margin: 40px; }

/* Footer rating: icons keep their size */
.rating svg, .rating__stars { flex: none; }
.rating__stars .icon { width: 14px; height: 14px; }
.rating__g { width: 20px; height: 20px; }

/* Orphans */
.process--6 { --n: 3; row-gap: 40px; }
.process--6::before, .process--6::after { display: none; }
.stats__list > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hero__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 16px; }
.cases > .case:only-child { grid-column: 1 / -1; }
.links--cards.links--n2 { grid-template-columns: repeat(2, 1fr); }
.links--cards:is(.links--n3, .links--n5, .links--n6, .links--n9) { grid-template-columns: repeat(3, 1fr); }
.links--cards:is(.links--n4, .links--n7, .links--n8) { grid-template-columns: repeat(4, 1fr); }
.links--cards.links--n1 { grid-template-columns: minmax(0, 720px); }

/* Joined sheets: one continuous panel */
.sheet--join-next { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; margin-bottom: 0 !important; padding-bottom: calc(var(--section) * .5) !important; border-bottom: 0 !important; }
.sheet--join-prev { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; margin-top: 0 !important; padding-top: calc(var(--section) * .5) !important; border-top: 0 !important; }
.sheet--join-prev::after { display: none; }
.sheet--join-prev::before { mask-image: none; -webkit-mask-image: none; opacity: .35; }
.sheet--join-prev > .container { border-top: 1px solid rgb(255 255 255 / .07); padding-top: calc(var(--section) * .5); }
.js .sheet--join-prev { transform: none !important; opacity: 1 !important; }

/* Details */
.hero--404 .h1 { margin-bottom: 28px; }
.card__num { -webkit-text-stroke-color: rgb(124 243 207 / .7); }
.frame { border-radius: var(--radius); }
.section--content .longform, .section--content .container > .prose { margin-inline: 0; }

/* Tablet (≤ 1060px): balanced grids */
@media (max-width: 1060px) and (min-width: 901px) {
	.cards--cols-3, .projects, .posts { grid-template-columns: repeat(3, 1fr); }
	.team { --cols: 5; }
	.links--cards:is(.links--n4, .links--n8) { grid-template-columns: repeat(2, 1fr); }
	.links--cards:is(.links--n3, .links--n6) { grid-template-columns: repeat(3, 1fr); }
	.process:not(.process--6) { display: flex; flex-wrap: wrap; justify-content: center; }
	.process:not(.process--6) .process__step { flex: 0 0 calc(33.333% - 14px); }
	.mapbox__map { aspect-ratio: 16 / 9; }
}
@media (max-width: 900px) {
	.links--cards:is(.links--n3, .links--n4, .links--n5, .links--n6, .links--n7, .links--n8, .links--n9) { grid-template-columns: repeat(2, 1fr); }
	.team { --cols: 2; }
	.process--6 { --n: 2; }
}
@media (max-width: 680px) {
	.links--cards[class*="links--n"] { grid-template-columns: 1fr; }
	.process--6 { grid-template-columns: 1fr; }
	:root { --sheet-m: 0px; --sheet-r: 28px; }
	.contact__form { order: -1; }
	.contact { display: flex; flex-direction: column; }
}

/* Process line: one segment between each pair of icons, never through them */
.process::before, .process::after { display: none; }
.process__step:not(:last-child)::before, .process__step:not(:last-child)::after { content: ""; position: absolute; top: 30px; left: 76px; right: -4px; height: 1px; border-radius: 1px; pointer-events: none; }
.process__step:not(:last-child)::before { background: var(--line-2); }
.tone--green .process__step:not(:last-child)::before { background: rgb(255 255 255 / .16); }
.process__step:not(:last-child)::after { background: linear-gradient(90deg, var(--green-2), var(--green-3)); box-shadow: 0 0 10px var(--green-2); transform-origin: 0 50%; transform: scaleX(0); transition: transform .7s var(--ease); }
.process.is-visible .process__step::after { transform: scaleX(1); }
.process__step:nth-child(2)::after { transition-delay: .35s; } .process__step:nth-child(3)::after { transition-delay: .7s; } .process__step:nth-child(4)::after { transition-delay: 1.05s; } .process__step:nth-child(5)::after { transition-delay: 1.4s; }
.process__dot, .tone--green .process__dot { background: radial-gradient(circle at 32% 25%, rgb(25 217 166 / .22), rgb(4 40 31 / .9) 70%); box-shadow: 0 0 0 1px rgb(25 217 166 / .08), 0 10px 30px -12px rgb(25 217 166 / .6); }
.process__step:hover .process__dot { background: var(--green); box-shadow: 0 0 30px var(--green-2); }
.process--6 .process__step::before, .process--6 .process__step::after { display: none; }
@media (max-width: 1060px) { .process__step::before, .process__step::after { display: none !important; } }

/* "En bref" — answer card ---------------------------------------------------------------------- */
@property --ans-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.answer { isolation: isolate; overflow: hidden; grid-template-columns: 1.25fr 1fr; gap: 22px 60px; border: 0; background:
	radial-gradient(120% 140% at 0% 0%, rgb(25 217 166 / .16), transparent 55%),
	linear-gradient(160deg, #0b1a16, #070c0b 70%); box-shadow: 0 40px 90px -50px rgb(25 217 166 / .55), inset 0 1px 0 rgb(255 255 255 / .07); }
.answer::before { left: 0; top: 0; bottom: auto; width: auto; height: auto; inset: 0; border-radius: inherit; padding: 1px; z-index: -1;
	background: conic-gradient(from var(--ans-a), rgb(25 217 166 / .15), rgb(124 243 207 / .9) 12%, rgb(25 217 166 / .15) 26%, rgb(255 255 255 / .06) 50%, rgb(25 217 166 / .15) 76%, rgb(124 243 207 / .6) 88%, rgb(25 217 166 / .15));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); box-shadow: none; animation: ans-spin 9s linear infinite; }
@keyframes ans-spin { to { --ans-a: 360deg; } }
.answer::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .5;
	background-image: linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px); background-size: 34px 34px;
	-webkit-mask-image: radial-gradient(80% 90% at 100% 100%, #000, transparent 70%); mask-image: radial-gradient(80% 90% at 100% 100%, #000, transparent 70%); }
.answer__aura { position: absolute; z-index: -1; right: -10%; bottom: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(25 217 166 / .22), transparent 65%); filter: blur(10px); pointer-events: none; animation: ans-float 12s ease-in-out infinite alternate; }
@keyframes ans-float { to { transform: translate(-18%, -12%) scale(1.15); } }
.answer__mark { position: absolute; z-index: -1; right: clamp(18px, 3vw, 40px); top: clamp(18px, 3vw, 34px); color: var(--green-2); opacity: .1; pointer-events: none; }
.answer__mark .icon { width: clamp(70px, 9vw, 120px); height: auto; stroke-width: 1; }
.answer__head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.answer__label { margin: 0; padding: 9px 16px 9px 12px; border-radius: 999px; background: rgb(25 217 166 / .12); border: 1px solid var(--green-a40); color: var(--green-3); gap: 10px; }
.answer__pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--green-2); box-shadow: 0 0 10px var(--green-2); }
.answer__pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--green-2); animation: ans-ping 2s var(--ease) infinite; }
@keyframes ans-ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.answer__time { display: inline-flex; align-items: center; gap: 7px; font: 600 .74rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.answer__time .icon { width: 14px; height: 14px; }
.answer__text { font-size: 1rem; line-height: 1.7; color: var(--muted); }
.answer__text p { margin: 0 0 .8em; } .answer__text p:last-child { margin-bottom: 0; }
.answer__lead { font: 600 clamp(1.25rem, 2vw, 1.6rem)/1.35 var(--display); letter-spacing: -.01em; color: #fff; margin-bottom: .7em !important; text-wrap: balance; }
.answer__points { gap: 10px; padding-left: 0; border-left: 0; align-content: start; }
.answer__points li { position: relative; align-items: center; gap: 14px; padding: 13px 16px 13px 13px; border-radius: 16px; background: rgb(255 255 255 / .035); border: 1px solid rgb(255 255 255 / .07); color: var(--text); font-size: .95rem; line-height: 1.45; transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease); }
.answer__points li:hover { border-color: var(--green-a40); background: rgb(25 217 166 / .07); transform: translateX(4px); }
.answer__ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(145deg, rgb(25 217 166 / .3), rgb(8 166 131 / .08)); border: 1px solid var(--green-a40); color: var(--green-3); box-shadow: 0 8px 20px -10px rgb(25 217 166 / .8); }
.answer__ico .icon { width: 18px; height: 18px; margin: 0; stroke-width: 2; color: inherit; }
.answer__points .fig { white-space: nowrap; font-weight: 700; color: #fff; background: linear-gradient(transparent 62%, rgb(25 217 166 / .35) 62%); padding-inline: 1px; }
.js .answer[data-reveal] .answer__points li { opacity: 0; transform: translateX(18px); transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .35s, background .35s; transition-delay: calc(.35s + var(--i, 0) * 90ms); }
.js .answer[data-reveal].is-visible .answer__points li { opacity: 1; transform: none; }
.js .answer[data-reveal].is-visible .answer__points li:hover { transform: translateX(4px); transition-delay: 0s; }
@media (max-width: 1060px) {
	.answer { grid-template-columns: 1fr; gap: 20px; }
	.answer__points { padding-top: 0; border-top: 0; }
}
@media (max-width: 680px) {
	.answer__mark { display: none; }
	.answer__points li { padding: 11px 12px 11px 11px; gap: 12px; }
	.answer__ico { width: 34px; height: 34px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) { .answer::before, .answer__aura, .answer__pulse::after { animation: none; } }

/* Home hero cinematic intro: the video's own titles first, then the hero text */
.hero--home .hero__shade, .hero--home :is(.hero__chips, .hero__ticker, .hero__scroll, .hero__aurora, .hero__beams) { transition: opacity 1.2s var(--ease); }
html.hero-intro .hero--home .hero__bg-video.is-ready { opacity: 1; }
html.hero-intro .hero--home .hero__shade { opacity: .2; }
html.hero-intro .hero--home :is(.hero__chips, .hero__ticker, .hero__scroll, .hero__aurora, .hero__beams) { opacity: 0; }
html.hero-intro .hero--home [data-reveal].is-visible { opacity: 0; transform: translateY(36px); }
html.hero-intro .hero--home [data-split].is-visible .w > span { opacity: 0; transform: translateY(110%) rotate(4deg); animation: none; }

/* Home hero fits the screen: the cover video is cropped as little as possible */
@media (min-width: 761px) {
	.hero--home { padding-top: clamp(104px, 13vh, 160px); padding-bottom: clamp(96px, 12vh, 150px); }
	.hero--home .display { font-size: clamp(2.5rem, min(6.1vw, 8.4vh), 6rem); }
	.hero--home .hero__tagline { margin-bottom: 12px; }
	.hero--home .hero__btns { margin-top: clamp(18px, 2.6vh, 34px); }
	.hero--home .hero__checks { margin-top: clamp(14px, 2.2vh, 30px); }
	.hero--home .hero__rating { margin-top: clamp(14px, 2.2vh, 28px); }
}

/* Split headings: room for accents (À, É) and script swashes inside the word masks */
.js [data-split] .w { padding: .32em .06em .18em; margin: -.32em -.06em -.18em; }
.js [data-split] .w > span { padding: .32em .06em .18em; margin: -.32em -.06em -.18em; }
.js [data-split] .accent .w, .js [data-split] .accent .w > span { padding-inline: .22em; margin-inline: -.22em; }
html.hero-intro .hero--home [data-split] .accent::after, html.is-loading [data-split] .accent::after { transform: scaleX(0); }

/* Home hero: title, one line, two buttons, proof — nothing more */
.hero--home .hero__tagline { margin: clamp(18px, 2.6vh, 28px) 0 0; }
.hero--home .hero__btns { margin-top: clamp(28px, 4.4vh, 44px); }
.cta__checks { display: grid; gap: 10px; margin: 22px 0 0; justify-content: start; }
.cta__checks li { text-align: left; }

/* Text + visual (desktop): the visual keeps its exact proportions (never cropped,
   never padded); the column widths are adjusted by JS (fitMedia) so that the
   visual and the text end up the same height. */
@media (min-width: 1061px) {
	.split:not(.split--nomedia), .hero__inner:has(.hero__media), .tabs__panel { align-items: center; }
	:is(.split__media, .hero__media, .tabs__media) { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
	:is(.split__media, .hero__media, .tabs__media) > .video:is(.video--tall, .video--vertical) { height: auto; width: 100%; max-width: none; aspect-ratio: var(--ratio); }
	/* CRM mock: centred on a lit panel as tall as the text */
	.split:has(> .split__media > .mock), .hero__inner:has(> .hero__media > .mock), .tabs__panel:has(> .tabs__media > .mock) { align-items: stretch; }
	:is(.split__media, .hero__media, .tabs__media):has(> .mock) { min-height: 360px; padding: clamp(24px, 3vw, 44px); border-radius: var(--radius-lg); border: 1px solid var(--line); background:
		radial-gradient(70% 60% at 50% 45%, rgb(25 217 166 / .16), transparent 70%),
		linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px) 0 0 / 32px 32px,
		linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px) 0 0 / 32px 32px,
		linear-gradient(160deg, #0b1412, #060807); box-shadow: inset 0 1px 0 rgb(255 255 255 / .05); }
}
/* Photos: always the whole picture, at its own proportions */
.frame--fit > :is(picture, img) { display: block; }
.frame--fit img { height: auto; object-fit: cover; }
.frame--fit:hover img { transform: scale(1.03); }
/* Portrait frames (3:4) crop taller photos (9:16) around their centre. */
.frame--portrait.frame--fit > :is(picture, img), .frame--portrait.frame--fit img { height: 100%; }
.frame--loop video { display: block; width: 100%; height: auto; }
.contact__img { aspect-ratio: auto; }
.project__photo.frame--fit { aspect-ratio: auto; }

/* Portraits: framed from the top, heads never cut; team photos in colour */
.member__photo img { filter: none !important; object-position: 50% 8%; transform-origin: 50% 0; }
.pcard__media img, .postcard__media img { object-position: 50% 30%; }

/* Contact popup ------------------------------------------------------------------------------------ */
.cmodal { position: fixed; inset: 0; z-index: 9990; display: grid; place-items: center; padding: clamp(12px, 3vw, 36px); }
.cmodal[hidden] { display: none; }
.cmodal__backdrop { position: absolute; inset: 0; background: rgb(2 4 3 / .72); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); opacity: 0; transition: opacity .38s var(--ease); }
.cmodal__panel { position: relative; display: grid; grid-template-columns: minmax(280px, 360px) 1fr; width: min(1120px, 100%); height: min(780px, 100%); border-radius: 30px; overflow: hidden; outline: none;
	background: linear-gradient(160deg, #0d1916, #060908 60%); border: 1px solid rgb(25 217 166 / .28); box-shadow: 0 50px 120px -30px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .03), 0 0 90px -30px rgb(25 217 166 / .45);
	opacity: 0; transform: translateY(26px) scale(.97); transition: opacity .38s var(--ease), transform .5s var(--ease); }
.cmodal.is-open .cmodal__backdrop { opacity: 1; }
.cmodal.is-open .cmodal__panel { opacity: 1; transform: none; }
.cmodal__close { position: absolute; top: 16px; right: 16px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: rgb(5 8 7 / .7); color: #fff; cursor: pointer; transition: background .3s, border-color .3s, transform .3s var(--ease); }
.cmodal__close:hover { background: var(--green); border-color: var(--green); transform: rotate(90deg); }
.cmodal__close .icon { width: 20px; height: 20px; }
.cmodal__aside { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 3.4vw, 46px); border-right: 1px solid var(--line); overflow-y: auto;
	background: radial-gradient(120% 70% at 0% 0%, rgb(25 217 166 / .22), transparent 60%), linear-gradient(rgb(255 255 255 / .03) 1px, transparent 1px) 0 0 / 30px 30px, linear-gradient(90deg, rgb(255 255 255 / .03) 1px, transparent 1px) 0 0 / 30px 30px; }
.cmodal__title { margin: 14px 0 14px; font: 800 clamp(1.8rem, 2.6vw, 2.5rem)/.98 var(--display); text-transform: uppercase; letter-spacing: -.02em; color: #fff; }
.cmodal__lead { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.6; }
.cmodal__aside .eyebrow { align-self: flex-start; }
.cmodal__aside .assure { margin-top: 26px; }
.cmodal__rating .rating { white-space: nowrap; }
.cmodal__aside .assure li { font-size: .95rem; }
.cmodal__rating { margin-top: auto; padding-top: 26px; }
.cmodal__main { position: relative; display: flex; flex-direction: column; min-height: 0; }
.cmodal__tabs { display: flex; gap: 6px; margin: 18px 76px 0 22px; padding: 5px; width: max-content; max-width: calc(100% - 98px); border-radius: 999px; background: rgb(255 255 255 / .04); border: 1px solid var(--line); }
.cmodal__tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 700 .74rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background .3s, color .3s; }
.cmodal__tab .icon { flex: none; width: 16px; height: 16px; }
.cmodal__tab:hover { color: #fff; }
.cmodal__tab.is-active { background: linear-gradient(135deg, var(--green-2), var(--green)); color: #fff; box-shadow: 0 8px 22px -10px rgb(25 217 166 / .9); }
.cmodal__pane { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 22px; }
.cmodal__pane[hidden] { display: none; }
.cmodal__main > .cmodal__pane--form:only-child { padding-top: 64px; }
.cmodal__pane--form .form { padding: clamp(20px, 2.6vw, 32px); box-shadow: none; }
.cmodal__pane--cal { display: flex; flex-direction: column; gap: 10px; }
.cmodal__cal { position: relative; flex: 1; min-height: 560px; border-radius: 20px; overflow: hidden; background: #fff; opacity: 0; transition: opacity .5s var(--ease); }
.cmodal__cal[data-cal-type="cal"] { background: transparent; }
.cmodal__cal iframe { display: block; width: 100%; height: 100%; min-height: 560px; border: 0; }
.cmodal.cal-ready .cmodal__cal { opacity: 1; }
.cmodal__loading { position: absolute; left: 0; right: 0; top: 45%; display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; color: var(--muted); font-size: .9rem; pointer-events: none; transition: opacity .3s; }
.cmodal__loading span { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .12); border-top-color: var(--green-2); animation: spin 0.9s linear infinite; }
.cmodal.cal-ready .cmodal__loading { opacity: 0; }
.cmodal__fallback { margin: 0; text-align: center; font-size: .82rem; color: var(--dim); }
.cmodal__fallback a { color: var(--green-2); }
html.cmodal-open .convert { opacity: 0; pointer-events: none; }
@media (max-width: 900px) {
	.cmodal { padding: 0; place-items: end stretch; }
	.cmodal__panel { grid-template-columns: 1fr; grid-template-rows: auto 1fr; width: 100%; height: 100%; height: 100dvh; border-radius: 0; border: 0; transform: translateY(40px); }
	.cmodal__aside { padding: 22px 76px 16px 20px; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
	.cmodal__aside .eyebrow { display: none; }
	.cmodal__title { margin: 0; font-size: 1.6rem; }
	.cmodal__lead, .cmodal__aside .assure, .cmodal__rating { display: none; }
	.cmodal__tabs { margin: 14px 16px 0; max-width: calc(100% - 32px); width: auto; }
	.cmodal__tab { flex: 1; justify-content: center; padding: 11px 10px; font-size: .68rem; letter-spacing: .08em; }
	.cmodal__pane { padding: 14px 12px 18px; }
	.cmodal__main > .cmodal__pane--form:only-child { padding-top: 14px; }
	.cmodal__cal, .cmodal__cal iframe { min-height: 0; height: 100%; }
	.cmodal__cal { min-height: 520px; }
}
@media (prefers-reduced-motion: reduce) { .cmodal__panel { transform: none; } }

/* Long text next to a landscape visual: the visual stays in view while reading */
@media (min-width: 1061px) {
	.is-follow { align-items: start !important; }
	.is-follow > :is(.split__media, .tabs__media) { position: sticky; top: clamp(96px, 14vh, 140px); }
	.section:has(.is-follow) { overflow: clip; }
}

/* cards--line: soft panels with real padding, so the hover glow never hugs the text */
.cards--line { border-top: 0; gap: 16px; }
.cards--line .card { padding: clamp(24px, 2.4vw, 32px) clamp(22px, 2.2vw, 30px); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgb(255 255 255 / .03), rgb(255 255 255 / .01)); transition: border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); }
.cards--line .card:hover { border-color: var(--green-a40); background: linear-gradient(180deg, rgb(25 217 166 / .07), rgb(255 255 255 / .015)); box-shadow: 0 24px 50px -30px rgb(25 217 166 / .45); }

/* ==========================================================================
   PROJECTS — case study, featured project, archive
   ========================================================================== */
.btn--block { display: flex; width: 100%; }

/* Hero */
.case-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: min(92vh, 980px); padding: clamp(120px, 15vh, 170px) 0 clamp(70px, 9vh, 110px); }
.case-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.case-hero__poster { position: absolute; inset: -12%; background: center / cover no-repeat; filter: blur(70px) saturate(1.4) brightness(.38); transform: scale(1.1); opacity: .85; }
.case-hero__shade { position: absolute; inset: 0; background: radial-gradient(60% 70% at 75% 45%, transparent, rgb(5 6 6 / .55) 70%), linear-gradient(180deg, rgb(5 6 6 / .55), transparent 30%, transparent 65%, var(--bg)); }
.case-hero .hero__grid { opacity: .5; }
.case-hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.case-hero__inner--vertical { grid-template-columns: 1.35fr .65fr; }
.case-hero__inner--none { grid-template-columns: minmax(0, 860px); }
.case-hero__content { min-width: 0; }
.case-hero .crumbs { margin-bottom: 26px; }
.case-hero__client { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-bottom: 22px; }
.case-hero__client .eyebrow { margin: 0; }
.case-hero__logo { display: inline-grid; place-items: center; height: 64px; min-width: 64px; padding: 10px 16px; border-radius: 16px; background: #fff; box-shadow: 0 16px 40px -18px rgb(0 0 0 / .8); box-sizing: border-box; }
.case-hero__logo img { max-height: 44px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
.case-hero__logo.is-dark { background: #0b0f0e; border: 1px solid var(--line-2); }
.case-hero__title { font-size: clamp(2.6rem, 5.6vw, 5.4rem); line-height: .95; margin: 0; }
.case-hero__tagline { max-width: 44ch; margin: 22px 0 0; font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.55; color: rgb(255 255 255 / .86); }
.case-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin: 30px 0 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.case-specs > div { padding: 16px 18px 16px 0; min-width: 0; }
.case-specs > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.case-specs dt { margin-bottom: 6px; font: 700 .64rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--green-2); }
.case-specs dd { margin: 0; color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.35; }
.case-hero .btns { margin-top: 30px; }

/* Work in a camera frame */
.case-hero__media { min-width: 0; }
.case-screen { position: relative; padding: clamp(12px, 1.4vw, 18px); border-radius: 32px; background: linear-gradient(160deg, rgb(255 255 255 / .07), rgb(255 255 255 / .015)); border: 1px solid var(--line-2); box-shadow: 0 50px 100px -40px rgb(0 0 0 / .9), 0 0 80px -30px rgb(25 217 166 / .5); }
.case-screen--vertical { max-width: 390px; margin-inline: auto; }
.case-screen .video, .case-screen .frame { border-radius: 22px; box-shadow: none; }
.case-screen .video--vertical { max-width: none; }
.case-screen__corners i { position: absolute; z-index: 3; width: 26px; height: 26px; border: 2px solid var(--green-3); pointer-events: none; }
.case-screen__corners i:nth-child(1) { left: -8px; top: -8px; border-width: 2px 0 0 2px; border-top-left-radius: 12px; }
.case-screen__corners i:nth-child(2) { right: -8px; top: -8px; border-width: 2px 2px 0 0; border-top-right-radius: 12px; }
.case-screen__corners i:nth-child(3) { left: -8px; bottom: -8px; border-width: 0 0 2px 2px; border-bottom-left-radius: 12px; }
.case-screen__corners i:nth-child(4) { right: -8px; bottom: -8px; border-width: 0 2px 2px 0; border-bottom-right-radius: 12px; }
.case-screen__rec { position: absolute; z-index: 3; left: calc(clamp(12px, 1.4vw, 18px) + 14px); top: calc(clamp(12px, 1.4vw, 18px) + 14px); display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; background: rgb(5 6 6 / .6); backdrop-filter: blur(6px); font: 700 .62rem/1 var(--display); letter-spacing: .2em; color: #fff; pointer-events: none; }
.case-screen__rec i { width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 10px #ff4d4d; animation: rec 1s steps(2) infinite; }
.case-screen .video.is-playing ~ .case-screen__rec, .case-screen:has(.is-playing) .case-screen__rec { opacity: 0; }

/* Story */
.case-story__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(40px, 6vw, 90px); align-items: start; }
.case-story__main .h2 { margin: 10px 0 26px; }
.case-story__text { max-width: 68ch; font-size: 1.06rem; }
.case-more { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line); }
.case-more .eyebrow { margin-bottom: 10px; }
.case-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 40px; }
.case-step { position: relative; padding: 28px 26px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, rgb(255 255 255 / .035), rgb(255 255 255 / .01)); overflow: hidden; isolation: isolate; transition: border-color .4s var(--ease); }
.case-step:hover { border-color: var(--green-a40); }
.case-step__num { position: absolute; right: 18px; top: 10px; font: 800 3.4rem/1 var(--display); color: transparent; -webkit-text-stroke: 1px rgb(124 243 207 / .35); }
.case-step__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 14px; background: var(--green-a10); border: 1px solid var(--green-a40); color: var(--green-2); }
.case-step__icon .icon { width: 22px; height: 22px; }
.case-step__title { margin: 0 0 8px; font: 800 1.05rem/1.2 var(--display); text-transform: uppercase; color: #fff; }
.case-step__text { color: var(--muted); font-size: .96rem; line-height: 1.6; }
.case-step__text p { margin: 0 0 .7em; } .case-step__text p:last-child { margin: 0; }
.case-story__aside { position: sticky; top: clamp(96px, 13vh, 130px); }
.case-card { padding: 28px 26px; border-radius: var(--radius-lg); border: 1px solid var(--green-a40); background: radial-gradient(120% 60% at 0% 0%, rgb(25 217 166 / .14), transparent 60%), linear-gradient(180deg, #0c1513, #080b0a); box-shadow: 0 40px 80px -40px rgb(25 217 166 / .45); }
.case-card__label { margin: 0 0 12px; font: 700 .66rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--green-2); }
.case-card__label:not(:first-child) { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.case-card__list { margin: 0; }
.case-card__list li { font-size: .95rem; }
.case-card__services { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.case-card__services a { display: grid; grid-template-columns: 40px 1fr 18px; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgb(255 255 255 / .02); transition: border-color .3s, background .3s; }
.case-card__services a:hover { border-color: var(--green-a40); background: var(--green-a10); }
.case-card__services strong { display: block; font: 700 .86rem/1.2 var(--display); text-transform: uppercase; color: #fff; }
.case-card__services small { display: block; margin-top: 3px; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.case-card__services > li > a > .icon { width: 16px; color: var(--green-2); }
.case-card__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--green-a10); color: var(--green-2); }
.case-card__icon .icon { width: 20px; height: 20px; }
.case-card__note { margin: 0 0 20px; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.case-card__rating { margin-top: 16px; display: flex; justify-content: center; }

/* Behind the scenes: whole pictures, masonry */
.case-shots__grid { columns: 3 300px; column-gap: 18px; }
.case-shots__grid--1 { columns: 1; max-width: 980px; margin-inline: auto; }
.case-shots__grid--2 { columns: 2 320px; }
.case-shot { break-inside: avoid; margin: 0 0 18px; }
.case-shot .video, .case-shot .frame { border-radius: var(--radius); }

/* Client quote */
.case-quote__fig { position: relative; margin: 0; text-align: center; }
.case-quote__mark { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 22px; border-radius: 50%; background: rgb(255 255 255 / .08); color: var(--green-3); }
.case-quote__mark .icon { width: 28px; height: 28px; }
.case-quote blockquote { margin: 0; }
.case-quote blockquote p { margin: 0; font: 600 clamp(1.4rem, 2.6vw, 2.2rem)/1.35 var(--display); letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.case-quote figcaption { display: grid; gap: 4px; margin-top: 26px; }
.case-quote figcaption strong { color: #fff; font-weight: 700; }
.case-quote figcaption span { color: rgb(255 255 255 / .7); font-size: .92rem; }

/* Next project */
.case-next { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-2); background: #0a0f0d; transition: border-color .4s var(--ease); }
.case-next:hover { border-color: var(--green-a40); }
.case-next__bg { position: absolute; inset: -20%; z-index: -2; background: center / cover no-repeat; filter: blur(60px) saturate(1.4) brightness(.4); transform: scale(1.1); }
.case-next__bg img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.case-next::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 0% 100%, rgb(25 217 166 / .16), transparent 60%), linear-gradient(90deg, rgb(5 6 6 / .85), rgb(5 6 6 / .45)); }
.case-next__text { display: grid; gap: 12px; justify-items: start; min-width: 0; }
.case-next__label { font: 700 .7rem/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--green-2); }
.case-next__title { font: 800 clamp(2rem, 4.4vw, 4.2rem)/.98 var(--display); letter-spacing: -.03em; text-transform: uppercase; color: #fff; text-wrap: balance; transition: transform .6s var(--ease); }
.case-next:hover .case-next__title { transform: translateX(8px); }
.case-next__meta { color: rgb(255 255 255 / .72); font-size: .95rem; }
.case-next__go { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 13px 20px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .22); color: #fff; font: 700 .74rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; transition: background .35s, border-color .35s; }
.case-next__go .icon { width: 16px; transition: transform .4s var(--ease); }
.case-next:hover .case-next__go { background: var(--green); border-color: var(--green); }
.case-next:hover .case-next__go .icon { transform: translateX(4px); }
.case-next__media { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: #070909; box-shadow: 0 40px 80px -36px rgb(0 0 0 / .9), 0 0 0 1px rgb(255 255 255 / .08); }
.case-next__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1.2s var(--ease); }
.case-next:hover .case-next__media img { transform: scale(1.05); }
.case-next__play { position: absolute; left: 16px; bottom: 16px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgb(8 166 131 / .92); color: #fff; }
.case-next__play .icon { width: 16px; margin-left: 2px; }
.case-next__logo { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 58px; height: 58px; padding: 8px; border-radius: 14px; background: #fff; box-sizing: border-box; }
.case-next__logo.is-dark { background: #0b0f0e; border: 1px solid var(--line-2); }
.case-next__logo img { max-width: 100%; max-height: 40px; object-fit: contain; }
.case-next__prev { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; margin: 16px 4px 0; font-size: .9rem; }
.case-next__prev a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); transition: color .3s; }
.case-next__prev a:hover { color: #fff; }
.case-next__prev .icon { width: 16px; }

/* Featured project (archive) */
.case-feature { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 70px); align-items: center; padding: clamp(18px, 2.4vw, 30px); border-radius: 34px; border: 1px solid var(--green-a40); background: radial-gradient(90% 80% at 100% 0%, rgb(25 217 166 / .14), transparent 60%), linear-gradient(160deg, #0c1513, #070909); box-shadow: 0 60px 120px -60px rgb(25 217 166 / .5); overflow: hidden; isolation: isolate; }
.case-feature__media .video--vertical { max-width: 380px; max-height: 640px; margin-inline: auto; }
.case-feature__media .video, .case-feature__media .frame { border-radius: 24px; }
.case-feature__body { padding: clamp(6px, 2vw, 30px) clamp(6px, 2vw, 30px) clamp(6px, 2vw, 30px) 0; }
.case-feature__body .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.case-feature__star .icon { width: 14px; height: 14px; color: #f6c453; fill: #f6c453; }
.case-feature .case-hero__logo { margin: 8px 0 18px; }
.case-feature__title { margin: 0; font: 800 clamp(2rem, 4.4vw, 3.8rem)/.95 var(--display); letter-spacing: -.035em; text-transform: uppercase; color: #fff; }
.case-feature__meta { margin: 12px 0 0; color: var(--green-3); font: 700 .74rem/1.4 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.case-feature__text { max-width: 56ch; margin: 18px 0 0; color: var(--muted); font-size: 1.02rem; line-height: 1.6; }
.case-feature__figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 26px 0 28px; padding: 0; list-style: none; }
.case-feature__figures li { padding: 16px 16px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgb(255 255 255 / .03); }
.case-feature__figures strong { display: block; font: 800 clamp(1.5rem, 2.4vw, 2.2rem)/1 var(--display); letter-spacing: -.03em; color: #fff; }
.case-feature__figures span { display: block; margin-top: 6px; color: var(--muted); font-size: .82rem; line-height: 1.35; }

/* Archive grid */
.filters--sticky { position: sticky; top: 88px; z-index: 6; width: max-content; max-width: 100%; margin: 0 auto 36px; padding: 7px; border-radius: 999px; border: 1px solid var(--line-2); background: rgb(5 7 6 / .78); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 20px 40px -20px rgb(0 0 0 / .8); }
.filters--sticky .filters__btn { border-color: transparent; background: none; }
.filters--sticky .filters__btn.is-active { background: linear-gradient(135deg, var(--green-2), var(--green)); }
.filters__count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; margin-left: 8px; padding: 0 6px; border-radius: 999px; background: rgb(255 255 255 / .1); font-size: .64rem; letter-spacing: 0; }
.filters__btn.is-active .filters__count { background: rgb(0 0 0 / .2); }
.projects__cell.is-capped { display: none; }
.projects__more { display: grid; justify-items: center; gap: 12px; margin-top: 44px; }
.projects__more[hidden] { display: none; }
.projects__progress { margin: 0; color: var(--dim); font-size: .85rem; }
.pcard__cta { position: absolute; z-index: 2; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: rgb(5 6 6 / .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgb(255 255 255 / .18); color: #fff; font: 700 .7rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translate(-50%, -40%) scale(.92); transition: opacity .4s var(--ease), transform .5s var(--ease); pointer-events: none; }
.pcard__cta .icon { width: 14px; }
.pcard:hover .pcard__cta { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pcard:hover .pcard__play { opacity: 0; }

@media (max-width: 1060px) {
	.case-hero { min-height: 0; }
	.case-hero__inner, .case-hero__inner--vertical { grid-template-columns: 1fr; }
	.case-screen--vertical { max-width: 340px; }
	.case-story__grid { grid-template-columns: 1fr; }
	.case-story__aside { position: static; }
	.case-feature { grid-template-columns: 1fr; }
	.case-feature__body { padding: 4px 8px 12px; }
	.case-next { grid-template-columns: 1fr 1fr; }
	.filters--sticky { top: 76px; }
}
@media (max-width: 680px) {
	.case-specs { grid-template-columns: 1fr 1fr; }
	.case-specs > div { padding: 14px 12px 14px 0; }
	.case-specs > div + div { padding-left: 0; border-left: 0; }
	.case-specs > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
	.case-specs > div:nth-child(n+3) { border-top: 1px solid var(--line); }
	.case-hero__logo { height: 54px; }
	.case-next { grid-template-columns: 1fr; padding: 20px; gap: 22px; }
	.case-next__media { order: -1; }
	.case-feature__figures { grid-template-columns: 1fr 1fr; }
	.filters--sticky { top: 70px; width: 100%; border-radius: 22px; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
	.filters--sticky::-webkit-scrollbar { display: none; }
	.filters--sticky .filters__btn { flex: none; }
	.pcard__cta { display: none; }
}

/* Page header whose text is much taller than its visual: title full width, the
   visual beside the lead and buttons, proof (checks, rating) underneath */
@media (min-width: 1061px) {
	.hero__inner.is-stacked { row-gap: 0; }
	.hero__inner.is-stacked > .hero__content, .hero__inner.is-stacked > .hero__content > .hero__body { display: contents; }
	.hero__inner.is-stacked > .hero__content > :not(.hero__body) { grid-column: 1 / -1; justify-self: start; }
	.hero__inner.is-stacked .hero__extra { grid-column: 1 / -1; justify-self: stretch; }
	.hero__inner.is-stacked .hero__extra .hero__facts { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); max-width: none; }
	.hero__inner.is-stacked > .hero__content > .hero__title { max-width: 24ch; margin-bottom: clamp(26px, 3.6vh, 44px); }
	.hero__inner.is-stacked .hero__main { grid-column: 1; align-self: center; }
	.hero__inner.is-stacked > .hero__media { grid-column: 2; order: 1; }
	.hero__inner.is-stacked .hero__extra { order: 2; }
	.hero__inner.is-stacked .hero__extra > :first-child { margin-top: clamp(26px, 3.4vh, 40px); }
	.hero__inner.is-stacked .hero__extra .hero__checks { display: flex; flex-wrap: wrap; gap: 10px 26px; }
}

/* Contact forms: full-width submit, legal note underneath */
.form .form__foot { flex-direction: column; align-items: stretch; gap: 12px; }
.form .form__foot > button[type="submit"] { width: 100%; justify-content: center; }
.form .form__foot .form__legal { flex: none; text-align: center; }

/* ==========================================================================
   ARTICLES — En bref, sommaire, FAQ, sources + visual blocks for easy reading
   ========================================================================== */
.answer--post { display: block; margin: 0 0 34px; padding: clamp(22px, 3vw, 34px); }
.answer--post .answer__head { margin-bottom: 18px; }
.answer--post .answer__points { grid-template-columns: 1fr; }
.toc { margin: 0 0 40px; padding: 22px 26px; border-radius: var(--radius); border: 1px solid var(--line-2); background: rgb(255 255 255 / .025); }
.toc__title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 700 .72rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--green-2); }
.toc__title .icon { width: 16px; height: 16px; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 4px; }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: 12px; padding: 7px 10px; border-radius: 10px; color: var(--text); font-size: .98rem; line-height: 1.4; transition: background .25s, color .25s; }
.toc a::before { content: counter(toc, decimal-leading-zero); flex: none; font: 700 .78rem/1.6 var(--display); color: var(--green-2); }
.toc a:hover { background: var(--green-a10); color: #fff; }
.prose--article h2 { scroll-margin-top: 110px; }
.article__faq { margin-top: 56px; }
.article__faq-title { margin: 0 0 18px; font: 800 clamp(1.4rem, 2.4vw, 2rem)/1.12 var(--display); text-transform: uppercase; color: #fff; }
.article__faq .faq__item { margin-bottom: 10px; }
.article__sources { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.article__sources ol { margin: 10px 0 0; padding-left: 1.2em; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.article__sources a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.article__sources a:hover { color: #fff; }

/* Visual blocks */
.prose--article > * + :is(.callout, .keypoints, .stat-grid, .steps-list, .checklist, .pullquote, .bars, .cta-box, .post-figure, .pros-cons, .table-wrap) { margin-top: 1.8em; }
.prose--article :is(.callout, .keypoints, .stat-grid, .steps-list, .checklist, .pullquote, .bars, .cta-box, .post-figure, .pros-cons, .table-wrap) { margin-bottom: 1.8em; }
.prose .callout { position: relative; padding: 20px 24px 20px 58px; border-radius: 18px; border: 1px solid var(--line-2); background: rgb(255 255 255 / .03); --c: var(--green-2); }
.callout::before { content: ""; position: absolute; left: 20px; top: 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--c); -webkit-mask: var(--ico) center / 22px no-repeat; mask: var(--ico) center / 22px no-repeat; }
.callout--tip { --c: var(--green-2); border-color: rgb(25 217 166 / .35); background: linear-gradient(135deg, rgb(25 217 166 / .1), rgb(255 255 255 / .015)); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E"); }
.callout--warn { --c: #f6c453; border-color: rgb(246 196 83 / .35); background: linear-gradient(135deg, rgb(246 196 83 / .1), rgb(255 255 255 / .015)); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.callout--info { --c: #9fd8ff; border-color: rgb(159 216 255 / .3); background: linear-gradient(135deg, rgb(159 216 255 / .08), rgb(255 255 255 / .015)); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); }
.callout--example { --c: #c9a7ff; border-color: rgb(201 167 255 / .3); background: linear-gradient(135deg, rgb(201 167 255 / .08), rgb(255 255 255 / .015)); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); }
.callout__title { margin: 0 0 6px !important; font: 800 .78rem/1.2 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.callout p { margin: 0 0 .6em; font-size: 1rem; line-height: 1.65; }
.callout p:last-child { margin-bottom: 0; }
.prose .keypoints { padding: 24px 26px; border-radius: 20px; border: 1px solid var(--green-a40); background: radial-gradient(120% 90% at 0% 0%, rgb(25 217 166 / .14), transparent 60%), #0b1311; }
.keypoints__title { margin: 0 0 12px !important; font: 800 1rem/1.2 var(--display); text-transform: uppercase; color: #fff; }
.keypoints ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.keypoints li { position: relative; margin: 0; padding-left: 30px; font-size: 1rem; line-height: 1.55; }
.keypoints li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--green-2); font-weight: 700; }
.prose .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.prose .stat-box { padding: 20px 18px; border-radius: 18px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgb(255 255 255 / .04), rgb(255 255 255 / .01)); }
.stat-box strong { display: block; font: 800 clamp(1.8rem, 3.4vw, 2.6rem)/1 var(--display); letter-spacing: -.03em; background: linear-gradient(100deg, #fff, var(--green-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-box span { display: block; margin-top: 8px; color: var(--text); font-size: .92rem; line-height: 1.4; }
.stat-box small { display: block; margin-top: 8px; color: var(--dim); font-size: .74rem; line-height: 1.4; }
.steps-list { margin-left: 0 !important; padding: 0 !important; list-style: none !important; counter-reset: step; display: grid; gap: 12px; }
.steps-list > li { position: relative; margin: 0 !important; padding: 18px 20px 18px 74px; border-radius: 18px; border: 1px solid var(--line); background: rgb(255 255 255 / .025); counter-increment: step; }
.steps-list > li::before { content: counter(step); position: absolute; left: 18px; top: 16px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--green-2), var(--green)); color: #fff; font: 800 1.05rem/1 var(--display); box-shadow: 0 8px 20px -8px rgb(25 217 166 / .8); }
.steps-list > li strong:first-child { display: block; margin-bottom: 4px; color: #fff; font: 800 1rem/1.3 var(--display); text-transform: uppercase; }
.steps-list > li p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--muted); }
.prose .checklist { margin-left: 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 10px; }
.checklist li { position: relative; margin: 0 !important; padding: 12px 16px 12px 50px; border-radius: 14px; background: rgb(255 255 255 / .03); border: 1px solid var(--line); line-height: 1.5; }
.checklist li::before { content: ""; position: absolute; left: 14px; top: 13px; width: 22px; height: 22px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: 0 0 14px -2px rgb(25 217 166 / .7); }
.pullquote { margin-left: 0; margin-right: 0; padding: 28px 0 28px 30px !important; border: 0 !important; border-left: 3px solid var(--green-2) !important; background: none !important; border-radius: 0 !important; }
.pullquote p { margin: 0; font: 600 clamp(1.3rem, 2.4vw, 1.75rem)/1.35 var(--display) !important; letter-spacing: -.01em; color: #fff; }
.pullquote cite { display: block; margin-top: 12px; font: 400 .9rem/1.4 var(--body, inherit); font-style: normal; color: var(--muted); }
.prose .bars { padding: 22px 24px; border-radius: 20px; border: 1px solid var(--line-2); background: rgb(255 255 255 / .025); }
.prose .bars__title { margin: 0 0 16px !important; font: 800 .95rem/1.3 var(--display); text-transform: uppercase; color: #fff; }
.prose .bar { position: relative; display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 10px 14px; border-radius: 12px; overflow: hidden; isolation: isolate; font-size: .94rem; background: rgb(255 255 255 / .04); }
.prose .bar::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: calc(var(--v, 0) * 1%); border-radius: inherit; background: linear-gradient(90deg, rgb(8 166 131 / .55), rgb(25 217 166 / .35)); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease); }
.prose .bars.is-visible .bar::before, .no-js .prose .bar::before { transform: none; }
.js .prose .bars:not([data-reveal]) .bar::before { transform: none; }
.prose .bar__label { color: #fff; }
.prose .bar__value { font-weight: 700; color: var(--green-3); white-space: nowrap; }
.prose .bars__note { margin: 12px 0 0 !important; color: var(--dim); font-size: .8rem !important; }
.cta-box { position: relative; padding: 28px 28px; border-radius: 22px; border: 1px solid var(--green-a40); background: radial-gradient(90% 120% at 100% 0%, rgb(25 217 166 / .2), transparent 60%), linear-gradient(160deg, #0d1916, #070909); text-align: left; }
.cta-box__title { margin: 0 0 6px !important; font: 800 clamp(1.2rem, 2vw, 1.5rem)/1.15 var(--display); text-transform: uppercase; color: #fff; }
.cta-box p { margin: 0 0 16px; color: var(--muted); }
.prose a.cta-box__btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; background: linear-gradient(135deg, var(--green-2), var(--green)); color: #fff; text-decoration: none; font: 700 .78rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 12px 30px -12px rgb(25 217 166 / .8); transition: transform .3s var(--ease), box-shadow .3s; }
.prose a.cta-box__btn:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 18px 40px -14px rgb(25 217 166 / .9); }
.post-figure { margin-left: 0; margin-right: 0; }
.post-figure img, .post-figure picture img { display: block; width: 100%; height: auto; margin: 0; border-radius: 20px; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .8); }
.post-figure figcaption { margin-top: 10px; color: var(--dim); font-size: .85rem; line-height: 1.5; text-align: center; }
.prose .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pros-cons > div { padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line-2); background: rgb(255 255 255 / .025); }
.pros-cons__title { margin: 0 0 10px !important; font: 800 .82rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.pros .pros-cons__title { color: var(--green-2); }
.cons .pros-cons__title { color: #ff8a8a; }
.pros-cons ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pros-cons li { position: relative; margin: 0; padding-left: 24px; font-size: .96rem; line-height: 1.5; }
.pros li::before { content: "+"; position: absolute; left: 0; color: var(--green-2); font-weight: 800; }
.cons li::before { content: "–"; position: absolute; left: 0; color: #ff8a8a; font-weight: 800; }
.prose table.compare { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose table.compare th { padding: 14px 16px; text-align: left; font: 700 .76rem/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--green-2); background: rgb(25 217 166 / .08); border-bottom: 1px solid var(--green-a40); }
.prose table.compare td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.prose table.compare tr:last-child td { border-bottom: 0; }
.prose table.compare td:first-child { color: #fff; font-weight: 600; }
.prose table.compare tbody tr:hover td { background: rgb(255 255 255 / .02); }
@media (max-width: 680px) {
	.prose .pros-cons { grid-template-columns: 1fr; }
	.prose .callout { padding: 18px 18px 18px 52px; }
	.steps-list > li { padding: 16px 16px 16px 66px; }
	.toc { padding: 18px; }
}

/* Contact page: photo under the intro (left), contact details under the form (right) */
.contact__side { display: grid; gap: 18px; min-width: 0; }
.contact__side .contact__list { margin: 6px 0 0; }
.contact__info .contact__rating { margin: 22px 0 26px; }
.contact__info .contact__img { margin-top: 0; }
.contact__info .contact__img .frame { border-radius: var(--radius-lg); }
@media (min-width: 1061px) { .contact__info { position: sticky; top: 110px; } }
@media (max-width: 1060px) { .contact__side { display: contents; } .contact__side .contact__form { order: -1; } .contact__info { order: 0; } .contact__side .contact__list, .contact__side .assure { order: 1; } .contact__info .contact__img { max-width: 440px; } }

/* Horizontal scrollers never capture the vertical wheel (the page scrolls, not the strip) */
.carousel__track, .rail__viewport, .tabs__list, .filters--sticky, .table-wrap, .cards--bento { overflow-y: hidden; overscroll-behavior-y: auto; }
/* …with room for the glow and hover lift of the items (same layout: padding offset by negative margins) */
.carousel__track { padding-top: 48px; padding-bottom: 64px; margin-top: -38px; margin-bottom: -34px; }

/* Desktop nav: labels never wrap on narrower desktops */
.nav__link { white-space: nowrap; }
@media (min-width: 1061px) and (max-width: 1280px) {
	.nav__list { gap: clamp(2px, .6vw, 10px); }
	.nav__link { padding-inline: 9px; font-size: .72rem; letter-spacing: .08em; }
	.site-header__cta .btn__label { font-size: .7rem; }
}

/* Hero visual shown on desktop only (e.g. contact page photo) */
@media (max-width: 1060px) { .hero__media--desktop { display: none; } .hero__inner:has(.hero__media--desktop) { grid-template-columns: 1fr; } }
/* Contact section without photo: details in the left column */
.contact--noimg .contact__info .contact__list { margin-top: 0; }
.contact--noimg .contact__info .assure { margin-top: 24px; }
@media (min-width: 1061px) { .contact--noimg { align-items: start; } }

/* Contact page polish */
.section--contact .contact .shead :is(h1, h2) { font-size: clamp(2.1rem, 3.6vw, 3.4rem); }
@media (min-width: 1061px) {
	.contact--noimg .contact__info { position: static; }
	.contact--noimg .contact__side { position: sticky; top: 110px; align-self: start; }
	.mapbox { align-items: stretch; }
	.mapbox__map { aspect-ratio: auto; min-height: 380px; height: 100%; }
}

/* Short context texts: editorial two-column layout (title left, text right) */
.prose-ed { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.prose-ed__head { position: sticky; top: 120px; }
.prose-ed__head .shead { margin-bottom: 0; }
.prose-ed__body { position: relative; padding-left: clamp(24px, 3vw, 44px); }
.prose-ed__body::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--green-2), rgb(25 217 166 / .1)); }
.prose-ed__body > .prose { max-width: 62ch; }
.prose-ed__body > .prose > p:first-child { font-size: clamp(1.18rem, 1.6vw, 1.38rem); line-height: 1.55; color: #fff; font-weight: 500; }
.prose-ed__body > .prose > p:not(:first-child) { color: var(--muted); }
@media (max-width: 1060px) { .prose-ed { grid-template-columns: 1fr; gap: 26px; } .prose-ed__head { position: static; } }

/* Long uppercase words in narrow cards: French hyphenation instead of overflow */
:is(.card__title, .process__title, .stat__label, .feature-list__title, .case-step__title, .links__title, .words__item, .roas__client, .pcard__title) { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* Texts in sub-headings: lead + numbered chapter cards */
.prose-ch__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(36px, 6vw, 96px); align-items: end; margin-bottom: clamp(30px, 4vw, 48px); }
.prose-ch__top .shead { margin-bottom: 0; }
.prose-ch__top:not(:has(.prose-ch__lead)) { grid-template-columns: minmax(0, 900px); }
.prose-ch__lead p { margin: 0 0 .6em; font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.6; color: #fff; }
.prose-ch__lead p:last-child { margin-bottom: 0; }
.prose-ch__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.prose-ch__grid--1 { grid-template-columns: minmax(0, 860px); }
.prose-ch__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prose-ch__card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: clamp(26px, 3vw, 38px); border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(180deg, rgb(255 255 255 / .04), rgb(255 255 255 / .012)); transition: border-color .4s var(--ease), transform .5s var(--ease); }
.prose-ch__card:hover { border-color: var(--green-a40); }
.prose-ch__card.has-mark { background: radial-gradient(90% 80% at 100% 0%, rgb(25 217 166 / .14), transparent 60%), linear-gradient(180deg, rgb(255 255 255 / .045), rgb(255 255 255 / .012)); border-color: rgb(25 217 166 / .28); }
.prose-ch__mark { position: absolute; z-index: -1; right: -6px; bottom: -22px; font: 900 clamp(5rem, 9vw, 8.5rem)/1 var(--display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgb(124 243 207 / .16); pointer-events: none; }
.prose-ch__num { font: 700 .72rem/1 var(--display); letter-spacing: .22em; color: var(--green-2); }
.prose-ch__title { margin: 0; font: 800 clamp(1.15rem, 1.6vw, 1.45rem)/1.15 var(--display); text-transform: uppercase; letter-spacing: -.01em; color: #fff; max-width: 30ch; hyphens: manual; text-wrap: balance; }
.prose-ch__text p { margin: 0 0 .7em; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.prose-ch__text p:last-child { margin-bottom: 0; }
.prose-ch__text .checks { margin-top: 6px; }
@media (max-width: 1060px) { .prose-ch__top { grid-template-columns: 1fr; align-items: start; } .prose-ch__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .prose-ch__grid, .prose-ch__grid--3 { grid-template-columns: 1fr; } }

/* Industries served */
.ind { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 90px); align-items: start; }
.ind__intro { position: sticky; top: 120px; }
.ind__intro .shead { margin-bottom: 18px; }
.ind__text p { margin: 0 0 1em; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.ind__zone { display: grid; grid-template-columns: 46px 1fr; gap: 16px; margin: 6px 0 26px; padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--green-a40); background: radial-gradient(120% 120% at 0% 0%, rgb(25 217 166 / .14), transparent 60%), rgb(255 255 255 / .02); }
.ind__pin { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--green); color: #fff; box-shadow: 0 0 0 6px rgb(25 217 166 / .14), 0 0 24px rgb(25 217 166 / .5); }
.ind__pin .icon { width: 20px; height: 20px; }
.ind__zone-title { margin: 0 0 4px; font: 800 .95rem/1.2 var(--display); text-transform: uppercase; color: #fff; }
.ind__zone-text { margin: 0 0 12px; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.ind__regions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ind__regions li { padding: 6px 11px; border-radius: 999px; background: var(--green-a10); border: 1px solid var(--green-a20); color: var(--green-3); font: 700 .66rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.ind__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ind__tile { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; margin: 0; padding: 20px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, rgb(255 255 255 / .04), rgb(255 255 255 / .012)); transition: border-color .35s var(--ease), transform .45s var(--ease), background .35s; }
.ind__tile:hover { border-color: var(--green-a40); transform: translateY(-3px); background: linear-gradient(180deg, rgb(25 217 166 / .07), rgb(255 255 255 / .015)); }
.ind__tile--wide { grid-column: 1 / -1; }
.ind__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(145deg, rgb(25 217 166 / .26), rgb(8 166 131 / .06)); border: 1px solid var(--green-a40); color: var(--green-3); transition: background .35s, color .35s; }
.ind__tile:hover .ind__icon { background: var(--green); color: #fff; }
.ind__icon .icon { width: 21px; height: 21px; }
.ind__body strong { display: block; margin: 2px 0 4px; font: 800 .98rem/1.2 var(--display); text-transform: uppercase; color: #fff; }
.ind__body span { display: block; color: var(--muted); font-size: .9rem; line-height: 1.5; }
@media (max-width: 1060px) { .ind { grid-template-columns: 1fr; } .ind__intro { position: static; } }
@media (max-width: 560px) { .ind__grid { grid-template-columns: 1fr; } }

.prose-ch__card.is-wide { grid-column: 1 / -1; }
.prose-ch__card.is-wide .prose-ch__text > p { max-width: 82ch; }
.prose-ch__grid--1 .prose-ch__card.is-wide { grid-column: auto; }
.prose-ch__table { margin-top: 14px; border-radius: 16px; border: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; }
.prose-ch__table table.compare { width: 100%; border-collapse: collapse; font-size: .92rem; }
.prose-ch__table th { padding: 12px 16px; text-align: left; font: 700 .7rem/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--green-2); background: rgb(25 217 166 / .08); border-bottom: 1px solid var(--green-a40); }
.prose-ch__table td { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: middle; }
.prose-ch__table tr:last-child td { border-bottom: 0; }
.prose-ch__table code { font: 500 .86rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; background: none; padding: 0; }
.prose-ch__to, .prose-ch__keep { display: inline-flex; align-items: center; gap: 8px; }
.prose-ch__to .icon { width: 14px; color: var(--green-2); flex: none; }
.prose-ch__keep { padding: 4px 10px; border-radius: 999px; background: var(--green-a10); border: 1px solid var(--green-a20); color: var(--green-3); font: 700 .7rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.prose-ch__keep .icon { width: 12px; }
.section--prose .prose-ch__top .shead__intro { color: var(--muted); }

/* Hub: one platform, everything around it (no cards) */
.hub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.hub--reverse .hub__visual { order: -1; }
.hub__text p { margin: 0 0 1em; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.hub__text p:first-child { color: #fff; font-size: clamp(1.1rem, 1.5vw, 1.25rem); }
.hub__visual { position: relative; width: min(100%, 560px); aspect-ratio: 1; justify-self: center; }
.hub__visual::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgb(25 217 166 / .22), transparent 70%); filter: blur(20px); }
.hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub__ring { fill: none; stroke: rgb(124 243 207 / .18); stroke-width: .25; stroke-dasharray: 1 1.6; transform-origin: 50% 50%; animation: hub-spin 60s linear infinite; }
.hub__ring--inner { stroke: rgb(124 243 207 / .1); stroke-dasharray: none; animation: none; }
.hub__spoke { stroke: rgb(25 217 166 / .55); stroke-width: .3; stroke-dasharray: 2 3; animation: hub-flow 2.4s linear infinite; animation-delay: calc(var(--i) * -.4s); }
@keyframes hub-spin { to { transform: rotate(360deg); } }
@keyframes hub-flow { to { stroke-dashoffset: -10; } }
.hub__center { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: 6px; width: 38%; aspect-ratio: 1; place-content: center; text-align: center; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #1d7f66, #06291f 70%); box-shadow: 0 0 0 1px rgb(124 243 207 / .35), 0 0 60px rgb(25 217 166 / .45), inset 0 2px 0 rgb(255 255 255 / .12); }
.hub__center strong { font: 900 clamp(1rem, 1.7vw, 1.4rem)/1 var(--display); letter-spacing: -.02em; text-transform: uppercase; color: #fff; }
.hub__center small { max-width: 14ch; color: var(--green-3); font-size: .74rem; line-height: 1.3; }
.hub__pulse { position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgb(124 243 207 / .6); animation: hub-ping 3s var(--ease) infinite; }
@keyframes hub-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.hub__node { position: absolute; display: grid; justify-items: center; gap: 8px; transform: translate(-50%, -50%); }
.hub__dot { display: grid; place-items: center; width: clamp(46px, 5vw, 58px); aspect-ratio: 1; border-radius: 50%; background: #07120f; border: 1px solid var(--green-a40); color: var(--green-3); box-shadow: 0 0 22px -4px rgb(25 217 166 / .6); transition: background .35s, color .35s, transform .4s var(--ease); }
.hub__dot .icon { width: 42%; height: auto; }
.hub__node:hover .hub__dot { background: var(--green); color: #fff; transform: scale(1.08); }
.hub__label { font: 700 .68rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #fff; white-space: nowrap; text-shadow: 0 2px 10px #000; }
.js .hub__visual[data-reveal] .hub__node { opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(.3s + var(--i) * 90ms); }
.js .hub__visual[data-reveal].is-visible .hub__node { opacity: 1; transform: translate(-50%, -50%); }
@media (max-width: 1060px) { .hub { grid-template-columns: 1fr; } .hub--reverse .hub__visual { order: 0; } .hub__visual { width: min(100%, 440px); } }
@media (max-width: 480px) { .hub__label { font-size: .58rem; letter-spacing: .08em; } }
@media (prefers-reduced-motion: reduce) { .hub__ring, .hub__spoke, .hub__pulse { animation: none; } }

/* Mobile: step icons sit on the left of their text (process, case-study steps) */
@media (max-width: 680px) {
	.process__step { padding-top: 0; padding-left: 74px; min-height: 60px; }
	.process__dot { width: 54px; height: 54px; }
	.process__label { margin-top: 4px; }
	.case-step { display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; }
	.case-step__icon { grid-row: 1 / span 2; margin-bottom: 0; }
	.case-step__title { align-self: center; }
	.case-step__text { grid-column: 2; }
}

/* Mobile header: « Jase avec nous » next to the menu button */
.site-header__cta-m { display: none; }
@media (max-width: 1060px) {
	.site-header__cta-m { display: inline-flex; min-height: 44px; padding: 0 18px; font-size: .7rem; letter-spacing: .1em; white-space: nowrap; }
	.site-header__cta-m .btn__label[data-text] { line-height: 1; }
}
@media (max-width: 360px) { .site-header__cta-m { padding: 0 12px; font-size: .62rem; letter-spacing: .06em; } }
html.cmodal-open .site-header__cta-m, .drawer.is-open ~ * .site-header__cta-m { pointer-events: none; }
html.no-scroll, html.no-scroll body { overflow: hidden !important; touch-action: none; }
@media (prefers-reduced-motion: reduce) { .js [data-split] .w > span { animation: none !important; background: none !important; -webkit-text-fill-color: currentColor; } }

/* Responsive -------------------------------------------------------------------------------------- */
@media (max-width: 1180px) {
	.nav__link { padding-inline: 9px; font-size: .72rem; }
	.team { --cols: 4; }
	.roas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1060px) {
	.nav, .site-header__cta { display: none !important; }
	.burger { display: block; }
	.site-header__bar { grid-template-columns: 1fr auto auto; column-gap: 10px; padding: 8px 8px 8px 18px; }
	.brand { justify-self: start; }
	.mega { display: none !important; }
	.cards--cols-4 { grid-template-columns: repeat(2, 1fr); }
	.cards--cols-3 { grid-template-columns: repeat(2, 1fr); }
	.projects, .posts { grid-template-columns: repeat(2, 1fr); }
	.hero__inner:has(.hero__media), .split, .stats, .reviews, .faq, .contact, .mapbox, .tabs__panel, .longform--aside, .shead--split { grid-template-columns: 1fr; }
	.split--reverse .split__media { order: 0; }
	.faq__head, .longform__aside { position: static; }
	.process { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
	.process::before, .process::after { display: none; }
	.site-footer__top { grid-template-columns: 1fr 1fr; }
	.site-footer__brand { grid-column: 1 / -1; }
	.team { --cols: 3; }
	.tabs__media { order: -1; }
	.cards--bento { grid-template-columns: repeat(2, 1fr); }
	.cards--bento .card:nth-child(n) { grid-column: span 1; grid-row: auto; }
	.cards--bento .card:nth-child(1) { grid-column: span 2; }
}
@media (max-width: 680px) {
	body { font-size: 1rem; }
	.cards--bento { grid-template-columns: 1fr; }
	.cards--bento .card { grid-column: auto !important; grid-row: auto !important; }
	.cards--bento .card:nth-child(1) { min-height: 380px; }
	.cta__inner { grid-template-columns: 1fr; }
	.cta__orb { justify-self: start; }
	.vf__meta, .vf__focus, .vf__corner { display: none; }
	.vf { inset: 84px 20px auto; height: 20px; }
	.vf__rec { left: 0; top: 0; } .vf__tc { right: 0; top: 0; }
	.hero { padding-top: 128px; }
	.hero__eyebrow { letter-spacing: .14em; font-size: .66rem; }
	.hero--home .display { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
	.hero__scroll { display: none; }
	.cards--cols-2, .cards--cols-3, .cards--cols-4, .projects, .posts, .cases, .words, .form__grid { grid-template-columns: 1fr; }
	.card--wide { grid-column: auto; }
	.stats__list { grid-template-columns: 1fr 1fr; gap: 10px; }
	.stat { padding: 18px; }
	.team { --cols: 2; --gap: 12px; }
	.process { grid-template-columns: 1fr; }
	.hero { min-height: 0; padding-top: 120px; }
	.hero--home { min-height: 100svh; }
	.hero__facts { gap: 14px 20px; }
	.btns .btn { flex: 1 1 100%; }
	.faq__a { padding-right: 0; }
	.logos__item { width: 150px; height: 80px; padding: 14px 18px; }
	.logos__item img { max-height: 46px; }
	.tabs__list { justify-content: flex-start; width: 100%; }
	.site-footer__top { grid-template-columns: 1fr; }
	.consent__btns .btn { flex: 1; }
	.split__logo { width: 70%; }
	.hero__badge { left: 10px; }
	.roas { gap: 10px; }
	.reviews__list { grid-template-columns: 1fr; }
	.links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	.js [data-reveal], .js [data-split] .w > span { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
	.hero__bg-video { display: none; }
	body::before { display: none; }
}

@media print {
	.site-header, .site-footer, .consent, .progress, body::before, .hero__bg, .cta { display: none !important; }
	body { background: #fff; color: #000; }
	.heading, .h1, .h2 { color: #000; }
	.js [data-reveal], .js [data-split] .w > span { opacity: 1 !important; transform: none !important; }
}

/* Single internal link: a wide feature card instead of a lonely tile */
.links:has(> li:only-child) { grid-template-columns: minmax(0, 720px); }
.links:has(> li:only-child) .links__item { padding: 28px 30px; background: linear-gradient(135deg, rgb(8 166 131 / .14), rgb(255 255 255 / .02)); border-color: var(--green-a40); }
.links:has(> li:only-child) .links__title { font-size: 1.3rem; }
.links:has(> li:only-child) .links__text { font-size: .98rem; }
.site-footer__col a.rating { display: inline-flex; padding: 10px 16px 10px 12px; color: inherit; }
.site-footer__col a.rating:hover { padding-left: 12px; }

/* Mobile: services swipe horizontally instead of a long stack */
@media (max-width: 680px) {
	.cards--bento { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 18px; scrollbar-width: none; overscroll-behavior-x: contain; }
	.cards--bento::-webkit-scrollbar { display: none; }
	.cards--bento .card { flex: 0 0 84%; scroll-snap-align: center; min-height: 0 !important; }
	.cards--bento .card:nth-child(1) { min-height: 0 !important; }
}

/* Hero: the title (no reveal, see evo_heading( …, 'static' )) and the lead are
   the Largest Contentful Paint of most pages. They are visible from the first
   paint and only slide in (CSS, no wait for main.js, no fade from 0, which
   would delay the LCP). Hidden during the loader and the home video intro
   (humans only), then faded in. */
@keyframes hero-rise { from { transform: translateY(22px); } to { transform: none; } }
.js .hero [data-reveal]:not([data-reveal="clip"]) { opacity: 1; transform: none; transition: opacity .8s var(--ease); }
.hero .hero__title { transition: opacity .8s var(--ease); }
/* Same light gradient as the split titles, repeated on each line. */
.heading__t { background-image: linear-gradient(180deg, #ffffff 35%, #cfe2db 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (prefers-reduced-motion: no-preference) {
	.js .hero [data-reveal]:not([data-reveal="clip"]), .js .hero .hero__title { animation: hero-rise .9s var(--ease) calc(var(--d, 0) * 70ms) both; }
}
html:is(.is-loading, .hero-intro) .hero :is([data-reveal]:not([data-reveal="clip"]), .hero__title) { opacity: 0; animation: none; }

/* Folded complement (« En savoir plus », native <details>, no JS) -------------------- */
.fold { margin-top: 18px; border-top: 1px solid var(--line); interpolate-size: allow-keywords; }
.fold__summary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 0 4px; cursor: pointer; list-style: none; font: 700 .78rem/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--green-2); border-radius: 8px; transition: color .25s; -webkit-tap-highlight-color: transparent; }
.fold__summary::-webkit-details-marker { display: none; }
.fold__summary:hover { color: var(--green-3); }
.fold__summary:focus-visible { outline: 2px solid var(--green-2); outline-offset: 4px; }
.fold__icon { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--green-a40); background: var(--green-a10); transition: transform .45s var(--ease), background .3s, border-color .3s; }
.fold__icon .icon { width: 14px; height: 14px; }
.fold__summary:hover .fold__icon { border-color: var(--green-2); }
.fold[open] .fold__icon { transform: rotate(180deg); background: var(--green-a20); }
.fold::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
.fold[open]::details-content { block-size: auto; }
.fold__body { padding-top: 12px; color: var(--muted); font-size: .98rem; line-height: 1.65; text-align: left; }
.fold__body p { margin: 0 0 .9em; }
.fold__body p:last-child { margin-bottom: 0; }
.fold__body strong { color: var(--text); }
.shead__intro .fold { margin-top: 14px; }
:is(.split__body, .hub__body) > .fold { margin-bottom: 8px; }
.ind__intro > .fold { margin: 0 0 24px; }
.ind__text + .fold { margin-top: 4px; }
.fold--card { margin-top: 14px; }
.fold--card .fold__summary { padding-top: 12px; font-size: .72rem; }
.fold--card .fold__body { font-size: .92rem; }
.answer__text .fold { border-top-color: var(--green-a20); }
.prose .fold__body p { font-size: inherit; }
/* A sticky column never hides an opened fold below the screen */
.ind__intro:has(.fold[open]), .faq__head:has(.fold[open]) { position: static; }
@media (prefers-reduced-motion: reduce) { .fold::details-content { transition: none; } }

/* Video testimonials: no arrows over the videos on phones (swipe), progress bar kept */
@media (max-width: 760px) {
	.carousel__btn--side { display: none; }
}

/* « Lire la suite » on phones (main.js « Mobile condensing ») --------------------------
   Long texts show their first paragraph, the rest stays in the HTML behind a
   button; the hero lead is clamped to 3 lines. Without JS (no .js / no button)
   everything is visible; 'condense' => false on a section (.no-condense) opts out. */
.condense__more { display: none; align-items: center; gap: 10px; margin: 2px 0 6px; padding: 10px 0 4px; border: 0; background: none; cursor: pointer; font: 700 .76rem/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--green-2); text-align: left; border-radius: 8px; transition: color .25s; -webkit-tap-highlight-color: transparent; }
.condense__more:hover { color: var(--green-3); }
.condense__more:focus-visible { outline: 2px solid var(--green-2); outline-offset: 4px; }
.condense__more .fold__icon { width: 24px; height: 24px; }
.condense__more[aria-expanded="true"] .fold__icon { transform: rotate(180deg); background: var(--green-a20); }
@keyframes condense-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 680px) {
	.condense__more:not([hidden]) { display: inline-flex; }
	.is-condensed:not(.is-expanded) > [data-condensed] { display: none; }
	.js .section:not(.no-condense) .hero__lead:not(.is-expanded) > p:first-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.js .section:not(.no-condense) .hero__lead:not(.is-expanded) > p ~ p { display: none; }
	/* The hero button sits in space kept from the first paint (critical CSS):
	   most leads run past 3 lines on a phone, and the hero must not move when main.js adds it. */
	.js .section:not(.no-condense) .hero__lead { position: relative; padding-bottom: 34px; }
	.hero__lead > .condense__more { position: absolute; left: 0; bottom: 0; margin: 0; padding: 6px 0 0; font-size: .7rem; white-space: nowrap; }
	:is(.hero--home, .hero--center) .hero__lead > .condense__more { left: 50%; transform: translateX(-50%); }
	.hero__lead > .condense__more .fold__icon { width: 22px; height: 22px; }
}
@media (max-width: 680px) and (prefers-reduced-motion: no-preference) {
	.is-condensed.is-expanded > [data-condensed], .hero__lead.is-expanded > p ~ p { animation: condense-in .45s var(--ease) both; }
}

/* Retro mouse ('cursor' => 'retro' on a section): the custom dot + ring give way
   to a pixel-art Windows arrow (black, white outline, 2x), and the Windows hand on
   links and buttons. Native cursors (fine pointers only), so the size stays
   under the 128 px limit and nothing is drawn by script. */
@media (hover: hover) and (pointer: fine) {
	.section--cursor-retro, html.has-cursor .section--cursor-retro { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='38' viewBox='0 0 11 19' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 0h1v1H0zM0 1h2v1H0zM0 2h1v1H0zM2 2h1v1H2zM0 3h1v1H0zM3 3h1v1H3zM0 4h1v1H0zM4 4h1v1H4zM0 5h1v1H0zM5 5h1v1H5zM0 6h1v1H0zM6 6h1v1H6zM0 7h1v1H0zM7 7h1v1H7zM0 8h1v1H0zM8 8h1v1H8zM0 9h1v1H0zM9 9h1v1H9zM0 10h1v1H0zM10 10h1v1H10zM0 11h1v1H0zM7 11h4v1H7zM0 12h1v1H0zM4 12h1v1H4zM7 12h1v1H7zM0 13h1v1H0zM3 13h2v1H3zM7 13h1v1H7zM0 14h1v1H0zM2 14h1v1H2zM5 14h1v1H5zM8 14h1v1H8zM0 15h2v1H0zM5 15h1v1H5zM8 15h1v1H8zM0 16h1v1H0zM6 16h1v1H6zM9 16h1v1H9zM6 17h1v1H6zM9 17h1v1H9zM7 18h2v1H7z'/%3E%3Cpath d='M1 2h1v1H1zM1 3h2v1H1zM1 4h3v1H1zM1 5h4v1H1zM1 6h5v1H1zM1 7h6v1H1zM1 8h7v1H1zM1 9h8v1H1zM1 10h9v1H1zM1 11h6v1H1zM1 12h3v1H1zM5 12h2v1H5zM1 13h2v1H1zM5 13h2v1H5zM1 14h1v1H1zM6 14h2v1H6zM6 15h2v1H6zM7 16h2v1H7zM7 17h2v1H7z'/%3E%3C/svg%3E") 0 0, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAmCAYAAADAzmuWAAAAmklEQVR4nMzW0QrAIAiFYYPe/5VbFzshjnCVpv/NoAv5iNVWW496pUeGVXJqDLaW+4sBtZL7i5GV/J4Yncrvi9GuPE6MVuXxYvRXnkeMNHk+MZrJ84qRlOcTvzD7wVrqYMhmV0Oek6ft4fbg0z6D2Z4WsY6TRfwZd1fMpMeDrSurX1+512yd+By/Pbb+kx+DyaltbRNH89p7/AAAAP//U55ROAAAAAZJREFUAwAibFKwvniyxQAAAABJRU5ErkJggg==") 0 0, default; }
	.section--cursor-retro :is(a, button, summary, label, [role="button"]), html.has-cursor .section--cursor-retro :is(a, button) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='36' viewBox='0 0 16 18' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M5 0h2v1H5zM4 1h1v1H4zM7 1h1v1H7zM4 2h1v1H4zM7 2h1v1H7zM4 3h1v1H4zM7 3h1v1H7zM4 4h1v1H4zM7 4h3v1H7zM4 5h1v1H4zM7 5h1v1H7zM10 5h3v1H10zM4 6h1v1H4zM7 6h1v1H7zM10 6h1v1H10zM13 6h2v1H13zM1 7h2v1H1zM4 7h1v1H4zM7 7h1v1H7zM10 7h1v1H10zM13 7h1v1H13zM15 7h1v1H15zM0 8h1v1H0zM3 8h2v1H3zM15 8h1v1H15zM0 9h1v1H0zM4 9h1v1H4zM15 9h1v1H15zM1 10h1v1H1zM4 10h1v1H4zM15 10h1v1H15zM2 11h1v1H2zM15 11h1v1H15zM2 12h1v1H2zM14 12h1v1H14zM3 13h1v1H3zM14 13h1v1H14zM3 14h1v1H3zM13 14h1v1H13zM4 15h1v1H4zM13 15h1v1H13zM4 16h1v1H4zM13 16h1v1H13zM4 17h10v1H4z'/%3E%3Cpath d='M5 1h2v1H5zM5 2h2v1H5zM5 3h2v1H5zM5 4h2v1H5zM5 5h2v1H5zM8 5h2v1H8zM5 6h2v1H5zM8 6h2v1H8zM11 6h2v1H11zM5 7h2v1H5zM8 7h2v1H8zM11 7h2v1H11zM14 7h1v1H14zM1 8h2v1H1zM5 8h10v1H5zM1 9h3v1H1zM5 9h10v1H5zM2 10h2v1H2zM5 10h10v1H5zM3 11h12v1H3zM3 12h11v1H3zM4 13h10v1H4zM4 14h9v1H4zM5 15h8v1H5zM5 16h8v1H5z'/%3E%3C/svg%3E") 11 1, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAkCAYAAADo6zjiAAAAnklEQVR4nOyXSwrAIAxEI3j/K1s3U8RWUoj5SDM7QXTyTIxW+qjWNY5LF21QJWexUSDyOWAAkZJwJ5AG0oDYgPR+OJ/Ay/3QFvOKigGp1AxwZEAkDgGtbjcLy2I//27Idbt74mYgWD9uFQxnRS4GrFSR7atcUDdAznqEa0UifhVoaX5NxyNgXRX/yYHVTyp0LzDJhfyYnGNA613gTuACAAD//zrLX1cAAAAGSURBVAMAxKhIjTOPJHcAAAAASUVORK5CYII=") 11 1, pointer; }
	.cursor.is-retro { opacity: 0; }
}