/* ==========================================================================
   RECREATION PORTFOLIO DESIGN SYSTEM & STYLESHEET
   Bespoke Portfolio Stylesheet
   ========================================================================== */

/* 1. Google Fonts Import: Cormorant Garamond, Manrope, Amiri, Kalam, JetBrains Mono */
@import url('https://fonts.googleapis.com/css2?family=Amiri:ital@0;1&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Kalam:wght@300;400;700&family=Manrope:wght@300..800&family=JetBrains+Mono:wght@400;500&display=swap');

/* 2. Common & Global Styles */
/* Font del sito, serviti dal tema (prima venivano da Google Fonts): file variabili, solo latin e latin-ext.
   Cormorant Garamond e Manrope sono sotto licenza OFL (libero uso e ridistribuzione). */





/* Sistema grafico, reset e font */
:root {
  --bg:      #f9f9f9;
  --cta-stops: #bdeed3 0turn, #c6e9f8 .3turn, #d9ccf8 .6turn, #c6e9f8 .8turn, #bdeed3 1turn; /* gradiente rotante di CTA e cerchio: menta, azzurro e lilla molto pastello, vicini tra loro così la rotazione si nota poco */
  --ink:     #303030;
  --soft:    #505050;
  --muted:   #6e6e6e;
  --rule:    rgba(48,48,48,.11);
  --accent:  #84a98c;
  --display: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
  --sans:    'Manrope', 'Manrope Fallback', sans-serif;
  --gx:      clamp(1.25rem, 3.5vw, 3.5rem);
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --section-gap: clamp(4rem, 8vw, 8rem);
}

/* Skip link: l'unico modo per chi usa la tastiera di saltare il menu */
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  background: var(--ink); color: #fff;
  font-family: var(--sans); font-size: .85rem; font-weight: 600;
  padding: .75rem 1.25rem; border-radius: 4px;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 1rem; }

/* fallback locali con metriche simili ai webfont: niente salti mentre i font scaricano */
@font-face {
  font-family: 'Manrope Fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 103.4%; ascent-override: 103%; descent-override: 29%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Cormorant Fallback';
  src: local('Georgia');
  size-adjust: 84%; ascent-override: 105%; descent-override: 32%; line-gap-override: 0%;
}
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
em,i { font-style: normal; }
html { overflow-x: clip; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 0.9375rem; line-height: 1.6; overflow-x: clip; font-optical-sizing: auto; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

/* Pagine di contenuto generiche (privacy, cookie) */
.page-content {
  max-width: 1200px;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gx);
  border-radius: 12px;
}
/* sfondo del sito al posto del grigio di WordPress dietro il nav trasparente */
html body:has(.nav--collapsible) { background-color: var(--bg); }
.page-content h1 { font-family: var(--display); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 600; margin-bottom: 1.5rem; }
/* Pagina 404 */
.page-404 { text-align: left; }
/* pagine corte: il footer resta in fondo alla finestra invece di risalire sotto il testo */
html body:has(> main > .page-content) {
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)); /* dvh: segue le barre del browser mobile, senza scroll in più */
}
body:has(> main > .page-content) > main { flex: 1 0 auto; }
.page-404 h1 { margin-bottom: 1.5rem; }
.page-404 p { max-width: 40ch; margin-left: 0; margin-right: 0; }
.page-404 .ux-cta-bare { margin-top: 1rem; }
.page-content h2 { font-family: var(--display); font-size: clamp(1.4rem, 2.5vw, 1.75rem); font-weight: 600; margin: 2.5rem 0 1rem; }
.page-content h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; margin: 1.75rem 0 .75rem; }
.page-content h4, .page-content h5 { font-family: var(--sans); font-size: .9rem; font-weight: 600; margin: 1.25rem 0 .5rem; color: var(--soft); }
.page-content p { margin: 0 0 1rem; color: var(--soft); }
.page-content a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.page-content a:hover { text-decoration-color: var(--accent); }
.page-content ul, .page-content ol { margin: 0 0 1rem 1.25rem; color: var(--soft); }
.page-content hr { border: none; border-top: 1px solid var(--rule); margin: 1.5rem 0; }
.page-content details { border-top: 1px solid var(--rule); padding: .75rem 0; font-size: .9rem; }
.page-content summary { cursor: pointer; font-weight: 500; }

/* Articolo singolo */
.single-post__meta { font-family: var(--sans); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.single-post__thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; margin: 0 0 2rem; }
.single-post__back { display: inline-block; margin-top: 2rem; font-size: .85rem; }

/* Griglia del blog (teaser senza link) */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); list-style: none; }
.blog-card { display: flex; flex-direction: column; gap: .75rem; }
.blog-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.blog-card__title { font-family: var(--display); font-size: 1.1rem; font-weight: 600; color: var(--ink); }

/* Form CF7 (nell'embed autonomo) */
.wpcf7-form p { margin: 0 0 1.1rem; font-family: var(--sans); font-size: max(14px, .85rem); color: var(--soft); } /* mai sotto 14px */
.wpcf7-form label { display: block; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"] {
  /* 16px minimo: sotto, iOS Safari fa zoom al focus */
  display: block; width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 4px; padding: .6rem .75rem; margin-top: .7rem;
  background: #fff;
}
/* Riempimento a gradient, stessa palette del bordo del CTA */
.wpcf7-form input[type="submit"] {
  -webkit-appearance: none; appearance: none;
  font-family: var(--sans); font-size: max(14px, .8rem); letter-spacing: .04em; margin-top: .7rem;
  color: var(--ink); cursor: pointer; text-align: center;
  border: none; border-radius: 10px;
  padding: .7rem 2.5rem; transition: background-position .5s ease;
  background-image: linear-gradient(90deg, #9acc8a, #8dcdec, #c9aff1, #92cb81, #9acc8a);
  background-size: 250% auto; background-position: left center;
}
.wpcf7-form input[type="submit"]:hover { background-position: right center; }
/* come gli altri CTA: minuscolo, peso 500; testo bianco su gradient */
.wpcf7-form-control.wpcf7-submit.has-spinner {
  letter-spacing: .04em;
  text-transform: lowercase;
  color: #fff;
  border-radius: 2px;
  font-weight: 500;
  transition: background-position .5s ease;
  background-image: linear-gradient(87deg, #8aa4cc, #ec8de0, #b09bf5, #92cb81, #84a98c);
}

/* Etichette */
.label_accent {
  font-family: var(--sans); font-size: 0.6875rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); font-weight: 700;
}
.hm-label {
  font-family: var(--sans); font-size: 0.6875rem; color: var(--soft);
} .foot-back,
.cta_third span { color: var(--accent); }

/* Cursore a pillola: solo etichette, puntatore normale altrove */
.cur {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  border-radius: 100px;
  padding: .45rem 1rem;
  opacity: 0;
  transform: translate(22px, -34px);
  transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1), background 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .05em; text-transform: lowercase;
  white-space: nowrap;
}
.cur.visible { opacity: 1; }
.cur.cur--cta, .cur.cur--drag { background: #fff; color: var(--ink); box-shadow: 0 1px 8px rgba(0,0,0,.1); }
.cur.cur--vote {
  border: 2px solid transparent; color: var(--ink);
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--cta-glow-angle), var(--cta-stops)) border-box;
  animation: cta-glow 2.5s linear infinite;
  box-shadow: 0 0 3px rgba(198,233,248,.4);
}
@media (prefers-reduced-motion: reduce) { .cur.cur--vote { animation: none; } }
.cur.cur--hide { opacity: 0; }
@media (pointer: coarse) {
  .cur { display: none; }
}

/* Nav: Professional Frosted Glass Header */
nav#main-nav {
  position: sticky; top: 0; z-index: 500; width: 100%;
  background: rgba(253, 252, 250, 0.94);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(22, 22, 24, 0.08);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(var(--gx), env(safe-area-inset-left));
  padding-right: max(var(--gx), env(safe-area-inset-right));
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.nav-logo-float {
  display: flex; align-items: center;
}
.nav-logo {
  font-family: var(--sans); font-size: .80rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
  background: transparent; border-radius: 2px;
  height: 100%; display: flex; align-items: center;
  position: relative;
  transition: color .25s ease;
}
body:not(.logo-on-dark) .nav-logo:hover { color: #000; }

@media (min-width: 820px) {
  nav#main-nav { height: 72px; }
  .nav-logo-float {
    position: static; height: 100%;
  }
  .nav-logo-float .nav-logo {
    padding: 0; height: 100%; background: transparent; box-shadow: none; border: none;
  }
  .nav-logo-mobile { display: none !important; }
  .nav-right {
    background: transparent; box-shadow: none; border: none; padding: 0; height: 100%;
    display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.875rem);
  }
}

