/* ============================================================
   DARIO LO GIUDICE — Web Consultant
   Professional · Editorial · Minimal
   Brand red: #c0361a  |  Dark: #0c0907  |  Cream: #ede5de
   ============================================================ */

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #0c0907;
  color: #c8bcb4;
  overflow-x: hidden;
  cursor: none;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; }
strong { color: #ede5de; font-weight: 600; }

/* ─── Tokens ─────────────────────────────────────────────── */
:root {
  --red:   #c0361a;
  --red-h: #d94020;
  --bg:    #0c0907;
  --bg2:   #110e0a;
  --bg3:   #18120e;
  --cream: #ede5de;
  --text:  #c8bcb4;
  --muted: #6b5f58;
  --line:  rgba(237,229,222,.07);
  --ease:  cubic-bezier(0.16,1,0.3,1);
  /* Services rail alignment — mirrors .wrap padding */
  --wrap-side: max(3rem, calc((100vw - 1240px) / 2 + 3rem));
}

/* ─── 3D background ──────────────────────────────────────── */
#bg {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

/* ─── Loader ─────────────────────────────────────────────── */
#loader {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .65s var(--ease), visibility .65s;
}
/* pointer-events: il velo non deve intercettare i clic nemmeno
   durante la dissolvenza, altrimenti la pagina resta inerte. */
#loader.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.ld-logo {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2.5rem, 9vw, 5.5rem);
  font-weight: 900; letter-spacing: -.03em;
  line-height: 1; margin-bottom: 2.25rem;
}
.ld-d { color: var(--red); }
.ld-l { color: var(--cream); }
.ld-bar-wrap {
  width: 160px; height: 1px;
  background: rgba(237,229,222,.1); margin: 0 auto; overflow: hidden;
}
.ld-bar { height: 100%; width: 0; background: var(--red); transition: width .08s linear; }

/* ─── Cursor ─────────────────────────────────────────────── */
#cur {
  position: fixed; width: 8px; height: 8px;
  background: var(--red); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .2s var(--ease), height .2s var(--ease);
}
#cur2 {
  position: fixed; width: 32px; height: 32px;
  border: 1px solid rgba(192,54,26,.4);
  border-radius: 50%; pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width .3s var(--ease), height .3s var(--ease), border-color .2s;
}
.hov #cur  { width: 16px; height: 16px; }
.hov #cur2 { width: 52px; height: 52px; border-color: rgba(192,54,26,.65); }

/* ─── Nav ────────────────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: 2rem;
  padding: 1.5rem 3rem;
  transition: background .35s, backdrop-filter .35s, border-color .35s, padding .35s;
  border-bottom: 1px solid transparent;
}

/* In cima alla pagina la barra e' trasparente per scelta, ma sotto le
   passa la sfera animata e le voci ci finivano dentro. Una velatura
   sfumata conserva la trasparenza voluta e restituisce un fondo su cui
   leggere. Sparisce appena compare il fondo pieno dello scroll. */
#nav::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(12, 9, 7, .85), rgba(12, 9, 7, 0));
  pointer-events: none;
  transition: opacity .35s;
}
#nav.on::before { opacity: 0; }
#nav.on {
  padding: 1rem 3rem;
  background: rgba(12,9,7,.92);
  backdrop-filter: blur(24px);
  border-color: var(--line);
}
.nav-logo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900; font-size: 1.3rem;
  letter-spacing: -.02em; flex-shrink: 0;
  display: flex; align-items: baseline;
}
.nl-d { color: var(--red); }
.nl-l { color: var(--cream); }
.nav-links { display: flex; gap: 2.1rem; margin-left: auto; }

/* Le voci stavano a #6b5f58: 3,22:1 sul fondo della pagina, sotto la
   soglia di 4,5 richiesta a questa dimensione, e per giunta sopra la
   sfera animata. Con questo tono si arriva a 10,7:1. */
.nav-links a {
  font-size: .95rem; font-weight: 600;
  color: var(--text); letter-spacing: .01em;
  position: relative; transition: color .2s;
}
.nav-links a::after {
  content: ''; position: absolute;
  bottom: -2px; left: 0; width: 0; height: 1px;
  background: var(--red); transition: width .3s var(--ease);
}
.nav-links a:hover,
.nav-links a:focus-visible { color: var(--cream); }
.nav-links a:hover::after,
.nav-links a:focus-visible::after { width: 100%; }

/* La pagina in cui ci si trova. C'era gia' una regola per .nav-active, ma
   quella classe la mette solo il menu di riserva: il menu vero viene da
   WordPress, che usa le proprie classi, e cosi' nessuna voce risultava
   mai evidenziata. */
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a,
.nav-links .current-menu-ancestor > a { color: var(--cream); }
.nav-links .current-menu-item > a::after,
.nav-links .current_page_item > a::after,
.nav-links .current-menu-ancestor > a::after { width: 100%; }
/* Era testo rosso su fondo scuro dentro un bordo tenue: 3,58:1, e il
   richiamo principale del sito passava inosservato. Pieno arriva a 5,6:1
   e si vede per primo, che e' il suo mestiere. */
