@charset "UTF-8";
/* ==========================================================================
   C&C SRL High-Tech — base.css
   Design tokens, reset, typography, shared layout, buttons, header, marquee,
   CTA band, footer, utilities and shared keyframes.

   Loaded on EVERY page. Every other stylesheet depends on this file
   (enqueue handle: ccsrl-base).

   Rule: no raw hex colour outside the :root block below.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS  (CONTRACT.md §3 — verbatim)
   ========================================================================== */

:root{
  /* Brand */
  --cc-navy:        #1e4272;
  --cc-navy-mid:    #2a538a;  /* form panel fill */
  --cc-navy-line:   #3c649c;  /* borders on navy */
  --cc-yellow:      #fcd34d;
  --cc-yellow-dk:   #f5c422;  /* yellow hover */
  --cc-orange:      #f1762a;

  /* Surfaces */
  --cc-bg:          #f7f8fa;
  --cc-surface:     #ffffff;
  --cc-border:      #dfe2e6;
  --cc-border-str:  #b9c2cf;  /* stronger border, ghost button */

  /* Text on light */
  --cc-text:        #16202e;
  --cc-text-muted:  #5a6675;
  --cc-text-faint:  #8a93a1;
  --cc-ink:         #1a1a1a;  /* text on yellow */

  /* Text on navy */
  --cc-on-navy:      #c9d4e4;
  --cc-on-navy-soft: #c3cfdf;
  --cc-on-navy-dim:  #8fa3c0;
  --cc-on-navy-mute: #9fb0c7;
  --cc-on-navy-far:  #6d7f99;
  --cc-on-navy-min:  #54688a;

  /* Type */
  --cc-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --cc-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cc-font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Layout */
  --cc-container:  1280px;
  --cc-gutter:     40px;   /* overridden to 20px under 640px */
  --cc-header-h:   124px;  /* room for the 108px nav emblem */
  --cc-logo-mark:  108px;

  /* Motion */
  --cc-ease:  cubic-bezier(.2,.7,.3,1);
}

/* ==========================================================================
   2. RESET
   ========================================================================== */

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

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cc-header-h) + 16px);
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol, fieldset, legend, pre{
  margin: 0;
  padding: 0;
}

ul[class],
ol[class]{
  list-style: none;
}

img, svg, video, canvas, audio, iframe, embed, object{
  display: block;
  max-width: 100%;
}

img, video, canvas{
  height: auto;
}

svg{ fill: currentColor; }

input, button, textarea, select, optgroup{
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  margin: 0;
}

button{
  background: none;
  border: 0;
  cursor: pointer;
  text-align: inherit;
}

textarea{ resize: vertical; }

table{
  border-collapse: collapse;
  width: 100%;
}

hr{
  border: 0;
  border-top: 1px solid var(--cc-border);
  height: 0;
}

fieldset{ border: 0; }

/* WordPress core: prevent the admin bar from covering the sticky header. */
body.admin-bar .cc-header{ top: 32px; }

/* ==========================================================================
   3. BASE TYPOGRAPHY / LINKS / SELECTION   (from the design <helmet>)
   ========================================================================== */

html,
body{
  background: var(--cc-bg);
}

body{
  font-family: var(--cc-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cc-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6{
  font-family: var(--cc-font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--cc-navy);
}

p{ margin: 0; }

p + p{ margin-top: 1em; }

strong, b{ font-weight: 700; }

small{ font-size: .875em; }

code, kbd, samp, pre{
  font-family: var(--cc-font-mono);
  font-size: .9em;
}

a{
  color: var(--cc-navy);
  text-decoration: none;
  transition: color .25s var(--cc-ease);
}

a:hover{ color: var(--cc-orange); }

::selection{
  background: var(--cc-yellow);
  color: var(--cc-ink);
}

::-moz-selection{
  background: var(--cc-yellow);
  color: var(--cc-ink);
}

/* Long-form / editor content inside .cc-prose-ish contexts keeps sane rhythm. */
.entry-content > * + *{ margin-top: 1.1em; }

/* ==========================================================================
   4. REDUCED MOTION   (CONTRACT.md §3 — verbatim, plus reveal safety net)
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }

  /* Never leave a reduced-motion visitor staring at an invisible page if the
     IntersectionObserver never fires. Every animated start state has to be
     neutralised here, not just the plain reveal: a staggered child or an
     un-drawn section rule would otherwise stay hidden or zero-width forever. */
  .cc-js .cc-reveal,
  .cc-js .cc-reveal--stagger > *,
  .cc-js .cc-reveal--wipe > *{
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition-delay: 0ms !important;
  }

  .cc-js .cc-section-head .cc-section-head__rule{
    width: 74px !important;
  }

  /* The watermark offset is written inline from JS, so it has to be beaten
     with !important rather than simply left undeclared. */
  .cc-js .cc-section__watermark{
    transform: none !important;
    will-change: auto;
  }
}

/* ==========================================================================
   5. FOCUS VISIBILITY   (CONTRACT.md §10)
   ========================================================================== */

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

/* Older engines without :focus-visible still get a visible ring. */
:focus:not(:focus-visible){ outline: none; }

/* On the yellow marquee / CTA band the orange ring is low contrast — switch
   to ink so the ring stays legible. */
.cc-cta :focus-visible,
.cc-marquee :focus-visible,
.cc-btn--primary:focus-visible{
  outline-color: var(--cc-ink);
}

/* On navy surfaces keep the orange ring but add offset breathing room. */
.cc-header :focus-visible,
.cc-footer :focus-visible,
.cc-section--navy :focus-visible{
  outline-color: var(--cc-yellow);
  outline-offset: 3px;
}

/* ==========================================================================
   6. SHARED LAYOUT
   ========================================================================== */

.cc-container{
  width: 100%;
  max-width: var(--cc-container);
  margin: 0 auto;
  padding: 0 var(--cc-gutter);
}

.cc-section{
  position: relative;
  overflow: hidden;
  padding: 96px 0;
}

.cc-section > .cc-container{
  position: relative;
  z-index: 1;
}

/* --- Section surface modifiers ------------------------------------------ */

.cc-section--light{ background: var(--cc-surface); }
.cc-section--muted{ background: var(--cc-bg); }

.cc-section--navy{
  background: var(--cc-navy);
  color: var(--cc-on-navy-soft);
}

.cc-section--navy h1,
.cc-section--navy h2,
.cc-section--navy h3,
.cc-section--navy h4{
  color: var(--cc-surface);
}

.cc-section--bordered{
  border-top: 1px solid var(--cc-border);
  border-bottom: 1px solid var(--cc-border);
}

.cc-section--navy.cc-section--bordered{
  border-top-color: var(--cc-navy-line);
  border-bottom-color: var(--cc-navy-line);
}

/* --- Giant outlined section number -------------------------------------- */

.cc-section__watermark{
  position: absolute;
  top: -.14em;
  right: var(--cc-gutter);
  z-index: 0;
  font-family: var(--cc-font-display);
  font-weight: 800;
  font-size: clamp(120px, 20vw, 280px);
  line-height: .8;
  letter-spacing: -.02em;
  color: var(--cc-border);
  opacity: .55;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

@supports ((-webkit-text-stroke: 2px currentColor) or (text-stroke: 2px currentColor)){
  .cc-section__watermark{
    color: transparent;
    -webkit-text-stroke: 2px var(--cc-border-str);
    opacity: .45;
  }

  .cc-section--navy .cc-section__watermark{
    -webkit-text-stroke-color: var(--cc-navy-line);
    opacity: .6;
  }
}

.cc-section--navy .cc-section__watermark{
  color: var(--cc-navy-line);
}

/* --- Section head -------------------------------------------------------- */

.cc-section-head{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  margin-bottom: 56px;
}

.cc-section-head--left{
  align-items: flex-start;
  text-align: left;
}

.cc-section-head__eyebrow{
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--cc-font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cc-orange);
}

.cc-section-head__eyebrow::before,
.cc-section-head__eyebrow::after{
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  background: currentColor;
  flex: 0 0 auto;
}

.cc-section-head--left .cc-section-head__eyebrow::before{
  display: none;
}

.cc-section-head__title{
  margin: 0;
  font-family: var(--cc-font-display);
  font-weight: 800;
  font-size: clamp(28px, 4.6vw, 52px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--cc-navy);
  text-wrap: balance;
}

.cc-section--navy .cc-section-head__title{
  color: var(--cc-surface);
}

.cc-section-head__rule{
  display: block;
  width: 74px;
  height: 4px;
  background: var(--cc-yellow);
  flex: 0 0 auto;
}

.cc-section-head__sub{
  max-width: 640px;
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--cc-text-muted);
}

