/* Brand tokens: fonts, palette, type scale, spacing, radii, shadows and motion.
   This is the only file with hex values, font-family, easing, radii and shadows: every
   other stylesheet uses these variables. Source: references/brand.md of the skill. */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/lato-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/lato-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}

:root {
  /* Official palette */
  --orange: #DD7631;
  --eerie-black: #191919;
  --cream: #FBF8F1;

  /* Site extensions */
  --orange-hover: #C96827;
  --orange-text: #9E4E14;
  --orange-soft: #FBEEDF;
  --orange-on-dark: #F3AB76; /* lighter orange for small text on black panels */
  --paper: #F4F0E6;
  --sand: #ECE7DA;
  --grey-100: #F0ECE1;
  --grey-200: #E5E0D3;
  --success: #4ADE80;
  --border: rgba(25, 25, 25, 0.10);
  --border-strong: rgba(25, 25, 25, 0.18);
  --text-muted: rgba(25, 25, 25, 0.60);
  --text-on-dark-muted: rgba(251, 248, 241, 0.6);
  --chip-bg: rgba(221, 118, 49, 0.18);
  --chip-border: rgba(221, 118, 49, 0.35);

  /* Font */
  --font-display: "Montserrat", system-ui, -apple-system, sans-serif;
  --font-body: "Lato", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", system-ui, -apple-system, sans-serif;

  /* Type scale */
  --fs-h1: clamp(36px, 5.5vw, 64px);
  --fs-h2: clamp(28px, 3.6vw, 44px);
  --fs-h3: 22px;
  --fs-card-title: 28px;
  --fs-callout-title: clamp(22px, 2.4vw, 30px);
  --fs-contact-title: clamp(40px, 6vw, 72px);
  --fs-intro: clamp(22px, 2.6vw, 32px);
  --fs-footer-wordmark: 26px;
  --fs-lead: 19px;
  --fs-body: 17px;
  --fs-button: 15px;
  --fs-step-title: 20px;
  --fs-step-text: 15px;
  --fs-small: 14px;
  --fs-eyebrow: 13px;
  --fs-tag: 11px;

  /* Spacing */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;
  --s8: 128px;
  --s9: 160px;

  /* Shapes */
  --r-sm: 12px;
  --r-md: 24px;
  --r-lg: 40px;
  --r-pill: 999px;
  --r-circle: 50%;
  --max-w: 1320px;

  /* Shadows */
  --shadow-panel: 0 4px 32px rgba(0, 0, 0, 0.04);
  --shadow-navbar: 0 6px 20px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.15);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --d-fast: 0.2s;
  --d-base: 0.3s;
  --d-slow: 0.6s;
}
/* Minimal reset, base typography and HTML elements shared by every page, plus the
   animations shared by the modules. Module variants live in components/. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* The FrameworkRail row reaches the window edge: clip prevents horizontal page
     scrolling without breaking position: sticky. */
  overflow-x: clip;
  background: var(--paper);
  color: var(--eerie-black);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
}

p,
figure,
dl,
dd {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* Anchors do not end up under the sticky navbar. */
[id] {
  scroll-margin-top: 120px;
}

::selection {
  background: var(--orange);
  color: var(--eerie-black);
}

/* Type roles */

.cc-lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--surface-muted);
}

.cc-accent {
  color: var(--orange);
}

/* Shared animations: fades for state changes (FAQ, partner list). */

@keyframes cc-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes cc-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* Page structure: container, 12-column grid, vertical rhythm between sections, open
   sections and panels (Panel) with their surface colours. Values from
   references/layout.md and references/brand.md of the skill. */

:root {
  --columns: 4;
  --gutter: var(--s2);
  --page-margin: 20px; /* side margin below 768px from layout.md, off the spacing scale */
  --section-gap: var(--s5);
  --sticky-top: 120px; /* top offset of sticky elements from movimento.md */

  /* Colours of the current surface: black panels redefine them, so components always
     read the right colour without dedicated variants. */
  --surface-text: var(--eerie-black);
  --surface-muted: var(--text-muted);
  --surface-accent: var(--orange-text);
  --surface-line: var(--border);
  --surface-line-strong: var(--border-strong);
}

@media (min-width: 768px) {
  :root {
    --columns: 8;
    --gutter: var(--s3);
    --page-margin: var(--s4);
    --section-gap: var(--s6);
  }
}

@media (min-width: 1024px) {
  :root {
    --columns: 12;
    --page-margin: var(--s5);
    --section-gap: var(--s7);
  }
}

.cc-container {
  width: min(100% - 2 * var(--page-margin), var(--max-w));
  margin-inline: auto;
}

.cc-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--gutter);
}

.cc-grid > * {
  grid-column: 1 / -1;
}

.cc-main {
  padding-block: var(--s4) var(--section-gap);
}

.cc-main > * + * {
  margin-top: var(--section-gap);
}

/* Panel: rounded surface for content meant to be consulted. */

.cc-panel {
  padding: var(--s5) 20px; /* 20px sides below 768px from brand.md, off the spacing scale */
  border-radius: var(--r-md);
  color: var(--surface-text);
}

.cc-panel--white {
  background: var(--cream);
  box-shadow: var(--shadow-panel);
}

.cc-panel--sand {
  background: var(--sand);
}

.cc-panel--black {
  --surface-text: var(--cream);
  --surface-muted: var(--text-on-dark-muted);
  --surface-accent: var(--orange-on-dark);
  --surface-line: var(--text-on-dark-muted);
  --surface-line-strong: var(--text-on-dark-muted);
  background: var(--eerie-black);
}

@media (min-width: 768px) {
  .cc-panel {
    padding: var(--s6) var(--s4);
    border-radius: var(--r-lg);
  }
}

@media (min-width: 1024px) {
  .cc-main {
    padding-top: var(--s5);
  }

  .cc-panel {
    padding: var(--s7) var(--s6);
  }
}
/* AboutPanel: "Chi sono" in a white panel with the </> mark in the top right corner.
   Profile on the left (photo, name, role, place, skills, LinkedIn), short text and working
   principles as a list with separators on the right. Desktop 4/8; on phones the photo
   sits beside the name and the content follows. */

.cc-about-panel {
  position: relative;
  row-gap: var(--s5);
}

.cc-about-panel::after {
  content: "</>";
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-small);
  letter-spacing: -0.05em;
  color: var(--orange);
}

.cc-about-panel__profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s3) var(--s2);
  align-content: start;
  align-items: center;
}

.cc-about-panel__photo {
  width: 96px;
  height: 96px;
  border-radius: var(--r-circle);
  background: var(--grey-200);
  object-fit: cover;
}

.cc-about-panel__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.2;
}

