/* Preview V2: original particles, palette, type, hierarchy and section order.
   Only copy spacing is tuned here. The original renderer and intro are unchanged.
   The continuing particle motion is the owner's expressly approved brand feature. */
.preview-v2 {
  --preview-section-gap: clamp(56px, 6vw, 88px);
}

.preview-v2 .hero { min-height: 740px; }
.preview-v2 .hero-grid { padding-top: 120px; padding-bottom: 110px; }
.preview-v2 .hero h1 { margin-bottom: 24px; }
.preview-v2 .hero-description { max-width: 375px; margin-bottom: 27px; }
.preview-v2 .hero-description a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
}
.preview-v2 .hero-description a:hover,
.preview-v2 .hero-description a:focus-visible { color: var(--white); }
.preview-v2 .hero-actions .underlined-link { min-height: 44px; }
.preview-v2 .manifesto { padding-block: var(--preview-section-gap); }
.preview-v2 .manifesto-title { margin-bottom: 36px; }
.preview-v2 .capabilities,
.preview-v2 .connected,
.preview-v2 .research,
.preview-v2 .approach,
.preview-v2 .faq { padding-bottom: var(--preview-section-gap); }
.preview-v2 .section-heading { margin-bottom: 40px; }
/* Animated closing: reference rhythm, original Dyoxys typography and palette.
   Continuous motion is expressly requested and respects reduced-motion. */
