/* =================================================================
   My Web Lab — Main stylesheet
   Tokens → Reset → Base → Layout → Components → Utilities
   ================================================================= */

/* ---------- TOKENS ---------- */
:root {
	/* Brand palette (extracted from WebGL bg snippet: #FF4824 primary + warm orange palette) */
	--c-brand:           #ff4824;
	--c-brand-2:         #ff6d00;
	--c-brand-3:         #ff8f00;
	--c-brand-4:         #ffa726;
	--c-brand-soft:      #ffcc80;
	--c-brand-glow:      #ff7900;

	/* Neutrals */
	--c-bg:              #efefef;          /* body bg from snippet */
	--c-bg-soft:         #f6f5f3;
	--c-bg-elev:         #ffffff;
	--c-bg-dark:         #0a0908;
	--c-bg-dark-2:       #131210;
	--c-bg-overlay:      rgba(10, 9, 8, 0.6);

	--c-text:            #0a0908;
	--c-text-soft:       #4a4946;
	--c-text-muted:      #8a8782;
	--c-text-inverse:    #ffffff;
	--c-text-inverse-soft: rgba(255,255,255,0.78);

	--c-border:          rgba(10,9,8,0.08);
	--c-border-strong:   rgba(10,9,8,0.16);
	--c-border-inverse:  rgba(255,255,255,0.12);

	/* States */
	--c-success: #1ea672;
	--c-warning: #e5a000;
	--c-danger:  #e53e3e;

	/* Typography */
	--ff-display: 'Syne', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ff-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ff-mono:    'JetBrains Mono', SFMono-Regular, Consolas, monospace;

	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-black: 900;

	--lh-tight: 1.05;
	--lh-snug:  1.2;
	--lh-base:  1.55;
	--lh-loose: 1.75;

	--ls-tight: -0.03em;
	--ls-snug:  -0.015em;
	--ls-base:  0;
	--ls-wide:  0.04em;
	--ls-extra: 0.12em;

	/* Type scale (fluid via clamp) */
	--fs-xs:  0.75rem;
	--fs-sm:  0.875rem;
	--fs-base: 1rem;
	--fs-md:  clamp(1.06rem, 0.95rem + 0.55vw, 1.18rem);
	--fs-lg:  clamp(1.25rem, 1.10rem + 0.85vw, 1.5rem);
	--fs-xl:  clamp(1.5rem,  1.25rem + 1.3vw,  1.85rem);
	--fs-2xl: clamp(1.9rem,  1.5rem + 2vw,    2.5rem);
	--fs-3xl: clamp(2.5rem,  1.85rem + 3.4vw, 3.75rem);
	--fs-4xl: clamp(3.25rem, 2.2rem + 5vw,    5.25rem);
	--fs-5xl: clamp(4rem,    2.5rem + 7.5vw,  7rem);
	--fs-6xl: clamp(5rem,    3rem + 10vw,    10rem);

	/* Spacing scale (0.25rem step, semantic names) */
	--sp-1:   0.25rem;
	--sp-2:   0.5rem;
	--sp-3:   0.75rem;
	--sp-4:   1rem;
	--sp-5:   1.25rem;
	--sp-6:   1.5rem;
	--sp-8:   2rem;
	--sp-10:  2.5rem;
	--sp-12:  3rem;
	--sp-16:  4rem;
	--sp-20:  5rem;
	--sp-24:  6rem;
	--sp-32:  8rem;
	--sp-40:  10rem;
	--sp-48:  12rem;

	/* Container width */
	--container-w: 1320px;
	--container-pad: clamp(1rem, 2vw, 2rem);

	/* Radius */
	--r-sm: 4px;
	--r-md: 10px;
	--r-lg: 20px;
	--r-xl: 32px;
	--r-pill: 999px;
	--r-circle: 50%;

	/* Shadows */
	--sh-sm: 0 1px 2px rgba(10,9,8,0.06);
	--sh-md: 0 4px 14px rgba(10,9,8,0.08);
	--sh-lg: 0 14px 36px rgba(10,9,8,0.12);
	--sh-glow: 0 0 40px rgba(255,72,36,0.25);

	/* Easing */
	--ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Durations */
	--d-fast: 160ms;
	--d-base: 280ms;
	--d-slow: 520ms;

	/* Z-index scale */
	--z-bg:        -1;
	--z-base:       0;
	--z-content:    1;
	--z-header:    50;
	--z-offcanvas: 90;
	--z-modal:    100;
	--z-toast:    200;

	/* Breakpoints (used via @media in this file; values mirrored in JS) */
	--bp-sm: 640px;
	--bp-md: 768px;
	--bp-lg: 1024px;
	--bp-xl: 1280px;
	--bp-2xl: 1536px;
}

/* ---------- RESET / NORMALIZE ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}

html { background: var(--c-bg); }
body {
	min-height: 100vh;
	min-height: 100svh;
	font-family: var(--ff-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-regular);
	line-height: var(--lh-base);
	color: var(--c-text);
	/* IMPORTANT: body transparent so fixed WebGL bg (z-index -1) is visible behind it.
	   Background color is on html element instead. */
	background: transparent;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--d-fast) var(--ease-out);
}
a:hover { color: var(--c-brand); }

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

ul, ol { list-style: none; }

input, textarea, select {
	font: inherit;
	color: inherit;
}

table { border-collapse: collapse; }

:where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--ff-display);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--c-text);
}

/* Selection */
::selection { background: var(--c-brand); color: var(--c-text-inverse); }
::-moz-selection { background: var(--c-brand); color: var(--c-text-inverse); }

/* Skip link / a11y */
.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important;
	width: 1px; word-wrap: normal !important;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	padding: 0.5rem 1rem; background: var(--c-text); color: var(--c-text-inverse);
}
.skip-link:focus { left: 0; }

