/* Composizioni di pagina: Home, Torrefazione, Servizi, Caffè, Territorio, Galleria, Diario, FAQ, Contatti, Grazie e 404. */

/* ---------- Home: hero a cinque scene ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
}
.hero-scenes, .hero-slide { position: absolute; inset: 0; }
.hero-scenes { z-index: -2; }
.hero-slide { opacity: 0; transition: opacity 1.1s var(--ease); }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 70% 50%); }
/* Scene con soggetti chiari vicino al titolo: velatura locale dietro la fine della prima riga. */
.hero-slide--scrim::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #211b1700 36%, #211b1780 54%, #211b1700 74%); }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, #211b17f0 0%, #211b17c4 30%, #211b1740 62%, #211b1700 82%),
    linear-gradient(0deg, #211b17cc 0%, #211b1700 26%);
}

.hero-inner {
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header) + 48px);
  padding-bottom: 48px;
}
.hero-copy { max-width: 760px; }
.hero-copy .eyebrow { margin-bottom: 26px; font-size: 17px; font-weight: 500; color: var(--cream); }
.hero-copy .eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px; height: 1px;
  margin-right: 14px;
  vertical-align: middle;
  background: var(--honey);
}
.hero h1 {
  font-size: clamp(54px, 6.8vw, 116px);
  font-stretch: 82%;
  font-weight: 620;
  line-height: .98;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.hero h1 span { display: block; }
.hero h1 span + span { margin-top: .06em; }
.hero-copy p:not(.eyebrow) { max-width: 46ch; margin-top: 30px; font-size: 21px; line-height: 1.55; color: #e3d7ca; }
.hero .actions { margin-top: 36px; }

.hero-bottom { position: relative; padding-bottom: 30px; }
.hero-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 20px;
  border-top: 1px solid #f5efe533;
}
.slide-description { display: flex; align-items: baseline; gap: 16px; font-size: 16px; }
.slide-description [data-slide-count] { font-variant-numeric: tabular-nums; color: #c9b8a8; font-size: 14px; }
.slide-description [data-slide-name] { font-weight: 600; }
.slider-controls { display: flex; align-items: center; gap: 18px; }
.slider-dots { display: flex; gap: 4px; }
.slider-dots button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 40px; height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f5efe58c;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.slider-dots button::after { content: ''; display: block; width: 32px; height: 2px; background: currentColor; opacity: .5; }
.slider-dots button:hover { color: var(--cream); }
.slider-dots button.is-active { color: var(--cream); }
.slider-dots button.is-active::after { opacity: 1; background: var(--honey); }
.slider-buttons { display: flex; gap: 8px; }
.slider-toggle {
  min-width: 96px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid #f5efe580;
  border-radius: 999px;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
}
.slider-toggle:hover:not(:disabled) { background: var(--cream); color: var(--ink); }
.slider-toggle:disabled { opacity: .75; border-style: dashed; }

/* ---------- Impegni ---------- */
.trust-strip { border-bottom: 1px solid var(--line); }
.trust-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: 28px; margin: 0; list-style: none; }
.trust-inner li { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 500; line-height: 1.35; }
.trust-inner .icon { width: 26px; height: 26px; color: var(--rust); }

/* ---------- Presentazione torrefazione ---------- */
.intro { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(36px, 7vw, 120px); align-items: center; }
.intro-photo { position: relative; aspect-ratio: 5 / 4; }
.intro-photo img { height: 100%; }
.intro-content h2 { max-width: 12ch; }
.intro-content .lead { margin-top: 26px; }
.intro-content p:not(.lead):not(.eyebrow) { margin-top: 18px; color: var(--muted); }
.intro-content .inline-link { margin-top: 22px; }
.intro-footnote { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }

/* ---------- Servizi e caffè ---------- */
.services-section { background: var(--paper); }
.services-section .card-image { background: var(--cream); }
.coffee-note { margin-top: 44px; font-size: 15px; color: var(--muted); max-width: 80ch; }

/* ---------- Perché FONDO ---------- */
.why-layout { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(48px, 8vw, 128px); align-items: start; }
.why-title { position: sticky; top: calc(var(--header) + 48px); }
.why-title h2 { max-width: 10ch; }
.why-title p { margin-top: 26px; color: var(--on-dark); max-width: 38ch; }
.why-list { margin: 0; padding: 0; list-style: none; }
.why-item { display: grid; grid-template-columns: 40px 1fr; gap: 20px; padding-block: 28px; border-top: 1px solid var(--on-dark-line); }
.why-item:last-child { border-bottom: 1px solid var(--on-dark-line); }
.why-item .icon { width: 30px; height: 30px; margin-top: 2px; color: var(--honey); }
.why-item h3 { margin-bottom: 8px; font-size: 25px; }
.why-item p { font-size: 17px; color: var(--on-dark); }

/* ---------- Processo ---------- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin: 0; padding: 0; list-style: none; }
.process-grid--three { grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 56px); }
.process-step { padding-top: 22px; border-top: 2px solid var(--ink); }
.step-number {
  display: block;
  margin-bottom: 30px;
  font-family: var(--heading);
  font-size: 56px;
  font-stretch: 80%;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--rust);
}
.process-step h3 { margin-bottom: 12px; font-size: 25px; }
.process-step p { font-size: 17px; color: var(--muted); }
.dark-section .process-step { border-color: var(--honey); }
.dark-section .step-number { color: var(--honey); }
.dark-section .process-step p { color: var(--on-dark); }

/* ---------- Territorio ---------- */
.territory-section { border-top: 1px solid var(--line); }
.territory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.territory-card .image-frame { aspect-ratio: 8 / 5; margin-bottom: 22px; }
.territory-card h3 { margin-bottom: 10px; }
.territory-card p { font-size: 17px; color: var(--muted); }
.territory-scope { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--rust); }
.territory-note { margin-top: 32px; font-size: 15px; color: var(--muted); }