@media (max-width: 819px) {
  nav#main-nav {
    position: sticky !important; top: 0 !important; z-index: 500 !important; width: 100% !important;
    background: rgba(253, 252, 250, 0.98) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(22, 22, 24, 0.1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    padding: 0.65rem 0.75rem 0.4rem !important; height: auto !important;
  }
  .nav-right {
    padding: 0 !important; gap: 0.4rem !important; width: 100% !important; overflow: hidden !important;
  }
  .nav-row2 {
    width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .nav-row2::-webkit-scrollbar {
    display: none !important;
  }
  .nav-links {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    gap: 0.45rem !important;
    padding-bottom: 2px !important;
  }
  .nav-links li a {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.05em !important;
  }
  .nav-logo.nav-logo-mobile { font-size: .75rem !important; letter-spacing: .08em !important; }
}

.nav-right-top { display: contents; }
.nav-magic { order: 1; position: relative; padding-left: clamp(.75rem,1.5vw,1.25rem); }
.nav-row2 { display: contents; }
.nav-row2-avatar { order: 1; }
.nav-magic::before { content: ''; position: absolute; left: 0; top: 50%; translate: 0 -50%; height: 1em; width: 1px; background: currentColor; opacity: .25; }
.nav-right {
  display: flex; align-items: center; gap: clamp(1rem,2vw,1.875rem);
  background: transparent; border-radius: 2px;
  height: 67px;
}
.nav-logo-float { transition: opacity .25s; }
/* il logo è fixed e non occupa spazio nel flex: i link scorrono (min-width:0, overflow-x) e .is-clipped sfuma il bordo solo se non ci stanno tutti */
@media (min-width: 820px) {
  nav { padding-left: calc(max(var(--gx), env(safe-area-inset-left)) + 180px); }
  .nav-right { min-width: 0; }
  .nav-right .nav-links { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .nav-right .nav-links::-webkit-scrollbar { display: none; }
  .nav-right .nav-links.is-clipped {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
  }
}
.nav-links { display: flex; gap: clamp(.75rem,2vw,1.875rem); list-style: none; align-items: center; border: none; padding: 0; flex: 1; }
.nav-links a {
  font-family: var(--sans); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); transition: opacity .2s; position: relative; display: flex; align-items: center; gap: .3rem;
  padding-bottom: 0; white-space: nowrap;
}
.nav-links a:hover { opacity: 1; }
/* icone del nav: nascoste, visibili nelle modalità con icone */
.nav-links a .nav-icon {
  display: none; object-fit: contain; flex-shrink: 0;
  width: 32px; height: 32px; opacity: 1;
}
.nav-links a .nav-label { display: inline-block; text-align: center; white-space: nowrap; }
/* indicatore 'playlist' solo mobile */
.nav-dots { display: none; }
nav[data-nav-mode="8bit"]    .nav-links a .nav-icon,
nav[data-nav-mode="satrapi"] .nav-links a .nav-icon { display: block; }
nav[data-nav-mode="8bit"]    .nav-links,
nav[data-nav-mode="satrapi"] .nav-links,
nav[data-nav-mode="fa"]      .nav-links { gap: 0; justify-content: space-around; }
nav[data-nav-mode="8bit"]    .nav-links a .nav-label,
nav[data-nav-mode="satrapi"] .nav-links a .nav-label { display: none; }
/* voce attiva: parentesi [ABOUT], niente sottolineatura; le parentesi ci sono sempre (trasparenti) così la larghezza non cambia */
.nav-links a { position: relative; }
.nav-links a .nav-label::before, .nav-links a .nav-label::after { color: transparent; transition: color .2s; }
.nav-links a .nav-label::before { content: '['; margin-right: .2em; }
.nav-links a .nav-label::after  { content: ']'; margin-left: .2em; }
.nav-links a.active .nav-label { color: var(--ink); font-weight: 700; }
.nav-links a.active .nav-label::before,
.nav-links a.active .nav-label::after { color: var(--ink); }

/* Nav comprimibile (solo pagine di contenuto) */
.nav-burger { display: none; }
.nav--collapsible .nav-right { position: relative; }
.nav--collapsible .nav-burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 28px; height: 28px; padding: 0; border: none; background: none; cursor: pointer;
}
.nav-burger span { display: block; width: 100%; height: 1.5px; background: var(--ink); transition: transform .25s ease, opacity .2s ease; }
.nav--collapsible.nav-open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav--collapsible.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav--collapsible.nav-open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav--collapsible .nav-links {
  position: absolute; top: 100%; right: 0; margin-top: .75rem;
  flex-direction: column; align-items: flex-end; gap: .1rem;
  background: rgba(253,253,253,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 0.5px solid var(--rule); border-radius: 2px; padding: .75rem 1.25rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.nav--collapsible .nav-links a { padding: .4rem 0; }
.nav--collapsible.nav-open .nav-links {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease;
}

/* Bottone menu */
.nav-magic {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  background: none; border: none; padding: 0 0 0 clamp(.75rem,1.5vw,1.25rem);
  color: rgb(48 48 48 / .7); cursor: pointer; transition: color .2s; white-space: nowrap;
  display: flex; flex-direction: row; align-items: center; gap: .3rem; position: relative;
}
.nav-magic:hover, .nav-magic:focus-visible { color: var(--ink); }
.nav-magic-star { position: relative; display: flex; flex-shrink: 0; isolation: isolate; }
/* scintillio: ogni 15s due pulsazioni leggere, un anello dorato luminoso che si allarga e svanisce attorno alla stella, che pulsa appena */
.nav-magic-star::before {
  content: ""; position: absolute; inset: 1px; border-radius: 50%; opacity: 0; pointer-events: none;
  border: 1.5px solid #fff; /* nucleo bianco come un neon acceso: su fondo chiaro si legge grazie all'alone dorato attorno */
  box-shadow: 0 0 1px 1px #fff, 0 0 5px 1px #ffd966, 0 0 12px #f5c542, inset 0 0 5px 1px #ffd966;
}
.nav-magic-filter { flex-shrink: 0; width: 18px; height: 18px; fill: currentColor; fill-opacity: 0; transition: fill-opacity .2s, color .2s, filter .2s; }
/* common.js mette .is-sparkling 2s dopo il caricamento e dopo 6s di inattività: due pulsazioni (2,25s) e la classe si toglie */
.nav-magic.is-sparkling .nav-magic-star::before { animation: nav-halo 2.25s ease-out; }
.nav-magic.is-sparkling .nav-magic-filter { animation: nav-star 2.25s ease-out; }
/* al passaggio del mouse (e a menu aperto) la stella si riempie d'oro, come al picco dello scintillio, e non pulsa */
.nav-magic:is(:hover, :focus-visible, [aria-expanded="true"]) .nav-magic-filter { fill-opacity: 1; animation: none; color: #ffc933; filter: drop-shadow(0 0 3px #ffe08a); }
.nav-magic:is(:hover, :focus-visible, [aria-expanded="true"]) .nav-magic-star::before { animation: none; }
@keyframes nav-halo {
  0%, 40.7%, 53.3%, 94%, 100% { opacity: 0; scale: .5; }
  6.7%, 60% { opacity: 1; }
  40%, 93.3% { opacity: 0; scale: 1.5; }
}
@keyframes nav-star { /* la stella si accende d'oro insieme all'anello, poi torna scura */
  0%, 40%, 53.3%, 93.3%, 100% { scale: 1; fill-opacity: 0; color: rgb(48 48 48 / .7); /* = colore del trigger */ filter: drop-shadow(0 0 0 transparent); }
  6.7%, 60% { scale: 1.12; fill-opacity: 1; color: #ffc933; filter: drop-shadow(0 0 3px #ffe08a); }
  20%, 73.3% { scale: 1; fill-opacity: 1; color: #ffc933; filter: drop-shadow(0 0 3px #ffe08a); }
}
@media (prefers-reduced-motion: reduce) { .nav-magic-filter, .nav-magic-star::before { animation: none !important; } }
/* piccola freccia: su touch indica che apre un menu */
.nav-magic-chevron { flex-shrink: 0; width: 12px; height: 12px; transition: transform .2s ease; }
.nav-magic[aria-expanded="true"] .nav-magic-chevron { transform: rotate(180deg); }
/* etichetta persiana nel nav */
.nav-label-fa {
  font-family: 'Amiri', serif; font-size: .8rem; direction: rtl;
  display: none; text-align: center; white-space: nowrap;
}
nav[data-nav-mode="fa"] .nav-links a .nav-label { display: none; }
nav[data-nav-mode="fa"] .nav-links a .nav-label-fa { display: inline; }
nav[data-nav-mode="fa"] .nav-links a .nav-icon { display: none; }

/* menu a tendina degli strumenti: stesso look del fumetto del personaggio, ancorato al nav */
.nav-tools-menu {
  position: absolute; top: 100%; right: max(var(--gx), env(safe-area-inset-right));
  margin-top: .5rem; width: 172px; height: 132px; box-sizing: border-box; padding: 1.35rem .35rem .35rem;
  background: #fff; border: 2px solid #303030; border-radius: 3px;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 11px; line-height: 1.5; color: #303030;
  box-shadow: 3px 3px 0 rgba(0,0,0,.28);
  display: none; z-index: 300;
}
.nav-tools-menu.open { display: flex; flex-direction: column; }
.nav-tools-list { display: flex; flex-direction: column; justify-content: space-between; flex: 1; min-height: 0; }
.nav-tools-list[hidden] { display: none; }
.nav-tools-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; text-align: left;
  font-family: inherit; font-size: inherit; color: inherit; text-transform: none; letter-spacing: 0;
  background: none; border: none; padding: .4rem .5rem; cursor: pointer; border-radius: 2px; white-space: nowrap;
}
.nav-tools-menu button:hover, .nav-tools-menu button:focus-visible { background: #f0f0f0; outline: none; }
.nav-tools-menu button.active { font-weight: 700; }
.nav-tools-list + .nav-tools-list button { padding: .25rem .5rem; }
.nav-tools-menu .nav-tools-back { position: absolute; top: 3px; left: 5px; width: 20px; height: 20px; padding: 0; justify-content: center; font-size: 13px; line-height: 1; opacity: .55; }
.nav-tools-menu .nav-tools-back:hover, .nav-tools-menu .nav-tools-back:focus-visible { opacity: 1; background: none; }
.nav-tools-menu-icon-wrap { width: 18px; height: 18px; border-radius: 3px; overflow: hidden; flex-shrink: 0; display: block; }
.nav-tools-menu-icon { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Titolo di sezione condiviso */
.sec-head { padding: var(--section-gap) var(--gx) clamp(.5rem,1vw,1rem); }
.sec-h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.25rem, 4.5vw, 3.6rem);
  line-height: .92; letter-spacing: -.02em; color: var(--ink);
  text-wrap: balance; padding-bottom: 15px;
  transition: opacity .9s ease;
}
.sec-eyebrow {
  display: block; grid-column: 1 / -1; color: var(--soft);
  width: fit-content;
  border-bottom: 0.5px solid #8e8e8e;
  padding-bottom: 1.2rem; margin-bottom: 2.5rem;
}

/* Intro di sezione */
.sec-intro {
  display: flex; gap: clamp(2rem,4vw,4rem); align-items: flex-start;
  padding: 8px var(--gx) 16px;
}
.sec-intro > * { flex: 1 1 0; max-width: 600px; }
@media (max-width: 700px) { .sec-intro { flex-direction: column; } .sec-intro > * { max-width: none; } }

/* Footer */
/* gruppo di congedo: 'see you around.' e il pulsante, centrati insieme */
/* padding e non min-height: il footer è sticky bottom:0 */
.footer-farewell {
  display: flex; flex-direction: column;
  gap: 2.5rem;
  padding-top: clamp(4rem, 9vw, 7rem);
  padding-bottom: clamp(5rem, 11vw, 9rem);
}
.footer-git {
  display: flex; align-items: center; gap: clamp(1rem,3vw,2.5rem);
  padding: 0 var(--gx);
}
.footer-git-label {
  /* stessa scala dell'H1 dell'hero */
  font-size: clamp(2rem, 6vw, 5.44rem); line-height: .88; letter-spacing: -.02em;
}
.footer-git-avatar {
  width: clamp(52px,7vw,80px); height: clamp(52px,7vw,80px);
  border-radius: 50%; flex-shrink: 0;
  position: relative; z-index: 0; display: block;
  border: 2px solid #fff;
  box-shadow: inset 0 1.5px 3px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.15);
  transition: transform .25s var(--ease), box-shadow .25s ease;
}
/* hover: bordo bianco acceso come un neon; su fondo chiaro si legge grazie all'alone grigio-azzurro pallidissimo attorno */
.footer-git-avatar:hover {
  transform: scale(1.2);
  box-shadow: inset 0 1.5px 3px rgba(0,0,0,.15), 0 0 0 1px #fff, 0 0 5px 1px #fff, 0 0 12px 2px rgba(214,232,244,.9), 0 0 22px 4px rgba(214,232,244,.45);
}
.footer-git-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* il filetto bianco sopra il footer segue il padding della pagina (non va da bordo a bordo) */
footer {
  padding: calc(.85rem + 2px) var(--gx) max(2.5rem, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: .6rem;
  background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat; background-position: center top; background-size: calc(100% - 2 * var(--gx)) 2px;
}
.foot-row { display: flex; align-items: center; justify-content: space-between; }
/* mobile: "Back to top" sopra il copyright, a destra: il copyright chiude la pagina */
@media (max-width: 600px) {
  .foot-row { flex-direction: column-reverse; align-items: stretch; gap: .6rem; }
  footer .foot-back { position: static; margin-left: auto; }
}
.mobile-footer-spacer { display: none; }
@media (max-width: 600px) { .mobile-footer-spacer { display: block; height: 60px; background: var(--bg); } }
.foot-copy { font-size: 11px; letter-spacing: .02em; color: var(--soft); }
@media (max-width: 600px) { .foot-copy { font-size: 10px; line-height: 1.5; } }
@media (max-width: 380px) { .foot-copy { letter-spacing: 0; } } /* telefoni stretti: la prima riga del copyright resta su una riga */
/* pulsante 'leave a message': apre il form CF7 nell'overlay */
/* Overlay immagini/video: lo costruisce common.js su ogni pagina */
.img-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(48,48,48,.55);
  display: none; align-items: center; justify-content: center;
  padding: 1.5rem; cursor: zoom-out;
}
.img-overlay.open { display: flex; }
.img-overlay figure { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; position: relative; }
.img-overlay img {
  max-width: min(400px, 90vw); max-height: 80vh;
  width: auto; height: auto;
  background: #fff; border-radius: 10px;
  box-shadow: rgba(0,0,0,.25) 0 12px 40px;
}
/* solo galleria progetti: gli altri usi dell'overlay restano da 400px */
.img-overlay.projects img { max-width: min(500px, 90vw); }
.img-overlay figcaption {
  font-family: var(--sans); font-size: .625rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #fdfdfd;
  text-align: left;
  width: 100%; display: flex; justify-content: space-between; gap: 1rem;
}
.img-overlay-count { font-weight: 400; opacity: .7; }
.img-overlay-video {
  width: min(720px, 92vw); aspect-ratio: 16 / 9;
  border: none; border-radius: 10px; background: #111;
  box-shadow: rgba(0,0,0,.25) 0 12px 40px;
  display: none;
}
.img-overlay.video .img-overlay-video { display: block; }
.img-overlay.video img { display: none; }
/* mp4 ospitati: video nativo quadrato */
.img-overlay-selfvideo {
  width: min(480px, 90vw, 80vh); aspect-ratio: 1 / 1;
  border: none; border-radius: 10px; background: #111;
  box-shadow: rgba(0,0,0,.25) 0 12px 40px;
  display: none;
}
.img-overlay.selfvideo .img-overlay-selfvideo { display: block; }
.img-overlay.selfvideo img, .img-overlay.selfvideo .img-overlay-video { display: none; }
/* form commento: stesso iframe di YouTube/Vimeo, per un form corto */
.img-overlay.commentform .img-overlay-video {
  display: block; background: #fff; overflow: hidden;
  width: min(440px, 90vw); aspect-ratio: auto; height: min(520px, 85vh);
}
.img-overlay.commentform img { display: none; }
/* terminale: stesso iframe, finestra più larga e alta */
.img-overlay.terminalform .img-overlay-video {
  display: block; background: #fff; overflow: hidden;
  width: min(500px, 90vw, 80vh); aspect-ratio: 1 / 1; height: auto;
}
.img-overlay.terminalform img { display: none; }
.img-overlay-controls { display: flex; align-items: center; gap: .5rem; }
.img-overlay-nav {
  width: 1.8rem; height: 1.8rem; border: none; border-radius: 50%;
  background: rgba(253,253,253,.95); color: var(--ink);
  font-size: .8rem; line-height: 1; cursor: pointer;
  box-shadow: rgba(0,0,0,.2) 0 3px 10px;
}
.img-overlay-close {
  /* angolo in alto a destra dell'immagine, mezzo fuori */
  position: absolute; top: -0.8rem; right: -0.8rem;
  width: 2.1rem; height: 2.1rem; border: none; border-radius: 50%;
  background: rgba(253,253,253,.95); color: var(--ink);
  font-size: .95rem; line-height: 1; cursor: pointer;
  box-shadow: rgba(0,0,0,.2) 0 3px 10px;
}
/* bordo multicolore animato (preso dall'avatar): due livelli di sfondo confinano il gradient sul bordo e l'angolo ruota sul posto */
@property --cta-glow-angle {
  syntax: '<angle>'; inherits: false; initial-value: 0deg;
}
.foot-comment-toggle {
  font-family: var(--sans); font-size: .80rem; letter-spacing: .04em;
  color: var(--ink); cursor: pointer; text-align: left;
  display: inline-block; transition: color .3s ease;
  border: 2px solid transparent; border-radius: 2px;
  padding: .7rem 2.5rem; margin: 0 0 0 var(--gx); align-self: flex-start;
  position: relative; isolation: isolate;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(from var(--cta-glow-angle), var(--cta-stops)) border-box;
  animation: cta-glow 2.5s linear infinite;
  box-shadow: 0 0 3px rgba(198,233,248,.4);
}
/* hover: sfondo scuro che sfuma sotto l'etichetta, che diventa bianca */
.foot-comment-toggle::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: var(--ink); opacity: 0; transition: opacity .3s ease; }
.foot-comment-toggle:hover, .foot-comment-toggle:focus-visible { color: #fff; }
.foot-comment-toggle:hover::before, .foot-comment-toggle:focus-visible::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .foot-comment-toggle { animation: none; transition: color .2s; } .foot-comment-toggle::before { transition: none; } }
@keyframes cta-glow { to { --cta-glow-angle: 360deg; } }
/* Sezione Icon stories */
.satrapi-section {
  background: var(--ink);
  padding: clamp(3.5rem,7vw,7rem) var(--gx);
  display: flex; flex-direction: column; gap: 2.5rem;
}
.satrapi-parallax-inner {
  display: flex; flex-direction: column; gap: 2.5rem;
}
@media (prefers-reduced-motion: reduce) {
  .satrapi-img-col img { transform: none !important; }
}
.satrapi-title { color: #fff; }
.satrapi-grid {
  display: flex; flex-wrap: wrap; gap: clamp(2rem,4vw,4rem);
  align-items: start;
}
.satrapi-blurb { flex: 1 1 340px; order: 1; display: flex; flex-direction: column; gap: .75rem; }
.satrapi-img-col { flex: 0 0 auto; order: 3; }
.satrapi-img-col img {
  cursor: zoom-in; display: block; width: 100%; height: auto; max-width: 260px; /* sotto i 900px va a capo sotto il testo: più piccola, si ingrandisce con un clic */
  object-fit: contain; filter: grayscale(15%);
}
/* credito del fumetto: piccolo, sotto l'immagine */
.satrapi-credit { max-width: 360px; margin-top: .6rem; font-family: var(--sans); font-size: .7rem; line-height: 1.5; letter-spacing: .03em; color: rgba(255,255,255,.62); }
.satrapi-blurb-label { font-size: .85rem; }
.satrapi-body {
  font-family: var(--sans); font-size: .87rem; color: rgba(253,253,253,.88);
  line-height: 1.85; text-wrap: pretty;
}
.satrapi-trigger {
  color: rgba(253,253,253,.9); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--accent);
  transition: color .2s; white-space: nowrap;
}
.satrapi-trigger:hover { color: var(--accent); }
/* desktop: la vignetta riempie l'altezza delle colonne di testo (cima con le etichette, credito in linea con l'ultima riga) */
@media (min-width: 900px) {
  .satrapi-grid { align-items: stretch; }
  .satrapi-img-col { display: flex; flex-direction: column; flex: 0 0 clamp(220px, 22vw, 300px); }
  .satrapi-img-col img { height: 0; flex: 1 1 0; min-height: 0; max-width: none; object-fit: contain; object-position: left top; }
}
@media (max-width: 450px) {
  .satrapi-img-col { max-width: 70%; margin: 0 auto; }
}
/* riga di tracce sul percorso del leone, prima della madrasa */
.foot-back { cursor: pointer; transition: opacity .2s; background: none; border: none; padding: 0; position: absolute; right: 72px; bottom: 25px; }
.foot-back:hover { opacity: .5; }
.foot-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: opacity .2s; }
.foot-link:hover { opacity: .5; }

/* Reveal */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .js .rv.in { opacity: 1; transform: none; }
}

/* Continuità: numeri di capitolo e filo di collegamento */
main { counter-reset: chapter; }
.sec-eyebrow { counter-increment: chapter; }
.sec-eyebrow::before { content: '[' counter(chapter, decimal-leading-zero) ']  '; color: var(--accent); }
/* i numeri seguono l'ordine del nav (About 01 … Contact 05), non l'ordine nel documento */
#experience .sec-eyebrow { counter-reset: chapter 1; }
#projects .sec-eyebrow { counter-reset: chapter 3; }
#contact .sec-eyebrow { counter-reset: chapter 4; }


/* Adattamenti touch */
@media (pointer: coarse) {
  /* voci del nav: altezza adeguata */
  .nav-links a { min-height: 44px; }
}