.nav-btn {
  display: inline-flex; align-items: center;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--red); color: #fff;
  border: 1px solid var(--red);
  padding: .58rem 1.25rem; border-radius: 2px;
  transition: background .2s, border-color .2s, transform .2s var(--ease); white-space: nowrap;
}
.nav-btn:hover { background: var(--red-h); border-color: var(--red-h); transform: translateY(-1px); }
.nav-btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.hbg { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: none; padding: 3px; }
.hbg span { display: block; width: 22px; height: 2px; background: var(--cream); transition: transform .3s, opacity .3s; }
.hbg.on span:first-child { transform: rotate(45deg) translate(4px,4px); }
.hbg.on span:last-child  { transform: rotate(-45deg) translate(4px,-4px); }

/* ─── Mobile menu ────────────────────────────────────────── */
.mob {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(12,9,7,.97); backdrop-filter: blur(28px);
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  padding: 0 3rem; gap: 2rem;
  opacity: 0; visibility: hidden;
  transition: opacity .4s, visibility .4s;
}
.mob.on { opacity: 1; visibility: visible; }
.mob-logo { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.2rem; letter-spacing: -.02em; margin-bottom: .5rem; color: var(--cream); }
.mob-logo .red { color: var(--red); }
/* L'elenco viene da WordPress: e' una <ul> dentro un contenitore a
   colonna, quindi si porta la propria spaziatura. */
.mob-links {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mob-links li::before { content: none; }

.mob-a,
.mob-links a { font-family: 'Montserrat', sans-serif; font-size: clamp(2rem, 7vw, 3.5rem); font-weight: 900; color: var(--cream); letter-spacing: -.03em; line-height: 1; transition: color .2s; }
.mob-a:hover,
.mob-links a:hover { color: var(--red); }

/* La pagina in cui ci si trova, segnata come nel menu desktop. */
.mob-links .current-menu-item > a,
.mob-links .current_page_item > a { color: var(--red); }

/* Il richiamo al contatto: sul telefono era una voce come le altre, persa
   in fondo all'elenco. */
.mob-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: .5rem;
  padding: 0 2rem;
  background: var(--red);
  color: var(--cream);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background .25s;
}
.mob-btn:hover { background: var(--red-h, #d94020); }

/* ─── Buttons ────────────────────────────────────────────── */
.btn-red {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--red); color: #fff;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .875rem 2rem; border-radius: 2px;
  border: none; cursor: none;
  transition: background .2s, transform .2s var(--ease), box-shadow .2s;
}
.btn-red:hover { background: var(--red-h); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(192,54,26,.32); }
.btn-outline {
  display: inline-flex; align-items: center;
  font-size: .82rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line);
  padding: .875rem 1.75rem; border-radius: 2px;
  transition: color .2s, border-color .2s; cursor: none;
}
.btn-outline:hover { color: var(--cream); border-color: rgba(237,229,222,.2); }

/* ─── Layout ─────────────────────────────────────────────── */
.sec { position: relative; z-index: 1; padding: 9rem 0; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 3rem; }
.sec-header { margin-bottom: 4.5rem; }
.sec-header--flex { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.sec-tag { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--red); margin-bottom: 1.4rem; }
.sec-h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2.25rem, 4.5vw, 4.25rem);
  font-weight: 900; letter-spacing: -.035em;
  line-height: 1.05; color: var(--cream);
}
.sec-h2 em { font-style: italic; color: var(--red); }

/* ─── Reveal ─────────────────────────────────────────────── */
.rb { opacity: 0; transform: translateY(44px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rb.vis { opacity: 1; transform: translateY(0); }
.rw .word { display: inline-block; overflow: hidden; }
.rw .word .wi { display: inline-block; transform: translateY(110%); transition: transform .72s var(--ease); }
.rw.vis .word .wi { transform: translateY(0); }

/* ─── HERO ───────────────────────────────────────────────── */
#hero { min-height: 100vh; display: flex; align-items: center; padding: 0 3rem; position: relative; z-index: 1; }
.hero-inner {
  max-width: 1240px; margin: 0 auto;
  /* La colonna del titolo si prende piu' spazio: quella dei dati e' un
     elenco stretto e non ne ha bisogno. */
  display: grid; grid-template-columns: 1.7fr 1fr;
  gap: 4rem; align-items: center;
  padding-top: 7rem; width: 100%;
}

/* Il titolo si misura sulla PROPRIA colonna, non sulla finestra: con 7.5vw
   arrivava a 101px dentro una colonna di 620px, e ogni riga andava a capo
   due o tre volte occupando 753px di altezza. */
.hero-left { container-type: inline-size; }
.eyebrow { display: flex; align-items: center; gap: .65rem; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2.5rem; }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: blink 2.2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.35} }
.h1 { font-family: 'Montserrat', sans-serif; font-size: clamp(2.35rem, 7cqw, 3.5rem); font-weight: 900; letter-spacing: -.045em; line-height: .96; margin-bottom: 2.25rem; color: var(--cream); text-wrap: balance; }
.h1l { display: block; overflow: hidden; }
.red-text { color: var(--red); }
.hero-desc { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--text); line-height: 1.8; max-width: 54ch; margin-bottom: 2.5rem; text-wrap: pretty; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-stats { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.hs { padding: 2rem 2.25rem; border-bottom: 1px solid var(--line); transition: background .25s; }
.hs:last-child { border-bottom: none; }
.hs:hover { background: rgba(237,229,222,.025); }
.hs strong { display: block; font-family: 'Montserrat', sans-serif; font-size: clamp(2.5rem, 4.5vw, 4rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--cream); margin-bottom: .35rem; }
.hs strong sup { font-size: .45em; vertical-align: super; color: var(--red); letter-spacing: 0; }
.hs span { font-size: .75rem; color: var(--muted); letter-spacing: .06em; font-weight: 500; text-transform: uppercase; }

.scroll-hint { position: absolute; bottom: 2.5rem; left: 3rem; display: flex; align-items: center; gap: 1.25rem; font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); opacity: 0; animation: fadein .6s 2.6s forwards; }
@keyframes fadein { to { opacity: 1; } }
.sh-line { width: 50px; height: 1px; background: var(--muted); position: relative; overflow: hidden; }
.sh-line::after { content: ''; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background: var(--red); animation: shf 1.9s ease-in-out infinite; }
@keyframes shf { 0%{left:-100%} 100%{left:100%} }

