/* Eidos Lab — component & utility styles. Mirrors the DS visual language. */

/* Layout helpers */
.is-narrow { max-width: var(--wp--custom--container-narrow); margin-inline: auto; }
.section-y { padding-block: var(--wp--custom--section-y); }
/* Page hero rhythm — one consistent vertical cadence for every page's first
   band, so entering any page feels part of the same system. Heights stay
   content-driven; only the spacing is unified. */
.pagehead { padding-block: 4.5rem; }

/* Eyebrow / overline (mono, uppercase, wide tracking) */
.eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--caps);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--accent);
	display: flex; align-items: center; gap: .5rem;
	margin: 0 0 .75rem;
}
.has-text-align-center .eyebrow, .eyebrow.has-text-align-center { justify-content: center; }

/* Cards (block style variations attach .is-style-card / -elevated / -flat) */
.is-style-card, .is-style-card-elevated, .is-style-card-flat {
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--surface);
}
.is-style-card { border: 1px solid var(--wp--preset--color--border-subtle); }
.is-style-card-elevated { border: 0; box-shadow: var(--wp--custom--shadow--md); }
.is-style-card-flat { background: var(--wp--preset--color--surface-2); border: 0; }
.has-accent-top { border-top: 3px solid var(--accent); }

/* Brand glyph — the recurring Eidos Lab mark. Cycles the three bauhaus
   primitives (square → circle → triangle) in the current theme's --accent, so
   it reads ultramarine on the corporate pages, teal on BetterWaste, coral on
   StreamWave. A calm, synchronised, colour-coherent signature.
   Static fallback (and reduced-motion): the square alone in --accent. */
.eglyph { display: inline-block; vertical-align: -0.16em; flex: none; }
.eglyph__f { transform-box: fill-box; transform-origin: center; fill: var(--accent); }
.eglyph__ci, .eglyph__tr { opacity: 0; }
/* Glyph frozen on the square in --accent — no shape-cycling, no motion.
   The cycling keyframes below are kept but intentionally not triggered. */
@keyframes eglyph-cycle {
	0%   { opacity: 0; }
	8%   { opacity: 1; }
	28%  { opacity: 1; }
	40%  { opacity: 0; }
	100% { opacity: 0; }
}

/* Card grids — cards fill their column so a row of cards has equal height
   regardless of how much copy each one holds. Scoped to .cards so 2-column
   text+card comparisons and stat bands are never forced to stretch. */
.cards > .wp-block-column { display: flex; flex-direction: column; }
.cards > .wp-block-column > .wp-block-group { flex: 1 1 auto; }

/* Product framing statement — bauhaus accent, no container (replaces boxed callout) */
.pstatement { display: flex; gap: 1.5rem; align-items: flex-start; }
.pstatement__glyph { flex: none; margin-top: 0.35rem; }
.pstatement__title { font-size: var(--wp--preset--font-size--2-xl); line-height: 1.14; margin: 0; }
.pstatement__lede { margin: 0.9rem 0 0; color: var(--wp--preset--color--text-muted); max-width: 54ch; }
@media (max-width: 640px) {
	.pstatement { gap: 1rem; }
	.pstatement__glyph { width: 32px; height: auto; margin-top: 0.2rem; }
}

/* Interactive card lift */
.is-interactive { transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1); }
.is-interactive:hover { transform: translateY(-3px); box-shadow: var(--wp--custom--shadow--lg); }

/* Buttons: hover/press + secondary/ghost variants */
.wp-block-button__link { transition: background-color .15s, border-color .15s, transform .08s; }
.wp-block-button__link:hover { background-color: var(--accent-hover); }
.wp-block-button__link:active { background-color: var(--accent-press); transform: translateY(1px); }
.wp-block-button.is-style-secondary .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--border-strong);
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover { border-color: var(--wp--preset--color--ink); background: var(--accent-tint); }
.wp-block-button.is-style-ghost .wp-block-button__link { background: transparent; color: var(--accent); }
.wp-block-button.is-style-ghost .wp-block-button__link:hover { background: var(--accent-tint); }
/* Secondary/ghost buttons on dark (ink) sections need light text */
.has-ink-background-color .is-style-secondary .wp-block-button__link {
	color: var(--wp--preset--color--off-white); border-color: rgba(255, 255, 255, .35);
}
.has-ink-background-color .is-style-secondary .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--off-white); background: rgba(255, 255, 255, .08);
}