:focus-visible {
	outline: 2px solid var(--c-brand);
	outline-offset: 3px;
	border-radius: var(--r-sm);
}

/* ---------- LAYOUT ---------- */
.container {
	width: 100%;
	max-width: var(--container-w);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}
.container--narrow { max-width: 880px; }
.container--wide   { max-width: 1480px; }

.site-main { position: relative; z-index: var(--z-content); padding-top: clamp(80px, 10vh, 120px); }

/* ---------- WEBGL BACKGROUND (snippet 27251) ---------- */
.webgl-background {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: var(--z-bg);
	overflow: hidden;
	transform: translateZ(0);
	backface-visibility: hidden;
	will-change: transform;
	pointer-events: none;
}
.webgl-background canvas {
	display: block;
	width: 100%;
	height: 100%;
	transform: scale(1.15);
}
.webgl-background::before {
	content: "";
	position: fixed;
	inset: 0;
	transform: translateZ(0);
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 180px 180px;
	animation: mwl-noise 1.5s steps(2) infinite;
	opacity: 0.4;
	pointer-events: none;
	z-index: 10;
}
@keyframes mwl-noise {
	0%   { transform: translate3d(0, 9rem, 0); }
	10%  { transform: translate3d(-1rem, -4rem, 0); }
	20%  { transform: translate3d(-8rem, 2rem, 0); }
	30%  { transform: translate3d(9rem, -9rem, 0); }
	40%  { transform: translate3d(-2rem, 7rem, 0); }
	50%  { transform: translate3d(-9rem, -4rem, 0); }
	60%  { transform: translate3d(2rem, 6rem, 0); }
	70%  { transform: translate3d(7rem, -8rem, 0); }
	80%  { transform: translate3d(-9rem, 1rem, 0); }
	90%  { transform: translate3d(6rem, -5rem, 0); }
	100% { transform: translate3d(-7rem, 0, 0); }
}
.webgl-fade-overlay {
	position: fixed;
	inset: 0;
	background: var(--c-bg);
	transform: translateZ(0);
	opacity: 0;
	z-index: var(--z-base);
	pointer-events: none;
	will-change: opacity;
	transition: opacity var(--d-base) var(--ease-out);
}
.has-dark-hero .webgl-fade-overlay { background: var(--c-bg-dark); }
@media (prefers-reduced-motion: reduce) {
	.webgl-background::before { animation: none; opacity: 0.15; }
}

/* ---------- HEADER ---------- */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--z-header);
	transition: background-color var(--d-base) var(--ease-out), backdrop-filter var(--d-base) var(--ease-out);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
	padding-block: var(--sp-5);
}
.site-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	font-family: var(--ff-display);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-snug);
	font-size: var(--fs-lg);
	color: var(--c-text);
}
.site-logo a { display: inline-flex; align-items: center; gap: var(--sp-3); color: inherit; }
.site-logo__mark { flex: none; width: 64px; height: 32px; }
.site-logo__wordmark { line-height: 1; }

.has-dark-hero .site-header .site-logo,
.has-dark-hero .site-header .menu--primary a { color: var(--c-text-inverse); }
.site-header.is-scrolled {
	background: rgba(239,239,239,0.85);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
}
.has-dark-hero .site-header.is-scrolled {
	background: rgba(10,9,8,0.7);
}

.site-header__nav { display: flex; align-items: center; }
.menu--primary {
	display: none;
	gap: var(--sp-8);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}
.menu--primary a { position: relative; padding-block: var(--sp-2); }
.menu--primary a::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--d-base) var(--ease-out);
}
.menu--primary a:hover::after,
.menu--primary a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

@media (min-width: 1024px) {
	.menu--primary { display: inline-flex; }
}

.site-header__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-5);
	border: 1px solid var(--c-text);
	border-radius: var(--r-pill);
	font-family: var(--ff-display);
	font-weight: var(--fw-medium);
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-wide);
	color: var(--c-text);
	transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.has-dark-hero .site-header__toggle { border-color: var(--c-text-inverse); color: var(--c-text-inverse); }
.site-header__toggle:hover { background: var(--c-text); color: var(--c-bg); }
.has-dark-hero .site-header__toggle:hover { background: var(--c-text-inverse); color: var(--c-text); }
.site-header__toggle-icon {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	width: 16px;
}
.site-header__toggle-icon span {
	display: block;
	height: 1.5px;
	background: currentColor;
	border-radius: 2px;
}

/* ---------- OFF-CANVAS MENU ---------- */
.offcanvas {
	position: fixed;
	inset: 0;
	z-index: var(--z-offcanvas);
	visibility: hidden;
	pointer-events: none;
}
.offcanvas[aria-hidden="false"] { visibility: visible; pointer-events: auto; }

.offcanvas__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10,9,8,0.55);
	opacity: 0;
	transition: opacity var(--d-base) var(--ease-out);
}
.offcanvas[aria-hidden="false"] .offcanvas__backdrop { opacity: 1; }

.offcanvas__panel {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--c-bg-dark);
	color: var(--c-text-inverse);
	transform: translateY(-100%);
	transition: transform var(--d-slow) var(--ease-out);
	overflow-y: auto;
	padding: var(--sp-8) var(--sp-8) var(--sp-12);
	gap: var(--sp-10);
}
.offcanvas[aria-hidden="false"] .offcanvas__panel { transform: translateY(0); }
.offcanvas__panel { max-width: 100vw; }

.offcanvas__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.offcanvas__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	border-radius: var(--r-circle);
	border: 1px solid var(--c-border-inverse);
	color: var(--c-text-inverse);
	transition: background var(--d-fast) var(--ease-out);
}
.offcanvas__close:hover { background: rgba(255,255,255,0.08); }