.cc-section--navy .cc-section-head__sub{
  color: var(--cc-on-navy-soft);
}

/* ==========================================================================
   7. BUTTONS
   ========================================================================== */

.cc-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 34px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--cc-font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform .25s var(--cc-ease),
    background-color .25s var(--cc-ease),
    border-color .25s var(--cc-ease),
    color .25s var(--cc-ease),
    box-shadow .25s var(--cc-ease);
}

/* --- Primary: yellow on ink --------------------------------------------- */

.cc-btn--primary{
  background: var(--cc-yellow);
  color: var(--cc-ink);
}

.cc-btn--primary:hover,
.cc-btn--primary:focus-visible{
  background: var(--cc-yellow-dk);
  color: var(--cc-ink);
  transform: translateY(-3px);
}

/* --- Ghost: hairline outline, navy text ---------------------------------- */

.cc-btn--ghost{
  background: transparent;
  border-color: var(--cc-border-str);
  color: var(--cc-navy);
}

.cc-btn--ghost:hover,
.cc-btn--ghost:focus-visible{
  background: var(--cc-surface);
  border-color: var(--cc-navy);
  color: var(--cc-navy);
  transform: translateY(-3px);
}

.cc-section--navy .cc-btn--ghost,
.cc-footer .cc-btn--ghost{
  background: transparent;
  border-color: var(--cc-navy-line);
  color: var(--cc-on-navy);
}

.cc-section--navy .cc-btn--ghost:hover,
.cc-section--navy .cc-btn--ghost:focus-visible,
.cc-footer .cc-btn--ghost:hover,
.cc-footer .cc-btn--ghost:focus-visible{
  background: transparent;
  border-color: var(--cc-yellow);
  color: var(--cc-surface);
}

/* --- Link: inline text link with a trailing arrow ------------------------
   The arrow is supplied by CSS — the PHP label must NOT contain "→".        */

.cc-btn--link{
  padding: 0;
  border: 0;
  background: none;
  color: var(--cc-orange);
  font-size: 13px;
  letter-spacing: 1.5px;
}

.cc-btn--link::after{
  content: "\2192";
  display: inline-block;
  transition: transform .25s var(--cc-ease);
}

.cc-btn--link:hover,
.cc-btn--link:focus-visible{
  color: var(--cc-orange);
}

.cc-btn--link:hover::after,
.cc-btn--link:focus-visible::after{
  transform: translateX(5px);
}

.cc-section--navy .cc-btn--link{
  color: var(--cc-yellow);
}

/* ==========================================================================
   8. HEADER
   ========================================================================== */

/* --- Scroll progress bar -------------------------------------------------
   main.js sets `style.width` (0% → 100%) inside a requestAnimationFrame.    */

.cc-progress{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 0;
  max-width: 100%;
  height: 3px;
  background: var(--cc-yellow);
  pointer-events: none;
}

body.admin-bar .cc-progress{ top: 32px; }

/* --- Header shell -------------------------------------------------------- */

.cc-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cc-navy);
  border-bottom: 3px solid var(--cc-orange);
}

.cc-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--cc-header-h);
  width: 100%;
  max-width: var(--cc-container);
  margin: 0 auto;
  padding: 0 var(--cc-gutter);
}

/* --- Logo ---------------------------------------------------------------- */

/* Height of the company-profile logo (.cc-logo__lockup). Scoped to the header
   rather than a :root token; the responsive blocks below override it.
   The owner's lockup (2026-09): the C emblem 35% larger and "SRL" at half
   size, "C&C" as printed. The image is 108px tall so that "C&C" keeps the
   size it had in the 80px original; it is narrower, 297px against 334px. */
.cc-header{ --cc-lockup-h: 108px; }

/* Just above the drawer breakpoint the full bar is at its tightest. The old
   80px logo left 15px between the yellow band and "Home" at 1101px and eased
   to 64px there; the same scale (x1.35) gives 86px, 237px wide. */
@media (min-width: 1101px) and (max-width: 1280px){
  .cc-header{ --cc-lockup-h: clamp(86px, calc(86px + (100vw - 1101px) * .12), 108px); }
}

/* The logo sits on a white plate: its navy vanishes on the navy bar. The
   plate runs from the left edge of the screen to the logo and is cut at 45
   degrees like the shapes on the company-profile cover, with a yellow band
   along the cut (::before and ::after below). */
.cc-logo{
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 12px;
  padding-right: 18px;
  color: var(--cc-navy);

  /* The cut leans right by the full bar height: keep the nav clear of the
     yellow band where the nav labels sit, at mid-height. */
  margin-right: calc(var(--cc-header-h) / 2 + 26px);

  /* Must be allowed to shrink. With `flex: 0 0 auto` a long site title pushed
     the nav past the viewport and clipped the "Contattaci" CTA — the header
     has to stay intact whatever the client names the site. The emblem itself
     never shrinks (see .cc-logo__mark), only the text beside it. */
  flex: 0 1 auto;
  min-width: 0;
}

.cc-logo:hover{ color: var(--cc-navy); }