/* Lead list with accent ticks */
.is-style-lead-list { list-style: none; padding: 0; margin: 0; }
.is-style-lead-list li { position: relative; padding-left: 1.9rem; margin-block: .6rem; line-height: var(--wp--custom--leading--relaxed); }
.is-style-lead-list li::before {
	content: ""; position: absolute; left: 0; top: .15rem; width: 1.25rem; height: 1.25rem;
	background: var(--accent); -webkit-mask: var(--eidos-check) center/contain no-repeat; mask: var(--eidos-check) center/contain no-repeat;
}
:root { --eidos-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* Mock UI panel ("honest" product mock) */
.mock { border: 1px solid var(--wp--preset--color--border-subtle); border-radius: var(--wp--custom--radius--lg); background: var(--wp--preset--color--surface); box-shadow: var(--wp--custom--shadow--lg); overflow: hidden; }
.mock__bar { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-bottom: 1px solid var(--wp--preset--color--border-subtle); background: var(--wp--preset--color--surface-2); font-family: var(--wp--preset--font-family--mono); font-size: 12px; color: var(--wp--preset--color--text-muted); }
.mock__dots { display: inline-flex; gap: 5px; }
.mock__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--wp--preset--color--border-strong); }
.mock__title { margin-left: auto; }
.mock__row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--wp--preset--color--border-subtle); font-size: 14px; }
.mock__row:last-child { border-bottom: 0; }
.mock__k { color: var(--wp--preset--color--text-muted); }
/* Product-screen enrichments — active selection, metric bar, AI annotation */
.mock__row.is-active { background: var(--accent-tint); box-shadow: inset 3px 0 0 var(--accent); }
.mock__row.is-active .mock__k { color: var(--wp--preset--color--ink); font-weight: 600; }
.mock__foot { display: grid; gap: .85rem; padding: .9rem 1rem 1rem; }
.mock__meter-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--wp--preset--color--text-muted); }
.mock__meter-val { font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: 15px; color: var(--accent); }
.mock__bararea { margin-top: .45rem; height: 7px; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--surface-2); overflow: hidden; }
.mock__bararea > span { display: block; height: 100%; border-radius: var(--wp--custom--radius--pill); background: var(--accent); }
.mock__stats { display: flex; flex-wrap: wrap; gap: 1.25rem; font-family: var(--wp--preset--font-family--mono); font-size: 12px; color: var(--wp--preset--color--text-muted); }
.mock__stats b { color: var(--wp--preset--color--ink); font-weight: 700; }
.mock__ai { display: flex; align-items: center; gap: .55rem; padding: .55rem .75rem; border-radius: var(--wp--custom--radius--md); background: var(--accent-tint); color: var(--accent-hover); font-size: 13px; }
.mock__ai-tag { flex: none; font-family: var(--wp--preset--font-family--mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: .05rem .3rem; }
.mock__badge { font-family: var(--wp--preset--font-family--mono); font-size: 12px; padding: .15rem .5rem; border-radius: var(--wp--custom--radius--pill); background: var(--accent-tint); color: var(--accent); }
.mock__badge--ok { background: var(--wp--preset--color--success-bg); color: var(--wp--preset--color--success); }

/* Sticky header with the ONE allowed blur.
   The blur sits on ::before, not on .eidos-header itself: backdrop-filter makes an
   element the containing block for its fixed-position descendants, and that trapped
   the mobile menu overlay (core renders it as position:fixed;inset:0) inside the
   header bar — only the first voice was visible. Content is lifted to z-index 1 so
   the blur layer stays behind it without needing a negative z-index. */
.eidos-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--wp--preset--color--border-subtle); }
.eidos-header::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: rgba(250,250,247,.8);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.eidos-header > * { position: relative; z-index: 1; }

