/*
 * Bridge for the inner pages (services, Crisi di Impresa, legal, thank-you).
 * They still carry the older Bootstrap template markup; this file gives them the
 * same system as the home page (grison.css): paper, ink and crimson, flat tone steps
 * instead of boxes and lines, Switzer throughout. Loaded after style.css and crisi.css.
 */

body {
  height: auto;
}

main {
  display: block;
}

.container {
  --bs-gutter-x: calc(var(--m) * 2);
}

/* ---------- Template pages (services) ---------- */
.about-area,
.services-area,
.contact-area {
  background: var(--paper);
  color: var(--ink);
}

.about-area {
  background: var(--stone);
}

.area-padding {
  padding: clamp(96px, 11vw, 168px) 0 clamp(72px, 9vw, 140px);
}

.section-headline {
  margin-bottom: clamp(40px, 5vw, 72px);
  text-align: left !important;
}

.section-headline h1,
.section-headline h2 {
  display: block;
  margin: 0;
  max-width: 16em;
  font-size: var(--step-head);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-transform: none;
  color: var(--ink);
}

.section-headline h1::after,
.section-headline h2::after {
  content: none;
  display: none;
}

.section-headline br {
  display: none;
}

.sec-head {
  display: block;
  margin: 0 0 16px;
  padding: 0;
  font-size: var(--step-lead);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-transform: none;
  color: var(--ink);
}

h3.sec-head {
  font-size: var(--step-lead);
}

h4.sec-head {
  font-size: var(--step-body);
  letter-spacing: -0.02em;
}

.single-well p,
.well-middle p,
.services-area p,
.about-area p {
  color: var(--ink);
  line-height: 1.55;
  font-size: var(--step-body);
}

.single-well ul li {
  padding: 6px 0;
  color: var(--ink);
  font-size: var(--step-body);
  line-height: 1.45;
}

.single-well ul li i {
  color: var(--red);
  font-size: 1.1em;
}

.single-well img,
.services-area img,
.about-area img {
  width: 100%;
  border-radius: 0;
  filter: grayscale(1) contrast(1.05);
  transition: filter 500ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .single-well img:hover,
  .services-area img:hover {
    filter: grayscale(0) contrast(1.02); /* taste-skill-ignore */
  }
}

.services-area center,
.services-area .text-center {
  text-align: left !important;
}

.services-area center p,
.services-area center ul {
  text-align: left !important;
  max-width: 44em;
}

.services-area center img {
  margin-top: 48px;
  max-width: 100%;
}

/* bullet lists: always left-aligned, the bullet right next to the text (the template centred some) */
ul.red-bullet-list,
ul.red-bullet-list.centered-text,
.services-area center ul.red-bullet-list {
  display: block;
  max-width: 44em;
  margin: 18px 0 24px;
  padding-left: 1.3em;
  list-style: disc outside;
  text-align: left;
}

ul.red-bullet-list li,
.single-well ul.red-bullet-list li,
ul.red-bullet-list.centered-text li {
  display: list-item;
  margin-bottom: 10px;
  padding: 0 0 0 0.3em;
  color: var(--ink);
  font-size: var(--step-body);
  line-height: 1.5;
  text-align: left;
}

/* running text and sub-headings need their own spacing (the base reset zeroes it) */
.about-area p,
.services-area p {
  margin: 0 0 1em;
}

.single-well .sec-head,
.services-area .sec-head {
  margin-top: 1.6em;
}

.single-well > .sec-head:first-child {
  margin-top: 0;
}

ul.red-bullet-list li::marker {
  color: var(--red);
}

.services-area h2,
.services-area h3,
.services-area h4 {
  color: var(--ink);
}

/* contact block on the template pages */
.contact-area,
.contact-area .contact-inner {
  position: relative;
  background: var(--stone);
}

.contact-overly {
  display: none;
}

.contact-icon {
  margin-bottom: 36px;
  text-align: left !important;
}

.single-icon i {
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 14px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--red);
}

.single-icon p {
  font-size: var(--step-body);
  line-height: 1.5;
}

