/* ============================================================
   SARCONX — sarconx.com
   Design system: white canvas + blu / azzurro / verde (role-bound)
   RULE: max 1 accent per block — blu=CTA, azzurro=link/hover, verde=success
   ============================================================ */

:root {
	/* --- canvas & ink (pure white) --- */
	--bg: #ffffff;
	--surface: #ffffff;
	--bg-soft: #f7f8fa; /* neutral cool gray — preserves section rhythm on white */
	--ink: #0a0a0a;
	--ink-muted: #6b7280;
	--line: #e5e7eb;
	--line-strong: #cbd5e1;

	/* --- canonical accents (role-bound) ---
	   CONTRAST RULE: the neon pair (azzurro/verde) is FILL-ONLY. Both fail WCAG
	   badly as text on white (azzurro 1.54:1). Anything that renders as text,
	   icon stroke, or focus ring uses the -ink variant below. */
	--accent-blu: #0038ff; /* primary CTA — 6.98:1 on white, safe as text */
	--accent-azzurro: #00e5ff; /* fill only — never text */
	--accent-verde: #00ff66; /* fill only — never text */
	--accent-blu-rgb: 0, 56, 255;
	--accent-azzurro-rgb: 0, 229, 255;
	--accent-verde-rgb: 0, 255, 102;

	/* --- ink variants: same hue families, legible on white --- */
	--azzurro-ink: #00707f; /* 5.80:1 — kickers, links, accents, numerals */
	--azzurro-ink-rgb: 0, 112, 127;
	--verde-ink: #00803a; /* 5.06:1 — success text */
	--verde-ink-rgb: 0, 128, 58;

	/* --- ROLE MAP — one accent per job, never two in the same block ---
	   Three hues on pure white only hold if each owns a role and they are
	   never lined up as peers. Read this before adding any colour:

	     blu     brand voice + primary action
	             kickers, emphasised words, display numerals, drop caps,
	             section icons, focus rings, the one filled CTA per block.
	     azzurro the interactive layer, and ONLY that
	             links, every :hover, input focus border. If it is not
	             clickable it does not get azzurro.
	     verde   positive state
	             live dot, success confirmation, WhatsApp.

	   Metadata, labels and inline code take no accent at all — neutral is
	   a decision, not an absence. */
	--accent: var(--azzurro-ink); /* the interactive layer */
	--accent-2: var(--verde-ink); /* success icon */
	--accent-3: var(--accent-blu); /* unused alias */
	--accent-deep: #005a66; /* azzurro-ink, deepened for hover fills */
	--verde-deep: #00602c; /* verde-ink, deepened for hover fills */
	--accent-soft: #e6fcff; /* azzurro tint */
	--accent-rgb: var(--azzurro-ink-rgb);
	--accent-2-rgb: var(--verde-ink-rgb);
	--accent-3-rgb: var(--accent-blu-rgb);
	--cta: var(--accent-blu); /* CTA primary */
	--cta-deep: #0029cc; /* blu hover/active */
	--cta-soft: #e6ecff; /* blu tint */
	--cta-rgb: var(--accent-blu-rgb);
	--ok: var(--verde-ink);
	--err: #b42318; /* 6.57:1 on white — safe as text, not just as a border */
	--err-rgb: 180, 35, 24;

	--bg-rgb: 255, 255, 255;
	--surface-rgb: 255, 255, 255;
	--ink-rgb: 10, 10, 10;
	--bg-dark: #0a0a0a;
	--bg-dark-rgb: 10, 10, 10;

	--radius: 2px;
	--font-display: "Fraunces", "Times New Roman", serif;
	--font-body: "Inter", "Helvetica Neue", sans-serif;
	--font-mono: "Fraunces", "Times New Roman", serif;
	--wrap: 1240px;
	--shadow-sm: 0 1px 0 rgba(var(--ink-rgb), 0.06);
	--shadow: none;
	--shadow-lg: none;

	/* --- motion --- one exponential ease, three durations.
	   Nothing bounces: this brand is precise, not playful. */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast: 0.28s;
	--dur-base: 0.6s;
	--dur-slow: 1.1s;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
	/* fixed nav is 70px — without this every in-page anchor lands under it */
	scroll-padding-top: 90px;
}
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}
body {
	background: var(--bg);
	color: var(--ink-muted);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
::selection {
	background: rgba(var(--accent-blu-rgb), 0.22);
	color: #fff;
}
::-webkit-scrollbar {
	width: 9px;
}
::-webkit-scrollbar-track {
	background: var(--bg);
}
::-webkit-scrollbar-thumb {
	background: var(--line-strong);
	border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--accent);
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}
a {
	color: inherit;
	text-decoration: none;
}
button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}
ul {
	list-style: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	/* blu: the focus ring is a system signal, not a link — it must read the
	   same on a button, an input and an anchor, so it takes the strongest
	   accent rather than the interactive one */
	outline: 2px solid var(--accent-blu);
	outline-offset: 3px;
	border-radius: 0;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	letter-spacing: -0.018em;
	line-height: 1.04;
	text-wrap: balance;
	color: var(--ink);
	font-variation-settings: "opsz" 144;
}
h1 {
	font-weight: 500;
	font-style: normal;
}
h2 {
	font-weight: 500;
}
h3 {
	font-weight: 600;
	font-style: normal;
}
p {
	text-wrap: pretty;
}

.wrap {
	width: 100%;
	max-width: var(--wrap);
	padding-inline: 2rem;
	margin-inline: auto;
}
.section {
	padding: clamp(4.5rem, 9vw, 8rem) 0;
	position: relative;
	border-top: 1px solid var(--line);
}
.section:first-of-type {
	border-top: 0;
}

/* ---------- shared: kicker (editorial date-style) ---------- */
.kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent-blu);
	margin-bottom: 1.4rem;
}
.kicker::before {
	content: "";
	width: 36px;
	height: 1px;
	background: var(--ink);
	display: inline-block;
}
.h2 {
	font-size: clamp(2.4rem, 5.6vw, 4.4rem);
	font-weight: 400;
	margin-bottom: 1.2rem;
	letter-spacing: -0.02em;
	font-variation-settings: "opsz" 144;
	line-height: 1.02;
}
.h2 em {
	font-style: italic;
	color: var(--accent-blu);
}
.sub {
	font-size: clamp(1.05rem, 1.35vw, 1.2rem);
	color: var(--ink-muted);
	max-width: 60ch;
	line-height: 1.7;
	font-family: var(--font-body);
}

.volt {
	color: var(--accent-blu);
}
/* drop cap editoriale */
.about-copy > p:first-of-type::first-letter,
.prose > p:first-of-type::first-letter {
	font-family: var(--font-display);
	font-size: 4.4em;
	line-height: 0.85;
	float: left;
	margin: 0.05em 0.14em 0 0;
	color: var(--accent-blu);
	font-weight: 500;
	font-variation-settings: "opsz" 144;
}