/* ─── Marquee ────────────────────────────────────────────── */
.mq { position: relative; z-index: 1; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg2); overflow: hidden; padding: 1rem 0; }
.mq-track { display: flex; gap: 2.25rem; width: max-content; animation: mqrun 32s linear infinite; font-size: .78rem; letter-spacing: .06em; font-weight: 500; color: var(--muted); white-space: nowrap; }
.mq-track em { color: var(--red); font-style: normal; opacity: .5; }
.mq:hover .mq-track { animation-play-state: paused; }
@keyframes mqrun { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ─── About ──────────────────────────────────────────────── */
/* Il testo e' centrato sulla foto, non appoggiato in alto: la colonna
   della foto e' alta 698px e quella del testo 385, e con "start" i 312px
   di differenza restavano tutti in un buco sotto il testo. Divisi sopra e
   sotto si leggono come respiro. */
.about-body { display: grid; grid-template-columns: 1fr 1.15fr; gap: 5rem; align-items: center; }

/* Portrait photo */
.about-photo { display: flex; flex-direction: column; gap: 0; }
.photo-wrap {
  position: relative; overflow: hidden;
  border-radius: 3px;
  background: #0a0604;
  /* aspect keeps it portrait */
  aspect-ratio: 3/4;
}
/* Il selettore include il contenitore per una ragione precisa: Elementor
   dichiara ".elementor img { height: auto }", che vale 0,1,1 e batteva
   ".portrait-img" da solo, che vale 0,1,0. Da quando la home e' fatta di
   widget la foto sta dentro .elementor, quindi si comportava come alta
   quanto le pare: 490px in un riquadro da 660, con 170px di vuoto sotto.
   Con il contenitore davanti si arriva a 0,2,0 e la regola torna a valere. */
.photo-wrap .portrait-img,
.portrait-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 12%;
  display: block;
  /* Keep it B&W, high contrast, editorial */
  filter: grayscale(100%) contrast(1.18) brightness(0.82);
  transition: filter .6s;
}
.portrait-img:hover { filter: grayscale(100%) contrast(1.1) brightness(0.92); }
/* Bottom gradient + subtle red shadow */
.photo-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 40%, rgba(12,9,7,0.92) 100%),
    linear-gradient(160deg, transparent 60%, rgba(192,54,26,0.12) 100%);
}
.photo-caption {
  display: flex; align-items: center; gap: .65rem;
  padding: .75rem 0;
  font-size: .65rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.cap-dot { color: var(--red); }

.about-copy { display: flex; flex-direction: column; gap: 1.5rem; }
.lead { font-size: 1.05rem; line-height: 1.8; color: var(--cream); }
.about-copy p { font-size: .9375rem; line-height: 1.85; color: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.chips span { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--red); border: 1px solid rgba(192,54,26,.28); background: rgba(192,54,26,.06); padding: .3rem .8rem; border-radius: 2px; }

/* ─── Experience timeline ─────────────────────────────────── */
.exp-sec { background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.timeline { display: flex; flex-direction: column; }
.tl-item {
  display: grid;
  grid-template-columns: 160px 1px 1fr;
  gap: 0 2.75rem;
  padding: 2.75rem 0;
  border-bottom: 1px solid var(--line);
}
.tl-item:last-child { border-bottom: none; }

/* Date column */
.tl-date {
  text-align: right;
  padding-top: .3rem;
  display: flex; flex-direction: column; align-items: flex-end; gap: .1rem;
}
.tl-y {
  font-family: 'Montserrat', sans-serif;
  font-size: .9rem; font-weight: 800;
  letter-spacing: -.01em; color: var(--muted);
  line-height: 1;
}
.tl-dash { font-size: .7rem; color: var(--muted); opacity: .4; }
.tl-now {
  font-family: 'Montserrat', sans-serif;
  font-size: .75rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--red);
}

/* Vertical line + dot */
.tl-line {
  position: relative;
  background: var(--line);
}
.tl-dot {
  position: absolute;
  top: .4rem; left: 50%;
  transform: translateX(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px rgba(192,54,26,.5);
}

/* Content */
.tl-body { padding-top: .2rem; }
.tl-company {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); margin-bottom: .6rem;
}
.tl-role {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 900; letter-spacing: -.025em;
  line-height: 1.1; color: var(--cream);
  margin-bottom: .9rem;
}
.tl-desc {
  font-size: .9rem; line-height: 1.8;
  color: var(--text); max-width: 680px;
}

/* ─── Services ───────────────────────────────────────────── */
.srv-sec { padding-bottom: 5rem; }
.srv-rail {
  display: flex;
  /* first card starts at the same left edge as .wrap */
  padding-left: var(--wrap-side);
  padding-right: var(--wrap-side);
  gap: 1px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.srv-rail::-webkit-scrollbar { display: none; }

/* Segnale che il binario continua oltre il bordo destro. Senza, l'ultima
   scheda comincia fuori campo e nessuno sa che esiste. */
.srv-railwrap { position: relative; }
.srv-fade {
  position: absolute;
  top: 1px; right: 0; bottom: 1px;   /* dentro i bordi del binario */
  width: clamp(48px, 8vw, 110px);
  background: linear-gradient(to left, var(--bg) 10%, rgba(12, 9, 7, 0));
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
/* Arrivati in fondo non c'e' piu' nulla da annunciare. */
.srv-railwrap.is-fine .srv-fade { opacity: 0; }
.srv-rail.drag { cursor: grabbing; }
.srv-card {
  flex: 0 0 340px;
  background: var(--bg2);
  padding: 2.75rem 2.25rem;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 1.4rem;
  border-right: 1px solid var(--line);
  transition: background .3s;
}
.srv-card:last-child { border-right: none; }
.srv-card:hover { background: var(--bg3); }
.card-n { font-size: .65rem; letter-spacing: .16em; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.card-icon { width: 34px; height: 34px; color: var(--red); opacity: .75; }
.srv-card header { display: flex; flex-direction: column; gap: .9rem; }
.srv-card h3 { font-family: 'Montserrat', sans-serif; font-size: 1.45rem; font-weight: 900; letter-spacing: -.025em; line-height: 1.1; color: var(--cream); }
.srv-card p { font-size: .875rem; line-height: 1.8; color: var(--text); flex: 1; }
.srv-card ul { display: flex; flex-direction: column; gap: .45rem; }
.srv-card li { font-size: .82rem; color: var(--muted); padding-left: .9rem; position: relative; }
.srv-card li::before { content: '—'; position: absolute; left: 0; color: var(--red); font-size: .7rem; }
.card-link { font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--red); margin-top: auto; transition: letter-spacing .2s; display: inline-block; }
.card-link:hover { letter-spacing: .14em; }

/* ─── Numbers ────────────────────────────────────────────── */
.num-sec { background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.num-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); margin-bottom: 4rem; }
.num-item { padding: 3rem 2rem; border-right: 1px solid var(--line); }
.num-item:last-child { border-right: none; }
.num-val { font-family: 'Montserrat', sans-serif; font-size: clamp(3.5rem, 5.5vw, 5.5rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--cream); margin-bottom: .75rem; }
.num-val sup { font-size: .42em; vertical-align: super; color: var(--red); letter-spacing: 0; }
.num-item p { font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.clients-hd { font-size: .65rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.25rem; }
.clients-list { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; font-size: .9rem; font-weight: 700; color: rgba(237,229,222,.18); }
.dot-sep { color: var(--line); }
.clients-list span { transition: color .2s; cursor: default; }
.clients-list span:hover { color: rgba(237,229,222,.5); }

/* ─── Quote ──────────────────────────────────────────────── */
.quote-sec { padding: 11rem 0; }
.bq { font-family: 'Montserrat', sans-serif; font-size: clamp(1.6rem, 3vw, 2.75rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.35; color: var(--cream); max-width: 900px; quotes: none; font-style: italic; }
.bq-cite { display: block; margin-top: 2rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-style: normal; }

/* ─── Stack ──────────────────────────────────────────────── */
.stack-sec { background: var(--bg2); border-top: 1px solid var(--line); }
.stack-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 4rem; }
.stack-col { display: flex; flex-direction: column; gap: 1.5rem; }
.s-cat { font-size: .65rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--red); padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.s-item { display: flex; flex-direction: column; gap: .4rem; }
.s-item span { font-size: .9rem; color: var(--cream); font-weight: 500; }
.s-bar { height: 2px; background: rgba(237,229,222,.06); border-radius: 2px; overflow: hidden; }
.s-fill { height: 100%; width: 0; background: var(--red); border-radius: 2px; transition: width 1.4s var(--ease); }

/* ─── Blog ───────────────────────────────────────────────── */
.blog-sec { border-top: 1px solid var(--line); }
.blog-all { align-self: flex-end; flex-shrink: 0; }
.blog-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 1px;
  border: 1px solid var(--line);
}
.blog-card {
  display: flex; flex-direction: column;
  background: var(--bg2);
  transition: background .25s;
  overflow: hidden;
}
.blog-card:hover { background: var(--bg3); }
.blog-card--featured .bc-img { aspect-ratio: 16/9; }

.bc-img {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--bg3);
  flex-shrink: 0;
}

/* Le schede che contengono uno scatto seguono la proporzione dello scatto:
   un riquadro fisso lo taglierebbe, e l'immagine in evidenza perderebbe
   proprio la parte che era stata inquadrata. Serve in home, dove blog.css
   non viene caricato e restavano 27px di vuoto sotto ogni foto.

   Sta DOPO .bc-img di proposito: stessa specificita', quindi a decidere e'
   l'ordine. Scritta prima, perdeva. */
.bc-img--photo,
.blog-card--featured .bc-img--photo { aspect-ratio: auto; }
.bc-img--photo img { display: block; width: 100%; height: auto; }
/* Abstract geometric pattern per card */
.bc-img--1 { background: linear-gradient(135deg, #18120e 0%, #0c0907 100%); }
.bc-img--1 .bc-pattern {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,   transparent, transparent 29px, rgba(192,54,26,.12) 30px),
    repeating-linear-gradient(90deg,  transparent, transparent 29px, rgba(192,54,26,.07) 30px);
}
.bc-img--2 { background: #0c0907; }
.bc-img--2 .bc-pattern {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 19px, rgba(192,54,26,.1) 20px),
    repeating-linear-gradient(-45deg, transparent, transparent 19px, rgba(192,54,26,.05) 20px);
}
.bc-img--3 { background: #100c09; }
.bc-img--3 .bc-pattern {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 30% 40%, rgba(192,54,26,.2) 0%, transparent 55%),
                    radial-gradient(circle at 70% 65%, rgba(192,54,26,.12) 0%, transparent 45%);
}
.bc-body { padding: 1.75rem 2rem 2rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.bc-meta { display: flex; align-items: center; gap: .75rem; }
.bc-tag { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); border: 1px solid rgba(192,54,26,.3); padding: .2rem .55rem; border-radius: 1px; }
.bc-time { font-size: .68rem; color: var(--muted); letter-spacing: .05em; }
.bc-title { font-family: 'Montserrat', sans-serif; font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: var(--cream); flex: 1; }
.bc-excerpt { font-size: .875rem; line-height: 1.75; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bc-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--line); }
.bc-date { font-size: .72rem; color: var(--muted); letter-spacing: .04em; }
.bc-link { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); transition: letter-spacing .2s; }
.bc-link:hover { letter-spacing: .13em; }

