/* PiovonoMandati — landing narrativa one-page */



html {

  scroll-behavior: smooth;

}



.cr-landing {

  overflow-x: hidden;

}



.site-logo img {

  height: 52px;

  width: auto;

  display: block;

  transition: height 0.3s ease;

}



.site-logo.shrink img {

  height: 38px !important;

}



.cr-landing--no-nav .cr-anchor-menu a {

  scroll-margin-top: 16px;

}

.cr-anchor-menu a {

  scroll-margin-top: 88px;

}



/* ── Hero ── */

.cr-hero {

  position: relative;

  min-height: 480px;

  display: flex;

  align-items: center;

  padding: 56px 0;

  background: #111 center/cover no-repeat var(--cr-hero-bg);

  margin-top: 0;

}



.cr-hero__overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(105deg, rgba(9, 30, 57, 0.94) 0%, rgba(9, 30, 57, 0.62) 55%, rgba(0, 0, 0, 0.4) 100%);

}



.cr-hero__inner {

  position: relative;

  z-index: 1;

}



.cr-hero__content {

  max-width: 740px;

}



.cr-hero__badge {

  display: inline-block;

  margin: 0 0 20px;

  padding: 6px 14px;

  border-radius: 999px;

  background: rgba(245, 158, 11, 0.15);

  border: 1px solid rgba(245, 158, 11, 0.45);

  color: var(--accent);

  font-family: Poppins, sans-serif;

  font-size: 13px;

  font-weight: 600;

  letter-spacing: 0.04em;

  text-transform: uppercase;

}



.cr-hero__brand {

  display: block;

  width: 100%;

  margin: 0 0 40px;

}



.cr-hero__brand img {

  display: block;

  width: 100%;

  height: auto;

}



.cr-hero__title {

  margin: 0 0 20px;

  font-family: Montserrat, sans-serif;

  font-size: clamp(34px, 5.5vw, 56px);

  font-weight: 800;

  line-height: 1.08;

  color: #fff;

}



.cr-hero__title span {

  display: block;

  margin-top: -0.08em;

  font-size: 18px;

  line-height: 1.05;

  color: var(--accent);

}



.cr-hero__lead {

  margin: 0 0 32px;

  max-width: 660px;

  font-family: Poppins, sans-serif;

  font-size: clamp(17px, 2vw, 20px);

  line-height: 1.6;

  color: rgba(255, 255, 255, 0.92);

}



.cr-hero__lead strong {

  color: #fff;

}



.cr-hero__cta {

  display: flex;

  flex-wrap: wrap;

  gap: 16px;

}



.cr-hero .btn-primary {

  background: var(--accent);

  color: #111;

  border: 1px solid #000;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);

}



.cr-hero .btn-primary:hover {

  background: var(--accent_h);

  color: #fff;

}



/* ── Narrative chapters ── */

.cr-chapter {

  padding: 80px 0;

  scroll-margin-top: 80px;

}



.cr-chapter--alt {

  background: #f6f6f6;

}



.cr-chapter--sintesi {

  background: #fff;

  padding-bottom: 64px;

}



.cr-chapter--cta {

  padding: 72px 0;

  background: linear-gradient(135deg, #091e39 0%, #123a6b 100%);

}



.cr-story {

  max-width: 680px;

  margin-inline: auto;

}



.cr-story--wide {

  max-width: 960px;

}



.cr-chapter__head {

  margin-bottom: 36px;

  padding-bottom: 24px;

  border-bottom: 2px solid rgba(245, 158, 11, 0.35);

}



.cr-chapter__label {

  display: block;

  margin-bottom: 10px;

  font-family: Poppins, sans-serif;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--accent_h);

}



.cr-chapter__label--light {

  color: rgba(245, 158, 11, 0.9);

}



.cr-chapter__title {

  margin: 0;

  font-family: Montserrat, sans-serif;

  font-size: clamp(26px, 3.2vw, 36px);

  font-weight: 800;

  line-height: 1.2;

  color: #091e39;

}



.cr-chapter__title--light {

  color: #fff;

}