/* ============================================================
   MOTION VOCABULARY
   Four reveals, not one. The tell of a generated page is a single
   fade-up applied to every element regardless of what it is; here
   each reveal is chosen to match the material it reveals.

     .rv        text, headings, copy  — opacity only. Words should
                                        not slide; they should arrive.
     .rv-rise   cards, grid cells     — short lift. They are objects.
     .rv-media  images, visuals       — slow scale settle, like a lens
                                        finding focus.
     .rv-num    display numerals      — vertical wipe, counter-like.

   All four share one ease and are neutralised by prefers-reduced-motion.

   Every hidden state is gated behind `.js` on <html>, set by an inline
   script in the head. A reveal is an enhancement of visible content, not
   the thing that makes it visible: without that gate, one blocked script
   or one headless renderer ships an entirely blank page.
   ============================================================ */
.js .rv {
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-out);
}
.rv.on {
	opacity: 1;
}

.js .rv-rise {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
}
.rv-rise.on {
	opacity: 1;
	transform: none;
}

.rv-media {
	overflow: hidden;
}
.js .rv-media {
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-out);
}
.js .rv-media img {
	transform: scale(1.07);
	transition: transform var(--dur-slow) var(--ease-out-soft);
	will-change: transform;
}
.rv-media.on {
	opacity: 1;
}
.rv-media.on img {
	transform: none;
}

.js .rv-num {
	opacity: 0;
	clip-path: inset(0 0 100% 0);
	transition:
		opacity var(--dur-fast) linear,
		clip-path var(--dur-slow) var(--ease-out-soft);
}
.rv-num.on {
	opacity: 1;
	clip-path: inset(0 0 0 0);
}

.rv-d1 {
	transition-delay: 0.08s;
}
.rv-d2 {
	transition-delay: 0.16s;
}
.rv-d3 {
	transition-delay: 0.24s;
}

/* stagger: any reveal variant, at any depth — the delay follows the
   element's position among its own siblings, which is what makes it
   work for both flat grids and nested article/media pairs */
.rv-stagger :is(.rv, .rv-rise, .rv-media, .rv-num):nth-child(2) {
	transition-delay: 0.08s;
}
.rv-stagger :is(.rv, .rv-rise, .rv-media, .rv-num):nth-child(3) {
	transition-delay: 0.16s;
}
.rv-stagger :is(.rv, .rv-rise, .rv-media, .rv-num):nth-child(4) {
	transition-delay: 0.24s;
}
.rv-stagger :is(.rv, .rv-rise, .rv-media, .rv-num):nth-child(5) {
	transition-delay: 0.32s;
}
.rv-stagger :is(.rv, .rv-rise, .rv-media, .rv-num):nth-child(6) {
	transition-delay: 0.4s;
}
.rv-stagger :is(.rv, .rv-rise, .rv-media, .rv-num):nth-child(7) {
	transition-delay: 0.48s;
}
.rv-stagger :is(.rv, .rv-rise, .rv-media, .rv-num):nth-child(8) {
	transition-delay: 0.56s;
}

/* ---------- line draw ---------- */
.draw-line {
	position: relative;
}
.draw-line::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--line-strong);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.draw-line.on::after {
	transform: scaleX(1);
}

/* ============================================================
   NAV
   ============================================================ */
#nav {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 80;
	transition:
		background 0.35s ease,
		border-color 0.35s ease,
		backdrop-filter 0.35s ease,
		box-shadow 0.35s ease;
	border-bottom: 1px solid transparent;
}
#nav.solid {
	background: rgba(var(--surface-rgb), 0.92);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border-bottom-color: var(--line);
	box-shadow: none;
}
.nav-in {
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.brand {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}
.brand svg {
	width: 38px;
	height: 38px;
}
.brand-logo-img {
	width: clamp(136px, 12vw, 174px);
	height: auto;
	max-height: 44px;
	object-fit: contain;
}
.nav-links {
	display: flex;
	align-items: center;
	gap: 2rem;
}
.nav-links a {
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--ink-muted);
	transition: color 0.25s ease;
}
.nav-links a:hover {
	color: var(--accent);
}
.btn-nav {
	padding: 0.62rem 1.15rem !important;
}

/* buttons — editorial flat, niente pill */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	border-radius: 0;
	padding: 0.95rem 1.7rem;
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: 0.005em;
	font-family: var(--font-body);
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
	white-space: nowrap;
}
.btn svg {
	width: 18px;
	height: 18px;
	flex: none;
}
.btn-volt {
	background: var(--cta);
	color: var(--bg);
	border: 1px solid var(--cta);
}
.btn-volt:hover {
	background: var(--cta-deep);
	border-color: var(--cta-deep);
}
.btn-volt:active {
	background: var(--cta-deep);
}
/* WhatsApp — verde, and defined globally. It previously existed only
   scoped to the modal, so the same button on contatti.html rendered with
   no background and no border at all. It is an alternative channel, not a
   second primary: blu stays the one filled CTA of its block. */
.btn-wa {
	background: var(--verde-ink);
	color: var(--surface);
	border: 1px solid var(--verde-ink);
}
.btn-wa:hover {
	background: var(--verde-deep);
	border-color: var(--verde-deep);
}
.btn-wa:active {
	background: var(--verde-deep);
}
.btn-ghost {
	border: 1px solid var(--ink);
	color: var(--ink);
	background: transparent;
}
.btn-ghost:hover {
	background: var(--ink);
	color: var(--bg);
}
.btn-nav {
	color: var(--bg);
}
.btn-sm {
	padding: 0.6rem 1.1rem;
	font-size: 0.8rem;
}

/* mobile menu */
#menuBtn {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	color: var(--ink);
}
#menuBtn svg {
	width: 26px;
	height: 26px;
}
#mobileMenu {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(var(--bg-rgb), 0.98);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
#mobileMenu.open {
	opacity: 1;
	pointer-events: auto;
}
#mobileMenu a {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--ink);
}
#mobileMenu a:hover {
	color: var(--accent);
}
#menuClose {
	position: absolute;
	top: 1rem;
	right: 1.2rem;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink);
}
#menuClose svg {
	width: 28px;
	height: 28px;
}

/* ============================================================
   HERO — editorial masthead asimmetrico
   ============================================================ */
#hero {
	min-height: auto;
	display: flex;
	align-items: flex-start;
	position: relative;
	overflow: hidden;
	padding: clamp(7rem, 11vw, 9rem) 0 clamp(3.8rem, 6vw, 5rem);
	background: var(--bg);
	border-bottom: 1px solid var(--ink);
}
.hero-in {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) minmax(260px, 0.62fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: stretch;
	width: 100%;
}
.hero-main {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-left: 0;
}
.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: var(--ink-muted);
	text-transform: uppercase;
	margin-bottom: 1.8rem;
}
.hero-eyebrow i {
	display: none;
}