.cc-about-panel__role,
.cc-about-panel__place {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.cc-about-panel__skills {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: var(--s1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-about-panel__skill {
  padding: 4px 10px; /* chip size from the UI kit */
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--orange-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-tag);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cc-about-panel__link {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--orange-text);
}

.cc-about-panel__content {
  display: grid;
  gap: var(--s3);
  align-content: start;
}

.cc-about-panel__content .cc-eyebrow {
  margin-bottom: 0;
}

.cc-about-panel__text {
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.cc-about-panel__principles {
  margin-top: var(--s2);
  border-top: 1px solid var(--border-strong);
}

.cc-about-panel__principle {
  display: grid;
  gap: var(--s1) var(--s3);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--border-strong);
}

.cc-about-panel__principle dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lead);
  line-height: 1.3;
}

.cc-about-panel__principle dd {
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .cc-about-panel__principle {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

@media (min-width: 1024px) {
  .cc-about-panel__profile {
    grid-template-columns: minmax(0, 1fr);
    grid-column: 1 / span 4;
    align-items: start;
  }

  .cc-about-panel__photo {
    width: 128px;
    height: 128px;
  }

  .cc-about-panel__content {
    grid-column: 6 / -1;
  }
}
/* Breadcrumb: Home > page path above the eyebrow of service pages. Mirrors the
   BreadcrumbList of the structured data. */

.cc-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--surface-muted);
}

.cc-breadcrumb__item + .cc-breadcrumb__item::before {
  content: "/";
  margin-right: var(--s1);
}

.cc-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--surface-muted);
}

.cc-breadcrumb__current {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* Button: Montserrat 600 pill. Variants orange (primary, one per screen), black, white,
   ghost and ghost-light; sm for tight spaces. Used for links and buttons. */

.cc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-height: 52px;
  padding: 0 var(--s4);
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-button);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--d-fast) var(--ease),
    background-color var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease),
    color var(--d-fast) var(--ease);
}

.cc-button--orange {
  background: var(--orange);
  color: var(--eerie-black);
}

.cc-button--black {
  background: var(--eerie-black);
  color: var(--cream);
}

.cc-button--white {
  background: var(--cream);
  color: var(--eerie-black);
}

.cc-button--ghost {
  border-color: var(--eerie-black);
  color: var(--eerie-black);
}

.cc-button--ghost-light {
  border-color: var(--text-on-dark-muted);
  color: var(--cream);
}

.cc-button--sm {
  min-height: 40px;
  padding: 0 var(--s3);
}

@media (hover: hover) {
  .cc-button:hover {
    transform: translateY(-2px);
  }

  .cc-button--orange:hover {
    background: var(--orange-hover);
  }

  .cc-button--ghost:hover {
    background: var(--eerie-black);
    color: var(--cream);
  }

  .cc-button--ghost-light:hover {
    border-color: var(--cream);
    background: var(--cream);
    color: var(--eerie-black);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-button {
    transition: none;
  }
}
/* Callout: two-column sand box (5/7). Mono eyebrow and heading on the left, text with a
   orange left border on the right. Used for "Quando ti serve" and on the Metodo page. */

.cc-callout {
  row-gap: var(--s4);
  border-radius: var(--r-md);
}

.cc-callout__head .cc-eyebrow {
  margin-bottom: var(--s2);
}

.cc-callout__title {
  font-size: var(--fs-callout-title);
  line-height: 1.15;
}

.cc-callout__body {
  display: grid;
  gap: var(--s2);
  align-content: center;
  padding-left: var(--s3);
  border-left: 2px solid var(--orange);
}

@media (min-width: 1024px) {
  .cc-callout__head {
    grid-column: 1 / span 5;
    align-self: center;
  }

  .cc-callout__body {
    grid-column: 7 / span 6;
    padding-left: var(--s4);
  }
}
/* Contact: Contatti page as an open 7/5 section. Big heading on the left; on the right a
   white panel with the light EmailForm and the direct contact details, which on mobile
   follows the heading. The next steps are StepCards across the full width, three side by
   side from 768px. */

.cc-contact {
  row-gap: var(--s5);
}

.cc-contact__head {
  display: grid;
  gap: var(--s3);
  align-content: start; /* shares the row with the form: no stretching of the gaps */
}

.cc-contact__head .cc-eyebrow {
  margin-bottom: 0;
}

.cc-contact__title {
  font-size: var(--fs-contact-title);
  line-height: 1;
}

.cc-contact__section {
  display: grid;
  gap: var(--s3);
  align-content: start;
}

.cc-contact__section h2 {
  font-size: var(--fs-h3);
}

.cc-contact__steps {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .cc-contact__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Direct contact details inside the form panel, below a divider: one row per channel,
   label on the left and link on the right. */
.cc-contact__direct {
  display: grid;
  gap: var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
}

.cc-contact__direct-title {
  font-size: var(--fs-step-title);
}

.cc-contact__details {
  display: grid;
}

/* Label above the link on phones, so the email address never breaks mid-word; label
   and link side by side from 480px. */
.cc-contact__detail {
  display: grid;
  align-items: center;
  column-gap: var(--s2);
}

.cc-contact__detail + .cc-contact__detail {
  margin-top: var(--s1);
}

@media (min-width: 480px) {
  .cc-contact__detail {
    grid-template-columns: 6.5em minmax(0, 1fr);
  }

  .cc-contact__detail + .cc-contact__detail {
    margin-top: 0;
  }
}

.cc-contact__detail dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-tag);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cc-contact__detail dd {
  overflow-wrap: anywhere;
}

.cc-contact__detail a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.cc-contact__form {
  display: grid;
  gap: var(--s3);
  align-content: start;
}

.cc-contact__form h2 {
  font-size: var(--fs-h3);
}

.cc-contact__note {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

@media (min-width: 1024px) {
  /* Centred on the height of the form panel, so no empty gap opens below the heading. */
  .cc-contact__head {
    grid-column: 1 / span 6;
    align-self: center;
  }

  .cc-contact__form {
    grid-column: 8 / span 5;
    grid-row: 1;
    align-self: start;
  }

  .cc-contact__section--steps {
    grid-column: 1 / -1;
  }
}
/* CtaBlock: closing block of every page in a black panel, 7/5. Heading and one line on
   the left, the dark EmailForm and the privacy note on the right. One column below
   1024px. */

.cc-cta-block {
  row-gap: var(--s4);
}

.cc-cta-block__text {
  display: grid;
  gap: var(--s3);
  align-content: center;
}

/* Narrow enough that even a short heading breaks into two lines, like the other sections. */
.cc-cta-block__text h2 {
  max-width: 12em;
}

.cc-cta-block__lead {
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-on-dark-muted);
}

.cc-cta-block__action {
  display: grid;
  gap: var(--s2);
  align-content: center;
}

.cc-cta-block__note {
  font-size: var(--fs-small);
  color: var(--text-on-dark-muted);
}

@media (min-width: 1024px) {
  .cc-cta-block__text {
    grid-column: 1 / span 6;
  }

  .cc-cta-block__action {
    grid-column: 8 / span 5;
  }
}
/* EditorialBlock: a structured text section in the same shape as the FAQ list, heading on
   the left and content on the right (4/8). The text sits against an orange rule; an optional
   list and side notes follow. One column on mobile. */

.cc-editorial-block {
  row-gap: var(--s4);
}

.cc-editorial-block__head .cc-eyebrow {
  margin-bottom: var(--s2);
}

.cc-editorial-block__body {
  display: grid;
  gap: var(--s3);
  align-content: start;
  padding-left: var(--s3);
  border-left: 2px solid var(--orange);
}

.cc-editorial-block__text {
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.cc-editorial-block__list {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-strong);
  list-style: none;
}

.cc-editorial-block__list-item {
  padding-block: var(--s2);
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-display);
  font-weight: 600;
}