.cr-chapter__head--light {

  border-bottom-color: rgba(255, 255, 255, 0.2);

}



.cr-chapter__body {

  font-family: Poppins, sans-serif;

  font-size: 17px;

  line-height: 1.7;

  color: #333;

}



.cr-chapter__body p {

  margin: 0 0 20px;

}



.cr-chapter__body p:last-child {

  margin-bottom: 0;

}



.cr-lead {

  font-size: 19px;

  line-height: 1.65;

  color: #222;

  font-weight: 500;

}



.cr-lead--light {

  color: rgba(255, 255, 255, 0.92);

}



.cr-chapter__closing {

  margin-top: 32px !important;

  padding: 20px 24px;

  background: rgba(245, 158, 11, 0.12);

  border-left: 4px solid var(--accent);

  border-radius: 0 8px 8px 0;

  font-weight: 500;

  color: #222;

}



/* ── Contrast (non è / è) ── */

.cr-contrast {

  display: grid;

  gap: 24px;

  margin: 32px 0;

}



.cr-contrast__col {

  padding: 28px 24px;

  border-radius: 12px;

  background: #fff;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);

}



.cr-contrast__col--no {

  border-top: 4px solid #ccc;

}



.cr-contrast__col--yes {

  border-top: 4px solid var(--accent);

  box-shadow: 0 8px 28px rgba(245, 158, 11, 0.15);

}



.cr-contrast__heading {

  margin: 0 0 16px;

  font-family: Montserrat, sans-serif;

  font-size: 18px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.04em;

}



.cr-contrast__col--no .cr-contrast__heading {

  color: #888;

}



.cr-contrast__col--yes .cr-contrast__heading {

  color: #091e39;

}



.cr-contrast__list {

  margin: 0;

  padding: 0;

  list-style: none;

}



.cr-contrast__list li {

  position: relative;

  padding: 0 0 12px 24px;

  font-size: 16px;

  line-height: 1.5;

}



.cr-contrast__list li::before {

  position: absolute;

  left: 0;

  top: 2px;

  font-weight: 800;

}



.cr-contrast__col--no .cr-contrast__list li::before {

  content: "×";

  color: #aaa;

}



.cr-contrast__col--yes .cr-contrast__list li::before {

  content: "✓";

  color: var(--accent_h);

}



/* ── Callout (WorkSpace) ── */

.cr-callout {

  margin: 28px 0;

  padding: 28px 28px 24px;

  background: #fff;

  border-radius: 12px;

  border: 1px solid #e8e8e8;

  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);

}



.cr-chapter--alt .cr-callout {

  background: #fff;

}



.cr-callout__title {

  margin: 0 0 12px;

  font-family: Montserrat, sans-serif;

  font-size: 20px;

  font-weight: 800;

  color: #091e39;

}



.cr-callout p {

  margin: 0;

  font-size: 16px;

  line-height: 1.65;

}



/* ── Split layout (timeline + image) ── */

.cr-chapter__split {

  display: flex;

  flex-direction: column;

  gap: 36px;

  margin-top: 8px;

}



.cr-chapter__figure {

  margin: 0;

}



.cr-chapter__figure img {

  display: block;

  width: 100%;

  border-radius: var(--radius-hero);

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);

  object-fit: cover;

  aspect-ratio: 4/3;

}



.cr-chapter__figure figcaption {

  margin-top: 12px;

  font-size: 14px;

  font-style: italic;

  color: var(--muted);

  text-align: center;

  line-height: 1.45;

}



.cr-chapter__figure--center {

  margin-top: 40px;

}



.cr-chapter__figure--center img {

  aspect-ratio: 16/9;

}



/* ── Timeline (nascita mandato) ── */

.cr-timeline {

  display: flex;

  flex-direction: column;

  gap: 0;

}



.cr-timeline__item {

  display: grid;

  grid-template-columns: 48px 1fr;

  gap: 16px 20px;

  padding-bottom: 28px;

  position: relative;

}



.cr-timeline__item:not(:last-child)::after {

  content: "";

  position: absolute;

  left: 23px;

  top: 48px;

  bottom: 0;

  width: 2px;

  background: linear-gradient(180deg, var(--accent) 0%, rgba(245, 158, 11, 0.2) 100%);

}