/* ---------- Galleria ---------- */
.gallery-section { background: var(--paper); }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gallery-item {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  background: var(--cream);
}
.gallery-item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gallery-item:nth-child(8) { grid-column: span 2; aspect-ratio: auto; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform .6s var(--ease); }
.gallery-item:hover img { transform: scale(1.03); }
.gallery-open {
  position: absolute;
  right: 12px; bottom: 12px;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  opacity: 0;
  transition: opacity var(--fast);
}
.gallery-open .icon { width: 18px; height: 18px; }
.gallery-item:hover .gallery-open, .gallery-item:focus-visible .gallery-open { opacity: 1; }

/* ---------- Recensioni (predisposte, nascoste) ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* ---------- Diario ---------- */
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.journal-grid--two { grid-template-columns: repeat(2, 1fr); gap: 52px 28px; }
.journal-card .card-image { aspect-ratio: 8 / 5; margin-bottom: 22px; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 10px; font-size: 15px; color: var(--muted); }
.article-meta span + span::before { content: '/'; margin-right: 12px; color: var(--line); }
.article-category { font-weight: 600; color: var(--rust); }
.journal-card h3 { font-size: clamp(23px, 2vw, 28px); }
.journal-card .card-heading { margin-bottom: 12px; }
.journal-card p:not(.article-meta) { font-size: 17px; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq-section { border-top: 1px solid var(--line); }
.faq-layout { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(48px, 8vw, 128px); align-items: start; }
.faq-intro h2 { max-width: 9ch; }
.faq-intro p { margin-top: 22px; color: var(--muted); }
.faq-intro .inline-link { margin-top: 16px; }

/* ---------- Contatti ---------- */
.contact-section { background: var(--rust); color: var(--cream); }
.contact-layout { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(48px, 8vw, 120px); align-items: start; }
.contact-copy h2 { font-size: clamp(40px, 5vw, 76px); font-stretch: 86%; max-width: 11ch; }
.contact-copy .lead { margin-top: 26px; }
.contact-small { margin-top: 40px; padding-top: 22px; border-top: 1px solid #f5efe54d; font-size: 15px; max-width: 42ch; color: #f4dfd4; }
.contact-form { padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-lg); background: #8f331d; }
.contact-section .field input,
.contact-section .field select,
.contact-section .field textarea { border-color: transparent; }
.contact-section .field-error { color: #ffe3a6; }
.contact-section .field [aria-invalid="true"] { border-color: var(--honey); box-shadow: 0 0 0 2px var(--honey); }
.contact-section .form-note { color: #f4dfd4; }
.contact-section .form-status { background: var(--ink); color: var(--cream); }

/* ---------- Torrefazione ---------- */
.about-hero { padding-top: calc(var(--header) + 40px); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 44px; font-size: 15px; color: var(--muted); }
.breadcrumb a { text-decoration: underline; text-underline-offset: 4px; }
.breadcrumb a:hover { color: var(--ink); }
.about-hero-head { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.display-title { font-size: clamp(44px, 6.6vw, 104px); font-stretch: 82%; line-height: .98; letter-spacing: -.035em; max-width: 12ch; }
.about-hero-head .lead { max-width: 44ch; }
.about-hero figure { margin-top: clamp(36px, 5vw, 64px); }
.about-hero .image-frame { aspect-ratio: 16 / 7; }
.about-hero .image-frame img { object-position: 72% 55%; }

.section-intro { max-width: 22ch; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.value-item { padding-top: 24px; border-top: 2px solid var(--ink); }
.value-item h3 { margin-bottom: 14px; }
.value-item p { font-size: 17px; color: var(--muted); }

.roles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.role-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; margin-bottom: 22px; border-radius: var(--radius); background: var(--paper); }
.role-card h3 { margin-bottom: 12px; font-size: 26px; }
.role-card p { font-size: 17px; color: var(--muted); }

.lab-wide { margin-top: clamp(40px, 5vw, 72px); }
.lab-wide .image-frame { aspect-ratio: 16 / 7; }
.lab-photo { aspect-ratio: 4 / 3; }

.callout { padding-block: var(--section); background: var(--rust); color: var(--cream); }
.callout-inner { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.callout h2 { max-width: 15ch; }
.callout .lead { color: #f6e3d8; }
.callout .actions { margin-top: 28px; }

/* ---------- Servizi: panoramica ---------- */
.section-head-aside { max-width: 40ch; }
.section-head-aside p { color: var(--muted); }
.section-head-aside .inline-link { margin-top: 8px; }
.needs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 48px); }
.need-item { padding-top: 24px; border-top: 2px solid var(--ink); }
.need-item h3 { margin-bottom: 12px; }
.need-item p { font-size: 17px; color: var(--muted); }
.need-links { display: grid; gap: 2px; margin: 16px 0 0; padding: 0; list-style: none; }
.need-links .inline-link { font-size: 16px; }

.table-wrap { overflow-x: auto; border-top: 2px solid var(--ink); }
.compare-table { width: 100%; border-collapse: collapse; font-size: 17px; }
.compare-table th, .compare-table td { padding: 18px 20px 18px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare-table thead th { font-size: 15px; font-weight: 600; color: var(--muted); }
.compare-table tbody th { font-family: var(--heading); font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.compare-table tbody th a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.compare-table tbody th a:hover { color: var(--rust); }
.compare-table td { color: var(--muted); }

/* ---------- Servizi: dettaglio ---------- */
.service-hero { padding-top: calc(var(--header) + 40px); }
.service-hero-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.service-hero .display-title { font-size: clamp(42px, 5.2vw, 84px); max-width: 13ch; }
.service-hero .lead { margin-top: 26px; max-width: 44ch; }
.service-hero .actions { margin-top: 32px; }
.service-hero-image { aspect-ratio: 8 / 5; }

.prepare-box { margin-top: 32px; padding: 24px 28px 26px; border-radius: var(--radius-lg); background: var(--paper); }
.prepare-box h3 { margin-bottom: 12px; font-size: 20px; }
.prepare-box ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.prepare-box li { position: relative; padding-left: 22px; font-size: 17px; color: #4b3f36; }
.prepare-box li::before { content: ''; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--rust); }

.stack-layout { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 7vw, 112px); align-items: start; }
.stack-title { position: sticky; top: calc(var(--header) + 40px); }
.stack-title h2 { max-width: 11ch; }
.stack-title p { margin-top: 22px; font-size: 15px; color: var(--muted); max-width: 36ch; }
.inclusion-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #b8a693; }
.inclusion-item { display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding-block: 22px; border-bottom: 1px solid #b8a693; }
.inclusion-item .icon { width: 26px; height: 26px; margin-top: 2px; color: var(--rust); stroke-width: 2; }
.inclusion-item h3 { margin-bottom: 6px; font-size: 22px; }
.inclusion-item p { font-size: 17px; color: #574a40; }

.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.benefit-item { padding-top: 22px; border-top: 2px solid var(--honey); }
.benefit-item h3 { margin-bottom: 12px; }
.benefit-item p { font-size: 17px; color: var(--on-dark); }

.service-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.service-gallery-item:first-child { grid-row: span 2; }
.service-gallery-item .image-frame { position: relative; height: calc(100% - 34px); min-height: 220px; }
.service-gallery-item:first-child .image-frame { min-height: 420px; }
.service-gallery-item img { transition: transform .6s var(--ease); }
.service-gallery-item a:hover img { transform: scale(1.03); }
.service-gallery-item a:hover .gallery-open, .service-gallery-item a:focus-visible .gallery-open { opacity: 1; }
.service-gallery-item .caption { margin-top: 10px; }

/* ---------- Caffè: catalogo ---------- */
.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(28px, 4vw, 56px); margin: 0; }
.profile-item { padding-block: 20px; border-top: 1px solid var(--line); }
.profile-item dt { margin-bottom: 6px; font-family: var(--heading); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.profile-item dd { margin: 0; font-size: 17px; color: var(--muted); }

.catalog-controls { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 20px 32px; margin-bottom: 40px; padding: 20px 24px; border-radius: var(--radius-lg); background: var(--cream); }
.chip-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.chip-group legend { margin-bottom: 8px; padding: 0; font-size: 16px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1px solid #817165; border-radius: 999px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background var(--fast), color var(--fast), border-color var(--fast); }
.chip:hover { border-color: var(--ink); }
.chip-input:checked + .chip { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.chip-input:focus-visible + .chip { outline: 3px solid var(--rust); outline-offset: 3px; }
.catalog-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.catalog-status { display: flex; flex-direction: column; align-items: end; gap: 2px; font-size: 16px; }
.catalog-status p { font-weight: 600; white-space: nowrap; }
.catalog-status .text-button { min-height: 32px; font-size: 15px; }
.catalog-grid { margin: 0; padding: 0; list-style: none; }
.catalog-empty { padding: 48px 24px; border: 1px dashed #b8a693; border-radius: var(--radius-lg); text-align: center; }
.catalog-empty p { margin: 0 auto 20px; color: var(--muted); }

.guide-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.guide-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.guide-question { font-family: var(--heading); font-size: clamp(20px, 1.8vw, 26px); font-weight: 550; letter-spacing: -.015em; line-height: 1.3; }
.guide-list .inline-link { flex: none; }
.guide-note { margin-top: 24px; color: var(--muted); }

/* ---------- Caffè: scheda ---------- */
.coffee-hero { padding-top: calc(var(--header) + 40px); }
.coffee-hero-grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.coffee-gallery { display: grid; gap: 12px; }
.coffee-main { position: relative; aspect-ratio: 4 / 5; }
.coffee-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.coffee-thumbs .image-frame { position: relative; aspect-ratio: 1; }
.coffee-gallery a:hover .gallery-open, .coffee-gallery a:focus-visible .gallery-open { opacity: 1; }
.coffee-identity { position: sticky; top: calc(var(--header) + 32px); padding-top: 8px; }
.coffee-identity .display-title { font-size: clamp(52px, 6vw, 96px); }
.coffee-identity .lead { margin-top: 22px; }
.coffee-facts { margin: 28px 0 0; border-top: 1px solid var(--line); }
.coffee-facts div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.coffee-facts dt { font-weight: 600; }
.coffee-facts dd { margin: 0; color: var(--muted); }
.price-box { margin-top: 28px; padding: 22px 24px; border-radius: var(--radius-lg); background: var(--paper); }
.price-box p { margin: 0; font-size: 16px; color: var(--muted); }
.price-box p strong { font-family: var(--heading); font-size: 22px; font-weight: 600; color: var(--ink); }
.price-box .button { margin-top: 16px; }

.spec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 4vw, 64px); margin: 0; }
.spec-list div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding-block: 14px; border-top: 1px solid #b8a693; }
.spec-list dt { font-weight: 600; }
.spec-list dd { margin: 0; color: #574a40; }
.benefits-grid--two { grid-template-columns: repeat(2, 1fr); }

/* ---------- Territorio ---------- */
.territory-hero { padding-top: calc(var(--header) + 40px); }
.territory-hero-grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.territory-hero .lead { margin-top: 26px; }
.territory-schema { margin: 0; }
.schema { width: 100%; max-width: 500px; height: auto; margin-inline: auto; overflow: visible; }
.schema-ring--outer { fill: none; stroke: #a8977f; stroke-width: 1.5; stroke-dasharray: 6 8; }
.schema-ring--middle { fill: var(--paper); }
.schema-ring--inner { fill: var(--rust); }
.schema-label { font-family: var(--heading); font-size: 32px; font-weight: 650; font-stretch: 85%; letter-spacing: -.02em; fill: var(--ink); text-anchor: middle; }
.schema-sub { font-family: var(--body); font-size: 22px; fill: var(--muted); text-anchor: middle; }
.schema-label--light { fill: var(--cream); }
.schema-sub--light { fill: #f4dfd4; }
.territory-schema .caption { max-width: 44ch; margin-inline: auto; text-align: center; }
.needs-grid--four { grid-template-columns: repeat(4, 1fr); }
.territory-card .card-heading h3 { margin: 0; }

.area-services { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.area-services li { padding-block: 20px; border-bottom: 1px solid var(--line); }
.area-services .card-heading { margin-bottom: 6px; }
.area-services p { font-size: 17px; color: var(--muted); }
.area-places { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.area-places h2 { max-width: 10ch; margin-bottom: 22px; }
.area-places p { color: var(--muted); }
.area-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.area-photos .image-frame { position: relative; aspect-ratio: 4 / 3; }
.area-photos a:hover .gallery-open, .area-photos a:focus-visible .gallery-open { opacity: 1; }

/* ---------- Galleria ---------- */
.gallery-controls { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: 44px; padding: 20px 24px; border-radius: var(--radius-lg); background: var(--paper); }
.chip-count { margin-left: 8px; font-size: 14px; font-weight: 500; opacity: .72; font-variant-numeric: tabular-nums; }
.gallery-count { font-size: 16px; font-weight: 600; white-space: nowrap; }
.photo-wall { columns: 3; column-gap: 24px; margin: 0; padding: 0; list-style: none; }
.photo { break-inside: avoid; margin-bottom: 36px; }
.photo .image-frame { position: relative; }
.photo img { height: auto; transition: transform .6s var(--ease); }
.photo a:hover img { transform: scale(1.03); }
.photo a:hover .gallery-open, .photo a:focus-visible .gallery-open { opacity: 1; }
.photo .caption { margin-top: 10px; }
.photo-category { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 600; color: var(--rust); }

/* ---------- Diario: indice ---------- */
.journal-feature { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.journal-feature .image-frame { aspect-ratio: 8 / 5; }
.journal-feature .image-frame img { transition: transform .6s var(--ease); }
.journal-feature .image-frame:hover img { transform: scale(1.03); }
.journal-feature h2 { font-size: clamp(34px, 3.8vw, 56px); font-stretch: 88%; }
.journal-feature h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.journal-feature-copy > p:not(.article-meta) { margin-top: 22px; color: var(--muted); }
.journal-feature .button { margin-top: 30px; }
.journal-more { border-top: 1px solid var(--line); }

/* ---------- Diario: articolo ---------- */
.article { padding-bottom: var(--section); }
.article-head { padding-top: calc(var(--header) + 40px); }
.article-grid { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 41rem); column-gap: clamp(40px, 6vw, 112px); justify-content: center; }
.article-head .article-meta { align-self: start; padding-top: 18px; }
.article-title { font-size: clamp(40px, 4.8vw, 72px); font-stretch: 86%; line-height: 1.02; letter-spacing: -.035em; }
.article-head .lead { margin-top: 24px; }
.article-cover { margin-top: clamp(40px, 5vw, 64px); margin-bottom: clamp(48px, 6vw, 88px); }
.article-cover .image-frame { aspect-ratio: 2 / 1; }
.article-toc { position: sticky; top: calc(var(--header) + 32px); align-self: start; }
.article-toc h2 { margin-bottom: 12px; font-family: var(--body); font-size: 16px; font-weight: 600; letter-spacing: 0; }
.article-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; border-top: 1px solid var(--line); }
.article-toc li { counter-increment: toc; border-bottom: 1px solid var(--line); }
.article-toc a { display: grid; grid-template-columns: 26px 1fr; padding-block: 9px; font-size: 15px; line-height: 1.4; color: var(--muted); }
.article-toc a::before { content: counter(toc); font-variant-numeric: tabular-nums; color: #9a8878; }
.article-toc a:hover { color: var(--ink); }
.article-toc li:last-child a::before { content: ''; }
.article-body p { color: #3f342c; line-height: 1.7; }
.article-body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; font-weight: 600; }
.article-body a:hover { color: var(--rust); }
.article-chapter + .article-chapter { margin-top: 56px; }
.article-chapter h2 { margin-bottom: 20px; font-size: clamp(28px, 2.6vw, 38px); font-stretch: 90%; }
.article-figure { margin-block: 36px 8px; }
.article-figure .image-frame { aspect-ratio: 8 / 5; }
.article-recap { margin-top: 64px; padding: 28px 32px 30px; border-radius: var(--radius-lg); background: var(--paper); }
.article-recap h2 { margin-bottom: 16px; font-size: 26px; }
.article-recap ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.article-recap li { position: relative; padding-left: 24px; font-size: 17px; color: #4b3f36; }
.article-recap li::before { content: ''; position: absolute; left: 0; top: .66em; width: 12px; height: 2px; background: var(--rust); }
.article-service-section { border-top: 1px solid var(--line); }
.article-service { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.article-service .image-frame { aspect-ratio: 8 / 5; }
.article-service h2 { margin-bottom: 18px; }
.article-service p:not(.eyebrow) { color: var(--muted); }
.article-service .actions { margin-top: 28px; }

/* ---------- Domande frequenti ---------- */
.faq-hero { padding-bottom: clamp(56px, 7vw, 104px); }
.faq-hero .display-title { max-width: 17ch; }
.faq-nav { margin-top: clamp(40px, 5vw, 64px); }
.faq-nav ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.faq-nav a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  font-family: var(--heading);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
  transition: background var(--fast), border-color var(--fast);
}
.faq-nav a:hover { border-color: var(--ink); background: var(--paper); }
.faq-nav-count { font-family: var(--body); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.faq-group { padding-block: clamp(56px, 7vw, 104px); }

/* ---------- Contatti ---------- */
.choice-item .inline-link { margin-top: 10px; font-size: 16px; }
.contact-section .field-hint { color: #f4dfd4; }
.contact-section .form-next .inline-link { color: var(--cream); }
.contact-info { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 7vw, 112px); align-items: center; }
.info-list { margin: 28px 0 0; border-top: 2px solid var(--ink); }
.info-list div { display: grid; grid-template-columns: 230px 1fr; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.info-list dt { font-weight: 600; }
.info-list dd { margin: 0; color: var(--muted); }
.meet-link { margin-top: 32px; }

/* ---------- Grazie e 404 ---------- */
.status-hero { padding-top: calc(var(--header) + clamp(48px, 7vw, 112px)); padding-bottom: var(--section); }
.status-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.status-word {
  justify-self: start;
  padding-bottom: .1em;
  border-bottom: clamp(6px, .9vw, 14px) solid var(--honey);
  font-size: clamp(104px, 18vw, 272px);
  font-stretch: 75%;
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.055em;
}
.status-notice { padding: 24px 28px 26px; border-radius: var(--radius-lg); background: var(--paper); }
.status-notice-title { margin-bottom: 8px; font-family: var(--heading); font-size: 23px; font-weight: 600; letter-spacing: -.015em; }
.status-notice p:not(.status-notice-title) { color: #4b3f36; }
.confirm-intro p { margin-top: 20px; }
.confirm-card { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fbf8f3; }
.confirm-label { margin-bottom: 14px; color: var(--rust); }
.confirm-card h3 { margin-bottom: 10px; }
.confirm-card > p:not(.confirm-label) { color: #4b3f36; }
.confirm-summary { margin: 22px 0 0; border-top: 1px solid var(--line); }
.confirm-summary div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--line); font-size: 16px; }
.confirm-summary dt { font-weight: 600; }
.confirm-summary dd { margin: 0; color: var(--muted); }
.return-block { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; }
.return-block h2 { max-width: 14ch; }

.status-number {
  display: flex;
  align-items: center;
  gap: .02em;
  margin-bottom: 28px;
  font-family: var(--heading);
  font-size: clamp(120px, 21vw, 300px);
  font-stretch: 75%;
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.04em;
}
/* Lo zero è una tazza vista dall’alto: crema, ceramica, bordo e manico. */
.status-cup {
  position: relative;
  flex: none;
  width: .66em; height: .66em;
  margin-inline: .04em .2em;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 38%, #ffffff38 0, #ffffff00 24%),
    radial-gradient(circle closest-side, #c4894f 0, #a2602e 44%, #6f3a1c 58%, var(--paper) 60%, var(--paper) 79%, var(--ink) 80.5%, var(--ink) 93%, transparent 94.5%);
}
.status-cup::after {
  content: '';
  position: absolute;
  top: 50%; right: -.135em;
  width: .16em; height: .2em;
  margin-top: -.1em;
  border: .042em solid var(--ink);
  border-left: 0;
  border-radius: 0 .1em .1em 0;
}
.status-hero--error .display-title { max-width: 14ch; }
.status-hero--error .lead { margin-top: 24px; }
.route-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px clamp(24px, 3vw, 48px); margin: clamp(44px, 5vw, 72px) 0 28px; padding: 0; list-style: none; }
.route-list li { padding-top: 20px; border-top: 2px solid var(--ink); }
.route-list h2 { font-size: clamp(24px, 2.2vw, 30px); }
.route-list p { font-size: 17px; color: var(--muted); }

/* ---------- Adattamenti ---------- */
@media (min-width: 1800px) {
  .hero-copy { max-width: 860px; }
}

@media (max-width: 1150px) {
  .process-grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .trust-inner { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .gallery-grid { gap: 12px; }
}

@media (max-width: 900px) {
  .hero::after { background: linear-gradient(90deg, #211b17eb 0%, #211b17b3 60%, #211b1766 100%), linear-gradient(0deg, #211b17d9 0%, #211b1700 30%); }
  .hero-copy p:not(.eyebrow) { font-size: 19px; }
  .intro, .why-layout, .faq-layout, .contact-layout, .about-hero-head, .callout-inner { grid-template-columns: 1fr; }
  .why-title { position: static; }
  .why-title h2, .faq-intro h2 { max-width: 16ch; }
  .intro-photo { aspect-ratio: 4 / 3; }
  .territory-grid, .journal-grid { grid-template-columns: 1fr; gap: 40px; }
  .territory-card, .journal-card { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
  .territory-card .image-frame, .journal-card .card-image { margin: 0; }
  .process-grid--three, .values-grid { grid-template-columns: 1fr; gap: 36px; }
  .roles-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .role-card h3 { font-size: 22px; }
  .about-hero .image-frame, .lab-wide .image-frame { aspect-ratio: 4 / 3; }
  .reviews-grid { grid-template-columns: 1fr; }
  .service-hero-grid, .stack-layout { grid-template-columns: 1fr; }
  .stack-title { position: static; }
  .needs-grid, .benefits-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 640px) {
  .hero-inner { padding-top: calc(var(--header) + 36px); padding-bottom: 28px; align-items: end; }
  .hero-slide img { object-position: var(--focus-mobile, 72% 50%); }
  /* Sul telefono il testo copre il soggetto: velatura più piena nella metà bassa. */
  .hero::after { background: linear-gradient(90deg, #211b17e6 0%, #211b179e 60%, #211b176b 100%), linear-gradient(0deg, #211b17c7 0%, #211b1738 40%, #211b1700 60%); }
  .hero-copy .eyebrow { font-size: 15px; margin-bottom: 18px; }
  .hero h1 { font-size: clamp(46px, 13.4vw, 64px); }
  .hero-copy p:not(.eyebrow) { margin-top: 20px; font-size: 17px; }
  .hero .actions { margin-top: 26px; }
  .hero .actions .button { flex: 1 1 auto; }
  .hero-bottom { padding-bottom: 18px; }
  .hero-bottom-inner { padding-top: 14px; }
  .slider-dots { display: none; }
  .slide-description { flex-direction: column; gap: 0; font-size: 15px; }
  .slider-controls { gap: 8px; }
  .slider-toggle { min-width: 0; padding: 8px 14px; font-size: 14px; }
  .trust-inner { grid-template-columns: 1fr; gap: 14px; padding-block: 24px; }
  .trust-inner li { font-size: 15px; }
  .territory-card, .journal-card { grid-template-columns: 1fr; gap: 18px; }
  .process-grid { grid-template-columns: 1fr; gap: 28px; }
  .process-step { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; }
  .process-step > * { grid-column: 2; }
  .process-step > .step-number { grid-column: 1; grid-row: 1 / span 4; margin: 0; font-size: 42px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gallery-item:first-child { grid-row: span 1; aspect-ratio: 4 / 3; }
  .gallery-item:nth-child(8) { aspect-ratio: 2; }
  .gallery-open { opacity: 1; width: 32px; height: 32px; right: 8px; bottom: 8px; }
  .roles-grid { grid-template-columns: 1fr; gap: 40px; }
  .role-card img { aspect-ratio: 4 / 3; object-position: center 40%; }
  .about-hero { padding-top: calc(var(--header) + 24px); }
  .breadcrumb { margin-bottom: 28px; }
  .contact-form { padding: 20px 16px; margin-inline: -4px; }
  .service-hero { padding-top: calc(var(--header) + 24px); }
  .service-grid--two { grid-template-columns: 1fr; }
  .service-gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
  .service-gallery-item:first-child { grid-column: 1 / -1; grid-row: auto; }
  .service-gallery-item:first-child .image-frame { min-height: 0; aspect-ratio: 4 / 3; }
  .service-gallery-item .image-frame { min-height: 0; height: auto; aspect-ratio: 1; }
  .service-gallery-item .caption { font-size: 13px; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; width: 100%; }
  .compare-table tr { padding-block: 16px; border-bottom: 1px solid var(--line); }
  .compare-table th, .compare-table td { padding: 2px 0; border: 0; }
  .compare-table tbody th { margin-bottom: 8px; }
  .compare-table td { display: grid; grid-template-columns: 112px 1fr; gap: 12px; font-size: 16px; }
  .compare-table td::before { content: attr(data-label); font-weight: 600; color: var(--ink); }
  .table-wrap { overflow: visible; }
}

/* Adattamenti di catalogo, scheda caffè e territorio */
@media (max-width: 1150px) {
  .catalog-controls { grid-template-columns: 1fr; }
  .catalog-status { flex-direction: row; align-items: center; justify-content: space-between; }
  .needs-grid--four { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .coffee-hero-grid, .territory-hero-grid, .area-places { grid-template-columns: 1fr; }
  .coffee-identity { position: static; order: 2; padding-top: 0; }
  .coffee-gallery { display: contents; }
  .coffee-main { order: 1; aspect-ratio: 1; }
  .coffee-thumbs { order: 3; }
  .coffee-hero-grid { gap: 28px; }
  .spec-list { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr 1fr; }
  .needs-grid--four { grid-template-columns: 1fr 1fr; gap: 28px; }
  .territory-schema { max-width: 440px; margin-inline: auto; }
}

@media (max-width: 640px) {
  .profile-grid { grid-template-columns: 1fr; }
  .catalog-controls { padding: 16px; gap: 16px; }
  .catalog-selects { gap: 10px; }
  .catalog-selects select { padding-right: 34px; background-position: calc(100% - 18px) 52%, calc(100% - 12px) 52%; }
  .schema-sub { font-size: 25px; }
  .chip { padding: 8px 14px; font-size: 15px; }
  .guide-list li { flex-direction: column; gap: 4px; }
  .spec-list div { grid-template-columns: 128px 1fr; gap: 12px; }
  .coffee-facts div { grid-template-columns: 96px 1fr; }
  .needs-grid--four { grid-template-columns: 1fr; }
  .area-photos { gap: 8px; }
  .coffee-gallery .gallery-open, .area-photos .gallery-open { opacity: 1; }
}

/* Adattamenti di Galleria, Diario, FAQ, Contatti e schermate di stato */
@media (max-width: 1150px) {
  .article-grid { grid-template-columns: minmax(0, 41rem); }
  .article-head .article-meta { padding-top: 0; }
  .article-toc { position: static; margin-bottom: 48px; padding: 20px 24px 22px; border-radius: var(--radius-lg); background: var(--paper); }
  .article-toc ol { border-color: #c9b9a6; }
  .article-toc li { border-color: #c9b9a6; }
  .faq-nav ul { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .photo-wall { columns: 2; column-gap: 16px; }
  .journal-feature, .article-service, .contact-info, .status-grid { grid-template-columns: 1fr; }
  .journal-grid--two { grid-template-columns: 1fr; gap: 40px; }
  .article-cover .image-frame { aspect-ratio: 8 / 5; }
  .contact-info .territory-schema { max-width: 420px; }
  .route-list { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 640px) {
  .photo-wall { columns: 1; }
  .photo { margin-bottom: 28px; }
  .photo .gallery-open { opacity: 1; }
  .gallery-controls { padding: 16px; margin-bottom: 32px; }
  .article-head { padding-top: calc(var(--header) + 24px); }
  .article-chapter + .article-chapter { margin-top: 44px; }
  .article-recap { margin-top: 48px; padding: 22px 20px 24px; }
  .faq-nav a { padding: 14px 16px; font-size: 18px; }
  .info-list div { grid-template-columns: 1fr; gap: 2px; }
  .confirm-summary div { grid-template-columns: 96px 1fr; }
  .return-block .actions .button { flex: 1 1 auto; }
}