.cc-editorial-block__notes {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s2);
}

.cc-editorial-block__note {
  display: grid;
  gap: var(--s1);
  align-content: start;
  padding: var(--s3);
  border-radius: var(--r-md);
  background: var(--sand);
}

.cc-editorial-block__note-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-step-title);
}

@media (min-width: 768px) {
  .cc-editorial-block__notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cc-editorial-block__head {
    grid-column: 1 / span 4;
  }

  .cc-editorial-block__body {
    grid-column: 5 / span 8;
    padding-left: var(--s4);
  }
}
/* EmailForm: Netlify form that collects only the email (plus the partner service on the
   dedicated page). Input and button pills sit side by side when the form is at least
   480px wide and stack below that: it depends on the form's space, not the window,
   because on the Contatti page the form sits in a narrow column. Dark variant inside the
   CtaBlock, light on white. Works without JavaScript. */

.cc-email-form {
  display: grid;
  gap: var(--s2);
  container-type: inline-size;
}

.cc-email-form__row {
  display: grid;
  gap: var(--s2);
}

.cc-email-form__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
}

.cc-email-form__input,
.cc-email-form__select {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--s3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--cream);
  color: var(--eerie-black);
  font-size: var(--fs-body);
}

.cc-email-form__input::placeholder {
  color: var(--text-muted);
}

.cc-email-form__input:focus-visible,
.cc-email-form__select:focus-visible {
  border-color: var(--orange);
}

.cc-email-form__consent {
  display: flex;
  align-items: center;
  gap: var(--s1);
  min-height: 44px;
  font-size: var(--fs-small);
  color: var(--text-muted);
  cursor: pointer;
}

.cc-email-form__checkbox {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--orange);
}

.cc-email-form__consent a {
  color: inherit;
}

/* Dark variant */
.cc-email-form--dark .cc-email-form__input,
.cc-email-form--dark .cc-email-form__select {
  border-color: var(--text-on-dark-muted);
  background: var(--eerie-black);
  color: var(--cream);
}

.cc-email-form--dark .cc-email-form__input::placeholder {
  color: var(--text-on-dark-muted);
}

.cc-email-form--dark .cc-email-form__consent {
  color: var(--text-on-dark-muted);
}

@container (min-width: 480px) {
  .cc-email-form__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
/* Eyebrow: label above section headings. The mono variant, in JetBrains Mono with the
   "// " prefix, is reserved for technical and metaphor labels such as "// Quando ti serve". */

.cc-eyebrow {
  margin-bottom: var(--s2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--surface-accent);
}

.cc-eyebrow--mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
/* FactStrip: one row of short working commitments on the paper background, separated by
   thin rules, used to break two consecutive panels without adding a heavy section.
   Four columns from 1024px, two on tablet and phones. */

.cc-fact-strip__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--gutter);
  padding-block: var(--s4);
  border-block: 1px solid var(--border-strong);
}

.cc-fact-strip__item {
  display: grid;
  gap: var(--s1);
  align-content: start;
}

.cc-fact-strip__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.cc-fact-strip__text {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-muted);
}

@media (min-width: 1024px) {
  .cc-fact-strip__items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cc-fact-strip__item + .cc-fact-strip__item {
    padding-left: var(--s3);
    border-left: 1px solid var(--border-strong);
  }
}
/* FaqList: frequently asked questions as an open section, 4/8. Heading on the left, a
   list of <details> with separators on the right; the answer fades in briefly. */

.cc-faq-list {
  row-gap: var(--s4);
}

.cc-faq-list__head .cc-eyebrow {
  margin-bottom: var(--s2);
}

.cc-faq-list__items {
  border-top: 1px solid var(--border-strong);
}

.cc-faq-list__item {
  border-bottom: 1px solid var(--border-strong);
}

.cc-faq-list__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 44px;
  padding: var(--s3) 0;
  cursor: pointer;
  list-style: none;
}

.cc-faq-list__summary::-webkit-details-marker {
  display: none;
}

.cc-faq-list__question {
  font-weight: 700;
  font-size: var(--fs-lead);
  line-height: 1.35;
  letter-spacing: 0;
}

/* Plus sign that turns into a minus when the question is open. */
.cc-faq-list__icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.cc-faq-list__icon::before,
.cc-faq-list__icon::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 16px;
  height: 2px;
  background: var(--orange);
  transition: opacity var(--d-base) var(--ease);
}

.cc-faq-list__icon::after {
  transform: rotate(90deg);
}

.cc-faq-list__item[open] .cc-faq-list__icon::after {
  opacity: 0;
}

.cc-faq-list__answer {
  max-width: 40em;
  padding-bottom: var(--s3);
}

.cc-faq-list__item[open] .cc-faq-list__answer {
  animation: cc-fade-up var(--d-base) var(--ease);
}

@media (min-width: 1024px) {
  .cc-faq-list__head {
    grid-column: 1 / span 4;
  }

  .cc-faq-list__items {
    grid-column: 5 / span 8;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-faq-list__item[open] .cc-faq-list__answer {
    animation: none;
  }
}
/* Footer: full-width sand background with wordmark, services, contacts and legal. Four
   columns on desktop, two below 900px, one below 480px. Small uppercase column titles
   with an orange dash below. */

.cc-footer {
  padding-block: var(--s6) var(--s4);
  border-top: 1px solid var(--border);
  background: var(--sand);
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.cc-footer__grid {
  display: grid;
  gap: var(--s5) var(--s4);
  align-items: start;
}

.cc-footer__brand {
  display: grid;
  gap: var(--s2);
  justify-items: start;
  max-width: 320px;
}

.cc-footer__wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-footer-wordmark);
  letter-spacing: -0.02em;
  color: var(--orange);
}