/* Footer (dark / ink) */
.eidos-footer { color: var(--wp--preset--color--off-white); }
.eidos-footer__brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.eidos-footer__brand span { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.4rem; letter-spacing: var(--wp--custom--tracking--tight); color: var(--wp--preset--color--off-white); }
.eidos-footer__logo { display: inline-block; width: 108px; height: 32px; background: url(../brand/logo-orizzontale-negative.svg) left center / contain no-repeat; }
.eidos-footer__tag { max-width: 34ch; line-height: var(--wp--custom--leading--relaxed); color: var(--wp--preset--color--text-subtle); }
.eidos-footer__head { font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: var(--wp--custom--tracking--caps); font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--text-subtle); margin: 0 0 1.25rem; }
.eidos-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.eidos-footer__links a { color: var(--wp--preset--color--border); text-decoration: none; transition: color .15s ease; }
.eidos-footer__links a:hover { color: var(--wp--preset--color--off-white); }
.eidos-footer__bottom { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); gap: 1rem; align-items: center; }
.eidos-footer__bottom p { margin: 0; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--text-subtle); }
.eidos-footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; font-size: var(--wp--preset--font-size--xs); }
.eidos-footer__legal a { color: var(--wp--preset--color--text-subtle); text-decoration: none; }
.eidos-footer__legal a:hover { color: var(--wp--preset--color--off-white); }
@media (max-width: 781px) { .eidos-footer__bottom { flex-direction: column; align-items: flex-start; } }

/* Contact form — the whole form is a grid, so every gap comes from one scale
   instead of per-field margins. box-sizing is pinned locally because the theme
   inherits the browser default (content-box): without it a 100%-wide field adds
   its padding on top of the column and spills over the neighbour. */
.eidos-form { display: grid; gap: 1.25rem; }
.eidos-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.eidos-form__field { display: grid; gap: .4rem; align-content: start; }
.eidos-form label { font-size: var(--wp--preset--font-size--sm); font-weight: 600; }
.eidos-form__opt { font-weight: 400; color: var(--wp--preset--color--text-muted); }
.eidos-form input:not([type="checkbox"]), .eidos-form select, .eidos-form textarea {
	box-sizing: border-box; width: 100%; min-width: 0; padding: .7rem .85rem;
	font: inherit; line-height: 1.45; color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border-strong); border-radius: var(--wp--custom--radius--md);
	transition: border-color .12s ease-out;
}
.eidos-form ::placeholder { color: var(--wp--preset--color--text-muted); opacity: 1; }
.eidos-form textarea { resize: vertical; min-height: 8.5rem; }
.eidos-form input:hover, .eidos-form select:hover, .eidos-form textarea:hover { border-color: var(--wp--preset--color--ink); }
.eidos-form input:focus, .eidos-form select:focus, .eidos-form textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-color: var(--accent); }
.eidos-form__hp { position: absolute; left: -9999px; }

/* Select — the native arrow is replaced by the brand triangle, so the one
   decorative-looking mark in the form is actually its affordance. */
.eidos-form__select { position: relative; }
.eidos-form__select select { appearance: none; padding-right: 2.6rem; }
.eidos-form__select::after {
	content: ""; position: absolute; right: 1rem; top: 50%; margin-top: -3px;
	width: 10px; height: 7px; background: var(--accent);
	clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none;
}

/* Consent — a real square instead of the 13px native control. */
.eidos-form__consent { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
.eidos-form__consent label { font-weight: 400; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--text-muted); line-height: 1.5; }
.eidos-form__consent input[type="checkbox"] {
	appearance: none; margin: 0; width: 20px; height: 20px; display: grid; place-content: center; cursor: pointer;
	background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--xs); transition: background-color .12s ease-out, border-color .12s ease-out;
}
.eidos-form__consent input[type="checkbox"]:hover { border-color: var(--wp--preset--color--ink); }
.eidos-form__consent input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.eidos-form__consent input[type="checkbox"]::before {
	content: ""; width: 11px; height: 11px; background: var(--accent-contrast); transform: scale(0); transition: transform .12s ease-out;
	clip-path: polygon(14% 47%, 0 61%, 39% 100%, 100% 19%, 86% 5%, 39% 72%);
}
.eidos-form__consent input[type="checkbox"]:checked::before { transform: scale(1); }
.eidos-form__actions { margin-top: .25rem; }

/* Form feedback — a danger square, not a boxed callout. */
.eidos-form__error { display: flex; gap: .6rem; align-items: flex-start; margin: 0; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--danger); }
.eidos-form__error::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: .38rem; background: currentColor; }
.eidos-confirm__label { color: var(--wp--preset--color--success); }
.eidos-confirm__title { font-size: var(--wp--preset--font-size--xl); line-height: 1.25; margin: 0; }
.eidos-confirm__text { margin: .75rem 0 0; color: var(--wp--preset--color--text-muted); }

/* Contact spec list — label/value pairs on hairlines, the same quiet idiom as
   the product spec panels. No icons: the labels already say what they are. */
