/* ========== PALETTE CRAINOX ============================== */
:root{
  --arc-size : clamp(420px, 55vmin, 720px);   /* diametro cerchio   */
--arc-off-x: calc(var(--arc-size) * .45);   /* quanto esce a dx   */
--arc-off-y: calc(var(--arc-size) * .35);   /* quanto esce in alto*/
  --gap-min: 2rem;
  --radius-card: 24px;
  --shadow-base: 0 8px 24px rgba(0,0,0,.04);
  --shadow-hover: 0 12px 28px rgba(0,0,0,.06);
  --gap-solutions: clamp(2rem, 3vw, 3rem);
  --gap:clamp(2rem,5vw,3rem);
  --cs-gap      : clamp(3rem, 6vw, 5rem);
  --cs-shadow   : 0 12px 24px -8px rgba(0,0,0,.12);          /* ombra più “fluttuante” */
  --cs-radius   : 24px;
}

/* ===================================================
   single-sector.css – Stili specifici per template CPT “Settore”
   =================================================== */

/* === HERO “SERVICES” ======================================= */
.hero--services {                 /* altezza più compatta dell’hero standard */
  height: 90dvh;                   /* 60 % viewport */
  min-height: 460px;              /* fallback desktop */
  position:relative;
  overflow:hidden;
}

.hero-content-sector h1{color:var(--cl-ivory);}
/* full‑bleed image (assicuriamoci che stia dietro) */
.hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}

/* overlay duotone brand */
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(135deg,
              rgba(0,77,78,.85) 0%,
              rgba(0,77,78,.25) 60%,
              rgba(0,77,78,0)   100%);
  mix-blend-mode:multiply;
  z-index:1;
}

/* colonna testo a destra */
.hero-copy {
  max-width: 40ch;
  color: #f2f2ec;                 /* testo bianco‑avorio su overlay scuro */
}

.hero-copy .subtitle {
  color: var(--cl-ivory);
  margin:0;
  font-size:clamp(1rem,calc(.9rem + .25vw),1.125rem);
}

/* --------- Responsività --------- */
@media (max-width: 860px) {
  .hero-content       { flex-direction: column; gap: 2rem; }
  .hero-box, .hero-copy { max-width: 100%; }
}

/* ---------- Scroll cue ---------------------------------------- */
.scroll-cue{
  position:absolute; left:50%; bottom:2rem;
  transform:translateX(-50%);
  width:48px; height:48px;
  border-radius:50%;
  border:1px solid rgba(242,242,236,.35);
  display:flex; align-items:center; justify-content:center;
  color:var(--cl-ivory);
  z-index:3;
}
@media (prefers-reduced-motion:no-preference){
  .scroll-cue{animation:scroll-bounce 2.5s infinite;}
  @keyframes scroll-bounce{
    0%,100%{transform:translate(-50%,0);}
    50%   {transform:translate(-50%,-8px);}
  }
}
.scroll-cue:hover{background:rgba(0,77,78,.5);}

/* ===== CHOOSE MASONRY SECTION ===== */
.choose-masonry {
  background: var(--cl-ivory);
}

.masonry-grid {
  display: grid;
  gap: var(--gap-min);
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "a a a a a a b b b b b b"
    "c c c c c c c c d d d d";
}

/* Card base */
.masonry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 280px;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-base);
  color: #0C1618;
  transition: transform .25s ease, box-shadow .25s ease;
}
.masonry-card h3 { margin-bottom: .65rem; }
.masonry-card p  { max-width: 34ch; line-height: 1.45; }

/* Grid areas */
.area-a { grid-area: a; }
.area-b { grid-area: b; }
.area-c { grid-area: c; }
.area-d { grid-area: d; }

/* Palette gradients */
.area-a {
  background: linear-gradient(
    135deg,
    var(--cl-ottanio) 0%,
    rgba(95,149,140,.25) 60%,
    var(--cl-ivory) 100%
  );
}
.area-b {
  background: linear-gradient(
    135deg,
    var(--cl-ottanio) 0%,
    rgba(95,149,140,.2) 50%,
    var(--cl-stone) 100%
  );
}
.area-c {
  background: linear-gradient(
    135deg,
    var(--cl-stone) 0%,
    rgba(227,227,221,.4) 100%
  );
}
.area-d {
  background: linear-gradient(
    135deg,
    rgba(95,149,140,.15) 0%,
    var(--cl-ivory) 100%
  );
}

/* Steel reflection overlay */
.masonry-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 60% 40%,
    rgba(255,255,255,.25) 0%,
    transparent 60%
  );
  mix-blend-mode: soft-light;
}

/* SVG decoration */
.card-deco {
  stroke: var(--cl-petrol);
  filter: drop-shadow(0 0 2px rgba(95,149,140,.5));
}