.single-icon a {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.contact-area .form {
  margin-top: 8px;
}

.contact-form .text-center {
  text-align: left !important;
}

/* ---------- Legal and thank-you pages ---------- */
.legal-page {
  padding-top: clamp(104px, 11vw, 160px);
  padding-bottom: clamp(64px, 8vw, 120px);
}

.legal-page h1 {
  margin-bottom: 40px;
  font-size: var(--step-head);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.legal-page h2 {
  margin: 48px 0 14px;
  font-size: var(--step-lead);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.legal-page p,
.legal-page li {
  max-width: 62ch;
  font-size: var(--step-body);
  line-height: 1.6;
  color: var(--ink);
}

.legal-page li {
  list-style: disc;
  margin-left: 1.2em;
  margin-bottom: 6px;
}

.legal-page .draft-notice {
  max-width: 62ch;
  padding: 18px 20px;
  border: 0;
  background: var(--stone);
}

.legal-page a {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* ---------- Crisi di Impresa pages ---------- */
.crisi-page {
  --c-brand: var(--red);
  --c-brand-dark: var(--red-deep);
  --c-ink: var(--ink);
  --c-muted: var(--soft);
  --c-line: transparent;
  --c-tint: var(--stone);
  background: var(--paper);
  color: var(--ink);
}

.crisi-page .container {
  max-width: none;
  padding-inline: var(--m);
}

.crisi-page section {
  padding: clamp(72px, 9vw, 140px) 0;
}

.crisi-page :where(section p) {
  max-width: 62ch;
}

.crisi-page h2 {
  max-width: 20em;
  margin: 0 0 clamp(24px, 3vw, 40px);
  font-size: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--ink);
}

.crisi-page h3 {
  margin: 0 0 10px;
  font-size: var(--step-lead);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}

.crisi-page p {
  font-size: var(--step-body);
  line-height: 1.55;
}

.crisi-lead {
  max-width: 44ch;
  font-size: var(--step-lead) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.015em;
  color: var(--ink) !important;
}

.crisi-alt {
  background: var(--stone);
}

.crisi-note {
  max-width: 50ch;
  color: var(--soft);
}

/* hero: a full colour page */
.crisi-hero {
  background: var(--red) !important;
  color: #fff;
  padding: clamp(112px, 12vw, 176px) 0 clamp(64px, 8vw, 120px) !important;
}

.crisi-hero h1 {
  max-width: 24em;
  margin: 0 0 clamp(28px, 3.4vw, 48px);
  font-size: var(--step-statement) !important;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: #fff;
}

/* the place and the subject lead the headline at display scale; the sentence follows */
.crisi-eyebrow {
  display: block;
  max-width: 11em;
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  font-size: var(--step-display);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.93;
  text-transform: none;
  color: #fff;
}

.crisi-regions {
  display: block;
  margin: 0 0 clamp(28px, 3.4vw, 48px);
  font-size: var(--step-lead);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.crisi-eyebrow:has(+ .visually-hidden + .crisi-regions) {
  margin-bottom: clamp(12px, 1.6vw, 22px);
}

.nowrap {
  white-space: nowrap;
}

.crisi-hero .crisi-sub {
  max-width: 40ch;
  margin: 0 0 36px;
  font-size: var(--step-lead);
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.crisi-actions {
  align-items: center;
  gap: 16px 28px;
}

.btn-crisi,
.btn-crisi-alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 0;
  font-size: var(--step-body);
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease;
}

.btn-crisi:active {
  transform: scale(0.97);
}

.btn-crisi {
  background: var(--paper);
  color: var(--red-deep);
}

.btn-crisi-alt,
.btn-crisi-alt:hover {
  padding: 0;
  background: none;
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

@media (hover: hover) and (pointer: fine) {
  .btn-crisi:hover {
    background: #fff;
    color: var(--red-deep);
  }
}

.crisi-page .on-light.btn-crisi {
  background: var(--red);
  color: #fff;
}

.crisi-page .on-light.btn-crisi-alt,
.crisi-page .on-light.btn-crisi-alt:hover {
  background: none;
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .crisi-page .on-light.btn-crisi:hover {
    background: var(--red-deep);
    color: #fff;
  }
}

.crisi-trust {
  max-width: 60ch;
  margin-top: 40px !important;
  font-size: var(--step-small) !important;
  color: #fff !important;
  opacity: 0.85;
}

/* alarm signs: flat statements */
.alarm-list {
  display: block;
  max-width: 44em;
  margin-top: 36px;
}

.alarm-list li {
  align-items: baseline;
  padding: 0 0 clamp(16px, 2vw, 26px);
  border: 0;
  background: none;
  font-size: var(--step-statement);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.alarm-list i {
  display: none;
}

/* paths and reasons: tone steps instead of boxes */
.why-grid {
  gap: 10px;
  margin-top: 40px;
}

/* the paths read as an editorial list: the name on the left, the explanation on the right */
.path-grid {
  display: block;
  margin-top: 24px;
}

.path-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 8px clamp(24px, 4vw, 72px);
  padding: 28px 0 32px;
  border: 0;
  background: none !important;
}

.path-card h3 {
  margin: 0;
  font-size: var(--step-lead);
}

@media (max-width: 899px) {
  .path-card {
    display: block;
    padding: 22px 0 26px;
  }

  .path-card h3 {
    margin-bottom: 8px;
  }
}

.why-card {
  padding: 28px 26px 30px;
  border: 0;
  background: var(--paper);
}

.crisi-page section:not(.crisi-alt) .why-card {
  background: var(--stone);
}

.path-card p,
.why-card p,
.steps p {
  color: var(--soft);
  font-size: var(--step-body);
  line-height: 1.5;
}

/* steps: a real ordered list, numerals as plain type */
.steps {
  gap: 36px 28px;
}

.steps li {
  min-height: 0;
  padding: 0;
}

.steps li::before {
  position: static;
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 14px;
  border-radius: 0;
  background: none;
  font-size: var(--step-head);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--red);
  text-align: left;
}

.network-note {
  max-width: 62ch;
  margin-top: 56px;
  padding: 26px 28px;
  border: 0;
  background: var(--stone);
}

.crisi-alt .network-note {
  background: var(--paper);
}

/* confidentiality: the ink page */
.crisi-confid {
  background: var(--ink);
  color: var(--paper);
}

.crisi-confid i {
  display: none;
}

.crisi-confid h2,
.crisi-confid p {
  color: var(--paper);
}

.crisi-confid p {
  max-width: 44ch;
  font-size: var(--step-lead);
  line-height: 1.3;
  letter-spacing: -0.015em;
}

/* faq */
.crisi-faq details {
  margin-bottom: 8px;
  border: 0;
  background: var(--stone);
  transition: background-color 160ms ease;
}

.crisi-faq summary {
  padding: 22px 26px;
  font-size: var(--step-lead);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  cursor: pointer;
}

.crisi-faq details[open] {
  background: var(--paper);
}

.crisi-faq details[open] summary {
  border: 0;
}

.crisi-faq details p {
  max-width: 62ch;
  padding: 0 26px 26px;
  color: var(--soft);
  font-size: var(--step-body);
}

.crisi-alt .crisi-faq details {
  background: var(--paper);
}

@media (hover: hover) and (pointer: fine) {
  .crisi-faq details:not([open]):hover {
    background: #fff;
  }
}

/* contact */
.crisi-contact a,
.local-links a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.crisi-contact .contact-alt li {
  margin-bottom: 16px;
  font-size: var(--step-body);
  line-height: 1.45;
}

.crisi-contact .contact-alt i {
  color: var(--red);
}

/* the Crisi form looks like the home form: paper fields straight on the stone page, square crimson button */
.crisi-form {
  padding: 0;
  border: 0;
  background: none;
}

.crisi-form .field {
  margin-bottom: 12px;
}

.crisi-form label {
  margin-bottom: 6px;
  font-size: var(--step-small);
  font-weight: 500;
}

.crisi-form input[type="text"],
.crisi-form input[type="email"],
.crisi-form input[type="tel"],
.crisi-form select,
.crisi-form textarea {
  display: block;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--step-body);
  line-height: 1.4;
  box-shadow: none !important; /* taste-skill-ignore */
  transition: background-color 160ms ease;
}

.crisi-form textarea {
  min-height: 160px;
  resize: vertical;
}

.crisi-form select {
  padding-right: 48px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231c1b1d' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

.crisi-form input:focus,
.crisi-form select:focus,
.crisi-form textarea:focus {
  background-color: #fff;
  outline: 3px solid var(--red);
  outline-offset: 0;
}

.crisi-form button[type="submit"] {
  width: auto;
  min-height: 56px;
  margin-top: 20px;
  padding: 0 32px;
  border: 0;
  border-radius: 0;
  background: var(--red);
  font-family: inherit;
  font-size: var(--step-body);
  font-weight: 500;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}

.crisi-form button[type="submit"]:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .crisi-form button[type="submit"]:hover:not(:disabled) {
    background: var(--red-deep);
  }
}

.local-links {
  margin-top: 40px;
  padding-top: 0;
  border: 0;
}

/* a real picture of the place, full bleed, one treatment */
.crisi-band {
  margin: 0;
  background: var(--ink);
}

.crisi-band img {
  display: block;
  width: 100%;
  height: clamp(220px, 34vw, 520px);
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

.crisi-band figcaption {
  padding: 12px var(--m);
  font-size: var(--step-small);
  line-height: 1.4;
  color: var(--soft-on-ink);
}

.crisi-band figcaption a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- Entrances on the inner pages (once, on scroll) ---------- */
.js .crisi-page section h2,
.js .crisi-page .alarm-list li,
.js .crisi-page .path-card,
.js .crisi-page .why-card,
.js [data-reveal-auto] {
  opacity: 0;
  transform: translateY(22px);
}

.js [data-reveal-auto].is-in {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 650ms var(--ease-out) var(--d, 0ms), transform 650ms var(--ease-out) var(--d, 0ms);
}

code {
  color: var(--ink);
  font-size: 0.92em;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal-auto] {
    transform: none;
  }
}