#hero h1 {
	font-size: clamp(2.8rem, 4.8vw, 4.6rem);
	font-weight: 400;
	margin-bottom: 1.35rem;
	color: var(--ink);
	letter-spacing: -0.025em;
	line-height: 0.99;
	font-variation-settings: "opsz" 144;
	max-width: 18.5ch;
}
#hero h1 .l1 {
	display: block;
	color: var(--ink);
}
#hero h1 .l2 {
	display: block;
	color: var(--ink);
}
#hero h1 em {
	font-style: italic;
	color: var(--accent-blu);
	font-weight: 400;
}
.hero-sub {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	color: var(--ink-muted);
	max-width: 48ch;
	line-height: 1.65;
	margin-bottom: 2.2rem;
	font-family: var(--font-body);
}
.hero-sub strong {
	color: var(--ink);
	font-weight: 600;
}
.hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-bottom: 0;
}

/* side masthead verticale a destra */
.hero-side {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: clamp(2.4rem, 7vw, 5rem);
	border-left: 1px solid var(--ink);
	padding-left: clamp(1.4rem, 2.6vw, 2.1rem);
	align-self: stretch;
	padding-top: 0.45rem;
	padding-bottom: 0.4rem;
	min-height: auto;
}
/* --- hero side: real work, not slogans ---
   This column used to hold a decorative "Edizione N°01 2026" masthead
   and three unfalsifiable claims, sealed behind aria-hidden. It is
   now the strongest thing the agency has: five named projects, each
   a real link. A slow highlight sweeps the list so it reads as alive
   without hiding anything from a reader or a crawler. */
.hero-live {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.hl-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.62rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 600;
}
.hl-dot {
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: var(--accent-verde);
	box-shadow: 0 0 0 0 rgba(var(--accent-verde-rgb), 0.55);
	animation: hl-pulse 2.6s var(--ease-out) infinite;
}
@keyframes hl-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(var(--accent-verde-rgb), 0.55);
	}
	70%,
	100% {
		box-shadow: 0 0 0 7px rgba(var(--accent-verde-rgb), 0);
	}
}

.hl-list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--line);
}
.hl-item {
	border-bottom: 1px solid var(--line);
}
.hl-item a {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.7rem;
	align-items: baseline;
	padding: 0.72rem 0.2rem 0.72rem 0;
	position: relative;
	transition: padding-left var(--dur-fast) var(--ease-out);
}
.hl-item a::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 -1px;
	width: 2px;
	background: var(--accent-blu);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--dur-fast) var(--ease-out);
}
.hl-idx {
	grid-row: 1 / span 2;
	font-family: var(--font-body);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--ink-muted);
	font-variant-numeric: tabular-nums;
	transition: color var(--dur-fast) var(--ease-out);
}
.hl-item strong {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.25;
}
.hl-what {
	font-family: var(--font-body);
	font-size: 0.74rem;
	color: var(--ink-muted);
	line-height: 1.4;
}

/* the sweep: driven by JS adding .is-lit, matched by :hover/:focus so
   pointer intent always overrides the ambient animation */
.hl-item.is-lit a::before,
.hl-item a:hover::before,
.hl-item a:focus-visible::before {
	transform: scaleY(1);
}
.hl-item.is-lit a,
.hl-item a:hover,
.hl-item a:focus-visible {
	padding-left: 0.7rem;
}
.hl-item.is-lit .hl-idx,
.hl-item a:hover .hl-idx,
.hl-item a:focus-visible .hl-idx {
	color: var(--accent-blu);
}

.hero-fact {
	font-family: var(--font-body);
	font-size: 0.78rem;
	color: var(--ink-muted);
	line-height: 1.55;
	border-top: 1px solid var(--ink);
	padding-top: 1rem;
}
.hero-fact strong {
	color: var(--ink);
	font-weight: 600;
}

/* ============================================================
   HERO CHOREOGRAPHY (GSAP)
   Everything here is inert until app.js confirms GSAP actually loaded.
   That ordering is the whole safety story: if the CDN is down, none of
   these rules apply and the hero keeps its plain CSS .hload entrance. A
   third party can slow the first screen down — it must never be able to
   blank it.

   Two separate gates, and the split matters:

     .gsap-on    scroll work only. Adds nothing that hides content, so it
                 is safe to set however late GSAP turns up.
     .gsap-intro takes the ENTRANCE away from CSS, which means it hides
                 things. app.js sets it only when GSAP arrived early
                 enough to start from the beginning. Set it late and the
                 hero would appear on the CSS animation, snap back to
                 blank, and animate in a second time.
   ============================================================ */

/* blueprint field — two hairline grids at different pitches, so the eye
   reads depth rather than graph paper. Masked to fade out downward. */
.hero-grid {
	position: absolute;
	/* bled past the section on both edges: the field drifts on scroll and
	   an inset:0 box would expose a bare strip at the top as it moves */
	inset: -18% 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	background-image:
		linear-gradient(to right, rgba(var(--accent-blu-rgb), 0.055) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(var(--accent-blu-rgb), 0.055) 1px, transparent 1px),
		linear-gradient(to right, rgba(var(--ink-rgb), 0.035) 1px, transparent 1px);
	background-size:
		96px 100%,
		100% 96px,
		24px 100%;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 88%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 88%);
}
.gsap-on .hero-grid {
	opacity: 1;
}

/* the plotter rule under the headline: full width by default, collapsed to
   zero only when GSAP is going to draw it */
.hero-rule {
	display: block;
	height: 2px;
	width: min(180px, 40%);
	/* pulled up tight under the headline so it reads as part of the
	   drawing, not as a divider between two blocks */
	margin: -0.45rem 0 1.5rem;
	background: var(--accent-blu);
	transform-origin: left center;
}
.gsap-intro .hero-rule {
	transform: scaleX(0);
}

/* GSAP owns the hero entrance. Killing the CSS animation leaves the
   element at its opacity:0 start, which is exactly the handoff we want —
   but only while nothing has been painted yet, which is why app.js gates
   this class on arriving early. */
.gsap-intro #hero .hload {
	animation: none;
	transform: none;
}
.gsap-intro #hero h1 .l1,
.gsap-intro #hero h1 .l2 {
	will-change: clip-path;
}
.gsap-on .hero-main,
.gsap-on .hero-side {
	will-change: transform;
}

/* hero load stagger */
.hload {
	opacity: 0;
	transform: translateY(8px);
	animation: hup 0.8s ease forwards;
}
.hd1 {
	animation-delay: 0.15s;
}
.hd2 {
	animation-delay: 0.3s;
}
.hd3 {
	animation-delay: 0.45s;
}
.hd4 {
	animation-delay: 0.6s;
}
.hd5 {
	animation-delay: 0.75s;
}
@keyframes hup {
	to {
		opacity: 1;
		transform: none;
	}
}

/* ============================================================
   TICKER
   ============================================================ */