/* Skewed boxes, not clip-paths: a skew keeps the cut at exactly 45 degrees
   while the bar shrinks on scroll. Painted behind the logo (isolation keeps
   z-index:-1 inside the link) and deaf to the pointer, so the white field is
   not one big home link. */
.cc-logo::before,
.cc-logo::after{
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  transform: skewX(-45deg);
  transform-origin: 0 100%;
  pointer-events: none;
}

.cc-logo::before{
  left: -100vw;
  right: 0;
  background: var(--cc-surface);
}

.cc-logo::after{
  left: calc(100% + 10px);
  width: 12px;
  background: var(--cc-yellow);
}

/* --- Plate ----------------------------------------------------------------
   The brand's navy vanishes on navy, so wherever the logo sits on a navy
   ground it sits on this: a flat white plate with ONE 45-degree cut at the
   bottom right and a yellow band --plate-gap after it, --plate-band wide —
   the same measures as the header plate. Used by the Azienda hero emblem and
   the footer logo. clip-path, so the edges stay crisp at any pixel density;
   the element's own padding must leave room for the cut.
   ------------------------------------------------------------------------ */

.cc-plate{
  --plate-cut: 92px;
  --plate-gap: 10px;
  --plate-band: 12px;
  position: relative;
  isolation: isolate;
}

.cc-plate::before,
.cc-plate::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.cc-plate::before{
  background: var(--cc-surface);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--plate-cut)),
    calc(100% - var(--plate-cut)) 100%,
    0 100%
  );
}

.cc-plate::after{
  background: var(--cc-yellow);
  clip-path: polygon(
    100% calc(100% - var(--plate-cut) + var(--plate-gap)),
    100% calc(100% - var(--plate-cut) + var(--plate-gap) + var(--plate-band)),
    calc(100% - var(--plate-cut) + var(--plate-gap) + var(--plate-band)) 100%,
    calc(100% - var(--plate-cut) + var(--plate-gap)) 100%
  );
}

/* Forced colours drop backgrounds anyway: a plain frame instead. */
@media (forced-colors: active){
  .cc-plate{ border: 1px solid CanvasText; }

  .cc-plate::before,
  .cc-plate::after{ display: none; }
}

/* 108px tall at desktop, 297px wide. --cc-lockup-k shrinks it on scroll. */
.cc-logo__lockup{
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  height: calc(var(--cc-lockup-h) * var(--cc-lockup-k, 1));
  display: block;
}

.cc-logo__mark{
  width: var(--cc-logo-mark);
  height: var(--cc-logo-mark);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--cc-yellow);
  font-family: var(--cc-font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .3px;
  color: var(--cc-ink);
  transition: background-color .25s var(--cc-ease);
}

.cc-logo:hover .cc-logo__mark{ background: var(--cc-yellow-dk); }

/* Customizer image (the client's own logo), on the white plate. */
.cc-logo__mark--img,
.cc-logo:hover .cc-logo__mark--img{
  width: var(--cc-logo-mark);
  height: var(--cc-logo-mark);
  background: transparent;
  padding: 0;
  overflow: visible;
}

.cc-logo__img{
  width: var(--cc-logo-mark);
  height: var(--cc-logo-mark);
  object-fit: contain;
  display: block;
}

.cc-logo__text{
  display: flex;
  flex-direction: column;
  line-height: 1;

  /* Let a long site name ellipsis instead of forcing the header wider than the
     viewport. Needs min-width:0 because a flex item defaults to min-content. */
  min-width: 0;
  overflow: hidden;
}