.cc-footer__social {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 44px;
  padding: 0 var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--cream);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--eerie-black);
  text-decoration: none;
  transition:
    background-color var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease),
    color var(--d-fast) var(--ease);
}

.cc-footer__social-icon {
  width: 14px;
  height: 14px;
}

.cc-footer__title {
  position: relative;
  margin-bottom: var(--s2);
  padding-bottom: var(--s1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-tag);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eerie-black);
}

.cc-footer__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--s2);
  height: 1px;
  background: var(--orange);
}

.cc-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-footer__link,
.cc-footer__text {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-muted);
  text-decoration: none;
}

.cc-footer__bottom {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
}

@media (hover: hover) {
  .cc-footer__link:hover {
    color: var(--orange-text);
  }

  .cc-footer__social:hover {
    border-color: var(--orange);
    background: var(--orange);
    color: var(--eerie-black);
  }
}

@media (min-width: 480px) {
  .cc-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cc-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .cc-footer {
    padding-top: var(--s7);
  }

  .cc-footer__grid {
    grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  }

  .cc-footer__brand {
    grid-column: auto;
  }
}
/* FrameworkList: on the Metodo page, one block per framework with what it is, how it is
   used in the services and the link to the official source. The name sits on the left
   (4/8). */

.cc-framework-list__head {
  margin-bottom: var(--s5);
}

.cc-framework-list__items {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-strong);
  list-style: none;
}

.cc-framework-list__item {
  row-gap: var(--s3);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--border-strong);
}

.cc-framework-list__name {
  font-size: var(--fs-card-title);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.cc-framework-list__detail {
  display: block;
  margin-top: var(--s1);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  letter-spacing: 0;
  color: var(--text-muted);
}

.cc-framework-list__facts {
  display: grid;
  gap: var(--s3);
}

.cc-framework-list__fact dd {
  max-width: 38em; /* about 68 characters per line */
}

.cc-framework-list__fact dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-tag);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-text);
}

.cc-framework-list__services {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s2);
  margin: var(--s1) 0 0;
  padding: 0;
  list-style: none;
}

.cc-framework-list__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--orange-text);
}

@media (min-width: 1024px) {
  .cc-framework-list__name {
    grid-column: 1 / span 4;
  }

  .cc-framework-list__facts {
    grid-column: 5 / span 7;
  }
}
/* FrameworkRail: the frameworks used by a service, with a link to the Metodo page.
   Heading on column 1 and below it a row
   of cards that bleeds out of the container on the right and scrolls horizontally with
   native scrolling. Only the row scrolls, never the page. On mobile one card and a
   quarter are visible. */

.cc-framework-rail__head {
  display: grid;
  gap: var(--s3);
  justify-items: start;
  margin-bottom: var(--s5);
}

.cc-framework-rail__head .cc-eyebrow {
  margin-bottom: 0;
}

.cc-framework-rail__text {
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-muted);
}

/* Link to the Metodo page, with the same arrow as the other text links. */
.cc-framework-rail__link {
  display: inline-block;
  padding-block: 12px; /* brings the tap target to 44px */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--orange-text);
}

.cc-framework-rail__link::after {
  content: "→";
  display: inline-block;
  margin-left: var(--s1);
  transition: transform var(--d-fast) var(--ease);
}

@media (hover: hover) {
  .cc-framework-rail__link:hover::after {
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-framework-rail__link::after {
    transition: none;
  }
}

/* The row reaches the right edge of the window. */
.cc-framework-rail__track {
  display: flex;
  gap: var(--s2);
  margin: 0 calc(50% - 50vw) 0 0;
  padding: 0 var(--page-margin) var(--s2) 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--border-strong) transparent;
  scrollbar-width: thin;
  list-style: none;
}

.cc-framework-rail__card {
  display: grid;
  flex: 0 0 78%;
  gap: var(--s2);
  align-content: start;
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--cream);
  scroll-snap-align: start;
}

.cc-framework-rail__name {
  font-size: var(--fs-step-title);
}

.cc-framework-rail__detail {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.cc-framework-rail__line {
  font-size: var(--fs-step-text);
  line-height: 1.55;
  color: var(--text-muted);
}

.cc-framework-rail__source {
  align-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--orange-text);
}

@media (min-width: 768px) {
  .cc-framework-rail__track {
    gap: var(--s3);
  }

  .cc-framework-rail__card {
    flex-basis: 340px;
  }
}
/* HeroSplit: opening section of every page. Eyebrow, H1, metaphor tag, lead, entry
   project facts and CTAs on the left; on the right MarblingBars, the symptom panel or a
   side note, aligned to the bottom. Desktop 7/5, one column below 1024px, where the
   buttons take the full width on phones. */

.cc-hero-split {
  row-gap: var(--s5);
}

.cc-hero-split__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
}

.cc-hero-split__content .cc-eyebrow {
  margin-bottom: 0;
}

/* Medical metaphor of the service, right below the H1. */
.cc-hero-split__tag {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-small);
  color: var(--surface-accent);
}

.cc-hero-split__lead {
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--surface-muted);
}

/* Entry project facts: first step, delivery, what comes next. */
.cc-hero-split__facts {
  display: grid;
  gap: var(--s2);
  width: 100%;
  max-width: 40em;
  padding-top: var(--s3);
  border-top: 1px solid var(--surface-line-strong);
}

.cc-hero-split__fact {
  display: grid;
  align-content: start;
}

.cc-hero-split__fact dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-tag);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--surface-muted);
}

.cc-hero-split__fact dd {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-body);
}

.cc-hero-split__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  width: 100%;
  margin-top: var(--s1);
}

.cc-hero-split__actions .cc-button {
  flex: 1 1 100%;
}

.cc-hero-split__aside {
  align-self: end;
}

/* Side note on the right (pages without MarblingBars). */
.cc-hero-split__note {
  display: grid;
  gap: var(--s2);
  padding-left: var(--s3);
  border-left: 2px solid var(--orange);
}

.cc-hero-split__note h2 {
  font-size: var(--fs-h3);
}

/* Page table of contents (Metodo). */
.cc-hero-split__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-hero-split__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--eerie-black);
}

@media (hover: hover) {
  .cc-hero-split__link:hover {
    color: var(--orange-text);
  }
}

@media (min-width: 480px) {
  .cc-hero-split__actions .cc-button {
    flex: 0 0 auto;
  }
}

/* Side by side, each fact as wide as its text and the same gap between all of them.
   When space runs out the last one (the longest, what comes next) wraps first. */