/* ─── Contact ────────────────────────────────────────────── */
.contact-sec { border-top: 1px solid var(--line); }
.contact-wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: 7rem; align-items: start; }
.contact-l .sec-h2 { margin-bottom: 1.5rem; }
.contact-sub { font-size: .9375rem; color: var(--text); line-height: 1.75; margin-bottom: 2.75rem; }
.contact-links { display: flex; flex-direction: column; gap: 1.1rem; }
.cl { display: flex; align-items: center; gap: .875rem; font-size: .875rem; color: var(--muted); transition: color .2s; }
.cl:hover { color: var(--cream); }
.cl-icon { width: 22px; text-align: center; color: var(--red); font-size: .9rem; }
form { display: flex; flex-direction: column; gap: 1.25rem; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.fg { display: flex; flex-direction: column; gap: .45rem; }
.fg label { font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fg input, .fg select, .fg textarea {
  background: var(--bg3); border: 1px solid var(--line);
  border-radius: 2px; padding: .875rem 1rem;
  color: var(--cream); font-family: 'Inter', sans-serif; font-size: .9375rem;
  width: 100%; outline: none;
  transition: border-color .2s, box-shadow .2s;
  cursor: none; resize: vertical; -webkit-appearance: none; appearance: none;
}
.fg input::placeholder, .fg textarea::placeholder { color: var(--muted); }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: rgba(192,54,26,.6); box-shadow: 0 0 0 3px rgba(192,54,26,.1); }
form .btn-red { align-self: flex-start; }
.f-ok { font-size: .82rem; min-height: 1.2rem; font-weight: 600; }

/* ─── Footer ─────────────────────────────────────────────── */
.footer { position: relative; z-index: 1; padding: 2.75rem 0; border-top: 1px solid var(--line); }
.foot-wrap { display: flex; align-items: center; gap: 3rem; flex-wrap: wrap; }
.foot-brand { display: flex; flex-direction: column; gap: .2rem; }
.foot-logo { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.1rem; letter-spacing: -.02em; }
.fd { color: var(--red); }
.fl { color: var(--cream); }
.foot-sub { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.foot-nav { display: flex; gap: 2rem; margin-left: auto; }
.foot-nav a { font-size: .8rem; font-weight: 500; color: var(--muted); transition: color .2s; }
.foot-nav a:hover { color: var(--cream); }
.foot-copy { font-size: .75rem; color: var(--muted); letter-spacing: .05em; }

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(192,54,26,.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ══════════════════════════════════════════════════════════
   BLOG PAGE  (blog.html)
══════════════════════════════════════════════════════════ */

/* Nav active state */
.nav-active { color: var(--cream) !important; }
.nav-active::after { width: 100% !important; }

/* Blog page hero */
.blog-ph {
  position: relative; z-index: 1;
  padding: 10rem 0 4rem;
  border-bottom: 1px solid var(--line);
}
.blog-ph-h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 900; letter-spacing: -.04em;
  line-height: 1.0; color: var(--cream);
  margin-bottom: 1.5rem;
}
.blog-ph-sub {
  font-size: 1rem; color: var(--muted);
  line-height: 1.7; max-width: 540px;
}

/* Filter bar */
.blog-filter-bar {
  position: relative; z-index: 1;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
  padding: 1rem 0;
}
.filter-pills {
  display: flex; gap: .5rem;
  flex-wrap: wrap;
}
.fp {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
  background: none; border: 1px solid var(--line);
  padding: .35rem .9rem; border-radius: 2px;
  cursor: none; transition: color .2s, border-color .2s, background .2s;
}
.fp:hover { color: var(--cream); border-color: rgba(237,229,222,.2); cursor: none; }
.fp.active { color: var(--red); border-color: rgba(192,54,26,.4); background: rgba(192,54,26,.07); }

/* Blog listing */
.blog-listing { position: relative; z-index: 1; }

/* Featured article */
.bl-featured {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  margin-bottom: 1px;
  background: var(--bg2);
  transition: background .25s;
}
.bl-featured:hover { background: var(--bg3); }
.blf-img {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--bg3);
  text-decoration: none;
}
.blf-pattern {
  position: absolute; inset: 0;
}
.blf-p1 {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(192,54,26,.28) 0%, transparent 55%),
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(192,54,26,.07) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(192,54,26,.04) 40px);
}
.blf-meta-over {
  position: absolute; top: 1.5rem; left: 1.5rem;
  display: flex; align-items: center; gap: .75rem;
}
.blf-body {
  padding: 3rem 3.5rem;
  display: flex; flex-direction: column;
  gap: 1.25rem;
}
.blf-date-row { display: flex; align-items: center; gap: 1rem; }
.blf-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 2.25rem);
  font-weight: 900; letter-spacing: -.03em;
  line-height: 1.15; flex: 1;
}
.blf-title a { color: var(--cream); transition: color .2s; }
.blf-title a:hover { color: var(--red); }
.blf-excerpt { font-size: .9375rem; color: var(--text); line-height: 1.8; flex: 1; }
.blf-link {
  font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); align-self: flex-start;
  transition: letter-spacing .2s;
}
.blf-link:hover { letter-spacing: .15em; }

