:root {
  --color-purple: #9670D4;
  --color-yellow: #FBE68E;
  --color-black: #111111;
  --color-white: #FFFFFF;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Matches the header/footer's own black background so Safari/Chrome's
   overscroll "rubber-band" bounce reveals black at the top/bottom edges
   instead of a flash of the page's default white. */
html {
  background: var(--color-black);
  /* Offsets in-page anchor jumps (the header nav) by the fixed header's
     height, so the target section lands below it instead of hidden
     underneath — must match main's own padding-top. */
  scroll-padding-top: 65px;
  scroll-behavior: smooth;
}

html, body { max-width: 100%; overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  color: var(--color-black);
  background: var(--color-black);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.05;
}

a { text-decoration: none; color: inherit; }

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: none;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--color-black);
  border-bottom: 1px solid var(--color-black);
}

.site-header .logo {
  display: flex;
  align-items: center;
}

.site-header .logo-img {
  display: block;
  height: 34px;
  width: auto;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-nav a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-white);
  opacity: .85;
  transition: opacity .15s ease, color .15s ease;
}

.header-nav a:hover {
  opacity: 1;
  color: var(--color-yellow);
}

.header-nav .nav-separator {
  color: var(--color-white);
  opacity: .4;
  font-size: 14px;
}

.header-socials {
  display: flex;
  align-items: center;
  gap: 16px;
}

.icon-link {
  display: flex;
  opacity: .85;
  transition: opacity .15s ease;
}

.icon-link:hover { opacity: 1; }

.header-socials .icon-link { color: var(--color-white); }

main {
  /* Must match .site-header's real rendered height exactly — any mismatch
     leaves a gap between the fixed header and the page content below it. */
  padding-top: 65px;
}

.hero {
  padding: 76px 24px 73.5px;
  background: var(--color-yellow);
}

.hero-headline-wrap {
  /* No max-width: .hero-caption is positioned right:0 relative to this,
     so it needs to span the section's full width for the caption to sit
     flush against the right edge — mirroring the headline's flush-left
     start — instead of stopping short at an inner cap. */
  max-width: none;
}

.hero-title {
  /* Positioned ancestor for .hero-caption (a sibling of the three
     .hero-line spans, last in source order — see .hero-caption comment). */
  position: relative;
  font-size: clamp(44px, 10vw, 156px);
  line-height: .88;
  color: var(--color-purple);
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.hero-line { display: block; }

.hero-word {
  display: inline-block;
  animation: snapIn .18s ease-out both;
}

.hero-dot {
  display: inline-block;
  width: .16em;
  height: .16em;
  margin-left: .04em;
  vertical-align: baseline;
  transform: translateY(.01em);
}

.hero-dot svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes snapIn {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}

.hero-caption {
  /* Absolutely positioned and placed last in the DOM (a sibling after all
     three .hero-line spans, not nested inside "Build."'s line) so it can
     never stretch a line's height, and so the mobile stacked layout (where
     this becomes position:static) reads Shape/Build/Elevate/caption in
     order instead of the caption landing between Build and Elevate.
     top:50% is relative to .hero-title's full 3-line height, which lands
     it vertically centered on the middle "Build." line, same as before. */
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  max-width: 450px;
  text-align: right;
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: none;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-black);
}

@media (prefers-reduced-motion: reduce) {
  .hero-word { animation: none; }
  .chi-block { opacity: 1; transform: none; transition: none; }
}

.chi-siamo {
  padding: 78px 24px 64px;
  background: var(--color-purple);
}

.chi-group {
  max-width: 1220px;
  margin: 0 auto;
}

.chi-group + .chi-group { margin-top: 140px; }

#team {
  /* Extra offset (stacks with html's scroll-padding-top) so the "About"
     nav link stops scrolling a bit earlier, leaving breathing room above
     the title instead of landing flush against the header. */
  scroll-margin-top: 80px;
}

.chi-group-title {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--color-yellow);
  font-size: clamp(24px, 3.2vw, 37px);
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 36px;
}

.chi-group-title .title-text,
.servizi-intro-title .title-text {
  flex: 0 1 auto;
  text-align: center;
}

.chi-group-title .title-line,
.servizi-intro-title .title-line {
  /* Grows to fill the leftover width on either side of the text — up to
     the same edges as the content below (the .chi-grid boxes, or this
     title's own max-width) — and shrinks toward 0 first if the text
     itself needs the room, so the title never wraps because of this. */
  flex: 1 1 0;
  min-width: 12px;
  height: 2px;
  background: var(--color-yellow);
}