@media (min-width: 768px) {
  .cc-hero-split__facts {
    display: flex;
    column-gap: var(--s5);
  }

  .cc-hero-split__fact {
    flex: 0 1 auto;
  }

  .cc-hero-split__fact:last-child {
    flex-shrink: 10;
  }
}

@media (min-width: 1024px) {
  .cc-hero-split {
    padding-top: var(--s6);
  }

  .cc-hero-split__content {
    grid-column: 1 / span 7;
    align-self: center;
  }

  .cc-hero-split__aside {
    grid-column: 8 / span 5;
  }
}
/* JourneyInline: compact version of the path on service pages, in a black panel. Three
   steps (diagnosis, treatment, periodic checks) joined by a line, with the current page's
   step outlined in orange and the steps already taken in orange. Horizontal from 768px. */

.cc-journey-inline__head {
  margin-bottom: var(--s5);
}

.cc-journey-inline__steps {
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Vertical: the dot sits on the left and the line runs down to the next step. */
.cc-journey-inline__step {
  position: relative;
  display: grid;
  gap: var(--s1);
  align-content: start;
  padding: var(--s3) var(--s3) var(--s3) var(--s6);
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
}

.cc-journey-inline__step::before {
  content: "";
  position: absolute;
  top: calc(var(--s3) + 4px);
  left: var(--s3);
  width: 14px;
  height: 14px;
  border: 2px solid var(--text-on-dark-muted);
  border-radius: var(--r-circle);
}

.cc-journey-inline__step::after {
  content: "";
  position: absolute;
  top: calc(var(--s3) + 26px);
  bottom: calc(4px - 2 * var(--s3)); /* stops 8px before the next dot */
  left: calc(var(--s3) + 6px);
  width: 2px;
  background: var(--text-on-dark-muted);
}

.cc-journey-inline__step:last-child::after {
  content: none;
}

.cc-journey-inline__step--current {
  border-color: var(--orange);
}

.cc-journey-inline__step--current::before,
.cc-journey-inline__step--done::before {
  border-color: var(--orange);
  background: var(--orange);
}

.cc-journey-inline__step--done::after {
  background: var(--orange);
}

.cc-journey-inline__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-tag);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

.cc-journey-inline__name {
  font-size: var(--fs-h3);
}

.cc-journey-inline__text {
  color: var(--text-on-dark-muted);
}

.cc-journey-inline__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
}

.cc-journey-inline__link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--cream);
}

/* Small side note on a single line across the panel; it wraps only on narrow screens. */
.cc-journey-inline__note {
  margin-top: var(--s4);
  font-size: var(--fs-small);
  color: var(--text-on-dark-muted);
}

/* Horizontal: the dot sits on top and the line continues to the right. */
@media (min-width: 768px) {
  .cc-journey-inline__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cc-journey-inline__step {
    padding: var(--s6) var(--s3) var(--s3);
  }

  .cc-journey-inline__step::before {
    top: var(--s3);
  }

  .cc-journey-inline__step::after {
    top: calc(var(--s3) + 6px);
    right: calc(-1 * (var(--s3) + var(--s2))); /* stops 8px before the next dot */
    bottom: auto;
    left: calc(var(--s3) + 22px);
    width: auto;
    height: 2px;
  }
}
/* JourneySticky: the path diagnosis → treatment → periodic checks on the home page. From
   1024px heading and text stay fixed on the left (5/7) while the three phases scroll on
   the right; the line fills with orange as you scroll and the phase being read is at full
   opacity. Without JavaScript or with reduced motion the line is full and every phase
   readable. */

.cc-journey-sticky {
  row-gap: var(--s5);
}

.cc-journey-sticky__intro {
  display: grid;
  gap: var(--s3);
  align-content: start;
}

.cc-journey-sticky__intro .cc-eyebrow {
  margin-bottom: 0;
}

.cc-journey-sticky__track {
  position: relative;
  padding-left: var(--s5);
}

.cc-journey-sticky__line {
  position: absolute;
  top: var(--s1);
  bottom: 0;
  left: 7px; /* centres the 2px line on the 16px dots */
  width: 2px;
  background: var(--border-strong);
}

.cc-journey-sticky__fill {
  position: absolute;
  inset: 0;
  background: var(--orange);
  transform-origin: top;
}

.cc-journey-sticky.is-animated .cc-journey-sticky__fill {
  transform: scaleY(0);
}

.cc-journey-sticky__phases {
  display: grid;
  gap: var(--s6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-journey-sticky__phase {
  position: relative;
  display: grid;
  gap: var(--s2);
  align-content: start;
  transition: opacity var(--d-base) var(--ease);
}

.cc-journey-sticky__phase::before {
  content: "";
  position: absolute;
  top: 6px;
  left: calc(-1 * var(--s5));
  width: 16px;
  height: 16px;
  border: 2px solid var(--orange);
  border-radius: var(--r-circle);
  background: var(--orange);
  transition:
    background-color var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease);
}

.cc-journey-sticky__step {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-text);
}

.cc-journey-sticky__text {
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.cc-journey-sticky__detail {
  max-width: 34em;
  color: var(--text-muted);
}

.cc-journey-sticky__link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--orange-text);
}

/* States set by modules/journey-sticky.js */
.cc-journey-sticky.is-animated .cc-journey-sticky__phase {
  opacity: 0.4;
}

.cc-journey-sticky.is-animated .cc-journey-sticky__phase.is-active {
  opacity: 1;
}

.cc-journey-sticky.is-animated .cc-journey-sticky__phase:not(.is-reached)::before {
  border-color: var(--border-strong);
  background: var(--paper);
}