.offcanvas__col-title {
	font-family: var(--ff-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-extra);
	text-transform: uppercase;
	color: var(--c-text-inverse-soft);
	margin-bottom: var(--sp-6);
}
.offcanvas__body {
	display: grid;
	gap: var(--sp-10);
	max-width: 1320px;
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--container-pad);
	flex: 1;
	align-content: center;
	text-align: center;
}
@media (min-width: 768px) {
	.offcanvas__body { grid-template-columns: 1fr 1fr; text-align: left; }
}
.offcanvas__list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}
.offcanvas__list a {
	display: inline-block;
	font-family: var(--ff-display);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-tight);
	line-height: 1;
	color: var(--c-text-inverse);
	transition: color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.offcanvas__list a:hover { color: var(--c-brand); }
@media (min-width: 768px) {
	.offcanvas__list a:hover { transform: translateX(6px); }
}
.offcanvas__footer {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
}
.offcanvas__social {
	display: flex;
	gap: var(--sp-4);
}
.offcanvas__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: var(--r-circle);
	border: 1px solid var(--c-border-inverse);
	color: var(--c-text-inverse);
	transition: background var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.offcanvas__social a:hover { background: var(--c-brand); border-color: var(--c-brand); }

/* lock body when offcanvas open */
body.offcanvas-open { overflow: hidden; }

/* ---------- BUTTONS ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-6);
	border-radius: var(--r-pill);
	font-family: var(--ff-display);
	font-weight: var(--fw-medium);
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background var(--d-fast) var(--ease-out),
		color      var(--d-fast) var(--ease-out),
		transform  var(--d-fast) var(--ease-out),
		box-shadow var(--d-fast) var(--ease-out),
		border-color var(--d-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary {
	background: var(--c-text);
	color: var(--c-bg);
}
.btn--primary:hover {
	background: var(--c-brand);
	color: var(--c-text-inverse);
	box-shadow: var(--sh-glow);
}
.btn--ghost {
	background: transparent;
	color: var(--c-text);
	border: 1px solid var(--c-text);
}
.btn--ghost:hover { background: var(--c-text); color: var(--c-bg); }
.btn--brand {
	background: var(--c-brand);
	color: var(--c-text-inverse);
}
.btn--brand:hover { background: var(--c-text); color: var(--c-text-inverse); }
.btn--large {
	padding: var(--sp-5) var(--sp-8);
	font-size: var(--fs-base);
}
.btn--small {
	padding: var(--sp-3) var(--sp-5);
	font-size: var(--fs-xs);
}
.btn .icon { transition: transform var(--d-fast) var(--ease-out); }
.btn:hover .icon { transform: translateX(4px); }

/* ---------- SECTIONS / EYEBROW / HEADINGS ---------- */
.section { padding-block: clamp(4rem, 8vw, 8rem); position: relative; }
.section--dark { background: var(--c-bg-dark); color: var(--c-text-inverse); }
.section--soft { background: var(--c-bg-soft); }

.section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	font-family: var(--ff-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-extra);
	text-transform: uppercase;
	color: var(--c-brand);
}
.section-eyebrow__line {
	display: inline-block;
	width: 36px; height: 1px;
	background: currentColor;
}

.section-title {
	font-size: var(--fs-3xl);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	margin-block: var(--sp-3) var(--sp-6);
}
.section-title em, .section-title .accent { color: var(--c-brand); font-style: normal; }
.section-lead {
	font-size: var(--fs-md);
	color: var(--c-text-soft);
	max-width: 680px;
}