.chi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
}

.chi-block {
  border-radius: 18px;
  padding: 30px;
  display: flex;
  align-items: flex-start;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-black);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .5s ease;
}

.chi-block.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Blocks sharing a grid row enter the viewport at the same scroll
   position; staggering their transition-delay by DOM order still reads
   as "one at a time" instead of both popping in together. */
.chi-grid .chi-block:nth-child(2) { transition-delay: .12s; }
.chi-grid .chi-block:nth-child(3) { transition-delay: .24s; }

.chi-para-a,
.chi-team-block-a {
  grid-column: 1 / 2;
  grid-row: 1;
}

.chi-para-b,
.chi-team-block-b {
  grid-column: 2 / 3;
  grid-row: 1;
}

.chi-para-c,
.chi-team-block-c {
  grid-column: 1 / 3;
  grid-row: 2;
}

.chi-para-a {
  background: rgba(251, 230, 142, .88);
  border: 1.5px solid var(--color-black);
  color: var(--color-purple);
  align-items: center;
}

.chi-para-b {
  background: rgba(255, 255, 255, .88);
  border: 1.5px solid var(--color-black);
}

.chi-para-c {
  /* Lighter tint of the brand purple, not the section's own purple, so the
     block still reads as a distinct color against its background. */
  background: rgba(190, 163, 232, .88);
  border: 1.5px solid var(--color-white);
  color: var(--color-yellow);
  /* Short single-sentence block now that the closing line was trimmed:
     centering reads better than top-aligned text leaving empty space below. */
  align-items: center;
  /* .chi-block's text-align:center only centers text within its own
     shrink-to-fit flex-item box, which does nothing when that box is as
     narrow as the (single-line) text itself — the item's position in the
     wider flex container is controlled by justify-content instead. */
  justify-content: center;
}

.chi-team-block-a {
  background: rgba(255, 255, 255, .88);
  border: 1.5px solid var(--color-black);
  /* Short single-sentence block: centering reads better than top-aligned
     text leaving visible empty space below it. */
  align-items: center;
}

.chi-team-block-b {
  /* Same lighter purple tint as .chi-para-c, not the section's own purple. */
  background: rgba(190, 163, 232, .88);
  border: 1.5px solid var(--color-white);
  color: var(--color-yellow);
}

.chi-team-block-c {
  background: rgba(251, 230, 142, .88);
  border: 1.5px solid var(--color-black);
  color: var(--color-purple);
}

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.mq-row { position: relative; overflow: hidden; padding: 20px 0; cursor: pointer; }

.mq-icon {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .08em;
  padding: 8px 16px;
  border-radius: 14px 0 0 0;
  pointer-events: none;
  z-index: 2;
}

.mq-icon-text::before {
  content: 'SCOPRI';
}

.mq-row.is-open .mq-icon-text::before {
  content: 'CHIUDI';
}

.mq-icon-plus {
  width: 12px;
  height: 12px;
  position: relative;
  flex-shrink: 0;
  transition: transform .25s ease;
}

.mq-icon-plus::before,
.mq-icon-plus::after {
  content: '';
  position: absolute;
  background: var(--color-white);
  border-radius: 1px;
}

.mq-icon-plus::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.mq-icon-plus::after { left: 50%; top: 0; height: 100%; width: 2px; transform: translateX(-50%); }

.mq-row.is-open .mq-icon-plus { transform: rotate(45deg); }

.mq-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(24px, 5vw, 40px);
}

.mq-icon-mark {
  width: 2.4em;
  height: 2.4em;
  vertical-align: middle;
  margin: -.15em -.4em 0 -.3em;
}

.mq-shape { background: var(--color-yellow); color: var(--color-purple); }
.mq-shape .mq-track { animation: marquee-left 18s linear infinite; }

.mq-build { background: var(--color-purple); color: var(--color-yellow); }
.mq-build .mq-track { animation: marquee-right 20s linear infinite; }

.mq-elevate { background: var(--color-yellow); color: var(--color-purple); }
.mq-elevate .mq-track { animation: marquee-left 16s linear infinite; }

.mq-row.is-open .mq-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  /* .mq-row .mq-track matches the specificity of .mq-shape/.mq-build/.mq-elevate .mq-track
     (two classes each) so this actually overrides them; a bare .mq-track rule would lose
     the specificity battle regardless of source order. */
  .mq-row .mq-track { animation: none; }
}

.servizi-intro {
  padding: 64px 24px 48px;
  background: var(--color-purple);
  text-align: center;
}