.cc-logo__name{
  font-family: var(--cc-font-display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 1px;
  color: var(--cc-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-logo__tag{
  margin-top: 4px;
  font-family: var(--cc-font-mono);
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--cc-text-muted);
}

/* --- Primary nav --------------------------------------------------------- */

.cc-nav{
  display: flex;
  align-items: center;
  /* 30px at the 1280px design width, tightening as the bar approaches the
     1100px drawer breakpoint: nine top-level items plus the logo need every
     pixel there, and the bar must never push the document sideways. */
  gap: clamp(18px, calc(18px + (100vw - 1100px) * .067), 30px);
}

.cc-nav__link{
  position: relative;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .5px;
  color: var(--cc-on-navy);
  padding-bottom: 4px;
  transition: color .25s var(--cc-ease), box-shadow .25s var(--cc-ease);
}

.cc-nav__link:hover,
.cc-nav__link:focus-visible{
  color: var(--cc-surface);
}

.cc-nav__link.is-active{
  color: var(--cc-surface);
  box-shadow: inset 0 -2px 0 var(--cc-yellow);
}

/* The "Contattaci" CTA sits inside the nav at a compact size. */
.cc-nav .cc-btn{
  padding: 10px 22px;
  font-size: 13px;
  letter-spacing: 1px;
}

.cc-nav .cc-btn--primary:hover,
.cc-nav .cc-btn--primary:focus-visible{
  transform: none;
}

/* --- Mega menu ----------------------------------------------------------- */

.cc-mega{
  position: relative;
}

/*
 * The panel hangs a few pixels below the toggle, and that strip belonged to
 * neither of them: moving the pointer down to the menu left .cc-mega, :hover
 * went false and the panel shut before it could be reached. This bridges the
 * gap so the pointer never leaves the element on its way in.
 *
 * It only exists while the menu is engaged, so it is never an invisible
 * obstacle sitting over the header the rest of the time.
 */
.cc-mega:hover::after,
.cc-mega:focus-within::after,
.cc-mega.is-open::after{
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 18px;
}

.cc-mega__toggle{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 4px;
  font-family: var(--cc-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .5px;
  color: var(--cc-on-navy);
  cursor: pointer;
  transition: color .25s var(--cc-ease);
}

.cc-mega__toggle::after{
  content: "\25BC";
  font-size: 9px;
  line-height: 1;
  color: var(--cc-yellow);
  transition: transform .25s var(--cc-ease);
}

.cc-mega__toggle:hover,
.cc-mega__toggle:focus-visible,
.cc-mega__toggle[aria-expanded="true"],
.cc-mega:hover .cc-mega__toggle{
  color: var(--cc-surface);
}

.cc-mega__toggle[aria-expanded="true"]::after{
  transform: rotate(180deg);
}

.cc-mega__toggle.is-active{
  color: var(--cc-surface);
  box-shadow: inset 0 -2px 0 var(--cc-yellow);
}

.cc-mega__panel{
  position: absolute;
  top: 40px;
  left: -24px;
  z-index: 60;
  display: grid;
  /*
   * Implicit columns, not `grid-template-columns: auto auto`. Two explicit
   * tracks are always two tracks: a panel with a single child kept a second,
   * empty one plus the 28px gap in front of it, a dead strip hanging off the
   * right edge. Settori has only ever had one column and was already carrying
   * it; Prodotti now has one too, since R-Evolution nests its own submenu
   * instead of spreading a second column. Column flow sizes exactly as many
   * tracks as there are children, so one child and two both come out right.
   */
  grid-auto-flow: column;
  grid-auto-columns: auto;
  gap: 28px;
  padding: 24px 28px;
  background: var(--cc-navy);
  border: 1px solid var(--cc-navy-line);
  border-top: 3px solid var(--cc-yellow);
  box-shadow: 0 24px 48px rgba(0,0,0,.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition:
    opacity .22s var(--cc-ease),
    transform .22s var(--cc-ease),
    visibility .22s linear;
}

.cc-mega:hover .cc-mega__panel,
.cc-mega:focus-within .cc-mega__panel,
.cc-mega.is-open .cc-mega__panel{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.cc-mega__col{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 190px;
}

.cc-mega__col + .cc-mega__col{ min-width: 170px; }

.cc-mega__label{
  margin-bottom: 4px;
  font-family: var(--cc-font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cc-yellow);
}

.cc-mega__link{
  font-size: 13px;
  color: var(--cc-on-navy);
  white-space: nowrap;
}

.cc-mega__link:hover,
.cc-mega__link:focus-visible,
.cc-mega__link.is-active{
  color: var(--cc-surface);
}

/* --- Mega menu, second level --------------------------------------------- */

/*
 * One panel row that owns a flyout of its own: R-Evolution is a real page AND
 * the parent of the five scope pages. Hence two elements on the row rather
 * than one — the anchor goes to the page, the button opens the submenu. A
 * single control doing both would have to pick one of the two and lose the
 * other.
 */
.cc-mega__sub{
  /*
   * How far the flyout sits from the column's own right edge: the panel's
   * 28px right padding, its 1px border, and 8px of visible air. The bridge
   * below has to cover exactly this, so both read the one number.
   */
  --cc-sub-out: 37px;
  --cc-sub-pad: 18px;

  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* The link takes the row, the arrow sits on the column's edge. */
.cc-mega__link--parent{
  flex: 1 1 auto;
  min-width: 0;
}

/*
 * The way out of a list into its index — "Tutti i settori" at the foot of the
 * sectors. It is not one more sector, so it does not sit in the list as one: a
 * hairline and a step of air set it apart, and the yellow the menu labels
 * already use tells it is a different kind of link.
 */
.cc-mega__link--all{
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--cc-navy-line);
  color: var(--cc-yellow);
}

.cc-mega__link--all:hover,
.cc-mega__link--all:focus-visible{
  color: var(--cc-surface);
}

.cc-mega__subtoggle{
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 24×24 of hit area without making this row taller than its neighbours:
     the extra height is absorbed by the negative vertical margin, and the
     negative right one pulls the arrow flush with the column edge. */
  width: 24px;
  height: 24px;
  margin: -2px -4px -2px 0;
  padding: 0;
  color: var(--cc-on-navy);
  transition: color .25s var(--cc-ease);
}

/* Same glyph, same easing and same duration as .cc-mega__toggle's chevron,
   turned a quarter to point at where the flyout comes out. */
.cc-mega__subtoggle::after{
  content: "\25BC";
  font-size: 9px;
  line-height: 1;
  color: var(--cc-yellow);
  transform: rotate(-90deg);
  transition: transform .25s var(--cc-ease);
}

.cc-mega__sub:hover .cc-mega__link--parent,
.cc-mega__subtoggle:hover,
.cc-mega__subtoggle:focus-visible{
  color: var(--cc-surface);
}

/* Open: the arrow comes back down. aria-expanded is listed too because the
   button is the only thing that speaks for the state to a screen reader, and
   main.js sets it without necessarily going through .is-open. */
.cc-mega__sub:hover .cc-mega__subtoggle::after,
.cc-mega__sub:focus-within .cc-mega__subtoggle::after,
.cc-mega__sub.is-open .cc-mega__subtoggle::after,
.cc-mega__subtoggle[aria-expanded="true"]::after{
  transform: rotate(0deg);
}

/* The flyout is the same object as .cc-mega__panel one level further in, so
   it wears the same fill, border, yellow top rule, shadow and transition —
   only the entry slides along X, the axis it actually travels on. */
.cc-mega__subpanel{
  position: absolute;
  /* Top-aligned with its own row: back out the flyout's top padding and its
     3px top rule so the first link lands level with the parent link. */
  top: calc(-1 * (var(--cc-sub-pad) + 3px));
  left: calc(100% + var(--cc-sub-out));
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 170px;
  /*
   * Un tetto, non un'ampiezza: la larghezza la decide l'etichetta più lunga, e
   * senza limite un nome di settore lungo spingerebbe il pannello oltre il
   * bordo della finestra. Il punto stretto è 1102px, la larghezza minima in cui
   * la barra è ancora quella orizzontale: lì il flyout parte a 860px e ne
   * restano 227 prima del bordo. 220 sta dentro con margine, e da 1102 in su lo
   * spazio disponibile non fa che crescere. Oltre quella misura le etichette
   * vanno a capo invece di allargare il pannello.
   */
  /* `max-content` con un tetto: il pannello si dimensiona sull'etichetta più
     lunga e si ferma a 220. Senza, una volta permesso il ritorno a capo (regola
     subito dopo questo blocco) il pannello collassava a min-width e mandava a
     capo nomi che ci stavano benissimo su una riga. */
  width: max-content;
  max-width: 220px;
  padding: var(--cc-sub-pad) 26px;
  background: var(--cc-navy);
  border: 1px solid var(--cc-navy-line);
  border-top: 3px solid var(--cc-yellow);
  box-shadow: 0 24px 48px rgba(0,0,0,.4);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  pointer-events: none;
  transition:
    opacity .22s var(--cc-ease),
    transform .22s var(--cc-ease),
    visibility .22s linear;
}

/* Dentro il flyout le etichette vanno a capo: fuori restano su una riga, come
   ovunque nel menu, ma qui il pannello ha un tetto di larghezza e un nome lungo
   deve piegarsi a quello invece di sfondarlo. */
.cc-mega__subpanel .cc-mega__link{
  white-space: normal;
  overflow-wrap: break-word;
}

.cc-mega__sub:hover .cc-mega__subpanel,
.cc-mega__sub:focus-within .cc-mega__subpanel,
.cc-mega__sub.is-open .cc-mega__subpanel{
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

/*
 * Second-level bridge — the same problem .cc-mega::after solves, one level
 * down. The flyout stands --cc-sub-out away from the column, and that strip
 * belongs to neither: the pointer heading for the submenu leaves
 * .cc-mega__sub, :hover goes false and the flyout shuts before it is reached.
 *
 * It hangs off the flyout rather than off the row because the flyout is the
 * only element that already knows how tall the bridge has to be — a strip the
 * height of one row would drop the pointer the moment it drifted toward the
 * last scope. Being a descendant of .cc-mega__sub, hovering it keeps the
 * whole thing open exactly as hovering the flyout itself does.
 *
 * Like the first-level bridge it is declared only under the open states, so
 * it is never an invisible obstacle lying over the panel the rest of the time.
 */
.cc-mega__sub:hover .cc-mega__subpanel::before,
.cc-mega__sub:focus-within .cc-mega__subpanel::before,
.cc-mega__sub.is-open .cc-mega__subpanel::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  /* The +1px is the flyout's own left border. An absolutely positioned child
     measures from the PADDING box, so `right: 100%` lands a border's width
     inside the element and the strip would stop one pixel short of the
     column — a hole exactly where the pointer crosses. */
  width: calc(var(--cc-sub-out) + 1px);
}

/* --- Language switcher --------------------------------------------------- */

.cc-lang{
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 14px;
  border-left: 1px solid var(--cc-navy-line);
}

.cc-lang__btn{
  display: inline-block;
  padding: 4px 6px;
  font-family: var(--cc-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-on-navy-dim);
  transition: color .25s var(--cc-ease);
}

.cc-lang__btn:hover,
.cc-lang__btn:focus-visible{
  color: var(--cc-surface);
}

.cc-lang__btn.is-active{
  color: var(--cc-yellow);
  font-weight: 500;
}

/* --- Burger (mobile only) ------------------------------------------------ */

.cc-burger{
  display: none;
  position: relative;
  width: 44px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--cc-navy-line);
  background-color: transparent;
  background-image: linear-gradient(var(--cc-yellow), var(--cc-yellow));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 2px;
  transition: background-size .2s var(--cc-ease), border-color .25s var(--cc-ease);
}

.cc-burger::before,
.cc-burger::after{
  content: "";
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  margin-left: -10px;
  background: var(--cc-yellow);
  transition: transform .25s var(--cc-ease), top .25s var(--cc-ease);
}

.cc-burger::before{ top: calc(50% - 8px); }
.cc-burger::after{  top: calc(50% + 6px); }

.cc-burger:hover{ border-color: var(--cc-yellow); }

.cc-burger[aria-expanded="true"]{
  background-size: 0 2px;
}

.cc-burger[aria-expanded="true"]::before{
  top: calc(50% - 1px);
  transform: rotate(45deg);
}

.cc-burger[aria-expanded="true"]::after{
  top: calc(50% - 1px);
  transform: rotate(-45deg);
}

/* ==========================================================================
   9. MARQUEE   (homepage + R-Evolution)
   ========================================================================== */

.cc-marquee{
  position: relative;
  overflow: hidden;
  margin: 22px 0;
  background: var(--cc-yellow);
  border-top: 1px solid rgba(0,0,0,.15);
  border-bottom: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 10px 30px rgba(14,34,64,.18);
}

.cc-marquee__track{
  display: flex;
  gap: 56px;
  width: max-content;
  animation: cc-marquee 28s linear infinite;
}

.cc-marquee:hover .cc-marquee__track,
.cc-marquee:focus-within .cc-marquee__track{
  animation-play-state: paused;
}

.cc-marquee__group{
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 14px 0 14px 56px;
}

.cc-marquee__group + .cc-marquee__group{
  padding-left: 0;
}

.cc-marquee__item{
  font-family: var(--cc-font-display);
  font-weight: 700;
  font-size: clamp(16px, 2.6vw, 24px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cc-ink);
  white-space: nowrap;
}

.cc-marquee__sep{
  font-size: 12px;
  line-height: 1;
  color: var(--cc-navy);
  flex: 0 0 auto;
}

/* ==========================================================================
   10. CTA BAND
   ========================================================================== */

.cc-cta{
  background: var(--cc-yellow);
}

.cc-cta__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  max-width: var(--cc-container);
  margin: 0 auto;
  padding: 64px var(--cc-gutter);
}

.cc-cta__title{
  margin: 0 0 10px;
  font-family: var(--cc-font-display);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--cc-ink);
}

.cc-cta__text{
  max-width: 640px;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cc-text-muted);
}

/* On the yellow band the primary button inverts to navy (design reference:
   R-Evolution "Pacchetto All Inclusive" band). */
.cc-cta .cc-btn--primary{
  background: var(--cc-navy);
  color: var(--cc-surface);
}

.cc-cta .cc-btn--primary:hover,
.cc-cta .cc-btn--primary:focus-visible{
  background: var(--cc-navy);
  color: var(--cc-surface);
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 999px rgba(0,0,0,.18);
}

.cc-cta .cc-btn--ghost{
  border-color: var(--cc-ink);
  color: var(--cc-ink);
}

.cc-cta .cc-btn--ghost:hover,
.cc-cta .cc-btn--ghost:focus-visible{
  background: var(--cc-ink);
  color: var(--cc-yellow);
  border-color: var(--cc-ink);
}

/* ==========================================================================
   11. FOOTER
   Four columns, each answering one question: who (the logo on the brand
   plate, the socials, the institutional mark), how to reach us (every
   contact detail with its label), where to go (the company pages) and what
   we make (the divisions). The company data required by law — VAT number
   and share capital — sit in the bottom bar with the legal links.
   ========================================================================== */

.cc-footer{
  background: var(--cc-navy);
  border-top: 3px solid var(--cc-yellow);
  margin-top: auto;
}

.cc-footer__top{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, .8fr);
  gap: 48px;
  width: 100%;
  max-width: var(--cc-container);
  margin: 0 auto;
  padding: 60px var(--cc-gutter) 52px;
}