#ticker {
	border-block: 1px solid var(--line);
	padding: 1.05rem 0;
	overflow: hidden;
	position: relative;
	background: var(--bg);
}
.ticker-track {
	display: flex;
	gap: 0;
	width: max-content;
	animation: tick 36s linear infinite;
}
#ticker:hover .ticker-track {
	animation-play-state: paused;
}
.ticker-track span {
	font-family: var(--font-display);
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	padding: 0 1.4rem;
	white-space: nowrap;
}
.ticker-track span::after {
	content: "•";
	color: var(--accent-blu);
	font-size: 0.7rem;
	vertical-align: middle;
	margin-left: 2.8rem;
	opacity: 0.8;
}
@keyframes tick {
	to {
		transform: translateX(-50%);
	}
}

/* ============================================================
   DOVE POSSIAMO AIUTARTI — challenge cards
   ============================================================ */
.challenge-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-top: 2.6rem;
}
.challenge-card {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--line);
	background: transparent;
	padding: 1.6rem 0;
	transition: none;
	text-align: left;
	width: 100%;
}
.challenge-card:hover {
	background: rgba(var(--cta-rgb), 0.06);
	border-color: var(--ink);
}
.challenge-card:hover h3 {
	color: var(--accent);
}
.challenge-card svg {
	width: 22px;
	height: 22px;
	flex: none;
	stroke: var(--accent-blu);
	margin-top: 0.15rem;
}
.challenge-card h3 {
	font-size: 1.2rem;
	font-weight: 500;
	margin-bottom: 0.4rem;
	color: var(--ink);
	transition: color 0.2s ease;
}
.challenge-card p {
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--ink-muted);
}

/* ============================================================
   SERVIZI
   ============================================================ */
.svc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin-top: 2.6rem;
	border-top: 1px solid var(--ink);
}
.svc {
	position: relative;
	border: none;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: transparent;
	padding: 2.2rem 1.8rem 2rem;
	overflow: hidden;
	transition: background 0.2s ease;
}
.svc:nth-child(3n) {
	border-right: 0;
}
.svc:hover {
	background: rgba(var(--cta-rgb), 0.07);
}
.svc-num {
	font-family: var(--font-display);
	font-size: 3.2rem;
	font-weight: 400;
	font-style: italic;
	color: var(--accent-blu);
	margin-bottom: 1.4rem;
	display: block;
	line-height: 0.9;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.02em;
}
.svc-ic {
	display: none;
}
.svc-ic svg {
	width: 22px;
	height: 22px;
	stroke: var(--accent-blu);
}
.svc h3 {
	font-size: 1.45rem;
	font-weight: 500;
	color: var(--ink);
	margin-bottom: 0.7rem;
	line-height: 1.15;
}
.svc p {
	font-size: 0.94rem;
	color: var(--ink-muted);
	line-height: 1.65;
	font-family: var(--font-body);
}

/* ============================================================
   METODO — numerazione serif gigante
   ============================================================ */
#metodo {
	background: var(--bg);
}
.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin-top: 2.8rem;
	border-top: 1px solid var(--ink);
	position: relative;
}
/* the method is a sequence, so its rule draws left-to-right as the
   three steps arrive — the line is the through-thread, not decoration */
.steps::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--accent-blu);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1.4s var(--ease-out-soft);
}
.steps.on::before {
	transform: scaleX(1);
}
.step {
	position: relative;
	padding: 2.4rem 1.8rem 1.8rem;
	overflow: hidden;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--ink);
}
.step:last-child {
	border-right: 0;
}
.step::after {
	display: none;
}
/* the numeral wipes up inside its own step, after the card has landed —
   gated with the reveals, since the wipe starts fully clipped */
.js .step .step-num {
	clip-path: inset(0 0 100% 0);
	transition: clip-path var(--dur-slow) var(--ease-out-soft) 0.14s;
}
.step.on .step-num {
	clip-path: inset(0 0 0 0);
}
.step-num {
	font-family: var(--font-display);
	font-size: 6rem;
	font-weight: 400;
	line-height: 0.85;
	margin-bottom: 1.2rem;
	color: var(--accent-blu);
	font-style: italic;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.04em;
	display: block;
}
.step-num i {
	font-style: normal;
	color: var(--ink-muted);
	font-size: 1.1rem;
	vertical-align: super;
	margin-left: 0.2rem;
	font-family: var(--font-body);
	font-weight: 600;
}
.step h3 {
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--ink);
	margin-bottom: 0.7rem;
	line-height: 1.15;
}
.step p {
	font-size: 0.96rem;
	color: var(--ink-muted);
	line-height: 1.7;
	font-family: var(--font-body);
}
/* ============================================================
   DELIVERABLES — servizi.html
   A definition list, because that is literally what it is: a term
   and what it means in practice. Two columns on desktop so the eye
   can scan the service names down the left edge.
   ============================================================ */
.deliver {
	margin-top: 2.8rem;
	border-top: 1px solid var(--ink);
}
.deliver-row {
	display: grid;
	grid-template-columns: minmax(180px, 0.3fr) 1fr;
	gap: clamp(1.2rem, 4vw, 3.2rem);
	padding: clamp(1.6rem, 3vw, 2.4rem) 0;
	border-bottom: 1px solid var(--line);
}
.deliver dt {
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1.7vw, 1.45rem);
	font-weight: 500;
	color: var(--ink);
	line-height: 1.2;
	text-wrap: balance;
}
.deliver dd {
	margin: 0;
}
.deliver dd > p {
	font-size: 1rem;
	color: var(--ink-muted);
	line-height: 1.7;
	max-width: 62ch;
	text-wrap: pretty;
}
.deliver-list {
	display: grid;
	gap: 0.55rem;
	margin-top: 1.1rem;
	list-style: none;
}
.deliver-list li {
	display: flex;
	gap: 0.7rem;
	align-items: baseline;
	font-family: var(--font-body);
	font-size: 0.92rem;
	color: var(--ink);
	line-height: 1.55;
}
.deliver-list li::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	background: var(--accent-blu);
	transform: translateY(-1px);
}

@media (max-width: 860px) {
	.deliver-row {
		grid-template-columns: 1fr;
		gap: 0.9rem;
	}
}

.metodo-strip {
	margin-top: 2.4rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 2rem;
	font-family: var(--font-body);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--ink-muted);
}
.metodo-strip span {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}
.metodo-strip span::before {
	content: "";
	width: 5px;
	height: 5px;
	background: var(--accent-blu);
	transform: rotate(45deg);
}

/* ============================================================
   LAVORI — case studies
   ============================================================ */