/* 3-column grid */
.bl-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px;
  border: 1px solid var(--line);
  border-top: none;
}
.bl-grid .blog-card { border-right: none; }

/* Extra card image patterns */
.bc-img--4 { background: #0f0c09; }
.bc-img--4 .bc-pattern {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 70% 30%, rgba(192,54,26,.18) 0%, transparent 50%),
    repeating-linear-gradient(-30deg, transparent, transparent 14px, rgba(192,54,26,.07) 15px);
}
.bc-img--5 { background: #0c0a07; }
.bc-img--5 .bc-pattern {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(60deg, transparent, transparent 24px, rgba(192,54,26,.09) 25px),
    repeating-linear-gradient(-60deg, transparent, transparent 24px, rgba(192,54,26,.05) 25px);
}

/* Card image as link */
.bc-img-link { display: block; text-decoration: none; }
.bc-img-link .bc-img { transition: opacity .3s; }
.bc-img-link:hover .bc-img { opacity: .8; }

/* Blog card title links */
.bc-title a { color: inherit; transition: color .2s; }
.bc-title a:hover { color: var(--red); }

/* Hidden (filtered out) */
.bl-hidden { display: none !important; }

/* Pagination */
.pagination {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 2.5rem 0;
  border-top: 1px solid var(--line);
  margin-top: 1px;
}
.pg-btn {
  font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); background: none;
  border: 1px solid var(--line);
  padding: .55rem 1.25rem; border-radius: 2px;
  cursor: none; transition: color .2s, border-color .2s;
}
.pg-btn:hover:not(:disabled) { color: var(--cream); border-color: rgba(237,229,222,.2); }
.pg-btn:disabled { opacity: .3; cursor: not-allowed; }
.pg-nums { display: flex; gap: .4rem; }
.pg-n {
  width: 34px; height: 34px;
  font-size: .78rem; font-weight: 700;
  color: var(--muted); background: none;
  border: 1px solid var(--line); border-radius: 2px;
  cursor: none; transition: all .2s; display: flex;
  align-items: center; justify-content: center;
}
.pg-n:hover { color: var(--cream); border-color: rgba(237,229,222,.2); }
.pg-n.active { color: var(--red); border-color: rgba(192,54,26,.45); background: rgba(192,54,26,.08); }