@media (min-width: 1024px) {
  .cc-journey-sticky__intro {
    position: sticky;
    top: var(--sticky-top);
    grid-column: 1 / span 5;
    align-self: start;
  }

  .cc-journey-sticky__track {
    grid-column: 7 / span 6;
  }

  .cc-journey-sticky__phases {
    gap: 0;
  }

  .cc-journey-sticky__phase {
    min-height: 60vh;
  }

  /* The last phase needs no space after it: the line ends on its text. */
  .cc-journey-sticky__phase:last-child {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-journey-sticky__phase,
  .cc-journey-sticky__phase::before {
    transition: none;
  }
}
/* Legal: privacy and cookie policy in a plain white panel, text on columns 2-9 with a
   maximum width of about 720px. Short paragraphs, each heading close to its own text
   and well apart from the previous section. No dynamic module. */

.cc-legal__content {
  display: grid;
  gap: var(--s2);
  max-width: 720px;
  line-height: 1.65;
}

.cc-legal__updated {
  margin-bottom: var(--s3);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.cc-legal__content h2 {
  margin-top: var(--s5);
  font-size: var(--fs-h3);
}

.cc-legal__content h2 + * {
  margin-top: calc(-1 * var(--s1)); /* 8px between a heading and its text */
}

.cc-legal__list {
  display: grid;
  gap: var(--s1);
  margin: 0;
  padding-left: var(--s3);
  list-style: disc;
}

.cc-legal__list li::marker {
  color: var(--orange-text);
}

.cc-legal__content a {
  color: var(--orange-text);
}

@media (min-width: 1024px) {
  .cc-legal__content {
    grid-column: 2 / span 8;
  }
}
/* MarblingBars: pill-shaped bars with the marbling texture of a service, the only
   photographic element of the site. Each texture stands for the medical metaphor of its
   service. A service usually shows two bars (top and bottom of the same texture); the
   mini variant is a single short pill next to a line of text. In the hero the bars grow
   from the left once, when the page opens. */

.cc-marbling-bars {
  display: grid;
  gap: var(--s2);
}

.cc-marbling-bars__bar {
  display: block;
  height: 64px;
  border-radius: var(--r-pill);
  overflow: hidden;
}

.cc-marbling-bars__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-color: var(--grey-200);
  background-position: center top;
  background-size: cover;
}

.cc-marbling-bars__bar:nth-child(even) .cc-marbling-bars__fill {
  background-position: center bottom;
}

.cc-marbling-bars__fill--assessment {
  background-image: url("/assets/img/marbling-assessment.webp");
}

.cc-marbling-bars__fill--identity {
  background-image: url("/assets/img/marbling-identity.webp");
}

.cc-marbling-bars__fill--devsecops {
  background-image: url("/assets/img/marbling-devsecops.webp");
}

.cc-marbling-bars__fill--iac {
  background-image: url("/assets/img/marbling-iac.webp");
}

.cc-marbling-bars__fill--monitoring {
  background-image: url("/assets/img/marbling-monitoring.webp");
}

/* Small variant, in the service list. */
.cc-marbling-bars--sm {
  gap: var(--s1);
}

.cc-marbling-bars--sm .cc-marbling-bars__bar {
  height: 32px;
}

/* Mini variant: one short pill beside a line of text (hero symptom panel), shorter on
   phones to leave room for the text. */
.cc-marbling-bars--mini .cc-marbling-bars__bar {
  width: var(--s5);
  height: var(--s2);
}

@media (min-width: 768px) {
  .cc-marbling-bars--mini .cc-marbling-bars__bar {
    width: var(--s7);
    height: var(--s3);
  }
}

@media (min-width: 1024px) {
  .cc-marbling-bars--hero .cc-marbling-bars__bar {
    height: 96px;
  }

  .cc-marbling-bars--hero.cc-marbling-bars--mini .cc-marbling-bars__bar {
    height: var(--s3);
  }
}

/* Growth when the hero appears: the texture slides in from the left inside the pill, one
   bar after the other. CSS only, and it always ends on the full state. */
.cc-marbling-bars--hero .cc-marbling-bars__fill {
  animation: cc-marbling-grow var(--d-slow) var(--ease) var(--grow-delay, 0ms) both;
}

.cc-marbling-bars__bar:nth-child(2) {
  --grow-delay: 60ms;
}

@keyframes cc-marbling-grow {
  from {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-marbling-bars--hero .cc-marbling-bars__fill {
    animation: none;
  }
}
/* Navbar: white sticky pill 24px from the top with wordmark and three links. On narrow
   phones, if the items do not fit on one row, the links wrap inside the pill. */

/* A margin equal to top keeps the pill, shifted by sticky, from covering the hero. */
.cc-navbar {
  position: sticky;
  top: var(--s3);
  z-index: 10;
  margin-top: var(--s3);
  display: flex;
  justify-content: center;
  padding-inline: var(--s1); /* on phones the pill uses almost the full width to fit on one row */
  pointer-events: none;
}

.cc-navbar__pill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: var(--s1); /* wordmark to links: tight on phones so everything fits on one row at 360px */
  max-width: 100%;
  padding: var(--s1) var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--cream);
  box-shadow: var(--shadow-navbar);
  pointer-events: auto;
}

/* One step smaller on phones, so the wordmark and the three links fit on one row at 360px. */
.cc-navbar__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-eyebrow);
  letter-spacing: -0.02em;
  color: var(--orange);
  text-decoration: none;
}

/* Blinking cursor: solid block 0.5em wide. */
.cc-navbar__brand::after {
  content: "";
  width: 0.5em;
  height: 1.15em;
  margin-left: 2px; /* the cursor stays attached to the wordmark */
  background: currentColor;
  animation: cc-cursor-blink 1.1s steps(1) infinite;
}

.cc-navbar__list {
  display: flex;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-navbar__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--eerie-black);
  text-decoration: none;
  transition: color var(--d-fast) var(--ease);
}

.cc-navbar__link[aria-current] {
  color: var(--orange-text);
}

@media (hover: hover) {
  .cc-navbar__link:hover {
    color: var(--orange-text);
  }
}

@media (min-width: 480px) {
  .cc-navbar {
    padding-inline: var(--page-margin);
  }

  .cc-navbar__pill {
    column-gap: var(--s4);
    padding: var(--s1) var(--s3);
  }

  .cc-navbar__brand {
    font-size: var(--fs-small);
  }

  .cc-navbar__list {
    gap: var(--s4);
  }
}

@keyframes cc-cursor-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-navbar__brand::after {
    animation: none;
  }
}
/* PartnerList: services delivered by partners, in a sand panel with a quieter tone than
   Christopher's own services. Heading and transparency text on the left, the list with
   separators on the right; each item opens with <details>. Desktop 5/7. */

.cc-partner-list {
  row-gap: var(--s5);
}

.cc-partner-list__intro {
  display: grid;
  gap: var(--s3);
  align-content: start;
  justify-items: start;
}

.cc-partner-list__intro .cc-eyebrow {
  margin-bottom: 0;
}

.cc-partner-list__items {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-strong);
  list-style: none;
}

.cc-partner-list__item {
  border-bottom: 1px solid var(--border-strong);
}

.cc-partner-list__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--s3);
  align-items: center;
  padding: var(--s2) 0;
  cursor: pointer;
  list-style: none;
}

.cc-partner-list__summary::-webkit-details-marker {
  display: none;
}

.cc-partner-list__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lead);
  line-height: 1.3;
}

.cc-partner-list__line {
  grid-column: 1;
  color: var(--text-muted);
}

/* Plus sign that turns into a minus when the item is open. */
.cc-partner-list__icon {
  position: relative;
  grid-row: 1 / span 2;
  grid-column: 2;
  width: 44px;
  height: 44px;
}