/* Avanzamento in basso, leone, footer a tenda */
.scroll-progress { position: fixed; left: 0; right: 0; bottom: 0; height: 3px; z-index: 500; pointer-events: none; }
/* la barra di avanzamento serve solo alla homepage (dove c'è il personaggio): nelle altre pagine il markup c'è ma non si vede */
body:not([class*="page-template-page-homepage"]) .scroll-progress { display: none; }
.scroll-progress__fill { display: block; height: 100%; background: var(--muted);
  background: linear-gradient(90deg, #6e6e6e 10%, #505050 55%, #6e6e6e 100%); transform: scaleX(0); transform-origin: 0 50%; transition: transform .12s linear;
  }

/* Leone dello scroll (Sher-Dor) */
.scroll-lion { position: fixed; left: 0; bottom: 1px; width: 78px; height: 60px; z-index: 500; pointer-events: none; will-change: transform; }
.scroll-lion svg { display: block; width: 100%; height: 100%; }
/* personaggi alternativi (Satrapi, principessa) dal menu */
.scroll-sprite { position: fixed; left: 0; bottom: 3px; height: 74px; z-index: 500; pointer-events: none; display: none; will-change: transform; }
.scroll-sprite svg { display: block; width: 100%; height: 100%; }
/* area di click del personaggio: figlio dedicato, perché la sagoma SVG è irregolare */
.scroll-hit {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100%, 44px); height: max(100%, 44px);
  pointer-events: auto; touch-action: none;
  -webkit-user-select: none; user-select: none;
  cursor: pointer;
}
/* fumetti del personaggio: look da dialogo di gioco anni '90 */
.companion-bubble {
  position: fixed; z-index: 501;
  background: #fff; border: 2px solid #303030; border-radius: 3px;
  padding: .6rem .7rem;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 11px; line-height: 1.5; color: #303030;
  box-shadow: 3px 3px 0 rgba(0,0,0,.28);
}
.companion-bubble em { font-style: italic; }
.companion-bubble::after, .companion-bubble::before {
  content: ''; position: absolute; left: 20px; border: 7px solid transparent;
}
.companion-bubble::after { top: 100%; border-top-color: #303030; }
.companion-bubble.companion-bubble--flip::after, .companion-bubble.companion-bubble--flip::before { left: auto; }
.companion-bubble.companion-bubble--flip::after { right: 20px; }
.companion-bubble.companion-bubble--flip::before { right: 22px; }
.companion-bubble::before { top: calc(100% - 2px); border-top-color: #fff; border-width: 5px; left: 22px; }
/* i tre fumetti hanno stessa misura e ancora (vedi positionBubble in common.js) */
.companion-bubble { width: 172px; min-height: 132px; box-sizing: border-box; }
.companion-bubble--menu { padding: 1.35rem .35rem .35rem; display: flex; flex-direction: column; }
.companion-bubble--menu[hidden] { display: none; }
.companion-bubble-list { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.companion-bubble--characters .companion-bubble-list button { padding: .25rem .5rem; }
.companion-bubble--menu .companion-bubble-back {
  position: absolute; top: 3px; left: 5px; width: 20px; height: 20px; padding: 0;
  justify-content: center; font-size: 13px; line-height: 1; opacity: .55;
}
.companion-bubble--menu .companion-bubble-back:hover,
.companion-bubble--menu .companion-bubble-back:focus-visible { opacity: 1; }
.companion-bubble--menu button {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; text-align: left;
  font-family: inherit; font-size: inherit; color: inherit;
  background: none; border: none; padding: .4rem .5rem; cursor: pointer; border-radius: 2px; white-space: nowrap;
}
.companion-bubble--menu button:hover, .companion-bubble--menu button:focus-visible { background: #f0f0f0; outline: none; }
.companion-bubble-icon { width: 18px; height: 18px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }

body.companion-sprite .scroll-lion, body.companion-sprite .scroll-madrasa { display: none !important; }
body.companion-hidden .scroll-lion, body.companion-hidden .scroll-madrasa { display: none !important; }
@media (max-width: 900px) { .scroll-lion, .scroll-sprite { bottom: calc(var(--vp-offset, 0px) + env(safe-area-inset-bottom)); } .scroll-progress { bottom: calc(var(--vp-offset, 0px) + env(safe-area-inset-bottom)); } }
/* porta della madrasa: sta nel footer, il leone le passa davanti e sparisce */
.scroll-madrasa { position: absolute; right: 0; bottom: 2px; height: 70px; width: auto; pointer-events: none; }
/* sotto la regola base per vincere la cascata */
@media (max-width: 900px) { .scroll-madrasa { bottom: calc(var(--vp-offset, 0px) + env(safe-area-inset-bottom) + 2px); } }
/* scene finali dei personaggi: compaiono col footer */
.scroll-endscene { position: absolute; right: 0; bottom: 2px; display: none; pointer-events: none; }
#endscene-satrapi { height: 18px; right: 27px; }
#endscene-satrapi svg { display: block; width: 100%; height: 100%; }
#endscene-princess { height: 30px; right: 12px; }
#endscene-princess svg { display: block; width: 100%; height: 100%; }
body[data-companion="satrapi"] #endscene-satrapi { display: block; }
body[data-companion="princess"] #endscene-princess { display: block; }
@media (max-width: 900px) { .scroll-endscene { bottom: calc(var(--vp-offset, 0px) + env(safe-area-inset-bottom) + 2px); } }
/* .scroll-lion display preserved across motion preferences */

/* Footer a tenda: il contenuto si alza e lo scopre */
main { position: relative; z-index: 1; background: var(--bg); }
.site-footer { position: sticky; bottom: 0; z-index: 0; background: var(--bg); }
.js body:not(.footer-live) .site-footer { visibility: hidden; } /* vedi common.js: tiene il footer fuori dai candidati LCP */
/* relative: resta il contenitore di madrasa e back-to-top */
@media (prefers-reduced-motion: reduce) { .site-footer { position: relative; } }


/* 3. Homepage & Section-Specific Styles */
/* Hero e snippet di codice */
@keyframes heroIn { from { opacity: 0; } to { opacity: 1; } }
.hero { min-height: 100vh; margin-top: -88px; position: relative; z-index: 1; }
.hero-stage {
  height: 100vh; padding-top: 88px;
  display: flex; flex-direction: row; align-items: center;
  padding-right: var(--gx);
}
.hero-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hero-toprow { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(1.5rem, 4vw, 4rem); min-width: 0; }
.hero-identity { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; max-width: min(100%, 1200px); } /* larghezza naturale: il nome non va mai a capo */
@media (max-width: 1100px) {
  .hero-toprow { flex-wrap: wrap; }
  /* lo snippet scende sotto Role/Currently: riga intera, misura leggibile */
  .hero-toprow .hero-ctas { flex-basis: 100%; padding: 1.75rem var(--gx) 0 var(--gx); direction: ltr; }
}
/* l'override di posizione di .hero-code sta sotto la regola base per vincere la cascata */
.hero-name-wrap { padding: 0 var(--gx); }
.hero-name {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2rem, 6vw, 5.44rem);
  line-height: .9; letter-spacing: -.01em; color: var(--ink);
  padding-bottom: .18em; white-space: nowrap; text-transform: lowercase;
}
.hero-name .w { display: inline-block; vertical-align: top; }
.hero-intro { display: flex; align-items: flex-start; gap: clamp(2rem,5vw,5rem); padding: clamp(1.2rem,2.5vw,2rem) var(--gx) 0; animation: heroIn .35s ease-out both; }
/* width:0 + min-width:100%: la riga non decide la larghezza della colonna, la riempie (segue l'h1) */
.hero-intro { flex-direction: column; gap: .75rem; width: 100%; max-width: 100%; }
/* righe dell'hero: stesso look 'un po' di codice' della sezione Experience (.code-text) */
.hero-intro .code-text { margin: 0; max-width: min(100%, 1280px); width: 100%; }
.hero-intro .code-text .tx { padding-left: 0; }
/* digitato da homepage.js: testo scritto, cursore e </output> in fila, il resto invisibile */
.hero-intro__now .hero-code__caret[hidden] { display: none; }
.hm-label { letter-spacing: .08em; text-transform: uppercase; margin-bottom: .3rem; display: block; font-weight: 700; color: var(--accent); }
.hero-ctas {
  position: relative; align-self: stretch;
  display: flex; flex-direction: column; gap: .5rem;
  padding-right: var(--gx); flex: 1 1 auto; min-width: 0;
  padding-top: .35em; /* allineamento ottico con l'altezza delle maiuscole del nome */
  direction: rtl; /* tiene il contenuto ancorato a destra */
}
.hero-ctas > * { direction: ltr; }
.sec-intro__lead { color: var(--ink); font-weight: 700; }
.sec-intro p { font-family: var(--sans); font-size: clamp(.78rem,.95vw,.88rem); line-height: 1.75; color: var(--soft); }
/* Experience: un unico testo su due colonne bilanciate, così le colonne finiscono alla stessa altezza a qualsiasi larghezza */
@media (min-width: 701px) {
  #experience .sec-intro { display: block; columns: 2; column-gap: clamp(2rem,4vw,4rem); max-width: calc(900px + clamp(2rem,4vw,4rem) + 2 * var(--gx)); /* 2 colonne da 450px */ }
  #experience .sec-intro p { margin: 0; orphans: 1; widows: 1; } /* niente righe forzate nella colonna a sinistra: il bilanciamento dà 4 + 3 */
}
/* snippet di codice di Experience (solo template preview): stessi font e tag dell'hero */
.sec-intro .code-text, #experience > .code-text, .hero-intro .code-text {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: clamp(.68rem, .8vw, .78rem); line-height: 1.85;
  color: var(--muted);
}
/* le righe dell'hero non scendono mai sotto 12px */
.hero-intro .code-text { font-size: clamp(.75rem, .85vw, .8125rem); }
.code-text .cl, .code-text .ln { display: block; overflow-wrap: break-word; }
.code-text .cl--in { padding-left: 1.4em; }
.code-text .tx { color: var(--soft); padding-left: 2ch; }
.code-text .hero-code__cv { text-decoration: none; }
.code-text .hero-code__cv:hover .cx { text-decoration: underline; text-underline-offset: 3px; }
/* colori del codice: stesse tinte di prima, scurite a 4.7:1+ sui fondi #f7f7f7/#f9f9f9 (erano 2.2-3.1:1) */
.cp { color: #2b7983; }
.ct { color: #d91642; }
.ca { color: #9a5699; }
.cv { color: #4e7941; }
.cx { color: #2F3337; }
.cp, .ct, .ca, .cv, .cx { transition: color .35s; }

/* Snippet di codice inline (About): senza riquadro, righe che si rivelano allo scroll */
.hero-code {
  /* un unico gruppo verticale, centrato nella colonna destra dell'hero */
  position: absolute; top: 25%; right: var(--gx); transform: translateY(-50%);
  text-align: left;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: clamp(.68rem, .8vw, .78rem); line-height: 1.85;
  color: var(--muted);
  width: min(26vw, 380px); min-width: 0;
}
@media (max-width: 1100px) {
  .hero-code { position: static; transform: none; width: auto; max-width: 62ch; }
}
.hero-code .cl, .hero-code .ln { display: block; overflow-wrap: break-word; }
.hero-code .cl--in { padding-left: 1.4em; }
.hero-code__more { padding-left: 1.4em; min-width: 0; }
.hero-code .tx { color: var(--soft); padding-left: 2ch; }
.hero-code__caret {
  display: inline-block; width: 1px; height: 1.05em;
  background: currentColor; margin-left: .35ch; vertical-align: text-bottom;
  animation: caretBlink 1.1s steps(1) infinite;
}
@keyframes caretBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero-code__caret { animation: none; }
}
.hero-code__cv { text-decoration: none; }
.hero-code__cv:hover .cx { text-decoration: underline; text-underline-offset: 3px; }
/* lo snippet è un gruppo centrato: le righe si espandono e il titolo sale man mano */
.hero-code__more .ln {
  opacity: 0; transform: translateY(6px);
  max-height: 0; overflow: hidden;
  transition: opacity .45s var(--ease), transform .45s var(--ease), max-height .45s var(--ease);
}
.hero-code__more .ln.in { opacity: 1; transform: none; max-height: 16em; }
@media (prefers-reduced-motion: reduce) {
  .hero-code__more .ln { transition: none; opacity: 1; transform: none; max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero { margin-top: 0; min-height: calc(100vh - 88px); }
  .hero-stage { height: auto; padding-top: 0; }
  .hero-intro { animation: none; }
  .hero-ctas { opacity: 1; pointer-events: auto; }
}
@media (max-width: 819px) {
  .hero { margin-top: 0; }
  .hero-stage { height: auto; padding-top: 50px; min-height: calc(100vh - 88px); flex-direction: column; align-items: flex-start; }
  .hero-main { width: 100%; }
  .hero-ctas { opacity: 1; pointer-events: auto; width: 100%; padding-right: var(--gx); }
  .hero-identity { width: 100%; }
  .hero-name { font-size: clamp(2.75rem, 8vw, 3.5rem); white-space: normal; }
}
@media (max-width: 819px) {
  /* solo preview: .hero-ctas non contiene più lo snippet (spostato in Experience) */
  .page-template-page-homepage-ux-preview-php .hero,
  .page-template-page-homepage-ux-preview-php .hero-stage { min-height: auto; }
  /* la prima schermata contiene solo l'hero: riempie lo spazio lasciato dal nav sticky */
  .page-template-page-homepage-ux-preview-php .hero,
  .page-template-page-homepage-ux-preview-php .hero-stage {
    min-height: calc(100vh - var(--anchor-offset, 141px) + 28px);
    min-height: calc(100svh - var(--anchor-offset, 141px) + 28px);
  }
  .page-template-page-homepage-ux-preview-php .hero-stage { justify-content: center; padding-top: 2rem; }
  .page-template-page-homepage-ux-preview-php .hero-main { flex: 0 0 auto; } /* altezza naturale, così il centraggio sopra funziona */
}

/* Experience, mappa carriera, Progetti, UX, Contatti */
/* About */
#about.hero { padding-top: 0; }

/* =============================================================================
   3D LOGO BRANDMARK & TITLE LOCKUP (ELLIOTBUILDS.AI)
   ============================================================================= */
.hero-identity {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  max-width: min(100%, 1280px);
}

.hero-name-wrap {
  padding: 0 var(--gx);
  overflow: visible;
}

.hero-logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.75rem, 1.8vw, 1.5rem);
  vertical-align: middle;
  max-width: 100%;
}

.hero-logo-cube {
  position: relative;
  width: clamp(72px, 8vw, 110px);
  height: clamp(72px, 8vw, 110px);
  flex: 0 0 clamp(72px, 8vw, 110px);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: pan-y;
  cursor: grab;
  z-index: 2;
  overflow: visible;
}

.hero-logo-cube:active {
  cursor: grabbing;
}

.hero-logo-cube::before {
  content: '';
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.14) 0%, rgba(16, 185, 129, 0.08) 45%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  filter: blur(14px);
}

.hero-logo-lockup:hover .hero-logo-cube::before {
  opacity: 1;
  transform: scale(1.18);
}

.hero-logo-cube canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  outline: none;
}

.hero-name {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 4.2rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--ink);
  white-space: nowrap;
  text-transform: lowercase;
  margin: 0;
  display: inline-block;
  vertical-align: middle;
}

.hero-name-ai {
  color: #84a98c;
  font-weight: 600;
  transition: color 0.25s ease;
}

.hero-logo-lockup:hover .hero-name-ai {
  color: #0284c7;
}

@media (max-width: 819px) {
  .hero-logo-lockup {
    gap: clamp(0.5rem, 2.2vw, 1rem);
  }
  .hero-logo-cube {
    width: clamp(54px, 13vw, 76px);
    height: clamp(54px, 13vw, 76px);
    flex: 0 0 clamp(54px, 13vw, 76px);
  }
  .hero-name {
    font-size: clamp(1.85rem, 7vw, 3rem);
    white-space: normal;
  }
}

/* offset di atterraggio delle ancore: nav visibile + ~28px (JS tiene aggiornato --anchor-offset) */
#about, #experience, #projects, #ux-design, #contact { scroll-margin-top: var(--anchor-offset, 95px); }
#contact { padding-top: clamp(1rem, 2vw, 2rem); }
/* desktop: meno padding sopra le sezioni, così l'etichetta atterra vicino al nav */
@media (min-width: 901px){
  #experience > .sec-head, #contact > .sec-head { padding-top: clamp(2rem, 3vw, 3rem); }
  #projects .projects-stack__list { padding-top: calc(clamp(2.5rem, 4vw, 4rem) - 12px); } /* sezione fissata: l'etichetta sta tutta sotto il logo, senza che sbuchino le parentesi */
  /* spazio sotto il deck, così le card in attesa si vedono */
  /* 300 = i vecchi 230 + il sottotitolo sotto il titolo (~70px) */
  .projects-deck { height: clamp(420px, calc(100vh - var(--anchor-offset, 95px) - 300px), 620px); }
}
p { font-family: var(--sans); font-size: 0.875rem; letter-spacing: .05em; color: var(--ink); line-height: 1.8; text-wrap: pretty; }
h3 { font-family: var(--display); font-weight: 600; color: var(--ink); line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; font-size: clamp(1.6rem, 3.5vw, 3rem); font-optical-sizing: auto; }
/* titoli grandi con peso 300 */
.proj-bleed-h, .footer-git-label { font-family: var(--display); font-weight: 300; color: var(--ink); }
.label_lowercase {
  font-family: var(--sans); font-size: 12px; letter-spacing: .05em;
  color: var(--soft); text-transform: lowercase;
}

/* Experience */
#experience { padding-bottom: clamp(2.25rem, 4vw, 3.25rem); } .tl-card__name, .sec-eyebrow { font-family: var(--sans); font-size: .72rem; font-weight: 400; letter-spacing: .15em; text-transform: uppercase; }
.tl-card__name { font-weight: 600; }

/* Mappa della carriera */
.cm-wrap { margin-top: clamp(2.25rem,4vw,3.25rem); }

.cm-viewport-wrap { position: relative; }
.cm-viewport {
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* niente scroll-snap di proposito: lo scrubber è un controllo continuo */
  scrollbar-width: none;
  cursor: grab;
  padding: clamp(.5rem,1vw,1rem) 0;
  /* selezionare il testo durante il drag lo rompe */
  user-select: none;
}
.cm-viewport::-webkit-scrollbar { display: none; }
.cm-viewport.is-dragging { cursor: grabbing; }
/* sfumatura ai bordi: segnala che la riga continua */
/* fascia più larga di prima (32/48px era troppo sottile per notarla) */
.cm-viewport {
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.45), black 60px, black calc(100% - 140px), rgba(0,0,0,.45));
  mask-image: linear-gradient(to right, rgba(0,0,0,.45), black 60px, black calc(100% - 140px), rgba(0,0,0,.45));
}
.cm-viewport.at-start {
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 140px), rgba(0,0,0,.45));
  mask-image: linear-gradient(to right, black calc(100% - 140px), rgba(0,0,0,.45));
}
.cm-viewport.at-end {
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.45), black 60px);
  mask-image: linear-gradient(to right, rgba(0,0,0,.45), black 60px);
}
.cm-viewport.at-start.at-end { -webkit-mask-image: none; mask-image: none; }