.cr-timeline__num {

  width: 48px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: var(--accent);

  font-family: Montserrat, sans-serif;

  font-size: 14px;

  font-weight: 800;

  color: #111;

  flex-shrink: 0;

}



.cr-timeline__title {

  margin: 0 0 6px;

  font-family: Montserrat, sans-serif;

  font-size: 17px;

  font-weight: 700;

  color: #091e39;

}



.cr-timeline__text {

  margin: 0;

  font-size: 15px;

  line-height: 1.6;

  color: #555;

}



/* ── Narrative numbered list ── */

.cr-narrative-list {

  margin: 0;

  padding: 0;

  list-style: none;

  counter-reset: cr-item;

}



.cr-narrative-list li {

  position: relative;

  counter-increment: cr-item;

  padding: 0 0 20px 44px;

  font-size: 16px;

  line-height: 1.6;

  color: #444;

}



.cr-narrative-list li::before {

  content: counter(cr-item, decimal-leading-zero);

  position: absolute;

  left: 0;

  top: 0;

  font-family: Montserrat, sans-serif;

  font-size: 14px;

  font-weight: 800;

  color: var(--accent_h);

}



/* ── Roles (chi fa cosa) ── */

.cr-roles {

  display: grid;

  gap: 20px;

  margin: 8px 0 0;

}



.cr-roles__card {

  padding: 24px 22px;

  background: #fff;

  border-radius: 12px;

  border: 1px solid #e5e5e5;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);

}



.cr-roles__card--highlight {

  border: 2px solid var(--accent);

  box-shadow: 0 8px 28px rgba(245, 158, 11, 0.14);

}



.cr-roles__title {

  margin: 0 0 14px;

  font-family: Montserrat, sans-serif;

  font-size: 17px;

  font-weight: 800;

  color: #091e39;

}



.cr-roles__card ul {

  margin: 0;

  padding: 0;

  list-style: none;

}



.cr-roles__card li {

  position: relative;

  padding: 0 0 10px 18px;

  font-size: 15px;

  line-height: 1.5;

  color: #555;

}



.cr-roles__card li::before {

  content: "—";

  position: absolute;

  left: 0;

  color: var(--accent_h);

  font-weight: 700;

}



/* ── Pricing (narrative cards) ── */

.cr-pricing {

  display: grid;

  gap: 24px;

  margin-top: 36px;

}



.cr-pricing__card {

  padding: 0 0 32px;

  background: #fff;

  border: 1px solid #e5e5e5;

  border-radius: 12px;

  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);

  overflow: hidden;

}



.cr-pricing__figure {

  margin: 0 0 20px;

}



.cr-pricing__figure img {

  display: block;

  width: 100%;

  height: auto;

  aspect-ratio: 5 / 3;

  object-fit: cover;

}



.cr-pricing__card .cr-pricing__label,

.cr-pricing__card .cr-pricing__title,

.cr-pricing__card .cr-pricing__price,

.cr-pricing__card .cr-pricing__note {

  padding-inline: 28px;

}



.cr-pricing__card .cr-pricing__label {

  margin-top: 0;

}



.cr-chapter:not(.cr-chapter--alt) .cr-pricing__card {

  background: #fafafa;

}



.cr-pricing__card--featured {

  border: 2px solid var(--accent);

  box-shadow: 0 12px 36px rgba(245, 158, 11, 0.16);

  background: #fff !important;

}



.cr-pricing__label {

  margin: 0 0 6px;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--accent_h);

}



.cr-pricing__title {

  margin: 0 0 10px;

  font-family: Montserrat, sans-serif;

  font-size: 22px;

  font-weight: 800;

  color: #091e39;

}



.cr-pricing__price {

  margin: 0 0 4px;

  font-family: Montserrat, sans-serif;

  font-size: 36px;

  font-weight: 800;

  color: #111;

  line-height: 1;

}



.cr-pricing__price small {

  font-size: 16px;

  font-weight: 600;

  color: var(--muted);

}



