@import url(https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,300&family=Barlow+Condensed:wght@500;600;700&display=swap);
:host {
  /* Brand colors — sovrascrivibili dal sito Webflow */
  --tc-accent: #e8510a;
  --tc-accent-soft: #fef0ea;
  --tc-text: #0a0a0a;
  --tc-text-muted: #777;
  --tc-text-subtle: #999;
  --tc-text-faint: #bbb;
  --tc-text-light: #aaa;

  --tc-bg: #ffffff;
  --tc-bg-soft: #fafafa;
  --tc-bg-muted: #f5f5f5;
  --tc-bg-section: #f7f7f7;
  --tc-bg-dark: #0a0a0a;
  --tc-bg-darker: #060606;

  --tc-border: #ebebeb;
  --tc-border-soft: #f0f0f0;
  --tc-border-medium: #e0e0e0;
  --tc-border-dark: #111;

  /* Typography */
  --tc-font-body: "Barlow", system-ui, -apple-system, sans-serif;
  --tc-font-display: "Barlow Condensed", "Barlow", sans-serif;

  /* Radii */
  --tc-radius-sm: 3px;
  --tc-radius: 4px;
  --tc-radius-md: 6px;
  --tc-radius-lg: 8px;

  /* Spacing scale */
  --tc-space-1: 4px;
  --tc-space-2: 8px;
  --tc-space-3: 12px;
  --tc-space-4: 16px;
  --tc-space-5: 20px;
  --tc-space-6: 24px;
  --tc-space-8: 32px;
  --tc-space-10: 40px;
  --tc-space-12: 48px;
  --tc-space-16: 64px;
  --tc-space-20: 80px;

  /* Container */
  --tc-section-padding-x: 32px;
}

/* L'host (custom element) è inline di default: forzato a blocco a piena larghezza
   così ogni componente occupa il 100% della Cell/contenitore Webflow in cui è inserito. */
:host {
  display: block;
  width: 100%;
}

/* Reset locale al Shadow DOM */
:host,
:host * {
  box-sizing: border-box;
}

.RABbnv0HmBkmqdZY3BAr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--tc-font-body);
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--tc-radius);
  cursor: pointer;
  transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease,
    border-color 0.18s ease;
  border: 1px solid transparent;
  line-height: 1;
  white-space: nowrap;
}

.RABbnv0HmBkmqdZY3BAr:hover {
  opacity: 0.88;
}

.dO9OXOG0mxqHBNDJ9beg {
  padding: 8px 18px;
  font-size: 12px;
}

.fQmuln5l2RIIYguxD6V5 {
  padding: 12px 24px;
  font-size: 13px;
}

.pjM0A9FYEZYjTZzvHjdw {
  padding: 14px 32px;
  font-size: 14px;
}

.rZcRdB2DeHSzHiaxN7bA {
  background: var(--tc-accent);
  color: #fff;
}

.LM2oQqmscu9WnHt5wpjq {
  background: transparent;
  color: var(--tc-text);
  border-color: var(--tc-border-medium);
  font-weight: 400;
}

.Wt1fYMiBAgiPjTLkktZR {
  background: transparent;
  color: var(--tc-text);
  font-weight: 400;
  border-color: var(--tc-border-medium);
}

.qi9rJuckLPaITRyfmRxU {
  background: var(--tc-text);
  color: #fff;
  font-weight: 500;
}

.YgEVa_C_2DWrPMQby2Q4 {
  background: transparent;
  color: var(--tc-accent);
  padding: 0;
  border: none;
  font-size: 13px;
  font-weight: 400;
  gap: 6px;
}

.YgEVa_C_2DWrPMQby2Q4:hover {
  opacity: 1;
  transform: translateX(2px);
}

.q8U9Ixbq8RxASPl7mElS {
  width: 100%;
}

/* Service Card — cover editoriale (sfondo full-bleed + overlay + contenuto).
   Diversa da CarCard: niente blocco immagine + body separati. */

.Yt9PylIdCPkuDo3GWKZb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: clamp(300px, 72vw, 380px);
  border-radius: var(--tc-radius-lg);
  overflow: hidden;
  font-family: var(--tc-font-body);
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
  --scrim-bottom: 1;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

a.Yt9PylIdCPkuDo3GWKZb,
button.Yt9PylIdCPkuDo3GWKZb {
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  text-align: inherit;
  appearance: none;
  background: transparent;
}

a.Yt9PylIdCPkuDo3GWKZb:focus-visible,
button.Yt9PylIdCPkuDo3GWKZb:focus-visible {
  outline: 2px solid var(--tc-accent);
  outline-offset: 3px;
}

.Yt9PylIdCPkuDo3GWKZb:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2);
}

.mkRyWroUlCRuke0T_EVB {
  /* overlay neutro — stili in .tintLight / .fallbackLight */
}

._1OAiZHfqqA1Rt0j7Jsg {
  border-color: rgba(255, 255, 255, 0.06);
}

.bNCJILfzU57BNZLT3GEv:hover {
  box-shadow: 0 22px 52px rgba(232, 81, 10, 0.22);
}