.servizi-intro-subtitle {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.servizi-intro-title {
  /* Matches .chi-group's width, same as the chi-siamo titles' own lines,
     so both sets of flanking lines grow to the same length. */
  max-width: 1220px;
  margin-left: auto;
  margin-right: auto;
}

.servizi-intro-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-yellow);
  font-size: clamp(24px, 3.2vw, 37px);
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.servizi-intro-subtitle {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.3;
  margin-bottom: 20px;
}

.servizi-intro-text {
  /* Matches .chi-group's width, same as the colored chi-siamo boxes above. */
  max-width: 1220px;
  margin-left: auto;
  margin-right: auto;
  color: var(--color-black);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  opacity: .85;
}

.servizi-panel-wrap {
  background: var(--color-black);
  padding: 44px 24px;
}

.servizi-panel-wrap[hidden] { display: none; }

.servizi-panel-intro {
  max-width: 1020px;
  margin: 0 auto 32px;
  color: var(--color-white);
  text-align: center;
}

.servizi-panel-title {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-yellow);
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(24px, 3.2vw, 37px);
  line-height: 1.1;
  margin-bottom: 36px;
}

.servizi-prelist {
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  opacity: .85;
}

.servizi-forwho {
  font-style: normal;
  font-weight: 700;
  color: var(--color-purple);
  font-size: 23px;
  line-height: 1.5;
  margin-top: 22px;
}

.servizi-panel {
  list-style: none;
  display: grid;
  /* max-content columns (not 1fr) so each column is only as wide as the
     (uniform, JS-sized) chips themselves — 1fr split the full 860px
     container in half, leaving the chips centered in a much wider column
     than their own width and reading as far apart despite the 12px gap. */
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  /* Without this, grid's default stretch makes both cells in a row match
     the tallest one — so opening one chip's detail also grows its
     row-mate's box, even though its own content never changed. */
  align-items: start;
  gap: 12px 16px;
  max-width: 100%;
}

.servizi-panel li {
  background: #1C1C1C;
  border: 1px solid rgba(251, 230, 142, .4);
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--color-white);
  font-size: 17px;
  display: flex;
  flex-direction: column;
  /* Width is set inline by sizeServiziChips() in main.js — CSS alone can't
     make two independently auto-sized grid columns match the same width,
     which is what "every chip = size of the longest chip" requires. */
  justify-self: center;
}

/* When a panel has an odd number of chips, the last one would otherwise sit
   alone under the first column, leaving a visible gap next to it — span
   both columns and center it instead. Matches only when the last item's
   position is odd, i.e. only when the total count is odd. */
.servizi-panel li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.servizi-chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.servizi-chip-name {
  flex: 1;
  text-align: center;
  text-transform: capitalize;
  font-weight: 700;
  font-size: 19px;
}

.servizi-chip-spacer,
.servizi-chip-toggle {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

.servizi-chip-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.servizi-chip-plus {
  width: 17px;
  height: 17px;
  position: relative;
  transition: transform .25s ease;
}

.servizi-chip-plus::before,
.servizi-chip-plus::after {
  content: '';
  position: absolute;
  background: var(--color-purple);
  border-radius: 1px;
}

.servizi-chip-plus::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.servizi-chip-plus::after { left: 50%; top: 0; height: 100%; width: 2px; transform: translateX(-50%); }

.servizi-chip.is-open .servizi-chip-plus { transform: rotate(45deg); }

.servizi-chip-toggle:hover .servizi-chip-plus::before,
.servizi-chip-toggle:hover .servizi-chip-plus::after {
  background: var(--color-yellow);
}

.servizi-chip-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #333;
  text-align: center;
}

.servizi-chip-detail[hidden] { display: none; }

.servizi-chip-detail p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-white);
  opacity: .85;
}

.faq {
  padding: 96px 24px;
  background: var(--color-purple);
}

.faq-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: 36px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.faq-title {
  color: var(--color-yellow);
  font-size: clamp(48px, 8vw, 88px);
  line-height: .9;
  text-transform: uppercase;
}

.faq-list { display: flex; flex-direction: column; }

.faq-item { border-bottom: 2px solid var(--color-yellow); }

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  color: var(--color-black);
}

.faq-icon {
  flex-shrink: 0;
  margin-left: 16px;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform .25s ease;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--color-black);
  border-radius: 2px;
}

.faq-icon::before { top: 50%; left: 0; width: 100%; height: 3px; transform: translateY(-50%); }
.faq-icon::after { left: 50%; top: 0; height: 100%; width: 3px; transform: translateX(-50%); }