.works {
	display: grid;
	gap: clamp(3.4rem, 7vw, 5.5rem);
	margin-top: 3.2rem;
}
.work {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
	gap: clamp(1.8rem, 4.5vw, 4rem);
	align-items: center;
}
.work:nth-child(even) .work-media {
	order: 2;
}
.work:nth-child(even) .work-copy {
	order: 1;
}
.work-media {
	display: block;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--ink);
	background: var(--bg-soft);
	transition: none;
}
.work-media:hover {
	border-color: var(--accent);
}
.work-media:hover .work-shot img {
	transform: scale(1.02);
}
.work-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 11px 14px;
	border-bottom: 1px solid var(--line);
	background: var(--surface);
}
.work-bar i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--line-strong);
}
.work-bar em {
	margin-left: 10px;
	font-style: normal;
	font-family: var(--font-body);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	color: var(--ink-muted);
	font-weight: 600;
}
.work-shot {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--bg-soft);
}
.work-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-shot.contain img {
	object-fit: contain;
	padding: 0.8rem;
	background: linear-gradient(145deg, var(--bg-soft), var(--bg));
}
.work-type {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	/* neutral on purpose: this is metadata, not an accent. The work card
	   already carries one accent on its link — colouring the category label
	   too would put two hues in the same block for no added meaning. */
	color: var(--ink-muted);
	margin-bottom: 1rem;
}
.work-type::before {
	content: "";
	width: 7px;
	height: 7px;
	background: var(--ink);
	transform: rotate(45deg);
	border-radius: 1px;
}
.work-copy h3 {
	font-size: clamp(1.5rem, 2.6vw, 2.15rem);
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 0.9rem;
}
.work-copy p {
	color: var(--ink-muted);
	line-height: 1.75;
	font-size: 1rem;
	max-width: 52ch;
}
.work-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.3rem;
}
.work-tags span {
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ink-muted);
	border: 1px solid var(--line);
	border-radius: 0;
	padding: 0.4rem 0.75rem;
	background: var(--surface);
}
.work-link {
	margin-top: 1.4rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.88rem;
	font-weight: 800;
	color: var(--accent);
	/* the only accent in the work card — see the role map */
	box-shadow: inset 0 -1px 0 rgba(var(--accent-rgb), 0.3);
	transition:
		gap 0.25s ease,
		box-shadow var(--dur-fast) var(--ease-out);
}
.work-link:hover {
	gap: 0.85rem;
	box-shadow: inset 0 -2px 0 var(--accent-azzurro);
}
.work-link svg {
	width: 16px;
	height: 16px;
}

/* ============================================================
   STATS — proof strip
   ============================================================ */
.stats {
	border-block: 1px solid var(--line);
	background: var(--bg);
}
.stats-in {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.6rem;
	padding: clamp(2.2rem, 4vw, 3.2rem) 0;
}
.stat {
	text-align: center;
}
.stat b {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.1;
	font-size: clamp(1.9rem, 3.4vw, 2.7rem);
	margin-bottom: 0.45rem;
	color: var(--accent-blu);
}
.stat span {
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

/* ============================================================
   TESTIMONIANZE
   ============================================================ */
/* ============================================================
   TESTIMONIANZE — blockquote editoriali
   ============================================================ */
.tstm-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin-top: 2.6rem;
	border-top: 1px solid var(--ink);
}
.tstm {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	border: none;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--ink);
	background: transparent;
	padding: 2.2rem 1.8rem 1.8rem;
	transition: none;
}
.tstm:nth-child(3n) {
	border-right: 0;
}
.tstm:hover {
	background: var(--bg-soft);
}
.tstm-stars {
	display: none;
}
.tstm-quote {
	font-family: var(--font-display);
	font-size: 1.25rem;
	color: var(--ink);
	line-height: 1.4;
	font-weight: 400;
	font-style: italic;
	font-variation-settings: "opsz" 144;
	text-indent: -0.4em;
}
.tstm-quote::before {
	content: '"';
}
.tstm-quote::after {
	content: '"';
}
.tstm-quote strong {
	color: var(--accent-blu);
	font-weight: 500;
	font-style: normal;
}
.tstm-who {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-top: auto;
	padding-top: 0.8rem;
	border-top: 1px solid var(--line);
}
.tstm-av {
	display: none;
}
.tstm-name {
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.3;
}
.tstm-role {
	font-family: var(--font-body);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--ink-muted);
	font-weight: 500;
}

/* ============================================================
   CHI SIAMO — about strip
   ============================================================ */
#chi-siamo {
	background: var(--bg);
}
.about-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.about-copy p {
	color: var(--ink-muted);
	line-height: 1.75;
	margin-bottom: 1.1rem;
}
.about-copy p strong {
	color: var(--ink);
	font-weight: 700;
}
.about-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.about-stat {
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--surface);
	padding: 1.5rem 1rem;
	text-align: center;
	box-shadow: none;
}
.about-stat b {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	margin-bottom: 0.4rem;
	color: var(--accent-blu);
}
.about-stat span {
	font-family: var(--font-body);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-muted);
	line-height: 1.5;
	display: block;
}

/* ============================================================
   CONTATTI — form + info
   ============================================================ */
#contatti {
	overflow: hidden;
	background: var(--bg);
}
#contatti .wrap {
	position: relative;
	z-index: 1;
}
.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
	gap: clamp(1.6rem, 4vw, 3rem);
	margin-top: 2.8rem;
	align-items: start;
}
/* form card — top rule matches .svc / .step border vocabulary (1px, full width) */
.form {
	border: 1px solid var(--line-strong);
	border-top: 1px solid var(--ink);
	border-radius: 0;
	background: var(--surface);
	padding: clamp(1.5rem, 3vw, 2.2rem);
	display: grid;
	gap: 1.05rem;
	position: relative;
	overflow: hidden;
	box-shadow: none;
}
.field label {
	display: block;
	font-family: var(--font-body);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: 0.45rem;
}
.field input,
.field textarea {
	width: 100%;
	background: var(--bg);
	border: 1px solid var(--line-strong);
	border-radius: 2px;
	padding: 0.85rem 1rem;
	color: var(--ink);
	font: inherit;
	font-size: 0.95rem;
	transition:
		border-color 0.25s ease,
		box-shadow 0.25s ease,
		background 0.25s ease;
}
.field input::placeholder,
.field textarea::placeholder {
	/* full-strength muted ink: at opacity .7 this dropped to ~2.9:1 */
	color: var(--ink-muted);
	opacity: 1;
}
.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
	background: var(--surface);
}
.field textarea {
	resize: vertical;
	min-height: 110px;
}
/* invalid: red border AND the message above — colour alone is not a
   signal for everyone, and the error text names the field anyway */