.cc-partner-list__icon::before,
.cc-partner-list__icon::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 14px;
  width: 16px;
  height: 2px;
  background: var(--eerie-black);
  transition: opacity var(--d-base) var(--ease);
}

.cc-partner-list__icon::after {
  transform: rotate(90deg);
}

.cc-partner-list__details[open] .cc-partner-list__icon::after {
  opacity: 0;
}

.cc-partner-list__detail {
  max-width: 34em;
  padding: 0 0 var(--s3);
}

.cc-partner-list__details[open] .cc-partner-list__detail {
  animation: cc-fade-up var(--d-base) var(--ease);
}

@media (min-width: 1024px) {
  .cc-partner-list__intro {
    grid-column: 1 / span 5;
  }

  .cc-partner-list__items {
    grid-column: 7 / span 6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-partner-list__details[open] .cc-partner-list__detail {
    animation: none;
  }
}
/* PriceAside: on service pages, "Cosa ricevi" and "Come lavoro" on the left (8/4) and
   the white entry project card with price and CTA on the right, sticky from 1024px. On
   mobile the card comes right after "Cosa ricevi". */

.cc-price-aside {
  row-gap: var(--s6);
}

.cc-price-aside__deliverables,
.cc-price-aside__process {
  display: grid;
  gap: var(--s4);
  align-content: start;
}

.cc-price-aside__list {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-price-aside__list-item {
  position: relative;
  padding-left: var(--s4);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.cc-price-aside__list-item::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: var(--s2);
  height: 2px;
  background: var(--orange);
}

.cc-price-aside__steps {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Entry project card */
.cc-price-aside__card {
  display: grid;
  gap: var(--s2);
  align-content: start;
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--cream);
  box-shadow: var(--shadow-panel);
}

.cc-price-aside__card .cc-eyebrow {
  margin-bottom: 0;
}

.cc-price-aside__name {
  font-size: var(--fs-card-title);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.cc-price-aside__scope {
  color: var(--text-muted);
}

.cc-price-aside__price {
  margin-top: var(--s1);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: -0.02em;
}

.cc-price-aside__note,
.cc-price-aside__delivery {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.cc-price-aside__delivery {
  padding-top: var(--s2);
  border-top: 1px solid var(--border);
  font-weight: 700;
  color: var(--eerie-black);
}

.cc-price-aside__card .cc-button {
  margin-top: var(--s1);
}

@media (min-width: 1024px) {
  .cc-price-aside {
    row-gap: var(--s7);
  }

  .cc-price-aside__deliverables,
  .cc-price-aside__process {
    grid-column: 1 / span 7;
  }

  .cc-price-aside__card {
    position: sticky;
    top: var(--sticky-top);
    grid-column: 9 / span 4;
    grid-row: 1 / span 2;
    align-self: start;
    padding: var(--s5) var(--s4);
  }
}
/* RemediationLevels: the three Remediation levels on the Cloud Security Assessment page,
   in a white panel 4/4/4. Each level includes the previous one: the three-segment bar
   shows it by filling one segment per level. */

.cc-remediation-levels {
  row-gap: var(--s5);
}

.cc-remediation-levels__head {
  display: grid;
  gap: var(--s3);
}

.cc-remediation-levels__head .cc-eyebrow {
  margin-bottom: 0;
}

.cc-remediation-levels__tag {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-small);
  color: var(--orange-text);
}

.cc-remediation-levels__intro {
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-muted);
}

.cc-remediation-levels__list {
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-remediation-levels__level {
  display: grid;
  gap: var(--s1);
  align-content: start;
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.cc-remediation-levels__meter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px; /* thin gap between the bar segments */
  margin-bottom: var(--s2);
}

.cc-remediation-levels__segment {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--grey-200);
}

.cc-remediation-levels__segment--on {
  background: var(--orange);
}

.cc-remediation-levels__index {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-tag);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-text);
}

.cc-remediation-levels__text {
  color: var(--text-muted);
}

.cc-remediation-levels__note {
  font-size: var(--fs-small);
  font-weight: 700;
}

@media (min-width: 1024px) {
  .cc-remediation-levels__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Reveal: elements with data-reveal appear the first time they enter the screen (opacity
   and a 16px shift). The initial state applies only with the js class on <html>: without
   JavaScript the content is already visible. The data-reveal value (1-4) sets the order
   of the cascade, 60ms apart. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--d-base) var(--ease) var(--reveal-delay, 0ms),
    transform var(--d-base) var(--ease) var(--reveal-delay, 0ms);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

[data-reveal="2"] {
  --reveal-delay: 60ms;
}

[data-reveal="3"] {
  --reveal-delay: 120ms;
}

[data-reveal="4"] {
  --reveal-delay: 180ms;
}