/* ---------- PROSE (blog content) ---------- */
.prose {
	max-width: 760px;
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
	color: var(--c-text);
}
.prose > * + * { margin-top: var(--sp-5); }
.prose h2 { font-size: var(--fs-2xl); margin-top: var(--sp-12); margin-bottom: var(--sp-4); }
.prose h3 { font-size: var(--fs-xl); margin-top: var(--sp-10); margin-bottom: var(--sp-3); }
.prose h4 { font-size: var(--fs-lg); margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.prose p  { color: var(--c-text-soft); }
.prose strong { color: var(--c-text); font-weight: var(--fw-semibold); }
.prose a {
	color: var(--c-brand);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.prose a:hover { color: var(--c-text); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--sp-2); }
.prose blockquote {
	border-left: 3px solid var(--c-brand);
	padding-left: var(--sp-5);
	font-size: var(--fs-lg);
	color: var(--c-text);
	font-style: italic;
}
.prose code {
	font-family: var(--ff-mono);
	font-size: 0.92em;
	padding: 2px 6px;
	background: var(--c-bg-soft);
	border-radius: var(--r-sm);
}
.prose pre {
	font-family: var(--ff-mono);
	font-size: 0.92em;
	padding: var(--sp-5);
	background: var(--c-bg-dark);
	color: var(--c-text-inverse);
	border-radius: var(--r-md);
	overflow-x: auto;
}
.prose figure img { border-radius: var(--r-md); }
.prose figcaption { font-size: var(--fs-sm); color: var(--c-text-muted); text-align: center; margin-top: var(--sp-2); }
.prose details {
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	padding: var(--sp-5);
}
.prose details + details { margin-top: var(--sp-3); }
.prose summary {
	cursor: pointer;
	font-weight: var(--fw-semibold);
	color: var(--c-text);
}

/* ---------- HERO HOME ---------- */
.hero-home {
	min-height: 88vh;
	padding-block: clamp(4rem, 10vh, 9rem) clamp(3rem, 7vh, 6rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}
.hero-home__title {
	font-family: var(--ff-display);
	font-size: var(--fs-6xl);
	font-weight: var(--fw-semibold);
	line-height: 0.95;
	letter-spacing: var(--ls-tight);
	color: var(--c-text);
	margin-bottom: var(--sp-8);
}
.hero-home__title-line {
	display: block;
	overflow: hidden;
}
.hero-home__title-line[data-align="center"] { text-align: center; }
.hero-home__title-line[data-align="right"]  { text-align: right; }
.hero-home__title-word {
	display: inline-block;
	transform: translateY(105%);
	will-change: transform;
}
.hero-home__title.is-revealed .hero-home__title-word {
	transform: translateY(0);
	transition: transform 1s var(--ease-out);
}
.hero-home__title.is-revealed .hero-home__title-line:nth-child(2) .hero-home__title-word { transition-delay: 0.18s; }
.hero-home__title.is-revealed .hero-home__title-line:nth-child(3) .hero-home__title-word { transition-delay: 0.36s; }

.hero-home__lead {
	max-width: 460px;
	margin-left: auto;
	font-size: var(--fs-md);
	color: var(--c-text-soft);
}

/* ---------- MARQUEE ---------- */
.marquee {
	position: relative;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	padding-block: var(--sp-4);
}
.marquee__track {
	display: flex;
	gap: var(--sp-12);
	width: max-content;
	animation: mwl-marquee 36s linear infinite;
}
.marquee__item {
	font-family: var(--ff-display);
	font-size: clamp(1.5rem, 3vw, 3.5rem);
	font-weight: var(--fw-semibold);
	color: var(--c-text);
	letter-spacing: var(--ls-snug);
	white-space: nowrap;
}
.marquee__item--brand { color: var(--c-brand); }
.marquee__item--outline {
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1px var(--c-text);
	color: transparent;
}
.marquee--reverse .marquee__track { animation-direction: reverse; animation-duration: 48s; }
@keyframes mwl-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.marquee__track { animation: none; }
}

/* ---------- SERVICES LIST (homepage) ---------- */
.services-list { display: flex; flex-direction: column; }
.service-row {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: var(--sp-6);
	align-items: start;
	padding-block: var(--sp-8);
	border-top: 1px solid var(--c-border);
	color: var(--c-text);
	transition: padding-inline var(--d-base) var(--ease-out);
}
.section--dark .service-row { border-top-color: var(--c-border-inverse); color: var(--c-text-inverse); }
.service-row:last-child { border-bottom: 1px solid var(--c-border); }
.section--dark .service-row:last-child { border-bottom-color: var(--c-border-inverse); }
.service-row:hover { padding-inline: var(--sp-4); }
.service-row__num {
	font-family: var(--ff-mono);
	font-size: var(--fs-xs);
	color: var(--c-brand);
	padding-top: var(--sp-2);
}
.service-row__body { display: grid; grid-template-columns: 1fr 2fr auto; gap: var(--sp-6); align-items: start; }
.service-row__title {
	font-family: var(--ff-display);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-snug);
}
.service-row__desc {
	font-size: var(--fs-base);
	color: var(--c-text-soft);
}
.section--dark .service-row__desc { color: var(--c-text-inverse-soft); }
.service-row__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px; height: 56px;
	border-radius: var(--r-circle);
	border: 1px solid currentColor;
	color: currentColor;
	opacity: 0.5;
	transition: opacity var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.service-row:hover .service-row__arrow {
	opacity: 1;
	background: var(--c-brand);
	color: var(--c-text-inverse);
	border-color: var(--c-brand);
}
@media (max-width: 768px) {
	.service-row__body { grid-template-columns: 1fr; }
	.service-row__arrow { justify-self: end; width: 48px; height: 48px; }
}

/* ---------- PORTFOLIO CARDS (homepage preview) ---------- */
.portfolio-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-6); }
.portfolio-card {
	position: relative;
	display: block;
	aspect-ratio: 4/3;
	overflow: hidden;
	border-radius: var(--r-md);
	background: var(--c-bg-dark);
}
.portfolio-card img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform var(--d-slow) var(--ease-out);
}
.portfolio-card:hover img { transform: scale(1.06); }
.portfolio-card__overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: var(--sp-5);
	color: var(--c-text-inverse);
	background: linear-gradient(180deg, transparent, rgba(10,9,8,0.85));
}
.portfolio-card__cat {
	display: inline-block;
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-brand-soft);
	margin-bottom: var(--sp-2);
}
.portfolio-card__title {
	font-family: var(--ff-display);
	font-size: var(--fs-xl);
	font-weight: var(--fw-semibold);
}
.portfolio-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--c-brand);
}

/* ---------- TEAM ---------- */
.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sp-8);
}
.team-card { text-align: center; }
.team-card__photo {
	width: 100%;
	aspect-ratio: 4/5;
	object-fit: cover;
	border-radius: var(--r-md);
	margin-bottom: var(--sp-5);
}
.team-card__name {
	font-family: var(--ff-display);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
}
.team-card__role {
	font-size: var(--fs-sm);
	color: var(--c-text-soft);
}

/* ---------- CLIENTS MARQUEE ---------- */
.clients-marquee {
	background: var(--c-bg-soft);
	padding-block: var(--sp-12);
	position: relative;
}
.clients-marquee__track {
	display: flex;
	align-items: center;
	gap: var(--sp-16);
	width: max-content;
	animation: mwl-marquee 42s linear infinite;
}
.clients-marquee__item {
	flex: none;
	max-height: 60px;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter var(--d-fast) var(--ease-out), opacity var(--d-fast) var(--ease-out);
}
.clients-marquee__item:hover { filter: grayscale(0); opacity: 1; }

