/* ---------- pagina progetto ---------- */

.hooks { padding: 12vh 0 6vh; }
.hooks h1 { margin-top: 6px; font: 800 clamp(44px, 7vw, 108px)/.95 var(--f-title); letter-spacing: -.05em; max-width: 16ch; }
.hooks h1 em { font-family: var(--f-serif); font-weight: 400; color: var(--acc); letter-spacing: -.01em; }

.facts { margin-top: 7vh; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.facts > div { padding: 18px 20px 18px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 500 11px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin-top: 8px; font-weight: 500; }

.results { margin-top: 6vh; display: flex; flex-wrap: wrap; gap: 6vw; }
.results b { display: block; font: 800 clamp(48px, 6vw, 88px)/1 var(--f-title); letter-spacing: -.05em; }
.results span { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; }

.lead-media { margin-top: 8vh; display: flex; justify-content: center; gap: 24px; padding: 6vh 0; background: #e9e6df; border-radius: 6px; }
.lead-media img, .lead-media video { max-height: 70vh; width: auto; border-radius: 10px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); }
.lead-media.wide { padding: 0; background: none; }
.lead-media.wide img { max-height: none; width: 100%; border-radius: 6px; }

.story { padding: 6vh 0 4vh; }
.chapter { display: grid; grid-template-columns: 1fr 2fr; gap: 6vw; padding: 9vh 0; border-top: 1px solid var(--line); }
.chapter h2 { font: 800 clamp(30px, 3.4vw, 48px)/1 var(--f-title); letter-spacing: -.04em; }
.chapter h2 em { font-family: var(--f-serif); font-weight: 400; color: var(--acc); }
.chapter .num { display: block; margin-bottom: 14px; }
.chapter .body > p { font-size: 18px; line-height: 1.6; max-width: 58ch; }
.chapter .body > p + p { margin-top: 16px; }
.chapter .body a { color: var(--acc-text); text-underline-offset: 3px; }
.ig { color: var(--acc-text); display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 500; }

.sub { margin-top: 7vh; }
.sub h3 { font: 700 22px/1.2 var(--f-title); letter-spacing: -.02em; }
.sub h3 + p { margin-top: 8px; color: var(--muted); max-width: 56ch; }

/* caroselli */
.carousel { position: relative; margin-top: 22px; }
.carousel .track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.carousel .track::-webkit-scrollbar { display: none; }
.carousel .track > * { flex: 0 0 auto; height: min(62vh, 520px); width: auto; scroll-snap-align: start; border-radius: 8px; background: #e9e6df; }
.carousel .track > video { aspect-ratio: 4 / 5; object-fit: cover; }
.carousel .ctrl { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.carousel .ctrl button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .2s, color .2s; }
.carousel .ctrl button:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.reels { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 22px; }
.reel { width: min(300px, 100%); }
.reel video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; background: #e9e6df; }
.reel p { margin-top: 10px; font-size: 14px; }
.reel p span { display: block; color: var(--muted); font-size: 13px; }

.quote { margin: 7vh 0 0; padding-left: 22px; border-left: 2px solid var(--acc); }
.quote p { font: 400 clamp(26px, 3vw, 40px)/1.15 var(--f-serif); font-style: italic; }
.quote footer { margin-top: 10px; font-size: 14px; color: var(--muted); }

.phones { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: 22px; padding: 30px 4px; }
.phones::-webkit-scrollbar { display: none; }
.phones figure { flex: 0 0 auto; scroll-snap-align: start; width: 230px; }
.phones img { width: 100%; border-radius: 22px; box-shadow: 0 24px 40px -24px rgba(0,0,0,.4); }
.phones figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }

/* "Progetto successivo": la stessa card dei lavori in home, con anteprima e maniglie di selezione */
.next { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  min-height: 52vh; margin: 4vh 0 8vh; padding: 8vh 24px; border: 1px solid var(--line); text-decoration: none; overflow: hidden; }
.next .t { display: block; margin-top: 12px; font: 800 clamp(44px, 8vw, 120px)/.95 var(--f-title); letter-spacing: -.05em; transition: transform .6s var(--ease), color .3s; }
.next .t em { font-family: var(--f-serif); font-weight: 400; color: var(--acc); }
.next .caps { position: relative; transition: color .3s; }
.next-prev { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0; transform: scale(1.04); transition: opacity .5s var(--ease), transform .8s var(--ease); }
.next::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16,20,18,.55), rgba(16,20,18,.15) 40%, rgba(16,20,18,.55)); opacity: 0; transition: opacity .5s; }
.next .sel { position: absolute; inset: 10px; border: 1.5px solid var(--acc); opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 3; }
.next .sel i { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid var(--acc); }
.next .sel i:nth-child(1) { left: -5px; top: -5px; } .next .sel i:nth-child(2) { right: -5px; top: -5px; }
.next .sel i:nth-child(3) { left: -5px; bottom: -5px; } .next .sel i:nth-child(4) { right: -5px; bottom: -5px; }
.next:focus-visible { outline: none; } .next:focus-visible .sel { opacity: 1; }
@media (hover: hover) {
  .next:hover .next-prev { opacity: 1; transform: none; }
  .next:hover::after, .next:hover .sel { opacity: 1; }
  .next:hover .t { color: #fff; transform: scale(1.03); text-shadow: 0 2px 28px rgba(16,20,18,.5); }
  .next:hover .t em { color: var(--stk-sage); }
  .next:hover .t .wb-logo { background: var(--stk-sage); }
  .next:hover .caps { color: rgba(255,255,255,.85); }
}

/* prima / dopo: due telefoni affiancati con l'etichetta sopra */
.bf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 26px; padding: 34px 28px; background: #e9e6df; border-radius: 8px; }
.bf figure { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bf figcaption { font: 500 11px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bf .dopo figcaption { color: var(--acc-text); }
.bf img { width: 100%; max-width: 260px; border-radius: 22px; box-shadow: 0 24px 40px -24px rgba(0,0,0,.4); }
.bf .prima img { filter: saturate(.85); }
.bf + p.why { margin-top: 18px; }
.why { color: var(--muted); font-size: 15.5px; max-width: 58ch; }
.why b { color: var(--ink); font-weight: 600; }

/* i tre principi di un concept, con una schermata ciascuno */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 30px; }
.pillar { display: flex; flex-direction: column; gap: 12px; }
.pillar img { width: 100%; border-radius: 18px; box-shadow: 0 24px 40px -24px rgba(0,0,0,.4); }
.pillar h3 { margin-top: 8px; font: 700 20px/1.2 var(--f-title); letter-spacing: -.02em; }
.pillar p { color: var(--muted); font-size: 15px; }

/* Giovanna: la tavola del brand */
.brand-board { margin-top: 8vh; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 14px; font-family: var(--f-body); }
.bb { border-radius: 8px; padding: 28px; position: relative; }
.bb .caps { position: absolute; top: 18px; left: 22px; }
.bb-logo { grid-row: span 2; background: #f4f2ee; border: 1px solid #e4e0d8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; min-height: 480px; color: #111; }
.bb-logo img { width: min(220px, 50%); }
.bb-logo .bb-name { font: 800 clamp(34px, 4vw, 58px)/1 'Playfair Display', Georgia, serif; letter-spacing: -.01em; }
.bb-logo .bb-name em { font-weight: 400; font-style: italic; }
.bb-logo .bb-coord { font-size: 12px; letter-spacing: .12em; color: #8a8377; }
.bb-dark { background: #111; display: grid; place-items: center; min-height: 230px; }
.bb-dark .caps { color: #8a8377; }
.bb-dark img { width: 120px; filter: invert(95%) sepia(6%) saturate(240%) hue-rotate(5deg); }
.bb-colors { background: #fff; border: 1px solid #e4e0d8; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 52px; }
.bb-colors span { display: flex; flex-direction: column; justify-content: flex-end; min-height: 120px; padding: 10px; border-radius: 6px; font-size: 12px; line-height: 1.4; }
.bb-colors b { font-weight: 600; font-size: 13px; }
.bb-type { grid-column: 1 / -1; background: #f4f2ee; border: 1px solid #e4e0d8; display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 24px; padding-top: 56px; color: #111; }
.bb-type div { display: flex; flex-direction: column; gap: 6px; }
.bb-type .aa { font: 800 76px/1 'Playfair Display', Georgia, serif; }
.bb-type .aa.it { font-weight: 400; font-style: italic; }
.bb-type .aa.sans { font: 400 76px/1 'Inter', system-ui, sans-serif; letter-spacing: -.03em; }
.bb-type small { font-size: 12.5px; color: #8a8377; }

@media (max-width: 760px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .chapter { grid-template-columns: 1fr; gap: 20px; padding: 7vh 0; }
  .chapter .body > p { font-size: 16.5px; }
  .lead-media { padding: 4vh 16px; }
  .lead-media img, .lead-media video { max-height: 60vh; min-width: 0; }
  .lead-media:not(.wide) > * + * { display: none; }
  .carousel .track > * { height: 380px; }
  .reel { width: calc(50% - 12px); }
  .phones figure { width: 190px; }
  .next { min-height: 40vh; }
  .bf { padding: 22px 14px; gap: 10px; }
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pillar img { max-width: 300px; }
  .brand-board { grid-template-columns: minmax(0, 1fr); }
  .bb-logo { grid-row: auto; min-height: 340px; }
  .bb-type { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bb-colors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bb-type .aa, .bb-type .aa.sans { font-size: 56px; }
}