/* ── Media (sempre full-bleed) ─────────────────────────────────────── */

.cdsWP0zcxz59nQWV3mCO {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
}

.QKmoit0_VadYwSprvIMw {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.Yt9PylIdCPkuDo3GWKZb:hover .QKmoit0_VadYwSprvIMw {
  transform: scale(1.06);
}

.NVvMZLU8WHWQT3n1AHtE {
  width: 100%;
  height: 100%;
  position: relative;
}

.NVvMZLU8WHWQT3n1AHtE::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 256 256%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23n%29%27/%3E%3C/svg%3E");
  background-size: 128px 128px;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.bUyiEFO5ffOYdPKVzFdv {
  background: linear-gradient(
    155deg,
    #2a2a2a 0%,
    #121212 42%,
    #0a0a0a 100%
  );
}

.h5GrfIo3Wqh8X4aDMsm4 {
  background: linear-gradient(
    155deg,
    #f06a28 0%,
    var(--tc-accent) 28%,
    #6b2208 58%,
    #0a0a0a 100%
  );
}

.EMCmFlmxJO9LAFUnYo9v {
  background: linear-gradient(
    160deg,
    #3a3a3a 0%,
    #1a1a1a 55%,
    #0c0c0c 100%
  );
}

.LWNRetS4VNtrFkWxSxMQ {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.08) 28%,
    rgba(0, 0, 0, calc(0.55 * var(--scrim-bottom))) 58%,
    rgba(0, 0, 0, calc(0.88 * var(--scrim-bottom))) 82%,
    rgba(0, 0, 0, calc(0.96 * var(--scrim-bottom))) 100%
  );
  pointer-events: none;
}

.cbEHtu11M7xB_tN5mSkP {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.XXIqgTLmP6xMXD_nHEtx {
  background: linear-gradient(
    200deg,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 100%
  );
}

.LGyA6OBiDkRjTPSD2dXy {
  background: linear-gradient(
    180deg,
    rgba(232, 81, 10, 0.08) 0%,
    rgba(232, 81, 10, 0.22) 55%,
    rgba(80, 24, 4, 0.55) 100%
  );
}

.bPweV2kiiJJe5azI7wEF {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.2) 100%
  );
}

.g0Kz3u7g7WGKSL360lYT {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--tc-accent) 0%,
    rgba(232, 81, 10, 0.35) 45%,
    transparent 100%
  );
  pointer-events: none;
}

/* ── Contenuto sopra overlay ───────────────────────────────────────── */

.TsdC72wneIVaRfgWBHST {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 4vw, 28px);
  box-sizing: border-box;
}

.msSztz712fWcjgELuRNd {
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.OvIF9J0UA9EIVsbmwuwz {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding-top: clamp(16px, 3vw, 24px);
}

.O2GfKT507z0YwPMmE5bt {
  font-family: var(--tc-font-display);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.08;
  margin: 0 0 10px;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.tY8hDjqlzvNM3LWCGUhE {
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0.95;
}

.eHY5e3bQOtdwHSLNtm68 {
  font-size: clamp(12.5px, 1.4vw, 14px);
  line-height: 1.65;
  margin: 0 0 clamp(16px, 2.5vw, 22px);
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
  max-width: 34ch;
}

.g4ie_hGa1WdHxeAOynaT {
  align-self: flex-start;
  flex-shrink: 0;
}

.kGrVC_aHJxJcCxPzLvB5 {
  pointer-events: none;
}

/* Dark su overlay nero: bordo vetro per staccare dal fondo */
.ui8wmZTR57s0McWE4_Nx.ui8wmZTR57s0McWE4_Nx {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 500;
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.ui8wmZTR57s0McWE4_Nx.ui8wmZTR57s0McWE4_Nx:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.38);
  opacity: 1;
}

/* ── Desktop griglia (3 colonne) ───────────────────────────────────── */

@media (min-width: 901px) {
  .Yt9PylIdCPkuDo3GWKZb {
    aspect-ratio: 3 / 4;
    min-height: 400px;
    max-height: 520px;
  }
}

/* ── Tablet ────────────────────────────────────────────────────────── */

@media (min-width: 601px) and (max-width: 900px) {
  .Yt9PylIdCPkuDo3GWKZb {
    aspect-ratio: 16 / 11;
    min-height: 280px;
    max-height: none;
  }
}

/* ── Mobile ────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .Yt9PylIdCPkuDo3GWKZb {
    aspect-ratio: 16 / 12;
    min-height: 280px;
    max-height: none;
    border-radius: var(--tc-radius-md);
  }

  .Yt9PylIdCPkuDo3GWKZb:hover {
    transform: translateY(-2px);
  }

  .eHY5e3bQOtdwHSLNtm68 {
    max-width: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  .Yt9PylIdCPkuDo3GWKZb,
  .QKmoit0_VadYwSprvIMw {
    transition: none;
  }

  .Yt9PylIdCPkuDo3GWKZb:hover {
    transform: none;
  }

  .Yt9PylIdCPkuDo3GWKZb:hover .QKmoit0_VadYwSprvIMw {
    transform: none;
  }
}