/* ---------- PILLARS SECTION (5 articles dark with particles bg) ---------- */
.pillars {
	position: relative;
	background: var(--c-bg-dark);
	color: var(--c-text-inverse);
	overflow: hidden;
}
.pillars__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.6;
}
.pillars__bg video {
	width: 100%; height: 100%; object-fit: cover;
}
.pillars__list {
	position: relative;
	z-index: 1;
}
.pillar {
	min-height: 80vh;
	display: flex;
	align-items: center;
	padding-block: var(--sp-20);
}
.pillar__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-8);
	max-width: 800px;
	padding-inline: var(--container-pad);
}
.pillar__title {
	font-family: var(--ff-display);
	font-size: var(--fs-4xl);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-tight);
	color: var(--c-brand);
}
.pillar__text {
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
	color: var(--c-text-inverse-soft);
}
.pillar__text .word {
	display: inline-block;
	opacity: 0.2;
	transition: opacity var(--d-base) var(--ease-out);
}
.pillar__text .word.is-on { opacity: 1; }

.pillars__progress {
	position: fixed;
	right: var(--sp-6);
	top: 50%;
	transform: translateY(-50%);
	z-index: var(--z-content);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--d-base) var(--ease-out);
}
.pillars__progress.is-active { opacity: 1; pointer-events: auto; }
.pillars__progress a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--ff-mono);
	font-size: var(--fs-xs);
	color: var(--c-text-inverse-soft);
}
.pillars__progress a::after {
	content: '';
	display: inline-block;
	width: 36px;
	height: 1px;
	background: currentColor;
	opacity: 0.4;
}
.pillars__progress a.is-current { color: var(--c-brand); }
.pillars__progress a.is-current::after { background: var(--c-brand); opacity: 1; }

/* ---------- CTA FINAL ---------- */
.cta-final {
	text-align: center;
	padding-block: clamp(6rem, 12vw, 12rem);
}
.cta-final__eyebrow { display: inline-block; margin-bottom: var(--sp-4); }
.cta-final__title {
	font-family: var(--ff-display);
	font-size: var(--fs-5xl);
	font-weight: var(--fw-semibold);
	line-height: 0.95;
	letter-spacing: var(--ls-tight);
	color: var(--c-text);
	margin-bottom: var(--sp-6);
}
.cta-final__title a { color: var(--c-brand); }
.cta-final__lead {
	max-width: 540px;
	margin: 0 auto var(--sp-8);
	color: var(--c-text-soft);
}

/* ---------- FOOTER ---------- */
.site-footer {
	background: var(--c-bg-dark);
	color: var(--c-text-inverse);
	padding-top: clamp(4rem, 8vw, 8rem);
	position: relative;
	z-index: var(--z-content);
}
.site-footer__inner {
	display: grid;
	gap: var(--sp-10);
	grid-template-columns: 1.4fr 1fr 1fr;
	padding-bottom: var(--sp-12);
}
@media (max-width: 768px) { .site-footer__inner { grid-template-columns: 1fr; } }
.site-footer__brand .site-logo { color: var(--c-text-inverse); margin-bottom: var(--sp-5); }
.site-footer__about {
	color: var(--c-text-inverse-soft);
	font-size: var(--fs-sm);
	max-width: 36ch;
	margin-bottom: var(--sp-5);
}
.site-footer__social { display: flex; gap: var(--sp-3); }
.site-footer__social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid var(--c-border-inverse);
	border-radius: var(--r-circle);
	color: var(--c-text-inverse);
	transition: background var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.site-footer__social a:hover { background: var(--c-brand); border-color: var(--c-brand); }
.site-footer__col-title {
	font-family: var(--ff-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-extra);
	text-transform: uppercase;
	color: var(--c-text-inverse-soft);
	margin-bottom: var(--sp-5);
}
.contact-list dt {
	font-size: var(--fs-xs);
	color: var(--c-text-inverse-soft);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	margin-top: var(--sp-4);
}
.contact-list dd { font-size: var(--fs-base); margin-bottom: var(--sp-1); }
.site-footer__menu { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-sm); }
.site-footer__menu a:hover { color: var(--c-brand); }
.site-footer__bottom {
	border-top: 1px solid var(--c-border-inverse);
	padding-block: var(--sp-6);
}
.site-footer__bottom-inner {
	display: flex; flex-wrap: wrap; gap: var(--sp-4);
	align-items: center; justify-content: space-between;
	font-size: var(--fs-xs);
	color: var(--c-text-inverse-soft);
}
.site-footer__legal { display: flex; gap: var(--sp-5); }
.site-footer__legal a:hover { color: var(--c-text-inverse); }

/* ---------- BLOG POSTS GRID ---------- */
.archive-hero { padding-block: clamp(4rem, 8vw, 6rem); }
.archive-hero__title {
	font-size: var(--fs-4xl);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-tight);
	margin-block: var(--sp-3) var(--sp-4);
}
.archive-hero__lead { max-width: 640px; color: var(--c-text-soft); }
.cat-pills { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.cat-pill {
	padding: var(--sp-2) var(--sp-4);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-pill);
	font-size: var(--fs-sm);
	color: var(--c-text-soft);
	transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.cat-pill:hover { color: var(--c-text); border-color: var(--c-text); }
.cat-pill.is-active { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }
.archive-list { padding-bottom: clamp(4rem, 8vw, 6rem); }
.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--sp-8);
}