/* ══════════════════════════════════════════════════════════
   SINGLE POST  (post.html)
══════════════════════════════════════════════════════════ */

/* Reading progress bar */
#reading-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 300;
  background: var(--red);
  width: 0;
  transform-origin: left;
  transition: width .1s linear;
}

/* Post hero */
.post-hero {
  position: relative; z-index: 1;
  padding: 9rem 0 0;
}

/* Post hero con background image (immagine in evidenza come sfondo) */
.post-hero--bg {
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  padding: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--bg3);
}
.post-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(12,9,7,.45) 0%,
    rgba(12,9,7,.6) 50%,
    rgba(12,9,7,.92) 100%
  );
  z-index: 1;
}
.post-hero-content {
  position: relative;
  z-index: 2;
  padding-top: 9rem;
  padding-bottom: 3rem;
  width: 100%;
}
.post-breadcrumb {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 2.5rem;
}
.post-back {
  font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); transition: color .2s;
}
.post-back:hover { color: var(--red); }
.pbc-sep { color: var(--muted); opacity: .4; font-size: .7rem; }

.post-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2.5rem, 5.5vw, 5.5rem);
  font-weight: 900; letter-spacing: -.04em;
  line-height: .97; color: var(--cream);
  max-width: 900px; margin-bottom: 2.5rem;
}
.post-byline {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.post-author-mini {
  display: flex; align-items: center; gap: 1rem;
}
.pam-avatar {
  width: 40px; height: 40px;
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--bg3);
}
.pam-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 12%;
  filter: grayscale(100%) contrast(1.1);
}
.post-author-mini strong { display: block; font-size: .9rem; color: var(--cream); font-weight: 600; }
.post-author-mini span { font-size: .78rem; color: var(--muted); }
.post-meta-right { display: flex; align-items: center; gap: .65rem; font-size: .8rem; color: var(--muted); }
.pmr-sep { opacity: .4; }

/* Fallback pattern quando non c'è immagine in evidenza */
.post-hero--bg:not([style*="background-image"]) {
  background:
    radial-gradient(ellipse at 15% 60%, rgba(192,54,26,.25) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(192,54,26,.12) 0%, transparent 45%),
    var(--bg3);
}