.field input.is-invalid,
.field textarea.is-invalid {
	border-color: var(--err);
	box-shadow: 0 0 0 3px rgba(var(--err-rgb), 0.14);
}
.field .opt {
	font-weight: 400;
	color: var(--ink-muted);
	letter-spacing: 0;
	text-transform: none;
}
.form-hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.form-msg {
	display: none;
	font-size: 0.86rem;
	line-height: 1.55;
	border-radius: 10px;
	padding: 0.75rem 0.95rem;
}
.form-msg.err {
	display: block;
	color: var(--err);
	background: rgba(var(--err-rgb), 0.06);
	border: 1px solid rgba(var(--err-rgb), 0.18);
}
.form-success {
	display: none;
	text-align: center;
	padding: 2.4rem 1rem;
}
.form-success svg {
	width: 52px;
	height: 52px;
	margin: 0 auto 1rem;
	stroke: var(--accent-2);
}
.form-success p:first-of-type {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 0.4rem;
}
.form-success p:last-of-type {
	font-size: 0.92rem;
	color: var(--ink-muted);
}
.form .btn {
	width: 100%;
}
.form .btn[disabled] {
	opacity: 0.65;
	pointer-events: none;
}
/* contact side */
.contact-side {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.cinfo {
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--surface);
	padding: 1.4rem 1.5rem;
	display: grid;
	gap: 0.9rem;
	box-shadow: none;
}
.cinfo-row {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
}
.cinfo-row svg {
	width: 18px;
	height: 18px;
	flex: none;
	stroke: var(--accent-blu);
	margin-top: 0.15rem;
}
.cinfo-row b {
	display: block;
	font-family: var(--font-body);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: 0.2rem;
}
.cinfo-row a,
.cinfo-row span.v {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--ink);
}
.cinfo-row a:hover {
	color: var(--accent);
}
.cinfo-social {
	display: flex;
	gap: 0.6rem;
}
.cinfo-social a {
	width: 40px;
	height: 40px;
	border-radius: 2px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line-strong);
	color: var(--ink-muted);
	background: var(--surface);
	transition:
		transform 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease;
}
.cinfo-social a:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.cinfo-social svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}
/* maps embed — standard light embed */
.map-embed {
	border: 1px solid var(--line-strong);
	border-radius: 0;
	overflow: hidden;
	background: var(--bg-soft);
	box-shadow: none;
}
.map-embed iframe {
	display: block;
	width: 100%;
	height: 260px;
	border: 0;
}
.map-embed a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	padding: 0.8rem 1.1rem;
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--ink-muted);
	border-top: 1px solid var(--line);
	transition: color 0.25s ease;
}
.map-embed a:hover {
	color: var(--accent);
}
.map-embed a svg {
	width: 15px;
	height: 15px;
	stroke: currentColor;
}

/* ============================================================
   COOKIE CONSENT
   ============================================================ */
#cookie {
	position: fixed;
	left: 50%;
	bottom: 1.2rem;
	z-index: 95;
	width: min(920px, calc(100% - 2rem));
	transform: translate(-50%, calc(100% + 2rem));
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#cookie.show {
	transform: translate(-50%, 0);
}
.cookie-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	border: 1px solid var(--line-strong);
	border-radius: 0;
	background: rgba(var(--surface-rgb), 0.96);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	padding: 1.1rem 1.3rem;
	box-shadow: none;
}
#cookie p {
	flex: 1 1 360px;
	font-size: 0.85rem;
	color: var(--ink-muted);
	line-height: 1.6;
}
#cookie p a {
	color: var(--accent);
	border-bottom: 1px solid rgba(var(--accent-rgb), 0.35);
	transition: border-color 0.2s;
}
#cookie p a:hover {
	border-color: var(--accent);
}
.cookie-btns {
	display: flex;
	gap: 0.6rem;
	flex: none;
}

/* ============================================================
   PROSE — legal / long-form pages
   ============================================================ */
.prose {
	max-width: 72ch;
	color: var(--ink-muted);
	line-height: 1.8;
	font-size: 1rem;
}
.prose h2 {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 700;
	color: var(--ink);
	margin: 2.6rem 0 1rem;
}
.prose h3 {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ink);
	margin: 2rem 0 0.8rem;
}
.prose p {
	margin-bottom: 1.1rem;
}
.prose ul {
	display: grid;
	gap: 0.55rem;
	margin: 0 0 1.2rem;
	padding-left: 1.2rem;
	list-style: disc;
}
.prose li::marker {
	color: var(--accent-blu);
}
/* The neon azzurro is unreadable as text on white (1.54:1) but it is the
   right colour for a 2px rule, where contrast is decorative rather than
   informational. So the link TEXT is azzurro-ink and the underline is the
   neon itself, lighting up on hover. Same hue family, two legible jobs. */
.prose a {
	color: var(--accent);
	border-bottom: 1px solid rgba(var(--accent-rgb), 0.35);
	transition: border-color var(--dur-fast) var(--ease-out);
}
.prose a:hover {
	border-bottom-width: 2px;
	border-color: var(--accent-azzurro);
}
.prose strong {
	color: var(--ink);
	font-weight: 700;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
	border-top: 1px solid var(--line);
	padding: 2.6rem 0;
	background: var(--bg);
}
.foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
}
.foot .brand svg {
	width: 30px;
	height: 30px;
}
.foot .brand-logo-img {
	width: 132px;
	max-height: 34px;
}
.foot-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.7rem;
}
.foot-nav a {
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--ink-muted);
	transition: color 0.25s ease;
}
.foot-nav a:hover {
	color: var(--accent);
}
.foot-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1.6rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	font-family: var(--font-body);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: var(--ink-muted);
	font-weight: 600;
}
.foot-meta a {
	color: var(--ink-muted);
	transition: color 0.25s ease;
}
.foot-meta a:hover {
	color: var(--accent);
}
.foot-meta .spacer {
	flex: 1;
}

/* whatsapp float */
#waFloat {
	position: fixed;
	right: 1.4rem;
	bottom: 1.4rem;
	z-index: 70;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	/* verde: WhatsApp is a positive-state affordance and green is its own
	   recognised signal — it must never compete with the blu primary CTA */
	background: var(--verde-ink);
	box-shadow: 0 10px 30px rgba(var(--verde-ink-rgb), 0.35);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
#waFloat:hover {
	transform: scale(1.1);
}
#waFloat svg {
	width: 27px;
	height: 27px;
	fill: var(--surface);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
	.nav-links {
		display: none;
	}
	#menuBtn {
		display: flex;
	}
	.hero-in {
		grid-template-columns: 1fr;
		gap: 2.4rem;
	}
	.hero-side {
		border-left: 0;
		border-top: 1px solid var(--ink);
		padding-left: 0;
		padding-top: 1.6rem;
		min-height: auto;
	}
	/* on one column the list sits below the fold — trim it to the three
	   most recent so the hero stays a hero */
	.hl-item:nth-child(n + 4) {
		display: none;
	}
	.svc-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.svc:nth-child(3n) {
		border-right: 1px solid var(--line);
	}
	.svc:nth-child(2n) {
		border-right: 0;
	}
	.challenge-grid {
		grid-template-columns: 1fr;
	}
	.steps {
		grid-template-columns: 1fr;
	}
	.step {
		border-right: 0;
	}
	.step::after {
		display: none;
	}
	.work,
	.work:nth-child(even) {
		grid-template-columns: 1fr;
	}
	.work:nth-child(even) .work-media {
		order: 0;
	}
	.work:nth-child(even) .work-copy {
		order: 1;
	}
	.stats-in {
		grid-template-columns: repeat(2, 1fr);
		gap: 2.2rem 1rem;
	}
	.tstm-grid {
		grid-template-columns: 1fr;
	}
	.tstm {
		border-right: 0;
	}
	.about-grid {
		grid-template-columns: 1fr;
	}
	.contact-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 640px) {
	.wrap {
		padding-inline: 1.15rem;
	}
	.section {
		padding: 4rem 0;
	}
	#hero {
		padding-top: 6.4rem;
		min-height: auto;
	}
	.eb-x {
		display: none;
	}
	.hero-ctas .btn {
		width: 100%;
	}
	.svc-grid {
		grid-template-columns: 1fr;
	}
	.work-shot {
		aspect-ratio: 4 / 3;
	}
	.about-stats {
		grid-template-columns: 1fr 1fr;
	}
	.cookie-btns {
		width: 100%;
	}
	.cookie-btns .btn {
		flex: 1;
	}
	.challenge-card {
		width: 100%;
	}
}