.faq-item.is-open .faq-icon { transform: rotate(45deg); }

.faq-q:hover .faq-icon::before,
.faq-q:hover .faq-icon::after {
  background: var(--color-yellow);
}

.faq-a {
  padding: 0 0 20px;
  max-width: 520px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-black);
}

.faq-a a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq-a[hidden] { display: none; }

.cta {
  position: relative;
  padding: 64px 24px 150px;
  background: var(--color-yellow);
  text-align: center;
  overflow: hidden;
}

.cta-arc {
  /* Bleeds past .cta's own 24px side padding to the section's full outer
     width, so the arc's ends reach the true screen edges instead of
     stopping at the padded content box. */
  width: calc(100% + 48px);
  margin-left: -24px;
  margin-right: -24px;
  height: auto;
  /* Matches the viewBox ratio exactly so preserveAspectRatio="meet" never
     letterboxes (shrinks to fit and centers with empty side margins) —
     a fixed max-height alone let the box's aspect ratio drift from the
     viewBox's at wide viewports, which was what kept it off the edges. */
  aspect-ratio: 1000 / 260;
}

.cta-arc-text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 42px;
  fill: var(--color-purple);
}

.arc-mark-glyph {
  fill: transparent;
}

.btn-cta {
  position: relative;
  z-index: 2;
  background: var(--color-purple);
  color: var(--color-white);
  /* .cta-arc's SVG box has ~50px of empty space below the curve's visible
     low point (the viewBox path stops well short of the box's bottom
     edge), so pulling this flush needs a much bigger pull than the gap
     between the two boxes alone would suggest. */
  margin-top: -48px;
  /* Padding trimmed as font-size grows so the button's own box stays the
     same size — only the text inside gets bigger. */
  padding: 21px 47px;
  font-size: 22px;
  transition: background-color .15s ease;
}

.btn-cta:hover {
  background: var(--color-black);
}

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 24px;
  background: var(--color-black);
  color: var(--color-white);
  font-size: 14px;
  text-align: center;
}

.site-footer .socials { display: flex; align-items: center; gap: 20px; }
.site-footer .icon-link { color: var(--color-white); }
.site-footer a { opacity: .8; }
.site-footer a:hover { opacity: 1; }

.footer-location { opacity: .85; }

.footer-privacy {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.privacy-modal[hidden] { display: none; }

.privacy-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, .7);
}

.privacy-modal-content {
  position: relative;
  z-index: 1;
  background: var(--color-white);
  color: var(--color-black);
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 24px;
  padding: 48px 40px 40px;
}

.privacy-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-purple);
  color: var(--color-white);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease;
}

.privacy-modal-close:hover { background: var(--color-black); }

.privacy-modal-content h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-purple);
  font-size: clamp(26px, 4vw, 34px);
  margin-bottom: 8px;
}

.privacy-updated {
  font-size: 13px;
  opacity: .6;
  margin-bottom: 24px;
}

.privacy-modal-content h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  margin: 28px 0 10px;
}

.privacy-modal-content h3:first-of-type { margin-top: 0; }

.privacy-modal-content p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 12px;
}

.privacy-modal-content ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.privacy-modal-content li {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 6px;
}

.privacy-modal-content a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.privacy-open { overflow: hidden; }

@media (max-width: 640px) {
  .site-header { padding: 12px 16px; }
  .header-nav { display: none; }
  html { scroll-padding-top: 57px; }
  main { padding-top: 57px; }
  .hero { padding: 32px 16px; }
  .privacy-modal { padding: 16px; }
  .privacy-modal-content { padding: 40px 20px 28px; }
  /* Same floating-right treatment as desktop, just scaled down to fit. */
  .hero-caption { max-width: 140px; font-size: 11px; line-height: 1.5; }
  .chi-grid { grid-template-columns: 1fr; }
  .chi-para-a, .chi-para-b, .chi-para-c,
  .chi-team-block-a, .chi-team-block-b, .chi-team-block-c {
    grid-column: 1 / 2;
    grid-row: auto;
  }
  .mq-track { font-size: 24px; }
  /* Two columns like desktop, but 1fr instead of max-content: the desktop
     sizing (each column exactly as wide as its widest chip) can overflow a
     narrow viewport when a chip name is long ("Web Design & Development"),
     so columns split the available width evenly and long names wrap
     instead of forcing the column wider than the screen. */
  .servizi-panel { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; gap: 16px; }
  .faq-a { max-width: none; }
  .cta-arc-text { font-size: 24px; }
  .btn-cta { padding: 16px 32px; font-size: 15px; }
}