.cspec { margin: 0; }
.cspec__row { display: grid; gap: .3rem; padding: 1.15rem 0; border-top: 1px solid var(--wp--preset--color--border-subtle); }
.cspec__row:first-child { padding-top: 0; border-top: 0; }
.cspec dt {
	font-family: var(--wp--preset--font-family--mono); text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--caps); font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-muted);
}
.cspec dd { margin: 0; color: var(--wp--preset--color--ink); }
.cspec__row--lead dd { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: var(--wp--preset--font-size--xl); line-height: 1.2; }

/* Focus ring for interactive elements */
a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

/* Responsive + reduced motion */
@media (max-width: 880px) { .eidos-form__row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* Brand wordmark (header) */
.eidos-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.eidos-brand:hover { text-decoration: none; }
.eidos-brand__name { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.4rem; letter-spacing: var(--wp--custom--tracking--tight); color: var(--wp--preset--color--ink); line-height: 1; }
.eidos-brand__accent { color: var(--accent); }
.eidos-brand__logo { display: inline-block; width: 108px; height: 32px; background: url(../brand/logo-orizzontale.svg) left center / contain no-repeat; transition: opacity .15s ease; }
.eidos-brand:hover .eidos-brand__logo { opacity: .82; }

/* Header action cluster (lang toggle + CTA) */
.eidos-header__actions { align-items: center; }
.eidos-header__cta .wp-block-button__link { padding: .55rem 1.1rem; font-size: var(--wp--preset--font-size--sm); white-space: nowrap; }

/* Mobile: brand left, language pill and hamburger pinned right. The CTA steps aside —
   the overlay carries a Contatti link — but the switcher has to stay reachable on a
   bilingual site, so __left dissolves with display:contents and the three survivors are
   ordered directly in the header row. */
@media (max-width: 781px) {
	.eidos-header .eidos-header__left { display: contents; }
	.eidos-header .eidos-brand { order: 1; margin-right: auto; }
	.eidos-header .eidos-header__actions { order: 2; }
	.eidos-header .eidos-header__left > .wp-block-navigation { order: 3; }
	.eidos-header .eidos-header__actions .wp-block-buttons { display: none; }
}

/* Mobile menu overlay — core gives it position:fixed + a bare white background,
   so the panel and its links are dressed here. Only reachable below 600px, where
   core shows the hamburger. */
.eidos-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--off-white);
	padding: 1.15rem clamp(1.25rem, 6vw, 2rem) 2.5rem;
}
.eidos-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%; margin-top: 3.25rem; gap: 0;
}
.eidos-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%; border-bottom: 1px solid var(--wp--preset--color--border-subtle);
}
.eidos-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block; width: 100%; padding: .95rem 0;
	font-family: var(--wp--preset--font-family--display); font-weight: 600;
	font-size: var(--wp--preset--font-size--lg); letter-spacing: var(--wp--custom--tracking--snug);
	color: var(--wp--preset--color--ink); text-decoration: none;
}
.eidos-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content { color: var(--accent); }
.eidos-header .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--ink); }

/* Language switcher — IT/EN pill toggle */
.eidos-lang {
	list-style: none; display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 3px;
	background: var(--wp--preset--color--surface-2); border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
}
.eidos-lang li { margin: 0; list-style: none; }
.eidos-lang a {
	display: block; padding: .3rem .7rem; border-radius: var(--wp--custom--radius--pill); line-height: 1;
	color: var(--wp--preset--color--text-muted); text-decoration: none;
}
.eidos-lang a:hover { color: var(--wp--preset--color--ink); }
.eidos-lang .current-lang a { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--off-white); }

/* Heading emphasis: accent, not italic (DS hero/pagehead titles) */
h1 em { font-style: normal; color: var(--accent); }

/* Page head — etymology note (Chi siamo) */
.pagehead__name {
	border-left: 2px solid var(--accent); padding-left: 1.25rem;
	color: var(--wp--preset--color--text-muted); max-width: 54ch; line-height: var(--wp--custom--leading--relaxed);
}
.pagehead__name em { font-style: normal; font-family: var(--wp--preset--font-family--display); font-weight: 600; color: var(--wp--preset--color--ink); }