.preview-v2 .closing-v4 { padding: 14px 0 0; overflow: clip; }
.preview-v2 .closing-v4 .closing-cta-window { padding: 26px 0 28px; overflow: clip; }
.preview-v2 .closing-v4 .closing-cta-line { border-block: 1px solid #ffffff55; transform: rotate(1deg); }
.preview-v2 .closing-v4 h2 { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.preview-v2 .closing-v4 .closing-cta {
  width: 100%; min-height: 112px; display: flex; justify-content: center;
  align-items: center; gap: 28px; padding: 20px clamp(24px, 5.2vw, 88px);
  font-size: clamp(24px, 2.8vw, 56px); font-weight: 700; line-height: 1.12;
  letter-spacing: -.045em; text-transform: uppercase; color: var(--white); text-align: center;
}
.preview-v2 .closing-v4 .closing-cta em { color: var(--accent); white-space: nowrap; }
.preview-v2 .closing-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }
.preview-v2 .closing-arrow { flex: none; overflow: hidden; width: 50px; height: 50px; }
.preview-v2 .closing-arrow path { transition: transform .33s cubic-bezier(.22,.61,.36,1); }
.preview-v2 .closing-arrow-next { transform: translate(-50px,50px); }
.preview-v2 .closing-cta:hover .closing-arrow-first { transform: translate(50px,-50px); }
.preview-v2 .closing-cta:hover .closing-arrow-next { transform: translate(0,0); transition-delay: .15s; }
.preview-v2 .closing-accessible { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.preview-v2 .closing-v4 .closing-ribbon-window { padding: 26px 0 34px; overflow: clip; }
.preview-v2 .closing-v4 .closing-ribbon { transform: rotate(-2deg); background: var(--red); }
.preview-v2 .closing-ribbon-track {
  display: flex; width: max-content;
  animation: dyoxys-closing-marquee var(--ribbon-duration, 45s) linear infinite;
  animation-play-state: paused; will-change: transform;
}
.preview-v2 .closing-ribbon-group {
  display: flex; flex: none; align-items: center; justify-content: space-around;
  gap: .45em; min-width: 100vw; padding: 20px .225em;
  white-space: nowrap; font-size: clamp(32px, 3.25vw, 60px);
  font-weight: 700; letter-spacing: -.045em; line-height: 1.05; text-transform: uppercase;
  color: var(--white);
}
.preview-v2 [data-ribbon-state="running"] .closing-ribbon-track { animation-play-state: running; }
.preview-v2.motion-paused .closing-ribbon-track { animation-play-state: paused; }
@keyframes dyoxys-closing-marquee { to { transform: translate3d(-50%,0,0); } }
.preview-v2 .footer-v4 { padding: 32px clamp(24px, 5.2vw, 88px) 22px; }
.preview-v2 .footer-grid { display: grid; grid-template-columns: 1.15fr .65fr 1.1fr 1.05fr; gap: clamp(28px, 3vw, 52px); align-items: start; }
.preview-v2 .footer-brand { display: inline-flex; align-items: flex-start; width: fit-content; }
.preview-v2 .footer-brand img { width: clamp(180px, 17vw, 260px); height: auto; max-width: 100%; filter: brightness(0) invert(1); }
.preview-v2 .footer-column { min-width: 0; }
.preview-v2 .footer-column h2 { margin: 0 0 18px; color: var(--white); text-transform: uppercase; font-size: 18px; font-weight: 700; letter-spacing: -.035em; line-height: 1.3; }
.preview-v2 .footer-column a { display: block; width: fit-content; max-width: 100%; padding-block: 7px; font-size: 12px; line-height: 1.4; color: #c8cdd5; overflow-wrap: anywhere; }
.preview-v2 .footer-column a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.preview-v2 .footer-column p { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.preview-v2 .footer-country { display: block; margin-top: 12px; font-size: 11px; color: var(--muted); }
.preview-v2 .footer-v4 .footer-bottom { margin-top: 46px; padding-top: 18px; font-size: 10px; gap: 24px; color: var(--muted); }
.preview-v2 .footer-v4 .footer-bottom a,
.preview-v2 .footer-v4 .footer-bottom button { min-height: 30px; display: inline-flex; align-items: center; font-size: 10px; color: var(--muted); }
.preview-v2 .footer-v4 a:focus-visible,
.preview-v2 .footer-v4 button:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
@media (max-width: 1000px) {
  .preview-v2 .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px; }
}
@media (max-width: 600px) {
  .preview-v2 .closing-v4 .closing-cta { text-align: left; justify-content: space-between; gap: 16px; min-height: 116px; font-size: clamp(20px,5.6vw,30px); }
  .preview-v2 .closing-v4 .closing-cta em { white-space: normal; }
  .preview-v2 .closing-arrow { width: 36px; height: 36px; }
  .preview-v2 .closing-ribbon-group { font-size: 34px; padding-block: 18px; }
  .preview-v2 .footer-brand { grid-column: 1 / -1; }
  .preview-v2 .footer-brand img { width: 210px; }
  .preview-v2 .footer-grid { gap: 28px 22px; }
  .preview-v2 .footer-contact { grid-column: 1 / -1; }
  .preview-v2 .footer-column h2 { margin-bottom: 10px; font-size: 16px; }
  .preview-v2 .footer-column a, .preview-v2 .footer-column p { font-size: 11px; }
  .preview-v2 .footer-v4 .footer-bottom { flex-wrap: wrap; margin-top: 30px; gap: 12px 20px; }
  .preview-v2 .footer-v4 .footer-bottom > span { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .preview-v2 .closing-ribbon-track { animation: none !important; transform: none !important; will-change: auto; width: 100%; }
  .preview-v2 .closing-ribbon-copy { display: none; }
  .preview-v2 .closing-ribbon-group { min-width: 0; width: 100%; white-space: normal; flex-wrap: wrap; justify-content: center; font-size: clamp(18px,3.25vw,38px); gap: 8px 22px; padding-inline: 24px; }
  .preview-v2 .closing-arrow path { transition: none; }
  .preview-v2 .closing-cta:hover .closing-arrow-first { transform: none; }
  .preview-v2 .closing-arrow-next { display: none; }
}
/* One confirmed brand: no empty logo grid, no invented client list.
   The source logo stays intact; the neutral display follows the reference. */
.preview-v2 .clients-section {
  padding: 34px clamp(24px, 7vw, 112px) 50px;
  scroll-margin-top: 110px;
}
.preview-v2 .clients-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  max-width: 1150px;
  margin-inline: auto;
}
.preview-v2 .clients-heading h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -.045em;
  margin: 0;
}
.preview-v2 .clients-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 1 42%;
  min-width: 0;
}
.preview-v2 .client-logo {
  display: block;
  width: 230px;
  height: auto;
  max-width: 100%;
  filter: grayscale(1) invert(1);
  mix-blend-mode: screen;
  opacity: .82;
}
@media (max-width: 600px) {
  .preview-v2 .clients-section { padding-block: 28px 40px; }
  .preview-v2 .clients-inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  .preview-v2 .clients-logos { width: 100%; justify-content: flex-start; }
  .preview-v2 .client-logo { width: 190px; }
}
@media (max-width: 820px) {
  .preview-v2 .hero { min-height: 760px; }
  .preview-v2 .hero-grid { padding-top: 0; padding-bottom: 95px; }
  .preview-v2 .hero h1 { margin-bottom: 18px; }
  .preview-v2 .hero-description { max-width: 350px; margin-bottom: 20px; }
  .preview-v2 .section-heading { margin-bottom: 30px; }
  .preview-v2 .capabilities .section-heading h2 { font-size: clamp(35px, 6vw, 57px); }
}
@media (max-width: 520px) {
  .preview-v2 .hero { min-height: 740px; }
  .preview-v2 .hero-description { max-width: 320px; }
  .preview-v2 .manifesto-title { font-size: clamp(32px, 8.8vw, 40px); }
}
@media (max-width: 380px) {
  .preview-v2 .brand img { width: 100px; }
  .preview-v2 .site-header { gap: 10px; padding-inline: 18px; }
  .preview-v2 .nav-actions { gap: 10px; }
  .preview-v2 .hero-grid { padding-inline: 24px; }
  .preview-v2 .hero h1 { font-size: clamp(40px, 13vw, 49px); }
  .preview-v2 .process { grid-template-columns: minmax(0, 1fr); }
  .preview-v2 .contact-section h2 { font-size: 34px; }
}