.card-post { background: var(--c-bg-elev); border-radius: var(--r-md); overflow: hidden; transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); }
.card-post:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.card-post__thumb { aspect-ratio: 4/3; overflow: hidden; }
.card-post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--ease-out); }
.card-post:hover .card-post__thumb img { transform: scale(1.04); }
.card-post__body { padding: var(--sp-5); }
.card-post__category { display: inline-block; font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-brand); margin-bottom: var(--sp-2); }
.card-post__title { font-family: var(--ff-display); font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin-bottom: var(--sp-3); }
.card-post__excerpt { font-size: var(--fs-sm); color: var(--c-text-soft); line-height: var(--lh-base); margin-bottom: var(--sp-4); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-post__meta { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: var(--c-text-muted); }
.card-post__arrow { display: inline-flex; align-items: center; }

.pagination { margin-top: var(--sp-12); display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: var(--sp-2); }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px;
	border-radius: var(--r-circle);
	border: 1px solid var(--c-border);
	color: var(--c-text-soft);
	font-size: var(--fs-sm);
}
.pagination .page-numbers.current { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }

/* ---------- 404 ---------- */
.error-404 { padding-block: clamp(6rem, 12vw, 12rem); text-align: center; }
.error-404__code { font-family: var(--ff-display); font-size: clamp(6rem, 18vw, 14rem); color: var(--c-brand); line-height: 1; }
.error-404__title { font-size: var(--fs-3xl); margin-bottom: var(--sp-4); }
.error-404__lead { color: var(--c-text-soft); margin-bottom: var(--sp-8); }
.error-404__actions { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-8); }
.error-404__search { display: inline-flex; gap: var(--sp-2); }

/* ---------- SEARCH FORM ---------- */
.search-form {
	display: flex; gap: var(--sp-2);
	max-width: 460px; margin-top: var(--sp-6);
}
.search-form input[type="search"] {
	flex: 1;
	padding: var(--sp-3) var(--sp-5);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-pill);
	background: var(--c-bg-elev);
	font-size: var(--fs-base);
}
.search-form input[type="search"]:focus { outline: none; border-color: var(--c-brand); }

/* ---------- SINGLE POST EXTRAS ---------- */
.single-post__header { padding-block: clamp(3rem, 6vw, 5rem) var(--sp-8); }
.single-post__category { color: var(--c-brand); font-size: var(--fs-sm); letter-spacing: var(--ls-wide); text-transform: uppercase; margin-bottom: var(--sp-3); display: inline-block; }
.single-post__title { font-size: var(--fs-4xl); max-width: 920px; margin-bottom: var(--sp-5); }
.single-post__meta { color: var(--c-text-muted); font-size: var(--fs-sm); display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.single-post__sep { opacity: 0.5; }
.single-post__hero { margin-bottom: var(--sp-10); }
.single-post__hero img { border-radius: var(--r-md); aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.single-post__layout { display: grid; gap: var(--sp-12); grid-template-columns: 1fr; padding-bottom: var(--sp-16); }
@media (min-width: 1024px) { .single-post__layout { grid-template-columns: 1fr 280px; } }
.single-post__sidebar-sticky { position: sticky; top: 120px; }
.sidebar-title { font-size: var(--fs-sm); letter-spacing: var(--ls-wide); text-transform: uppercase; margin-bottom: var(--sp-4); color: var(--c-text-soft); }
.toc { font-size: var(--fs-sm); display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.toc a { color: var(--c-text-soft); }
.toc a.is-active, .toc a:hover { color: var(--c-brand); }
.sidebar-cta { padding: var(--sp-5); background: var(--c-bg-soft); border-radius: var(--r-md); }
.sidebar-cta p { font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.single-post__tags { display: flex; gap: var(--sp-3); flex-wrap: wrap; padding-block: var(--sp-6); border-top: 1px solid var(--c-border); }
.single-post__tags a { font-size: var(--fs-sm); color: var(--c-text-soft); }
.single-post__tags a:hover { color: var(--c-brand); }

.related-posts { padding-block: clamp(4rem, 8vw, 6rem); border-top: 1px solid var(--c-border); }
.related-posts__title { font-size: var(--fs-2xl); margin-block: var(--sp-3) var(--sp-8); }

/* ---------- COOKIE-CONSENT FRIENDLY UTILITIES ---------- */
.no-cookies-msg { padding: var(--sp-4); background: var(--c-bg-soft); border-radius: var(--r-md); font-size: var(--fs-sm); }

/* ---------- UTILITIES ---------- */
.u-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.u-no-scroll { overflow: hidden; }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }
.u-text-brand  { color: var(--c-brand); }
.u-bg-dark     { background: var(--c-bg-dark); color: var(--c-text-inverse); }
.u-mt-0  { margin-top: 0 !important; }
.u-mt-4  { margin-top: var(--sp-4); }
.u-mt-8  { margin-top: var(--sp-8); }
.u-mt-12 { margin-top: var(--sp-12); }
.u-mt-16 { margin-top: var(--sp-16); }

/* Animation reveal class (set by IntersectionObserver) */
[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="100"].is-revealed { transition-delay: 100ms; }
[data-reveal][data-reveal-delay="200"].is-revealed { transition-delay: 200ms; }
[data-reveal][data-reveal-delay="300"].is-revealed { transition-delay: 300ms; }
[data-reveal][data-reveal-delay="400"].is-revealed { transition-delay: 400ms; }
/* ============================================================
   Additional components: service hero, city pages, ai-agency,
   contact form, feature grid, kpi grid, process steps, faqs
   Appended to main style.css via @import or concatenation.
   ============================================================ */

/* ---------- SERVICE / CITY hero ---------- */
.service-hero, .city-hero {
	padding-block: clamp(4rem, 8vw, 7rem);
}
.service-hero__header, .city-hero__header {
	max-width: 880px;
}
.service-hero__title, .city-hero__title {
	font-family: var(--ff-display);
	font-size: var(--fs-5xl);
	font-weight: var(--fw-semibold);
	line-height: 0.95;
	letter-spacing: var(--ls-tight);
	color: var(--c-text);
	margin-block: var(--sp-3) var(--sp-5);
}
.service-hero__lead, .city-hero__lead {
	font-size: var(--fs-lg);
	color: var(--c-text-soft);
	margin-bottom: var(--sp-8);
	max-width: 60ch;
}
.service-hero__cta, .city-hero__cta {
	display: flex;
	gap: var(--sp-4);
	flex-wrap: wrap;
}
.service-hero__media {
	margin-top: var(--sp-12);
	border-radius: var(--r-md);
	overflow: hidden;
	aspect-ratio: 16/9;
	background: var(--c-bg-soft);
}
.service-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.service-body, .city-body {
	padding-block: clamp(3rem, 6vw, 5rem);
}

/* ---------- FEATURE GRID ---------- */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--sp-5);
}
.feature-card {
	background: var(--c-bg-elev);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	padding: var(--sp-6);
	transition: border-color var(--d-fast) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.feature-card:hover { border-color: var(--c-brand); transform: translateY(-3px); }
.feature-card__num {
	display: inline-block;
	font-family: var(--ff-mono);
	font-size: var(--fs-xs);
	color: var(--c-brand);
	letter-spacing: var(--ls-wide);
	margin-bottom: var(--sp-4);
}
.feature-card__title {
	font-family: var(--ff-display);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	margin-bottom: var(--sp-3);
}
.feature-card__desc {
	font-size: var(--fs-sm);
	color: var(--c-text-soft);
	line-height: var(--lh-loose);
}

/* ---------- RELATED SERVICES ---------- */
.related-services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--sp-4);
}
.related-services__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--sp-5);
	background: var(--c-bg-elev);
	border-radius: var(--r-md);
	border: 1px solid var(--c-border);
	min-height: 180px;
	transition: background var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.related-services__card:hover {
	background: var(--c-text);
	color: var(--c-bg);
	border-color: var(--c-text);
}
.related-services__title {
	font-family: var(--ff-display);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	margin-bottom: var(--sp-4);
}
.related-services__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-wide);
}