/* ============================================================
   CASE STUDY PAGES
   ============================================================ */
.case-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(8.5rem, 14vw, 11rem) 0 0;
	background: var(--bg);
}
.case-hero .wrap {
	position: relative;
	z-index: 2;
}
.case-hero h1 {
	font-size: clamp(2.3rem, 5.2vw, 4rem);
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 1.3rem;
	max-width: 24ch;
}
.case-lead {
	font-size: clamp(1.02rem, 1.35vw, 1.2rem);
	color: var(--ink-muted);
	max-width: 62ch;
	line-height: 1.75;
	margin-bottom: 1.5rem;
}
.case-lead strong {
	color: var(--ink);
	font-weight: 700;
}
.case-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin-top: 2.1rem;
}
.case-shot {
	padding: clamp(2.4rem, 4.5vw, 3.4rem) 0 0;
}
.case-note {
	margin-top: 0.8rem;
	font-family: var(--font-body);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	color: var(--ink-muted);
	font-weight: 600;
}

/* alternating band */
.band {
	background: var(--bg);
	border-block: 1px solid var(--line);
}

/* narrative split: copy + question panel */
.split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
	margin-top: 2.4rem;
}
.split-copy p {
	color: var(--ink-muted);
	line-height: 1.75;
	margin-bottom: 1.1rem;
	font-size: 1.02rem;
}
.split-copy p strong {
	color: var(--ink);
	font-weight: 700;
}
.q-panel {
	border: 1px solid var(--line-strong);
	border-radius: 0;
	background: var(--surface);
	padding: clamp(1.4rem, 3vw, 2rem);
	position: relative;
	overflow: hidden;
	box-shadow: none;
}
.q-title {
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-blu);
	margin-bottom: 0.5rem;
}
.q-item {
	padding: 0.95rem 0;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	font-weight: 600;
	font-size: 0.96rem;
	line-height: 1.55;
	font-style: italic;
}
.q-item:last-of-type {
	border-bottom: 0;
}
.q-answer {
	margin-top: 1.2rem;
	padding: 1rem 1.1rem;
	border-radius: 2px;
	/* tint follows its own heading, which is blu */
	background: rgba(var(--accent-blu-rgb), 0.05);
	border: 1px solid rgba(var(--accent-blu-rgb), 0.14);
	color: var(--ink-muted);
	font-size: 0.9rem;
	line-height: 1.65;
}

/* change ledger (prima / dopo) */
.ledger {
	border-top: 1px solid var(--line);
}
.ledger-row {
	display: grid;
	grid-template-columns: minmax(150px, 0.42fr) 1fr;
	gap: 1.6rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--line);
}
.ledger-from {
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-muted);
	padding-top: 0.35rem;
}
.ledger-to {
	font-size: 1.06rem;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 0.45rem;
	line-height: 1.35;
}
.ledger-row p {
	color: var(--ink-muted);
	font-size: 0.92rem;
	line-height: 1.65;
}

/* proof gallery */
.proof {
	display: grid;
	grid-template-columns: 1.25fr 0.8fr;
	grid-template-rows: repeat(2, minmax(180px, 1fr));
	gap: 1rem;
	margin-top: 3rem;
}
.proof .work-media {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.proof .work-shot {
	flex: 1;
	aspect-ratio: auto;
}
.proof-large {
	grid-row: span 2;
}
.proof-cap {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	background: rgba(var(--surface-rgb), 0.95);
	border: 1px solid var(--line-strong);
	border-radius: 0;
	padding: 0.45rem 0.8rem;
	font-family: var(--font-body);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--ink-muted);
}

/* natural-height variant for tall / composite shots */
.work-shot.auto {
	aspect-ratio: auto;
}
.work-shot.auto img {
	height: auto;
	object-fit: contain;
}

/* stack + path (duo columns) */
.duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	margin-top: 2.4rem;
	align-items: start;
}
.duo h3 {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 0.8rem;
}
.duo-lead {
	color: var(--ink-muted);
	font-size: 0.95rem;
	line-height: 1.7;
	margin-bottom: 1.3rem;
}
.path {
	position: relative;
	display: grid;
	gap: 1.5rem;
	padding-left: 1.7rem;
	margin-top: 0.4rem;
}
.path::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: var(--line-strong);
}
.path-item {
	position: relative;
}
.path-item::before {
	content: "";
	position: absolute;
	left: -1.42rem;
	top: 5px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--surface);
	border: 2px solid var(--accent-blu);
	box-shadow: 0 0 0 3px var(--bg-soft);
}
.path-item h4 {
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 0.3rem;
}
.path-item p {
	font-size: 0.9rem;
	color: var(--ink-muted);
	line-height: 1.65;
}

/* CTA banner */
.cta-banner {
	position: relative;
	overflow: hidden;
	text-align: center;
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--bg);
	color: var(--ink);
	padding: clamp(2.4rem, 5vw, 4rem) clamp(1.4rem, 4vw, 3rem);
	box-shadow: none;
}
.cta-banner h2 {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 400;
	color: var(--ink);
	margin-bottom: 1rem;
	position: relative;
	z-index: 1;
	font-style: italic;
}
.cta-banner p {
	color: var(--ink-muted);
	max-width: 56ch;
	margin: 0 auto 1.9rem;
	line-height: 1.7;
	position: relative;
	z-index: 1;
	font-family: var(--font-body);
}
.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	justify-content: center;
	position: relative;
	z-index: 1;
}
.cta-banner .btn-ghost {
	border-color: var(--ink);
	color: var(--ink);
}
.cta-banner .btn-ghost:hover {
	background: var(--ink);
	color: var(--bg);
}

/* phone gallery (mobile-app case) */
.phones {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1rem;
	margin-top: 2.6rem;
}
.phones .work-shot {
	aspect-ratio: auto;
	background: var(--surface);
}
.phones .work-shot img {
	height: auto;
	object-fit: contain;
}
.phone-cap {
	border-top: 1px solid var(--line);
	padding: 0.75rem 0.9rem;
	background: var(--surface);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--ink-muted);
	line-height: 1.5;
}