/* Mock badge — warning / neutral tones */
.mock__badge--warn { background: #F6EEDA; color: var(--wp--preset--color--warning); }
.mock__badge--muted { background: var(--wp--preset--color--surface-2); color: var(--wp--preset--color--text-muted); }

/* Eyebrow on dark (ink) sections: lightened accent for contrast */
.has-ink-background-color .eyebrow { color: color-mix(in oklab, var(--accent) 70%, white); }

/* Trust strip (home) */
.trust { border-block: 1px solid var(--wp--preset--color--border-subtle); }
.trust__label {
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs);
	letter-spacing: var(--wp--custom--tracking--caps); text-transform: uppercase;
	color: var(--wp--preset--color--text-subtle); margin: 0;
}
.trust__logo {
	font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: var(--wp--preset--font-size--lg);
	letter-spacing: var(--wp--custom--tracking--snug); color: var(--wp--preset--color--text-subtle); margin: 0;
}

/* Foundation model chips */
.foundation-models { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1.75rem 0 0; }
.foundation-models .lbl {
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs);
	letter-spacing: var(--wp--custom--tracking--caps); text-transform: uppercase; color: var(--wp--preset--color--text-muted);
	margin-right: .5rem;
}
.mchip {
	display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem;
	border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--sm); font-weight: 500;
	background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink);
}
.mchip--lead { border-color: color-mix(in oklab, var(--accent) 45%, var(--wp--preset--color--border)); color: var(--accent); }
.mchip__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* On-prem layered stack diagram */
.stack__bound { position: relative; border: 1.5px dashed var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--lg); padding: 1.75rem 1.5rem 1.5rem; }
.stack__tag {
	position: absolute; top: -11px; left: 1.5rem; background: var(--wp--preset--color--surface); padding: 0 .75rem;
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs);
	letter-spacing: var(--wp--custom--tracking--caps); text-transform: uppercase; color: var(--accent);
	white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.stack__layers { display: flex; flex-direction: column; gap: 10px; }
.stack__layer {
	display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--border-subtle); border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--off-white);
}
.stack__layer--accent { border-color: color-mix(in oklab, var(--accent) 45%, var(--wp--preset--color--border-subtle)); background: color-mix(in oklab, var(--accent) 7%, var(--wp--preset--color--off-white)); }
.stack__ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--wp--custom--radius--sm); background: var(--wp--preset--color--surface-2); color: var(--wp--preset--color--ink); }
.stack__layer--accent .stack__ic { background: var(--accent-tint); color: var(--accent); }
.stack__name { font-weight: 600; }
.stack__desc { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--text-muted); margin-top: 1px; }
.stack__flow { display: grid; place-items: center; color: var(--wp--preset--color--border-strong); height: 8px; }
.stack__flow svg { transform: rotate(90deg); }
.stack__foot { margin-top: 1.25rem; display: flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--text-muted); }
.stack__foot svg { color: var(--wp--preset--color--success); flex: none; }

/* Principles band (on dark) */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem; }
@media (max-width: 880px) { .principles { grid-template-columns: 1fr; } }
.principle { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.16); }
.principle__no { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--sm); color: color-mix(in oklab, var(--accent) 70%, white); }
.principle__title {
	font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: var(--wp--preset--font-size--xl);
	line-height: 1.2; letter-spacing: var(--wp--custom--tracking--tight); color: #fff; margin: .75rem 0 0; text-wrap: balance;
}
.principle__desc { margin: .75rem 0 0; font-size: var(--wp--preset--font-size--sm); line-height: var(--wp--custom--leading--relaxed); color: rgba(255,255,255,0.62); }

/* Team members (Chi siamo) */
.eidos-avatar {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 56px; height: 56px; border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface-2); color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.15rem;
}
.eidos-avatar--accent { background: var(--accent); color: var(--accent-contrast); }
.member__head { display: flex; align-items: center; gap: 1rem; }
.member__name { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: var(--wp--preset--font-size--xl); letter-spacing: var(--wp--custom--tracking--tight); }
.member__role { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); letter-spacing: var(--wp--custom--tracking--caps); text-transform: uppercase; color: var(--accent); margin-top: 5px; }
.member__desc { color: var(--wp--preset--color--text-muted); line-height: var(--wp--custom--leading--relaxed); }
.member__link {
	display: inline-flex; align-items: center; gap: .5rem;
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--sm); font-weight: 500;
	color: var(--wp--preset--color--ink); text-decoration: none;
}
.member__link:hover { color: var(--accent); text-decoration: none; }