.cr-pricing__note {

  margin: 0 0 20px;

  font-size: 14px;

  color: var(--muted);

}



.cr-pricing__story p {

  margin: 0 0 14px;

  font-size: 16px;

  line-height: 1.6;

  color: #444;

}



.cr-pricing__story p:last-child {

  margin-bottom: 0;

}



/* ── Flow (flusso operativo) ── */

.cr-flow {

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.cr-flow__step {

  display: grid;

  grid-template-columns: 40px 1fr;

  gap: 16px;

  padding: 20px 20px 20px 16px;

  background: #fff;

  border-radius: 10px;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);

}



.cr-flow__num {

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #091e39;

  color: #fff;

  font-family: Montserrat, sans-serif;

  font-size: 16px;

  font-weight: 800;

}



.cr-flow__title {

  margin: 0 0 4px;

  font-family: Montserrat, sans-serif;

  font-size: 16px;

  font-weight: 700;

  color: #091e39;

}



.cr-flow__text {

  margin: 0;

  font-size: 15px;

  line-height: 1.55;

  color: #555;

}



/* ── Recap ── */

.cr-recap {

  padding: 32px 28px;

  background: #f6f6f6;

  border-radius: 12px;

  border-left: 4px solid var(--accent);

}



.cr-recap p {

  margin: 0 0 18px;

  font-size: 17px;

  line-height: 1.7;

  color: #333;

}



.cr-recap p:last-child {

  margin-bottom: 0;

}



/* ── Contact CTA ── */

.cr-contact-list {

  margin: 28px 0 0;

  padding: 0;

  list-style: none;

  display: flex;

  flex-wrap: wrap;

  gap: 16px 32px;

}



.cr-contact-list a {

  font-family: Montserrat, sans-serif;

  font-size: 18px;

  font-weight: 700;

  color: var(--accent);

  text-decoration: none;

  border-bottom: 2px solid rgba(245, 158, 11, 0.4);

  transition: color 0.15s, border-color 0.15s;

}



.cr-contact-list a:hover {

  color: #fff;

  border-bottom-color: #fff;

}



/* ── Buttons ── */

.cr-landing .btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 52px;

  padding: 0 28px;

  border-radius: 999px;

  font-family: Poppins, sans-serif;

  font-weight: 700;

  font-size: 14px;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  text-decoration: none;

  transition: 0.15s ease;

}



.cr-landing .btn-primary {

  background: var(--accent);

  color: #111;

  border: 1px solid #000;

}



.cr-landing .btn-primary:hover {

  background: var(--accent_h);

  color: #fff;

  transform: translateY(-1px);

}



/* ── Desktop ── */

@media (min-width: 768px) {

  .cr-contrast {

    grid-template-columns: 1fr 1fr;

  }



  .cr-pricing {

    grid-template-columns: 1fr 1fr;

  }

}



@media (min-width: 993px) {

  .cr-roles {

    grid-template-columns: repeat(3, 1fr);

  }

  .cr-chapter__split {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 48px;

    align-items: start;

  }



  .cr-chapter__split--reverse {

    grid-template-columns: 0.9fr 1.1fr;

  }



  .cr-chapter__split--reverse .cr-chapter__figure {

    order: -1;

  }



  .cr-chapter {

    padding: 96px 0;

  }

}



/* ── Mobile ── */

@media (max-width: 992px) {

  .cr-chapter > .container,

  .cr-chapter--cta > .container {

    max-width: 600px;

  }



  .cr-hero {

    min-height: 420px;

    padding: 44px 0;

  }



  .cr-hero > .container {

    max-width: 600px;

  }



  .cr-roles {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 600px) {

  .cr-chapter {

    padding: 64px 0;

  }



  .site-logo img {

    height: 40px;

  }



  .site-logo.shrink img {

    height: 32px !important;

  }

}

/* ── ClienteRistrutturato extras ── */

@media (min-width: 768px) {
  .cr-pricing {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cr-chapter--pricing {
  background: #fafafa;
}

.cr-hero__cta--center {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 28px;
}

.btn-outline-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 16px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}