/* ---------- PROCESS STEPS ---------- */
.process-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sp-5);
	counter-reset: step;
	list-style: none;
}
.process-step {
	background: var(--c-bg-elev);
	border-radius: var(--r-md);
	padding: var(--sp-6);
	border: 1px solid var(--c-border);
	position: relative;
}
.process-step__num {
	font-family: var(--ff-mono);
	font-size: var(--fs-sm);
	color: var(--c-brand);
	letter-spacing: var(--ls-wide);
	margin-bottom: var(--sp-4);
	display: block;
}
.process-step__title {
	font-family: var(--ff-display);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	margin-bottom: var(--sp-3);
}
.process-step__desc {
	font-size: var(--fs-sm);
	color: var(--c-text-soft);
	line-height: var(--lh-loose);
}

/* ---------- KPI GRID (Web Marketing pages) ---------- */
.kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--sp-4);
}
.kpi-card {
	background: var(--c-bg-elev);
	border-radius: var(--r-md);
	padding: var(--sp-5);
	text-align: center;
	border: 1px solid var(--c-border);
}
.kpi-card__label {
	font-family: var(--ff-display);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	color: var(--c-brand);
	margin-bottom: var(--sp-2);
}
.kpi-card__desc {
	font-size: var(--fs-sm);
	color: var(--c-text-soft);
}

/* ---------- FAQ list ---------- */
.faqs-list {
	max-width: 880px;
	margin-inline: auto;
	padding-block: clamp(3rem, 6vw, 5rem);
}
.faqs-list .prose details,
.faqs-list > details {
	background: var(--c-bg-elev);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	padding: var(--sp-5) var(--sp-6);
	margin-bottom: var(--sp-3);
	transition: border-color var(--d-fast) var(--ease-out);
}
.faqs-list details[open] { border-color: var(--c-brand); }
.faqs-list summary {
	cursor: pointer;
	font-family: var(--ff-display);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-md);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-4);
}
.faqs-list summary::-webkit-details-marker { display: none; }
.faqs-list summary::after {
	content: '+';
	font-family: var(--ff-display);
	font-weight: var(--fw-light);
	font-size: 1.4em;
	color: var(--c-brand);
	transition: transform var(--d-fast) var(--ease-out);
}
.faqs-list details[open] summary::after { transform: rotate(45deg); }
.faqs-list details p {
	margin-top: var(--sp-4);
	color: var(--c-text-soft);
	line-height: var(--lh-loose);
}
.faqs-group {
	margin-top: var(--sp-12);
	margin-bottom: var(--sp-4);
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-extra);
	text-transform: uppercase;
	color: var(--c-text-muted);
}
.faqs-group:first-of-type { margin-top: 0; }

/* Inline variant (for city pages) */
.faqs-list--inline { padding-block: 0; max-width: 920px; }

/* ---------- AI AGENCY ---------- */
.ai-hero {
	padding-block: clamp(4rem, 8vw, 7rem);
	background: var(--c-bg-dark);
	color: var(--c-text-inverse);
	min-height: 86vh;
	display: flex;
	align-items: center;
}
.ai-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-12);
	align-items: center;
}
@media (min-width: 1024px) {
	.ai-hero__inner { grid-template-columns: 1fr 1fr; }
}
.ai-hero__title {
	font-family: var(--ff-display);
	font-size: var(--fs-5xl);
	font-weight: var(--fw-semibold);
	line-height: 0.95;
	margin-block: var(--sp-3) var(--sp-5);
	color: var(--c-text-inverse);
}
.ai-hero__lead {
	color: var(--c-text-inverse-soft);
	font-size: var(--fs-lg);
	max-width: 50ch;
	margin-bottom: var(--sp-8);
}
.ai-hero__scene {
	position: relative;
	min-height: 480px;
}