/* Hover lift */
@media (hover: hover) {
  .masonry-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
  }
}

/* ========== SOLUTIONS SECTION =========================== */
.solutions-section {
  background: var(--cl-ivory);
}

/* eyebrow riusa stile già visto */
.section-eyebrow{
  color: var(--cl-ottanio);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* titolo */
.solutions-title{max-width:48ch;}
.solutions-title .txt-grey {
  color: var(--cl-stone);
  opacity: 0.6;
}

/* Layout */
.solutions-layout {
  display: grid;
  grid-template-columns: 275px 1fr;
  align-items: start;
  gap: var(--gap-solutions);
}

.solutions-tagline {
  font-size: 1rem;
  max-width: 20ch;
  margin-top: 2rem;
  color: var(--cl-dark);
}

/* Grid soluzioni */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-solutions);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Card */
.solution-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-block: 2rem;
  padding-inline: 2rem;
  border-left: 1px solid var(--color-text-grey);
  background: transparent;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.solution-card h3 {
  font: 600 1.125rem/1.3;
  margin-bottom: .65rem;
}

.solution-card p {
  max-width: 48ch;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.solutions-note {
    max-width: 90ch;
    font-size: 1rem;
    margin: 0;
    text-align: left;
}

/* Quando si passa col mouse su .solutions-note, attiva il link-cta */
.solutions-note:hover + .link-cta {
  color: #0C1618;              /* testo link nero scuro */
}

.solutions-note:hover + .link-cta .icon-arrow {
  color: #0C1618;              /* freccia nera */
  fill: currentColor;
}

/* ---------- PRODUCT SLIDER ------------------------------------------------ */
.product-slider{
  text-align:center;
  position:relative;
}

.product-slider__title{
  margin:0 0 4rem;
}

/* viewport + track -------------------------------------------------------- */
.product-slider__viewport{overflow:hidden;position: relative;z-index: 2;}

.product-slider__track{
  display:flex;
  --gap: clamp(1rem, 2.5vw, 1.5rem);
  gap: var(--gap);
  overflow-x:auto;
  padding:0 12vw;                 /* taglia la 1ª e la 3ª card */
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  -ms-overflow-style:none;scrollbar-width:none;
}
.product-slider__track::-webkit-scrollbar{display:none}
@media(prefers-reduced-motion:reduce){.product-slider__track{scroll-behavior:auto}}

/* card -------------------------------------------------------------------- */
.product-slider__item{
  position:relative;
  flex:0 0 75vw;
  max-width:75vw;
  height:80vh;max-height:858px;
  overflow:hidden;
  scroll-snap-align:center;
}
@media(max-width:992px){
  .product-slider__item {
    flex: 0 0 80vw;
    max-width: 80vw;
    height: 60vh;
  }
}

.product-slider__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  border-radius:24px;
}

/* frecce -------------------------------------------------------------- */
.product-slider__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  background:transparent;
  border:none;
  cursor:pointer;
  z-index:2;
  transition:opacity .25s;
}
.product-slider__arrow::before{
  content:"";
  display:block;
  width:20px;
  height:20px;
  border-top:2px solid #F4F5F7;      /* colore richiesto */
  border-right:2px solid #F4F5F7;
  transform:rotate(225deg);          /* chevron “prev” di default */
  margin:auto;
}
.product-slider__arrow--prev{left:8px}
.product-slider__arrow--next{right:8px}
.product-slider__arrow--next::before{transform:rotate(45deg)} /* chevron next */

.product-slider__arrow:hover::before,
.product-slider__arrow:focus::before{
  border-color:#E2E2E1;              /* leggero highlight su hover/focus */
}

/* arrow nascosta / disattiva */
.product-slider__arrow.is-disabled{
  opacity:0;
  pointer-events:none;
}

/* mobile: frecce non mostrate */
@media(max-width:991px){
  .product-slider__arrow{display:none}
}

/* eventuali vecchi dot indicator nascosti */
.product-slider__dots{display:none!important}

/* Hover / Focus */
@media (hover: hover) {
  .solution-card:hover,
  .solution-card:focus {
    transform: translateY(-4px);
  }
}