/* Post layout */
.post-layout { position: relative; z-index: 1; padding: 5rem 0 4rem; }
.post-columns {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 5rem;
  align-items: start;
}

/* Sticky TOC */
.post-toc {
  position: sticky;
  top: 6rem;
  padding-top: .25rem;
}
.toc-label {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.25rem;
}
.toc-link {
  display: block;
  font-size: .82rem; color: var(--muted);
  padding: .4rem 0 .4rem .75rem;
  border-left: 1px solid var(--line);
  transition: color .2s, border-color .2s;
  line-height: 1.4;
}
.toc-link:hover, .toc-link.active {
  color: var(--cream);
  border-left-color: var(--red);
}

/* Article typography */
.post-content { max-width: 720px; }

.post-lead {
  font-size: 1.2rem; line-height: 1.8;
  color: var(--cream); font-weight: 400;
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}
.post-content h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 900; letter-spacing: -.025em;
  color: var(--cream); line-height: 1.2;
  margin: 3rem 0 1.25rem;
  padding-top: 1rem;
}
.post-content h2:first-of-type { margin-top: 0; }
.post-content h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem; font-weight: 800;
  letter-spacing: -.015em; color: var(--cream);
  line-height: 1.3; margin: 2.25rem 0 .85rem;
}
.post-content p {
  font-size: 1rem; line-height: 1.9;
  color: var(--text); margin-bottom: 1.35rem;
}
.post-content p:last-child { margin-bottom: 0; }
.post-content strong { color: var(--cream); font-weight: 600; }
.post-content ul, .post-content ol {
  margin: 1.25rem 0 1.5rem 0;
  padding-left: 0;
  display: flex; flex-direction: column; gap: .65rem;
}
.post-content li {
  font-size: 1rem; line-height: 1.8;
  color: var(--text); padding-left: 1.25rem;
  position: relative;
}
.post-content ul li::before {
  content: '—'; position: absolute; left: 0;
  color: var(--red); font-size: .85rem;
}
.post-content ol { counter-reset: ol; }
.post-content ol li { counter-increment: ol; }
.post-content ol li::before {
  content: counter(ol) '.';
  position: absolute; left: 0;
  color: var(--red); font-size: .85rem; font-weight: 700;
}
.post-content blockquote {
  margin: 2.5rem 0;
  padding: 1.5rem 2rem;
  border-left: 3px solid var(--red);
  background: rgba(192,54,26,.06);
}
.post-content blockquote p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem; font-weight: 800;
  font-style: italic; letter-spacing: -.015em;
  color: var(--cream); line-height: 1.5;
  margin: 0;
}
.post-content code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .88rem;
  background: var(--bg3); color: var(--red);
  padding: .15rem .45rem; border-radius: 2px;
  border: 1px solid var(--line);
}
.post-content pre {
  background: var(--bg3); border: 1px solid var(--line);
  border-radius: 3px; padding: 1.5rem;
  overflow-x: auto; margin: 1.5rem 0;
}
.post-content pre code {
  background: none; border: none;
  padding: 0; color: var(--cream);
  font-size: .88rem;
}

/* Callout box */
.post-callout {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: 0 3px 3px 0;
  padding: 1.5rem 2rem;
  margin: 2.5rem 0;
}
.post-callout--cta { text-align: center; border-left: 1px solid var(--line); }
.callout-label {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); margin-bottom: .75rem;
}
.post-callout p { color: var(--text); font-size: .9375rem; line-height: 1.75; margin: 0; }
.post-callout p + p { margin-top: .75rem; }

/* Author box */
.post-author-box {
  position: relative; z-index: 1;
  background: var(--bg2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 4rem 0;
}
.pab-inner {
  display: grid; grid-template-columns: 140px 1fr;
  gap: 3rem; align-items: start;
}
.pab-photo {
  border-radius: 3px; overflow: hidden;
  aspect-ratio: 3/4; background: var(--bg3);
}
.pab-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 12%;
  filter: grayscale(100%) contrast(1.15) brightness(0.85);
}
.pab-label { font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.pab-name { font-family: 'Montserrat', sans-serif; font-size: 1.5rem; font-weight: 900; letter-spacing: -.025em; color: var(--cream); margin-bottom: .3rem; }
.pab-role { font-size: .8rem; color: var(--red); font-weight: 600; letter-spacing: .03em; margin-bottom: 1rem; }
.pab-bio { font-size: .9rem; color: var(--text); line-height: 1.75; margin-bottom: 1.25rem; }
.pab-links { display: flex; gap: 1.5rem; }
.pab-links a { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); transition: letter-spacing .2s; }
.pab-links a:hover { letter-spacing: .12em; }

