/* Definnisco uno stile per le didascalie inserite dai moduli "immagine" */
  figcaption {
    margin-top: 1rem;
    font-size: 85%;
    line-height: 1.5;
    color: var(--color-primary);
    opacity: .8;
  }

  @media (min-width: 64em) {
    .c-editorial__maxi-figure figcaption {
      grid-column: 1/-6;
    }
  }

  /* Aumento la spaziatura tra i punti elenco nei contenuti di testo editoriali */
  .c-editorial__text li {
    margin-bottom: .5em;
  }

  /* Aumento la spaziatura tra i p e gli h2 nei contenuti di testo editoriali */
  .c-editorial__text p+h2 {
    margin-top: 5rem;
  }

  /* Aumento la spaziatura tra i p e gli h3 nei contenuti di testo editoriali */
  .c-editorial__text p+h3 {
    margin-top: 3rem;
  }

  /* Aumento la spaziatura tra gli h2 e gli h3 nei contenuti di testo editoriali */
  .c-editorial__text h2+h3 {
    margin-top: 3rem;
  }

  /* Aumento la spaziatura sopra gli h4 e gli h5 nei contenuti di testo editoriali */
  .c-editorial__text h4 {
    margin-top: 3rem;
  }

  .c-editorial__text h5 {
    margin-top: 2rem;
  }

  /* Aumento la spaziatura tra gli hr e gli h3 nei contenuti di testo editoriali */
  .c-editorial__text hr+h3 {
    margin-top: 3rem;
  }

  /* Aumento la spaziatura tra gli h3 e gli h6 nei contenuti di testo editoriali */
  .c-editorial__text h3+h6 {
    margin-top: 3rem;
  }

  /* Aumento la spaziatura tra gli h6 nei contenuti di testo editoriali */
  .c-editorial__text h6+h6 {
    margin-top: 1rem;
  }

  /* modifico la spaziatura verticale per i h* destinazioni di anchor link nei contenuti di testo editoriali */
  .c-editorial__text .anchored-h2 {
    padding-top: 5rem;
    margin-top: -5rem;
  }

  .c-editorial__text .anchored-h4 {
    padding-top: 5rem;
    margin-top: -2rem;
  }

  /* Definisco uno stile per ridurre il peso di porzioni di titoli  */
  span.title-light {
    font-weight: normal;
  }

  /* Definisco gli stili per le tabelle "Agenda" nei contenuti di testo editoriali  */
  table.agenda td {
    vertical-align: baseline;
  }

  table.agenda td.header {
    vertical-align: middle;
  }

  table.agenda h5 {
    margin: .5rem 0;
  }

  table.agenda .regular {
    font-weight: 400;
  }

  table.agenda p {
    margin: 1rem 0;
  }

  table.agenda p+p {
    margin: 0.5rem 0;
  }

  /* correggo l'aspetto del drop down menu di navigazione  */
  @media (min-width: 64em) {
    .c-nav__sublist {
      left: 0.25rem;
      min-width: 10rem;
      border-top: 1px solid #009ec4;
    }
  }

  /* definisco uno stile CTA secondario (usato ad esempio in pagina Work&Life (Careers)) */
  .c-cta-secondary {
    background: none;
    border: 2px solid var(--color-link);
  }

  .t--light a.c-cta.c-cta-secondary {
    color: var(--color-link);
  }

  .t--dark a.c-cta.c-cta-secondary {
    color: var(--color-text);
  }

  .t--light a.c-cta-secondary:hover,
  .t--dark a.c-cta-secondary:hover {
    color: #fff;
    background-color: #0082a1;
    border: 2px solid #0082a1;
  }

  /* definisco uno stile CTA "full-width" solo per schermi mobile inferiori a 640px  */
  @media (max-width: 767px) {
    .c-cta-mobile-full-width {
      display: block;
      text-align: center;
    }
  }

  /* BANNER con CTA (usato ad esempio in pagina Home, Work&Life (Careers) e News) */
  .CTA-banner {
    background-color: rgb(0 158 196 / 15%);
    padding: 1rem 0 2.5rem 0;
  }

  .CTA-banner .o-cols {
    gap: 1rem;
  }

  .CTA-banner .o-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .CTA-banner h4 {
    margin: 0 0 1.5rem 0;
  }

  .CTA-banner figure {
    margin: 0;
  }

  .CTA-banner image {
    width: 100%;
  }

  @media (min-width: 48em) {
    .CTA-banner {
      padding: .5rem;
    }

    .CTA-banner .o-col--double {
      align-items: start;
      padding: 1rem;
    }
  }

  /* Sovrappongo il BANNER con CTA all'immagine Large che lo precede */
  /* Non piace ad Andrea, lo cambio con lo stile che segue */
  @media (min-width: 768px) {

    .page-homepage .__o-wrapper.CTA-banner,
    .page-careers .__o-wrapper.CTA-banner {
      margin-top: -10rem;
      padding: 1rem;
      background-color: #fff;
      /* box-shadow: rgba(0,44,54,.2) 0 1rem 6rem -3rem; */
    }
  }

  /* Sovrappongo il BANNER con CTA all'immagine Large che lo precede */
  @media (min-width: 768px) {

    .page-homepage .__o-wrapper.CTA-banner,
    .page-careers .__o-wrapper.CTA-banner {
      margin: -15rem -13rem 0 21rem;
      padding: 3rem 0 0 2rem;
      background-color: #fff;
    }

    .page-homepage .CTA-banner .o-col,
    .page-careers .CTA-banner .o-col {
      justify-content: flex-start;
    }

    .page-homepage .CTA-banner .o-col--double,
    .page-careers .CTA-banner .o-col--double {
      flex: 5;
    }
  }

  /* Definisco uno stile per i blocchi di "Testo Formattato" su sfondo colorato (usati ad esempio nelle news eventi) */
  .niew-boxed-text {
    background-color: rgb(0 158 196 / 15%);
    padding: 2rem;
  }

  /* Definisco uno stile per il filetto separatore che spezza il flusso */
  hr.clear {
    clear: both;
  }

  /* Definisco uno stile per il filetto separatore chiaro */
  hr.light-hr {
    border: 0;
    height: 1px;
    background: #ddd;
    margin: 0.5em 0;
  }

  /* ************************************************************************************************************ */
  /* ************************************************ TEMA SCURO ************************************************ */
  /* ************************************************************************************************************ */
  /* Riduco il contrasto dei paragrafi di testo e dei punti elenco sul tema scuro */
  .t--dark p,
  .t--dark li {
    color: rgba(255, 255, 255, .75);
  }

  .t--dark strong {
    color: var(--color-text);
  }

  /* Definisco lo stile del filetto separatore su tema scuro */
  .t--dark hr {
    color: var(--color-link);
    margin: 3rem 0 4rem 0;
  }

  /* Modifico il colore delle card Team in Homepage e su tema scuro */
  .c-team-highlights__card-block {
    background-color: var(--color-background);
    background: radial-gradient(circle, rgba(0, 69, 87, 1) 0%, rgba(0, 44, 54, 1) 100%);
  }

  .t--dark .page-team-index .c-team__content,
  .t--dark .c-team-highlights .c-team__content {
    color: #fff;
    background: rgba(0, 0, 0, .3);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: none;
  }

  .t--dark .page-team-index .c-team__role,
  .t--dark .c-team-highlights .c-team__role {
    color: #fff;
  }

  .t--dark .page-team-index .c-team__thumb,
  .t--dark .c-team-highlights .c-team__thumb {
    background: #93b5bd;
    background: rgb(255 255 255 / 10%);
  }

  /* ************************************************************************************************************ */
  /* ************************************************ PAGE or SECTION SPECIFIC ********************************** */
  /* ************************************************************************************************************ */
  /* ——— START SECTION Header ———————————————————————————————————————————————————————————————————————————————————— */
  /* Correggo la posizione del pixel */
  .c-nav__item.is-active:before {
    transform: translate(0, 10%);
  }

  /* ——— END SECTION Header —————————————————————————————————————————————————————————————————————————————————————— */
  /* ——— START SECTION Footer ———————————————————————————————————————————————————————————————————————————————————— */
  /* Correggo la posizione del pixel */
  .c-footer__language.is-active:before {
    transform: translateY(-100%);
  }

  /* Modifico i colori per rendere il tema chiaro */
  .c-footer.c-footer--black {
    background: rgba(0, 72, 90, .2);
    border-top: 1px solid rgba(0, 72, 90, .1);
    color: rgba(0, 0, 0, .8);
  }

  .c-footer__nav-link {
    color: rgba(0, 0, 0, .8);
  }

  .c-footer__nav-sublist {
    border-left-color: rgba(0, 0, 0, .2);
  }

  .c-footer__nav-sublist a {
    color: rgba(0, 0, 0, .6);
  }

  .c-footer__language {
    color: rgba(0, 0, 0, .8);
  }

  .c-footer__social img {
    filter: brightness(0.4);
    mix-blend-mode: color-burn;
  }

  .c-footer__social:hover img {
    filter: brightness(0.2);
  }

  /* ——— END SECTION Footer —————————————————————————————————————————————————————————————————————————————————————— */
  /* ——— START SECTION "Client" e "Awards" ——————————————————————————————————————————————————————————————————————— */
  /* Modifico il colore delle immagini logo delle sezioni "Client" e "Awards" */
  img.c-showreel__img {
    filter: invert(0.9) sepia(1) saturate(400%) hue-rotate(180deg);
  }

  /* Correggo il peso del link in basso a sinistra */
  .c-showreel__clients {
    font-weight: 600;
  }

  /* ——— ENS SECTION "Client" e "Awards" ——————————————————————————————————————————————————————————————————————— */
  /* ——— START PAGE Home ———————————————————————————————————————————————————————————————————————————————————————— */
  /* Modifico i colori per rendere il tema chiaro */
  .page-homepage .c-hero {
    background: none;
  }

  .page-homepage .c-hero:before {
    background: linear-gradient(90deg, #fff, #fff 5%, transparent, #fff 95%, #fff);
  }

  .page-homepage .c-hero:after {
    background: linear-gradient(0deg, #ffffff 5%, transparent 95%), linear-gradient(180deg, #fff, transparent);
  }

  .page-homepage .c-hero:after {
    background: linear-gradient(0deg, #ffffff 0%, transparent 95%);
  }

  .page-homepage .c-hero__text strong {
    color: #000;
  }

  /* Modifico la spaziatura di varie sezioni */
  .page-homepage .o-module--internal-xl {
    padding-top: 0;
    padding-bottom: 7rem;
  }

  .page-homepage .c-editorial__maxi-figure {
    margin-top: 3.5rem;
  }

  .page-homepage .c-related-news {
    background: none;
  }

  /* Modifico spaziatura e bordi della sezione team-highlights */
  .page-homepage .c-team-highlights {
    margin-top: 2.5rem;
    border-top: 1px solid rgba(0, 72, 90, .4);
    border-bottom: 1px solid rgba(0, 72, 90, .4);
  }

  .page-homepage .c-team-highlights__card-block {
    background: rgba(0, 72, 90, .2);
  }

  /* ——— END PAGE Home —————————————————————————————————————————————————————————————————————————————————————————— */
  /* *** START PAGE Offering + Portfolio ————————————————————————————————————————————————————————————————————————— */
  /* Definisco uno stile per il testo del modulo "Split" della pagina "Offering" */
  @media (min-width: 64em) {
    .page-offering .c-editorial--split-img {
      perspective: 120rem;
    }

    .page-offering .c-editorial--split-img .c-editorial__img {
      grid-column: 2/6;
      transition: all 0.3s ease-out;
    }

    .page-offering .c-editorial--split-img:hover .c-editorial__img {
      transform: rotateY(20deg) rotateX(10deg) scale(1.1);
      box-shadow: rgba(0, 0, 0, 0.2) 0 2rem 4rem -1rem;
    }

    .page-offering .c-editorial--split-img+.c-editorial {
      margin-top: 4rem;
      perspective: 80rem;
    }

    .page-offering .c-editorial--split-img .c-editorial__content {
      grid-column: 6/-2;
      background: rgba(0, 72, 90, 0.2);
      padding: 2rem;
      /* color: #fff; */
    }
  }

  /* Definisco uno stile per i titoli h2 con sfondo immagine del modulo "Custom" della pagina "Offering" */
  .c-editorial.hero-title {
    padding: 30vh 0 4rem 0;
    color: #fff;
    background-position: center;
    background-size: cover;
  }

  @media (max-width: 1023px) {
    .c-editorial.hero-title {
      margin: 0 -1rem;
      padding: 32vh 1rem 2.5rem 1rem;
    }
  }

  /* ****** IMMAGINI PLACEHOLEDER TEMPORANEE ****** */
  .c-editorial.hero-title.markets {
    background-image:
      linear-gradient(20deg,
        rgba(0, 0, 0, 0.4),
        rgba(0, 0, 0, 0)),
      url(https://media.istockphoto.com/id/485967825/photo/modern-glass-office-architectur.jpg?s=612x612&w=0&k=20&c=z7nPFUG6m_RYu5IjytKdpA7z4inevqO3l9VT8VO3rUo=
);
  }

  .c-editorial.hero-title.services {
    margin-top: 4rem;
    background-image:
      linear-gradient(20deg,
        rgba(0, 0, 0, 0.8),
        rgba(0, 0, 0, 0)),
      url(https://grubstreetauthor.co.uk/wp-content/uploads/2020/02/london-business-meeting-in-progress.jpg
);
  }

  .c-editorial.hero-title.howcanwehelp {
    margin-top: 4rem;
    background-image:
      linear-gradient(20deg,
        rgba(0, 0, 0, 0.8),
        rgba(0, 0, 0, 0)),
      url(/assets/Page-Specific/Offering/Firefly_wireframinghigh-level-design-with-glass-wall-cluttered-with-sticky-notes-.-without-humans_photowide_anglebacklighting_25631_2023-04-03-131228_tvml.jpg
);
  }

  /* *** END PAGE Offering ——————————————————————————————————————————————————————————————————————————— */
  /* ——— START PAGE Team —————————————————————————————————————————————————————————————————————————————— */
  /* Modifico il posizionamento della foto e link social nelle card "Advisor" nella pagina "Team" */
  ul.c-advisor__list {
    padding: 0;
  }

  @media (min-width: 64rem) {
    .c-advisor {
      grid-template-columns: repeat(12, 1fr);
      display: grid;
      grid-column-gap: 2rem;
      -moz-column-gap: 2rem;
      column-gap: 2rem;
    }

    ul.c-advisor__list {
      grid-column: 2/-2;
    }

    li.c-advisor__content {
      margin-top: 2rem;
      margin-left: 2rem;
      grid-template-columns: repeat(8, 1fr);
      position: relative;
    }

    .c-advisor__thumb {
      margin-top: -2rem;
      margin-left: -2rem;
      padding: 0;
      box-shadow: 0 12px 32px -8px rgba(26, 26, 26, .24);
      height: fit-content;
      width: fit-content;
    }

    ul.c-advisor__socials {
      position: absolute;
      top: 1rem;
      margin: 0;
      right: 1rem;
    }
  }

  /* ——— END PAGE Team ———————————————————————————————————————————————————————————————————————————————— */
  /* ——— START PAGE "Service" Our Approach, Making, Moving, Evolving ——————————————————————————————————— */
  /* Distanzio il titolo "We Design And Deliver" della pagine "Service" Making, Moving, Evolving */
  .c-service-media__title {
    margin-bottom: 6em;
  }

  /* Ripristino il colore scuro dei testi delle pagine "Services", sezione "We design and deliver" */
  .c-service-media p {
    color: var(--color-text);
  }

  /* Correggo posizionamento infografica in pagina "Our Approach" */
  @media (min-width: 64em) {
    .c-hero-services__content-container #c-infographic {
      left: 30%;
      top: -5%;
    }
  }

  /* ——— END PAGE "Service" Our Approach, Making, Moving, Evolving —————————————————————————————————————— */
  /* ——— START PAGE Careers ————————————————————————————————————————————————————————————————————————————— */
  /* TAG "La nostra cultura" usati in pagina Careers */
  .culture-tag-gg {
    margin: 0;
    padding: 0;
  }

  .culture-tag-gg li {
    display: inline-block;
    margin: 0 0.25rem 0.25rem 0;
    padding: 0.25rem 1rem;
    background-color: #eaf6f9;
  }

  .t--dark .culture-tag-gg li {
    background-color: #00657D;
  }

  /* ——— END PAGE Careers ———————————————————————————————————————————————————————————————————————————————— */
  /* ——— START PAGE "Job Opening" Business Consultant e Design Consultant ———————————————————————————————— */
  /* TAG usati in pagine Business Consultant e Design Consultant */
  .job-opening {
    margin-top: 0;
    margin-bottom: 4rem;
  }

  .job-opening .c-tag {
    --tagColor: #00485a
  }

  .job-opening .job-tag {
    font-weight: normal;
    color: rgba(255, 255, 255, .75);
  }

  /* ——— END PAGE "Job Opening" Business Consultant e Design Consultant —————————————————————————————————— */






  /* START ************************************************ ATTENZIONE HACK *************************************** */
  /* Nelle pagine "Services" per abilitare la lightbox di visualizzazione video  */
  /* almeno un blocco "Testo e Media" deve essere abilitato */
  /* ma quando è abilitato occupa spazio anche se il corpo testo è vuoto  */
  /* e il campo "Titolo" non può essere lasciato vuoto  */
  /* Quindi: nascondo l'elemento via CSS  */
  .c-service-media__block-container HACKDISABILITATO {
    display: none;
  }
  /* ************************************************ ATTENZIONE HACK ****************************************** END */








  /* START ************************************************ PLAYBOOK *************************************** */

  .page-playbook.o-wrapper {
    display: grid;
  }

  .page-playbook.o-wrapper .c-splash {
    grid-row: 1;
  }

  .page-playbook.o-wrapper #j-inner-menu {
    grid-row: 2;
  }

  .page-playbook.o-wrapper .o-module--bottom-xl {
    grid-row: 3;
  }

  .page-playbook.o-wrapper .c-editorial {
    grid-column: -1;
  }

  .page-playbook.o-wrapper .c-editorial__text,
  .page-playbook.o-wrapper .c-editorial__video {
    grid-column: 1 / -1;
  }

  .page-playbook .c-splash__square {
    display: none;
  }

  @media (min-width: 64em) {
    .page-playbook.o-wrapper {
      grid-template-columns: 16rem 1fr;
      grid-template-rows: auto auto;
      column-gap: 2rem;
    }

    .page-playbook.o-wrapper .c-splash {
      grid-column: 2;
    }

    .page-playbook.o-wrapper .o-module--bottom-xl {
      grid-column: 2;
      grid-row: 2;
    }

    .page-playbook.o-wrapper #j-inner-menu {
      grid-column: 1;
      grid-row: 1 / -1;
      align-self: flex-start;
    }

    .page-playbook.o-wrapper .c-editorial__text,
    .page-playbook.o-wrapper .c-editorial__video {
      grid-column: 2 / -1;
    }
  }

  /* Posiziono temporaneamente il menù di navigazione laterale  */
  nav#j-inner-menu {
    margin-bottom: 4rem;
  }

  nav#j-inner-menu ul {
    list-style: none;
    padding-bottom: 1rem;
  }

  ul.c-inner-menu {
    padding: 0;
    margin: 0;
  }

  @media (min-width: 64em) {
    nav#j-inner-menu {
      margin: 10.5rem 0 7.5rem;
      position: sticky;
      top: 5rem;
    }
  }

  ul.c-inner-menu [data-heading=h2] {
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    column-gap: 0;
    min-height: 2.25rem;
}

  ul.c-inner-menu [data-heading=h2]>.c-inner-menu--nested {
    margin: 0 -2rem 0 0.5rem;
  }

  ul.c-inner-menu [data-heading=h2] a {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    color: #002C36;
    letter-spacing: .075rem;
    line-height: 1.25rem;
    text-decoration: none;
    padding: 0.5rem 0 0 0;
    display: block;
    /* background: rgba(0,0,0,.1); */
  }

  ul.c-inner-menu [data-heading=h2] a:hover {
    color: var(--color-link);
  }

  ul.c-inner-menu [data-heading=h3] {
    line-height: 1.5rem;
    margin: 0.5rem 0 0 0;
  }

  ul.c-inner-menu [data-heading=h4] {
    line-height: .5rem;
    margin: 0.5rem 0 0 0;
  }

  ul.c-inner-menu [data-heading=h3] a {
    /* color: #00485A; */
    letter-spacing: .025rem;
    text-transform: unset;
    padding: 0;
  }

  ul.c-inner-menu [data-heading=h4] a {
    /* font-size: 1rem; */
    /* line-height: 1.5rem; */
    font-weight: 400;
    color: #00657D;
  }

  ul ul ul.c-inner-menu.c-inner-menu--nested {
    margin: 0 0 0.75rem 0.5rem;
  }

  .c-inner-menu--nested {
    display: none;
  }

  .c-inner-menu--nested.is-active {
    display: block;
  }

  .c-inner-menu--nested.is-active .c-inner-menu--nested {
    display: block;
  }

  .c-inner-menu__toggle {
    cursor: pointer;
    line-height: 1;
    user-select: none;
  }

  .c-inner-menu__toggle svg {
    pointer-events: none;
  }

  .c-inner-menu__toggle.is-active {
    transform: rotate(180deg);
  }



  #j-inner-menu__title {
    display: block;
    color: #00485A;
    font-weight: 700;
    font-size: 1.25rem;
    margin: 1.5rem 0 0.75rem;
    letter-spacing: 1px;
  }

  .page-playbook .c-editorial .anchor-offset {
    padding-top: 5rem;
    margin-top: -5rem;
  }

  /* Ripristino la spaziatura tra i p e gli h2 nei contenuti di testo editoriali azzerata da .anchor-offset */
  .c-editorial__text .page-playbook .c-editorial p+h2.anchor-offset {
    margin-top: 0;
  }

  /* Ripristino la spaziatura tra gli h2 e gli h3 nei contenuti di testo editoriali azzerata da .anchor-offset */
  .page-playbook .c-editorial .c-editorial__text h2+h3.anchor-offset {
    margin-top: -2rem;
  }

  /* Ripristino la spaziatura sopra gli h4 e gli h5 nei contenuti di testo editoriali azzerata da .anchor-offset */
  .page-playbook .c-editorial .c-editorial__text h4.anchor-offset {
    margin-top: -2rem;
  }

  .page-playbook .c-editorial .c-editorial__text h5.anchor-offset {
    margin-top: -3rem;
  }

  /* Ripristino la spaziatura tra gli hr e gli h3 nei contenuti di testo editoriali azzerata da .anchor-offset */
  .page-playbook .c-editorial .c-editorial__text h3+h3.anchor-offset {
    margin-top: -2rem;
  }

  /* Ripristino la spaziatura tra gli h3 e gli h6 nei contenuti di testo editoriali  azzerata da .anchor-offset */
  .page-playbook .c-editorial .c-editorial__text h3+h6.anchor-offset {
    margin-top: -2rem;
  }

  /* Ripristino la spaziatura tra gli h6 nei contenuti di testo editoriali azzerata da .anchor-offset */
  .page-playbook .c-editorial .c-editorial__text h6+h6.anchor-offset {
    margin-top: -4rem;
  }

  /* Ripristino la spaziatura tra i p e gli h3 nei contenuti di testo editoriali azzerata da .anchor-offset */
  .page-playbook .c-editorial .c-editorial__text p+h3.anchor-offset {
    margin-top: -2rem;
  }

  /* ************************************************ PLAYBOOK ****************************************** END */