/* ============================================================================
   SQUARE MEDIA AGENCY — home.css
   Caricato SOLO in homepage (link dentro il blocco Visual Composer).

   REVISIONE COMPLETA
   ------------------
   Rimosso tutto ciò che non è usato dal markup della home:
   · componenti Webflow non presenti: griglia 12 colonne, slider, dropdown,
     tab, rich text, e-commerce, form
   · classi di altre pagine del template: blog, accordion, licensing,
     changelog, instagram, skills, servizi, about, project detail,
     utility page, represent
   · #w-node di pagine diverse dalla home (suffissi 780953cc/cf/d3/d4/d5)
   · #rev_slider_8_1_wrapper (Slider Revolution è stato rimosso)
   · .vc_row duplicato tre volte

   CORRETTO
   --------
   · due parentesi graffe di chiusura in eccesso, che rendevano il file
     formalmente non valido
   · h2 { color:#000 !important } RIMOSSO. Serviva ai titoli del footer,
     ma rendeva nero ogni h2 del sito, anche su fondo scuro. Il body ha
     già color:#000, quindi gli h2 sono neri per eredità ovunque tranne
     dentro .dark-section, che li imposta bianchi. Comportamento corretto
     senza forzature.

   AGGIUNTO
   --------
   · sezione .sq-serv ("Cosa facciamo")

   Il file passa da ~2100 a ~830 righe.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. RESET
   ------------------------------------------------------------------------- */

html {
  height: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

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

body { margin: 0; min-height: 100%; }

article, aside, details, figcaption, figure, footer, header, hgroup,
main, menu, nav, section, summary { display: block; }

audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }

a { background-color: transparent; }
a:active, a:hover { outline: 0; }

b, strong { font-weight: bold; }
img { border: 0; max-width: 100%; display: inline-block; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }

button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }
button { overflow: visible; cursor: pointer; -webkit-appearance: button; border: 0; }
button::-moz-focus-inner { border: 0; padding: 0; }

html.w-mod-touch * { background-attachment: scroll !important; }


/* ----------------------------------------------------------------------------
   2. WEBFLOW — solo i componenti usati dalla home
   ------------------------------------------------------------------------- */

@font-face {
  font-family: webflow-icons;
  src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format("truetype");
  font-weight: normal;
  font-style: normal;
}

[class^="w-icon-"], [class*=" w-icon-"] {
  speak: none;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-family: webflow-icons !important;
}
.w-icon-nav-menu:before { content: "\e802"; }
.w-icon-arrow-down:before, .w-icon-dropdown-toggle:before { content: "\e803"; }

.w-block { display: block; }
.w-inline-block { max-width: 100%; display: inline-block; }
.w-embed:before, .w-embed:after { content: " "; grid-area: 1 / 1 / 2 / 2; display: table; }
.w-embed:after { clear: both; }
.w-hidden { display: none; }