@media (min-width: 1024px) {
  .js [data-reveal] {
    transition-duration: var(--d-slow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ServiceLinks: closing block of the Metodo page, a row of four light cards, one per
   service, each with a text link to its page. Four columns from 1024px, two from 600px,
   one on phones. */

.cc-service-links > .cc-eyebrow {
  margin-bottom: var(--s4);
}

.cc-service-links__items {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-service-links__card {
  display: grid;
  grid-template-rows: auto auto 1fr auto; /* links aligned at the bottom of every card */
  gap: var(--s1);
  padding: var(--s4) var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--cream);
}

.cc-service-links__metaphor {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-small);
  color: var(--orange-text);
}

.cc-service-links__name {
  font-size: var(--fs-step-title);
  line-height: 1.2;
}

.cc-service-links__entry {
  font-size: var(--fs-step-text);
  line-height: 1.55;
  color: var(--text-muted);
}

/* Text link with the same arrow as the other links of the site. */
.cc-service-links__link {
  justify-self: start;
  display: inline-block;
  margin-top: var(--s2);
  padding-block: 12px; /* brings the tap target to 44px */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--orange-text);
}

/* Only the label is underlined. The arrow is plain text after a non-breaking space, so it
   never wraps alone onto a new line; being inline it moves with relative positioning. */
.cc-service-links__link {
  text-decoration: none;
}

.cc-service-links__label {
  text-decoration: underline;
}

.cc-service-links__arrow {
  position: relative;
  left: 0;
  margin-left: 2px;
  transition: left var(--d-fast) var(--ease);
}

@media (hover: hover) {
  .cc-service-links__link:hover .cc-service-links__arrow {
    left: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-service-links__arrow {
    transition: none;
  }
}

@media (min-width: 600px) {
  .cc-service-links__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cc-service-links__items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ServiceList: the four services in the black panel of the home page, all visible at once.
   Each row: texture and medical metaphor, name and description, first step and link.
   Desktop 3/5/4 on the 12-column grid; on tablet the texture row sits on top and the
   facts beside the description; on phones everything stacks. */

.cc-service-list__head {
  display: grid;
  gap: var(--s3);
  margin-bottom: var(--s5);
}

.cc-service-list__head .cc-eyebrow {
  margin-bottom: 0;
}

/* The heading sits on two lines with the shorter one first: this width fits the second
   line, and the non-breaking spaces in the title keep the break after the first clause. */
.cc-service-list__head h2 {
  max-width: 15em;
}

.cc-service-list__intro {
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-on-dark-muted);
}

.cc-service-list__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-service-list__item {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: var(--s3) var(--gutter);
  padding-block: var(--s5);
  border-top: 1px solid var(--text-on-dark-muted);
}

.cc-service-list__item > * {
  grid-column: 1 / -1;
}

.cc-service-list__visual {
  display: grid;
  gap: var(--s2);
  align-content: start;
}

.cc-service-list__visual .cc-marbling-bars {
  max-width: 280px;
}

.cc-service-list__metaphor {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-small);
  color: var(--surface-accent);
}

.cc-service-list__body {
  display: grid;
  gap: var(--s2);
  align-content: start;
}

.cc-service-list__name {
  font-size: var(--fs-card-title);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.cc-service-list__description {
  max-width: 34em;
  line-height: 1.6;
}

.cc-service-list__aside {
  display: grid;
  gap: var(--s3);
  align-content: start;
}

.cc-service-list__facts {
  display: grid;
  gap: var(--s2);
}

.cc-service-list__fact dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-tag);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

.cc-service-list__fact dd {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .cc-service-list__aside {
    justify-items: start;
  }

  .cc-service-list__visual {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  .cc-service-list__body {
    grid-column: 1 / span 5;
  }

  .cc-service-list__aside {
    grid-column: 6 / -1;
  }
}

@media (min-width: 1024px) {
  .cc-service-list__visual {
    grid-template-columns: none;
    grid-column: 1 / span 3;
  }

  .cc-service-list__body {
    grid-column: 4 / span 5;
  }

  .cc-service-list__aside {
    grid-column: 9 / -1;
  }
}
/* StepCard: one step of "Come lavoro", with a thin border, "Step 01" eyebrow, heading and
   short text. Used as a column inside the PriceAside. */

.cc-step-card {
  display: grid;
  gap: var(--s1);
  align-content: start; /* in a row of cards of equal height the content stays at the top */
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--cream);
}

.cc-step-card__index {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-text);
}

.cc-step-card__title {
  font-size: var(--fs-step-title);
}

.cc-step-card__text {
  font-size: var(--fs-step-text);
  line-height: 1.55;
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .cc-step-card {
    padding: var(--s4);
  }
}

/* Once the list is on screen the steps light up in orange one at a time, in a loop:
   each card has a third of the cycle. */
.is-revealed .cc-step-card {
  animation: cc-step-blink 9s ease-in-out infinite both;
}

.is-revealed .cc-step-card:nth-child(2) {
  animation-delay: 3s;
}

.is-revealed .cc-step-card:nth-child(3) {
  animation-delay: 6s;
}

/* About 1.3 s to light up, a moment lit, 1.3 s to fade out. */
@keyframes cc-step-blink {
  15%,
  20% {
    border-color: var(--orange);
    background: var(--orange-soft);
  }

  33% {
    border-color: var(--border);
    background: var(--cream);
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-revealed .cc-step-card {
    animation: none;
  }
}
/* SymptomPanel: white card in the home hero with the "symptoms" that call for a check-up.
   Each row pairs the marbling texture of the service that treats the symptom with the
   symptom itself and a link to that service. The mini pills grow one after the other
   when the page opens. */

.cc-symptom-panel {
  display: grid;
  gap: var(--s2);
  padding: var(--s4) var(--s2);
  border-radius: var(--r-md);
  background: var(--cream);
  box-shadow: var(--shadow-panel);
}

.cc-symptom-panel .cc-eyebrow {
  margin-bottom: 0;
}

.cc-symptom-panel__title {
  font-size: var(--fs-h3);
}

.cc-symptom-panel__list {
  margin: var(--s1) 0 0;
  padding: 0;
  list-style: none;
}

.cc-symptom-panel__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s2);
  align-items: start;
  padding-block: var(--s2);
  border-top: 1px solid var(--border);
}

/* The pill lines up with the first line of the symptom. */
.cc-symptom-panel__item .cc-marbling-bars {
  padding-top: 2px;
}

.cc-symptom-panel__item:nth-child(2) {
  --grow-delay: 60ms;
}

.cc-symptom-panel__item:nth-child(3) {
  --grow-delay: 120ms;
}

.cc-symptom-panel__item:nth-child(4) {
  --grow-delay: 180ms;
}

.cc-symptom-panel__text {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.4;
}

/* Inline block so the arrow stays after the last word when the name wraps; the vertical
   padding brings the tap target to 44px. */
.cc-symptom-panel__link {
  display: inline-block;
  padding-block: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--orange-text);
}

.cc-symptom-panel__link::after {
  content: "→";
  display: inline-block;
  margin-left: var(--s1);
  transition: transform var(--d-fast) var(--ease);
}

@media (hover: hover) {
  .cc-symptom-panel__link:hover::after {
    transform: translateX(4px);
  }
}

@media (min-width: 768px) {
  .cc-symptom-panel {
    padding: var(--s5) var(--s4);
  }

  .cc-symptom-panel__item {
    gap: var(--s3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-symptom-panel__link::after {
    transition: none;
  }
}
/* Thanks: confirmation page after a form is sent, in a plain white panel. Everything is
   centred: a small status line with the green check mark, the heading, one line and the
   button to the Metodo page. */

.cc-thanks__content {
  display: grid;
  gap: var(--s3);
  justify-items: center;
  grid-column: 1 / -1;
  padding-block: var(--s5);
  text-align: center;
}

.cc-thanks__status {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cc-thanks__check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-circle);
  background: var(--success);
  color: var(--eerie-black);
}

.cc-thanks__check svg {
  width: 14px;
  height: 14px;
}

.cc-thanks__text {
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-muted);
}

/* Helper classes used on several pages: screen-reader-only text and the
   "Vai al contenuto" link that appears when it receives keyboard focus. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cc-skip-link {
  position: absolute;
  top: var(--s2);
  left: var(--s2);
  z-index: 20;
  padding: var(--s1) var(--s2);
  border-radius: var(--r-pill);
  background: var(--eerie-black);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  transform: translateY(-200%);
}

.cc-skip-link:focus-visible {
  transform: none;
}