/* ============================================================================
   HILO IMPACT — main stylesheet
   ----------------------------------------------------------------------------
   Architettura
   - Custom properties scoped a body.hilo-manifesto (palette unica); body.hilo-portfolio aggiunge solo soft-tweaks contestuali
   - Eco-idle dark theme = override delle stesse vars sotto [data-hilo-eco="on"]
   - Nessuna saturazione > 0.02 nei toni "warm white"
   - Type: Fredoka (titoli — manuale brand), Source Serif 4 (body Manifesto),
     IBM Plex Sans + Mono (Sistema)
============================================================================ */

/* ── 0. Reset minimo ────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5, p, figure, dl, dd { margin: 0; }
input, textarea, button, select { font: inherit; color: inherit; }

/* ── 1. Custom properties — MANIFESTO (light, default) ──────────────────── */
.hilo-manifesto {
    --hilo-bg:        #F1EBDD;
    --hilo-bg-alt:    #EAE1CC;
    --hilo-ink:       #1B201A;
    --hilo-mute:      #5E5A4E;
    --hilo-rule:      rgba(27,32,26,0.16);

    --hilo-green:     #809E78;
    --hilo-green-deep:#45522D;
    --hilo-green-soft:#AAC689;
    --hilo-terra:     #976439;
    --hilo-sky:       #ABCAF6;

    --hilo-font-display: 'Fredoka', system-ui, sans-serif;
    --hilo-font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
    --hilo-font-mono:    'IBM Plex Mono', ui-monospace, monospace;

    background: var(--hilo-bg);
    color: var(--hilo-ink);
    font-family: var(--hilo-font-body);
    font-size: 17px;
    line-height: 1.55;
}

/* MANIFESTO — eco dark variant */
.hilo-manifesto[data-hilo-eco="on"] {
    --hilo-bg:        #1B201A;
    --hilo-bg-alt:    #252B23;
    --hilo-ink:       #E7E1D2;
    --hilo-mute:      #9AA396;
    --hilo-rule:      rgba(231,225,210,0.18);
    --hilo-green:     #A8C09F;
    --hilo-green-deep:#809E78;
    --hilo-green-soft:#AAC689;
    --hilo-terra:     #C28A5C;
}

/* ── 2. Portfolio context — solo soft-tweaks (palette/font ereditati da Manifesto) ─ */
.hilo-portfolio {
    --hilo-rule-soft: rgba(27,32,26,0.10);
}
.hilo-portfolio[data-hilo-eco="on"] {
    --hilo-rule-soft: rgba(231,225,210,0.12);
}

/* Smooth theme transition (saltato se prefers-reduced-motion) */
body, .hilo-nav, .hilo-footer, .hilo-card, .hilo-project-row {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── 3. Typography utilities ────────────────────────────────────────────── */
.hilo-eyebrow {
    font-family: var(--hilo-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hilo-green);
    margin: 0 0 28px;
}
.hilo-accent { color: var(--hilo-terra); font-style: italic; font-weight: 400; }
.hilo-accent--green { color: var(--hilo-green); font-style: normal; }
/* Variant per l'hero homepage: peso e contrasto maggiori sul concetto
   differenziante "vantaggio competitivo" (su sfondo cream il verde
   stacca più del terracotta). */
.hilo-accent--hero { color: var(--hilo-green); font-style: normal; font-weight: 600; }
/* Prima riga del titolo hero in regular per dare priorità visiva alla seconda */
.hilo-hero__title-lede { font-weight: 300; }

::selection { background: var(--hilo-green); color: var(--hilo-bg); }

/* ── 4. Skip link + layout container ────────────────────────────────────── */
.hilo-skiplink {
    position: absolute; left: -9999px; top: 0;
    background: var(--hilo-ink); color: var(--hilo-bg);
    padding: 12px 18px; z-index: 100;
}
.hilo-skiplink:focus { left: 16px; top: 16px; }

.hilo-main { display: block; }

/* ── 5. Nav (header) ────────────────────────────────────────────────────── */
.hilo-nav {
    border-bottom: 1px solid var(--hilo-rule);
    background: var(--hilo-bg);
    position: sticky; top: 0; z-index: 50;
}
.hilo-nav__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px;
    padding: 22px 56px;
    max-width: 1600px; margin: 0 auto;
}
.hilo-wordmark {
    display: inline-flex; align-items: center;
    line-height: 1;
}
.hilo-wordmark__img { height: 70px; width: auto; display: block; }
.hilo-wordmark--footer .hilo-wordmark__img { height: 56px; }
/* Light bg → mostra logo a colori. Eco dark → mostra negativo. */
.hilo-wordmark__img--dark { display: none; }
[data-hilo-eco="on"] .hilo-wordmark__img--light { display: none; }
[data-hilo-eco="on"] .hilo-wordmark__img--dark  { display: block; }
.custom-logo { max-height: 70px; width: auto; }

.hilo-nav__menu {
    display: flex; gap: 28px;
}
.hilo-nav__menu a {
    font-family: var(--hilo-font-display);
    font-weight: 400; font-size: 15px;
    color: var(--hilo-mute);
    padding-bottom: 2px;
    border-bottom: 1.5px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.hilo-nav__menu a:hover, .hilo-nav__menu .current-menu-item a, .hilo-nav__menu .current_page_item a {
    color: var(--hilo-ink); border-bottom-color: var(--hilo-green);
}

.hilo-nav__actions { display: flex; align-items: center; gap: 10px; }

/* Eco toggle pill */
.hilo-eco-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--hilo-rule);
    background: transparent;
    color: var(--hilo-ink);
    padding: 5px 11px 5px 8px;
    border-radius: 999px;
    font-family: var(--hilo-font-mono);
    font-size: 10.5px; letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.hilo-eco-toggle__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--hilo-ink);
    transition: background-color .2s ease, box-shadow .2s ease;
}
.hilo-eco-toggle[aria-pressed="true"] {
    background: var(--hilo-green); color: #0E140F; border-color: var(--hilo-green);
}
.hilo-eco-toggle[aria-pressed="true"] .hilo-eco-toggle__dot {
    background: #0E140F; box-shadow: 0 0 0 3px rgba(14,20,15,0.18);
}