/* ========== PROCESS SECTION ============================== */
.process-section{position:relative;overflow-x:clip;background:var(--cl-ivory)}
.process-section::before{content:"";position:absolute;top:-8rem;right:-10rem;width:32rem;height:32rem;border-radius:50%;border:2px dotted rgba(12,22,24,.15);z-index:1}
.process-section::after{right: calc(22rem - 5px);content:"";position:absolute;top:8rem;right:calc(22rem-5px);width:10px;height:10px;border-radius:50%;background:var(--cl-petrol);box-shadow:0 0 0 2px var(--cl-ivory);z-index:1}
.section-eyebrow{font:600 1rem/1.2;color:var(--cl-petrol);margin-bottom:1.5rem;letter-spacing:.08em}
.process-title{max-width:42ch;margin-bottom:2rem}
.process-intro{max-width:54ch;margin-bottom:4rem;color:var(--cl-dark)}
.process-grid{--gap:clamp(2rem,5vw,3rem);display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr);list-style:none;padding:0;margin:0}
.process-card__link{display:block;position:absolute;inset:0;text-decoration:none;color:inherit;z-index:1}
.process-card>*{position:relative;z-index:2}
.process-num{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--cl-petrol);color:#fff;font:600 .75rem/1;margin-bottom:1rem}
.process-card h3{margin-bottom:.65rem}
.process-card p{max-width:38ch;color:var(--cl-dark);line-height:1.5}
.process-card{position:relative;padding-block:2rem 2.5rem;border-top:1px solid var(--cl-stone);background-color:var(--cl-ivory);overflow:hidden;transition:transform 350ms cubic-bezier(0.4,0,0.2,1),filter 350ms cubic-bezier(0.4,0,0.2,1)}
.process-card::before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(45deg,rgba(255,255,255,0) 0,rgba(255,255,255,.25) 50%,rgba(255,255,255,0) 100%);transform:skewX(-25deg);transition:left 800ms ease-in-out;pointer-events:none}
@media(hover:hover){.process-card:hover::before,.process-card:focus-within::before{left:125%}.process-card:hover,.process-card:focus-within{transform:translateY(-4px) scale(1.005);border-top:2px solid var(--cl-ottanio)}}
/* ========== CASE STUDY ============================== */
.cs-section{background:var(--cl-ivory)}
.cs--pattern{position:relative}
.cs--pattern::before{--line-color:#D8D7CF;--spacing:16px;--fade-size:96px;content:'';position:absolute;inset:0;z-index:0;background-image:repeating-linear-gradient(45deg,var(--line-color) 0 1px,transparent 1px var(--spacing));opacity:.24;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade-size),#000 calc(100% - var(--fade-size)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade-size),#000 calc(100% - var(--fade-size)),transparent 100%)}
.cs-wrap{display:flex;gap:clamp(2rem,6vw,4rem);align-items:stretch}
.cs-media{flex:0 0 45%;position:relative;border-radius:24px;overflow:hidden;display:flex;isolation:isolate}
.cs-company-badge{position:absolute;bottom:24px;left:24px;padding:.4rem 1.1rem;font-weight:600;font-size:.9rem;letter-spacing:.02em;color:#F2F2EC;background:#004D4E;border-radius:24px;box-shadow:0 4px 12px rgba(0,0,0,.22);backdrop-filter:blur(2px);pointer-events:none}
@media (prefers-color-scheme:dark){.cs-company-badge{background:#F2F2EC;color:#004D4E}}
.cs-img{width:100%;height:auto;border-radius:24px;object-fit:cover;box-shadow:0 8px 24px rgba(0,0,0,.05)}
.cs-subtitle{margin-bottom:.65rem}
.cs-company{margin-bottom:1rem;letter-spacing:.02em;text-transform:uppercase;font-size:.8rem;color:var(--cl-dark)}
.cs-text{max-width:50ch;line-height:1.55;margin-bottom:0}
.cs-content{display:flex;flex-direction:column;justify-content:center}

.cta-banner{padding: 0;}

@media (max-width: 1366px) {}
@media (max-width: 1024px) {
.solutions-tagline{margin-top: 0;}
.solutions-layout {display: flex;flex-direction: column;}.process-grid{grid-template-columns:repeat(2,1fr);}}

@media (max-width: 768px) {
    [class*="col-"] {
    width: 100%;          /* occupa l’intera riga */
    max-width: 100%;      /* se usi grid/bootstrap-like */
  }
  .hero-content-sector, .faq-div{
    flex-flow: column;}
        .hero-content-sector{justify-content: center;}
    .cs-wrap{flex-direction:column;}
      .masonry-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b"
      "c"
      "d";
  }
  .masonry-card {height: 200px;padding: 1.5rem;}
  .solutions-grid, .process-grid{grid-template-columns:1fr;}
  .process-num { width: 2rem; height: 2rem; }
}

@media (max-width: 600px)  {

}

@media (max-width: 480px) {  .cs--pattern::before{ background-size:12px; }  .cs-company-badge{
    bottom:16px;
    left:16px;
    font-size:.8rem;
    padding:.35rem .9rem;
  }}

  /* Snappiness sottile per questo template */
.hero--services .reveal-up { --rev-distance: 10px; }
.challenge-grid .challenge-icon.reveal-scale { --rev-distance: 8px; }
.product-slider__item.reveal-up,
.pipeline-card.reveal-up,
.process-card.reveal-up { --rev-distance: 12px; }