/* Regulatory list — conformità card (Consulenza) */
.reglist { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.reglist li { padding: 1rem 0; border-top: 1px solid var(--wp--preset--color--border-subtle); }
.reglist li:first-child { padding-top: 0; border-top: 0; }
.reglist__k { display: block; font-family: var(--wp--preset--font-family--mono); font-weight: 600; font-size: var(--wp--preset--font-size--sm); letter-spacing: var(--wp--custom--tracking--caps); color: var(--accent); }
.reglist__v { display: block; margin-top: .35rem; font-size: var(--wp--preset--font-size--sm); line-height: var(--wp--custom--leading--relaxed); color: var(--wp--preset--color--text-muted); }
.reglist__foot { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--wp--preset--color--border-subtle); font-size: var(--wp--preset--font-size--sm); line-height: var(--wp--custom--leading--relaxed); color: var(--wp--preset--color--text-muted); }
.reglist__foot a { color: var(--accent); text-decoration: none; }
.reglist__foot a:hover { text-decoration: underline; }

/* Values trio — la nostra voce (Consulenza) */
.value__k { font-family: var(--wp--preset--font-family--mono); font-weight: 600; font-size: var(--wp--preset--font-size--sm); letter-spacing: var(--wp--custom--tracking--caps); color: var(--accent); }
.value__v { margin: .5rem 0 0; color: var(--wp--preset--color--text-muted); line-height: var(--wp--custom--leading--relaxed); }

/* Perimeter hero diagram (Consulenza) — the page's signature */
.perimeter-hero { border-bottom: 1px solid var(--wp--preset--color--border-subtle); }
.perimeter-figure { margin: 0; }
.pdiag { display: block; width: 100%; max-width: 100%; height: auto; }
.pdiag text { font-family: var(--wp--preset--font-family--body); }
.pdiag .t { font-family: var(--wp--preset--font-family--display); letter-spacing: -0.01em; }
.pdiag .m { font-family: var(--wp--preset--font-family--mono); }
.pdiag .cap { letter-spacing: 0.08em; text-transform: uppercase; }

@media (prefers-reduced-motion: no-preference) {
	.pdiag__perim { stroke-dasharray: 100; stroke-dashoffset: 100; animation: pdiag-draw 1s ease forwards; }
	.pdiag__out { opacity: 0; animation: pdiag-fade .6s ease .2s forwards; }
	.pdiag__ticks { opacity: 0; animation: pdiag-fade .5s ease .95s forwards; }
	.pdiag__legend { opacity: 0; animation: pdiag-fade .5s ease 1s forwards; }
	.pdiag__na { opacity: 0; animation: pdiag-rise .55s ease 1.1s forwards; }
	.pdiag__nb { opacity: 0; animation: pdiag-rise .55s ease 1.25s forwards; }
	.pdiag__infra { opacity: 0; animation: pdiag-fade .5s ease 1.35s forwards; }
	.pdiag__link { opacity: 0; animation: pdiag-fade .5s ease 1.45s forwards; }
	.pdiag__block { opacity: 0; animation: pdiag-fade .5s ease 1.6s forwards; }
}
@keyframes pdiag-draw { to { stroke-dashoffset: 0; } }
@keyframes pdiag-fade { to { opacity: 1; } }
@keyframes pdiag-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Product concept diagrams (StreamWave loop / BetterWaste flow) — reuse .pdiag base + keyframes */
.product-figure { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
	.svloop__n1, .svloop__n2, .svloop__n3, .svloop__n4, .svloop__loop { opacity: 0; }
	.svloop__n1 { animation: pdiag-rise .5s ease .10s forwards; }
	.svloop__n2 { animation: pdiag-rise .5s ease .24s forwards; }
	.svloop__n3 { animation: pdiag-rise .5s ease .38s forwards; }
	.svloop__n4 { animation: pdiag-rise .5s ease .52s forwards; }
	.svloop__loop { animation: pdiag-fade .6s ease .82s forwards; }
	.bwflow__n1, .bwflow__n2, .bwflow__n3, .bwflow__n4 { opacity: 0; }
	.bwflow__n1 { animation: pdiag-rise .5s ease .10s forwards; }
	.bwflow__n2 { animation: pdiag-rise .5s ease .26s forwards; }
	.bwflow__n3 { animation: pdiag-rise .5s ease .42s forwards; }
	.bwflow__n4 { animation: pdiag-rise .5s ease .58s forwards; }
}