/* Auto-trigger blink: il bordo del toggle pulsa per segnalare che eco è
   stato attivato in automatico dopo inattività (l'utente può cliccare per
   tornare in light). Applicato via JS sulla classe --blink. */
@keyframes hiloEcoBlink {
    0%, 100% { box-shadow: 0 0 0 0 rgba(168, 192, 159, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(168, 192, 159, 0.45); }
}
.hilo-eco-toggle.hilo-eco-toggle--blink {
    animation: hiloEcoBlink 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .hilo-eco-toggle.hilo-eco-toggle--blink {
        animation: none;
        outline: 2px solid var(--hilo-green);
        outline-offset: 3px;
    }
}

/* Lang pill — stile uguale a .hilo-eco-toggle, container con bottoni segmentati */
.hilo-lang {
    display: inline-flex; align-items: center; gap: 2px;
    border: 1px solid var(--hilo-rule);
    border-radius: 999px; padding: 3px;
    background: transparent;
}
.hilo-lang__btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 10px; border-radius: 999px;
    font-family: var(--hilo-font-mono);
    font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--hilo-mute);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.hilo-lang__btn:hover { color: var(--hilo-ink); }
.hilo-lang__btn.is-active {
    background: var(--hilo-green);
    color: #0E140F;
}
.hilo-lang__btn.is-active:hover { color: #0E140F; }

/* ── 6. Buttons ─────────────────────────────────────────────────────────── */
.hilo-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 11px 22px;
    font-family: var(--hilo-font-display); font-weight: 500; font-size: 14px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    transition: transform .15s ease, background-color .2s ease, color .2s ease;
}
.hilo-btn:hover { transform: translateY(-1px); }
.hilo-btn--primary { background: var(--hilo-ink); color: var(--hilo-bg); }
.hilo-btn--ghost { border-color: var(--hilo-rule); color: var(--hilo-ink); background: transparent; }
.hilo-btn--lg { padding: 16px 32px; font-size: 16px; }
.hilo-btn--square { border-radius: 0; padding: 14px 26px; font-family: var(--hilo-font-body); }