/* un'unica sequenza cronologica sfalsata: lavoro in linea, studi più in alto, volontariato più in basso */
.cm-canvas {
  position: relative;
  width: 4970px;
  height: 310px;
}

.cm-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.cm-lines path { fill: none; stroke: var(--rule); stroke-width: 2; stroke-dasharray: 8 16; stroke-linecap: round; }
.cm-lines circle { fill: var(--rule); }
/* stesso gradient del CTA finale, steso lungo il percorso; l'opacità è inline, per tratto */
.cm-lines path.cm-gradient-seg { stroke: url(#cm-path-gradient); stroke-dasharray: none; filter: url(#cm-glow); transition: opacity .4s ease; } /* un tratto si accende e si spegne con dolcezza */

.cm-canvas .tl-card, .cm-canvas .tl-today { position: absolute; z-index: 1; }

/* larghezza esplicita su ogni tipo di card (senza, una card assoluta si restringe al contenuto) */
.cm-canvas [data-lane="main"] { width: 260px; }
.cm-canvas [data-lane="edu"], .cm-canvas [data-lane="vol"] {
  width: 160px; height: 180px; flex: none;
  padding: 12px 12px 10px;
}
/* max-height è un ripiego insieme a -webkit-line-clamp, per titoli lunghi */
.cm-canvas [data-lane="edu"] .tl-card__name, .cm-canvas [data-lane="vol"] .tl-card__name {
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  max-height: 2.5em; /* line-height 1.25 × 2 righe */
}
.cm-canvas [data-lane="edu"] .tl-card__sub, .cm-canvas [data-lane="vol"] .tl-card__sub {
  -webkit-line-clamp: 2;
  max-height: 3em; /* line-height 1.5 × 2 righe */
}
/* eccezioni esplicite per i titoli che perdevano parole con il limite di 2 righe */
.cm-canvas [data-lane="edu"].tl-card--full-title .tl-card__name,
.cm-canvas [data-lane="vol"].tl-card--full-title .tl-card__name {
  -webkit-line-clamp: 4;
  max-height: 5em; /* line-height 1.25 × 4 righe */
}

/* l'opacità è inline (JS), funzione continua della distanza dal bordo sinistro */

/* scrubber della timeline: sopra il canvas scrollabile, unico controllo di navigazione */
.cm-scrubber {
  display: flex; align-items: center; justify-content: flex-end; gap: .9rem;
  padding: 0 var(--gx) 1.1rem;
}
.cm-scrubber__label {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .06em;
  color: var(--muted); white-space: nowrap; flex: none;
}
.cm-scrubber__label--today { color: var(--ink); }
/* larghezza fissa e compatta: range e sfondo di densità sono impilati nello stesso spazio */
.cm-scrubber__track-wrap {
  position: relative; flex: none;
  width: clamp(140px, 20vw, 200px); max-width: 200px;
  height: 20px;
}
/* barrette dietro la traccia: quante card cadono in ogni tratto della timeline */
.cm-scrubber__density {
  position: absolute; left: 10px; right: 0; top: 50%; transform: translateY(-50%);
  height: 12px; display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
}
.cm-scrubber__density span { flex: 0 0 1.5px; width: 1.5px; background: var(--muted); border-radius: 1px; }
.cm-scrubber__range {
  position: relative; z-index: 1; display: block; width: 100%;
  -webkit-appearance: none; appearance: none;
  height: 20px; background: none; margin: 0; cursor: pointer;
}
.cm-scrubber__range::-webkit-slider-runnable-track { height: 1px; background: var(--rule); }
.cm-scrubber__range::-moz-range-track { height: 1px; background: var(--rule); border: none; }
/* stessi sei colori del percorso e del bordo del CTA (vedi CTA_GRADIENT_STOPS nello script) */
.cm-scrubber__range::-webkit-slider-thumb {
  -webkit-appearance: none; box-sizing: border-box; width: 9px; height: 9px; margin-top: -4px;
  border-radius: 50%; border: 1px solid #f9f9f9;
  background: conic-gradient(from 0deg, #9acc8a, #a9d9b3, #c2d28e, #c9aff1, #8dcdec, #92cb81, #9acc8a);
  box-shadow: 0 0 3px 0 rgba(154, 204, 138, .55);
  transition: transform .15s, box-shadow .15s;
}
.cm-scrubber__range::-moz-range-thumb {
  box-sizing: border-box; width: 9px; height: 9px; border: 1px solid #f9f9f9; border-radius: 50%;
  background: conic-gradient(from 0deg, #9acc8a, #a9d9b3, #c2d28e, #c9aff1, #8dcdec, #92cb81, #9acc8a);
  box-shadow: 0 0 3px 0 rgba(154, 204, 138, .55);
  transition: transform .15s, box-shadow .15s;
}
.cm-scrubber__range:hover::-webkit-slider-thumb { transform: scale(1.3); }
.cm-scrubber__range:hover::-moz-range-thumb { transform: scale(1.3); }
.cm-scrubber__range:focus-visible { outline: none; }
.cm-scrubber__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(132,169,140,.25); }
.cm-scrubber__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(132,169,140,.25); }

/* Card */
.tl-card {
  flex: 0 0 240px;
  height: 180px;
  background: #fff;
  border: 0.5px solid var(--rule);
  border-radius: 8px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 14px 14px 12px; gap: 0;
  box-shadow: rgba(0, 0, 0, 0.01) 1.5px 1.5px 2px;
}
.tl-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem; margin-bottom: 8px; }
.tl-card__year { font-family: var(--sans); font-size: 0.6875rem; color: var(--muted); font-weight: 400; line-height: 1.4; }
.tl-tag {
  font-family: var(--sans); font-size: .625rem; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 600; padding: 2px 7px; border-radius: 3px; white-space: nowrap;
  border: none;
}
.tl-tag--work   { background: #dce6ed; color: #234f65; }
.tl-tag--vol    { background: #f7f7f7; color: var(--muted); }
.tl-tag--course { background: #e7ede8; color: #234f46; }
.tl-tag--key    { background: #c8dbd7; color: #234f46; }
.tl-card__body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tl-card__name { line-height: 1.25; padding-bottom: 5px; color: var(--ink); font-size: 13px; }
.tl-card__sub  { font-family: var(--sans); font-weight: 400; font-size: 0.75rem; color: var(--soft); line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.tl-card__logos { display: flex; gap: .7rem; align-items: center; }
/* marker inerte: lo scrubber ora gestisce il ritorno a 'Today' */
.tl-today {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; flex-shrink: 0; width: 60px; height: 180px;
  font-family: var(--sans); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-weight: 400; user-select: none;
}
/* stesso stack monospace dello snippet dell'hero: piccola 'nota' sotto il pallino */
.tl-today__roadmap {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: .625rem; line-height: 1.5; letter-spacing: 0; text-transform: none;
  text-align: center; color: var(--muted);
}
@keyframes tl-pulse {
  0%   { opacity: 1; }
  8%   { opacity: .25; }
  16%  { opacity: 1; }
  24%  { opacity: .25; }
  32%  { opacity: 1; }
  100% { opacity: 1; }
}
.tl-today__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: tl-pulse 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tl-today__dot { animation: none; } }
/* il drag nativo delle immagini ruba il mousemove al drag-to-scroll custom */
.tl-card__logos img { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; border: 0.5px solid rgba(0, 0, 0, 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); -webkit-user-drag: none; user-drag: none; background: #fff; }
.tl-ini { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-family: var(--sans); font-size: 0.6875rem; border: 0.5px solid rgba(48,48,48,.25); border-radius: 3px; color: var(--soft); }
.tl-ini--w { border-color: rgba(48,48,48,.2); color: var(--ink); }
.tl-ini--v { border-color: var(--accent); color: var(--accent); }
.tl-ini--c { border-color: #ccc; color: #aaa; }
.tl-ini--k { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Progetti */
.proj-head-wrap {
  /* sta nel primo gruppo sticky: distanza fissa dalla prima card */
  padding: 0 0 clamp(1rem, 2vw, 2rem);
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; row-gap: 0; align-items: end;
}
.proj-bleed-h {
  font-weight: 600; font-size: clamp(1.8rem, 4.5vw, 3.6rem);
  line-height: .92; letter-spacing: -.02em; white-space: nowrap;
  padding-bottom: 15px; transition: opacity .9s ease;
}
/* sottotitolo sotto il titolo: stesso look di Experience */
#projects .proj-head-wrap { padding-bottom: 0; }
/* spazio sotto l'ultima card, altrimenti lo sfondo finisce a filo */
#projects .projects-stack__list { padding-bottom: clamp(2rem, 4vw, 4rem); }
#projects .sec-intro { padding: 0; }
#projects .sec-intro > * { max-width: 105ch; } /* 2 righe: il deck fissato non ha altezza da perdere */

/* Card dei progetti: deck sticky impilato */
.projects-stack__list {
  position: relative;
  padding: calc(var(--section-gap) * 1.4) var(--gx) 0;
  margin-bottom: var(--section-gap);
}
/* deck: card impilate in assoluto in un palco fissato; lo scroll scarta quella in cima */
.projects-deck {
  position: relative;
  width: min(100%, 1100px); margin: 2rem auto 0;
  height: clamp(420px, 58vh, 620px);
}
.project-card {
  position: absolute; top: 0; left: 0; right: 0;
  height: 100%;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 0.5px solid var(--rule); border-radius: 18px;
  background: #fff; overflow: hidden;
  will-change: transform;
}
/* la card in cima per prima: la 1 è la più alta */
.project-card:nth-child(1) { z-index: 15; }
.project-card:nth-child(2) { z-index: 14; }
.project-card:nth-child(3) { z-index: 13; }
.project-card:nth-child(4) { z-index: 12; }
.project-card:nth-child(5) { z-index: 11; }
.project-card:nth-child(6) { z-index: 10; }
.project-card__text { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.project-card__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1.1;
  color: var(--ink); text-transform: lowercase; letter-spacing: -.01em;
}
.project-card__keywords { font-family: var(--sans); font-size: .68rem; letter-spacing: .06em; color: var(--muted); text-transform: lowercase; max-width: 46ch; margin-top: .5rem; }
.project-card__desc { font-family: var(--sans); font-size: .85rem; line-height: 1.65; color: var(--soft); max-width: 70ch; margin-top: .5rem; }
.project-card__cta {
  align-self: flex-start; margin-top: .9rem;
  font-family: var(--sans); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); border-bottom: 0.5px solid var(--ink); padding-bottom: .2rem;
}
/* Project Card Media: Perfectly centered horizontally and vertically */
.project-card__media {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 490px;
  justify-self: center;
  align-self: center;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #090d16;
}

.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  cursor: zoom-in;
}

/* Single hero frame cards (Card 3 & Card 5) */
.project-card__media:not(.lpj-collage) {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
}

.project-card__media:not(.lpj-collage) img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.project-card__media a {
  display: block;
  width: 100%;
  height: 100%;
}

.project-card__media--cover .ux-player {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

.project-card__media--cover {
  overflow: hidden;
  border-radius: 12px;
}

.project-card__media--cover img {
  object-fit: cover;
}

/* Collage LPJ: 1 main 2/1 image on top, 3 square 1/1 thumbnails below */
.lpj-collage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  gap: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #090d16;
}

.lpj-cell {
  position: relative;
  margin: 0;
  overflow: hidden;
  min-height: 0;
  aspect-ratio: 1 / 1;
  background: #090d16;
}

.lpj-cell--main {
  grid-column: 1 / -1;
  aspect-ratio: 2 / 1;
}

.lpj-collage--two {
  grid-template-columns: repeat(3, 1fr);
}

.lpj-collage--two .lpj-cell--main img {
  object-fit: cover;
  background: #090d16;
}

.lpj-collage .lpj-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.lpj-cell figcaption {
  position: absolute;
  left: 50%;
  bottom: .45rem;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(4px);
  padding: .15rem .45rem;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.lpj-cell--main figcaption {
  left: .65rem;
  transform: none;
}

/* UX */
/* Scroll orizzontale UX di page-homepage.php (il vecchio carosello) */
#ux-design.ux-old {
  /* position, sfondo e colore espliciti: la regola di #ux-design del trailer li sovrascriverebbe */
  position: static; background: none; color: inherit;
  overflow: hidden; padding-top: 88px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
}
@media (min-width: 901px){
  #ux-design.ux-old { justify-content: flex-start; padding-top: clamp(1rem, 1.5vw, 1.5rem); }
}
.ux-section-header {
  padding: clamp(1.5rem,3vw,3rem) var(--gx) clamp(1.25rem,2vw,1.75rem);
  display: flex; flex-direction: column;
}
.ux-htrack {
  display: flex;
  gap: clamp(1.25rem,2vw,2rem);
  padding: 0 0 clamp(2.5rem,4.5vw,4.5rem) var(--gx);
  align-items: flex-start;
  cursor: grab;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.ux-htrack::-webkit-scrollbar { display: none; }
.ux-htrack.dragging { cursor: grabbing; user-select: none; }
.ux-hcard {
  flex-shrink: 0;
  width: clamp(320px, 30vw, 420px);
  height: clamp(320px, 30vw, 420px);
  border: 0.5px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.ux-hcard--intro { border: none; background: transparent; height: auto; overflow: visible; }
.ux-hcard--video { background: #111; border-color: transparent; }
.ux-hcard-inner {
  padding: clamp(1.1rem,1.75vw,1.5rem);
  display: flex; flex-direction: column;
  gap: .75rem; flex: 1;
}
.ux-hcard--outcome .ux-hcard-inner,
.ux-hcard--research .ux-hcard-inner { flex: 0 0 auto; }
.ux-hcard-img { flex: 1; overflow: hidden; min-height: clamp(120px, 12vw, 160px); }
.ux-hcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ux-hcard--research .ux-hcard-img img,
.ux-hcard--outcome .ux-hcard-img img { object-position: center top; }
.ux-hcard-tag { color: var(--ink); }
.ux-hcard-title {
  font-family: var(--sans); font-weight: 600;
  font-size: .75rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink);
  line-height: 1.4;
}
.ux-hcard p {
  font-family: var(--sans); font-size: 13px;
  line-height: 1.75; color: var(--soft);
}
.ux-old .ux-meta {
  font-family: var(--sans); font-size: 11px;
  color: var(--soft); line-height: 1.8;
}
.ux-old .ux-meta strong { font-weight: 600; color: var(--ink); }
.ux-old .ux-cta-bare {
  font-family: var(--sans); font-size: .75rem; letter-spacing: .04em;
  color: var(--ink); text-decoration: none; margin-top: auto;
  display: inline-block; transition: color .2s, border-color .2s;
  border: 1px solid var(--ink); border-radius: 2px;
  padding: .45rem 1.1rem; align-self: flex-start;
  background: none;
}
.ux-old .ux-cta-bare:hover { color: var(--accent); border-color: var(--accent); }
.ux-htrack img, .cm-canvas img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.ux-swipe { display: contents; }
/* serve .ux-cta-bare.ux-cta-mobile per vincere su .ux-old .ux-cta-bare */
.ux-cta-bare.ux-cta-mobile { display: none; }
.ux-hcard--video .ux-player {
  position: relative; width: 100%; flex: 1;
  background: #111; overflow: hidden; cursor: pointer;
}
@media (max-width: 900px) {
  .ux-htrack {
    flex-direction: column; overflow-x: visible; cursor: auto; padding-right: var(--gx);
    align-items: stretch;
  }
  .ux-hcard--intro { width: 100%; height: auto; }
  .ux-hcard--intro .ux-cta-bare { display: none; }
  .ux-swipe {
    display: flex; gap: 1rem; align-items: flex-start;
    width: 100%; max-width: 100%; min-width: 0;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-right: calc(-1 * var(--gx)); padding-right: var(--gx);
  }
  .ux-swipe::-webkit-scrollbar { display: none; }
  .ux-swipe .ux-hcard { flex: 0 0 78vw; width: 78vw; height: auto; min-width: 0; }
  .ux-hcard--video { width: 100%; height: auto; }
  .ux-hcard--video .ux-player { flex: none; aspect-ratio: 5/4; height: auto; }
  .ux-hcard--video .ux-player video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center center;
  }
  .ux-cta-bare.ux-cta-mobile { display: inline-block; margin: 1.25rem 0 0 var(--gx); }
}
@media (min-width: 500px) and (max-width: 900px) {
  .ux-swipe .ux-hcard { flex: 0 0 55vw; }
}

/* UX Design: sezione a schermo intero fissata mentre lo scroll attraversa Brief/Research/Outcome (GSAP ScrollTrigger, pin) */
#ux-design {
  position: relative; overflow: hidden;
  background: #fbfbfb; /* default piatto, senza colore: .ux-color-bg aggiunge tono pergamena e sfumature (opt-in) */
  color: var(--ink);
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
}
/* il nav è sticky e sopra il pin: --ux-nav-h riserva la sua fascia, così contenuto, etichette e controlli non finiscono sotto */
#ux-design.is-pinned { padding-top: var(--ux-nav-h, 88px); }

/* Sfondo: quattro sfumature in dissolvenza, una per stato */
.ux-bg { position: absolute; inset: 0; }
.ux-bg__layer {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1s ease; /* un cambio di colore istantaneo sembra un glitch */
}
/* ogni sfumatura prende le tinte dal gradient conico del CTA 'or leave a message' */
.ux-bg__layer--0 { background: linear-gradient(135deg, #f7e4ea 0%, #d6baec 100%); }
.ux-bg__layer--1 { background: linear-gradient(135deg, #b9dbe8 0%, #c0dab3 100%); }
.ux-bg__layer--2 { background: linear-gradient(135deg, #dacaeb 0%, #b9dbe8 100%); }
/* la sfumatura finale è anche il fondo di base della sezione colorata: prima era un beige giallognolo (#efece4) */
.ux-bg__layer--3, .ux-color-bg #ux-design { background: linear-gradient(120deg, #c0dab3 0%, #b9dbe8 35%, #dacaeb 70%, #e9b5c5 100%); }
/* le sfumature sono opt-in (.ux-color-bg): di default sfondo piatto */
.ux-bg { display: none; }
.ux-color-bg .ux-bg { display: block; }

/* Controlli in alto a destra: anello di avanzamento e toggle del colore */
.ux-controls {
  /* in alto serve aggiungere la fascia del nav: il posizionamento assoluto ignora il padding */
  position: absolute; right: var(--gx); top: calc(var(--ux-nav-h, 88px) + clamp(1rem,3vw,2rem)); z-index: 5;
  display: flex; align-items: center; gap: .5rem;
}
.ux-progress-ring { width: 24px; height: 24px; }
.ux-progress-ring__track { fill: none; stroke-width: 2; stroke-linecap: round; stroke: #e6e6e6; }
.ux-progress-ring__fill {
  fill: none; stroke-width: 2;
  stroke-linecap: butt; /* round disegna un puntino all'inizio di un tratto di lunghezza 0 */
  stroke: var(--accent);
  transition: stroke-dasharray .1s linear;
}
/* i quattro archi sono anche bottoni: area di click larga e invisibile, alone leggero in hover/focus */
.ux-progress-ring svg { overflow: visible; }
.ux-progress-ring__hit { fill: none; stroke: transparent; stroke-width: 10; stroke-linecap: butt; cursor: pointer; outline: none; pointer-events: stroke; }
.ux-progress-ring__hit:hover { stroke: rgba(48,48,48,.08); }
.ux-progress-ring__hit:focus-visible { stroke: rgba(48,48,48,.22); }
/* sotto i 950px o con reduced motion non c'è scroll da seguire: l'anello è solo un indicatore */
#ux-design:not(.is-pinned) .ux-progress-ring__hit { display: none; }
.ux-bg-toggle {
  width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.85); border: 1px solid var(--rule); border-radius: 50%;
}
.ux-bg-toggle svg { width: 15px; height: 9px; }
.ux-bg-toggle-arc { stroke: rgba(48,48,48,.35); } /* tenue di default, come lo sfondo piatto */
.ux-color-bg .ux-bg-toggle-arc--1 { stroke: #ff67b5; }
.ux-color-bg .ux-bg-toggle-arc--2 { stroke: #84a98c; }
.ux-color-bg .ux-bg-toggle-arc--3 { stroke: #20a2e9; }

/* Etichette ai margini: sono anche l'apertura */
.ux-margin-label {
  /* centrate nello spazio libero sotto il nav (50% + metà dell'altezza del nav) */
  display: block; position: absolute; top: calc(50% + var(--ux-nav-h, 88px) / 2);
  transform: translateY(-50%) translateX(var(--intro-x, 0px));
  font-family: var(--sans); font-size: .72rem; font-weight: 400; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(48,48,48,.32);
  transition: color .5s ease;
  white-space: nowrap; text-decoration: none; cursor: pointer;
}
.ux-margin-label:hover { color: var(--ink); }
.ux-margin-label--left { left: clamp(20px,6vw,56px); margin-top: -26px; }   /* le due etichette stanno a altezze diverse, */
.ux-margin-label--right { right: clamp(20px,6vw,56px); margin-top: 26px; }  /* così il connettore tra loro è una S */
#ux-design[data-phase="0"] .ux-margin-label { color: var(--ink); }
@media (max-width: 1299px) { /* qui non c'è spazio per i segni a riposo (finirebbero sul testo) */
  .ux-margin-label { opacity: var(--frame-fade, 1); }
  .ux-margin-label { pointer-events: none; } /* nascosto: niente di invisibile da cliccare */
}
/* connettore stile prototipo tra i due riquadri (percorso impostato da homepage.js) */
.ux-connector { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: var(--frame-fade, 1); }
.ux-connector__line { fill: none; stroke: #96cdee; stroke-width: 1.5; stroke-linecap: round; }
.ux-connector__start { fill: #fff; stroke: #96cdee; stroke-width: 1.5; }
.ux-connector__arrow { fill: #96cdee; }
/* Indice di apertura */
.ux-intro-index {
  position: absolute; top: calc(50% + var(--ux-nav-h, 88px) / 2); left: 50%; transform: translate(-50%,-50%);
  font-family: var(--sans); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent);
  opacity: calc(1 - var(--open-progress, 0));
  margin-top: -20px; /* appena sopra il centro del connettore */
  pointer-events: none;
}

/* Contenuto testuale */
.ux-content {
  position: relative; z-index: 2;
  width: 100%; max-width: 1100px; margin: 0 auto; /* width:100% serve: #ux-design è display:flex e senza larghezza definita il centraggio automatico non funziona */
  padding: 0 var(--gx);
  display: flex; flex-direction: column; justify-content: center;
}
.ux-title {
  font-family: var(--display); font-weight: 600;
  font-size: 2.75rem; line-height: 1.1; letter-spacing: -.02em;
  transition: font-size .6s cubic-bezier(.22,.61,.36,1), opacity .9s ease;
}
#ux-design[data-title-risen="1"] .ux-title { font-size: 1.9rem; }
/* titolo e accordion compaiono quando le etichette hanno finito di arrivare (ultimo 40% dell'intro) */
.ux-title-block, .ux-scene-row { opacity: var(--reveal-progress, 1); }

/* Grafica di apertura: un'auto che si assembla da puntini e linee */
.ux-intro-car {
  position: absolute; top: calc(50% + var(--ux-nav-h, 88px) / 2); right: calc((min(420px, 38vw) - 220px) / 2); transform: translateY(-50%);
  width: 220px; height: auto;
  opacity: var(--reveal-progress, 0);
  transition: opacity .3s ease;
  pointer-events: none;
}
#ux-design:not([data-phase="0"]) .ux-intro-car { opacity: 0 !important; }
.ux-intro-car circle { fill: var(--ink); opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; }
.ux-intro-car line { stroke: #4f9fd6; stroke-width: 1; opacity: 0; }
#ux-design.is-revealing .ux-intro-car circle { animation: ux-intro-car-dot .35s ease forwards; }
#ux-design.lines-revealing .ux-intro-car line { animation: ux-intro-car-line .3s ease forwards; }
@keyframes ux-intro-car-line { to { opacity: 1; } }
@keyframes ux-intro-car-dot { to { opacity: 1; transform: scale(1); } }

/* L'accordion */
.ux-scene-row { position: relative; margin-top: 1.5rem; }
.ux-title-accordion {
  list-style: none; margin: 0; padding: 0; max-width: 480px;
  display: flex; flex-direction: column;
}
/* height (non min-height) + overflow:hidden: mentre una voce si chiude e un'altra si apre le loro transizioni si sommano */
#ux-design[data-title-risen="1"] .ux-title-accordion { min-height: 480px; height: auto; overflow: visible; }
.ux-title-accordion > li + li { margin-top: .75rem; }
.ux-title-accordion h3 { margin: 0; }
.ux-accordion-label {
  /* largo quanto la parola, non la colonna: a tutta larghezza la pillola del cursore compariva sullo spazio vuoto */
  display: inline-block; text-align: left;
  background: none; border: none; padding: 0; margin: 0;
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(.75rem, 1.3vw, .875rem); letter-spacing: .12em; text-transform: uppercase;
  /* era .5: portato a .8 per l'AA su tutte le sfumature dello sfondo */
  color: rgba(48,48,48,.8);
  cursor: pointer;
  transition: color .4s ease;
}
/* a riposo è già a .8 per il contrasto AA: poco margine prima di hover/attivo */
.ux-accordion-label:hover { color: rgba(48,48,48,.92); }
.ux-title-accordion li.is-active .ux-accordion-label,
.ux-title-accordion li.is-active .ux-accordion-label:hover { color: var(--ink); }
.ux-accordion-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.65,0,.35,1); }
.ux-title-accordion li.is-active .ux-accordion-body { grid-template-rows: 1fr; }
.ux-accordion-body-inner { overflow: hidden; min-height: 0; }
.ux-title-accordion li.is-active .ux-accordion-body-inner { min-height: 240px; }
.ux-accordion-body-inner > * { opacity: 0; transition: opacity .3s ease; }
.ux-title-accordion li.is-active .ux-accordion-body-inner > * { opacity: 1; transition-delay: .15s; }
.ux-accordion-body-inner p { color: var(--soft); font-size: .9375rem; line-height: 1.6; max-width: 46ch; margin-top: 1rem; }
.ux-accordion-body-inner > p:first-child { margin-top: .5rem; }
/* p.ux-meta e non .ux-meta: serve per vincere su '.ux-accordion-body-inner p' */
p.ux-meta { margin-top: .625rem; max-width: 48ch; font-size: 11px; }
.ux-outcome-checklist { list-style: none; margin: .875rem 0 0; padding: 0; max-width: 46ch; display: flex; flex-direction: column; gap: .5rem; }
.ux-outcome-checklist li { display: flex; align-items: flex-start; gap: .625rem; color: var(--soft); font-size: .9375rem; line-height: 1.2; }
.ux-outcome-checklist li::before { content: "\2713"; flex: 0 0 auto; color: #4caf7d; font-size: .9375rem; font-weight: 700; line-height: 1.2; }

/* trigger della foto inline: piccolo bottone tondo con la fotocamera dentro un paragrafo di Outcome */
.ux-photo-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin: 0 2px; padding: 0; vertical-align: 0;
  background: var(--ink); color: #efece4;
  border: none; border-radius: 50%; cursor: pointer;
}
.ux-photo-trigger svg { width: 12px; height: 12px; }

/* per .ux-cta-bare non c'è una regola base altrove: bottone scuro pieno come nella pagina del caso studio */
.ux-cta-bare {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--sans); font-size: .875rem;
  color: #fff; background: #303030;
  padding: .75rem 1.25rem; border-radius: 2px; /* come .foot-comment-toggle, il CTA della homepage */
  transition: background .2s;
}
.ux-cta-bare:hover, .ux-cta-bare:focus-visible { background: #1a1a1a; }
.ux-accordion-body-inner .ux-cta-bare { position: relative; margin-top: 1.375rem; }
#ux-design.ux-outro-nudge .ux-accordion-body-inner .ux-cta-bare > span {
  animation: ux-cta-nudge-arrow 1.1s ease-in-out 2;
}
@keyframes ux-cta-nudge-arrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* Spazio dei visual: solo uno dei tre è alto alla volta */
.ux-visual-panel { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: min(420px,38vw); }
.ux-brief-visual, .ux-video-panel, .ux-research-visual {
  display: flex; justify-content: center;
  max-height: 0; opacity: 0; overflow: hidden; pointer-events: none;
  transition: opacity .6s ease, max-height .7s ease;
}
#ux-design[data-phase="1"] .ux-brief-visual { max-height: 500px; opacity: 1; pointer-events: auto; }
#ux-design[data-phase="2"] .ux-research-visual { max-height: 500px; min-height: 350px; opacity: 1; pointer-events: auto; }
#ux-design[data-phase="3"] .ux-video-panel { max-height: 500px; opacity: 1; pointer-events: auto; }
.ux-research-visual { position: relative; }

/* post-it della ricerca: tre note inclinate e sovrapposte, come un affinity map; ognuno entra a scaglioni e poi resta fermo */
.ux-research-visual { width: 100%; max-width: 420px; }
.ux-postit-heading {
  position: absolute; top: 0; left: calc(50% - 98px);
  font-family: var(--sans); font-weight: 600; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--soft); opacity: 0;
}
#ux-design[data-phase="2"] .ux-postit-heading, #ux-design:not(.is-pinned) li.is-active .ux-postit-heading { animation: ux-research-note-in .4s ease forwards; }
.ux-postit {
  position: absolute; width: 96px; height: 96px; padding: .7rem .75rem;
  border-radius: 2px; box-shadow: 0 6px 16px rgba(48,48,48,.12);
  display: flex; flex-direction: column; justify-content: center; gap: .25rem;
  opacity: 0; transform: scale(.85);
}
.ux-postit strong { font-family: var(--sans); font-weight: 600; font-size: .6875rem; letter-spacing: .04em; color: var(--ink); }
.ux-postit span { font-size: .75rem; color: var(--soft); }
.ux-postit--1 { background: #c8ecff; top: 28px; left: calc(50% - 98px); transform: rotate(0deg) scale(.85); }
.ux-postit--2 { background: #fff7be; top: 34px; left: calc(50% + 2px); transform: rotate(2deg) scale(.85); }
.ux-postit--3 { background: #f1e2ff; top: 136px; left: calc(50% - 48px); transform: rotate(-1deg) scale(.85); }
#ux-design[data-phase="2"] .ux-postit--1, #ux-design:not(.is-pinned) li.is-active .ux-postit--1 { animation: ux-postit-in-1 .45s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: 0ms; }
#ux-design[data-phase="2"] .ux-postit--2, #ux-design:not(.is-pinned) li.is-active .ux-postit--2 { animation: ux-postit-in-2 .45s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: 180ms; }
#ux-design[data-phase="2"] .ux-postit--3, #ux-design:not(.is-pinned) li.is-active .ux-postit--3 { animation: ux-postit-in-3 .45s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: 360ms; }
@keyframes ux-postit-in-1 { to { opacity: 1; transform: rotate(0deg) scale(1); } }
@keyframes ux-postit-in-2 { to { opacity: 1; transform: rotate(2deg) scale(1); } }
@keyframes ux-postit-in-3 { to { opacity: 1; transform: rotate(-1deg) scale(1); } }
.ux-research-note {
  position: absolute; font-family: 'Kalam', cursive; font-weight: 400; line-height: 1.2;
  color: #707070; opacity: 0; pointer-events: none;
}
.ux-research-note--1 { top: 130px; left: 0; width: 85px; font-size: .75rem; transform: rotate(-3deg); }
.ux-research-note--2 {
  top: 280px; left: 120px; width: 300px; font-size: .8125rem;
  white-space: nowrap; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: .25rem;
}
.ux-research-note--2 .ux-note-label { display: flex; align-items: center; gap: .25rem; }
.ux-note-arrow { width: 14px; height: 10px; flex: 0 0 auto; color: #707070; }
.ux-research-note--2 .ux-mini-ticks, .ux-research-note--2 .ux-mini-track { width: 90px; }
.ux-research-note--3 { top: 18px; right: 20px; font-size: .6875rem; transform: rotate(4deg); }
#ux-design[data-phase="2"] .ux-research-note--1, #ux-design:not(.is-pinned) li.is-active .ux-research-note--1 { animation: ux-research-note-in .45s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: 540ms; }
#ux-design[data-phase="2"] .ux-research-note--2, #ux-design:not(.is-pinned) li.is-active .ux-research-note--2 { animation: ux-research-note-in .45s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: 700ms; }
#ux-design[data-phase="2"] .ux-research-note--3, #ux-design:not(.is-pinned) li.is-active .ux-research-note--3 { animation: ux-research-note-in .45s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: 620ms; }
@keyframes ux-research-note-in { to { opacity: 1; } }
.ux-mini-ticks { display: flex; align-items: flex-end; gap: 3px; height: 11px; }
.ux-mini-ticks span { flex: 1; display: block; width: 1.5px; background: rgba(48,48,48,.25); }
.ux-mini-ticks span.is-active { background: #909293; }
.ux-mini-track { position: relative; height: 1.5px; background: rgba(48,48,48,.3); margin: .375rem .25rem 0; }
.ux-mini-track::before, .ux-mini-track::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: #909293; transform: translate(-50%,-50%); }
.ux-mini-track::before { left: 22%; }
.ux-mini-track::after { left: 68%; }

/* finto campo di ricerca di Brief: tre frasi che si scrivono e si cancellano */
.ux-search-card { width: 100%; max-width: 300px; }
.ux-search-mock {
  display: flex; align-items: center; gap: .625rem;
  width: 100%; max-width: 300px; padding: .5rem .875rem;
  border: 1px solid var(--rule); border-radius: 999px; background: rgba(255,255,255,.45);
}
.ux-search-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--soft); }
.ux-search-field { flex: 1 1 auto; min-width: 0; }
.ux-search-text { font-size: .875rem; line-height: 1; color: var(--ink); white-space: nowrap; display: inline-block; vertical-align: middle; }
.ux-search-cursor { display: inline-block; width: 1.5px; height: 14px; background: var(--ink); vertical-align: middle; }

/* video di Outcome: riusa .ux-player, con il formato del clip (1080x1080) */
.ux-video-panel { width: 100%; max-width: 420px; }
.ux-video-panel .ux-player {
  position: relative; width: 100%; aspect-ratio: 1/1;
  background: #111; overflow: hidden; cursor: pointer; border-radius: 10px;
}

/* Fallback statico / mobile / reduced motion: nessun pin, nessuna dissolvenza, ogni voce aperta */
#ux-design:not(.is-pinned) { overflow: visible; min-height: 0; display: block; padding: 0 0 var(--section-gap); } /* il margine alto viene da .ux-head-m */
/* .ux-bg (sfumature opt-in) e l'anello di avanzamento restano visibili anche qui */
#ux-design:not(.is-pinned) .ux-intro-car { display: none; }
/* i controlli restano usabili: si sciolgono nel flusso normale */
#ux-design:not(.is-pinned) .ux-controls { position: relative; top: auto; right: auto; /* relative lo tiene (z-index 5) sopra i livelli colorati assoluti; static finiva sotto */ display: flex; justify-content: flex-end; align-items: center; gap: .5rem; padding: 0 var(--gx); margin-bottom: .75rem; }
#ux-design:not(.is-pinned) .ux-bg-toggle { margin: 0; }
/* il segno '{ UX Design [03] Project }' appartiene all'apertura con pin (desktop) */
#ux-design:not(.is-pinned) .ux-marks { display: none; }
/* ...e al suo posto la sezione si apre con il titolo di capitolo normale ([03] come nel nav) */
.ux-head-m { display: none; }
#ux-design:not(.is-pinned) .ux-head-m { display: block; position: relative; z-index: 1; } /* posizionato: il contenuto statico finirebbe sotto i livelli colorati */
#ux-design .sec-eyebrow { counter-reset: chapter 2; }
/* i tre stati sono un accordion: righe a tutta larghezza, distanziate, senza filetti */
#ux-design:not(.is-pinned) .ux-title-accordion > li + li { margin-top: 2rem; }
#ux-design:not(.is-pinned) .ux-accordion-label { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .9rem 0; text-align: left; }
/* freccetta accanto al titolo: dice che la riga si apre e si chiude, e ruota quando è aperta */
#ux-design:not(.is-pinned) .ux-accordion-label::after {
  content: ""; flex-shrink: 0; width: .5em; height: .5em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-.15em) rotate(45deg); transition: transform .3s ease;
}
#ux-design:not(.is-pinned) .ux-accordion-label[aria-expanded="true"]::after { transform: translateY(.1em) rotate(-135deg); }
/* pannello aperto: niente minimo da 240px del desktop; lo spazio sotto è padding del pannello aperto */
#ux-design:not(.is-pinned) .ux-title-accordion li.is-active .ux-accordion-body-inner { min-height: 0; padding-bottom: 1.25rem; }
/* il titolo sale al suo posto e le tre righe lo seguono; classi e ritardi li imposta homepage.js */
@media (prefers-reduced-motion: no-preference) {
  .js #ux-design:not(.is-pinned) .ux-rise { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js #ux-design:not(.is-pinned) .ux-rise.in { opacity: 1; transform: none; }
}
#ux-design:not(.is-pinned) .ux-content { max-width: 900px; padding: 0 var(--gx); display: block; }
#ux-design:not(.is-pinned) .ux-title { font-size: clamp(2rem,4vw,2.75rem) !important; }
#ux-design:not(.is-pinned) .ux-scene-row { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.5rem; }
#ux-design:not(.is-pinned) .ux-title-accordion { max-width: none; }
/* accordion vero anche qui: li.is-active comanda grid-template-rows; un handler in homepage.js lo attiva al click */
@media (prefers-reduced-motion: reduce) {
  #ux-design:not(.is-pinned) .ux-accordion-label { pointer-events: none; color: var(--ink) !important; }
  #ux-design:not(.is-pinned) .ux-accordion-label::after { display: none; } /* qui le righe sono sempre aperte: niente freccia */
  #ux-design:not(.is-pinned) .ux-accordion-body { grid-template-rows: 1fr !important; }
  #ux-design:not(.is-pinned) .ux-accordion-body-inner { min-height: 0 !important; }
  #ux-design:not(.is-pinned) .ux-accordion-body-inner > * { opacity: 1 !important; }
  #ux-design:not(.is-pinned) .ux-bg,
  #ux-design:not(.is-pinned) .ux-progress-ring { display: none; }
}
#ux-design:not(.is-pinned) .ux-visual-panel { position: static; width: 100%; max-width: 420px; transform: none; margin-top: .75rem; }
#ux-design:not(.is-pinned) .ux-brief-visual,
#ux-design:not(.is-pinned) .ux-video-panel,
#ux-design:not(.is-pinned) .ux-research-visual { max-height: none !important; opacity: 1 !important; pointer-events: auto !important; }
/* schermi piccoli: i grafici partono dallo stesso bordo sinistro del testo */
#ux-design:not(.is-pinned) .ux-brief-visual,
#ux-design:not(.is-pinned) .ux-video-panel,
#ux-design:not(.is-pinned) .ux-research-visual { justify-content: flex-start; }
/* Research tiene il collage dei post-it (quadrati, inclinati, sovrapposti); l'handler imposta data-phase */
#ux-design:not(.is-pinned) .ux-research-visual { position: relative; min-height: 350px; max-width: 420px; overflow: visible; }
@media (max-width: 420px) { /* 335px di colonna a 375: avvicino la nota di destra al layout da 420px */
  #ux-design:not(.is-pinned) .ux-research-note--2 { left: auto; right: 0; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  #ux-design:not(.is-pinned) .ux-research-visual,
  #ux-design:not(.is-pinned) .ux-postit,
  #ux-design:not(.is-pinned) .ux-postit-heading,
  #ux-design:not(.is-pinned) .ux-research-note { position: static; opacity: 1 !important; transform: none !important; animation: none !important; width: auto; height: auto; max-width: none; min-height: 0; }
  #ux-design:not(.is-pinned) .ux-research-visual { display: flex; flex-direction: column; gap: .625rem; }
}
/* i visual seguono un paragrafo: do loro respiro */
#ux-design:not(.is-pinned) .ux-brief-visual,
#ux-design:not(.is-pinned) .ux-research-visual,
#ux-design:not(.is-pinned) .ux-video-panel { margin-top: 1.25rem; }

/* Player video */
.ux-player video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* velo sul poster da fermo, per far leggere i controlli; sparisce in play */
.ux-player::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,.35); pointer-events: none;
  opacity: 1; transition: opacity .25s;
}
.ux-player.playing::after { opacity: 0; }
.ux-player-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 1;
  display: flex; align-items: center; gap: .5rem;
  padding: .85rem 1rem;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  opacity: 1; transition: opacity .25s;
}
.ux-vol {
  -webkit-appearance: none; appearance: none;
  width: 72px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.4); cursor: pointer;
}
.ux-vol::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 10px; height: 10px; border-radius: 50%; background: #fff; border: none;
}
.ux-vol::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: none; }
.ux-player.playing .ux-player-bar { opacity: 0; }
.ux-player.playing:hover .ux-player-bar { opacity: 1; }
.ux-player-bar button {
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
}
.ux-player-bar svg { width: 1.4rem; height: 1.4rem; fill: #fff; }

/* Contatti */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.contact-left {
  padding: 0 var(--gx) clamp(2.5rem,5vw,5rem) var(--gx);
  display: flex; flex-direction: column; gap: clamp(1.25rem,2.5vw,2rem);
}
.contact-right {
  padding: 0 var(--gx) clamp(2.5rem,5vw,5rem) 0;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.contact-tagline { max-width: 42ch; }
.contact-email-row {
  font-family: var(--display); font-size: clamp(1rem,2vw,1.5rem); color: var(--ink);
  display: inline-flex; align-items: center;
}
.contact-email-row:has(.copied) { color: var(--accent); }
.copy-email-btn {
  background: none; border: 0; padding: 0; font-size: inherit; color: inherit;
  line-height: 1; cursor: copy; transition: color .2s;
}
.copy-email-btn:hover { color: var(--accent); }
.copy-icon { width: .85em; height: .85em; margin-left: .35em; vertical-align: middle; opacity: .45; transition: opacity .2s; flex-shrink: 0; }
.copy-email-btn:hover .copy-icon { opacity: 1; }
.copy-email-btn.copied .copy-icon { display: none; }
.contact-work { display: flex; flex-direction: column; gap: .75rem; }
.contact-work h3 { margin: 0 0 .65rem; font-size: clamp(1.25rem, 2vw, 1.75rem); } /* un po' di aria prima del primo punto */
/* 'Why reach out' cerchiato a mano (tratto irregolare) con lo stesso gradient animato del CTA; si disegna una volta, poi ruota. Il tratto parte in basso a destra e si incrocia sotto la 't' */
.hl-circle { position: relative; display: inline-block; isolation: isolate; padding: .1em .15em; }
.hl-circle::before {
  content: ""; position: absolute; z-index: -1; inset: -.55em -.85em -.5em;
  opacity: .85;
  background: conic-gradient(from var(--cta-glow-angle), var(--cta-stops));
  -webkit-mask-image: var(--hl-mask, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27b%27%20x%3D%27-5%25%27%20y%3D%27-30%25%27%20width%3D%27110%25%27%20height%3D%27160%25%27%3E%3CfeGaussianBlur%20stdDeviation%3D%271.8%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M172%2050%20C%20150%2056%2C%2090%2058%2C%2040%2050%20C%2010%2044%2C%204%2022%2C%2028%2013%20C%2060%203%2C%20130%202%2C%20168%2010%20C%20198%2017%2C%20202%2038%2C%20180%2046%20C%20168%2051%2C%20152%2056%2C%20140%2058%27%20pathLength%3D%271%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%274.5%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27%20opacity%3D%27.3%27%20filter%3D%27url%28%23b%29%27%2F%3E%3Cpath%20d%3D%27M172%2050%20C%20150%2056%2C%2090%2058%2C%2040%2050%20C%2010%2044%2C%204%2022%2C%2028%2013%20C%2060%203%2C%20130%202%2C%20168%2010%20C%20198%2017%2C%20202%2038%2C%20180%2046%20C%20168%2051%2C%20152%2056%2C%20140%2058%27%20pathLength%3D%271%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27%2F%3E%3C%2Fsvg%3E")); mask-image: var(--hl-mask, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27b%27%20x%3D%27-5%25%27%20y%3D%27-30%25%27%20width%3D%27110%25%27%20height%3D%27160%25%27%3E%3CfeGaussianBlur%20stdDeviation%3D%271.8%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M172%2050%20C%20150%2056%2C%2090%2058%2C%2040%2050%20C%2010%2044%2C%204%2022%2C%2028%2013%20C%2060%203%2C%20130%202%2C%20168%2010%20C%20198%2017%2C%20202%2038%2C%20180%2046%20C%20168%2051%2C%20152%2056%2C%20140%2058%27%20pathLength%3D%271%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%274.5%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27%20opacity%3D%27.3%27%20filter%3D%27url%28%23b%29%27%2F%3E%3Cpath%20d%3D%27M172%2050%20C%20150%2056%2C%2090%2058%2C%2040%2050%20C%2010%2044%2C%204%2022%2C%2028%2013%20C%2060%203%2C%20130%202%2C%20168%2010%20C%20198%2017%2C%20202%2038%2C%20180%2046%20C%20168%2051%2C%20152%2056%2C%20140%2058%27%20pathLength%3D%271%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27%2F%3E%3C%2Fsvg%3E"));
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .js .contact-right.in .hl-circle::before { animation: cta-glow 2.5s linear infinite; }
}
.contact-traits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.contact-traits p { letter-spacing: .05em; color: var(--ink); line-height: 1.8; padding-left: 1em; position: relative; }
.contact-traits p::before { content: '—'; position: absolute; left: 0; color: var(--accent); }
/* Frase persiana */
.contact-quotes { display: flex; flex-direction: column; gap: 1.5rem; padding: 6px 0 8px; } /* più vicine all'ultimo punto, che le introduce */
.contact-quote { margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.contact-quote--rtl { padding: .75rem 0; }
.cq-text {
  /* le due citazioni restano su una riga ciascuna: clamp riduce il testo sui telefoni stretti */
  font-family: 'Amiri', serif; font-size: clamp(1rem, 4vw, 1.5rem); line-height: 1.65; color: var(--ink);
}
.contact-quote--rtl .cq-text { direction: rtl; text-align: left; display: block; }
.cq-tooltip {
  position: absolute; top: calc(100% + .4rem); right: 0; left: auto;
  background: var(--soft); color: var(--bg);
  font-family: var(--sans); font-size: .63rem; line-height: 1.6;
  letter-spacing: .02em; direction: ltr;
  /* va a capo invece di nowrap: una riga unica ancorata all'icona potrebbe uscire dallo schermo */
  white-space: normal; max-width: 34ch; width: max-content;
  padding: .4rem .65rem; border-radius: 2px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.cq-hint:hover .cq-tooltip { opacity: 1; }
.contact-quote:not(.contact-quote--rtl) .cq-text {
  font-family: var(--display); font-size: clamp(1rem, 4vw, 1.5rem); font-style: italic; font-weight: 500; letter-spacing: -.01em;
}
.cq-cite { font-family: var(--sans); font-size: 0.75rem; color: var(--muted); font-style: normal; display: flex; align-items: center; gap: .4rem; }
.cq-hint {
  position: relative; display: inline-block;
  font-family: var(--sans); font-size: 0.6875rem;
  color: var(--muted); cursor: default; padding: 0 8px; vertical-align: middle;
}
.contact-links { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.cta_third {
  display: inline-flex; align-items: baseline; gap: .3em;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); transition: color .2s;
}
.cta_third:hover { color: var(--accent); }
.cta_third span { color: var(--accent); }
.arrow-ext { width: .62em; height: .62em; flex-shrink: 0; }

/* Responsive */
@media (max-width: 900px) {
  .ux-player::after { background: rgba(0,0,0,.2); }
  .lpj-cell figcaption { display: none; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-right { padding-left: var(--gx); }
  .proj-head-wrap { grid-template-columns: 1fr; }
  /* deck sticky spento su schermi piccoli: card verticali normali */
  .projects-deck { height: auto; }
  .project-card {
    position: static; height: auto; min-height: 0;
    grid-template-columns: 1fr; gap: 1.5rem;
    margin-bottom: 2rem; padding: clamp(1.5rem, 5vw, 2.5rem);
  }
  .project-card__media { height: auto; aspect-ratio: 4/3; order: -1; margin: 0; box-shadow: none; }
}
@media (max-height: 500px) and (orientation: landscape) {
  nav { height: 48px; }
  .nav-links a { min-height: 48px; }
  .nav-magic { font-size: .65rem; }
}

@media (max-width: 600px) {
  /* card più strette lasciano vedere la successiva, per suggerire che si scorre */
  .tl-card { flex-basis: 210px; }
  .hero-intro { flex-wrap: wrap; }
  .hero-name { white-space: normal; }
  .proj-bleed-h { white-space: normal; }
  .foot-row { flex-wrap: wrap; gap: .5rem; }
}

/* Header: il layout mobile (nome sopra, striscia sotto) parte da 819px, perché tra 601 e ~800px le due pillole non ci stavano */
@media (max-width: 819px) {
/* Nav mobile: riga 1 = nome da solo, centrato; riga 2 = striscia scorrevole + avatar */
  nav { padding: 0; justify-content: stretch; }
  .nav-right {
    flex-direction: column; align-items: stretch; width: 100%;
    padding: 1.75rem .65rem .6rem; gap: .75rem; height: auto;
  }
  .nav-right-top { display: flex; align-items: center; justify-content: center; }
  .nav-logo.nav-logo-mobile { display: flex !important; background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; height: auto !important; box-shadow: none !important; }
  .nav-right-top__tools { display: flex; align-items: center; }
  .nav-logo-mobile--right { font-size: .80rem; letter-spacing: .1em; opacity: 1; }
  .nav-links { padding-bottom: 5px; }
  .nav-logo-float { display: none; }
  /* riga 2: striscia del nav con l'avatar sovrapposto; così il centro della striscia coincide con il centro della riga */
  .nav-row2 { display: block; position: relative; }
  .nav-row2 .nav-links { width: 100%; }
  .nav-row2-avatar {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    z-index: 1;
  }
  /* padding generoso per il tap: il bottone era largo ~32px con ~7px di distanza dalla voce vicina */
  .nav-row2-avatar .nav-magic { padding: 13px 4px 13px 20px; }
  .nav-row2-avatar .nav-magic::before { display: none; } /* divisore non più necessario: l'avatar è una cella a sé */
  /* striscia 'playlist': la voce corrente al centro, le vicine visibili e attenuate; lo swipe scatta alla successiva */
  .nav-links {
    display: flex; gap: 1.85rem; justify-content: flex-start; align-items: center;
    overflow-x: auto; scrollbar-width: none; flex-shrink: 0; min-height: 36px;
    scroll-snap-type: x mandatory;
    padding: 0 calc(50% - 2.25rem); /* metà riga meno circa mezza etichetta: prima e ultima voce arrivano al centro a qualunque larghezza */
    /* contiene l'overscroll orizzontale, come le altre strisce della pagina */
    overscroll-behavior-x: contain;
    /* sfumatura morbida solo a ridosso dell'avatar (circa 60px): la voce successiva a quella attiva resta leggibile fino a lì */
    -webkit-mask-image: linear-gradient(to right, transparent, black 44px, black calc(100% - 80px), transparent calc(100% - 50px));
    mask-image: linear-gradient(to right, transparent, black 44px, black calc(100% - 80px), transparent calc(100% - 50px));
  }
  .nav-links::-webkit-scrollbar { display: none; }
  /* larghezza naturale del contenuto: così la voce vicina si vede subito */
  .nav-links li { flex: 0 0 auto; scroll-snap-align: center; display: flex; justify-content: center; min-width: 0; }
  .nav-links a { width: auto; max-width: 100%; justify-content: center; opacity: .7; }  /* .7 = 4.9:1 (era .35, 2:1) */
  .nav-links a.active { opacity: 1; }
  /* l'indicatore a parentesi è nelle regole base; qui solo l'attenuazione delle voci vicine */
  .nav-dots { display: none; } /* puntini del carosello tolti: li sostituisce l'anteprima della voce vicina */
  nav.scrolled {
    background: #fff;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.08); border-bottom: none;
  }
  nav.scrolled .nav-right { background: transparent; box-shadow: none; border: none; }
}


/* i controlli del carosello esistono solo sotto i 900px: se la finestra si allarga dopo il caricamento non devono comparire grezzi */
.project-card__more, .projects-pager { display: none; }
/* Carosello dei progetti su schermi piccoli (classe impostata da homepage.js): swipe, una card per volta, la successiva fa capolino */
@media (max-width: 899px) {
  .projects-deck--carousel {
    display: flex; gap: .75rem; width: auto; max-width: none; height: auto;
    margin: 1rem calc(-1 * var(--gx)) 0; padding: 0 var(--gx) 1rem; /* a filo schermo; spazio per l'ombra delle card */
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gx);
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .projects-deck--carousel::-webkit-scrollbar { display: none; }
  .projects-deck--carousel .project-card {
    flex: 0 0 calc(100% - 1.75rem); margin-bottom: 0; box-sizing: border-box;
    scroll-snap-align: start; transition: opacity .3s ease;
    align-content: start; align-items: start; /* le card si allungano fino alla più alta: il contenuto resta in alto, non centrato */
  }
  .projects-deck--carousel .project-card:not(.is-current) { opacity: .55; }
  .projects-deck--carousel .project-card__desc:not(.is-open) {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  .project-card__more {
    display: block; align-self: flex-start; padding: .5rem 0; background: none; border: 0;
    font-family: var(--sans); font-size: .75rem; font-weight: 500; letter-spacing: .05em; text-transform: lowercase;
    color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  }
  .projects-pager { display: flex; align-items: center; justify-content: center; gap: .75rem; }
  .projects-pager__dots { display: flex; }
  .projects-pager__dot { position: relative; width: 24px; height: 24px; padding: 0; background: none; border: 0; }
  .projects-pager__dot::before {
    content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
    border-radius: 50%; background: rgba(48,48,48,.25); transition: background .2s, transform .2s;
  }
  .projects-pager__dot.is-active::before { background: var(--ink); transform: scale(1.3); }
  .projects-pager__count { font-family: var(--sans); font-size: .75rem; letter-spacing: .08em; color: var(--muted); font-variant-numeric: tabular-nums; }
}
@media (prefers-reduced-motion: reduce) { .projects-deck--carousel .project-card { transition: none; } }

/* Experience su schermi piccoli: la riga delle date occupa i margini */
@media (max-width: 600px) { .cm-scrubber { justify-content: space-between; } }

/* Frecce stile prototipo (scena con pin). Slide 0: la parentesi dal titolo a Brief, misurata da homepage.js; le altre: freccia CSS sulla riga successiva */
.ux-flow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .35s ease; z-index: 3; }
.ux-flow__line { fill: none; stroke: #96cdee; stroke-width: 1.5; stroke-linecap: round; }
.ux-flow__start { fill: #fff; stroke: #96cdee; stroke-width: 1.5; }
.ux-flow__arrow { fill: #96cdee; }
/* schermi piccoli: niente freccia lunga, solo quella piccola sotto la riga aperta */
#ux-design:not(.is-pinned) .ux-flow:not(.ux-flow--intro) { display: none; }
/* connettore dell'intro per schermi piccoli (homepage.js): si disegna una volta, la punta arriva per ultima */
#ux-design.is-pinned .ux-flow--intro { display: none; }
.ux-flow--intro { opacity: 1; }
/* freccina nella didascalia 'UX → Design Project', stesso look dei connettori */
.ux-cap-arrow { width: 2.1em; height: .7em; margin: 0 .35em; vertical-align: middle; overflow: visible; }
.ux-cap-arrow circle { fill: #fff; stroke: #96cdee; stroke-width: 1.2; }
.ux-cap-arrow path { fill: #96cdee; stroke: #96cdee; stroke-width: 1.2; stroke-linejoin: round; }
.ux-cap-arrow path:first-of-type { fill: none; }
/* si disegna quando la didascalia si rivela: pallino, linea, punta */
@media (prefers-reduced-motion: no-preference) {
  .js .ux-head-m .ux-cap-arrow circle, .js .ux-head-m .ux-cap-arrow path:last-of-type { opacity: 0; transition: opacity .3s ease; }
  .js .ux-head-m .ux-cap-arrow path:first-of-type { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .ux-head-m.in .ux-cap-arrow circle { opacity: 1; transition-delay: .5s; }
  .js .ux-head-m.in .ux-cap-arrow path:first-of-type { stroke-dashoffset: 0; transition: stroke-dashoffset .6s cubic-bezier(.65,0,.35,1) .7s; }
  .js .ux-head-m.in .ux-cap-arrow path:last-of-type { opacity: 1; transition-delay: 1.25s; }
}
.ux-flow--intro .ux-flow__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ux-flow--intro .ux-flow__start, .ux-flow--intro .ux-flow__arrow { opacity: 0; transition: opacity .3s ease; }
.ux-flow--intro.draw .ux-flow__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) .2s; }
.ux-flow--intro.draw .ux-flow__start { opacity: 1; }
.ux-flow--intro.draw .ux-flow__arrow { opacity: 1; transition-delay: 1.2s; }

/* connettore verticale piccolo (10x24: pallino, linea, punta) sopra l'etichetta della riga successiva, visibile mentre la precedente è aperta */
#ux-design .ux-title-accordion > li { position: relative; }
#ux-design .ux-title-accordion > li::before {
  content: ""; position: absolute; left: 0; top: -15px; width: 10px; height: 24px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 24'%3E%3Ccircle cx='5' cy='4' r='3' fill='white' stroke='%2396cdee' stroke-width='1.5'/%3E%3Cpath d='M5 7V17' stroke='%2396cdee' stroke-width='1.5' fill='none'/%3E%3Cpath d='M1 16h8l-4 7z' fill='%2396cdee'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0; transition: opacity .35s ease;
}
#ux-design .ux-title-accordion > li.is-active + li::before { opacity: 1; }
/* schermi piccoli: stessa freccina, nello spazio sotto il contenuto della riga aperta */
#ux-design:not(.is-pinned) .ux-title-accordion > li::before { top: -40px; }

/* schermi piccoli: una riga chiusa mostra titolo, primo paragrafo su 3 righe e 'read more'; il resto si apre con la riga */
@media (prefers-reduced-motion: no-preference) {
  .js #ux-design:not(.is-pinned) .ux-accordion-body { grid-template-rows: 1fr; }
  .js #ux-design:not(.is-pinned) .ux-accordion-body-inner > .ux-clamp,
  .js #ux-design:not(.is-pinned) .ux-accordion-body-inner > .ux-more,
  .js #ux-design:not(.is-pinned) .ux-accordion-body-inner > .ux-cta-bare { opacity: 1; }  /* senza questo la CTA c'era ma era trasparente (opacity 0 di base) */
  .js #ux-design:not(.is-pinned) li.is-active .ux-more { display: none; }
  /* la CTA verso la landing UX resta sempre visibile, anche a riga chiusa: sta fuori dal 'read more', sotto di esso */
  .js #ux-design:not(.is-pinned) li:not(.is-active) .ux-accordion-body-inner > :not(.ux-clamp):not(.ux-more):not(.ux-cta-bare) { display: none; }
  .js #ux-design:not(.is-pinned) li:not(.is-active) .ux-accordion-body-inner { display: flex; flex-direction: column; align-items: flex-start; }
  .js #ux-design:not(.is-pinned) li:not(.is-active) .ux-accordion-body-inner > .ux-more { order: 1; }
  .js #ux-design:not(.is-pinned) li:not(.is-active) .ux-accordion-body-inner > .ux-cta-bare { order: 2; }
  .js #ux-design:not(.is-pinned) li:not(.is-active) .ux-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
.ux-more { display: none; }
#ux-design:not(.is-pinned) .ux-more { /* si chiude dal titolo: niente 'show less' */
  display: inline-block; align-self: flex-start; margin-top: .25rem; padding: .5rem 0; background: none; border: 0;
  font-family: var(--sans); font-size: .75rem; font-weight: 500; letter-spacing: .05em; text-transform: lowercase;
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}


/* UX Phase 3 Live Craft Card */
.ux-craft-card {
  width: 100%;
  max-width: 420px;
  background: #1e1e24;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  overflow: hidden;
  font-family: var(--code, 'SF Mono', Consolas, monospace);
  color: #e2e8f0;
  text-align: left;
}
.ux-craft-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #16161a;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ux-craft-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.ux-craft-dot.dot-r { background: #ff5f56; }
.ux-craft-dot.dot-y { background: #ffbd2e; }
.ux-craft-dot.dot-g { background: #27c93f; }
.ux-craft-title {
  margin-left: 8px;
  font-size: 11px;
  color: #94a3b8;
  letter-spacing: 0.04em;
}
.ux-craft-code {
  padding: 16px 18px;
  font-size: 12.5px;
  line-height: 1.65;
  background: #1e1e24;
}
.ux-craft-code code {
  display: block;
  font-family: inherit;
}
.c-kwd { color: #f472b6; font-weight: 600; }
.c-fn { color: #60a5fa; }
.c-prop { color: #38bdf8; }
.c-str { color: #a7f3d0; }
.c-val { color: #fbbf24; }
.ux-craft-badge {
  padding: 8px 16px;
  background: rgba(39, 201, 63, 0.12);
  border-top: 1px solid rgba(39, 201, 63, 0.25);
  color: #4ade80;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}


/* =============================================================== */
/* OPTION 4: INTERACTIVE MINIMALIST PROGRESS DOCK                   */
/* =============================================================== */
.scroll-dock {
  position: fixed !important;
  bottom: 24px !important;
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 990 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  user-select: none !important;
  background: transparent !important;
}
.scroll-dock__capsule {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 38px !important;
  width: auto !important;
  padding: 0 16px !important;
  background: rgba(24, 24, 28, 0.9) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 9999px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.scroll-dock__capsule:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.scroll-dock__pct {
  font-family: var(--code, 'SF Mono', Consolas, monospace) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #38bdf8 !important;
  min-width: 30px !important;
  text-align: right !important;
  letter-spacing: 0.04em !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
}
.scroll-dock__divider {
  width: 1px !important;
  height: 14px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  flex-shrink: 0 !important;
}
.scroll-dock__items {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: auto !important;
}
.dock-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: var(--sans, system-ui, -apple-system, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}
.dock-item:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
.dock-item.is-active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.16) !important;
  font-weight: 600 !important;
}
.dock-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.4) !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}
.dock-item:hover .dock-dot {
  background: rgba(255, 255, 255, 0.9) !important;
  transform: scale(1.2) !important;
}
.dock-item.is-active .dock-dot {
  background: #38bdf8 !important;
  box-shadow: 0 0 8px #38bdf8 !important;
  transform: scale(1.3) !important;
}

/* Retire legacy companion elements */
.scroll-lion, .scroll-madrasa, .scroll-sprite, .scroll-hit, .scroll-endscene, .nav-row2-avatar {
  display: none !important;
}

@media (max-width: 680px) {
  .dock-label { display: none !important; }
  .dock-item { padding: 6px 7px !important; }
  .scroll-dock { bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
}


/* Timeline discovery cue */
.tl-hint-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--gx) 1.25rem;
}
.tl-hint-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.035);
  border: 1px solid rgba(0, 0, 0, 0.07);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  user-select: none;
}
.tl-hint-arrow {
  display: inline-block;
  vertical-align: middle;
  opacity: 0.7;
}

/* Accordion Step Number Badge */
.ux-step-badge {
  font-family: var(--mono, monospace);
  font-size: 0.82em;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-right: 0.6rem;
  font-weight: 600;
}

/* Contact Hertfordshire meeting callout */
.contact-sub-herts {
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.contact-sub-herts .herts-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
  flex-shrink: 0;
}

/* Section scroll offsets for sticky header (Desktop & Mobile) */
#about,
#experience,
#ux-design,
#projects,
#contact,
.satrapi-section {
  scroll-margin-top: 96px;
}

@media (max-width: 819px) {
  #about,
  #experience,
  #ux-design,
  #projects,
  #contact,
  .satrapi-section {
    scroll-margin-top: 125px !important;
  }
}

/* Capabilities Deck Badges */
.project-card__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(43, 90, 75, 0.08);
  border: 1px solid rgba(43, 90, 75, 0.22);
  padding: 0.22rem 0.55rem;
  border-radius: 2px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

/* =============================================================== */
/* APPROACH A: ENHANCED TIMELINE CARDS & CORPORATE BRAND ACCENTS   */
/* =============================================================== */
.tl-card {
  flex: 0 0 252px !important;
  height: 196px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
  border-radius: 10px !important;
  padding: 14px 16px 14px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}
.tl-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.12) !important;
}
.tl-card__name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  letter-spacing: 0.02em !important;
  margin-top: 2px !important;
  margin-bottom: 4px !important;
}
.tl-card__year {
  font-family: var(--mono) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #4b5563 !important;
  letter-spacing: 0.04em !important;
}
.tl-card__sub {
  font-size: 0.74rem !important;
  line-height: 1.5 !important;
  color: #4b5563 !important;
}
.tl-card__logos img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 6px !important;
  padding: 3px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  background: #ffffff !important;
}
.tl-tag--hub {
  font-family: var(--sans) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  background: rgba(35, 79, 101, 0.08) !important;
  color: #1e3a8a !important;
  border: 1px solid rgba(30, 58, 138, 0.15) !important;
}

/* Authentic Corporate Brand Top Borders & Hover Glows */
.tl-card[data-brand="alixpartners"] {
  border-top: 3.5px solid #002b49 !important;
}
.tl-card[data-brand="alixpartners"]:hover {
  box-shadow: 0 12px 28px -4px rgba(0, 43, 73, 0.22) !important;
}
.tl-card[data-brand="onestepbeyond"] {
  border-top: 3.5px solid #6366f1 !important;
}
.tl-card[data-brand="onestepbeyond"]:hover {
  box-shadow: 0 12px 28px -4px rgba(99, 102, 241, 0.24) !important;
}
.tl-card[data-brand="oktik"] {
  border-top: 3.5px solid #8b5cf6 !important;
}
.tl-card[data-brand="oktik"]:hover {
  box-shadow: 0 12px 28px -4px rgba(139, 92, 246, 0.24) !important;
}
.tl-card[data-brand="zones"] {
  border-top: 3.5px solid #ea580c !important;
}
.tl-card[data-brand="zones"]:hover {
  box-shadow: 0 12px 28px -4px rgba(234, 88, 12, 0.24) !important;
}
.tl-card[data-brand="epo"] {
  border-top: 3.5px solid #0284c7 !important;
}
.tl-card[data-brand="epo"]:hover {
  box-shadow: 0 12px 28px -4px rgba(2, 132, 199, 0.24) !important;
}
.tl-card[data-brand="creditsuisse"] {
  border-top: 3.5px solid #dc2626 !important;
}
.tl-card[data-brand="creditsuisse"]:hover {
  box-shadow: 0 12px 28px -4px rgba(220, 38, 38, 0.24) !important;
}
.tl-card[data-brand="sse"] {
  border-top: 3.5px solid #10b981 !important;
}
.tl-card[data-brand="sse"]:hover {
  box-shadow: 0 12px 28px -4px rgba(16, 185, 129, 0.24) !important;
}
.tl-card[data-brand="quantcast"] {
  border-top: 3.5px solid #06b6d4 !important;
}
.tl-card[data-brand="quantcast"]:hover {
  box-shadow: 0 12px 28px -4px rgba(6, 182, 212, 0.24) !important;
}
.tl-card[data-brand="ricoh"] {
  border-top: 3.5px solid #e11d48 !important;
}
.tl-card[data-brand="ricoh"]:hover {
  box-shadow: 0 12px 28px -4px rgba(225, 29, 72, 0.24) !important;
}
.tl-card[data-brand="aon"] {
  border-top: 3.5px solid #b91c1c !important;
}
.tl-card[data-brand="aon"]:hover {
  box-shadow: 0 12px 28px -4px rgba(185, 28, 28, 0.24) !important;
}
.tl-card[data-brand="babcock"] {
  border-top: 3.5px solid #1e3a8a !important;
}
.tl-card[data-brand="babcock"]:hover {
  box-shadow: 0 12px 28px -4px rgba(30, 58, 138, 0.24) !important;
}

/* =============================================================== */
/* ENHANCEMENTS: FROSTED HEADER ZERO-BLEED GUARANTEE               */
/* =============================================================== */
nav#main-nav {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 500 !important;
  width: 100% !important;
  background-color: #fdfcfa !important;
  background: rgba(253, 252, 250, 0.98) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(22, 22, 24, 0.08) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04) !important;
}

@media (max-width: 819px) {
  nav#main-nav {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 500 !important;
    width: 100% !important;
    background-color: #fdfcfa !important;
    background: rgba(253, 252, 250, 0.98) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(22, 22, 24, 0.1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    padding: 0.75rem 0.65rem 0.45rem !important;
    height: auto !important;
  }
}

/* =============================================================== */
/* OPTION 1: TIMELINE CARDS TOP-RIGHT 50PX EMBOSSED LOGOS          */
/* =============================================================== */
.tl-card {
  flex: 0 0 268px !important;
  height: 206px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  padding: 16px 16px 14px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}
.tl-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 14px 30px -4px rgba(0, 0, 0, 0.12) !important;
}
.tl-card__header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
}
.tl-card__meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.tl-card__badges {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.tl-card__year {
  font-family: var(--mono, monospace) !important;
  font-size: 0.70rem !important;
  font-weight: 600 !important;
  color: #4b5563 !important;
  letter-spacing: 0.04em !important;
}
.tl-card__name {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  letter-spacing: 0.01em !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
}
.tl-card__logo-wrap {
  width: 50px !important;
  height: 50px !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
}
.tl-card__logo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 4px !important;
}
.tl-card__sub {
  font-size: 0.74rem !important;
  line-height: 1.5 !important;
  color: #4b5563 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.tl-tag--hub {
  font-family: var(--sans, sans-serif) !important;
  font-size: 0.60rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  background: rgba(35, 79, 101, 0.08) !important;
  color: #1e3a8a !important;
  border: 1px solid rgba(30, 58, 138, 0.15) !important;
}

/* =============================================================== */
/* SECTION 6: ALIGNED TWO-COLUMN HEADERS                            */
/* =============================================================== */
.contact-layout {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(2rem, 5vw, 5rem) !important;
  align-items: start !important;
}
.contact-head-left,
.contact-head-right {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 2rem !important;
}
.contact-head-left .sec-eyebrow,
.contact-head-right .sec-eyebrow {
  margin-bottom: 1rem !important;
  padding-bottom: 0.75rem !important;
}
.contact-head-left .sec-h2 {
  font-family: var(--serif, "Cormorant Garamond", serif) !important;
  font-size: clamp(2.4rem, 4.5vw, 3.8rem) !important;
  line-height: 1.05 !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  opacity: 0.85 !important;
}
.contact-head-right .contact-h3-matched {
  font-family: var(--serif, "Cormorant Garamond", serif) !important;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem) !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  letter-spacing: -0.015em !important;
  margin: 0 !important;
  opacity: 0.85 !important;
}
@media (max-width: 899px) {
  .contact-layout {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
}

/* =============================================================== */
/* PILLAR 1: CONCEPT A CAREER PIPELINE & RECRUITER DISPATCH        */
/* =============================================================== */
.ux-pipeline-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
  border-radius: 8px !important;
  padding: 1.25rem 1.4rem !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
  max-width: 520px !important;
  width: 100% !important;
  font-family: var(--sans, sans-serif) !important;
  margin-top: 1rem !important;
}
.ux-pipeline-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  padding-bottom: 0.65rem !important;
  margin-bottom: 0.85rem !important;
}
.ux-pipeline-title {
  font-family: var(--mono, monospace) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}
.ux-pipeline-live {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: var(--mono, monospace) !important;
  font-size: 0.64rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #15803d !important;
  font-weight: 600 !important;
}
.ux-pipeline-live-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25) !important;
  animation: pulse-dot 2s infinite ease-in-out !important;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}
.ux-pipeline-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem !important;
}
.ux-pipeline-step {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #fbfbfb !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 5px !important;
  padding: 0.45rem 0.75rem !important;
}
.ux-pipeline-step-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.ux-pipeline-check {
  font-family: var(--mono, monospace) !important;
  font-size: 0.70rem !important;
  font-weight: 700 !important;
  color: #059669 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ux-pipeline-step-name {
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
}
.ux-pipeline-step-res {
  font-family: var(--mono, monospace) !important;
  font-size: 0.68rem !important;
  color: #4b5563 !important;
}
.ux-pipeline-footer {
  margin-top: 0.75rem !important;
  padding-top: 0.55rem !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-family: var(--mono, monospace) !important;
  font-size: 0.65rem !important;
  color: #6b7280 !important;
}

/* Responsive UX Visual Panel & Pipeline Card (< 900px) */
@media (max-width: 899px) {
  #ux-design .ux-visual-panel {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    margin-top: 1.25rem !important;
  }
  .ux-pipeline-card {
    max-width: 100% !important;
    padding: 1rem !important;
  }
  .ux-pipeline-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .ux-pipeline-step {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .ux-pipeline-step-res {
    padding-left: 26px !important;
    font-size: 0.65rem !important;
  }
  .ux-pipeline-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
}

/* =============================================================== */
/* BRAND COLOR UPDATES: ALIXPARTNERS GREEN & CREDIT SUISSE NAVY    */
/* =============================================================== */
.tl-card[data-brand="alixpartners"] {
  border-top: 3.5px solid #4da12b !important;
}
.tl-card[data-brand="alixpartners"]:hover {
  box-shadow: 0 12px 28px -4px rgba(77, 161, 43, 0.28) !important;
}
.tl-card[data-brand="creditsuisse"] {
  border-top: 3.5px solid #002b49 !important;
}
.tl-card[data-brand="creditsuisse"]:hover {
  box-shadow: 0 12px 28px -4px rgba(0, 43, 73, 0.28) !important;
}

/* =============================================================== */
/* SECTION 6: ALIGN 'HOW WE CAN CONNECT' WITHOUT 'WAYS TO ENGAGE'  */
/* =============================================================== */
@media (min-width: 900px) {
  .contact-head-right {
    margin-top: 47.42px !important;
  }
}
@media (max-width: 899px) {
  .contact-head-right {
    margin-top: 0 !important;
  }
}


/* =============================================================== */
/* SECTION SCROLL MARGINS & DOCK ACCESSIBILITY ENHANCEMENTS        */
/* =============================================================== */
section, .satrapi-section {
  scroll-margin-top: 80px;
}

@media (max-width: 819px) {
  section, .satrapi-section {
    scroll-margin-top: 65px;
  }
}

.scroll-dock__pct {
  cursor: pointer !important;
  user-select: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.scroll-dock__pct:hover {
  opacity: 0.8;
  transform: scale(1.08);
}