.ai-services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--sp-5);
}
.ai-service-card {
	background: var(--c-bg-elev);
	border-radius: var(--r-md);
	padding: var(--sp-6);
	border: 1px solid var(--c-border);
}
.ai-service-card__icon {
	color: var(--c-brand);
	margin-bottom: var(--sp-4);
}
.ai-service-card__title {
	font-family: var(--ff-display);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	margin-bottom: var(--sp-3);
}
.ai-service-card__desc {
	font-size: var(--fs-sm);
	color: var(--c-text-soft);
	line-height: var(--lh-loose);
}

/* ---------- CHI SIAMO ---------- */
.chi-siamo-hero {
	padding-block: clamp(5rem, 10vw, 8rem) clamp(3rem, 6vw, 5rem);
	min-height: 70vh;
	display: flex;
	align-items: center;
}
.chi-siamo-hero__title {
	font-family: var(--ff-display);
	font-size: var(--fs-5xl);
	font-weight: var(--fw-semibold);
	line-height: 1;
	color: var(--c-text-inverse);
	max-width: 18ch;
}
.manifesto { padding-block: clamp(4rem, 8vw, 7rem); }
.manifesto__content { max-width: 760px; }

.team-card--large { text-align: left; }
.team-card--large .team-card__photo { aspect-ratio: 1/1; }
.team-card__bio {
	font-size: var(--fs-sm);
	color: var(--c-text-soft);
	margin-top: var(--sp-3);
	line-height: var(--lh-loose);
}

.values__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--sp-6);
	list-style: none;
}
.value-item {
	border-top: 2px solid var(--c-brand);
	padding-top: var(--sp-5);
}
.value-item__title {
	font-family: var(--ff-display);
	font-size: var(--fs-xl);
	font-weight: var(--fw-semibold);
	margin-bottom: var(--sp-3);
}
.value-item__desc { color: var(--c-text-soft); line-height: var(--lh-loose); }

/* ---------- CONTACT PAGE ---------- */
.contact-hero { padding-block: clamp(4rem, 8vw, 7rem) var(--sp-12); }
.contact-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-10);
}
@media (min-width: 1024px) {
	.contact-hero__inner { grid-template-columns: 1.4fr 1fr; align-items: center; }
}
.contact-hero__title {
	font-family: var(--ff-display);
	font-size: var(--fs-5xl);
	font-weight: var(--fw-semibold);
	line-height: 0.95;
	margin-block: var(--sp-3) var(--sp-5);
}
.contact-hero__lead {
	font-size: var(--fs-lg);
	color: var(--c-text-soft);
	max-width: 50ch;
}
.contact-hero__channels {
	display: grid;
	gap: var(--sp-3);
}
.contact-channel {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-5);
	background: var(--c-bg-elev);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	transition: border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.contact-channel:hover { border-color: var(--c-brand); transform: translateX(4px); color: inherit; }
.contact-channel .icon { color: var(--c-brand); flex: none; }
.contact-channel__label {
	display: block;
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-text-muted);
	margin-bottom: 2px;
}
.contact-channel__value {
	display: block;
	font-family: var(--ff-display);
	font-weight: var(--fw-semibold);
}

.contact-form { padding-block: 0 clamp(4rem, 8vw, 8rem); }
.contact-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-10);
}
@media (min-width: 1024px) {
	.contact-form__grid { grid-template-columns: 1.5fr 1fr; align-items: start; }
}

.mwl-form {
	background: var(--c-bg-elev);
	border-radius: var(--r-md);
	padding: var(--sp-8);
	border: 1px solid var(--c-border);
}
.mwl-form__grid {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: 1fr 1fr;
	margin-bottom: var(--sp-6);
}
@media (max-width: 768px) { .mwl-form__grid { grid-template-columns: 1fr; } }
.mwl-field--full { grid-column: 1 / -1; }
.mwl-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.mwl-field__label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--c-text);
}
.mwl-field input[type="text"],
.mwl-field input[type="email"],
.mwl-field input[type="tel"],
.mwl-field select,
.mwl-field textarea {
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-sm);
	background: var(--c-bg);
	font-family: inherit;
	font-size: var(--fs-base);
	transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
.mwl-field input:focus,
.mwl-field select:focus,
.mwl-field textarea:focus { outline: none; border-color: var(--c-brand); background: var(--c-bg-elev); }
.mwl-field textarea { resize: vertical; min-height: 140px; }
.mwl-field--checkbox {
	flex-direction: row;
	align-items: start;
	gap: var(--sp-3);
	margin-block: var(--sp-4) var(--sp-6);
	font-size: var(--fs-sm);
	color: var(--c-text-soft);
}
.mwl-field--checkbox input { margin-top: 4px; flex: none; accent-color: var(--c-brand); }
.mwl-field--checkbox a { color: var(--c-brand); text-decoration: underline; }

.contact-info-card {
	padding: var(--sp-5) var(--sp-6);
	background: var(--c-bg-elev);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	margin-bottom: var(--sp-4);
}
.contact-info-card__title {
	font-family: var(--ff-display);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	margin-bottom: var(--sp-3);
}
.contact-info-card dl dt {
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
	margin-top: var(--sp-3);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
}
.contact-info-card dl dd { font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.map-link {
	display: inline-block;
	margin-top: var(--sp-3);
	font-size: var(--fs-sm);
	color: var(--c-brand);
	text-decoration: underline;
}

/* form notice banner */
.form-notice {
	position: fixed;
	top: calc(80px + 1rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: var(--z-toast);
	padding: var(--sp-4) var(--sp-6);
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
	color: var(--c-text-inverse);
	box-shadow: var(--sh-lg);
	max-width: calc(100% - 2rem);
}
.form-notice--success { background: var(--c-success); }
.form-notice--error   { background: var(--c-danger); }