.w-container { max-width: 940px; margin-left: auto; margin-right: auto; }
.w-container:before, .w-container:after { content: " "; grid-area: 1 / 1 / 2 / 2; display: table; }
.w-container:after { clear: both; }
@media screen and (max-width: 991px) { .w-container { max-width: 728px; } }
@media screen and (max-width: 479px) { .w-container { max-width: none; } }

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.w-ix-emptyfix:after { content: ""; }
.w-dyn-empty { background-color: #ddd; padding: 10px; }
.w-dyn-hide, .w-dyn-bind-empty, .w-condition-invisible { display: none !important; }
html[data-w-dynpage] [data-w-cloak] { color: transparent !important; }

/* Navigazione */
.w-nav { z-index: 1000; background: #ddd; position: relative; opacity: 1 !important; }
.w-nav:before, .w-nav:after { content: " "; grid-area: 1 / 1 / 2 / 2; display: table; }
.w-nav:after { clear: both; }
.w-nav-menu { float: right; position: relative; }
.w-nav-overlay { width: 100%; display: none; position: absolute; top: 100%; left: 0; right: 0; overflow: hidden; }
.w-nav-overlay [data-nav-menu-open] { top: 0; }
[data-nav-menu-open] {
  text-align: center;
  min-width: 200px;
  background: #c8c8c8;
  position: absolute;
  top: 100%; left: 0; right: 0;
  overflow: visible;
  display: block !important;
}

/* Video di sfondo */
.w-background-video { height: 500px; color: #fff; position: relative; overflow: hidden; }
.w-background-video > video {
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -100;
  background-position: 50%;
  background-size: cover;
  margin: auto;
  position: absolute;
  top: -100%; bottom: -100%; left: -100%; right: -100%;
}
.w-background-video > video::-webkit-media-controls-start-playback-button {
  -webkit-appearance: none;
  display: none !important;
}

/* Lightbox — usata dal cerchio "play reel" nell'hero e nel footer */
.w-lightbox-backdrop {
  cursor: auto;
  letter-spacing: normal;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  visibility: visible;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  color: #fff;
  text-align: center;
  z-index: 2000;
  opacity: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: rgba(0, 0, 0, .9);
  outline: 0;
  font-family: Helvetica Neue, Helvetica, Ubuntu, Segoe UI, Verdana, sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.2;
  list-style: disc;
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0;
  -webkit-transform: translate(0);
}
.w-lightbox-backdrop, .w-lightbox-container { height: 100%; -webkit-overflow-scrolling: touch; overflow: auto; }
.w-lightbox-content { height: 100vh; position: relative; overflow: hidden; }
.w-lightbox-view { width: 100vw; height: 100vh; opacity: 0; position: absolute; }
.w-lightbox-view:before { content: ""; height: 100vh; }
.w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before { height: 86vh; }
.w-lightbox-frame, .w-lightbox-view:before { vertical-align: middle; display: inline-block; }
.w-lightbox-figure { margin: 0; position: relative; }
.w-lightbox-group .w-lightbox-figure { cursor: pointer; }
.w-lightbox-img { width: auto; height: auto; max-width: none; }
.w-lightbox-image { float: none; max-width: 100vw; max-height: 100vh; display: block; }
.w-lightbox-group .w-lightbox-image { max-height: 86vh; }
.w-lightbox-caption {
  text-align: left; text-overflow: ellipsis; white-space: nowrap;
  background: rgba(0, 0, 0, .4); padding: .5em 1em;
  position: absolute; bottom: 0; left: 0; right: 0; overflow: hidden;
}
.w-lightbox-embed { width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.w-lightbox-control {
  width: 4em; cursor: pointer;
  background-position: center; background-repeat: no-repeat; background-size: 24px;
  transition: all .3s; position: absolute; top: 0;
}
.w-lightbox-left {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==");
  display: none; bottom: 0; left: 0;
}
.w-lightbox-right {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+");
  display: none; bottom: 0; right: 0;
}
.w-lightbox-close {
  height: 2.6em;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=");
  background-size: 18px; right: 0;
}
.w-lightbox-strip {
  white-space: nowrap; padding: 0 1vh; line-height: 0;
  position: absolute; bottom: 0; left: 0; right: 0;
  overflow-x: auto; overflow-y: hidden;
}
.w-lightbox-item {
  width: 10vh; box-sizing: content-box; cursor: pointer;
  padding: 2vh 1vh; display: inline-block; -webkit-transform: translate3d(0, 0, 0);
}
.w-lightbox-active { opacity: .3; }
.w-lightbox-thumbnail { height: 10vh; background: #222; position: relative; overflow: hidden; }
.w-lightbox-thumbnail-image { position: absolute; top: 0; left: 0; }
.w-lightbox-thumbnail .w-lightbox-tall { width: 100%; top: 50%; transform: translate(0, -50%); }
.w-lightbox-thumbnail .w-lightbox-wide { height: 100%; left: 50%; transform: translate(-50%); }
.w-lightbox-spinner {
  box-sizing: border-box; width: 40px; height: 40px;
  border: 5px solid rgba(0, 0, 0, .4); border-radius: 50%;
  margin-top: -20px; margin-left: -20px;
  animation: .8s linear infinite spin;
  position: absolute; top: 50%; left: 50%;
}
.w-lightbox-spinner:after {
  content: ""; border: 3px solid transparent; border-bottom-color: #fff;
  border-radius: 50%; position: absolute; top: -4px; bottom: -4px; left: -4px; right: -4px;
}
.w-lightbox-hide { display: none; }
.w-lightbox-noscroll { overflow: hidden; }
.w-lightbox-inactive, .w-lightbox-inactive:hover { opacity: 0; }

@media (min-width: 768px) {
  .w-lightbox-content { height: 96vh; margin-top: 2vh; }
  .w-lightbox-view, .w-lightbox-view:before { height: 96vh; }
  .w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before { height: 84vh; }
  .w-lightbox-image { max-width: 96vw; max-height: 96vh; }
  .w-lightbox-group .w-lightbox-image { max-width: 82.3vw; max-height: 84vh; }
  .w-lightbox-left, .w-lightbox-right { opacity: .5; display: block; }
  .w-lightbox-close { opacity: .8; }
  .w-lightbox-control:hover { opacity: 1; }
}

@keyframes spin {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}


/* ----------------------------------------------------------------------------
   3. VARIABILI
   ------------------------------------------------------------------------- */

:root {
  --dark-black:  #100f10;
  --black-color: #000;
  --white-color: #fff;
  --white-0:     rgba(255, 255, 255, 0);
  --light-grey:  #fbfbfb;
  --color-grey:  #cecece;
  --black-0:     rgba(0, 0, 0, 0);
}


/* ----------------------------------------------------------------------------
   4. TIPOGRAFIA DI BASE
   ------------------------------------------------------------------------- */

body {
  color: #000;
  cursor: none;
  background-color: #fff;
  font-family: 'Gotham Book';
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
}

h1, h2, h3, h4, h5, h6 { font-weight: bold; }

/* NOTA: nessun color qui.
   Gli h ereditano il nero dal body e diventano bianchi dentro .dark-section.
   Il vecchio  h2 { color:#000 !Important }  serviva ai titoli del footer,
   ma rendeva nero ogni h2 anche su fondo scuro. Rimosso. */

h1 { margin: 20px 0 10px; font-size: 160px; font-weight: 700; line-height: 1; }
h2 { margin: 20px 0 10px; font-size: 80px;  font-weight: 600; line-height: 1.1; }
h3 { margin: 20px 0 10px; font-size: 60px;  font-weight: 600; line-height: 1.1; }
h4 { margin: 10px 0;      font-size: 40px;  font-weight: 500; line-height: 1.2; }
h5 { margin: 10px 0;      font-size: 28px;  font-weight: 500; line-height: 1.3; }
h6 { margin: 10px 0;      font-size: 20px;  font-weight: 500; line-height: 1.2; }

p { margin: 0 0 10px; }
li { padding-top: 0; }

a {
  color: #000;
  cursor: none;
  text-decoration: none;
}
a:hover {
  color: var(--dark-black);
  text-decoration: underline;
}

figure { margin: 20px 0; }
figcaption { color: #a6a6a6; text-align: center; margin-top: 5px; font-size: 28px; font-weight: 400; }


/* ----------------------------------------------------------------------------
   5. LAYOUT
   ------------------------------------------------------------------------- */

.section.dark-section {
  background-color: var(--black-color);
  color: var(--white-color);
}

.container {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding: 3rem 1em;
}

.container.nav-container {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
}

.container.home-main-hero-container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding-top: 100px;
  display: flex;
}

.content { position: relative; }

.horizontal-line { height: 1px; background-color: #000; }


/* ----------------------------------------------------------------------------
   6. CURSORE PERSONALIZZATO
   ------------------------------------------------------------------------- */

.cursor {
  z-index: 22;
  width: 100px;
  height: 100px;
  opacity: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: -50px;
  margin-left: -50px;
  display: flex;
  position: fixed;
  top: 0%; left: 0%;
}

.cursor-small-circle {
  z-index: 3;
  width: 16px;
  height: 16px;
  -webkit-backdrop-filter: invert(70%);
  backdrop-filter: invert(70%);
  background-color: rgba(255, 255, 255, .4);
  border-radius: 50%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.cursor-big-circle {
  z-index: 0;
  width: 48px;
  height: 48px;
  background-color: rgba(218, 218, 218, .5);
  border-radius: 50%;
  position: absolute;
  overflow: hidden;
}

.cursor-arrow { z-index: 4; width: 22px; opacity: 1; position: absolute; }

.cursor-video, .cursor-video-parent {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0%; bottom: 0%; left: 0%; right: 0%;
}


/* ----------------------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------------------- */

.section-hero { height: 300vh; position: relative; overflow: visible; }

.main-hero-section-content {
  height: 100vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.hero-full-text-panel {
  height: 65%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  display: flex;
}

.hero-hello-text {
  text-align: left;
  flex-direction: row;
  justify-content: flex-end;
  display: flex;
  position: relative;
}

.home-hero-text {
  margin: 0;
  font-family: 'Gotham Black';
  font-size: 220px;
  color: #000;
  font-weight: 900;
  line-height: .9;
}
.home-hero-text.white-hello { color: #fff; }
.home-hero-text.with-opacity-10pct { font-size: 280px; font-weight: 700; letter-spacing: -10px; }

.hero-grid {
  width: 100%;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 260px;
}

.hero-left-description-content {
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
}

.big-text { margin: 0; font-size: 36px; font-weight: 500; line-height: 1.15; }

.hero-links-grid {
  width: 100%;
  grid-column-gap: 16px;
  grid-row-gap: 5px;
  flex-direction: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 1em;
  display: grid;
}
.hero-links-grid.right-align-hero-links { text-align: right; }

.hero-image-white-text {
  z-index: 2;
  width: 1vw;
  background-color: #100f10;
  position: absolute;
  top: 0%; bottom: 0%; left: 0%; right: 0%;
  overflow: hidden;
}

.hero-container-content {
  width: 100vw;
  height: 100%;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  display: flex;
}

.hero-picture {
  z-index: -2;
  width: 60vw;
  height: 100vh;
  max-width: none;
  object-fit: contain;
  object-position: 50% 100%;
  position: absolute;
  bottom: 0%;
  left: 20vw;
}

.hero-black-gradient {
  z-index: -1;
  height: 25vh;
  background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
  position: absolute;
  bottom: 0%; left: 0%; right: 0%;
}

.white { color: #fff; }
.white-text { color: #fff; }

.link { flex: 0 auto; padding-bottom: 5px; text-decoration: none; position: relative; overflow: hidden; }
.link:hover { text-decoration: none; }

.link-underline {
  width: 100%;
  height: 1px;
  background-color: var(--black-color);
  position: absolute;
  bottom: 0%;
  left: 0%;
}
.link-underline.white { background-color: #fff; }


/* ----------------------------------------------------------------------------
   8. VIDEO / PLAY REEL
   ------------------------------------------------------------------------- */

.play-reel-circle { z-index: 2; width: 200px; min-width: 200px; aspect-ratio: 1 / 1; position: relative; }

.play-reel-circle-holder {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  display: flex;
}

.reel-circle { width: 100%; }

.video-lightbox-panel {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0%; bottom: 0%; left: 0%; right: 0%;
}

.video-lightbox-holder {
  z-index: 2;
  width: 160px;
  aspect-ratio: 1 / 1;
  opacity: 1;
  border-radius: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.video-reel-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0%; bottom: 0%; left: 0%; right: 0%;
}

.video-play-icon { z-index: 2; width: 100%; position: relative; }
.video-play-icon-holder { z-index: 2; width: 50px; position: relative; left: 5%; }

.video-play-icon-parent {
  z-index: 2;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0%; bottom: 0%; left: 0%; right: 0%;
}


/* ----------------------------------------------------------------------------
   9. PROSPETTIVE (animazioni Webflow)
   ------------------------------------------------------------------------- */

.perspective {
  perspective: 2000px;
  perspective-origin: 50% 100%;
  transform-origin: 50% 100%;
  transform: perspective(608px) perspective(549px);
}
.perspective:hover { transform: perspective(1000px) rotate(0) perspective(549px); }
.perspective.large-perspective { perspective: 10000px; }
.perspective-load1:hover { transform: perspective(1000px) rotate(0) perspective(549px); }


/* ----------------------------------------------------------------------------
   10. INTRO
   ------------------------------------------------------------------------- */

.afterpresentation { margin-top: 11em; }
.pre-work-description { margin-top: 1em; }
.heading-container { margin-bottom: 3em; padding: 0 20px; }


/* ----------------------------------------------------------------------------
   11. COSA FACCIAMO

   Nero su bianco: a questo punto della pagina lo sfondo e' gia' chiaro.
   Ogni riga si inverte in nero al passaggio, richiamando il bianco/nero
   del marchio. Fondo dichiarato, quindi indipendente dal contesto.
   ------------------------------------------------------------------------- */

/* annulla eventuali griglie a colonne rimaste da versioni precedenti */
.sq-serv__grid, .sq-serv__list { display: block; grid-template-columns: none; gap: 0; }

.sq-serv {
  position: relative;
  width: 100%;
  background: #fff;
  color: #000;
  padding: clamp(80px, 10vw, 150px) 0 clamp(60px, 7vw, 110px);
}
.sq-serv * { box-sizing: border-box; }
.sq-serv__in { max-width: 1170px; margin: 0 auto; padding: 0 1em; }

.sq-serv__label {
  margin: 0 0 clamp(28px, 3vw, 48px);
  padding: 0;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .38);
}

.sq-serv__list { border-top: 1px solid rgba(0, 0, 0, .16); }

.sq-serv__i {
  position: relative;
  display: grid;
  align-items: center;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, auto);
  gap: 0 28px;
  padding: clamp(20px, 2.3vw, 30px) clamp(14px, 1.6vw, 24px);
  border-bottom: 1px solid rgba(0, 0, 0, .16);
  text-decoration: none;
  color: #000;
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1),
              transform .7s cubic-bezier(.16,1,.3,1);
}
.sq-serv__i.is-in { opacity: 1; transform: none; }

/* il nero sale dal basso e inverte la riga */
.sq-serv__i::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  transform: scaleY(0);
  transform-origin: bottom;
  z-index: 0;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.sq-serv__i:hover::before,
.sq-serv__i:focus-visible::before { transform: scaleY(1); }

.sq-serv__n, .sq-serv__t, .sq-serv__d { position: relative; z-index: 1; min-width: 0; transition: color .3s ease; }

.sq-serv__n {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: rgba(0, 0, 0, .32);
}
.sq-serv__t {
  margin: 0;
  padding: 0;
  font-family: 'Gotham Black', 'Gotham Book', sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
  color: #000;
  transition: color .3s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.sq-serv__d {
  justify-self: end;
  text-align: right;
  max-width: 38ch;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: rgba(0, 0, 0, .45);
}

.sq-serv__i:hover .sq-serv__t,
.sq-serv__i:focus-visible .sq-serv__t { color: #fff; transform: translateX(10px); }
.sq-serv__i:hover .sq-serv__n,
.sq-serv__i:focus-visible .sq-serv__n { color: #E8367A; }
.sq-serv__i:hover .sq-serv__d,
.sq-serv__i:focus-visible .sq-serv__d { color: rgba(255, 255, 255, .7); }
.sq-serv__i:focus-visible { outline: 2px solid #E8367A; outline-offset: 4px; }


/* ----------------------------------------------------------------------------
   12. WORKS
   ------------------------------------------------------------------------- */

/* Contenitori dei testi molto grandi: il taglio va qui, non sull'<html>.
   Su <html> overflow viene propagato al viewport e rompe le animazioni. */
.prework-title,
.footer-title-container,
.infinite-carousel-container { overflow: hidden; }

.prework-title {
  flex-direction: column;
  align-items: center;
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  margin-top: clamp(150px, 26vw, 420px);
}

.hero-text-10pct-opacity { opacity: .1; }

/* Fascia nera del marquee, separatori a tutta larghezza */
.sq-marquee {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
  padding: clamp(10px, 1.4vw, 22px) 0;
}
.sq-marquee .container.line-container {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.sq-marquee .horizontal-line { background-color: rgba(255, 255, 255, .28); }

/* Schede progetto: comparsa allo scroll */
.project-collection-item[data-sq-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1),
              transform .8s cubic-bezier(.16,1,.3,1);
}
.project-collection-item[data-sq-reveal].is-in { opacity: 1; transform: none; }

.project-collection-list {
  direction: ltr;
  column-count: 2;
  column-rule: 0 none transparent;
  flex-direction: column;
  justify-content: center;
  column-gap: 2em;
  display: block;
  overflow: hidden;
}

.project-collection-item { margin-top: 0; padding-top: 0; padding-bottom: 0; }

.project-item {
  width: 100%;
  margin-bottom: 2em;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.project-item:hover { text-decoration: none; }

.project-item-image-holder { position: relative; overflow: hidden; }

.project-item-image { width: 100%; max-height: 750px; object-fit: cover; position: relative; }

.project-item-image-overlay {
  background-color: var(--black-color);
  opacity: 0;
  position: absolute;
  top: 0%; bottom: 0%; left: 0%; right: 0%;
}

.project-item-content { width: 100%; margin-top: 1em; padding-right: 60px; position: relative; }

.project-item-arrow-holder { position: absolute; top: 10px; right: 0%; transform: rotate(-45deg); }

.project-item-arrow { position: relative; }


/* ----------------------------------------------------------------------------
   13. MARQUEE
   ------------------------------------------------------------------------- */

.infinite-carousel-container { width: 100%; position: relative; overflow: hidden; }

.infinit-holder {
  width: 10000vw;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.infinite-carousel { position: relative; }

.infinite-text-holder {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-top: 13px;
  padding-right: 20px;
  display: flex;
}

.infinite-text {
  /* Era bold e nero solo perche' era un <h2>. Da <div> aveva perso
     entrambi: ora colore e peso sono dichiarati qui. */
  color: #fff;
  font-family: 'Gotham Black', 'Gotham Book', sans-serif;
  font-weight: 900;
  letter-spacing: -.02em;
  text-align: center;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  font-size: 6.8vw;
  display: flex;
}


/* ----------------------------------------------------------------------------
   13-bis. CAROSELLO PROGETTI (shortcode square_works)

   Meta' bianco e meta' nero: la linea di stacco corre dietro le immagini.
   Il 46% e' l'unico numero da ritoccare per spostare il punto di taglio.
   ------------------------------------------------------------------------- */

.sqw { background: linear-gradient(to bottom, #fff 0, #fff 46%, #000 46%, #000 100%) !important; }
.sqw .sqw__title { color: #000 !important; }
.sqw .sqw__head { border-bottom-color: rgba(0, 0, 0, .14) !important; }


/* ----------------------------------------------------------------------------
   14. FOOTER
   ------------------------------------------------------------------------- */

.footer {
  text-align: left;
  align-items: flex-start;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

.footer-title-container { margin-bottom: 2em; padding-right: 270px; position: relative; }

.footer-title {
  margin: 0;
  color: #000;
  font-family: 'Gotham Black', 'Gotham Book', sans-serif;
  font-size: 125px;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: .9;
}

.circle-container {
  width: 249px;
  height: 249px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 0%;
  right: 0%;
}

.footer-link-email {
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  font-family: 'Gotham Black';
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  display: flex;
}
.footer-link-email:hover { text-decoration: none; }

.footer-email-arrow { width: 50px; }


/* ----------------------------------------------------------------------------
   15. SFONDO DECORATIVO
   ------------------------------------------------------------------------- */

#backgroundmoved {
  background-repeat: no-repeat;
  background-position: right 0 top 100px;
  background-size: cover;
  background-image: url(https://squaremediaagency.it/wp-content/uploads/2024/02/background-square.png);
}


/* ----------------------------------------------------------------------------
   16. CORREZIONI VISUAL COMPOSER
   ------------------------------------------------------------------------- */

.vc_row, .vc_section { overflow: visible !important; }


/* ----------------------------------------------------------------------------
   17. GRID AREAS DELLA HOME
   ------------------------------------------------------------------------- */

#w-node-c3f32631-6e7f-fd2b-83df-bd58ae7b1a25-78095375 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: end;
  justify-self: start;
}
#w-node-cd46b381-382c-db0e-05b8-21bf07ccbceb-78095375 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
#w-node-cd46b381-382c-db0e-05b8-21bf07ccbcef-78095375 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: end;
  justify-self: end;
}


/* ============================================================================
   18. MEDIA QUERIES
   ============================================================================ */

@media screen and (min-width: 1280px) {
  .container { max-width: 1280px; }
  .home-hero-text { font-size: 240px; color: #000; }
}

@media screen and (min-width: 1440px) {
  .container { max-width: 1440px; }
  .home-hero-text { font-size: 300px; color: #000; }
}

@media screen and (max-width: 1024px) {
  #backgroundmoved { background-position: right 0 top 20px; }
}

@media screen and (max-width: 991px) {
  body { cursor: default; }
  a { cursor: pointer; }

  h1 { font-size: 100px; line-height: 1.2; }
  h3 { font-size: 50px; }

  .container.line-container { padding-top: 1rem; padding-bottom: 1rem; }

  .home-hero-text { font-size: 20vw; color: #000; }
  .home-hero-text.with-opacity-10pct { font-size: 24vw; }

  .big-text { font-size: 30px; }
  .hero-grid { grid-template-columns: 1fr 220px; }

  .cursor { opacity: 0; }

  .project-collection-list { column-gap: 1em; }
  .project-item-arrow { width: 40px; margin-top: -11px; }
  .project-item-content { padding-right: 45px; }

  .pre-work-description { margin-top: 0; }

  .footer-title-container { padding-right: 220px; }
  .footer-title { font-size: 100px; }
  .sq-serv__t { white-space: normal; }
  .circle-container { width: 200px; height: 200px; }

  #w-node-cd46b381-382c-db0e-05b8-21bf07ccbceb-78095375 { grid-column: span 1 / span 1; }
  #w-node-cd46b381-382c-db0e-05b8-21bf07ccbcef-78095375 { grid-area: span 1 / span 1 / span 1 / span 1; }
  #w-node-_741da83a-78d3-18d9-8e12-bc788baec05e-78095375,
  #w-node-d728dff9-af34-8776-b740-b587b3c383f8-78095375 { grid-column: span 4 / span 4; }
}

@media screen and (max-width: 767px) {
  body { font-size: 18px; }

  h1 { font-size: 60px; }
  h2 { font-size: 50px; }
  h3 { font-size: 40px; }
  h4 { font-size: 30px; }
  h5 { font-size: 24px; }

  .hero-picture { width: 90vw; left: -15vw; }
  .big-text { font-size: 25px; }
  .hero-grid { grid-column-gap: 20px; grid-row-gap: 20px; grid-template-columns: 1fr 140px; }

  .heading-container { margin-bottom: 2em; font-size: 15px; padding: 0 10px; }

  .footer-title-container { padding-right: 0; }
  .circle-container { width: 100%; height: auto; position: relative; }
  .footer-title { font-size: 16vw; }

  .play-reel-circle { width: 140px; min-width: 140px; }
  .video-lightbox-holder { width: 110px; }
  .video-play-icon-holder, .video-play-icon-parent { width: 40px; }

  .sq-serv__i { grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; padding: 18px 12px; }
  .sq-serv__d {
    grid-column: 1 / -1; justify-self: start; text-align: left;
    max-width: none; font-size: .84rem; margin-top: 2px;
  }
  .home-hero-text.with-opacity-10pct { font-size: 23vw; letter-spacing: -.02em; }

  #w-node-c3f32631-6e7f-fd2b-83df-bd58ae7b1a25-78095375 { grid-area: span 1 / span 1 / span 1 / span 1; }
  #w-node-cd46b381-382c-db0e-05b8-21bf07ccbceb-78095375,
  #w-node-cd46b381-382c-db0e-05b8-21bf07ccbcef-78095375 { grid-column: span 1 / span 1; }
  #w-node-_741da83a-78d3-18d9-8e12-bc788baec05e-78095375,
  #w-node-d728dff9-af34-8776-b740-b587b3c383f8-78095375 { grid-column: span 2 / span 2; }
}

@media screen and (max-width: 480px) {
  .project-collection-list { column-count: 1; }
  #backgroundmoved { background-position: right 0 top 60px; }
}

@media screen and (max-width: 479px) {
  h1 { font-size: 44px; }
  h2 { font-size: 40px; }
  h3 { font-size: 30px; font-weight: 500; }
  h4 { font-size: 28px; }

  .footer { text-align: left; }

  .container.home-main-hero-container { justify-content: space-between; padding-bottom: 6rem; }

  .home-hero-text { font-size: 20vw; color: #000; }

  .hero-picture {
    width: 120vw; height: 70vh;
    object-fit: cover; object-position: 50% 0%;
    left: -35vw;
  }
  .hero-image-white-text { width: 50vw; }
  .big-text { font-size: 20px; }
  .hero-grid { grid-template-columns: 1fr; align-content: end; }
  .hero-links-grid { text-align: left; }
  .hero-links-grid.right-align-hero-links { min-height: 120px; }
  .hero-black-gradient { height: 60vh; }
  .hero-full-text-panel { height: auto; padding-top: 3rem; }

  .project-item-image { height: 80%; top: 10%; }

  .infinite-text { font-size: 11vw; }

  .footer-title-container { margin-bottom: 1em; }
  .footer-title { font-size: 14vw; }
  .circle-container { margin-top: 1em; }
  .footer-link-email { font-size: 20px; }
  .footer-email-arrow { width: 40px; }

  #w-node-c3f32631-6e7f-fd2b-83df-bd58ae7b1a25-78095375 { grid-column: span 1 / span 1; align-self: start; }
  #w-node-cd46b381-382c-db0e-05b8-21bf07ccbceb-78095375 { grid-area: span 1 / span 1 / span 1 / span 1; }
  #w-node-cd46b381-382c-db0e-05b8-21bf07ccbcef-78095375 {
    grid-area: span 1 / span 1 / span 1 / span 1;
    justify-self: start;
  }
}

@media screen and (max-width: 479px) {
  .home-hero-text.with-opacity-10pct { font-size: 22vw; }
}

@media (prefers-reduced-motion: reduce) {
  .sq-serv__i, .sq-serv__n, .sq-serv__t, .sq-serv__d,
  .project-collection-item[data-sq-reveal] { transition-duration: .01ms !important; }
  .sq-serv__i, .project-collection-item[data-sq-reveal] { opacity: 1; transform: none; }
}