/* Column heading and the small labels inside the brand column. */
.cc-footer__label{
  margin: 0 0 16px;
  font-family: var(--cc-font-mono);
  font-weight: 500;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cc-yellow);
}

/* --- Brand column ---------------------------------------------------------- */

.cc-footer__brand{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

/* The lockup on the brand plate; the right padding leaves room for the cut. */
.cc-footer__logo{
  --plate-cut: 30px;
  --plate-gap: 6px;
  --plate-band: 8px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 40px 14px 18px;
  line-height: 0;
}

/* 72px: the larger-emblem lockup at the scale the old 54px one had. */
.cc-footer__logo-img{
  display: block;
  width: auto;
  height: 72px;
}

/* Customizer logo: the image and the site name, navy on the plate. */
.cc-footer__mark{
  display: inline-flex;
  flex: 0 0 auto;
}

.cc-footer__mark-img{
  display: block;
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.cc-footer__name{
  font-family: var(--cc-font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 1px;
  color: var(--cc-navy);
}

.cc-footer__social .cc-footer__label,
.cc-footer__partners .cc-footer__label{
  margin-bottom: 10px;
}

.cc-footer__social-links{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.cc-footer__social-link{
  font-size: 14px;
  font-weight: 500;
  color: var(--cc-on-navy-mute);
}

.cc-footer__social-link:hover,
.cc-footer__social-link:focus-visible{
  color: var(--cc-surface);
}

/* --- Institutional mark ---------------------------------------------------
   Reproduced as supplied, on its own white plate: the logo carries a black
   bar and the EU flag and is not recoloured to suit a dark background.
   ------------------------------------------------------------------------ */

.cc-footer__partner{
  display: inline-flex;
  align-items: center;
  padding: 12px 16px;
  background: var(--cc-surface);
  line-height: 0;
}

.cc-footer__partner img{
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
}

/* --- Contacts column --------------------------------------------------------- */

.cc-footer__list{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.cc-footer__item dt{
  margin: 0 0 3px;
  font-family: var(--cc-font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-on-navy-far);
}

.cc-footer__item dd{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cc-on-navy-soft);
}

.cc-footer__item a{
  color: var(--cc-on-navy-soft);
  text-decoration: underline;
  text-decoration-color: var(--cc-navy-line);
  text-underline-offset: 3px;
}

.cc-footer__item a:hover,
.cc-footer__item a:focus-visible{
  color: var(--cc-surface);
  text-decoration-color: var(--cc-yellow);
}

/* --- Link columns ------------------------------------------------------------ */

.cc-footer__nav{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.cc-footer__nav .cc-footer__label{
  margin-bottom: 6px;
}

.cc-footer__nav a{
  font-size: 14px;
  line-height: 1.5;
  color: var(--cc-on-navy-mute);
}

.cc-footer__nav a:hover,
.cc-footer__nav a:focus-visible,
.cc-footer__nav a[aria-current="page"]{
  color: var(--cc-surface);
}

/* --- Bottom bar -------------------------------------------------------------- */

/* Full-bleed divider, container-width content. */
.cc-footer__bottom{
  border-top: 1px solid var(--cc-navy-line);
}

.cc-footer__bottom-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  width: 100%;
  max-width: var(--cc-container);
  margin: 0 auto;
  padding: 20px var(--cc-gutter);
  font-size: 12px;
  letter-spacing: .3px;
  color: var(--cc-on-navy-far);
}

/* Copyright, VAT number, share capital: one line, dot-separated. */
.cc-footer__company{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0;
}

.cc-footer__company span + span::before{
  content: "\00B7";
  padding: 0 10px;
  color: var(--cc-on-navy-min);
}

.cc-footer__legal{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.cc-footer__legal a{
  color: var(--cc-on-navy-mute);
}

.cc-footer__legal a:hover,
.cc-footer__legal a:focus-visible{
  color: var(--cc-surface);
}

/* ==========================================================================
   12. REVEAL / SKIP LINK / UTILITIES
   ========================================================================== */

/* .cc-reveal is fully visible with JS disabled. Only the .cc-js prefixed rule
   introduces the hidden start state. Never blank the page for a no-JS visitor. */
.cc-reveal{
  /* intentionally no visual state here */
}

.cc-js .cc-reveal{
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s var(--cc-ease),
    transform .7s var(--cc-ease);
  will-change: opacity, transform;
}

.cc-js .cc-reveal.is-visible{
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* --- Staggered reveal ----------------------------------------------------
   Add .cc-reveal--stagger next to .cc-reveal and the CHILDREN animate one
   after the other instead of the container moving as a single slab. That
   difference is most of what makes a grid feel alive rather than static.

   The container itself stops animating (it would double up with its own
   children) and each child picks its delay from --cc-i, multiplied by the
   cadence in --cc-stagger. Only the first twelve are staggered: beyond that
   the wait is longer than anyone will watch, so the rest ride the last step.
   ------------------------------------------------------------------------ */

.cc-js .cc-reveal--stagger{
  opacity: 1;
  transform: none;
}

.cc-js .cc-reveal--stagger > *{
  --cc-i: 11;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .55s var(--cc-ease),
    transform .55s var(--cc-ease);
}

.cc-js .cc-reveal--stagger.is-visible > *{
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--cc-i) * var(--cc-stagger, 70ms));
}

.cc-js .cc-reveal--stagger > :nth-child(1){  --cc-i: 0; }
.cc-js .cc-reveal--stagger > :nth-child(2){  --cc-i: 1; }
.cc-js .cc-reveal--stagger > :nth-child(3){  --cc-i: 2; }
.cc-js .cc-reveal--stagger > :nth-child(4){  --cc-i: 3; }
.cc-js .cc-reveal--stagger > :nth-child(5){  --cc-i: 4; }
.cc-js .cc-reveal--stagger > :nth-child(6){  --cc-i: 5; }
.cc-js .cc-reveal--stagger > :nth-child(7){  --cc-i: 6; }
.cc-js .cc-reveal--stagger > :nth-child(8){  --cc-i: 7; }
.cc-js .cc-reveal--stagger > :nth-child(9){  --cc-i: 8; }
.cc-js .cc-reveal--stagger > :nth-child(10){ --cc-i: 9; }
.cc-js .cc-reveal--stagger > :nth-child(11){ --cc-i: 10; }

/* Long label lists (the 34 merceological sectors, the client groups) need a
   quicker cadence, otherwise the wave outlasts the reader's patience. */
.cc-js .cc-reveal--stagger-fast{ --cc-stagger: 25ms; }

/* --- Section rule that draws itself --------------------------------------
   The 74x4 yellow bar under every section title grows from zero once the
   heading arrives. Small, repeated down the page, and it costs no JS.
   ------------------------------------------------------------------------ */

.cc-js .cc-section-head .cc-section-head__rule{
  width: 0;
  transition: width .7s var(--cc-ease) .12s;
}

.cc-js .cc-section-head.is-visible .cc-section-head__rule{
  width: 74px;
}

/* --- Hover: the top accent line draws across --------------------------- */

.cc-division,
.cc-service,
.cc-sector-card,
.cc-product{
  position: relative;
}

.cc-js .cc-division::after,
.cc-js .cc-service::after,
.cc-js .cc-sector-card::after,
.cc-js .cc-product::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 0;
  height: 3px;
  background: var(--cc-orange);
  transition: width .35s var(--cc-ease);
  pointer-events: none;
}

.cc-js .cc-division:hover::after,
.cc-js .cc-division:focus-within::after,
.cc-js .cc-service:hover::after,
.cc-js .cc-service:focus-within::after,
.cc-js .cc-sector-card:hover::after,
.cc-js .cc-sector-card:focus-visible::after,
.cc-js .cc-product:hover::after,
.cc-js .cc-product:focus-within::after{
  width: 100%;
}

/* Counters tick through intermediate values; without tabular figures the
   digits have different widths and the number jitters as it counts. */
.cc-stats__value{
  font-variant-numeric: tabular-nums;
}

/* --- Wipe reveal ---------------------------------------------------------
   Photographs read better uncovered than faded in: the image is either there
   or it is not, and a left-to-right wipe suits a company that builds machines
   more than a soft dissolve does. Replaces the vertical slide — combining the
   two would be one effect too many.
   ------------------------------------------------------------------------ */

.cc-js .cc-reveal--wipe > *{
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition:
    opacity .45s var(--cc-ease),
    clip-path .75s var(--cc-ease);
}

.cc-js .cc-reveal--wipe.is-visible > *{
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* --- Header that settles on scroll ---------------------------------------
   A restrained compaction: 124px to 104px and the emblem 108px to 92px. It
   gives a laptop back some vertical room without the brand appearing to
   shrink away — an earlier, much harder squeeze (76/52) made the logo look
   like a different size of itself between the top of the page and the rest.

   The two sizes are tokens, so redefining them on the root element moves
   everything that reads them — including the sticky sector tab bar, which
   sits at top: var(--cc-header-h) — with the header instead of leaving a
   gap under it.
   ------------------------------------------------------------------------ */

.cc-js.cc-compact{
  --cc-header-h: 104px;
  --cc-logo-mark: 92px;
}

.cc-header__inner,
.cc-logo__mark,
.cc-logo__img,
.cc-logo__lockup{
  transition:
    height .28s var(--cc-ease),
    width .28s var(--cc-ease);
}

/* The plate's clearance follows the bar height: ease it with the bar so the
   nav glides instead of jumping. */
.cc-logo{ transition: margin-right .28s var(--cc-ease); }

/* The wordmark barely moves, and the tagline stays: at this scale hiding it
   would be a bigger change than the resize itself. */
.cc-js.cc-compact .cc-logo__name{ font-size: 27px; }

/* The company-profile logo follows the bar: 80px -> 68px. */
.cc-js.cc-compact .cc-logo__lockup{ --cc-lockup-k: .85; }

/* --- Watermark drift -----------------------------------------------------
   The giant outlined section numbers sit still today. A slow vertical offset,
   applied from JS on scroll, turns them into a backdrop with depth rather
   than a sticker on the page. Transform only, so it stays on the compositor.
   ------------------------------------------------------------------------ */

.cc-js .cc-section__watermark{
  will-change: transform;
}

/* --- The emblem never moves ---------------------------------------------
   It resizes with the header and does nothing else: no tilt on hover. A
   logo that shifts under the pointer reads as a gimmick on a company that
   builds industrial machinery.
   ------------------------------------------------------------------------ */

.cc-logo__img{
  transition:
    width .28s var(--cc-ease),
    height .28s var(--cc-ease);
}

.cc-skip-link{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  transform: translateY(-120%);
  padding: 12px 22px;
  background: var(--cc-yellow);
  color: var(--cc-ink);
  font-family: var(--cc-font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform .2s var(--cc-ease);
}

.cc-skip-link:focus,
.cc-skip-link:focus-visible{
  transform: translateY(0);
  color: var(--cc-ink);
}

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

/* ==========================================================================
   13. SHARED KEYFRAMES
   ========================================================================== */

@keyframes cc-marquee{
  from{ transform: translateX(0); }
  to{   transform: translateX(-50%); }
}

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

@keyframes cc-ken-burns{
  from{ transform: scale(1)    translate3d(0, 0, 0); }
  to{   transform: scale(1.08) translate3d(0, -1.5%, 0); }
}

@keyframes cc-grow-bar{
  from{ transform: scaleX(0); transform-origin: left center; }
  to{   transform: scaleX(1); transform-origin: left center; }
}

/* ==========================================================================
   14. RESPONSIVE — max-width 1100px  (mobile nav activates)
   ========================================================================== */

/* The primary bar carries nine top-level items (CONTENT-SPEC §6). Measured
   with the production logo it needs 1166px of viewport; below that the
   "Contattaci" CTA is pushed past the right edge and the whole document
   scrolls sideways. There is no room for a nine-item bar between 900px and
   1100px, so the drawer takes over from 1100px down instead of 900px. */
@media (max-width: 1100px){

  /* --- Burger becomes the nav control ----------------------------------- */

  .cc-burger{ display: block; }

  .cc-header__inner{ gap: 14px; }

  /* --- Nav becomes a full-width drawer below the header ------------------ */

  .cc-nav{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 55;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - var(--cc-header-h) - 3px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px var(--cc-gutter) 26px;
    background: var(--cc-navy);
    border-bottom: 3px solid var(--cc-orange);
    box-shadow: 0 24px 48px rgba(0,0,0,.4);
  }

  .cc-nav.is-open{
    display: flex;
    animation: cc-fade-up .28s var(--cc-ease) both;
  }

  .cc-nav__link{
    display: block;
    padding: 16px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--cc-navy-line);
    box-shadow: none;
  }

  .cc-nav__link.is-active{
    color: var(--cc-yellow);
    box-shadow: none;
  }

  .cc-nav .cc-btn{
    width: 100%;
    margin-top: 20px;
    padding: 15px 22px;
    font-size: 14px;
    letter-spacing: 1.5px;
  }

  /* --- Mega menu becomes an inline accordion ---------------------------- */

  .cc-mega{
    position: static;
    border-bottom: 1px solid var(--cc-navy-line);
  }

  .cc-mega__toggle{
    width: 100%;
    justify-content: space-between;
    padding: 16px 0;
    font-size: 16px;
  }

  .cc-mega__toggle::after{
    font-size: 11px;
  }

  .cc-mega__toggle.is-active{
    color: var(--cc-yellow);
    box-shadow: none;
  }

  /* display:none beats the desktop :hover / :focus-within opener, so on touch
     the panel only opens from the .is-open class set by main.js. */
  .cc-mega__panel,
  .cc-mega:hover .cc-mega__panel,
  .cc-mega:focus-within .cc-mega__panel{
    position: static;
    display: none;
    /* Back to row flow: the desktop rule fills columns, which would push a
       second group sideways instead of stacking it under the first. */
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 2px 0 20px 14px;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--cc-yellow);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .cc-mega.is-open .cc-mega__panel{
    display: grid;
  }

  .cc-mega__col,
  .cc-mega__col + .cc-mega__col{
    min-width: 0;
  }

  .cc-mega__link{
    padding: 6px 0;
    font-size: 15px;
    white-space: normal;
  }

  /* --- Second level: a nested accordion, not a flyout ------------------- */

  .cc-mega__sub{
    position: static;
    /* The nested list has to break onto its own line under the row, so the
       row wraps and the list claims the full width below it. */
    flex-wrap: wrap;
    gap: 0;
  }

  .cc-mega__subtoggle{
    /* 44×44: a finger, not a pointer. No negative margins here — the taller
       row is wanted on touch. */
    width: 44px;
    height: 44px;
    margin: 0;
  }

  .cc-mega__subtoggle::after{
    font-size: 11px;
  }

  /* As with the panel above, display:none beats the desktop :hover and
     :focus-within openers: there is no hover on a phone, so the nested list
     opens only from the .is-open class main.js sets. */
  .cc-mega__subpanel,
  .cc-mega__sub:hover .cc-mega__subpanel,
  .cc-mega__sub:focus-within .cc-mega__subpanel{
    position: static;
    display: none;
    flex: 1 0 100%;
    min-width: 0;
    /*
     * The desktop flyout sizes to its longest label and stops at 220px, a cap
     * worked out against the room left at 1102px. None of that geometry exists
     * here — this is a row of the drawer — and max-width clamps a flex item
     * whatever its flex-basis says, so without these two lines the nested list
     * came out 220px wide in a 320px drawer: the right third of every row was
     * dead to a tap, and a sector name that fitted the drawer wrapped anyway.
     */
    width: auto;
    max-width: none;
    gap: 0;
    /* The same yellow indent rule the panel uses, one step further in. */
    padding: 2px 0 10px 14px;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--cc-yellow);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .cc-mega__sub.is-open .cc-mega__subpanel{
    display: flex;
  }

  /* Nothing flies out, so there is no gap to bridge — and a strip left over
     the drawer would swallow taps meant for the links under it. */
  .cc-mega__sub:hover .cc-mega__subpanel::before,
  .cc-mega__sub:focus-within .cc-mega__subpanel::before,
  .cc-mega__sub.is-open .cc-mega__subpanel::before{
    content: none;
  }

  /* --- Language switcher moves into the drawer -------------------------- */

  .cc-lang{
    margin-top: 22px;
    padding-left: 0;
    border-left: 0;
    gap: 10px;
  }

  .cc-lang__btn{
    padding: 8px 14px;
    font-size: 13px;
    border: 1px solid var(--cc-navy-line);
  }

  .cc-lang__btn.is-active{
    border-color: var(--cc-yellow);
  }

  .cc-section-head{ margin-bottom: 44px; }

  /* Two by two: who and how to reach us, then the two link lists. */
  .cc-footer__top{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px 40px;
  }
}

/* ==========================================================================
   15. RESPONSIVE — max-width 900px  (tablet portrait)
   ========================================================================== */

@media (max-width: 900px){

  .cc-section{ padding: 64px 0; }

  .cc-section__watermark{
    font-size: clamp(96px, 24vw, 200px);
  }

  .cc-section-head{ margin-bottom: 36px; }

  /* --- Marquee ----------------------------------------------------------- */

  .cc-marquee__track{ gap: 40px; }

  .cc-marquee__group{
    gap: 40px;
    padding: 12px 0 12px 40px;
  }

  /* --- CTA band ---------------------------------------------------------- */

  .cc-cta__inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    padding: 52px var(--cc-gutter);
  }

  /* --- Footer ------------------------------------------------------------ */

  .cc-footer__top{
    gap: 36px 32px;
    padding: 48px var(--cc-gutter) 40px;
  }

  .cc-footer__bottom-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* One datum per line: once the line wraps, a dot separator would start
     the second one. */
  .cc-footer__company{
    flex-direction: column;
    gap: 4px;
  }

  .cc-footer__company span + span::before{ content: none; }
}

/* ==========================================================================
   16. RESPONSIVE — max-width 640px  (phone)
   ========================================================================== */

@media (max-width: 640px){

  :root{
    --cc-gutter: 20px;
    --cc-header-h: 96px;
    --cc-logo-mark: 78px;
  }

  /* The phone bar already starts at 96px, below the 104px used on desktop:
     without its own pair the header would GROW on scroll here. Same gentle
     proportion as desktop, measured from the smaller starting size. */
  .cc-js.cc-compact{
    --cc-header-h: 82px;
    --cc-logo-mark: 64px;
  }

  .cc-js.cc-compact .cc-logo__name{ font-size: 20px; }

  .cc-section{ padding: 48px 0; }

  .cc-section__watermark{
    font-size: clamp(80px, 30vw, 150px);
    opacity: .35;
  }

  .cc-section-head{
    gap: 14px;
    margin-bottom: 30px;
  }

  .cc-section-head__eyebrow{
    gap: 10px;
    font-size: 11px;
    letter-spacing: 2px;
  }

  .cc-section-head__eyebrow::before,
  .cc-section-head__eyebrow::after{
    width: 24px;
  }

  .cc-section-head__sub{ font-size: 15px; }

  /* --- Buttons go full width on phones ---------------------------------- */

  .cc-btn{
    padding: 15px 24px;
    font-size: 13px;
    letter-spacing: 1.2px;
    white-space: normal;
  }

  .cc-btn--primary,
  .cc-btn--ghost{
    width: 100%;
  }

  .cc-btn--link{
    width: auto;
    padding: 0;
  }

  /* --- Header ------------------------------------------------------------ */

  /* The top of the cut must pass left of the burger: logo width (2.75 x
     height) + gutter, padding, bar height and band come to 2.75h + 128px,
     the burger starts at 100vw - 64px. Capped at 62px, where "C&C" is as
     large as it was in the old 46px logo; 57px at 360. */
  .cc-header{ --cc-lockup-h: clamp(40px, calc((100vw - 200px) / 2.8), 62px); }

  .cc-logo{ gap: 10px; }

  .cc-logo__mark{
    font-size: 13px;
  }

  .cc-logo__name{ font-size: 24px; }

  .cc-logo__tag{
    font-size: 12px;
    letter-spacing: 2px;
  }

  /* --- Marquee ----------------------------------------------------------- */

  .cc-marquee{ margin: 16px 0; }

  .cc-marquee__track{ gap: 28px; }

  .cc-marquee__group{
    gap: 28px;
    padding: 10px 0 10px 28px;
  }

  .cc-marquee__item{ letter-spacing: 1.5px; }

  /* --- CTA band ---------------------------------------------------------- */

  .cc-cta__inner{
    padding: 40px var(--cc-gutter);
    gap: 22px;
  }

  .cc-cta .cc-btn{ width: 100%; }

  .cc-cta__text{ font-size: 15px; }

  /* --- Footer ------------------------------------------------------------ */

  /* Brand and contacts full width; the two short link lists stay side by
     side, a whole screen of single-column links would be a long scroll. */
  .cc-footer__top{
    gap: 32px 24px;
    padding: 40px var(--cc-gutter) 32px;
  }

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

  .cc-footer__logo-img{ height: 60px; }

  .cc-footer__partner img{ width: 220px; }
}

/* ==========================================================================
   17. PRINT
   ========================================================================== */

@media print{
  .cc-progress,
  .cc-header,
  .cc-burger,
  .cc-marquee,
  .cc-cta,
  .cc-skip-link,
  .cc-section__watermark{
    display: none !important;
  }

  body{
    background: var(--cc-surface);
    color: var(--cc-ink);
  }

  .cc-js .cc-reveal{
    opacity: 1 !important;
    transform: none !important;
  }
}