/* ── 7. Photo slot placeholder ──────────────────────────────────────────── */
.hilo-photo {
    position: relative; overflow: hidden;
    width: 100%;
}
.hilo-photo--placeholder { background-color: #E8DFCF; }
.hilo-photo--warm  { background-image: repeating-linear-gradient(135deg, #E8DFCF 0 14px, #DDD0B6 14px 28px); }
.hilo-photo--cool  { background-image: repeating-linear-gradient(135deg, #DCE4DC 0 14px, #C7D4C3 14px 28px); }
.hilo-photo--sand  { background-image: repeating-linear-gradient(135deg, #E6D7C2 0 14px, #D5C2A6 14px 28px); }
.hilo-photo--sky   { background-image: repeating-linear-gradient(135deg, #D8E4F3 0 14px, #C2D3EA 14px 28px); }
.hilo-photo--olive { background-image: repeating-linear-gradient(135deg, #D0D6BD 0 14px, #BAC4A2 14px 28px); }
.hilo-photo--paper { background-image: repeating-linear-gradient(135deg, #EFE9DD 0 14px, #E2DAC8 14px 28px); }
.hilo-photo--circle { border-radius: 50%; }
.hilo-photo__label {
    position: absolute; left: 14px; bottom: 12px;
    font-family: var(--hilo-font-mono); font-size: 10px;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: #7A6A4A;
    background: rgba(255,255,255,0.55);
    padding: 3px 7px; border-radius: 2px;
}
.hilo-photo--bottomright .hilo-photo__label { left: auto; right: 14px; }
.hilo-photo--topleft .hilo-photo__label { top: 12px; bottom: auto; }
.hilo-photo--topright .hilo-photo__label { top: 12px; right: 14px; left: auto; bottom: auto; }
[data-hilo-eco="on"] .hilo-photo--placeholder { opacity: 0.7; }
[data-hilo-eco="on"] .hilo-photo__label { background: rgba(0,0,0,0.45); color: #DDD0B6; }

.hilo-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── 8. Section heading helper ──────────────────────────────────────────── */
.hilo-section-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 40px; gap: 24px; flex-wrap: wrap;
}
.hilo-section-h {
    font-family: var(--hilo-font-display); font-weight: 500;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05; letter-spacing: -0.02em; color: var(--hilo-ink);
    margin: 0; text-wrap: pretty;
}
.hilo-section-head .hilo-eyebrow { margin: 0; }

/* ── 9. Home — Hero ─────────────────────────────────────────────────────── */
.hilo-home > section { max-width: 1600px; margin: 0 auto; }
.hilo-hero { padding: 64px 56px 80px; }
.hilo-hero__title {
    font-family: var(--hilo-font-display);
    font-weight: 400;
    font-size: clamp(48px, 8vw, 96px);
    line-height: 0.97; letter-spacing: -0.02em;
    color: var(--hilo-ink);
    max-width: 1080px;
    text-wrap: balance;
}
.hilo-hero__grid {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px;
    margin-top: 56px; align-items: start;
}
.hilo-hero__lede {
    font-family: var(--hilo-font-body); font-size: 22px; line-height: 1.45;
    max-width: 640px; color: var(--hilo-ink);
}
.hilo-hero__lede strong { color: var(--hilo-green-deep); font-weight: 600; }
.hilo-hero__facts {
    border-left: 1px solid var(--hilo-rule);
    padding-left: 28px;
    font-family: var(--hilo-font-mono); font-size: 12.5px;
    letter-spacing: 0.03em; line-height: 1.9; color: var(--hilo-mute);
}
.hilo-hero__facts-h {
    font-family: var(--hilo-font-mono); font-size: 12.5px; font-weight: 400;
    color: var(--hilo-ink); margin: 0;
}
.hilo-hero__facts-h + ul { margin-bottom: 14px; }

/* ── 10. Home — band, intro ─────────────────────────────────────────────── */
.hilo-band { padding: 0 56px 80px; }
/* Desktop: l'immagine reale rispetta le sue proporzioni naturali — niente crop.
   Il placeholder fallback (.hilo-photo) resta a 420px fissi. */
.hilo-band .hilo-photo { height: 420px; }
.hilo-band__figure { margin: 0; width: 100%; line-height: 0; }
.hilo-band__img {
    display: block;
    width: 100%;
    height: auto;
}
/* Mobile: come prima, banda fissa 420px con cover crop */
@media (max-width: 700px) {
    .hilo-band__figure { height: 420px; overflow: hidden; }
    .hilo-band__img { height: 100%; object-fit: cover; }
}
.hilo-intro {
    padding: 70px 56px;
    background: var(--hilo-bg-alt);
    border-top: 1px solid var(--hilo-rule);
    border-bottom: 1px solid var(--hilo-rule);
}
.hilo-intro__inner {
    display: grid; grid-template-columns: 0.35fr 1fr; gap: 64px;
}
.hilo-intro__inner .hilo-eyebrow { padding-top: 12px; margin: 0; }
.hilo-intro__lede {
    font-family: var(--hilo-font-body); font-size: 26px; line-height: 1.42;
    color: var(--hilo-ink); max-width: 880px; text-wrap: pretty;
}
.hilo-intro__body {
    font-size: 17px; line-height: 1.6; color: var(--hilo-mute);
    margin-top: 26px; max-width: 760px;
}
.hilo-intro__pull {
    font-family: var(--hilo-font-display); font-weight: 500; font-size: 22px;
    line-height: 1.35; color: var(--hilo-ink);
    margin-top: 34px; max-width: 720px;
}

/* ── 11. Home — services cards ──────────────────────────────────────────── */
.hilo-services, .hilo-projects-preview, .hilo-cta-final { padding: 80px 56px; }
.hilo-cards {
    display: grid; gap: 24px;
}
.hilo-cards--3 { grid-template-columns: repeat(3, 1fr); }
.hilo-card {
    padding: 36px 28px 32px;
    background: var(--hilo-bg);
    border: 1px solid var(--hilo-rule);
    display: flex; flex-direction: column; gap: 22px;
    min-height: 320px;
}
.hilo-card__head { display: flex; justify-content: space-between; align-items: center; }
.hilo-card__num { font-family: var(--hilo-font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--hilo-mute); }
.hilo-card__dot { width: 14px; height: 14px; border-radius: 50%; }
.hilo-card__dot--green     { background: var(--hilo-green); }
.hilo-card__dot--terra     { background: var(--hilo-terra); }
.hilo-card__dot--greendeep { background: var(--hilo-green-deep); }
.hilo-card__dot--sky       { background: var(--hilo-sky); }
.hilo-card__title {
    font-family: var(--hilo-font-display); font-weight: 500;
    font-size: 26px; line-height: 1.15; letter-spacing: -0.01em;
    color: var(--hilo-ink);
}
.hilo-card__body { font-family: var(--hilo-font-body); font-size: 16.5px; line-height: 1.55; color: var(--hilo-mute); }
.hilo-card__foot { margin-top: auto; font-family: var(--hilo-font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--hilo-ink); text-transform: uppercase; }

/* ── 12. Home — projects preview grid ───────────────────────────────────── */
.hilo-projects-preview {
    background: var(--hilo-bg-alt);
    border-top: 1px solid var(--hilo-rule);
    border-bottom: 1px solid var(--hilo-rule);
}
.hilo-projects-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.hilo-project-card { display: flex; flex-direction: column; gap: 14px; --accent: var(--hilo-green); }
.hilo-project-card--greendeep { --accent: var(--hilo-green-deep); }
.hilo-project-card--greensoft { --accent: var(--hilo-green-soft); }
.hilo-project-card--terra     { --accent: var(--hilo-terra); }
.hilo-project-card--sky       { --accent: var(--hilo-sky); }
.hilo-project-card--green     { --accent: var(--hilo-green); }
.hilo-project-card a { display: flex; flex-direction: column; gap: 14px; }
.hilo-project-card .hilo-photo {
    aspect-ratio: 4/5;
    position: relative;
}
/* Overlay leggero col colore della categoria sulla foto progetto.
   Mix-blend multiply tinge senza coprire l'immagine. */
.hilo-project-card .hilo-photo::after {
    content: '';
    position: absolute; inset: 0;
    background: color-mix( in srgb, var(--accent) 25%, transparent );
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: background-color .25s ease;
}
.hilo-project-card:hover .hilo-photo::after {
    background: color-mix( in srgb, var(--accent) 12%, transparent );
}
.hilo-project-card__name {
    font-family: var(--hilo-font-display); font-weight: 600;
    font-size: 22px; letter-spacing: -0.01em; color: var(--hilo-ink);
}
.hilo-project-card__tag {
    font-family: var(--hilo-font-body); font-size: 15px;
    color: var(--hilo-ink); line-height: 1.45;
    margin: 0;
}
/* Highlight marker sul tag categoria: copre quasi tutta l'altezza del testo
   per stare DIETRO (highlight integrato), non sotto come una sottolineatura.
   Alpha 50% per restare elegante e mantenere il testo leggibile. */
.hilo-project-card__tag-mark {
    display: inline;
    line-height: 1.5;
    padding: 2px 6px;
    background-image: linear-gradient(
        to top,
        transparent 5%,
        color-mix( in srgb, var(--accent) 50%, transparent ) 5%,
        color-mix( in srgb, var(--accent) 50%, transparent ) 92%,
        transparent 92%
    );
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
[data-hilo-eco="on"] .hilo-project-card__tag-mark {
    background-image: linear-gradient(
        to top,
        transparent 5%,
        color-mix( in srgb, var(--accent) 65%, transparent ) 5%,
        color-mix( in srgb, var(--accent) 65%, transparent ) 92%,
        transparent 92%
    );
}
.hilo-project-card__meta {
    font-family: var(--hilo-font-mono); font-size: 10.5px;
    letter-spacing: 0.05em; color: var(--hilo-green); text-transform: uppercase;
}

/* ── 13. Home — final CTA ───────────────────────────────────────────────── */
.hilo-cta-final { text-align: center; padding: 100px 56px 110px; }
.hilo-cta-final .hilo-eyebrow { display: inline-block; margin-bottom: 28px; }
.hilo-cta-final__title {
    font-family: var(--hilo-font-display); font-weight: 400;
    font-size: clamp(36px, 5.5vw, 64px); line-height: 1.05; letter-spacing: -0.02em;
    max-width: 920px; margin: 0 auto;
    color: var(--hilo-ink); text-wrap: balance;
}
.hilo-cta-final__sub {
    font-family: var(--hilo-font-body); font-style: italic; font-size: 18px;
    color: var(--hilo-mute); margin: 24px auto 36px;
}

/* ── 14. About page ─────────────────────────────────────────────────────── */
.hilo-about > section { max-width: 1600px; margin: 0 auto; }
.hilo-about__title-band { padding: 64px 56px 40px; }
.hilo-about__title {
    font-family: var(--hilo-font-display); font-weight: 500;
    font-size: clamp(48px, 7vw, 84px); line-height: 0.98; letter-spacing: -0.02em;
    color: var(--hilo-ink); max-width: 1100px;
    margin: 0;
}
.hilo-about__manifesto {
    padding: 30px 56px 80px;
    display: grid; grid-template-columns: 0.35fr 1fr; gap: 64px;
}
.hilo-about__manifesto .hilo-eyebrow { margin: 0; padding-top: 14px; }
.hilo-about__manifesto-text { max-width: 880px; }
.hilo-about__manifesto-lede {
    font-family: var(--hilo-font-body); font-size: 30px; line-height: 1.35; color: var(--hilo-ink);
}
.hilo-about__manifesto-lede strong { color: var(--hilo-green-deep); font-weight: 600; }
.hilo-about__manifesto-body {
    font-family: var(--hilo-font-body); font-size: 19px; line-height: 1.6;
    color: var(--hilo-mute); margin-top: 32px;
}
.hilo-about__founder {
    padding: 70px 56px;
    background: var(--hilo-bg-alt);
    border-top: 1px solid var(--hilo-rule);
    border-bottom: 1px solid var(--hilo-rule);
}
.hilo-about__founder .hilo-eyebrow { margin-bottom: 30px; }
.hilo-about__founder-grid {
    display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center;
}
/* Placeholder fallback: quadrato 1:1 (quando la pagina Chi siamo non ha
   ancora Immagine in evidenza). La foto reale invece rispetta le sue
   proporzioni naturali — vedi .hilo-about__founder-figure sotto. */
.hilo-about__founder-grid > .hilo-photo { aspect-ratio: 1/1; }
.hilo-about__founder-figure {
    margin: 0;
    width: 100%;
    line-height: 0;
}
.hilo-about__founder-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}
.hilo-about__quote-small {
    font-family: var(--hilo-font-body); font-style: italic; font-size: 17px;
    color: var(--hilo-mute); margin-bottom: 18px;
}
.hilo-about__founder-name {
    font-family: var(--hilo-font-display); font-weight: 500;
    font-size: clamp(40px, 5vw, 56px); letter-spacing: -0.02em; line-height: 1.02; color: var(--hilo-ink);
}
.hilo-about__founder-body {
    font-family: var(--hilo-font-body); font-size: 18px; line-height: 1.6; color: var(--hilo-ink);
    margin-top: 26px; max-width: 540px;
}

.hilo-values { padding: 90px 56px; }
.hilo-values__list { border-top: 1px solid var(--hilo-rule); margin-top: 0; }
.hilo-values__item {
    display: grid; grid-template-columns: 100px 1fr 1.5fr;
    gap: 32px; align-items: center;
    padding: 30px 4px;
    border-bottom: 1px solid var(--hilo-rule);
}

/* Colore d'accento per item (impostato dalla classe --{color}, ereditato da numero e mark) */
.hilo-values__item--greendeep { --highlight: var(--hilo-green-deep); }
.hilo-values__item--terra     { --highlight: var(--hilo-terra); }
.hilo-values__item--sky       { --highlight: var(--hilo-sky); }
.hilo-values__item--greensoft { --highlight: var(--hilo-green-soft); }
.hilo-values__item--green     { --highlight: var(--hilo-green); }

.hilo-values__num {
    font-family: var(--hilo-font-mono); font-size: 12px;
    color: var(--highlight, var(--hilo-mute));
    font-weight: 500;
}
.hilo-values__name {
    font-family: var(--hilo-font-display); font-weight: 500;
    font-size: clamp(28px, 3.5vw, 48px); letter-spacing: -0.02em;
    color: var(--hilo-ink); margin: 0;
}
/* Highlight marker dietro il nome (solo la parola, non il punto finale).
   Stile evidenziatore a 65% opacity per restare elegante, non "sparare". */
.hilo-values__mark {
    display: inline;
    background-image: linear-gradient(
        to top,
        transparent 6%,
        color-mix( in srgb, var(--highlight, var(--hilo-green)) 65%, transparent ) 6%,
        color-mix( in srgb, var(--highlight, var(--hilo-green)) 65%, transparent ) 42%,
        transparent 42%
    );
    padding: 0 6px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
/* In modalità Eco-dark il color-mix con transparent va troppo scuro:
   alziamo l'opacity per mantenere visibilità del marker. */
[data-hilo-eco="on"] .hilo-values__mark {
    background-image: linear-gradient(
        to top,
        transparent 6%,
        color-mix( in srgb, var(--highlight, var(--hilo-green)) 80%, transparent ) 6%,
        color-mix( in srgb, var(--highlight, var(--hilo-green)) 80%, transparent ) 42%,
        transparent 42%
    );
}
.hilo-values__text {
    font-family: var(--hilo-font-body); font-size: 19px;
    color: var(--hilo-mute); line-height: 1.5;
}

.hilo-about__pull { padding: 60px 56px 100px; }
.hilo-about__pull-inner {
    background: var(--hilo-green-deep); color: #F1EBDD;
    padding: 60px 56px;
    display: grid; grid-template-columns: 0.4fr 1fr; gap: 40px;
    align-items: center;
}
.hilo-about__pull-quote {
    font-family: var(--hilo-font-display); font-size: 110px; line-height: 1; color: var(--hilo-green-soft);
}
.hilo-about__pull p {
    font-family: var(--hilo-font-display); font-weight: 400;
    font-size: clamp(24px, 3vw, 36px); line-height: 1.2; letter-spacing: -0.01em;
    text-wrap: pretty;
}
.hilo-about__pull p em { font-family: var(--hilo-font-body); font-style: italic; color: #E8DFCF; }

/* ── 15. Projects page (SISTEMA variant) ────────────────────────────────── */
/* Le regole della variante "Sistema" sono in assets/css/hilo-sistema.css, caricato
   condizionatamente solo sulle pagine progetto / archivio CPT / tassonomie. */

/* ── 16. News page ──────────────────────────────────────────────────────── */
.hilo-news > section, .hilo-news > header { max-width: 1600px; margin: 0 auto; }
.hilo-news__head { padding: 64px 56px 30px; }
.hilo-news__title {
    font-family: var(--hilo-font-display); font-weight: 500;
    font-size: clamp(48px, 7vw, 84px); line-height: 0.98; letter-spacing: -0.02em;
    color: var(--hilo-ink); max-width: 1080px; margin: 0;
}
.hilo-news__lede {
    font-family: var(--hilo-font-body); font-size: 21px; line-height: 1.45;
    color: var(--hilo-mute); margin-top: 30px; max-width: 720px;
}
.hilo-news__lede strong { color: var(--hilo-green-deep); font-weight: 600; }

.hilo-news__featured { padding: 30px 56px 50px; }
.hilo-news-feature {
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
    padding: 40px 0;
    border-top: 1px solid var(--hilo-rule);
    border-bottom: 1px solid var(--hilo-rule);
    align-items: center;
}
.hilo-news-feature .hilo-photo { aspect-ratio: 4/3; }
.hilo-news-feature__title {
    font-family: var(--hilo-font-display); font-weight: 500;
    font-size: clamp(32px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.01em;
    color: var(--hilo-ink); margin: 0;
}
.hilo-news-feature__excerpt {
    font-family: var(--hilo-font-body); font-size: 18px; line-height: 1.55;
    color: var(--hilo-mute); margin-top: 20px; max-width: 520px;
}
.hilo-news-feature__foot {
    margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--hilo-rule);
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--hilo-font-mono); font-size: 11px; color: var(--hilo-mute); letter-spacing: 0.04em;
}
.hilo-news-feature__foot a, .hilo-news-feature__foot span:last-child { color: var(--hilo-ink); }

.hilo-news__upcoming {
    padding: 30px 56px 60px;
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;
}
.hilo-news-card {
    padding: 32px 28px;
    border: 1px solid var(--hilo-rule);
}
.hilo-news-card--upcoming { opacity: 0.65; }
.hilo-news-card .hilo-eyebrow { margin: 0 0 16px; color: var(--hilo-mute); }
.hilo-news-card h3 {
    font-family: var(--hilo-font-display); font-weight: 500;
    font-size: 24px; line-height: 1.2; letter-spacing: -0.01em;
    color: var(--hilo-ink); margin: 0;
}
.hilo-news-card h3 a { color: inherit; }

.hilo-news-cadence {
    padding: 24px 28px;
    border: 1.5px dashed var(--hilo-rule);
}
.hilo-news-cadence__text {
    font-family: var(--hilo-font-body); font-style: italic; font-size: 16px;
    color: var(--hilo-mute); line-height: 1.5; margin: 0;
}

/* ── 17. Contact page ───────────────────────────────────────────────────── */
.hilo-contact > section, .hilo-contact > header { max-width: 1600px; margin: 0 auto; }
.hilo-contact__head { padding: 64px 56px 40px; }
.hilo-contact__title {
    font-family: var(--hilo-font-display); font-weight: 500;
    font-size: clamp(52px, 7vw, 88px); line-height: 0.98; letter-spacing: -0.02em;
    color: var(--hilo-ink); margin: 0;
}
.hilo-contact__grid {
    padding: 20px 56px 90px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
}
.hilo-contact__lede {
    font-family: var(--hilo-font-body); font-size: 22px; line-height: 1.45;
    color: var(--hilo-ink); max-width: 540px;
}
.hilo-contact__sub {
    font-family: var(--hilo-font-body); font-size: 18px; line-height: 1.55;
    color: var(--hilo-mute); margin-top: 22px; max-width: 540px;
}
.hilo-contact__card {
    margin-top: 46px; padding: 32px 28px;
    background: var(--hilo-bg-alt);
    border-left: 3px solid var(--hilo-green);
}
.hilo-contact__card .hilo-eyebrow { margin: 0 0 18px; color: var(--hilo-mute); }
.hilo-contact__email {
    font-family: var(--hilo-font-display); font-size: 22px; line-height: 1.3;
    letter-spacing: -0.01em; color: var(--hilo-ink); margin: 0;
}
.hilo-contact__meta {
    margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
    font-family: var(--hilo-font-mono); font-size: 12px; color: var(--hilo-mute);
}
.hilo-contact__meta-full { grid-column: 1 / -1; }
.hilo-contact__meta dt { text-transform: uppercase; color: var(--hilo-ink); margin-bottom: 4px; }
.hilo-contact__quote {
    margin-top: 28px; padding: 18px 22px;
    border: 1px dashed var(--hilo-rule);
    font-family: var(--hilo-font-body); font-style: italic; font-size: 15px;
    color: var(--hilo-mute); line-height: 1.5;
}
.hilo-contact__quote cite {
    display: block; margin-top: 6px;
    font-family: var(--hilo-font-mono); font-style: normal; font-size: 11px;
    color: var(--hilo-green); letter-spacing: 0.06em; text-transform: uppercase;
}

/* Form */
.hilo-form { display: flex; flex-direction: column; gap: 0; }
.hilo-form__hp { position: absolute; left: -9999px; }
.hilo-form__field { margin-bottom: 28px; position: relative; }
.hilo-form__field > label {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--hilo-font-mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--hilo-green);
    margin-bottom: 8px;
}
.hilo-form__field input, .hilo-form__field textarea {
    width: 100%;
    background: transparent; border: none;
    border-bottom: 1.5px solid var(--hilo-rule);
    outline: none;
    padding: 10px 0 12px;
    font-family: var(--hilo-font-body); font-size: 19px;
    color: var(--hilo-ink);
    transition: border-color .18s ease;
}
.hilo-form__field input:focus, .hilo-form__field textarea:focus {
    border-bottom-color: var(--hilo-green);
}
.hilo-form__field textarea { resize: vertical; min-height: 120px; }
.hilo-form__err {
    font-family: var(--hilo-font-mono); font-size: 11px; color: var(--hilo-terra);
    text-transform: none; letter-spacing: 0;
}
.hilo-form__field.is-error input, .hilo-form__field.is-error textarea { border-bottom-color: var(--hilo-terra); }

/* Acceptance/consent checkbox GDPR (CF7 [acceptance] tag) */
.hilo-form__consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--hilo-mute); line-height: 1.5; }
.hilo-form__consent .wpcf7-list-item { margin: 0; }
.hilo-form__consent input[type="checkbox"] {
    margin: 4px 0 0;
    accent-color: var(--hilo-green);
    width: 16px; height: 16px;
    flex-shrink: 0;
}
.hilo-form__consent label { display: inline-flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.hilo-form__consent a { color: var(--hilo-green-deep); text-decoration: underline; }
.hilo-form__consent a:hover { color: var(--hilo-ink); }

.hilo-form > button { align-self: flex-start; margin-top: 6px; }
.hilo-form-success {
    padding: 32px 28px; border: 1px solid var(--hilo-rule); background: var(--hilo-bg-alt);
}
.hilo-form-success h2 {
    font-family: var(--hilo-font-display); font-size: 26px; color: var(--hilo-green-deep); margin-bottom: 10px;
}
.hilo-form-success p { font-family: var(--hilo-font-body); font-size: 14.5px; line-height: 1.55; color: var(--hilo-ink); }

/* ── 17.5 Project logos (CPT meta) ──────────────────────────────────────── */
.hilo-project-row__logo { margin: 0 0 22px; }
.hilo-project-row__logo img { max-height: 100px; max-width: 260px; width: auto; height: auto; display: block; object-fit: contain; }
.hilo-project-card__logo { margin: 16px 0 6px; min-height: 56px; display: flex; align-items: center; }
.hilo-project-card__logo img { max-height: 64px; max-width: 180px; width: auto; height: auto; object-fit: contain; }
.hilo-single-project__logo { margin: 12px 0 24px; }
.hilo-single-project__logo img { max-height: 140px; max-width: 360px; width: auto; height: auto; object-fit: contain; }
[data-hilo-eco="on"] .hilo-project-row__logo img,
[data-hilo-eco="on"] .hilo-project-card__logo img,
[data-hilo-eco="on"] .hilo-single-project__logo img { filter: invert(1) hue-rotate(180deg); opacity: 0.9; }

/* ── 18. Single project / article ───────────────────────────────────────── */
.hilo-article, .hilo-single-project { max-width: 1100px; margin: 0 auto; padding: 60px 56px 110px; }
.hilo-article__title, .hilo-single-project__title {
    font-family: var(--hilo-font-display); font-weight: 500;
    font-size: clamp(40px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.02em;
    color: var(--hilo-ink); margin: 12px 0 0;
}
.hilo-article__byline, .hilo-single-project__tags {
    margin-top: 18px; font-family: var(--hilo-font-mono); font-size: 12px; color: var(--hilo-mute); letter-spacing: 0.05em;
}
.hilo-single-project__tags { display: flex; gap: 8px; }
.hilo-article__cover, .hilo-single-project__cover { margin: 40px 0; }
.hilo-article__cover img, .hilo-single-project__cover img { width: 100%; height: auto; }
.hilo-article__body, .hilo-single-project__body { max-width: 720px; }
.hilo-single-project__grid {
    display: grid; grid-template-columns: 1fr 280px; gap: 56px;
    margin-top: 40px;
}
.hilo-single-project__meta dl > div { padding: 14px 0; border-bottom: 1px solid var(--hilo-rule); }
.hilo-single-project__meta dt {
    font-family: var(--hilo-font-mono); font-size: 11px; color: var(--hilo-mute);
    letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px;
}
.hilo-single-project__meta dd { font-family: var(--hilo-font-body); font-size: 15px; color: var(--hilo-ink); }
.hilo-single-project__meta dd a { color: var(--hilo-green); }
.hilo-article__foot, .hilo-single-project__foot {
    margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--hilo-rule);
    display: flex; justify-content: space-between; gap: 18px;
}

/* Prose */
.hilo-prose { font-family: var(--hilo-font-body); font-size: 18px; line-height: 1.7; color: var(--hilo-ink); }
.hilo-prose p, .hilo-prose ul, .hilo-prose ol, .hilo-prose figure, .hilo-prose blockquote { margin: 1.2em 0; }
.hilo-prose h2 { font-family: var(--hilo-font-display); font-size: 32px; margin: 1.6em 0 0.5em; letter-spacing: -0.01em; }
.hilo-prose h3 { font-family: var(--hilo-font-display); font-size: 22px; margin: 1.4em 0 0.4em; }
.hilo-prose a { color: var(--hilo-green); text-decoration: underline; text-underline-offset: 3px; }
.hilo-prose blockquote {
    border-left: 3px solid var(--hilo-green);
    padding-left: 22px; font-style: italic; color: var(--hilo-mute);
}
.hilo-prose ul { list-style: disc; padding-left: 1.5em; }
.hilo-prose ol { list-style: decimal; padding-left: 1.5em; }

/* ── 19. Archive / 404 / page ───────────────────────────────────────────── */
.hilo-page, .hilo-archive, .hilo-404 { max-width: 1100px; margin: 0 auto; padding: 60px 56px 110px; }
.hilo-page__title { font-family: var(--hilo-font-display); font-weight: 500; font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.02em; color: var(--hilo-ink); margin: 12px 0 30px; }
.hilo-archive__title { font-family: var(--hilo-font-display); font-weight: 500; font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.02em; color: var(--hilo-ink); margin: 12px 0 40px; }
.hilo-archive__list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--hilo-rule); }
.hilo-archive__item {
    padding: 28px 0;
    border-bottom: 1px solid var(--hilo-rule);
    display: grid; grid-template-columns: 140px 1fr; gap: 24px;
    align-items: start;
}
.hilo-archive__date { font-family: var(--hilo-font-mono); font-size: 12px; color: var(--hilo-mute); letter-spacing: 0.05em; padding-top: 6px; }
.hilo-archive__body { min-width: 0; /* permette al testo di andare a capo correttamente nella col 2 */ }
.hilo-archive__post-title { font-family: var(--hilo-font-display); font-weight: 500; font-size: 26px; letter-spacing: -0.01em; color: var(--hilo-ink); margin: 0; }
.hilo-archive__post-title a { color: inherit; }
.hilo-archive__post-title a:hover { color: var(--hilo-green); }
.hilo-archive__excerpt { color: var(--hilo-mute); margin: 12px 0 0; font-size: 17px; line-height: 1.55; max-width: 720px; }

/* Responsive: su mobile data sopra al titolo, full width */
@media (max-width: 700px) {
    .hilo-archive__item { grid-template-columns: 1fr; gap: 8px; }
    .hilo-archive__date { padding-top: 0; }
}
.hilo-404__title { font-family: var(--hilo-font-display); font-weight: 500; font-size: clamp(48px, 7vw, 88px); line-height: 0.98; letter-spacing: -0.02em; color: var(--hilo-ink); }
.hilo-404__body { font-size: 19px; color: var(--hilo-mute); margin: 30px 0; max-width: 540px; }
.hilo-404__actions { display: flex; gap: 14px; }

/* ── 20. Footer ─────────────────────────────────────────────────────────── */
.hilo-footer { border-top: 1px solid var(--hilo-rule); padding: 44px 56px 26px; background: var(--hilo-bg); }
.hilo-footer__inner {
    max-width: 1600px; margin: 0 auto;
    display: grid; grid-template-columns: 2.6fr 1fr; gap: 56px;
    font-family: var(--hilo-font-body); font-size: 14px; color: var(--hilo-mute); line-height: 1.55;
}
.hilo-footer__brand {
    display: flex; gap: 24px;
    align-items: flex-start;
    max-width: 520px;
}
.hilo-footer__brand .hilo-wordmark--vertical { flex: 0 0 auto; }
.hilo-footer__brand-text { flex: 1 1 auto; min-width: 0; }
.hilo-footer__tagline { margin-top: 0; }
.hilo-footer__legal-info {
    margin-top: 14px;
    font-family: var(--hilo-font-mono); font-size: 11px;
    letter-spacing: 0.04em; color: var(--hilo-mute); line-height: 1.6;
}

/* Wordmark: variante verticale (footer) — wrapper a larghezza fissa per
   prevenire il collapse a 0×0 di SVG senza dimensioni intrinseche.
   NB: niente `display: block` qui — sarebbe più specifico di
   `.hilo-wordmark__img--dark { display: none }` e mostrerebbe entrambe le varianti. */
.hilo-wordmark--vertical {
    display: inline-block;
    width: 92px;
    line-height: 0;
    flex-shrink: 0;
}
.hilo-wordmark--vertical .hilo-wordmark__img {
    width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: contain;
    object-position: center top;
}
.hilo-footer__heading {
    font-family: var(--hilo-font-mono); font-size: 12px; letter-spacing: 0.08em;
    color: var(--hilo-ink); text-transform: uppercase; font-weight: 500;
    margin: 0 0 14px;
}
.hilo-footer__list { display: flex; flex-direction: column; gap: 8px; }
.hilo-footer__list a,
.hilo-footer__list .iubenda-embed,
.hilo-footer__social a { color: var(--hilo-ink); display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.hilo-footer__list a:hover,
.hilo-footer__list .iubenda-embed:hover,
.hilo-footer__social a:hover { color: var(--hilo-green); }
/* Iubenda override: il loader aggiunge classi "iubenda-white", "iubenda-noiframe" ecc.
   Le neutralizziamo per ereditare lo stile del footer. */
.hilo-footer__list .iubenda-embed { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; font: inherit !important; text-decoration: none !important; }
.hilo-footer__social { display: flex; flex-direction: column; gap: 12px; }
.hilo-footer__social-icon {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--hilo-rule);
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.hilo-footer__social a:hover .hilo-footer__social-icon {
    border-color: var(--hilo-green); background: var(--hilo-green); color: var(--hilo-bg);
}
.hilo-wordmark--footer { font-size: 20px; }

.hilo-footer__bottom {
    max-width: 1600px; margin: 30px auto 0;
    padding-top: 18px; border-top: 1px solid var(--hilo-rule);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
    font-family: var(--hilo-font-mono); font-size: 11px; color: var(--hilo-mute);
    letter-spacing: 0.04em; text-transform: uppercase;
}
.hilo-footer__bottom-menu { display: flex; gap: 18px; }
.hilo-footer__bottom-menu a { color: var(--hilo-mute); }
.hilo-footer__bottom-menu a:hover { color: var(--hilo-ink); }
.hilo-footer__credit { color: var(--hilo-mute); transition: color .2s ease; }
.hilo-footer__credit:hover { color: var(--hilo-ink); }

/* ── 21. Eco-idle strip ─────────────────────────────────────────────────── */
.hilo-eco-strip {
    position: fixed; left: 0; right: 0; bottom: 0;
    padding: 14px 32px;
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid var(--hilo-rule);
    background: rgba(0,0,0,0.4);
    font-family: var(--hilo-font-mono); font-size: 11px; letter-spacing: 0.05em;
    color: var(--hilo-mute); z-index: 60;
    backdrop-filter: blur(6px);
}
.hilo-eco-strip__label { display: inline-flex; align-items: center; gap: 10px; }
.hilo-eco-strip__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--hilo-green);
    box-shadow: 0 0 0 3px rgba(128,158,120,0.18);
    animation: hiloEcoPulse 2.4s ease-in-out infinite;
}
@keyframes hiloEcoPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.hilo-eco-strip[hidden] { display: none; }

/* ── 22. Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .hilo-nav__inner { padding: 18px 32px; gap: 16px; }
    .hilo-nav__menu { gap: 18px; }
    .hilo-hero, .hilo-services, .hilo-cta-final, .hilo-band, .hilo-projects-preview,
    .hilo-about__title-band, .hilo-about__manifesto, .hilo-about__founder, .hilo-values, .hilo-about__pull,
    .hilo-news__head, .hilo-news__featured, .hilo-news__upcoming,
    .hilo-contact__head, .hilo-contact__grid,
    .hilo-projects__head, .hilo-projects__cta, .hilo-projects__filters { padding-left: 32px; padding-right: 32px; }
    .hilo-cards--3 { grid-template-columns: 1fr 1fr; }
    .hilo-projects-grid, .hilo-news__upcoming { grid-template-columns: 1fr 1fr; }
    .hilo-hero__grid, .hilo-about__manifesto, .hilo-intro__inner,
    .hilo-about__founder-grid, .hilo-news-feature, .hilo-contact__grid { grid-template-columns: 1fr; gap: 32px; }
    .hilo-project-row { grid-template-columns: 90px 1fr; }
    .hilo-project-row__cover { grid-column: 1 / -1; }
    .hilo-project-row__cover .hilo-photo { aspect-ratio: 16/9; min-height: 0; }
    .hilo-footer { padding: 36px 32px 24px; }
    .hilo-footer__inner { grid-template-columns: 2fr 1fr; gap: 32px; }
}
@media (max-width: 700px) {
    .hilo-nav__inner { flex-wrap: wrap; padding: 14px 20px; }
    .hilo-nav__primary { order: 3; width: 100%; }
    .hilo-nav__menu { gap: 14px; flex-wrap: wrap; }
    .hilo-cards--3, .hilo-projects-grid, .hilo-news__upcoming { grid-template-columns: 1fr; }
    .hilo-values__item { grid-template-columns: 60px 1fr; }
    .hilo-values__text { grid-column: 1 / -1; }
    .hilo-about__pull-inner, .hilo-projects__cta { grid-template-columns: 1fr; }
    .hilo-single-project__grid { grid-template-columns: 1fr; }
    .hilo-projects__filters { overflow-x: auto; flex-wrap: nowrap; }
    .hilo-footer__inner { grid-template-columns: 1fr; }
    .hilo-eco-strip { font-size: 10px; padding: 10px 16px; }
    .hilo-eco-strip__hint { display: none; }
}