/* feature mini-cards */
.fcards {
	display: grid;
	gap: 0.9rem;
	margin-top: 1.6rem;
}
.fcard {
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--surface);
	padding: 1.3rem 1.4rem;
	transition:
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.35s ease,
		box-shadow 0.35s ease;
	box-shadow: none;
}
.fcard:hover {
	border-color: var(--accent-soft);
	box-shadow: none;
}
.fcard h3 {
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 0.4rem;
}
.fcard p {
	font-size: 0.9rem;
	color: var(--ink-muted);
	line-height: 1.65;
}

/* steps 4-up modifier */
.steps.s4 {
	grid-template-columns: repeat(4, 1fr);
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(8rem, 13vw, 10rem) 0 2.2rem;
	background: var(--bg);
}
.legal-hero .wrap {
	position: relative;
	z-index: 2;
}
.legal-date {
	font-family: var(--font-body);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: var(--ink-muted);
	font-weight: 600;
}
.back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: 1.6rem;
	transition: color 0.25s ease;
}
.back-link:hover {
	color: var(--accent);
}
.back-link svg {
	width: 14px;
	height: 14px;
}
.legal-body {
	padding-bottom: clamp(4rem, 8vw, 6.5rem);
}
.prose ol {
	display: grid;
	gap: 0.55rem;
	margin: 0 0 1.2rem;
	padding-left: 1.4rem;
	list-style: decimal;
}
.prose ol li::marker {
	color: var(--accent-blu);
}
.prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.4rem;
	font-size: 0.9rem;
}
.prose th,
.prose td {
	padding: 0.7rem 0.9rem;
	text-align: left;
	border-bottom: 1px solid var(--line);
}
.prose th {
	color: var(--ink);
	font-weight: 700;
	background: var(--bg-soft);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
}
.prose td {
	color: var(--ink-muted);
}
.prose code {
	font-family: var(--font-body);
	font-size: 0.85em;
	/* was deep-green text on a teal tint: two unrelated hues in one chip.
	   Inline code is neutral by nature — it carries no state and links
	   nowhere, so it gets no accent at all. */
	color: var(--ink);
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0.1em 0.4em;
	font-weight: 600;
}
.prose .note {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	font-size: 0.8rem;
	color: var(--ink-muted);
}

/* ============================================================
   RESPONSIVE — case & legal
   ============================================================ */
@media (max-width: 1024px) {
	.split,
	.duo {
		grid-template-columns: 1fr;
	}
	.proof {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
	.proof-large {
		grid-row: auto;
	}
	.proof .work-shot {
		aspect-ratio: 16 / 10;
		flex: none;
	}
	.phones {
		grid-template-columns: repeat(3, 1fr);
	}
	.steps.s4 {
		grid-template-columns: repeat(2, 1fr);
	}
	.steps.s4 .step::after {
		display: none;
	}
}
@media (max-width: 640px) {
	.case-hero {
		padding-top: 6.8rem;
	}
	.case-ctas .btn {
		width: 100%;
	}
	.ledger-row {
		grid-template-columns: 1fr;
		gap: 0.5rem;
		padding: 1.2rem 0;
	}
	.phones {
		grid-template-columns: repeat(2, 1fr);
	}
	.steps.s4 {
		grid-template-columns: 1fr;
	}
	.cta-row .btn {
		width: 100%;
	}
}

/* ============================================================
   CONTACT MODAL
   ============================================================ */
#contactModal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1.2rem;
}
#contactModal.open {
	display: flex;
}
#contactModal::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(var(--ink-rgb), 0.58);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	animation: cmFade 0.28s ease;
}
@keyframes cmFade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.contact-modal-card {
	position: relative;
	z-index: 2;
	width: min(520px, 100%);
	max-height: calc(100vh - 2.4rem);
	overflow-y: auto;
	background: var(--surface);
	border: 1px solid var(--ink);
	border-radius: 0;
	box-shadow: 0 30px 80px rgba(var(--ink-rgb), 0.26);
	padding: clamp(1.6rem, 3.5vw, 2.2rem);
	animation: cmRise 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cmRise {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.contact-modal-card .cm-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.4rem;
}
.contact-modal-card .cm-head h2 {
	font-size: clamp(1.4rem, 2.4vw, 1.75rem);
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 0.35rem;
}
.contact-modal-card .cm-head p {
	font-size: 0.88rem;
	color: var(--ink-muted);
	line-height: 1.55;
}
.cm-close {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 0;
	display: grid;
	place-items: center;
	color: var(--ink-muted);
	background: var(--bg-soft);
	border: 1px solid var(--line);
	transition:
		color 0.2s ease,
		background 0.2s ease,
		transform 0.2s ease;
}
.cm-close:hover {
	color: var(--ink);
	background: var(--line);
	transform: rotate(90deg);
}
.cm-close svg {
	width: 18px;
	height: 18px;
}
.contact-modal-card .field {
	margin-bottom: 0.85rem;
}
.contact-modal-card .field.row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.85rem;
}
.contact-modal-card .field.row > div {
	margin-bottom: 0;
}
.contact-modal-card .btn {
	width: 100%;
	margin-bottom: 0.55rem;
}
/* colour comes from the global .btn-wa now; the modal only adds lift */
.contact-modal-card .btn-wa {
	box-shadow: 0 6px 22px rgba(var(--verde-ink-rgb), 0.28);
}
.contact-modal-card .btn-wa:hover {
	box-shadow: 0 12px 32px rgba(var(--verde-ink-rgb), 0.34);
}
/* success state — replaces the form in place so the dialog confirms
   instead of silently disappearing */
.cm-success {
	text-align: center;
	padding: 1.6rem 0 0.4rem;
}
.cm-success:focus {
	outline: none;
}
.cm-success svg {
	width: 44px;
	height: 44px;
	color: var(--verde-ink);
	margin-bottom: 1rem;
}
.cm-success h3 {
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--ink);
	margin-bottom: 0.5rem;
}
.cm-success p {
	font-size: 0.94rem;
	color: var(--ink-muted);
	line-height: 1.65;
	margin-bottom: 1.4rem;
	max-width: 34ch;
	margin-inline: auto;
}

.contact-modal-card .cm-foot {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
	font-size: 0.78rem;
	color: var(--ink-muted);
	line-height: 1.55;
	text-align: center;
}
.contact-modal-card .cm-foot a {
	color: var(--accent);
	font-weight: 600;
}

body.no-scroll {
	overflow: hidden;
}

@media (max-width: 640px) {
	.contact-modal-card .field.row {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.contact-modal-card .field.row > div {
		margin-bottom: 0.85rem;
	}
	.contact-modal-card .field.row > div:last-child {
		margin-bottom: 0;
	}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.rv,
	.rv-rise,
	.rv-media,
	.rv-num,
	.hload {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}
	.rv-media img {
		transform: none !important;
	}
	.steps::before,
	.draw-line::after,
	.hero-rule {
		transform: scaleX(1) !important;
	}
	/* the blueprint field is decoration that moves — drop it entirely
	   rather than freeze it, so there is nothing to distract */
	.hero-grid {
		display: none;
	}
	.contact-modal-card,
	#contactModal::before {
		animation: none;
	}
}