/* Related posts */
.post-related { position: relative; z-index: 1; }
.post-related .blog-grid { grid-template-columns: repeat(3,1fr); }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1200px) {
  :root { --wrap-side: 2rem; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .blog-card--featured { grid-column: span 2; }
  .blog-card--featured .bc-img { aspect-ratio: 21/9; }
}
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .hero-stats { display: grid; grid-template-columns: repeat(3,1fr); }
  .hs { padding: 1.5rem; }
}
@media (max-width: 1100px) {
  .bl-featured { grid-template-columns: 1fr; }
  .blf-img { aspect-ratio: 16/8; }
  .post-columns { grid-template-columns: 1fr; }
  .post-toc { display: none; }
  .post-related .blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .nav-links, .nav-btn { display: none; }
  .hbg { display: flex; }
  #nav { padding: 1.25rem 2rem; }
  #nav.on { padding: 1rem 2rem; }
  .wrap { padding: 0 2rem; }
  :root { --wrap-side: 2rem; }
  #hero { padding: 0 2rem; }
  .about-body { grid-template-columns: 1fr; gap: 3rem; }
  .photo-wrap { aspect-ratio: 4/3; }
  .tl-item { grid-template-columns: 110px 1px 1fr; gap: 0 1.75rem; padding: 2rem 0; }
  .tl-y { font-size: .8rem; }
  .num-grid { grid-template-columns: 1fr 1fr; }
  .num-item { border-right: none; border-bottom: 1px solid var(--line); }
  .num-item:last-child { border-bottom: none; }
  .stack-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-wrap { grid-template-columns: 1fr; gap: 3.5rem; }
  .frow { grid-template-columns: 1fr; }
  .foot-wrap { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .foot-nav { margin-left: 0; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card--featured { grid-column: span 1; }
  .sec-header--flex { flex-direction: column; align-items: flex-start; }
  .blog-all { display: none; }
}
@media (max-width: 640px) {
  :root { --wrap-side: 1.5rem; }
  .wrap { padding: 0 1.5rem; }
  #hero { padding: 0 1.5rem; }
  .sec { padding: 5rem 0; }
  .scroll-hint { display: none; }
  #cur, #cur2 { display: none; }
  body { cursor: auto; }
  a, button { cursor: pointer; }
  /* Anche qui la misura e' quella della colonna, non della finestra:
     con 13vw il titolo usciva a 48px dentro 327px e ogni riga si spezzava
     a meta' frase ("Fractional / CTO"). */
  .h1 { font-size: clamp(1.9rem, 10.5cqw, 2.75rem); margin-bottom: 1.75rem; }
  .hero-stats { grid-template-columns: 1fr; }
  .num-grid { grid-template-columns: 1fr 1fr; }
  .tl-item { grid-template-columns: 80px 1px 1fr; gap: 0 1.25rem; }
  .tl-y { font-size: .72rem; }
  .tl-role { font-size: 1.1rem; }
  /* Blog page mobile */
  .bl-grid { grid-template-columns: 1fr; }
  .blf-body { padding: 2rem; }
  .pagination { flex-direction: column; gap: 1rem; }
  /* Post mobile */
  .pab-inner { grid-template-columns: 1fr; gap: 2rem; }
  .pab-photo { aspect-ratio: 16/9; max-height: 260px; }
  .post-hero--bg { min-height: 55vh; }
  .post-related .blog-grid { grid-template-columns: 1fr; }
  .quote-sec { padding: 6rem 0; }
  .mob { padding: 0 2rem; }
  .srv-card { flex: 0 0 85vw; }
}

/* ══════════════════════════════════════════════════════════
   WORDPRESS SPECIFIC ADDITIONS
══════════════════════════════════════════════════════════ */

/* Admin bar offset */
body.admin-bar #nav { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar #nav { top: 46px; }
}


/* WP paginate_links compatibility */
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px;
  font-size: .78rem; font-weight: 700;
  color: var(--muted); background: none;
  border: 1px solid var(--line); border-radius: 2px;
  padding: 0 .5rem;
  transition: all .2s;
  text-decoration: none;
}
.pagination .page-numbers:hover { color: var(--cream); border-color: rgba(237,229,222,.2); }
.pagination .page-numbers.current { color: var(--red); border-color: rgba(192,54,26,.45); background: rgba(192,54,26,.08); }
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 0 1.25rem;
}

/* TOC h3 indent */
.toc-link.toc-h3 { padding-left: 1.5rem; font-size: .78rem; }

/* No posts message */
.no-posts { font-size: 1rem; color: var(--muted); text-align: center; padding: 4rem 0; }

/* WP page links */
.page-links { display: flex; align-items: center; gap: .5rem; margin: 2rem 0; font-size: .82rem; color: var(--muted); }
.page-links a { color: var(--red); }

/* WP image captions */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .8rem; color: var(--muted); text-align: center; margin-top: .5rem; }

/* WP alignments */
.alignleft   { float: left; margin: 0 1.5rem 1rem 0; }
.alignright  { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 1.5rem auto; }
.alignwide   { max-width: calc(100% + 6rem); margin-left: -3rem; }
.alignfull   { max-width: 100vw; margin-left: calc(50% - 50vw); }

/* Elementor fullwidth support */
.e-con-full { max-width: 100% !important; }
.elementor-section.elementor-section-full_width { max-width: 100% !important; }

/* Elementor typography resets — preserve DLG styles */
.elementor-widget-heading .elementor-heading-title { line-height: inherit; }

/* ─── Bersagli per il dito ───────────────────────────────── */
/* Solo dove si tocca: col mouse un bersaglio da 13px si centra senza
   pensarci, col polpastrello no. 44px e' la misura minima raccomandata.
   Il pulsante del menu ne misurava 26 per 13: era il comando principale
   di navigazione del telefono, ed era il piu' piccolo della pagina. */
@media (pointer: coarse) {
  .hbg {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  .mob-a,
  .mob-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Lo spazio in piu' sta sopra il testo, fra l'elenco e il rimando:
     si legge come respiro, non come un buco. */
  .card-link {
    min-height: 44px;
    display: inline-flex;
    align-items: flex-end;
  }
}