/*
  Story + contact pass
  Scope intentionally limited to .clients, .manifesto and .contact.
  This file is loaded after the existing passes.
*/

/* CLIENTS — proof becomes a geographic field rather than a logo ribbon. */
.clients {
  min-height: 100svh;
  padding: clamp(38px, 5.4vh, 70px) 0 clamp(28px, 4vh, 52px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: center;
  background: #efede7;
}

.clients-heading {
  position: relative;
  min-height: min(405px, 58svh);
  padding: 0 var(--page);
  display: grid;
  grid-template-columns: minmax(310px, .9fr) minmax(470px, 1.1fr);
  gap: clamp(42px, 7vw, 132px);
  align-items: center;
}

.clients-heading h2 {
  position: relative;
  z-index: 2;
  max-width: 9.5ch;
  margin: 0;
  font-size: clamp(54px, 5.15vw, 88px);
  line-height: .96;
  letter-spacing: -.075em;
}

.clients-heading > p {
  position: relative;
  z-index: 1;
  justify-self: end;
  width: min(100%, 660px);
  min-height: 330px;
  margin: 0;
  padding: clamp(30px, 3vw, 48px);
  overflow: hidden;
  border: 1px solid rgba(21,23,27,.14);
  border-radius: 34px;
  background:
    linear-gradient(135deg, transparent 0 47%, rgba(238,120,35,.92) 47.2% 47.8%, transparent 48% 100%),
    linear-gradient(45deg, transparent 0 66%, rgba(69,105,188,.9) 66.2% 66.7%, transparent 67% 100%),
    linear-gradient(120deg, rgba(255,255,255,.94), rgba(220,228,238,.82));
  box-shadow: 0 24px 56px rgba(21,23,27,.08);
  color: transparent;
  font-size: 0 !important;
}

.clients-heading > p::before {
  content: '20+';
  position: absolute;
  top: clamp(24px, 3vw, 45px);
  left: clamp(28px, 3.4vw, 54px);
  color: #15171b;
  font: 700 clamp(82px, 10vw, 152px)/.72 var(--sans);
  letter-spacing: -.11em;
}

.clients-heading > p::after {
  content: 'SETTORI ATTRAVERSATI\A IN ITALIA E ALL’ESTERO\A\A Ogni settore cambia linguaggio.\A La regia resta riconoscibile.';
  position: absolute;
  right: clamp(26px, 3vw, 48px);
  bottom: clamp(23px, 3vw, 43px);
  left: clamp(29px, 3.6vw, 58px);
  white-space: pre-line;
  color: #15171b;
  font: 600 clamp(11px, .86vw, 14px)/1.48 var(--sans);
  letter-spacing: -.025em;
}

.clients-context {
  position: absolute;
  z-index: 3;
  right: calc(var(--page) + clamp(28px, 3vw, 52px));
  bottom: clamp(28px, 3vw, 47px);
  width: min(39%, 260px);
  margin: 0;
  padding: 0;
  display: block;
  border: 0;
  color: transparent;
}
.clients-context strong,
.clients-context p { display: none; }
.clients-context::before {
  content: '↗  02 — ITALIA\A↙  01 — ESTERO';
  display: block;
  white-space: pre-line;
  color: rgba(21,23,27,.56);
  font: 600 9px/1.65 var(--mono);
  letter-spacing: .09em;
}

.clients .logo-river {
  min-height: 98px;
  margin-top: 0;
  padding-block: clamp(18px, 2.3vh, 28px);
  border-top: 1px solid rgba(21,23,27,.13);
  border-bottom: 1px solid rgba(21,23,27,.13);
  background: rgba(255,255,255,.34);
}
.clients .logo-track img { height: clamp(40px, 3.6vw, 58px); max-width: clamp(135px, 10vw, 175px); opacity: .72; }

/* MANIFESTO — a faceted editorial interruption, not just oversized type. */
.manifesto.manifesto-motto {
  position: relative;
  min-height: 100svh;
  padding: clamp(76px, 9vh, 112px) var(--page);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  background: #111318;
}
.manifesto.manifesto-motto::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(132deg, transparent 0 43%, rgba(238,120,35,.88) 43.1% 43.35%, transparent 43.6% 100%),
    linear-gradient(47deg, transparent 0 72%, rgba(69,105,188,.82) 72.1% 72.35%, transparent 72.6% 100%),
    linear-gradient(142deg, #141720 0%, #191d27 53%, #291c24 100%);
}
.manifesto.manifesto-motto::after {
  content: 'P';
  position: absolute;
  z-index: -1;
  right: -1vw;
  bottom: -23vh;
  color: rgba(255,255,255,.035);
  font: 700 min(63vw, 900px)/.72 var(--sans);
  letter-spacing: -.18em;
  pointer-events: none;
}
.manifesto-spotlight {
  z-index: -1 !important;
  width: min(44vw, 650px) !important;
  height: min(44vw, 650px) !important;
  opacity: .75 !important;
  background: conic-gradient(from 22deg, rgba(238,120,35,.3), rgba(201,50,60,.1), rgba(69,105,188,.35), rgba(238,120,35,.3)) !important;
  filter: blur(44px) !important;
}
.manifesto.manifesto-motto h2 {
  grid-column: 1;
  width: min(100%, 1380px);
  margin: 0;
  color: #f7f5ef;
  font-size: clamp(43px, 4.3vw, 69px);
  line-height: .96;
  letter-spacing: -.075em;
}
.manifesto.manifesto-motto h2 > .manifesto-line { width: max-content; max-width: 100%; white-space: nowrap; }
.manifesto.manifesto-motto h2 > .manifesto-line:nth-child(1) { margin-left: 0; }
.manifesto.manifesto-motto h2 > .manifesto-line:nth-child(2) { margin: .08em 0 0 8%; }
.manifesto.manifesto-motto h2 > .manifesto-line:nth-child(3) { margin: .22em 0 0 3%; }
.manifesto.manifesto-motto h2 > .manifesto-line:nth-child(4) { margin: .08em 0 0 10%; }
.manifesto.manifesto-motto h2 em {
  color: #ff9141;
  text-decoration: none;
}
.manifesto.manifesto-motto h2 em::after { height: .035em; bottom: -.08em; background: #ff9141; }
.manifesto.manifesto-motto h2 .manifesto-word { white-space: normal; }
.manifesto.manifesto-motto h2 .manifesto-line::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 .55em .11em 0;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 3px;
  transform: rotate(45deg);
}
.manifesto.manifesto-motto h2 .manifesto-line:nth-child(3)::before { border-color: #ff9141; background: #ff9141; }

/* CONTACT — clear, compact conversion area with a refined signal motif. */
.contact {
  min-height: 100svh;
  padding: clamp(74px, 8.2vh, 108px) var(--page);
  display: grid;
  grid-template-columns: minmax(340px, .94fr) minmax(470px, 1.06fr);
  grid-template-rows: auto auto;
  gap: 24px clamp(45px, 7vw, 130px);
  align-content: center;
  background: #0b0d10;
}
.contact::before {
  content: '';
  position: absolute;
  z-index: 0;
  width: min(62vw, 860px);
  aspect-ratio: 1;
  right: -22vw;
  top: -40%;
  border-radius: 42% 58% 48% 52% / 52% 41% 59% 48%;
  background: linear-gradient(135deg, rgba(69,105,188,.24), rgba(201,50,60,.16) 47%, rgba(238,120,35,.21));
  filter: blur(1px);
  transform: rotate(18deg);
}
.contact-kicker { grid-column: 1; grid-row: 1; z-index: 1; margin: 0 0 -15px; }
.contact .contact-title {
  z-index: 1;
  grid-column: 1;
  grid-row: 1 / span 2;
  max-width: 9.8ch;
  padding-top: 26px;
  font-size: clamp(56px, 5vw, 88px);
  line-height: .96;
  letter-spacing: -.075em;
}
.contact-title > span { margin: 0 !important; }
.contact-title > span + span { margin-top: .045em !important; }
.contact-title em { color: #ff9141; }
.contact-intro {
  position: relative;
  z-index: 1;
  grid-column: 2;
  width: min(100%, 600px);
  margin: 0;
  padding-left: 82px;
  color: rgba(255,255,255,.76);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.6;
}
.contact-intro::before {
  content: '⌁';
  position: absolute;
  top: -.18em;
  left: 0;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 17px;
  color: #ff9141;
  font: 400 38px/.8 var(--sans);
  transform: rotate(-11deg);
}
.contact-choices {
  position: relative;
  z-index: 1;
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.contact-choice {
  min-height: 185px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 22px;
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .45s var(--ease), background .35s ease, border-color .35s ease;
}
.contact-choice::before {
  content: '';
  position: absolute;
  top: 18px;
  right: 20px;
  width: 29px;
  height: 29px;
  border: 1.5px solid currentColor;
  border-radius: 9px;
  opacity: .88;
  transform: rotate(45deg);
}
.contact-choice:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.66); background: rgba(255,255,255,.095); }
.contact-choice small { padding-right: 36px; color: rgba(255,255,255,.6); }
.contact-choice strong {
  display: block;
  margin: 31px 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: clamp(22px, 1.75vw, 30px) !important;
  line-height: 1.03;
}
.contact-choice strong b { display: none; }
.contact-choice span { max-width: 27ch; color: rgba(255,255,255,.68); line-height: 1.48; }
.contact-choice.meeting,
.contact-choice.meeting:hover,
.contact-choice.meeting:focus-visible { background: linear-gradient(135deg, rgba(69,105,188,.75), rgba(201,50,60,.75) 52%, rgba(238,120,35,.78)); }
.contact-choice.meeting::before { border-color: #fff; background: rgba(255,255,255,.15); }

@media (max-width: 900px) {
  .clients { min-height: 0; padding-block: 92px 0; }
  .clients-heading { min-height: 0; display: block; padding-bottom: 58px; }
  .clients-heading h2 { max-width: 10ch; font-size: clamp(50px, 12vw, 72px); }
  .clients-heading > p { width: 100%; min-height: 270px; margin-top: 44px; border-radius: 25px; }
  .clients-context { right: calc(var(--page) + 28px); bottom: 80px; width: 185px; }
  .clients .logo-river { min-height: 100px; }
  .manifesto.manifesto-motto { min-height: 0; display: block; padding-block: 100px; }
  .manifesto.manifesto-motto h2 { width: 100%; font-size: clamp(46px, 11vw, 65px); line-height: 1; }
  .manifesto.manifesto-motto h2 > .manifesto-line { white-space: normal; }
  .manifesto.manifesto-motto h2 > .manifesto-line:nth-child(n) { margin-left: 0; }
  .manifesto.manifesto-motto h2 > .manifesto-line:nth-child(3) { margin-top: .24em; }
  .contact { min-height: 0; display: block; padding-block: 100px; }
  .contact-kicker { margin-bottom: 20px; }
  .contact .contact-title { padding-top: 0; font-size: clamp(51px, 12vw, 72px); }
  .contact-intro { margin: 42px 0 28px; padding-left: 72px; }
  .contact-choices { grid-template-columns: 1fr; }
  .contact-choice { min-height: 175px; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-choice { transition: none; }
  .clients .logo-track { animation: none; }
}