/*
  Clevermarketing unified stylesheet
  ------------------------------------------------------------
  Order of contents:
  1. common.css
  2. brand-theme.css
  3. page styles (one block per template)
  4. site-wide UX refresh
  5. key page refinements
  6. mobile experience upgrades
  7. compatibility / stabilization fixes

  Maintenance note:
  - prefer adding new global rules near the UX refresh blocks
  - prefer adding page-specific rules inside the matching page block
  - avoid inline styles in templates when a page block already exists here
*/

/* ===== common.css ===== */
:root {
  --mobile-nav-bg: rgba(10, 10, 10, 0.98);
  --mobile-nav-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --grid-columns: 12;
  --grid-gutter-x: 24px;
  --grid-gutter-y: 0;
  --container-padding-x: 56px;
  --container-max-width: 1700px;
  --site-shell-inline: max(var(--container-padding-x), calc((100vw - var(--container-max-width)) / 2 + var(--container-padding-x)));
}

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

html,
body {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-weight: 300;
  overflow-x: hidden;
  cursor: auto;
}

/* Legacy custom cursor styles kept only for backward compatibility. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  mix-blend-mode: difference;
}

.cursor-dot {
  position: fixed;
  width: 9px;
  height: 14px;
  background: transparent;
  border-radius: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}

.cursor .cursor-dot {
  position: static;
}

.cursor-dot::before {
  content: "";
  display: block;
  width: 9px;
  height: 14px;
  background: url("../img/clever-cursor.png") center / contain no-repeat;
}

.cursor-ring {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(236,105,29, 0.35);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, border-color 0.2s;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

.container,
.container-fluid {
  --bs-gutter-x: calc(var(--container-padding-x) * 2);
  max-width: var(--container-max-width);
}

.row {
  --bs-gutter-x: 24px;
  --bs-gutter-y: 0;
}

.g-0,
.gx-0 {
  --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
  --bs-gutter-y: 0;
}

.g-1,
.gx-1 {
  --bs-gutter-x: 8px;
}

.g-1,
.gy-1 {
  --bs-gutter-y: 8px;
}

.g-2,
.gx-2 {
  --bs-gutter-x: 16px;
}

.g-2,
.gy-2 {
  --bs-gutter-y: 16px;
}

.g-3,
.gx-3 {
  --bs-gutter-x: 24px;
}

.g-3,
.gy-3 {
  --bs-gutter-y: 24px;
}

.g-4,
.gx-4 {
  --bs-gutter-x: 32px;
}

.g-4,
.gy-4 {
  --bs-gutter-y: 32px;
}

.container-1700,
.container-1800,
.container-fluid.container-1700,
.container-fluid.container-1800 {
  max-width: var(--container-max-width);
}

a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(236,105,29, 0.85);
  outline-offset: 4px;
}

.nav-toggle {
  display: none;
  appearance: none;
  border: 1px solid rgba(236,105,29, 0.35);
  background: rgba(236,105,29, 0.06);
  color: inherit;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-direction: column;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-open .nav-toggle {
  background: rgba(236,105,29, 0.12);
  border-color: rgba(236,105,29, 0.55);
}

.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.page--homepage .hero-kicker {
  margin-bottom: 22px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 241, 235, 0.72);
  opacity: 0;
  animation: fadeUp 0.8s 0.55s forwards;
}

@media (max-width: 1180px) {
  :root {
    --container-padding-x: 28px;
  }

  #nav,
  #nav.scrolled {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .nav-links {
    gap: 24px !important;
  }
}

@media (max-width: 980px) {
  :root {
    --container-padding-x: 20px;
  }

  body {
    cursor: auto !important;
  }

  .cursor,
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }

  #nav,
  #nav.scrolled {
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 20px !important;
  }

  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .nav-links,
  .nav-cta {
    display: none !important;
  }

  .nav-open .nav-links {
    width: 100%;
    display: flex !important;
    flex-direction: column;
    gap: 0 !important;
    padding: 14px 0 0;
    margin-top: 2px;
    border-top: 1px solid rgba(236,105,29, 0.14);
  }

  .nav-open .top-nav {
    border-top: 0 !important;
  }

  .nav-open .nav-links li {
    width: 100%;
  }

  .nav-open .nav-links a {
    display: block;
    width: 100%;
    padding: 16px 0;
    font-size: 13px !important;
    color: var(--off-white) !important;
  }

  .nav-open .nav-links a::after {
    display: none;
  }

  .nav-open .nav-cta {
    display: inline-flex !important;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
    padding: 14px 18px !important;
  }

  .page--homepage .hero,
  .hero-inner,
  .post-featured,
  .featured-case,
  .page-wrap,
  .proof-strip,
  .posts-grid,
  .cases-grid,
  .section-disciplines .disciplines-grid,
  .modules-grid,
  .principles-grid,
  .metrics-grid,
  .signals-grid,
  .story-grid,
  .article-grid {
    grid-template-columns: 1fr !important;
  }

  .hero,
  .hero-inner,
  .featured-wrap,
  .grid-wrap,
  .featured-section,
  .faq-section,
  .page-nav,
  .topic-bar,
  .proof-strip,
  .contact-strip,
  .manifesto,
  .framework,
  .testimonials,
  footer,
  .hero,
  .hero-right,
  .hero-left,
  .article-wrap,
  .article-shell,
  .content-wrap,
  .section-wrap,
  .section-shell,
  .featured-case,
  .featured-wrap,
  .featured-content,
  .grid-wrap,
  .topic-bar,
  .hero,
  .form-intro,
  .right-panel,
  .left-panel {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero {
    min-height: auto !important;
    padding-top: 112px !important;
  }

  .hero-left,
  .hero-right,
  .post-featured-content,
  .post-featured-visual,
  .featured-case-content,
  .featured-case-visual,
  .left-panel,
  .right-panel {
    padding-bottom: 32px !important;
  }

  .hero-actions,
  .contact-action,
  .form-bottom,
  .left-footer-contacts,
  .post-meta {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .btn-primary,
  .btn-ghost,
  .nav-cta,
  .btn-submit {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .hero-tagline-vertical,
  .left-bg-num,
  .hero-number {
    display: none !important;
  }

  .topic-btn {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .page-nav {
    gap: 12px;
  }

  .page-nav-item,
  .faq-item,
  .post-card,
  .case-card {
    min-width: 0;
  }
}

@media (max-width: 720px) {
  h1,
  .hero h1,
  .hero-headline,
  .left-headline,
  .article-title,
  .post-title,
  .section-title {
    line-height: 1.08 !important;
  }

  .hero-headline,
  .left-headline,
  .hero h1,
  .article-title {
    font-size: clamp(38px, 12vw, 58px) !important;
  }

  .manifesto-quote,
  .manifesto-body,
  .hero-sub,
  .left-statement,
  .post-excerpt,
  .form-intro-text,
  .article-body {
    max-width: none !important;
  }

  .post-featured-visual,
  .featured-case-visual {
    min-height: 260px !important;
  }

  .hero-circle {
    width: 260px !important;
    height: 260px !important;
  }

  .hero-circle-2 {
    width: 170px !important;
    height: 170px !important;
  }

  .form-row,
  .post-meta,
  .article-meta,
  .proof-strip {
    grid-template-columns: 1fr !important;
  }

  .left-panel {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border);
    padding-top: 120px !important;
  }

  .right-panel {
    min-height: auto !important;
    padding-top: 32px !important;
  }

  .proof-strip {
    display: grid !important;
    gap: 18px;
  }

  .proof-item {
    padding: 22px !important;
    border: 1px solid var(--border);
  }

  .footer-links {
    gap: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(236,105,29, 0.08), transparent 30%),
    radial-gradient(circle at 82% 14%, rgba(244, 241, 235, 0.04), transparent 24%),
    radial-gradient(circle at 50% 78%, rgba(236,105,29, 0.05), transparent 34%);
  opacity: 0.95;
  z-index: 0;
}

body > * {
  position: relative;
  z-index: 1;
}

#nav,
#nav.scrolled {
  background: rgba(8, 8, 8, 0.72) !important;
  border-bottom-color: rgba(236,105,29, 0.08) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}

.nav-logo,
.nav-links a,
.nav-cta,
[aria-current="page"] {
  position: relative;
}

.nav-logo {
  text-shadow: 0 0 18px rgba(236,105,29, 0.12);
}

.nav-links a[aria-current="page"],
.nav-links a.active {
  color: var(--off-white) !important;
}

.nav-links a[aria-current="page"]::before,
.nav-links a.active::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -14px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--orange);
  transform: translateX(-50%);
  box-shadow: 0 0 18px rgba(236,105,29, 0.65);
}

.nav-cta,
.btn-primary {
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(236,105,29, 0.15);
}

.nav-cta::before,
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
  transform: translateX(-120%);
  transition: transform 0.45s ease;
}

.nav-cta:hover::before,
.btn-primary:hover::before {
  transform: translateX(120%);
}

.btn-primary {
  border-radius: 999px;
}

.btn-ghost {
  padding-bottom: 4px;
}

.btn-ghost::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg, rgba(236,105,29, 0.8), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.btn-ghost:hover::before {
  opacity: 1;
}

footer {
  position: relative;
}

footer::before {
  content: "";
  position: absolute;
  left: 56px;
  right: 56px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236,105,29, 0.26), transparent);
}

@media (max-width: 980px) {
  #nav,
  #nav.scrolled {
    border-radius: 0 0 24px 24px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
  }

  .nav-open {
    background: var(--mobile-nav-bg) !important;
    box-shadow: var(--mobile-nav-shadow);
  }

  .nav-open .nav-links {
    padding-top: 18px;
  }

  .nav-open .nav-links a {
    border-bottom: 1px solid rgba(236,105,29, 0.08);
  }

  .nav-open .nav-links li:last-child a {
    border-bottom: 0;
  }

  .nav-open .nav-links a[aria-current="page"]::before,
  .nav-open .nav-links a.active::before {
    left: auto;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (max-width: 720px) {
  footer::before {
    left: 20px;
    right: 20px;
  }
}


/* ===== brand-theme.css ===== */
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@300;400;500&family=Sora:wght@700;800&display=swap');

:root {
  --black: #f6f6f6;
  --off-white: #151515;
  --orange: #ec691d;
  --orange-light: #f59e28;
  --gray: #5f5f5f;
  --gray-mid: #7a7a7a;
  --light-gray: #d3d3d3;
  --border: #dedede;
  --border-orange: rgba(249, 115, 22, 0.18);
  --brand-dark: #22222a;
  --brand-blue: #5a81c1;
  --brand-lilac: #b3bbdd;
  --brand-green: #68bfa9;
  --brand-pink: #de3a87;
  --mobile-nav-bg: rgba(255, 255, 255, 0.97);
  --mobile-nav-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
}

html {
  background: #f6f6f6;
}

body {
  background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 55%, #f2f2f2 100%) !important;
  color: var(--off-white) !important;
  font-family: 'Epilogue', sans-serif !important;
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
}

body::before {
  background:
    radial-gradient(circle at 10% 12%, rgba(249, 115, 22, 0.12), transparent 24%),
    radial-gradient(circle at 88% 10%, rgba(249, 115, 22, 0.08), transparent 20%),
    radial-gradient(circle at 50% 88%, rgba(249, 115, 22, 0.06), transparent 26%) !important;
}

h1,
h2,
h3,
h4,
.hero-headline,
.framework-title,
.manifesto-quote,
.left-headline,
.faq-title,
.post-title,
.card-title,
.article-title,
.success-title,
.contact-headline,
.ai-headline,
.left-statement,
.hero h1 {
  font-family: 'Sora', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

body,
p,
li,
a,
button,
input,
textarea,
select,
.hero-sub,
.manifesto-body,
.contact-body,
.form-intro-text,
.post-excerpt,
.card-excerpt,
.faq-answer,
.article-body {
  font-family: 'Epilogue', sans-serif !important;
}

#nav {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    background: rgba(255, 255, 255, 0.9) !important; /* invece di transparent */
    border-bottom-color: rgba(236, 105, 29, 0.08) !important; /* invece di transparent */
    box-shadow: none !important;
    min-height: 100px;
    max-height: 100px;
    padding-left: var(--site-shell-inline) !important;
    padding-right: var(--site-shell-inline) !important;
    padding-top: 16px !important;
    padding-bottom: 14px !important;
}

#nav.scrolled {
  background: rgba(255, 255, 255, 0.9) !important;
  border-bottom-color: rgba(236, 105, 29, 0.08) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  flex: 0 0 auto;
  text-decoration: none;
}

.nav-logo img {
  display: block;
  width: clamp(188px, 14vw, 270px);
  height: auto;
}

.nav-menu-stack {
  flex: 0 1 min(46vw, 690px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  padding: 0;
  margin-left: auto;
}

.top-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end;
  gap: 12px !important;
  list-style: none !important;
  margin: 0;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.top-nav li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.top-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: 'Epilogue', sans-serif !important;
  font-size: 11px !important;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #707070 !important;
  border: 1px solid rgba(236, 105, 29, 0.28);
  border-radius: 8px;
  padding: 9px 18px 8px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.top-nav a:hover {
  border-color: rgba(236, 105, 29, 0.58);
  color: #505050 !important;
}

.top-nav a.active,
.top-nav a[aria-current="page"] {
  color: #ffffff !important;
  background: var(--orange);
  border-color: var(--orange);
}

.nav-links {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 54px !important;
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.nav-links li {
  list-style: none !important;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.nav-links a,
.top-nav a,
.footer-links a,
.left-footer-link,
.btn-ghost {
  position: relative;
  text-decoration: none;
}

.nav-links a,
.footer-links a,
.left-footer-link,
.btn-ghost {
  color: #505050 !important;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: 'Epilogue', sans-serif !important;
  font-size: 14px !important;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #505050 !important;
  overflow: visible;
}

.nav-links a:hover,
.footer-links a:hover,
.left-footer-link:hover,
.btn-ghost:hover,
.topic-btn:hover {
  color: var(--off-white) !important;
}

.nav-toggle {
  border-color: rgba(249, 115, 22, 0.28) !important;
  background: rgba(249, 115, 22, 0.05) !important;
}

.nav-cta,
.btn-primary,
.btn-submit,
.nl-btn,
.sticky-cta-btn {
  flex: 0 0 auto;
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  padding: 16px 32px;
  white-space: nowrap;
  font-family: 'Epilogue', sans-serif !important;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange) !important;
  background: transparent !important;
  border: 1px solid var(--orange) !important;
  box-shadow: none !important;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s !important;
}

.nav-cta:hover,
.btn-primary:hover,
.btn-submit:hover,
.nl-btn:hover,
.sticky-cta-btn:hover {
  background: var(--orange) !important;
  color: #fffaf5 !important;
  border-color: var(--orange) !important;
}

#nav > .nav-cta {
  display: none !important;
}

.btn-ghost::before,
.nav-links a::after,
.top-nav a::after,
.topic-btn.active,
.topic-btn.active::after {
  background-color: var(--orange) !important;
}

.nav-links a::after,
.top-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  transition: width 0.3s ease;
}

.nav-links a[data-nav-subtitle]::before {
  content: attr(data-nav-subtitle);
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%) translateY(-3px);
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  font-family: 'Sora', sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange) !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after,
.nav-links a[aria-current="page"]::after {
  width: 100%;
}

.nav-links a[data-nav-subtitle]:hover::before,
.nav-links a[data-nav-subtitle]:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.top-nav a::after {
  display: none;
}

#nav .nav-links a.active::before,
#nav .nav-links a[aria-current="page"]::before {
  display: none !important;
  content: none !important;
}

.hero-visual,
.left-bg,
.post-featured-visual,
.newsletter,
.ai-banner,
.testimonial,
.post-card,
.topic-card,
.proof-item,
.form-success,
.path-pill,
.step {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 247, 247, 0.92)) !important;
}

.page--homepage .hero {
  min-height: 90vh;
  padding-top: 34px;
}

.page--homepage .hero-left {
  justify-content: center !important;
  padding: 12px 80px 72px 56px !important;
}

.page--homepage .hero::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.74) 42%, rgba(255, 255, 255, 0.18) 100%),
    radial-gradient(circle at 74% 48%, rgba(249, 115, 22, 0.12), transparent 26%) !important;
}

.page--homepage .hero-left,
.page--homepage .hero-right {
  z-index: 2 !important;
}

.page--homepage .hero-headline,
.page--homepage .framework-title,
.page--homepage .contact-headline,
.page--homepage .manifesto-quote,
.page--homepage .step-name {
  color: var(--off-white) !important;
}

.page--homepage .hero-sub,
.page--homepage .manifesto-body,
.page--homepage .framework-subtitle {
  color: #585858 !important;
}

.page--homepage .hero-kicker,
.page--homepage .scroll-indicator,
.page--homepage .scroll-line,
.page--homepage .scroll-text {
  display: none !important;
}

.page--homepage .hero-ticker {
  margin-top: 28px;
  width: min(100%, 520px);
  overflow: hidden;
  border-radius: 999px;
  background: var(--brand-dark);
  box-shadow: 0 18px 42px rgba(34, 34, 42, 0.22);
}

.page--homepage .hero-ticker-track {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  padding: 14px 18px;
  animation: tickerScroll 20s linear infinite;
}

.page--homepage .ticker-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 22px;
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.page--homepage .ticker-item::after {
  content: '•';
  color: rgba(255, 255, 255, 0.34);
}

.page--homepage .ticker-orange { color: var(--orange); }
.page--homepage .ticker-blue { color: var(--brand-blue); }
.page--homepage .ticker-green { color: var(--brand-green); }
.page--homepage .ticker-pink { color: var(--brand-pink); }
.page--homepage .ticker-amber { color: var(--orange-light); }

.page--homepage .ai-banner {
  background: var(--brand-dark) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.page--homepage .ai-banner::before {
  color: rgba(255, 255, 255, 0.04) !important;
}

.page--homepage .ai-headline {
  max-width: 20ch !important;
  color: #f8f5f1 !important;
}

.page--homepage .ai-body {
  max-width: 62ch !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

.page--homepage .ai-banner {
  grid-template-columns: minmax(0, 1.6fr) auto !important;
}

.hero-grid {
  background-image:
    linear-gradient(rgba(249, 115, 22, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249, 115, 22, 0.07) 1px, transparent 1px) !important;
}

.hero-circle,
.hero-circle-2,
.hero-visual::after {
  border-color: rgba(249, 115, 22, 0.16) !important;
}

.hero-tagline-vertical,
.hero-number,
.left-bg-num,
.card-num {
  color: rgba(249, 115, 22, 0.12) !important;
}

.section-divider,
footer,
.topic-bar,
.manifesto::after,
footer::before {
  border-color: rgba(249, 115, 22, 0.1) !important;
}

.section-divider {
  background: rgba(249, 115, 22, 0.1) !important;
}

.hero-sub,
.manifesto-body,
.contact-body,
.form-intro-text,
.post-excerpt,
.card-excerpt,
.faq-answer,
.proof-label,
.nl-sub,
.path-desc,
.left-footer-title {
  color: #5d5d5d !important;
}

.hero-sub,
.hero-question,
.vti-hero-sub,
.elements-subtitle,
.page--contatti .left-statement {
  color: #585858 !important;
  font-family: 'Epilogue', sans-serif !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1.75 !important;
  max-width: 440px !important;
  padding-left: 24px !important;
  border-left: 2px solid var(--orange) !important;
}

.hero-eyebrow,
.manifesto-label,
.left-eyebrow,
.form-intro-label,
.topic-btn.active,
.topic-card:hover .topic-name,
.post-link,
.card-topic-tag,
.post-topic-tag,
.path-label,
.proof-num,
.ai-label,
.left-footer-link span,
.share-btn,
.btn-ghost::after {
  color: var(--orange) !important;
}

.path-dot,
.hero-kicker::before {
  background: var(--orange) !important;
  box-shadow: 0 0 18px rgba(249, 115, 22, 0.35) !important;
}

.form-field,
.faq-item,
.post-featured,
.post-card,
.topic-card,
.proof-item,
.path-pill,
.step,
.newsletter,
.form-success,
.left-panel::after {
  border-color: rgba(249, 115, 22, 0.12) !important;
}

.left-panel,
.right-panel,
.faq-section,
.proof-strip,
.contact-strip,
.manifesto,
.framework,
.testimonials,
.featured-wrap,
.grid-wrap,
.topics-index {
  background: transparent !important;
}

.social-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #4f4f4f;
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  transition: color 0.2s, transform 0.2s;
}

.social-links a:hover {
  color: var(--off-white);
  transform: translateY(-2px);
}

.btn-primary-boxed {
  border-radius: 8px !important;
  padding: 16px 32px !important;
}

.btn-ghost-nav {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  padding-bottom: 4px;
}

.btn-ghost-nav::before {
  content: "";
  position: absolute;
  left: 0 !important;
  right: auto !important;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--orange);
  opacity: 1;
  transition: width 0.3s ease;
}

.btn-ghost-nav:hover::before {
  width: 100%;
}

.page .hero-actions .btn-primary,
.page .cta-actions .btn-primary,
.page .contact-action .btn-primary {
  display: inline-block !important;
  text-align: center;
}

.page .hero-actions .btn-ghost,
.page .cta-actions .btn-ghost,
.page .contact-action .btn-ghost {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
}

.btn-ghost {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0;
  padding: 0 0 4px;
  font-family: 'Epilogue', sans-serif !important;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  gap: 8px;
  transition: color 0.2s;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #cfcfcf !important;
  letter-spacing: 0.08em !important;
}

.footer-logo img {
  width: 140px;
  height: auto;
  display: block;
}

.footer-location {
  font-size: 11px;
  text-transform: uppercase;
}

.left-footer-socials {
  margin-top: 18px;
}

footer {
  background: #151515 !important;
  border-top: 0 !important;
}

footer::before {
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.24), transparent) !important;
}

footer .footer-links a,
footer .social-links a,
footer .footer-tagline {
  color: #bdbdbd !important;
}

footer .footer-links a:hover,
footer .social-links a:hover {
  color: #ffffff !important;
}

@media (max-width: 980px) {
  #nav,
  #nav.scrolled {
    align-items: center !important;
    gap: 16px;
    flex-wrap: wrap;
    min-height: auto;
    max-height: none;
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(236, 105, 29, 0.08) !important;
    box-shadow: 0 10px 28px rgba(18, 18, 18, 0.06) !important;
    padding: 18px 20px !important;
  }

  .nav-open {
    background: rgba(255, 255, 255, 1) !important;
  }

  .nav-menu-stack {
    display: none;
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    padding: 0;
  }

  .nav-open .nav-menu-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(249, 115, 22, 0.08);
    background: #ffffff !important;
    position: relative;
    z-index: 5;
  }

  .top-nav {
    display: none !important;
  }

  .nav-links {
    display: none !important;
    flex-basis: 100%;
    padding: 0;
  }

  .nav-open .top-nav,
  .nav-open .nav-links {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0 !important;
    margin-top: 0;
    padding: 0;
    border-top: 0;
  }

  .nav-open .nav-links {
    order: 1;
    margin-bottom: 12px;
    background: #ffffff !important;
  }

  .nav-open .top-nav {
    order: 2;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(249, 115, 22, 0.08);
    border-bottom: 0;
    background: #ffffff !important;
  }

  .nav-open .top-nav li,
  .nav-open .nav-links li,
  .nav-open .top-nav a,
  .nav-open .nav-links a {
    width: 100%;
  }

  .nav-open .top-nav a,
  .nav-open .nav-links a {
    display: block;
    white-space: normal;
    font-family: 'Epilogue', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #505050 !important;
    padding: 14px 0;
    background: #ffffff !important;
  }

  .nav-open .nav-links a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 0 !important;
    font-size: 14px !important;
    letter-spacing: 0.1em;
    color: #2f2f2f !important;
    border-bottom: 1px solid rgba(236, 105, 29, 0.08);
  }

  .nav-open .nav-links li:last-child a {
    border-bottom: 0;
  }

  .nav-open .nav-links a.active,
  .nav-open .nav-links a[aria-current="page"] {
    color: var(--orange) !important;
  }

  .nav-open .nav-links a::after {
    display: none !important;
    content: none !important;
  }

  .nav-open .top-nav a {
    color: #606060 !important;
    font-size: 10px !important;
    letter-spacing: 0.14em;
    padding: 10px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .nav-open .top-nav a.active,
  .nav-open .top-nav a[aria-current="page"] {
    color: var(--orange) !important;
  }

  .nav-open .top-nav a::after,
  .nav-open .nav-links a::after {
    display: none;
  }

  .nav-open .nav-links a::before {
    display: none !important;
    content: none !important;
  }

  .nav-toggle span {
    background: #505050 !important;
  }

  .nav-logo img {
    width: 168px;
  }

  .footer-logo {
    align-items: flex-start;
    flex-direction: column;
  }

  .page--homepage .hero {
    padding-top: 112px !important;
  }

  .page--homepage .hero-ticker {
    width: 100%;
  }

  .page--homepage .ai-banner {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  body {
    background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%) !important;
  }

  .social-links {
    gap: 8px;
  }

  .social-links a {
    padding: 9px 12px;
    font-size: 10px;
  }

  .page--homepage .hero-ticker-track {
    gap: 16px;
    padding: 12px 16px;
  }

  .page--homepage .ticker-item {
    font-size: 10px;
  }
}

@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

body::before {
  background:
    radial-gradient(circle at 0% 0%, rgba(236, 105, 29, 0.32), transparent 30%) !important;
}

.page--homepage .hero-headline em,
.page--homepage .manifesto-quote em,
.page--homepage .ai-headline em,
.page--homepage .contact-headline em {
  font-style: normal !important;
}

.page--homepage .hero-left {
  padding-bottom: 48px !important;
}

.page--homepage .hero-ticker {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 0;
  border-radius: 0;
}

.page--homepage .hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 0;
}

.page--homepage .hero-visual {
  position: relative !important;
  width: min(180%, 1340px);
  height: 100%;
  min-height: 1080px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.page--homepage .hero-visual::before {
  content: "";
  position: absolute;
  inset: -12% -12% -2% -40%;
  background: url("../img/woman-fox-hero.png") center bottom / contain no-repeat;
}

.page--homepage .hero-grid,
.page--homepage .hero-circle,
.page--homepage .hero-circle-2,
.page--homepage .hero-number,
.page--homepage .hero-tagline-vertical,
.page--homepage .hero-visual::after {
  display: none !important;
}

.page--homepage .hero-ticker-track {
  padding: 15px 28px;
}

.page--homepage .manifesto::after {
  display: none !important;
}

.page--homepage .ai-banner::before {
  content: "◌" !important;
  color: rgba(255, 255, 255, 0.1) !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 170px !important;
  font-weight: 700 !important;
}

.page--homepage .ai-headline {
  max-width: 18ch !important;
}

.page--homepage .ai-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 144px !important;
  max-width: fit-content !important;
  height: auto !important;
  min-height: 48px !important;
  padding: 14px 28px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(236, 105, 29, 0.9) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--orange) !important;
  font-family: 'Epilogue', sans-serif !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  justify-self: start !important;
  align-self: flex-start !important;
  border-color: var(--orange) !important;
}

.page--homepage .testimonials {
  overflow: hidden;
}

.page--homepage .testimonials-carousel {
  overflow: hidden;
  width: min(980px, calc(100vw - 112px));
  margin: 0 auto;
}

.page--homepage .testimonials-track {
  display: grid;
  grid-template-columns: 100% 100% 100% 100%;
  width: 100%;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}

.page--homepage .testimonial {
  width: 100%;
  min-width: 0;
  box-shadow: none !important;
  background: transparent !important;
  border-color: transparent !important;
  margin-right: 0;
  padding: 0 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.page--homepage .testimonial-text {
  font-size: clamp(24px, 2.5vw, 38px) !important;
  line-height: 1.42 !important;
  max-width: 50ch;
  margin-bottom: 22px;
}

.page--homepage .testimonial-quote-mark {
  font-family: 'Sora', sans-serif !important;
  margin-bottom: 18px;
  font-size: clamp(48px, 5vw, 76px);
  opacity: 0.32;
}

.page--homepage .testimonial-author {
  text-align: center;
}

.page--homepage .testimonial-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
}

.page--homepage .testimonial-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(236, 105, 29, 0.22);
  padding: 0;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, width .2s ease;
}

.page--homepage .testimonial-dot.is-active {
  width: 28px;
  background: var(--orange);
}

.page--homepage .testimonial-dot:hover {
  transform: scale(1.08);
}

.page--homepage .clients-strip {
  margin-top: 54px;
  padding: 50px 0 0;
  overflow: visible;
  border-top: 0;
  border-bottom: 0;
  display: grid;
  gap: 18px;
}

.page--homepage .clients-lane {
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.page--homepage .clients-track {
  display: flex;
  align-items: center;
  gap: 54px;
  width: max-content;
  animation: clientsScrollLeft 34s linear infinite;
}

.page--homepage .clients-lane--right .clients-track {
  animation-name: clientsScrollRight;
  animation-duration: 36s;
}

.page--homepage .clients-track:hover {
  animation-play-state: paused;
}

.page--homepage .client-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 58px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.page--homepage .client-logo-image {
  display: block;
  max-height: 120px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

.footer-home {
  padding: 32px 56px !important;
}

.footer-home .footer-newsletter {
  display: grid;
  grid-template-columns: minmax(360px, 0.82fr) minmax(520px, 1.18fr);
  gap: clamp(40px, 5vw, 84px);
  align-items: center;
}

.footer-home .footer-newsletter-copy {
  width: 100%;
  max-width: 36rem;
}

.footer-home .footer-office-label,
.footer-home .footer-newsletter-cta {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  font-family: 'Sora', sans-serif;
  font-weight: 700;
}

.footer-home .footer-newsletter-title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 300;
  line-height: 1.22;
  color: #f4f1eb;
  max-width: 18ch;
}

.footer-home .footer-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  width: 100%;
  max-width: 760px;
  justify-self: end;
}

.footer-home .footer-newsletter-fields {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) auto;
  gap: 20px;
  width: 100%;
}

.footer-home .footer-newsletter-input {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #f4f1eb;
  padding: 0 16px;
  font-family: 'Epilogue', sans-serif;
  font-size: 14px;
  outline: none;
}

.footer-home .footer-newsletter-input::placeholder {
  color: rgba(244, 241, 235, 0.48);
}

.footer-home .footer-newsletter-input.is-success::placeholder {
  color: rgba(236, 105, 29, 0.78);
}

.footer-home .footer-newsletter-submit {
  min-height: 50px;
  border: 1px solid var(--orange);
  border-radius: 8px;
  background: transparent;
  color: var(--orange);
  padding: 0 22px;
  width: auto;
  white-space: nowrap;
  font-family: 'Epilogue', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}

.footer-home .footer-newsletter-submit:hover {
  background: var(--orange);
  color: #111;
}

.footer-home .footer-newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #bdbdbd;
  font-size: 11px;
  line-height: 1.55;
}

.footer-home .footer-newsletter-consent input {
  margin-top: 2px;
  accent-color: var(--orange);
}

.footer-home .footer-newsletter-consent a {
  color: #f4f1eb;
  text-decoration: none;
}

.footer-home .footer-social-block {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
  align-self: center;
}

.footer-home .footer-row {
  display: grid;
  align-items: center;
  gap: 20px;
}

.footer-home .footer-row-top {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  column-gap: 44px;
}

.footer-home .footer-row-bottom {
  grid-template-columns: 1fr auto;
}

.footer-home .footer-links-right {
  justify-self: end;
}

.footer-home .footer-logo-block {
  justify-self: start;
  align-self: center;
}

.footer-home .footer-logo-block img {
  width: 200px;
  height: auto;
  display: block;
}

.footer-home .footer-office,
.footer-home .footer-contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: center;
  justify-self: start;
}

.footer-home .footer-contacts {
  min-width: 0;
}

.footer-home .footer-office-address {
  color: #f4f1eb;
  font-size: 13px;
  line-height: 1.5;
}

.footer-home .footer-office-phones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.footer-home .footer-office-email {
  gap: 0;
}

.footer-home .footer-office-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #bdbdbd;
  text-decoration: none;
  font-size: 12px;
  line-height: 1.4;
}

.footer-home .footer-office-phone img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
  flex: 0 0 auto;
}

.footer-home .footer-office-phone:hover {
  color: #ffffff;
}

.footer-home .footer-partner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-self: start;
  align-self: center;
}

.footer-home .footer-partner img {
  width: 178px;
  height: auto;
  display: block;
}

.footer-home .footer-divider {
  height: 1px;
  width: 100vw;
  margin: 25px calc(50% - 50vw);
  background: rgba(255, 255, 255, 0.1);
}

.footer-home .footer-meta {
  color: #bdbdbd;
  font-size: 12px;
  letter-spacing: 0.03em;
}

.footer-home .footer-social-icons {
  justify-self: end;
  gap: 12px;
  margin-top: 2px;
}

.footer-home .footer-social-icons a {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #d7d7d7 !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

.footer-home .footer-social-icons a:hover {
  border-color: rgba(236, 105, 29, 0.55);
  color: #ffffff !important;
  background: rgba(236, 105, 29, 0.12);
}

.footer-home .footer-social-icons img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}

.page--homepage .cursor {
  mix-blend-mode: normal;
}

.page--homepage .cursor-ring {
  display: none !important;
}

@media (max-width: 980px) {
  .page--homepage .hero-ticker {
    width: calc(100% + 40px);
    margin-left: -20px;
  }

  .page--homepage .hero-right {
    padding: 12px 20px 0;
  }

  .page--homepage .hero-visual {
    width: min(100%, 620px);
    min-height: 560px;
  }

  .page--homepage .ai-headline {
    max-width: 100% !important;
  }

  .page--homepage .testimonial {
    width: 82vw;
  }

  .footer-home .footer-row-top,
  .footer-home .footer-row-bottom {
    grid-template-columns: 1fr;
  }

  .footer-home .footer-logo,
  .footer-home .footer-links-right,
  .footer-home .footer-social-icons {
    justify-self: start;
  }
}

@keyframes testimonialsScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes clientsScrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes clientsScrollRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.page--homepage .testimonials {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page--homepage .testimonials-header {
  padding-left: 56px;
  padding-right: 56px;
}

.page--homepage .testimonials-carousel {
  width: min(980px, calc(100vw - 112px));
  margin-left: auto;
  margin-right: auto;
}

.page--homepage .testimonials-track {
  gap: 0 !important;
}

.page--homepage .testimonial {
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

@media (max-width: 980px) {
  .page--homepage .testimonials-header {
    padding-left: 20px;
    padding-right: 20px;
  }

  .page--homepage .testimonials-carousel {
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
  }

  .page--homepage .testimonial {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 24px;
  }
}

@media (max-width: 980px) {
  #nav {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .nav-logo img {
    width: 156px !important;
  }

  body.page--homepage {
    overflow-x: clip;
  }

  .page--homepage #nav:not(.scrolled) .nav-links a,
  .page--homepage #nav:not(.scrolled) .top-nav a,
  .page--homepage #nav:not(.scrolled) .nav-cta {
    color: #1f1f1f !important;
  }

  .page--homepage #nav:not(.scrolled) .top-nav a {
    border-color: rgba(236, 105, 29, 0.25) !important;
  }

  .page--homepage #nav:not(.scrolled) .nav-toggle {
    border-color: rgba(236, 105, 29, 0.18) !important;
    background: rgba(255, 250, 245, 0.96) !important;
  }

  .page--homepage #nav:not(.scrolled) .nav-toggle span {
    background: #1f1f1f !important;
  }

  .page--homepage #nav.nav-open .nav-links a,
  .page--homepage #nav.nav-open .top-nav a,
  .page--homepage #nav.nav-open .nav-cta {
    color: #1f1f1f !important;
  }

  .page--homepage .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding-top: 92px !important;
  }

  .page--homepage .hero-left {
    justify-content: flex-start !important;
    padding: 8px 20px 16px !important;
  }

  .page--homepage .hero-eyebrow {
    margin-bottom: 18px !important;
  }

  .page--homepage .hero-headline {
    font-size: clamp(44px, 11vw, 66px) !important;
    line-height: 0.98 !important;
    margin-bottom: 22px !important;
  }

  .page--homepage .hero-sub {
    max-width: none !important;
    margin-bottom: 28px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  .page--homepage .hero-actions {
    gap: 16px !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    width: 100%;
  }

  .page--homepage .hero-actions .btn-primary,
  .page--homepage .hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .page--homepage .hero-actions .btn-ghost,
  .page--homepage .hero-actions .btn-ghost-nav {
    color: #808080 !important;
    background: transparent !important;
    border: 1px solid #d5d5d5 !important;
    box-shadow: none !important;
    min-height: 64px !important;
    padding: 18px 28px !important;
    border-radius: 8px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
  }

  .page--homepage .hero-actions .btn-ghost::before,
  .page--homepage .hero-actions .btn-ghost-nav::before {
    display: none !important;
  }

  .page--homepage .hero-actions .btn-ghost:hover,
  .page--homepage .hero-actions .btn-ghost-nav:hover {
    background: transparent !important;
    color: #808080 !important;
    border-color: #d5d5d5 !important;
  }

  .page--homepage .hero-right {
    min-height: 440px;
    padding: 8px 12px 0 !important;
  }

  .page--homepage .hero-visual {
    width: min(128%, 820px) !important;
    min-height: 560px !important;
  }

  .page--homepage .hero-visual::before {
    inset: -6% -10% -2% -16% !important;
  }

  .page--homepage .hero-ticker {
    width: calc(100% + 40px) !important;
    margin-left: -20px !important;
  }

  .page--homepage .hero-ticker-track {
    padding: 12px 18px !important;
  }

  .page--homepage .showreel-shell {
    margin-left: calc(18px * -1) !important;
    margin-right: calc(18px * -1) !important;
    margin-bottom: -46px !important;
  }

  .page--homepage .showreel-window {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .page--homepage .showreel-frame {
    border-radius: 0 !important;
    min-height: 240px;
  }

  .page--homepage .client-logo {
    min-width: 200px;
    min-height: 58px;
  }

  .page--homepage .client-logo-image {
    max-height: 42px;
    max-width: 180px;
  }

  .page--homepage .manifesto,
  .page--homepage .framework,
  .page--homepage .contact-strip {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .page--homepage .framework-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 36px;
  }

  .page--homepage .framework-subtitle {
    max-width: none;
    text-align: left;
  }

  .page--homepage .framework-steps {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .page--homepage .step {
    padding: 28px 22px 56px !important;
  }

  .page--homepage .ai-banner {
    grid-template-columns: 1fr !important;
    margin: 0 20px !important;
    padding: 32px 24px !important;
    gap: 24px !important;
  }

  .page--homepage .ai-cta {
    width: auto !important;
    min-width: 144px !important;
    max-width: fit-content !important;
    height: auto !important;
    min-height: 48px !important;
    padding: 14px 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 8px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    align-self: flex-start;
  }

  .page--homepage .testimonials {
    padding-top: 104px !important;
    padding-bottom: 84px !important;
  }

  .page--homepage .testimonials-track {
    gap: 0 !important;
    padding: 0;
  }

  .page--homepage .testimonial,
  .page--homepage .testimonial:first-child {
    width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 10px !important;
  }

  .page--homepage .testimonial-text {
    font-size: 22px !important;
    line-height: 1.48 !important;
    max-width: none;
  }

  .page--homepage .testimonial-author {
    font-size: 10px !important;
  }

  .page--homepage .testimonial-dots {
    margin-top: 22px !important;
  }

  .page--homepage .clients-strip {
    margin-top: 40px !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  .page--homepage .clients-lane {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .page--homepage .clients-track {
    gap: 18px !important;
  }

  .page--homepage .contact-action {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  .page--homepage .contact-action .btn-primary,
  .page--homepage .contact-action .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .page--homepage .client-logo {
    min-width: 190px;
    min-height: 92px;
  }

  .page--homepage .client-logo-image {
    max-height: 76px !important;
    max-width: 180px !important;
  }

  .footer-home {
    padding: 28px 20px !important;
  }

  .footer-home .footer-row-top,
  .footer-home .footer-row-bottom {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .footer-home .footer-newsletter {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .footer-home .footer-newsletter-form {
    max-width: none;
  }

  .footer-home .footer-newsletter-fields {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
  }

  .footer-home .footer-social-block {
    justify-self: center !important;
    align-items: center;
    text-align: center;
  }

  .footer-home .footer-office,
  .footer-home .footer-contacts {
    gap: 10px;
    justify-self: center !important;
    align-items: center;
    text-align: center;
  }

  .footer-home .footer-logo-block img {
    justify-self: center !important;
    width: 160px;
    margin-bottom: 14px;
  }

  .footer-home .footer-logo-block,
  .footer-home .footer-partner {
    justify-self: center !important;
    align-items: center;
    text-align: center;
  }

  .footer-home .footer-office {
    margin-top: 0;
  }

  .footer-home .footer-meta {
    max-width: none;
    line-height: 1.6;
    text-align: center;
  }

  .footer-home .footer-social-icons,
  .footer-home .footer-links-right {
    justify-self: center !important;
  }

  .footer-home .footer-links-right {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
  }
}

@media (max-width: 720px) {
  .nav-logo img {
    width: 146px !important;
  }

  body.page--homepage {
    overflow-x: clip;
  }

  .page--homepage #nav.nav-open .nav-links a,
  .page--homepage #nav.nav-open .top-nav a,
  .page--homepage #nav.nav-open .nav-cta {
    color: #1f1f1f !important;
  }

  .page--homepage #nav .nav-logo img {
    filter: none !important;
  }

  .page--homepage .hero {
    padding-top: 112px !important;
    padding-bottom: 0 !important;
  }

  .page--homepage .hero-left {
    padding: 4px 20px 10px !important;
  }

  .page--homepage .hero-headline {
    font-size: clamp(38px, 13vw, 52px) !important;
    max-width: 8ch !important;
  }

  .page--homepage .hero-sub {
    font-size: 13.5px !important;
    padding-left: 18px !important;
    margin-bottom: 34px !important;
  }

  .page--homepage .hero-actions .btn-ghost,
  .page--homepage .hero-actions .btn-ghost-nav {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .page--homepage .hero-right {
    min-height: 272px;
    padding: 0 8px 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }

  .page--homepage .hero-left {
    padding: 18px 20px 0 !important;
  }

  .page--homepage .hero-visual {
    width: min(100%, 420px) !important;
    min-height: 272px !important;
    background: transparent !important;
  }

  .page--homepage .hero-image {
    inset: 0 !important;
    width: 100% !important;
    background: #000 url("../img/sfondo-home.jpg") center bottom / contain no-repeat !important;
    transform: none !important;
    filter: none !important;
  }

  .page--homepage .hero-spotlight {
    background: none !important;
  }

  .page--homepage .hero-grid,
  .page--homepage .hero-circle,
  .page--homepage .hero-circle-2,
  .page--homepage .hero-tagline-vertical,
  .page--homepage .hero-number,
  .page--homepage .hero-visual::after {
    display: none !important;
  }

  .page--homepage .ticker-item {
    font-size: 10px !important;
  }

  .page--homepage .manifesto,
  .page--homepage .framework,
  .page--homepage .contact-strip,
  .footer-home {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .page--homepage .manifesto,
  .page--homepage .framework,
  .page--homepage .testimonials,
  .page--homepage .contact-strip {
    padding-top: 76px !important;
    padding-bottom: 76px !important;
  }

  .page--homepage .framework-title,
  .page--homepage .contact-headline {
    font-size: clamp(30px, 10vw, 44px) !important;
  }

  .page--homepage .manifesto-quote {
    margin-bottom: 28px !important;
  }

  .page--homepage .step {
    padding: 24px 18px 50px !important;
  }

  .page--homepage .step-name {
    max-width: none;
    font-size: 24px !important;
  }

  .page--homepage .ai-banner {
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding: 26px 18px !important;
  }

  .page--homepage .hero-ticker,
  .page--homepage .clients-lane,
  .page--homepage .showreel-shell {
    width: auto !important;
    max-width: none !important;
  }

  .page--homepage .testimonials-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .page--homepage .testimonials-carousel {
    width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .page--homepage .testimonials-track {
    padding: 0 !important;
  }

  .page--homepage .testimonial,
  .page--homepage .testimonial:first-child {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 4px !important;
  }

  .page--homepage .clients-strip {
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  .page--homepage .clients-lane {
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .page--homepage .clients-track {
    gap: 10px !important;
  }

  .page--homepage .client-logo {
    min-width: 184px;
    min-height: 96px;
  }

  .page--homepage .client-logo-image {
    max-height: 80px;
    max-width: 172px;
  }

  .page--homepage .showreel-shell {
    margin-left: -16px !important;
    margin-right: -16px !important;
    margin-bottom: -46px !important;
  }

  .page--homepage .showreel-window {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .page--homepage .showreel-frame {
    min-height: 220px;
    border-radius: 0 !important;
  }

  .footer-home {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .footer-home .footer-row-top,
  .footer-home .footer-row-bottom {
    gap: 10px !important;
  }

  .footer-home .footer-newsletter {
    gap: 18px !important;
  }

  .footer-home .footer-newsletter-form {
    padding: 0;
    border-radius: 0;
  }

  .footer-home .footer-newsletter-title {
    font-size: 22px;
    max-width: 14ch;
  }

  .footer-home .footer-newsletter-fields {
    grid-template-columns: 1fr;
  }

  .footer-home .footer-newsletter-submit {
    width: 100%;
  }

  .footer-home .footer-newsletter-consent {
    font-size: 10px;
  }

  .footer-home .footer-divider {
    margin: 10px 0 12px !important;
  }

  .footer-home .footer-logo {
    gap: 10px !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-home .footer-logo img {
    width: 112px !important;
  }

  .footer-home .footer-office-address {
    font-size: 12px;
  }

  .footer-home .footer-office-phones {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }

  .footer-home .footer-office-phone {
    font-size: 11px;
  }

  .footer-home .footer-partner img {
    width: 148px;
  }

  .footer-home .footer-meta {
    font-size: 11px !important;
    line-height: 1.45 !important;
    max-width: none;
    text-align: center;
  }

  .footer-home .footer-social-icons {
    gap: 10px !important;
    justify-content: center;
  }

  .footer-home .footer-social-icons a {
    width: 34px;
    height: 34px;
    border-color: rgba(255, 255, 255, 0.28) !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  .footer-home .footer-social-icons img {
    width: 20px;
    height: 20px;
    opacity: 1 !important;
    filter: brightness(1.12) contrast(1.08);
  }

  .footer-home .footer-social-icons a[aria-label="Facebook"] img {
    width: 10px !important;
    height: 10px !important;
  }
}

.page--traction .hero,
.page--vti .vti-hero,
.page--cases .hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%) !important;
}

.page--traction .hero::before,
.page--vti .vti-hero::before,
.page--cases .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(236, 105, 29, 0.2), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(90, 129, 193, 0.12), transparent 22%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 246, 246, 0.86) 62%, rgba(179, 187, 221, 0.14) 100%);
  pointer-events: none;
}

.page--traction .hero-bg,
.page--vti .vti-bg,
.page--cases .hero-bg {
  background: transparent !important;
}

.page--vti .vti-bg-grid {
  background-image:
    linear-gradient(rgba(236, 105, 29, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236, 105, 29, 0.05) 1px, transparent 1px) !important;
}

.page--traction .hero-left,
.page--traction .hero-right,
.page--vti .vti-hero-content,
.page--cases .hero-content {
  position: relative;
  z-index: 2;
}

.page--traction .hero h1,
.page--vti .vti-hero h1,
.page--cases .hero h1 {
  color: var(--off-white) !important;
}

.page--traction .hero h1 em,
.page--vti .vti-hero h1 em,
.page--cases .hero h1 em {
  color: var(--orange) !important;
  font-style: normal !important;
}

.section-page-hero--traction .hero-question,
.page--traction .premise-body,
.page--vti .vti-hero-sub,
.page--vti .paradigm-body,
.section-page-hero--cases .hero-sub,
.page--cases .case-problem,
.page--cases .card-excerpt {
  color: #5d5d5d !important;
}

.section-page-hero--traction .hero-breadcrumb,
.page--vti .vti-eyebrow,
.section-page-hero--cases .hero-breadcrumb,
.section-page-hero--cases .hero-eyebrow,
.section-page-hero--traction .hero-eyebrow {
  color: var(--orange) !important;
}

.section-page-hero--traction .hero-breadcrumb a,
.section-page-hero--cases .hero-breadcrumb a {
  color: #7a7a7a !important;
}

.section-page-hero--traction .hero-breadcrumb .sep,
.section-page-hero--cases .hero-breadcrumb .sep {
  color: #a3a3a3 !important;
}

.section-page-hero--traction .hero-breadcrumb .current,
.section-page-hero--cases .hero-breadcrumb .current {
  color: var(--orange) !important;
}

.page--traction .hero-question {
  border-left-color: rgba(236, 105, 29, 0.22) !important;
}

.page--traction .signal-wrap,
.page--vti .orbit-wrap {
  filter: saturate(0.9);
}

.page--traction .pulse-ring,
.page--traction .tick,
.page--vti .orbit,
.page--vti .orbit-3,
.page--cases .hero-bg-num {
  border-color: rgba(236, 105, 29, 0.16) !important;
}

.page--traction .signal-core,
.page--vti .orbit-center-dot {
  background: var(--orange) !important;
  box-shadow: 0 0 22px rgba(236, 105, 29, 0.38), 0 0 56px rgba(236, 105, 29, 0.12) !important;
}

.page--traction .signal-label-x,
.page--traction .signal-label-y,
.page--vti .meta-label,
.page--cases .result-label,
.page--cases .case-percorso,
.page--cases .hero-bg-num {
  color: rgba(34, 34, 42, 0.42) !important;
}

.page--vti .meta-num,
.page--cases .result-num,
.page--cases .case-tag,
.page--cases .case-link {
  color: var(--orange) !important;
}

.page--vti .orbit-center,
.page--cases .case-tag {
  border-color: rgba(236, 105, 29, 0.18) !important;
}

.page--cases .hero-bg-num {
  opacity: 1;
}

.section-filter-bar--cases {
  background: rgba(255, 255, 255, 0.76);
  border-bottom-color: rgba(236, 105, 29, 0.1) !important;
}

.section-filter-bar--cases .filter-btn:hover {
  color: var(--off-white) !important;
}

:root {
  --hero-nav-offset: 132px;
  --hero-bottom-space: 72px;
  --hero-min-height: 92vh;
}

.hero-layout,
.hero > .container-fluid,
.vti-hero > .container-fluid,
.elements-hero > .container-fluid {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-layout > .row,
.hero > .container-fluid > .row,
.vti-hero > .container-fluid > .row,
.elements-hero > .container-fluid > .row,
.page--blog .hero-inner.row {
  display: flex !important;
  align-items: center;
  min-height: calc(var(--hero-min-height) - var(--hero-nav-offset) - var(--hero-bottom-space));
}

.page--homepage .hero,
.page--origin .hero,
.page--traction .hero,
.page--expression .hero,
.page--cases .hero,
.page--blog .hero,
.page--vti .vti-hero,
.page--elementi .elements-hero {
  min-height: var(--hero-min-height) !important;
  padding-top: var(--hero-nav-offset) !important;
  padding-bottom: var(--hero-bottom-space) !important;
}

.page--homepage .hero,
.page--origin .hero,
.page--traction .hero {
  display: block !important;
}

.page--vti .vti-hero {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page--cases .hero,
.page--expression .hero,
.page--blog .hero,
.page--elementi .elements-hero {
  display: flex !important;
  align-items: center;
}

.page--homepage .hero-left,
.page--origin .hero-left,
.page--traction .hero-left,
.page--homepage .hero-right,
.page--origin .hero-right,
.page--traction .hero-right {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.page--expression .hero-content,
.page--cases .hero-content,
.page--vti .vti-hero-content {
  max-width: none !important;
}

.page--homepage .hero-headline,
.page--origin .hero h1,
.page--traction .hero h1,
.page--expression .hero h1,
.page--cases .hero h1,
.page--vti .vti-hero h1,
.page--elementi .elements-title,
.page--blog .hero h1 {
  font-size: clamp(42px, 5.6vw, 82px) !important;
}

.page--elementi .elements-title {
  max-width: 11ch;
}

.page--blog .hero {
  padding-left: 0 !important;
  padding-right: 0 !important;
  background:
    radial-gradient(circle at 8% 12%, rgba(236, 105, 29, 0.12) 0%, rgba(236, 105, 29, 0.05) 24%, rgba(236, 105, 29, 0) 46%),
    radial-gradient(circle at 86% 40%, rgba(210, 220, 232, 0.34) 0%, rgba(235, 240, 245, 0.22) 30%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(90deg, #fffaf5 0%, #ffffff 44%, #f7f9fb 100%) !important;
}

.page--blog .hero-inner {
  border-bottom-color: transparent !important;
  border-bottom-width: 0 !important;
  padding-bottom: 0 !important;
}

.page--blog .hero::before,
.page--blog .hero::after,
.page--blog .hero-inner::before {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.page--blog .hero-inner::after {
  border-color: rgba(236, 105, 29, 0.14) !important;
  box-shadow:
    0 0 0 24px rgba(236, 105, 29, 0.025),
    0 0 0 56px rgba(236, 105, 29, 0.012) !important;
  background: transparent !important;
  opacity: 1 !important;
}

.page--blog .hero-left,
.page--blog .hero-right {
  padding: 0 !important;
}

.section-page-hero--blog .hero-breadcrumb,
.section-page-hero--blog .hero-breadcrumb a,
.section-page-hero--blog .hero-breadcrumb .sep {
  color: rgba(20, 20, 20, 0.58) !important;
}

.section-page-hero--blog .hero-breadcrumb .current,
.section-page-hero--blog .hero-eyebrow {
  color: var(--orange) !important;
}

.article-header {
  padding-top: var(--hero-nav-offset) !important;
}

.article-header-inner {
  width: 100%;
  max-width: var(--container-max-width);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--container-padding-x);
  padding-left: var(--container-padding-x);
}

.article-title {
  font-size: clamp(42px, 5.4vw, 72px) !important;
}

.page--contatti .contact-hero .contact-grid {
  display: flex !important;
  flex-wrap: wrap;
}

.page--contatti .contact-hero {
  width: 100%;
}

.page--contatti .contact-hero .left-panel,
.page--contatti .contact-hero .right-panel {
  flex: 0 0 auto;
  width: 50%;
  min-width: 0;
  padding-top: var(--hero-nav-offset) !important;
}

@media (max-width: 980px) {
  :root {
    --hero-nav-offset: 104px;
    --hero-bottom-space: 56px;
    --hero-min-height: auto;
  }

  .hero-layout > .row,
  .hero > .container-fluid > .row,
  .vti-hero > .container-fluid > .row,
  .elements-hero > .container-fluid > .row,
  .page--blog .hero-inner.row {
    min-height: auto;
    align-items: flex-start;
  }

  .page--homepage .hero-headline,
  .page--origin .hero h1,
  .page--traction .hero h1,
  .page--expression .hero h1,
  .page--cases .hero h1,
  .page--vti .vti-hero h1,
  .page--elementi .elements-title,
  .page--blog .hero h1 {
    font-size: clamp(38px, 10.8vw, 62px) !important;
  }

  .page--contatti .contact-hero .left-panel,
  .page--contatti .contact-hero .right-panel {
    width: 100%;
  }
}

@media (max-width: 720px) {
  :root {
    --hero-nav-offset: 92px;
    --hero-bottom-space: 48px;
  }

  .page--homepage .hero-headline,
  .page--origin .hero h1,
  .page--traction .hero h1,
  .page--expression .hero h1,
  .page--cases .hero h1,
  .page--vti .vti-hero h1,
  .page--elementi .elements-title,
.page--blog .hero h1 {
    font-size: clamp(34px, 11.2vw, 54px) !important;
  }
}

.page--homepage .hero-left,
.page--origin .hero-left,
.page--traction .hero-left,
.page--expression .hero-content,
.page--cases .hero-content,
.page--vti .vti-hero-content,
.page--elementi .elements-hero-copy,
.page--blog .hero-left {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  text-align: left !important;
}

.footer-home .footer-row-bottom {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.footer-home .footer-links-right {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  justify-self: end !important;
  gap: 24px !important;
  min-width: max-content;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.footer-home .footer-links-right li {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.footer-home .footer-links-right a {
  display: inline-block !important;
  color: #bdbdbd !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

.footer-home .footer-links-right a:hover {
  color: #ffffff !important;
}

.hero-eyebrow,
.section-tag,
.vti-eyebrow,
.left-eyebrow,
.form-intro-label,
.manifesto-label,
.ai-label,
.nl-label,
.paradigm-tag,
.cesare-tag,
.vti-cta-label,
.system-strip-label,
.method-detail-label,
.highlight-box-label,
.related-label,
.toc-label,
.share-label,
.page--origin .tl-week,
.page--origin .next-label,
.page--origin .output-time,
.page--elementi .elements-showcase-label,
.page--elementi .type-label,
.page--elementi .button-card-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--orange) !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.page--contatti .contact-hero .contact-grid.row {
  display: grid !important;
  grid-template-columns: minmax(420px, 0.9fr) minmax(620px, 1.1fr) !important;
  column-gap: clamp(72px, 7vw, 128px) !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 1480px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-left: clamp(48px, 5vw, 96px) !important;
  padding-right: clamp(48px, 5vw, 96px) !important;
  justify-content: stretch !important;
}

.page--contatti .contact-hero .contact-grid.row > * {
  width: 100% !important;
  max-width: 100% !important;
  padding-right: 0;
  padding-left: 0;
}

.page--contatti .contact-hero .contact-grid.row > .left-panel,
.page--contatti .contact-hero .contact-grid.row > .right-panel {
  flex: initial !important;
  width: 100% !important;
  max-width: 100% !important;
}

.page--contatti .contact-hero .left-panel {
  grid-column: 1 !important;
  position: relative !important;
  top: auto !important;
  align-self: start !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
  justify-content: flex-start !important;
  padding: var(--hero-nav-offset) 0 64px 0 !important;
}

.page--contatti .contact-hero .right-panel {
  grid-column: 2 !important;
  width: 100% !important;
  padding: var(--hero-nav-offset) 0 72px 0 !important;
  border-left: 0 !important;
}

.section-proof-strip--contact,
.section-faq--contact,
.page--contatti footer {
  width: 100% !important;
}

.section-faq--contact {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  padding: 120px 56px !important;
  clear: both !important;
}

.section-faq--contact > .container-fluid {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.section-faq--contact .faq-row {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.6fr) !important;
  gap: clamp(48px, 7vw, 100px) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.page--contatti .faq-row > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page--contatti .faq-list {
  min-width: 0;
  padding-right: 56px !important;
}

.page--contatti .contact-breadcrumb {
  display: flex;
  align-items: center;
  width: fit-content;
  gap: 10px;
  margin-bottom: 18px;
  color: #8a8a8a;
  font-family: 'Epilogue', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.page--contatti .contact-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.page--contatti .contact-breadcrumb .sep {
  color: var(--orange);
}

.page--contatti .contact-breadcrumb .current {
  color: #505050;
}

.page--contatti .left-eyebrow {
  margin-bottom: 28px !important;
}

.page--contatti .left-eyebrow {
  display: none !important;
}

.page--contatti .contact-hero .left-bg {
  display: none !important;
}

.page--contatti .contact-hero .left-bg-num,
.page--contatti .contact-hero .left-panel::after {
  display: none !important;
}

.page--contatti .contact-hero .contact-intro {
  width: 100% !important;
  max-width: 620px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.page--contatti .contact-hero .contact-form-wrapper {
  border-left: 0 !important;
  position: relative !important;
}

.page--contatti .contact-hero .left-headline {
  color: #1b1b1b !important;
  margin-bottom: 28px !important;
  width: 100% !important;
  max-width: 620px !important;
  line-height: 0.95 !important;
}

.hero-question,
.page--contatti .contact-hero .left-panel .form-intro-text {
  font-family: 'Epilogue', sans-serif !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1.75 !important;
  max-width: 520px !important;
  padding-left: 0 !important;
  border-left: 0 !important;
  color: rgba(30, 30, 30, 0.72) !important;
  margin: 0 !important;
}

.page--contatti .contact-hero .left-panel .form-intro-text {
  width: 100% !important;
  max-width: 540px !important;
  margin-top: 40px !important;
}

.section-proof-strip--contact {
  padding-right: 56px !important;
  padding-left: 56px !important;
  border-top: 1px solid rgba(236, 105, 29, 0.1) !important;
}

.page--contatti .proof-item {
  border: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
}

.page--contatti .contact-hero .contact-form-wrapper {
  width: 100% !important;
  max-width: 820px !important;
  margin-top: clamp(40px, 5vh, 72px) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.page--contatti .contact-hero .contact-form-wrapper::before {
  content: "" !important;
  position: absolute !important;
  inset: -80px -100px !important;
  background: radial-gradient(circle at 50% 28%, rgba(236, 105, 29, 0.055) 0%, rgba(236, 105, 29, 0.025) 32%, rgba(236, 105, 29, 0) 68%) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.page--contatti .contact-hero .contact-form {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 820px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
}

.page--contatti .contact-hero .left-panel .form-intro {
  margin: 0 0 20px !important;
  padding: 0 !important;
  max-width: 620px !important;
  border-bottom: 0 !important;
}

.page--contatti .contact-hero .left-panel .form-intro-label {
  margin-bottom: 22px !important;
}

.page--contatti .contact-hero .left-panel .form-intro-text strong {
  color: #1b1b1b !important;
  font-weight: 500 !important;
}

.page--contatti .contact-hero .right-panel .form-intro,
.page--contatti .contact-hero .left-panel .left-statement,
.page--contatti .contact-hero .left-panel .left-paths {
  display: none !important;
}

.page--contatti .form-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 28px !important;
  row-gap: 28px !important;
  margin-bottom: 0 !important;
  width: 100% !important;
}

.page--contatti .form-field,
.page--contatti .form-field.key-question {
  background: rgba(235, 231, 225, 0.82) !important;
  border: 1px solid rgba(20, 20, 20, 0.04) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  margin: 0 !important;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease !important;
}

.page--contatti .form-field:hover,
.page--contatti .form-field.key-question:hover {
  background: rgba(235, 231, 225, 0.95) !important;
  border-color: rgba(236, 105, 29, 0.18) !important;
}

.page--contatti .contact-form > .form-field,
.page--contatti .contact-form > .form-bottom {
  margin-top: 0 !important;
}

.page--contatti .form-row .form-field + .form-field {
  margin-top: 0 !important;
}

.page--contatti .form-field:focus-within,
.page--contatti .form-field.key-question:focus-within {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(236, 105, 29, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(236, 105, 29, 0.08) !important;
}

.page--contatti .form-field label,
.page--contatti .form-field.key-question label {
  color: #606060 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
}

.page--contatti .form-field:focus-within label {
  color: var(--orange) !important;
}

.page--contatti .form-field input,
.page--contatti .form-field select,
.page--contatti .form-field textarea,
.page--contatti .form-field.key-question textarea {
  color: #1b1b1b !important;
}

.page--contatti .form-field input::placeholder,
.page--contatti .form-field textarea::placeholder,
.page--contatti .form-field.key-question textarea::placeholder {
  color: #9a9a9a !important;
}

.page--contatti .form-field select option {
  background: #ece9e3 !important;
  color: #1b1b1b !important;
}

.page--contatti .contact-form input:not([type="checkbox"]),
.page--contatti .contact-form textarea,
.page--contatti .contact-form select {
  width: 100% !important;
  box-sizing: border-box !important;
}

.page--contatti .contact-form input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex: 0 0 16px !important;
  margin-top: 3px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(236, 105, 29, 0.65) !important;
  background: transparent !important;
}

@media (min-width: 981px) {
  .page--contatti .faq-row {
    align-items: start !important;
  }

  .page--contatti .faq-title {
    position: sticky !important;
    top: 120px !important;
  }

  .page--contatti .faq-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding-right: 56px !important;
  }

  .page--contatti .faq-item {
    padding: 0 28px !important;
    border: 1px solid rgba(236, 105, 29, 0.12) !important;
    border-radius: 20px !important;
    background: #f7f4ef !important;
    box-shadow: 0 1px 0 rgba(27, 27, 27, 0.03) !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  }

  .page--contatti .faq-item:last-child {
    border-bottom: 1px solid rgba(236, 105, 29, 0.12) !important;
  }

  .page--contatti .faq-item:hover,
  .page--contatti .faq-item.open {
    transform: none !important;
  }

  .page--contatti .faq-item:hover {
    background: #fbf9f5 !important;
    border-color: rgba(236, 105, 29, 0.2) !important;
    box-shadow: 0 14px 32px rgba(27, 27, 27, 0.05) !important;
  }

  .page--contatti .faq-item.open {
    background: #fffaf4 !important;
    border-color: rgba(236, 105, 29, 0.24) !important;
    box-shadow: 0 18px 40px rgba(236, 105, 29, 0.08) !important;
  }

  .page--contatti .faq-question {
    gap: 24px !important;
    align-items: flex-start !important;
    padding: 26px 0 24px !important;
  }

  .page--contatti .faq-q-text {
    color: #1b1b1b !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
  }

  .page--contatti .faq-item.open .faq-q-text {
    color: var(--orange) !important;
  }

  .page--contatti .faq-toggle {
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(236, 105, 29, 0.18) !important;
    background: #ffffff !important;
    color: var(--orange) !important;
    font-size: 18px !important;
  }

  .page--contatti .faq-item.open .faq-toggle {
    border-color: var(--orange) !important;
    background: var(--orange) !important;
    color: #ffffff !important;
  }

  .page--contatti .faq-answer {
    color: #5b5b5b !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    padding-right: 28px !important;
  }

  .page--contatti .faq-answer strong {
    color: #1b1b1b !important;
  }

  .page--contatti .faq-answer a {
    color: var(--orange) !important;
  }

  .page--contatti .faq-item.open .faq-answer {
    max-height: 420px !important;
    padding-bottom: 24px !important;
  }
}

.page--contatti .form-bottom {
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 24px 0 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  column-gap: 32px !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 40px !important;
}

.page--contatti .form-consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  min-width: 0 !important;
  max-width: 360px !important;
  flex: initial !important;
}

.page--contatti .consent-check {
  border-color: rgba(236, 105, 29, 0.65) !important;
  background: transparent !important;
}

.page--contatti .consent-label {
  color: rgba(30, 30, 30, 0.62) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  min-width: 0 !important;
}

.page--contatti .consent-label a {
  color: #505050 !important;
}

.page--contatti .consent-label a:hover {
  color: var(--orange) !important;
}

.page--contatti .btn-submit,
.page--contatti .contact-form button[type="submit"] {
  justify-self: end !important;
  align-self: center !important;
  min-width: 180px !important;
  width: auto !important;
  position: static !important;
  transform: none !important;
  border-color: rgba(236, 105, 29, 0.95) !important;
  color: #ec691d !important;
  background: transparent !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}

.page--contatti .btn-submit:hover,
.page--contatti .contact-form button[type="submit"]:hover {
  background: #ec691d !important;
  color: #ffffff !important;
  border-color: #ec691d !important;
}

@media (max-width: 1200px) {
  .page--contatti .contact-hero .contact-grid.row {
    grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.1fr) !important;
    column-gap: 72px !important;
  }
}

@media (max-width: 980px) {
  body.page--contatti {
    width: 100dvw !important;
    max-width: 100dvw !important;
    overflow-x: hidden !important;
  }

  .page--contatti #nav,
  .page--contatti .contact-hero .contact-grid.row {
    width: 100dvw !important;
    max-width: 100dvw !important;
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    overflow-x: clip !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .page--contatti .contact-hero .left-panel,
  .page--contatti .contact-hero .right-panel {
    grid-column: 1 / -1 !important;
  }

  .page--contatti .contact-hero .left-panel {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    padding: var(--hero-nav-offset) 0 0 !important;
  }

  .page--contatti .contact-hero .right-panel {
    padding: 48px 0 48px !important;
  }

  .section-faq--contact {
    padding: 72px 24px !important;
  }

  .section-faq--contact .faq-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .section-faq--contact .faq-title {
    position: relative !important;
    top: auto !important;
  }

  .section-faq--contact .faq-list {
    padding-right: 0 !important;
  }

  .section-proof-strip--contact {
    padding-right: 24px !important;
    padding-left: 24px !important;
  }

  .page--contatti .contact-hero .left-content,
  .page--contatti .form-intro,
  .page--contatti .contact-form,
  .page--contatti .contact-form-wrapper,
  .page--contatti .form-row,
  .page--contatti .form-field,
  .page--contatti .form-bottom,
  .page--contatti .proof-row,
  .page--contatti .proof-row > [class*="col-"],
  .page--contatti .faq-list,
  .page--contatti .faq-item,
  .page--contatti .faq-question,
  .page--contatti .faq-answer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .page--contatti .faq-q-text,
  .page--contatti .path-desc,
  .page--contatti .consent-label {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .page--contatti .contact-hero .left-content,
  .page--contatti .form-intro,
  .page--contatti .contact-form,
  .page--contatti .contact-form-wrapper,
  .section-proof-strip--contact > .container-fluid,
  .section-faq--contact > .container-fluid {
    width: min(100%, calc(100dvw - 48px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer-home .footer-row-bottom {
    grid-template-columns: 1fr !important;
  }

  .footer-home .footer-links-right {
    min-width: 0 !important;
    flex-wrap: wrap !important;
    justify-self: start !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    row-gap: 10px !important;
  }
}

@media (max-width: 900px) {
  .page--contatti .contact-hero .contact-grid.row {
    max-width: 100% !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    grid-template-columns: 1fr !important;
    row-gap: 48px !important;
  }

  .page--contatti .contact-hero .contact-intro,
  .page--contatti .contact-hero .contact-form-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .page--contatti .contact-hero .contact-form-wrapper::before {
    inset: -40px -32px !important;
  }

  .page--contatti .form-row {
    grid-template-columns: 1fr !important;
  }

  .page--contatti .form-bottom {
    grid-template-columns: 1fr !important;
    row-gap: 24px !important;
  }

  .page--contatti .btn-submit,
  .page--contatti .contact-form button[type="submit"] {
    justify-self: start !important;
  }
}

.page--homepage .hero-headline,
.page--origin .hero h1,
.page--traction .hero h1,
.page--expression .hero h1,
.page--cases .hero h1,
.page--vti .vti-hero h1,
.page--elementi .elements-title,
.page--blog .hero h1 {
  margin-left: 0 !important;
  text-align: left !important;
}

.page--homepage .hero {
  background: #080808 !important;
  min-height: calc(100vh - 24px) !important;
}

.page--homepage .hero::before {
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.52) 42%, rgba(10, 10, 10, 0.08) 100%),
    radial-gradient(circle at 74% 48%, rgba(236, 105, 29, 0.08), transparent 26%) !important;
}

.page--homepage .hero-layout,
.page--homepage .hero-layout > .row {
  position: relative;
}

.page--homepage .hero-layout {
  max-width: 1640px !important;
  margin: 0 auto !important;
  padding-left: 52px !important;
  padding-right: 52px !important;
}

.page--homepage .hero-left {
  position: relative !important;
  z-index: 3 !important;
  max-width: 670px !important;
  padding: 92px 0 108px 34px !important;
  justify-content: flex-start !important;
}

.page--homepage .hero-right {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.page--homepage .hero-visual {
  --spotlight-x: 70%;
  --spotlight-y: 52%;
  --spotlight-size: 420px;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  left: 0 !important;
  transform: none !important;
  background: #000 !important;
  overflow: hidden !important;
}

.page--homepage .hero-visual::before {
  content: none !important;
}

.page--homepage .hero-image {
  position: absolute;
  inset: 0;
  background: #000 url("../img/sfondo-home.jpg") calc(100% - 10px) bottom / contain no-repeat;
  transform: none;
  filter: saturate(0.96) contrast(1.02);
}

.page--homepage .hero-spotlight {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle var(--spotlight-size) at var(--spotlight-x) var(--spotlight-y),
      rgba(0, 0, 0, 0.06) 0,
      rgba(0, 0, 0, 0.14) 16%,
      rgba(0, 0, 0, 0.34) 30%,
      rgba(0, 0, 0, 0.66) 48%,
      rgba(0, 0, 0, 0.86) 68%,
      rgba(0, 0, 0, 0.9) 100%
    );
  mix-blend-mode: normal;
  opacity: 1 !important;
  transition: opacity 0.25s ease;
}

.page--homepage .hero-grid,
.page--homepage .hero-circle,
.page--homepage .hero-circle-2,
.page--homepage .hero-tagline-vertical,
.page--homepage .hero-number {
  display: none !important;
}

.page--homepage .hero-visual::after {
  pointer-events: none;
}

.page--homepage #nav:not(.scrolled) .nav-links a,
.page--homepage #nav:not(.scrolled) .top-nav a,
.page--homepage #nav:not(.scrolled) .nav-cta {
  color: #505050 !important;
}

.page--homepage #nav:not(.scrolled) .top-nav a {
  border-color: rgba(245, 239, 232, 0.28);
}

.page--homepage #nav:not(.scrolled) .nav-toggle {
  border-color: rgba(245, 239, 232, 0.26) !important;
  background: rgba(245, 239, 232, 0.06) !important;
}

.page--homepage .hero-headline,
.page--homepage .hero-sub,
.page--homepage .hero-eyebrow {
  position: relative;
  z-index: 3;
}

.page--homepage .hero-headline {
  color: #f5efe8 !important;
  font-size: clamp(74px, 6.2vw, 104px) !important;
  font-weight: 800 !important;
  line-height: 0.94 !important;
  letter-spacing: -0.04em !important;
  max-width: 7.2ch !important;
  margin-bottom: 54px !important;
}

.page--homepage .hero-sub {
  color: rgba(245, 239, 232, 0.82) !important;
  max-width: 470px !important;
  margin-bottom: 58px !important;
  padding-left: 24px !important;
  border-left: 2px solid rgba(236, 105, 29, 0.9) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
}

.page--homepage .hero-actions .btn-ghost,
.page--homepage .hero-actions .btn-ghost-nav {
  color: #f5efe8 !important;
}

.page--homepage .hero-actions .btn-ghost-nav::before {
  background: rgba(245, 239, 232, 0.88) !important;
}

.page--homepage .hero-actions {
  gap: 18px !important;
}

.page--homepage .hero-actions .btn-primary {
  min-width: 144px !important;
  min-height: 48px !important;
  padding: 14px 28px !important;
}

.page--homepage .hero-actions .btn-ghost,
.page--homepage .hero-actions .btn-ghost-nav {
  min-height: 48px !important;
  padding: 14px 0 !important;
  letter-spacing: 0.12em !important;
}

@media (max-width: 980px) {
  .page--homepage .hero-right {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    flex: 0 0 auto !important;
    pointer-events: auto !important;
  }

  .page--homepage .hero::before {
    background:
      linear-gradient(180deg, rgba(10, 10, 10, 0.86), rgba(10, 10, 10, 0.64) 38%, rgba(10, 10, 10, 0.14) 100%),
      radial-gradient(circle at 50% 28%, rgba(236, 105, 29, 0.16), transparent 34%) !important;
  }

  .page--homepage .hero-layout {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .page--homepage .hero-left {
    max-width: none !important;
    padding: 26px 0 0 !important;
  }

  .page--homepage .hero-visual {
    --spotlight-x: 58%;
    --spotlight-y: 36%;
    --spotlight-size: 300px;
  }

  .page--homepage .hero-image {
    inset: 0;
    background-position: center bottom !important;
  }

  .page--homepage .hero-spotlight {
    background:
      linear-gradient(180deg, rgba(8, 8, 8, 0.28), rgba(8, 8, 8, 0.74)),
      radial-gradient(circle at 58% 32%, rgba(255, 196, 143, 0.18), transparent 30%);
  }
}

:root {
  --site-page-x-desktop: var(--container-padding-x);
  --site-page-x-mobile: 20px;
  --site-breadcrumb-gap-desktop: 12px;
  --site-breadcrumb-gap-mobile: 10px;
  --site-breadcrumb-space-desktop: 24px;
  --site-breadcrumb-space-mobile: 18px;
}

.page main > section > .container-fluid,
.page .article-header-inner {
  max-width: var(--container-max-width) !important;
  padding-left: var(--container-padding-x) !important;
  padding-right: var(--container-padding-x) !important;
}

.page--homepage .showreel-shell,
.page--ecosistema .purpose-section,
.page--ecosistema .ecosystem-map,
.page--ecosistema .competence-section {
  padding-left: var(--site-shell-inline) !important;
  padding-right: var(--site-shell-inline) !important;
}

.page--homepage .showreel-shell {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.page :is(.hero-breadcrumb, .contact-breadcrumb, .breadcrumb, .hero-path-indicator) {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: var(--site-breadcrumb-gap-desktop) !important;
  margin: 0 0 var(--site-breadcrumb-space-desktop) !important;
  padding: 0 !important;
}

.page :is(.hero-breadcrumb, .contact-breadcrumb, .breadcrumb, .hero-path-indicator) .sep {
  margin: 0 !important;
}

  .page--origin .hero-left,
  .page--ecosistema .ecosystem-hero-copy,
  .page--homepage .hero-left,
  .page--traction .hero-left,
  .page--contatti .contact-hero .left-panel,
  .page--contatti .contact-hero .right-panel,
  .page--vti .vti-hero-content {
    padding-left: var(--site-page-x-desktop) !important;
    padding-right: var(--site-page-x-desktop) !important;
}

@media (max-width: 980px) {
  .page :is(.hero-breadcrumb, .contact-breadcrumb, .breadcrumb, .hero-path-indicator) {
    gap: var(--site-breadcrumb-gap-mobile) !important;
    margin-bottom: var(--site-breadcrumb-space-mobile) !important;
  }

  .page--origin .hero-left,
  .page--ecosistema .ecosystem-hero-copy,
  .page--homepage .hero-left,
  .page--traction .hero-left,
  .page--contatti .contact-hero .left-panel,
  .page--contatti .contact-hero .right-panel,
  .page--vti .vti-hero-content {
    padding-left: var(--site-page-x-mobile) !important;
    padding-right: var(--site-page-x-mobile) !important;
  }

  .page--homepage .showreel-shell,
  .page--ecosistema .purpose-section,
  .page--ecosistema .ecosystem-map,
  .page--ecosistema .competence-section {
    padding-left: var(--site-page-x-mobile) !important;
    padding-right: var(--site-page-x-mobile) !important;
  }
}

.page--homepage .framework {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

.page--homepage .showreel-window {
  width: 100% !important;
}

.page--homepage .showreel-frame {
  width: 100% !important;
  min-height: auto !important;
  aspect-ratio: 1920 / 1080 !important;
}

.page--homepage .showreel-orbit {
  width: 220px !important;
  height: 220px !important;
}

.page--homepage .showreel-orbit svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.page--homepage .showreel-orbit text {
  fill: var(--orange);
  font-family: 'Sora', sans-serif !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.page--homepage .showreel-centerpiece {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page--homepage .showreel-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px !important;
  height: 96px !important;
  aspect-ratio: 1 / 1;
  min-width: 0 !important;
  max-width: none !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transform: translate(-50%, -50%);
  padding: 0 !important;
}

.page--homepage .showreel-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px !important;
  height: 180px !important;
  aspect-ratio: 1 / 1;
  inset: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.page--homepage .ai-banner {
  border-radius: 0 !important;
  padding-top: 172px !important;
}

.page--homepage .ai-banner::before {
  content: none !important;
}

@media (max-width: 980px) {
  .page--homepage .framework {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .page--homepage .showreel-frame {
    aspect-ratio: 1920 / 1080 !important;
  }

  .page--homepage .showreel-orbit {
    width: 168px !important;
    height: 168px !important;
  }

  .page--homepage .showreel-orbit text {
    font-size: 8px;
  }

  .page--homepage .showreel-play {
    width: 84px !important;
    height: 84px !important;
  }

  .page--homepage .ai-banner {
    border-radius: 0 !important;
  }
}

@media (max-width: 720px) {
  .page--contatti .contact-hero .left-panel,
  .page--contatti .contact-hero .right-panel,
  .section-proof-strip--contact,
  .section-faq--contact {
    width: 100dvw !important;
    max-width: 100dvw !important;
    overflow-x: clip !important;
  }

  .page--contatti .left-content,
  .page--contatti .form-intro,
  .page--contatti .contact-form,
  .section-proof-strip--contact > .container-fluid,
  .section-faq--contact > .container-fluid {
    width: min(100%, calc(100dvw - 40px)) !important;
  }

  .page--contatti .form-field,
  .page--contatti .form-bottom,
  .page--contatti .btn-submit {
    overflow: hidden !important;
  }

  .page--contatti .faq-question {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 24px !important;
    align-items: flex-start !important;
  }

  .page--homepage .showreel-orbit {
    width: 148px !important;
    height: 148px !important;
  }

  .page--homepage .showreel-orbit text {
    font-size: 7px;
    letter-spacing: 0.16em;
  }

  .page--homepage .ai-banner {
    border-radius: 0 !important;
  }

  .footer-home .footer-links-right {
    width: 100% !important;
    justify-content: flex-start !important;
  }
}


/* ===== clever_about_me.css ===== */
.page--about-me {
  background: #0d0d10;
  color: #f6f1eb;
}

.page--about-me main {
  overflow: hidden;
}

.section-page-hero--about-me .hero-breadcrumb,
.section-page-hero--about-me .hero-eyebrow,
.section-page-hero--about-me .section-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.section-page-hero--about-me .hero-breadcrumb {
  margin-bottom: 30px;
  color: rgba(246, 241, 235, 0.45);
  font-family: 'Epilogue', sans-serif;
  font-weight: 400;
  letter-spacing: 0.14em;
}

.section-page-hero--about-me .hero-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.section-page-hero--about-me .hero-breadcrumb .sep,
.section-page-hero--about-me .hero-breadcrumb .current {
  color: var(--orange);
}

.section-page-hero--about-me .hero-eyebrow,
.section-page-hero--about-me .section-tag {
  color: var(--orange);
}

.section-page-hero--about-me .hero-eyebrow::before,
.section-page-hero--about-me .section-tag::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--orange);
}

.about-me-hero {
  padding: calc(var(--hero-nav-offset, 132px) + 26px) 56px 88px;
}

.about-me-intro,
.about-me-title-wrap {
  min-height: 100%;
}

.about-me-intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  padding-top: 16px;
}

.intro-copy {
  max-width: 34ch;
  color: rgba(246, 241, 235, 0.68);
  font-size: 18px;
  line-height: 1.75;
}

.intro-copy strong {
  color: #f6f1eb;
  font-weight: 500;
}

.experience-block {
  display: flex;
  align-items: flex-end;
  gap: 22px;
}

.experience-value {
  font-family: 'Sora', sans-serif;
  font-size: clamp(68px, 8vw, 132px);
  font-weight: 800;
  line-height: 0.9;
  color: #f6f1eb;
}

.experience-value span {
  font-size: 0.28em;
  color: var(--orange);
  vertical-align: top;
}

.experience-copy {
  max-width: 18ch;
  padding-bottom: 16px;
  color: rgba(246, 241, 235, 0.68);
  font-size: 16px;
  line-height: 1.6;
}

.about-me-title-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: clamp(0px, 4vw, 58px);
}

.about-me-title-wrap h1,
.statement-inner h2,
.services-heading h2,
.testimonials-title h2,
.cta-copy h2 {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-size: clamp(38px, 5.7vw, 92px);
  font-weight: 800;
  line-height: 0.97;
  letter-spacing: 0;
}

.about-me-title-wrap h1 {
  max-width: 9.5ch;
  margin-top: 22px;
}

.about-me-title-wrap h1 em {
  font-style: normal;
  color: var(--orange);
}

.hero-mail {
  margin-top: 52px;
  color: #f6f1eb;
  font-family: 'Sora', sans-serif;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  text-decoration: none;
}

.about-me-banner {
  position: relative;
  height: clamp(380px, 68vh, 860px);
  overflow: hidden;
}

.about-me-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 13, 16, 0.18) 0%, rgba(13, 13, 16, 0.42) 100%),
    radial-gradient(circle at 75% 20%, rgba(236, 105, 29, 0.18), transparent 32%);
}

.about-me-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  transform: scale(1.04);
}

.about-me-statement,
.about-me-skills,
.about-me-testimonials,
.about-me-metrics,
.about-me-cta {
  padding: 120px 56px;
}

.statement-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.statement-inner .section-tag {
  justify-content: center;
  margin-bottom: 24px;
}

.statement-inner h2 {
  font-size: clamp(32px, 4.4vw, 60px);
  margin-bottom: 30px;
}

.statement-inner p {
  max-width: 58ch;
  margin: 0 auto;
  color: rgba(246, 241, 235, 0.66);
  font-size: 18px;
  line-height: 1.85;
}

.statement-inner strong {
  color: #f6f1eb;
  font-weight: 500;
}

.section-divider {
  height: 1px;
  width: 100%;
  margin-bottom: 46px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(236, 105, 29, 0.22), rgba(255, 255, 255, 0.1));
}

.skill-card {
  height: 100%;
  padding: 34px 28px 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.16);
}

.skill-label {
  color: var(--orange);
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.skill-value {
  margin: 18px 0 14px;
  font-family: 'Sora', sans-serif;
  font-size: clamp(44px, 4vw, 62px);
  font-weight: 800;
  line-height: 1;
}

.skill-card p {
  color: rgba(246, 241, 235, 0.64);
  font-size: 15px;
  line-height: 1.75;
}

.about-me-services {
  padding: 130px 56px 150px;
  background: #f4f1eb;
  color: #1d1d20;
}

.services-heading {
  margin-bottom: 72px;
  align-items: end;
}

.services-heading h2 {
  font-size: clamp(34px, 4.1vw, 60px);
}

.services-stack {
  display: grid;
  gap: 28px;
}

.service-panel {
  position: sticky;
  top: 138px;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) minmax(240px, 320px);
  gap: 34px;
  padding: 42px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 34px 88px rgba(0, 0, 0, 0.12);
}

.service-index {
  color: rgba(236, 105, 29, 0.78);
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.service-kicker {
  margin-bottom: 14px;
  color: var(--orange);
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.service-content h3 {
  margin: 0 0 18px;
  font-family: 'Sora', sans-serif;
  font-size: clamp(30px, 4vw, 58px);
  font-weight: 800;
  line-height: 0.98;
}

.service-content p {
  max-width: 48ch;
  color: #5c5c60;
  font-size: 16px;
  line-height: 1.8;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.service-tags li {
  padding: 10px 14px;
  border: 1px solid rgba(236, 105, 29, 0.18);
  border-radius: 999px;
  color: #3d3d42;
  font-size: 12px;
  font-weight: 500;
}

.service-visual {
  display: flex;
  align-items: end;
  justify-content: flex-start;
  min-height: 280px;
  padding: 28px;
  border-radius: 8px;
  color: #ffffff;
  font-family: 'Sora', sans-serif;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 800;
  line-height: 1.05;
}

.service-visual span {
  max-width: 7ch;
}

.service-visual--orange {
  background:
    radial-gradient(circle at 80% 18%, rgba(255,255,255,0.16), transparent 20%),
    linear-gradient(135deg, #ec691d 0%, #f59e28 100%);
}

.service-visual--blue {
  background:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,0.14), transparent 22%),
    linear-gradient(135deg, #2f4d82 0%, #5a81c1 100%);
}

.service-visual--green {
  background:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,0.14), transparent 22%),
    linear-gradient(135deg, #2a6b5b 0%, #68bfa9 100%);
}

.testimonials-title {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 34px;
}

.testimonials-title h2 {
  font-size: clamp(34px, 4.2vw, 56px);
}

.testimonials-scroller {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.testimonial-card {
  height: 100%;
  padding: 30px 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.testimonial-card p {
  color: rgba(246, 241, 235, 0.72);
  font-size: 17px;
  line-height: 1.85;
}

.testimonial-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 30px;
}

.testimonial-meta strong {
  color: #f6f1eb;
  font-family: 'Sora', sans-serif;
  font-size: 20px;
}

.testimonial-meta span {
  color: rgba(246, 241, 235, 0.5);
  font-size: 14px;
}

.about-me-metrics {
  padding-top: 0;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.metric-card {
  padding: 26px 0 0;
  border-top: 1px solid rgba(236, 105, 29, 0.28);
}

.metric-card strong {
  display: block;
  margin-bottom: 14px;
  color: #f6f1eb;
  font-family: 'Sora', sans-serif;
  font-size: clamp(40px, 4vw, 58px);
  font-weight: 800;
  line-height: 1;
}

.metric-card span {
  display: block;
  color: rgba(246, 241, 235, 0.62);
  font-size: 15px;
  line-height: 1.75;
}

.about-me-ticker {
  overflow: hidden;
  padding: 18px 0;
  background: var(--orange);
}

.about-me-ticker-track {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  animation: aboutTicker 26s linear infinite;
}

.about-me-ticker-track span {
  position: relative;
  color: #111115;
  font-family: 'Sora', sans-serif;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.about-me-ticker-track span::after {
  content: "•";
  margin-left: 34px;
}

.about-me-cta {
  padding-top: 110px;
}

.cta-copy h2 {
  font-size: clamp(34px, 4.4vw, 58px);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 16px;
}

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

@media (max-width: 1180px) {
  .service-panel {
    grid-template-columns: 1fr;
    top: 118px;
  }

  .service-visual {
    min-height: 220px;
  }

  .testimonials-scroller,
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .about-me-hero,
  .about-me-statement,
  .about-me-skills,
  .about-me-services,
  .about-me-testimonials,
  .about-me-metrics,
  .about-me-cta {
    padding-left: 20px;
    padding-right: 20px;
  }

  .about-me-hero {
    padding-top: 118px;
    padding-bottom: 62px;
  }

  .about-me-title-wrap {
    padding-left: 0;
  }

  .about-me-title-wrap h1 {
    max-width: 11ch;
  }

  .about-me-banner {
    min-height: 320px;
  }

  .statement-inner p,
  .intro-copy {
    font-size: 16px;
  }

  .service-panel {
    padding: 28px 22px;
  }
}

@media (max-width: 720px) {
  .experience-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .experience-copy {
    max-width: 26ch;
    padding-bottom: 0;
  }

  .testimonials-scroller,
  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .about-me-ticker-track span::after {
    margin-left: 22px;
  }
}


/* ===== clever_blog.css ===== */


  /* ─── HERO ─── */
  .hero {
    padding: 146px 56px 0;
    position: relative; overflow: hidden;
  }

  .page--blog .hero {
    min-height: 360px !important;
  }

  .hero-inner {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 56px; align-items: center;
    padding-bottom: 42px;
  }

  .page--blog .hero-inner.row {
    min-height: 220px !important;
  }
  .hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7d7d7d;
  }
  .hero-breadcrumb a {
    color: #7d7d7d;
    text-decoration: none;
    transition: color .2s;
  }
  .hero-breadcrumb a:hover { color: var(--orange); }
  .hero-breadcrumb .sep { color: #b3b3b3; }
  .hero-breadcrumb .current { color: var(--orange); }
  .hero-left {}
  .hero-eyebrow {
    font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 28px;
    display: flex; align-items: center; gap: 12px;
  }
  .hero-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--orange); }
  .hero h1 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(44px, 5.2vw, 74px);
    font-weight: 800; line-height: 0.98; letter-spacing: 0;
    color: #1b1b1b;
  }
  .hero h1 em { font-style: normal; color: var(--orange); }
  .section-page-hero--blog .hero-breadcrumb,
  .section-page-hero--blog .hero-eyebrow,
  .section-page-hero--blog .hero h1 {
    opacity: 1 !important;
    animation: none !important;
  }

  .section-page-hero--blog .hero-eyebrow {
    color: var(--orange) !important;
  }

  .section-page-hero--blog .hero h1 {
    color: #1b1b1b !important;
    margin: 0 !important;
    max-width: 11ch;
  }

  .page--blog .hero h1 em {
    color: var(--orange) !important;
    font-style: normal !important;
  }

  .hero-divider {
    display: none;
  }

  .blog-shell {
    display: grid;
    grid-template-columns: 286px minmax(0, 1fr);
    gap: 36px;
    padding: 48px 56px 0;
    align-items: start;
  }

  .blog-sidebar {
    position: sticky;
    top: 110px;
    align-self: start;
  }

  .sidebar-panel {
    padding: 8px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .sidebar-eyebrow,
  .sidebar-title {
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--orange);
  }

  .sidebar-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
  }

  .sidebar-eyebrow::before {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--orange);
  }

  .sidebar-group + .sidebar-group {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(236,105,29,0.12);
  }

  .sidebar-title {
    margin-bottom: 14px;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
  }

  .filter-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .filter-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .filter-list--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
  }

  .filter-chip {
    padding: 10px 14px;
    border: 1px solid rgba(236,105,29,0.18);
    border-radius: 8px;
    background: #fff;
    color: #505050;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
  }

  .filter-chip.active,
  .filter-chip:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
  }

  .filter-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: #6a6a6a;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    transition: color .2s, transform .2s;
  }

  .filter-link.active,
  .filter-link:hover {
    color: var(--orange);
    transform: translateX(2px);
  }

  .blog-content {
    min-width: 0;
  }

  /* ─── FEATURED POST ─── */
  .featured-wrap { padding: 0; }
  .post-featured {
    display: grid; grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border);
    margin-top: 0;
    text-decoration: none; color: inherit;
    transition: border-color .3s;
  }
  .post-featured:hover { border-color: var(--border-orange); }

  .post-featured-visual {
    background: linear-gradient(135deg, #0e0c07, #0b0a05);
    min-height: 440px; position: relative; overflow: hidden;
    display: flex; align-items: flex-end;
    padding: 40px 40px 40px 64px;
  }
  .post-featured-visual svg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 28px;
    width: calc(100% - 28px);
    height: 100%;
  }
  .post-featured-topic {
    position: relative; z-index: 1;
    font-size: 9px; letter-spacing: .25em; text-transform: uppercase;
    color: rgba(236,105,29,0.5);
  }

  .post-featured-content {
    padding: 56px 56px 48px;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .post-meta {
    display: flex; align-items: center; gap: 16px; margin-bottom: 24px;
  }
  .post-topic-tag {
    font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--orange); border: 1px solid var(--border-orange);
    padding: 4px 10px;
  }
  .post-date { font-size: 11px; color: var(--gray-mid); letter-spacing: .06em; }
  .post-read { font-size: 11px; color: var(--gray-mid); }
  .post-author {
    font-size: 11px; color: var(--orange); letter-spacing: .06em;
  }

  .post-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(26px, 3vw, 42px);
    font-weight: 300; line-height: 1.15; letter-spacing: -.02em;
    margin-bottom: 20px;
  }
  .post-title em { font-style: italic; color: var(--orange); }
  .post-excerpt {
    font-size: 14px; line-height: 1.8; color: var(--gray);
    margin-bottom: 40px; max-width: 420px;
  }
  .post-link {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--orange);
    display: flex; align-items: center; gap: 10px;
    transition: gap .2s;
  }
  .post-featured:hover .post-link { gap: 16px; }
  .post-link::after { content: '→'; }

  /* ─── POST GRID ─── */
  .grid-wrap { padding: 28px 0 160px; }
  .posts-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  .post-card {
    border: 1px solid rgba(236,105,29,0.08);
    border-radius: 0;
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column;
    overflow: hidden;
    transition: border-color .3s, background .2s;
  }
  .post-card:hover { border-color: rgba(236,105,29,0.22); background: rgba(236,105,29,.015); }

  .post-card-media {
    aspect-ratio: 16 / 10;
    border-bottom: 1px solid rgba(236,105,29,0.08);
    background-color: #f0ede7;
    background-size: cover;
    background-position: center;
  }

  .post-card-media--posizionamento {
    background-image:
      linear-gradient(135deg, rgba(236,105,29,0.14), rgba(236,105,29,0.03)),
      radial-gradient(circle at 28% 36%, rgba(236,105,29,0.34), transparent 18%),
      linear-gradient(120deg, #f7f4ee, #ece7dd);
  }

  .post-card-media--percezione {
    background-image:
      linear-gradient(135deg, rgba(219,140,84,0.18), rgba(236,105,29,0.02)),
      radial-gradient(circle at 72% 30%, rgba(236,105,29,0.28), transparent 20%),
      linear-gradient(120deg, #fbf8f1, #efe8de);
  }

  .post-card-media--mercato {
    background-image:
      linear-gradient(135deg, rgba(80,80,80,0.12), rgba(236,105,29,0.06)),
      linear-gradient(45deg, transparent 42%, rgba(236,105,29,0.18) 42%, rgba(236,105,29,0.18) 46%, transparent 46%),
      linear-gradient(120deg, #f7f5f0, #ebe5db);
  }

  .post-card-media--ai {
    background-image:
      radial-gradient(circle at 50% 50%, rgba(236,105,29,0.32), transparent 12%),
      radial-gradient(circle at 28% 36%, rgba(236,105,29,0.22), transparent 8%),
      radial-gradient(circle at 72% 34%, rgba(236,105,29,0.18), transparent 8%),
      linear-gradient(135deg, #181410, #2a2119 52%, #120f0d);
  }

  .post-card-media--metodo {
    background-image:
      linear-gradient(135deg, rgba(236,105,29,0.18), rgba(255,255,255,0)),
      linear-gradient(90deg, rgba(236,105,29,0.1) 1px, transparent 1px),
      linear-gradient(rgba(236,105,29,0.08) 1px, transparent 1px),
      linear-gradient(120deg, #faf6ef, #efe8dd);
    background-size: auto, 42px 42px, 42px 42px, auto;
  }

  .post-card-media--casi {
    background-image:
      linear-gradient(135deg, rgba(236,105,29,0.22), rgba(236,105,29,0.04)),
      radial-gradient(circle at 20% 70%, rgba(0,0,0,0.12), transparent 18%),
      linear-gradient(120deg, #f7f2ea, #ebe3d8);
  }

  .post-card-header {
    padding: 22px 28px 0;
    border-bottom: 0;
    display: flex; align-items: start; justify-content: flex-start; gap: 16px;
  }
  .card-topic-tag {
    font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--orange); border: 1px solid var(--border-orange);
    padding: 4px 10px; flex-shrink: 0;
  }
  .post-card-content { padding: 18px 28px 28px; flex: 1; display: flex; flex-direction: column; }
  .card-title {
    font-family: 'Sora', sans-serif;
    font-size: 22px; font-weight: 400; line-height: 1.25;
    margin-bottom: 14px; flex: 1;
  }
  .card-excerpt {
    font-size: 13px; line-height: 1.7; color: var(--gray);
    margin-bottom: 24px;
  }

  .post-card-footer {
    padding: 0 28px 24px;
    border-top: 0;
    display: flex; align-items: center; justify-content: space-between;
  }
  .card-date { font-size: 11px; color: var(--gray-mid); }
  .card-read { font-size: 11px; color: var(--gray-mid); }
  .card-arrow {
    font-size: 16px; color: rgba(236,105,29,.4);
    transition: transform .2s, color .2s;
  }
  .post-card:hover .card-arrow { transform: translate(3px,-3px); color: var(--orange); }

  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 42px;
  }

  .pagination-btn {
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(236,105,29,0.18);
    border-radius: 8px;
    background: #fff;
    color: #505050;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
  }

  .pagination-btn.active,
  .pagination-btn:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
  }

  .pagination-btn[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  /* ─── NEWSLETTER STRIP ─── */
  .newsletter {
    margin: 0 56px 80px;
    border: 1px solid var(--border-orange);
    background: linear-gradient(135deg, #0e0c07, #0a0a0a);
    padding: 64px 72px;
    display: grid;
    grid-template-columns: minmax(360px, 0.84fr) minmax(520px, 1.16fr);
    gap: clamp(40px, 5vw, 84px);
    align-items: center;
    position: relative; overflow: hidden;
  }
  .newsletter::before {
    content: '✦';
    position: absolute; right: 72px; top: 50%;
    transform: translateY(-50%);
    font-size: 200px; color: rgba(236,105,29,.025);
    pointer-events: none;
  }
  .nl-label {
    font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
  }
  .nl-label::before { content: ''; width: 20px; height: 1px; background: var(--orange); }
  .nl-headline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(22px, 2.5vw, 36px);
    font-weight: 300; line-height: 1.2;
  }
  .nl-headline em { font-style: italic; color: var(--orange); }
  .nl-sub {
    font-size: 13px; color: var(--gray); line-height: 1.7;
    margin-top: 12px; max-width: 460px;
  }
  .nl-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
    width: 100%;
    max-width: 760px;
    justify-self: end;
  }
  .nl-fields {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) auto;
    gap: 20px;
    width: 100%;
  }
.nl-input {
  width: 100%;
  min-height: 50px;
  background: rgba(255,255,255,.06);
  border: 1px solid #d5d5d5;
  color: var(--off-white);
  font-family: 'Epilogue', sans-serif;
    font-size: 14px;
    padding: 0 16px;
    outline: none;
    transition: border-color .2s;
  }
  .nl-input::placeholder { color: var(--gray-mid); }
  .nl-input:focus { border-color: var(--orange); }

  /* ─── TOPICS INDEX ─── */
.topics-index {
  padding: 0 56px 120px;
  border-top: 0;
}
  .topics-header {
    padding: 64px 0 48px;
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--orange);
    display: flex; align-items: center; gap: 16px;
  }
  .topics-header::after { content: ''; flex: 1; height: 1px; background: var(--border); }

  .topics-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  }
  .topic-card {
    border: 1px solid var(--border); padding: 32px 28px;
    text-decoration: none; color: inherit;
    transition: border-color .3s, background .2s;
  }
  .topic-card:hover { border-color: var(--border-orange); background: rgba(236,105,29,.02); }
  .topic-icon {
    font-size: 28px; margin-bottom: 20px; display: block;
    color: rgba(236,105,29,.5);
  }
  .topic-name {
    font-family: 'Sora', sans-serif;
    font-size: 18px; font-weight: 400; margin-bottom: 8px; line-height: 1.3;
  }
  .topic-count { font-size: 11px; color: var(--gray-mid); }

  @keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
  @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

  .reveal {
    opacity:0; transform:translateY(24px);
    transition: opacity .8s cubic-bezier(.25,.46,.45,.94), transform .8s cubic-bezier(.25,.46,.45,.94);
  }
  .reveal.visible { opacity:1; transform:none; }
  .reveal-delay-1 { transition-delay:.1s; }
  .reveal-delay-2 { transition-delay:.2s; }
  .reveal-delay-3 { transition-delay:.3s; }
  .reveal-delay-4 { transition-delay:.2s; }

  .hero {
    background:
      radial-gradient(circle at 18% 18%, rgba(236,105,29,0.1), transparent 22%),
      linear-gradient(180deg, rgba(255,255,255,1), rgba(250,248,245,0.94));
  }

  .hero-inner {
    position: relative;
  }

  .hero-inner::after {
    content: '';
    position: absolute;
    right: 0;
    top: 32px;
    width: min(38vw, 420px);
    height: min(38vw, 420px);
    border-radius: 50%;
    border: 1px solid rgba(236,105,29,0.12);
    box-shadow:
      0 0 0 24px rgba(236,105,29,0.03),
      0 0 0 56px rgba(236,105,29,0.015);
    pointer-events: none;
  }

  .post-featured {
    border-radius: 18px;
    overflow: hidden;
    border-color: rgba(236,105,29,0.14);
    box-shadow: 0 26px 60px rgba(0,0,0,0.18);
  }

  .post-featured-content {
    background:
      linear-gradient(180deg, rgba(244,241,235,0.03), rgba(244,241,235,0.01)),
      radial-gradient(circle at top right, rgba(236,105,29,0.12), transparent 32%);
  }

  .post-title {
    max-width: 12ch;
  }

  .posts-empty {
    grid-column: 1 / -1;
    padding: 36px 28px;
    border: 1px solid rgba(236,105,29,0.12);
    border-radius: 24px;
    background: rgba(255,255,255,0.88);
    color: #505050;
    font-size: 14px;
    line-height: 1.7;
  }

  .card-title {
    font-size: 24px;
  }

  .newsletter {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 26px 60px rgba(0,0,0,0.18);
  }

  .newsletter::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 80% 22%, rgba(236,105,29,0.18), transparent 22%),
      linear-gradient(90deg, rgba(236,105,29,0.04), transparent 30%);
    pointer-events: none;
  }

  .nl-sub {
    color: rgba(244,241,235,0.66);
  }

  .nl-input {
    border-radius: 0;
  }

  .nl-btn {
    min-height: 50px;
    padding: 0 22px !important;
    border-radius: 8px !important;
    align-self: stretch;
  }

  .topics-grid {
    gap: 20px;
  }

  .topic-card {
    border-radius: 24px;
    border-color: rgba(236,105,29,0.08);
    background: linear-gradient(180deg, rgba(244,241,235,0.025), rgba(244,241,235,0.01));
  }

  .topic-card:hover {
    transform: translateY(-6px);
    border-color: rgba(236,105,29,0.2);
  }

  @media (max-width: 980px) {
    .page--blog .hero,
    .page--blog .hero-inner.row {
      min-height: auto !important;
    }

    .hero-inner::after {
      display: none;
    }

    .blog-shell {
      grid-template-columns: 1fr;
      gap: 28px;
      padding-top: 32px;
    }

    .newsletter {
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }

    .nl-form {
      max-width: none;
    }

    .nl-fields {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
    }

    .blog-sidebar {
      position: static;
    }

    .sidebar-panel {
      padding-top: 0;
    }

    .posts-grid,
    .topics-grid {
      gap: 16px;
    }

    .topic-card:hover {
      transform: none;
    }
  }

  @media (max-width: 720px) {
    .hero {
      padding: 118px 22px 0;
    }

    .page--blog .hero {
      min-height: 0 !important;
    }

    .hero-inner {
      gap: 28px;
      padding-bottom: 24px;
    }

    .hero-breadcrumb {
      margin-bottom: 18px;
      font-size: 10px;
      gap: 10px;
    }

    .hero-eyebrow {
      margin-bottom: 18px;
      font-size: 10px;
      gap: 10px;
    }

    .hero h1 {
      font-size: clamp(34px, 10vw, 48px);
      line-height: 1.02;
    }

    .blog-shell,
    .newsletter,
    .topics-index {
      padding-left: 22px;
      padding-right: 22px;
    }

    .post-featured,
    .newsletter,
    .topic-card {
      border-radius: 22px;
    }

    .featured-wrap,
    .grid-wrap {
      padding-left: 0;
      padding-right: 0;
    }

    .featured-wrap {
      margin-left: -22px;
      margin-right: -22px;
    }

    .post-featured {
      grid-template-columns: 1fr;
      border-radius: 0;
      box-shadow: none;
    }

    .post-featured-visual {
      min-height: 220px;
      padding: 24px 24px 24px 36px;
    }

    .post-featured-visual svg {
      left: 18px;
      width: calc(100% - 18px);
    }

    .post-featured-content {
      padding: 28px 22px 24px;
    }

    .post-title {
      font-size: 24px;
      max-width: none;
    }

    .post-excerpt {
      font-size: 14px;
      line-height: 1.7;
      margin-bottom: 24px;
    }

    .posts-grid,
    .topics-grid {
      grid-template-columns: 1fr;
    }

    .post-card-header {
      padding: 18px 20px 0;
      border-bottom: 0;
    }

    .post-card-content {
      padding: 16px 20px 18px;
    }

    .card-title {
      font-size: 20px;
      line-height: 1.3;
    }

    .card-excerpt {
      font-size: 13px;
      line-height: 1.65;
      margin-bottom: 18px;
    }

    .post-card-footer {
      padding: 0 20px 18px;
    }

    .pagination {
      justify-content: flex-start;
      flex-wrap: wrap;
    }

    .newsletter {
      margin: 0 22px 64px;
      padding: 32px 24px;
      gap: 24px;
      border-radius: 0;
      box-shadow: none;
    }

    .newsletter::before,
    .newsletter::after {
      display: none;
    }

    .nl-label {
      margin-bottom: 14px;
      gap: 8px;
      font-size: 9px;
    }

    .nl-headline {
      font-size: 26px;
      line-height: 1.18;
    }

    .nl-sub {
      margin-top: 14px;
      max-width: none;
      font-size: 14px;
      line-height: 1.7;
      color: rgba(244,241,235,0.82);
    }

    .nl-form {
      gap: 10px;
    }

    .nl-fields {
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .nl-input,
    .nl-btn {
      width: 100%;
      border-radius: 999px !important;
    }

    .topic-card {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 14px;
      row-gap: 6px;
      align-items: center;
      padding: 18px 18px 16px;
      min-height: 0;
      border-radius: 18px;
    }

    .topic-icon {
      grid-column: 1;
      grid-row: 1;
      margin-bottom: 0;
      font-size: 18px;
      align-self: start;
    }

    .topic-name {
      grid-column: 2;
      grid-row: 1;
      margin-bottom: 0;
      font-size: 16px;
      line-height: 1.3;
    }

    .topic-count {
      grid-column: 2;
      grid-row: 2;
      font-size: 10px;
    }
  }


/* ===== clever_blog_article.css ===== */


  /* ─── READING PROGRESS BAR ─── */
  .progress-bar {
    position: fixed; top: 0; left: 0; z-index: 200;
    height: 2px; background: var(--orange);
    width: 0%; transition: width .1s linear;
  }

  /* ─── ARTICLE HEADER ─── */
  .article-header {
    padding: 160px 56px 0;
    position: relative; overflow: hidden;
  }
  .article-header-inner {
    max-width: 760px;
    padding-bottom: 80px;
    border-bottom: 1px solid var(--border);
  }

  .breadcrumb {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--gray); margin-bottom: 44px;
    display: flex; align-items: center; gap: 10px;
    opacity: 0; animation: fadeUp .6s .1s forwards;
  }
  .breadcrumb a { color: var(--gray); text-decoration: none; transition: color .2s; }
  .breadcrumb a:hover { color: var(--off-white); }
  .breadcrumb .sep { color: var(--gray-mid); }

  .article-meta {
    display: flex; align-items: center; gap: 16px; margin-bottom: 28px;
    opacity: 0; animation: fadeUp .7s .2s forwards;
  }
  .article-topic {
    font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--orange); border: 1px solid var(--border-orange); padding: 5px 12px;
  }
  .article-date { font-size: 12px; color: var(--gray-mid); }
  .article-read { font-size: 12px; color: var(--gray-mid); }

  .article-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(40px, 5.5vw, 76px);
    font-weight: 300; line-height: 1.05; letter-spacing: -.025em;
    margin-bottom: 32px;
    opacity: 0; animation: fadeUp .9s .3s forwards;
  }
  .article-title em { font-style: italic; color: var(--orange); }

  .article-lede {
    font-family: 'Sora', sans-serif;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 300; font-style: italic;
    line-height: 1.65; color: var(--gray);
    max-width: 640px; margin-bottom: 40px;
    opacity: 0; animation: fadeUp .8s .45s forwards;
  }

  .author-row {
    display: flex; align-items: center; gap: 16px;
    opacity: 0; animation: fadeUp .7s .6s forwards;
  }
  .author-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--border-orange);
    background: linear-gradient(135deg, #1a1508, #0d0b06);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Sora', sans-serif;
    font-size: 16px; color: var(--orange);
    flex-shrink: 0;
  }
  .author-name { font-size: 13px; font-weight: 400; color: var(--off-white); }
  .author-title { font-size: 11px; color: var(--gray); margin-top: 2px; }

  /* ─── ARTICLE LAYOUT: two columns ─── */
  .article-layout {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 56px;
  }

  .article-layout-row {
    align-items: start;
  }

  /* Left: TOC sidebar */
  .article-sidebar {
    padding-top: 72px;
    padding-right: 48px;
    position: relative;
  }
  .toc {
    position: sticky; top: 100px;
  }
  .toc-label {
    font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--gray-mid); margin-bottom: 20px;
  }
  .toc-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
  .toc-item { }
  .toc-link {
    display: block; padding: 8px 0 8px 16px;
    font-size: 12px; color: var(--gray);
    text-decoration: none; line-height: 1.4;
    border-left: 1px solid var(--border);
    transition: color .2s, border-color .2s;
  }
  .toc-link:hover { color: var(--off-white); border-left-color: var(--orange); }
  .toc-link.active { color: var(--orange); border-left-color: var(--orange); }

  /* Share buttons */
  .share-block {
    margin-top: 48px;
  }
  .share-label {
    font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--gray-mid); margin-bottom: 12px;
  }
  .share-btns { display: flex; flex-direction: column; gap: 8px; }
  .share-btn {
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--gray); background: none; border: 1px solid var(--border);
    padding: 8px 12px; cursor: pointer; text-align: left;
    transition: border-color .2s, color .2s;
  }
  .share-btn:hover { border-color: var(--border-orange); color: var(--orange); }

  /* ─── Article body ─── */
  .article-body {
    padding: 72px 0 120px;
    border-left: 1px solid var(--border);
    padding-left: 56px;
    min-width: 0;
  }

  /* Typography */
  .article-hero-visual {
    position: relative;
    margin: 0 0 44px;
    max-width: 640px;
    overflow: hidden;
    background: linear-gradient(135deg, #0e0c07, #0b0a05);
  }

  .article-hero-visual svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .article-hero-visual figcaption {
    position: absolute;
    left: 28px;
    bottom: 24px;
    z-index: 1;
    color: rgba(236,105,29,0.5);
    font-size: 9px;
    letter-spacing: .25em;
    text-transform: uppercase;
  }

  .article-body p {
    font-size: 16px; line-height: 1.9; color: #3c3c3c;
    margin-bottom: 28px; max-width: 640px;
  }
  .article-body p strong { color: var(--off-white); font-weight: 400; }
  .article-body p em { font-style: italic; color: var(--off-white); }
  .article-body p a { color: var(--orange); text-decoration: none; border-bottom: 1px solid rgba(236,105,29,0.3); transition: border-color .2s; }
  .article-body p a:hover { border-bottom-color: var(--orange); }

  .article-figure {
    margin: 44px 0 48px;
    max-width: 640px;
  }

  .article-figure img {
    display: block;
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
  }

  .article-figure figcaption {
    margin-top: 12px;
    color: var(--gray-mid);
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: 0.04em;
  }

  .article-body h2 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 300; line-height: 1.15; letter-spacing: -.02em;
    color: var(--off-white);
    margin: 64px 0 24px; max-width: 580px;
    scroll-margin-top: 100px;
  }
  .article-body h2 em { font-style: italic; color: var(--orange); }

  .article-body h3 {
    font-size: 15px; font-weight: 500;
    color: var(--off-white); letter-spacing: .02em;
    margin: 40px 0 16px;
  }

  /* Pullquote */
  .pullquote {
    margin: 56px 0;
    padding: 32px 40px;
    border-left: 3px solid var(--orange);
    background: rgba(236,105,29,.03);
    max-width: 600px;
  }
  .pullquote p {
    font-family: 'Sora', sans-serif;
    font-size: clamp(20px, 2.5vw, 30px) !important;
    font-weight: 300; font-style: italic;
    line-height: 1.5 !important;
    color: var(--off-white) !important;
    margin: 0 !important;
  }
  .pullquote p em { color: var(--orange) !important; }

  /* Highlight box */
  .highlight-box {
    margin: 48px 0;
    padding: 32px 36px;
    border: 1px solid var(--border-orange);
    background: rgba(236,105,29,.02);
    max-width: 600px;
  }
  .highlight-box-label {
    font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
  }
  .highlight-box-label::before { content: ''; width: 14px; height: 1px; background: var(--orange); }
  .highlight-box p {
    font-size: 14px !important; line-height: 1.75 !important;
    color: var(--gray) !important; margin: 0 !important;
  }
  .highlight-box p strong { color: var(--off-white) !important; }

  /* Section divider */
  .section-break {
    margin: 72px 0;
    display: flex; align-items: center; gap: 20px;
    max-width: 600px;
  }
  .section-break::before, .section-break::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
  }
  .section-break span {
    font-size: 12px; color: rgba(236,105,29,.4); flex-shrink: 0;
  }

  /* ─── ARTICLE FOOTER ─── */
  .article-footer {
    padding: 64px 56px 64px calc(56px + 200px + 56px);
    border-top: 1px solid var(--border);
    max-width: 1100px; margin: 0 auto;
  }
  .author-card {
    display: flex; gap: 32px; align-items: start;
    padding: 40px;
    border: 1px solid var(--border);
    max-width: 640px; margin-bottom: 80px;
  }
  .author-card-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    border: 1px solid var(--border-orange);
    background: linear-gradient(135deg, #1a1508, #0d0b06);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Sora', sans-serif;
    font-size: 26px; color: var(--orange);
    flex-shrink: 0;
  }
  .author-card-name { font-size: 15px; font-weight: 400; margin-bottom: 4px; }
  .author-card-title { font-size: 12px; color: var(--orange); margin-bottom: 12px; }
  .author-card-bio { font-size: 13px; line-height: 1.7; color: var(--gray); }

  /* Related posts */
  .related-label {
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 32px;
    display: flex; align-items: center; gap: 16px;
  }
  .related-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
  .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; max-width: 760px; }
  .related-card {
    border: 1px solid var(--border);
    padding: 28px 24px;
    text-decoration: none; color: inherit;
    transition: border-color .3s;
  }
  .related-card:hover { border-color: var(--border-orange); }
  .related-tag {
    font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 12px; display: block;
  }
  .related-title {
    font-family: 'Sora', sans-serif;
    font-size: 17px; font-weight: 400; line-height: 1.3;
    color: var(--off-white); margin-bottom: 12px;
  }
  .related-arrow {
    font-size: 14px; color: rgba(236,105,29,.4);
    transition: transform .2s, color .2s;
  }
  .related-card:hover .related-arrow { transform: translate(3px,-3px); color: var(--orange); }

  /* ─── STICKY CTA ─── */
  .sticky-cta {
    position: fixed; bottom: 32px; right: 40px; z-index: 90;
    background: var(--black); border: 1px solid var(--border-orange);
    padding: 16px 24px;
    display: flex; align-items: center; gap: 14px;
    max-width: 320px;
    transform: translateY(120px);
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
  }
  .sticky-cta.visible { transform: none; }
  .sticky-cta-text { font-size: 12px; line-height: 1.5; color: var(--gray); }
  .sticky-cta-text strong { display: block; font-size: 13px; color: var(--off-white); font-weight: 400; margin-bottom: 2px; }
  .sticky-cta-close {
    position: absolute; top: 8px; right: 10px;
    background: none; border: none; cursor: pointer;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px; color: var(--gray-mid);
    line-height: 1;
  }

  .sticky-cta-close:hover {
    color: var(--off-white);
  }

  @keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
  @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

  @media (max-width: 980px) {
    .article-header {
      padding: 138px 32px 0;
    }

    .article-header-inner,
    .article-layout,
    .article-footer {
      max-width: none;
    }

    .article-layout {
      padding: 0 32px;
    }

    .article-sidebar {
      padding-top: 32px;
      padding-right: 0;
      order: 2;
    }

    .toc {
      position: static;
      display: grid;
      gap: 24px;
    }

    .toc-list {
      gap: 6px;
    }

    .share-block {
      margin-top: 0;
    }

    .article-body {
      padding: 40px 0 88px;
      padding-left: 0;
      border-left: 0;
      border-top: 1px solid var(--border);
      order: 1;
    }

    .article-footer {
      padding: 56px 32px 64px;
    }

    .author-card,
    .related-grid {
      max-width: none;
    }

    .related-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .sticky-cta {
      right: 24px;
      left: 24px;
      bottom: 20px;
      max-width: none;
    }
  }

  @media (max-width: 720px) {
    .article-header {
      padding: 122px 22px 0;
    }

    .breadcrumb {
      margin-bottom: 24px;
      flex-wrap: wrap;
      gap: 8px;
    }

    .article-meta {
      flex-wrap: wrap;
      gap: 8px 12px;
      margin-bottom: 20px;
    }

    .article-title {
      margin-bottom: 24px;
    }

    .article-lede {
      font-size: 17px;
      line-height: 1.6;
      margin-bottom: 28px;
    }

    .article-layout,
    .article-footer {
      padding-left: 22px;
      padding-right: 22px;
    }

    .article-sidebar {
      padding-top: 24px;
    }

    .toc-link {
      padding-left: 12px;
      font-size: 11px;
    }

    .share-btns {
      gap: 10px;
    }

    .share-btn {
      width: 100%;
    }

    .article-body {
      padding-top: 28px;
      padding-bottom: 72px;
    }

    .article-body p {
      font-size: 15px;
      line-height: 1.82;
    }

    .article-hero-visual {
      margin-bottom: 32px;
    }

    .article-hero-visual figcaption {
      left: 20px;
      bottom: 18px;
    }

    .pullquote,
    .highlight-box {
      padding: 24px 20px;
    }

    .article-figure {
      margin: 32px 0 36px;
    }

    .author-card {
      flex-direction: column;
      gap: 20px;
      padding: 28px 22px;
      margin-bottom: 56px;
    }

    .sticky-cta {
      position: fixed;
      padding: 14px 18px 16px;
      gap: 12px;
    }

    .sticky-cta-close {
      top: 6px;
      right: 8px;
      width: 40px;
      height: 40px;
      font-size: 28px;
    }
  }


/* ===== clever_case_article.css ===== */
.page--case-article .case-article-page {
  background: #ffffff;
  color: #1b1b1b;
}

.page--case-article main > section > .container-fluid {
  max-width: min(96vw, 1880px) !important;
}

.page--case-article .case-article-body > .container-fluid {
  max-width: min(96vw, 1880px) !important;
  width: 100%;
}

.case-article-hero {
  padding: 152px 56px 40px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 28%, rgba(236,105,29,0.07), transparent 24%),
    #ffffff;
}

.case-article-hero::after {
  content: "";
  position: absolute;
  right: 56px;
  top: 128px;
  width: min(28vw, 340px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(236,105,29,0.12);
  box-shadow:
    0 0 0 22px rgba(236,105,29,0.02),
    0 0 0 46px rgba(236,105,29,0.01);
  pointer-events: none;
}

.case-article-hero-row {
  align-items: center;
  row-gap: 28px;
}

.case-article-copy,
.case-article-brandcol {
  position: relative;
  z-index: 1;
}

.case-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

.case-article-tags .modal-tag {
  display: inline-flex;
  align-items: center;
}

.case-article-subtitle {
  max-width: 620px;
  margin-top: 18px;
  margin-bottom: 34px;
  color: #5d5d5d !important;
  border-left: 2px solid var(--orange);
  padding-left: 24px;
  opacity: 1 !important;
}

.case-article-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.case-article-actions a {
  text-decoration: none !important;
}

.case-article-actions .btn-secondary {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #505050 !important;
  position: relative;
  padding-bottom: 4px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  transition: color 0.2s ease, transform 0.2s ease;
  overflow: visible;
}

.case-article-actions .btn-secondary::before,
.case-article-actions .btn-secondary::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
}

.case-article-actions .btn-secondary::after {
  background: currentColor;
  opacity: 0.3;
}

.case-article-actions .btn-secondary::before {
  background: linear-gradient(90deg, rgba(236, 105, 29, 0.9), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.case-article-actions .btn-secondary:hover {
  color: var(--orange) !important;
  transform: translateY(-1px);
}

.case-article-actions .btn-secondary:hover::before {
  opacity: 1;
}

.case-article-actions .btn-primary {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange) !important;
  border: 1px solid var(--orange) !important;
  padding: 16px 32px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent !important;
  position: relative;
  overflow: hidden;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.case-article-actions .btn-primary:hover {
  transform: translateY(-1px);
}

.case-article-brandcol {
  display: flex;
  justify-content: flex-end;
}

.case-article-brandbox {
  min-width: 320px;
  max-width: 420px;
  padding: 24px 28px;
  border: 1px solid rgba(236,105,29,0.16);
  border-radius: 8px;
  background: rgba(255,255,255,0.92);
}

.case-article-brandlabel {
  margin-bottom: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}

.case-article-brandrow {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.case-article-brand {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
}

.case-article-brand.clever {
  font-family: "Sora", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1b1b1b;
}

.case-article-brand-divider {
  font-size: 18px;
  color: var(--orange);
}

.case-article-brand.client {
  padding: 10px 16px;
  border: 1px solid rgba(236,105,29,0.18);
  border-radius: 8px;
  font-family: "Sora", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #505050;
  background: #fff;
}

.case-article-cover-wrap {
  padding: 42px 56px 0;
}

.case-article-cover {
  margin: 0;
}

.case-article-cover-art {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
}

.case-article-cover-caption {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a7a7a;
}

.case-article-body {
  padding: 54px 56px 88px;
  background: #ffffff;
}

.page--case-article .case-article-body {
  width: 100%;
  max-width: 100% !important;
  min-width: 0;
}

.case-article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(48px, 5vw, 96px);
  align-items: start;
  row-gap: 36px;
  width: 100%;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.case-article-grid > *,
.case-article-column {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  flex: initial;
  margin: 0;
}

.case-article-sidecard,
.case-article-content,
.case-article-column {
  padding: 0;
  border: 0;
  background: transparent;
}

.case-article-sidecard {
  position: sticky;
  top: 120px;
  width: 100%;
  max-width: none;
  justify-self: stretch;
}

.case-article-column > .modal-section,
.case-article-sidecard,
.case-article-sidecard .modal-results-grid,
.case-article-sidecard .modal-result {
  width: 100%;
  max-width: none !important;
  min-width: 0;
}

.page--case-article .modal-results-grid {
  grid-template-columns: 1fr;
  gap: 18px;
}

.page--case-article .modal-result {
  padding: 0 0 18px;
  border: 0;
  border-bottom: 1px solid rgba(236,105,29,0.12);
  background: transparent;
}

.page--case-article .modal-result:last-child {
  border-bottom: 0;
}

.case-article-content .modal-text {
  max-width: none;
  line-height: 1.65;
}

.case-article-quote-block {
  margin-top: 0;
}

.case-article-column p,
.case-article-column .modal-text {
  width: 100%;
  max-width: none !important;
  line-height: 1.65;
}

.case-article-masonry {
  padding: 0 56px 100px;
  background: #ffffff;
}

.case-article-testimonial {
  padding: 0 56px 108px;
  background: #ffffff;
}

.case-article-testimonial .modal-section-label {
  justify-content: center;
}

.case-article-testimonial .modal-quote {
  max-width: 980px;
  margin: 18px auto 0;
  padding: 0;
  border-left: 0;
  background: transparent;
  text-align: center;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.58;
}

.case-article-testimonial .modal-quote-author {
  text-align: center;
  margin-top: 18px;
}

.masonry-head {
  margin-bottom: 24px;
}

.case-masonry-grid {
  columns: 3 280px;
  column-gap: 18px;
}

.case-masonry-item {
  break-inside: avoid;
  margin: 0 0 18px;
}

.case-masonry-item button {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.case-masonry-art {
  width: 100%;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  cursor: zoom-in;
  position: relative;
}

.case-masonry-media {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: #111111;
}

.case-masonry-media--video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.case-masonry-art::after { content: none; }

.case-masonry-item.is-tall :is(.case-masonry-art, .case-masonry-media) {
  aspect-ratio: 3 / 4;
}

.case-masonry-item.is-wide :is(.case-masonry-art, .case-masonry-media) {
  aspect-ratio: 16 / 10;
}

.case-masonry-item.is-square :is(.case-masonry-art, .case-masonry-media) {
  aspect-ratio: 1 / 1;
}

.case-masonry-item.is-portrait :is(.case-masonry-art, .case-masonry-media) {
  aspect-ratio: 4 / 5;
}

.case-masonry-item figcaption {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a7a7a;
}

.case-article-cover-art.case-art-1,
.case-masonry-art.case-art-1,
.lightbox-art.case-art-1 {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.2)),
    radial-gradient(circle at 52% 48%, rgba(236,105,29,0.28), transparent 14%),
    linear-gradient(135deg, #241a14, #3d2618 42%, #17110d);
}

.case-article-cover-art.case-art-2,
.case-masonry-art.case-art-2,
.lightbox-art.case-art-2 {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.14)),
    linear-gradient(135deg, rgba(236,105,29,0.16), transparent 50%),
    linear-gradient(120deg, #efe8de, #dcd1c0);
}

.case-article-cover-art.case-art-3,
.case-masonry-art.case-art-3,
.lightbox-art.case-art-3 {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.18)),
    radial-gradient(circle at 68% 38%, rgba(236,105,29,0.22), transparent 16%),
    linear-gradient(120deg, #10242b, #244958 48%, #0d171d);
}

.case-article-cover-art.case-art-4,
.case-masonry-art.case-art-4,
.lightbox-art.case-art-4 {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.18)),
    linear-gradient(135deg, rgba(236,105,29,0.22), rgba(255,255,255,0.02)),
    linear-gradient(120deg, #2b2017, #5a3519 50%, #1d1510);
}

.case-article-cover-art.case-art-5,
.case-masonry-art.case-art-5,
.lightbox-art.case-art-5 {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.18)),
    radial-gradient(circle at 34% 40%, rgba(236,105,29,0.24), transparent 16%),
    linear-gradient(120deg, #5a3521, #a05b26 44%, #2b1c12);
}

.case-article-cover-art.case-art-6,
.case-masonry-art.case-art-6,
.lightbox-art.case-art-6 {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.18)),
    linear-gradient(135deg, rgba(236,105,29,0.16), transparent 46%),
    linear-gradient(120deg, #221f20, #4b3b36 46%, #181415);
}

@media (max-width: 980px) {
  .case-article-hero {
    padding: 132px 32px 34px;
  }

  .case-article-hero::after {
    display: none;
  }

  .case-article-brandcol {
    justify-content: flex-start;
  }

  .case-article-brandbox {
    min-width: 0;
    width: 100%;
  }

  .case-article-cover-wrap,
  .case-article-body,
  .case-article-masonry {
    padding-left: 32px;
    padding-right: 32px;
  }

  .case-article-sidecard {
    position: static;
  }

  .case-article-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 56px;
  }

  .case-article-sidecard {
    grid-column: 1 / -1;
    justify-self: stretch;
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .case-article-hero {
    padding: 116px 22px 28px;
  }

  .case-article-cover-wrap,
  .case-article-body,
  .case-article-masonry {
    padding-left: 22px;
    padding-right: 22px;
  }

  .case-article-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .case-article-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .case-article-sidecard,
  .case-article-column {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .case-article-column .modal-text {
    max-width: 100%;
  }

  .case-article-quote-block {
    margin-top: 32px;
  }

  .case-article-brandrow {
    align-items: flex-start;
    gap: 10px;
  }

  .case-article-brand.clever,
  .case-article-brand.client {
    font-size: 18px;
  }
}


/* ===== clever_cases.css ===== */


  /* ─── HERO ─── */
  .hero {
    padding: 200px 56px 120px;
    position: relative; overflow: hidden;
    border-bottom: 1px solid var(--border);
  }
  .hero-bg {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 50% 80% at 90% 50%, #0d0b04 0%, #0a0a0a 60%);
  }
  .hero-content { position: relative; z-index: 2; max-width: 720px; }
  .hero-media-col {
    display: flex;
    align-items: flex-end;
  }
  .hero-video-shell {
    width: 100%;
    position: relative;
    z-index: 2;
  }
  .hero-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 1080;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(236,105,29,0.16);
    box-shadow: 0 28px 70px rgba(0,0,0,0.26);
    background: #111111;
  }
  .hero-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  .hero-breadcrumb {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--gray); margin-bottom: 48px;
    display: flex; align-items: center; gap: 10px;
    opacity: 0; animation: fadeUp .6s .1s forwards;
  }
  .hero-breadcrumb a { color: var(--gray); text-decoration: none; transition: color .2s; }
  .hero-breadcrumb a:hover { color: var(--off-white); }
  .hero-breadcrumb .sep { color: var(--gray-mid); }
  .hero-breadcrumb .current { color: var(--orange); }
  .hero-eyebrow {
    font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 28px;
    display: flex; align-items: center; gap: 12px;
    opacity: 0; animation: fadeUp .8s .2s forwards;
  }
  .hero-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--orange); }
  .hero h1 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(52px, 6.5vw, 96px);
    font-weight: 300; line-height: 1.0; letter-spacing: -.025em;
    margin-bottom: 32px;
    opacity: 0; animation: fadeUp .9s .35s forwards;
  }
  .hero h1 em { font-style: italic; color: var(--orange); }
  .hero-sub {
    font-size: 15px; line-height: 1.8; color: var(--gray);
    max-width: 520px;
    opacity: 0; animation: fadeUp .8s .5s forwards;
  }

  /* Filter bar */
  .filter-bar {
    padding: 0 56px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 0;
    overflow-x: auto;
  }
  .filter-btn {
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--gray); background: none; border: none;
    padding: 20px 28px; cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
    white-space: nowrap;
  }
  .filter-btn:hover { color: var(--off-white); }
  .filter-btn.active { color: var(--orange); border-bottom-color: var(--orange); }

  /* ─── CASE LIST ─── */
  .cases { padding: 0 0 180px; }

  /* Featured case — full width */
  .case-featured {
    display: grid; grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 96px; margin-bottom: 36px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .3s, box-shadow .3s, transform .3s;
    text-decoration: none; color: inherit;
  }
  .case-featured:hover,
  .case-featured:focus-visible {
    border-color: var(--border-orange);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
    transform: translateY(-4px);
    outline: none;
  }
  .case-featured-visual {
    background: #f6f6f6;
    min-height: 480px; position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .case-featured-visual svg { display: none; }
  .case-art {
    background-size: cover;
    background-position: center;
  }
  .case-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.26)),
      var(--case-art-bg);
    background-size: cover;
    background-position: center;
    transition: transform .45s ease;
  }
  .case-featured:hover .case-art::before,
  .case-card:hover .case-art::before {
    transform: scale(1.045);
  }
  .case-art::after {
    content: "Apri il caso";
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    border: 1px solid rgba(236, 105, 29, 0.72);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--orange);
    padding: 12px 16px;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    transform: translateY(8px);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
  }
  .case-featured:hover .case-art::after,
  .case-featured:focus-visible .case-art::after,
  .case-card:hover .case-art::after,
  .case-card:focus-visible .case-art::after {
    opacity: 1;
    transform: none;
  }
  .case-art-1 {
    --case-art-bg:
      linear-gradient(135deg, rgba(20, 20, 20, 0.12), rgba(236, 105, 29, 0.22)),
      url("https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?auto=format&fit=crop&w=1400&q=80");
  }
  .case-art-2 {
    --case-art-bg:
      linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(236, 105, 29, 0.2)),
      url("https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&w=1000&q=80");
  }
  .case-art-3 {
    --case-art-bg:
      linear-gradient(135deg, rgba(10, 90, 110, 0.14), rgba(236, 105, 29, 0.18)),
      url("https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1000&q=80");
  }
  .case-art-4 {
    --case-art-bg:
      linear-gradient(135deg, rgba(236, 105, 29, 0.18), rgba(20, 20, 20, 0.08)),
      url("https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=1000&q=80");
  }
  .case-art-5 {
    --case-art-bg:
      linear-gradient(135deg, rgba(236, 105, 29, 0.2), rgba(255, 255, 255, 0.12)),
      url("https://images.unsplash.com/photo-1509358271058-acd22cc93898?auto=format&fit=crop&w=1000&q=80");
  }
  .case-art-6 {
    --case-art-bg:
      linear-gradient(135deg, rgba(30, 30, 30, 0.08), rgba(236, 105, 29, 0.18)),
      url("https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=1000&q=80");
  }
  .case-shot-1 { background-position: center; }
  .case-shot-2 { background-position: 35% center; }
  .case-shot-3 { background-position: 68% center; }
  .case-visual-label {
    position: absolute; bottom: 32px; left: 32px;
    font-size: 9px; letter-spacing: .25em; text-transform: uppercase;
    color: rgba(255,255,255,0.78);
    z-index: 2;
  }
  .case-featured-content {
    padding: 64px 56px;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .case-meta {
    display: flex; align-items: center; gap: 16px; margin-bottom: 32px;
    flex-wrap: wrap;
  }
  .case-kind,
  .case-tag {
    font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--orange); border: 1px solid var(--border-orange);
    padding: 5px 12px;
  }
  .case-kind--study {
    background: rgba(236,105,29,0.08);
  }
  .case-percorso {
    font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--gray);
  }
  .case-story-tags,
  .card-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 28px;
  }
  .story-tag {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(34,34,42,0.05);
    color: #6a6a6a;
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .case-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 300; line-height: 1.15; letter-spacing: -.02em;
    margin-bottom: 24px;
  }
  .case-title em { font-style: italic; color: var(--orange); }
  .case-problem {
    font-size: 14px; line-height: 1.8; color: var(--gray);
    margin-bottom: 40px; max-width: 420px;
  }
  .case-results {
    display: flex; gap: 32px; margin-bottom: 40px;
  }
  .result-item {}
  .result-num {
    font-family: 'Sora', sans-serif;
    font-size: 40px; font-weight: 300; color: var(--orange);
    line-height: 1;
  }
  .result-label {
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--gray); margin-top: 4px;
  }
  .case-link {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--orange);
    display: flex; align-items: center; gap: 10px;
    transition: gap .2s;
  }
  .case-featured:hover .case-link { gap: 16px; }
  .case-link::after { content: '→'; }

  /* Regular cases grid */
  .cases-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 36px;
  }
  .case-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column;
    cursor: pointer;
    transition: border-color .3s, box-shadow .3s, transform .3s;
  }
  .case-card--study {
    background: linear-gradient(180deg, #151515 0%, #1d1d1d 100%);
    border-color: rgba(255,255,255,0.08);
  }
  .case-card--study .case-card-content {
    background: transparent;
  }
  .case-card--study .card-title {
    color: #f5f1eb;
  }
  .case-card--study .card-excerpt,
  .case-card--study .card-result-label,
  .case-card--study .card-percorso {
    color: rgba(245,241,235,0.72);
  }
  .case-card--study .card-result {
    border-top-color: rgba(255,255,255,0.08);
  }
  .case-card--study .card-kind--study {
    color: #f5f1eb;
    border-color: rgba(236,105,29,0.4);
    background: rgba(236,105,29,0.16);
  }
  .case-card--study .story-tag {
    background: rgba(255,255,255,0.06);
    color: rgba(245,241,235,0.74);
  }
  .case-card--work {
    background: #ffffff;
  }
  .case-card--work .card-kind--work {
    color: var(--orange);
    border: 1px solid rgba(236,105,29,0.18);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(236,105,29,0.06);
  }
  .case-card:hover,
  .case-card:focus-visible {
    border-color: var(--border-orange);
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.24);
    transform: translateY(-4px);
    outline: none;
  }
  .case-card-visual {
    height: 220px; position: relative; overflow: hidden;
    background: #f6f6f6;
    display: flex; align-items: center; justify-content: center;
  }
  .case-card-visual svg { display: none; }
  .case-card-content { padding: 36px 32px; flex: 1; display: flex; flex-direction: column; }
  .card-meta {
    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .card-kind,
  .card-tag {
    font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--orange); border: 1px solid var(--border-orange); padding: 4px 10px;
  }
  .card-percorso {
    font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray);
  }
  .card-title {
    font-family: 'Sora', sans-serif;
    font-size: 22px; font-weight: 400; line-height: 1.25;
    margin-bottom: 12px;
  }
  .card-excerpt {
    font-size: 13px; line-height: 1.7; color: var(--gray);
    flex: 1; margin-bottom: 24px;
  }
  .card-result {
    display: flex; align-items: baseline; gap: 10px;
    padding-top: 20px; border-top: 1px solid var(--border);
  }
  .card-result-num {
    font-family: 'Sora', sans-serif;
    font-size: 28px; font-weight: 300; color: var(--orange);
  }
  .card-result-label {
    font-size: 11px; letter-spacing: .06em; color: var(--gray);
  }

  /* ─── PROJECT MASONRY ─── */
  .projects-masonry {
    column-count: 3;
    column-gap: 28px;
    margin-top: 96px;
  }

  .project-tile {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0 0 28px;
    break-inside: avoid;
    border-radius: 8px;
    overflow: hidden;
    background: #111111;
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.14);
  }

  .project-tile::before {
    content: "";
    display: block;
    padding-top: 72%;
  }

  .project-tile--xl::before {
    padding-top: 112%;
  }

  .project-tile--tall::before {
    padding-top: 132%;
  }

  .project-tile--short::before {
    padding-top: 56%;
  }

  .project-media,
  .project-overlay {
    position: absolute;
    inset: 0;
  }

  .project-media {
    background-size: cover;
    background-position: center;
    transition: transform .6s ease, opacity .35s ease, filter .35s ease;
  }

  .project-media--primary {
    z-index: 0;
  }

  .project-media--secondary {
    z-index: 1;
    opacity: 0;
    transform: scale(1.05);
  }

  .project-overlay {
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 14px;
    padding: 28px 24px 24px;
    background:
      linear-gradient(180deg, rgba(10, 10, 10, 0.02) 0%, rgba(10, 10, 10, 0.3) 34%, rgba(10, 10, 10, 0.82) 100%);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease, background .3s ease;
  }

  .project-tile:hover .project-media--primary,
  .project-tile:focus-visible .project-media--primary {
    transform: scale(1.04);
    filter: brightness(0.58);
  }

  .project-tile:hover .project-media--secondary,
  .project-tile:focus-visible .project-media--secondary {
    opacity: 1;
    transform: scale(1);
  }

  .project-tile:hover .project-overlay,
  .project-tile:focus-visible .project-overlay {
    opacity: 1;
    transform: none;
  }

  .project-tile:focus-visible {
    outline: 1px solid rgba(236, 105, 29, 0.65);
    outline-offset: 0;
  }

  .project-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
  }

  .project-kicker span {
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .project-client {
    color: #ffffff;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
  }

  .project-sector,
  .project-category {
    color: rgba(255, 255, 255, 0.74);
  }

  .project-title {
    margin: 0;
    color: #ffffff;
    font-family: 'Sora', sans-serif;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.08;
  }

  .project-abstract {
    margin: 0;
    max-width: 34ch;
    color: rgba(255, 255, 255, 0.76);
    font-size: 13px;
    line-height: 1.7;
  }

  .project-shot-1 { background-image: url("https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?auto=format&fit=crop&w=1400&q=80"); }
  .project-shot-2 { background-image: url("https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&w=1000&q=80"); }
  .project-shot-3 { background-image: url("https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1000&q=80"); }
  .project-shot-4 { background-image: url("https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=1000&q=80"); }
  .project-shot-5 { background-image: url("https://images.unsplash.com/photo-1509358271058-acd22cc93898?auto=format&fit=crop&w=1000&q=80"); }
  .project-shot-6 { background-image: url("https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=1000&q=80"); }

  .project-shot-alt-1 { background-image: url("https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&w=1400&q=80"); }
  .project-shot-alt-2 { background-image: url("https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1000&q=80"); }
  .project-shot-alt-3 { background-image: url("https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1000&q=80"); }
  .project-shot-alt-4 { background-image: url("https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1000&q=80"); }
  .project-shot-alt-5 { background-image: url("https://images.unsplash.com/photo-1488459716781-31db52582fe9?auto=format&fit=crop&w=1000&q=80"); }
  .project-shot-alt-6 { background-image: url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1000&q=80"); }

  /* ─── CASE MODAL / DETAIL overlay ─── */
  .modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(246,246,246,.82);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .3s;
    padding: 40px;
  }
  .modal-overlay.open { opacity: 1; pointer-events: all; }
  .modal {
    background: #ffffff;
    color: #1b1b1b;
    border: 1px solid rgba(236,105,29,.18);
    border-radius: 8px;
    max-width: 1080px; width: 100%;
    max-height: 85vh; overflow-y: auto;
    transform: translateY(20px);
    transition: transform .3s;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.18);
  }
  .modal-overlay.open .modal { transform: none; }
  .modal-header {
    padding: 48px 56px 32px;
    border-bottom: 1px solid rgba(236,105,29,.12);
    display: flex; justify-content: space-between; align-items: start; gap: 20px;
  }
  .modal-close {
    width: 36px; height: 36px; flex-shrink: 0;
    border: 1px solid rgba(236,105,29,.24);
    border-radius: 8px;
    background: #ffffff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #505050;
    transition: border-color .2s, color .2s;
  }
  .modal-close:hover { border-color: var(--orange); color: var(--orange); }
  .modal-meta { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
  .modal-tag {
    font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--orange); border: 1px solid var(--border-orange); padding: 5px 12px;
  }
  .modal-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 300; line-height: 1.15; letter-spacing: -.02em;
  }
  .modal-title em { font-style: italic; color: var(--orange); }
  .modal-body { padding: 48px 56px; }
  .modal-gallery {
    margin-bottom: 48px;
  }
  .gallery-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(236,105,29,.16);
    border-radius: 8px;
    background: #f6f6f6;
    aspect-ratio: 16 / 9;
  }
  .gallery-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
  }
  .gallery-slide.active {
    opacity: 1;
    pointer-events: auto;
  }
  .gallery-art,
  .lightbox-art {
    width: 100%;
    height: 100%;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.18)),
      var(--case-art-bg);
    background-size: cover;
    background-position: center;
  }
  .gallery-art {
    position: relative;
    border: 0;
    cursor: zoom-in;
  }
  .gallery-art::after {
    content: "Ingrandisci";
    position: absolute;
    right: 22px;
    bottom: 20px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--orange);
    padding: 10px 14px;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .gallery-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(236,105,29,.42);
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: var(--orange);
    cursor: pointer;
    transform: translateY(-50%);
  }
  .gallery-prev { left: 18px; }
  .gallery-next { right: 18px; }
  .gallery-count {
    margin-top: 12px;
    color: #8a8a8a;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: right;
  }
  .modal-section { margin-bottom: 40px; }
  .modal-section:last-child { margin-bottom: 0; }
  .modal-section-label {
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
  }
  .modal-section-label::before { content: ''; width: 16px; height: 1px; background: var(--orange); }
  .modal-text {
    font-size: 14px; line-height: 1.85; color: #585858;
  }
  .modal-text strong { color: #1b1b1b; font-weight: 700; }
  .modal-results-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  }
  .modal-result {
    padding: 28px 24px;
    border: 1px solid rgba(236,105,29,.14);
    border-radius: 8px;
    background: #f6f6f6;
  }
  .modal-result-num {
    font-family: 'Sora', sans-serif;
    font-size: 44px; font-weight: 300; color: var(--orange); line-height: 1;
    margin-bottom: 8px;
  }
  .modal-result-label {
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: #585858; line-height: 1.4;
  }
  .modal-quote {
    border-left: 2px solid var(--border-orange);
    padding: 20px 28px;
    background: #f6f6f6;
    font-family: 'Sora', sans-serif;
    font-size: 18px; font-weight: 300; font-style: italic;
    line-height: 1.65; color: #1b1b1b;
    margin-top: 16px;
  }
  .modal-quote-author {
    font-family: 'Epilogue', sans-serif;
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: #585858; margin-top: 12px; font-style: normal;
  }

  .image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: grid;
    place-items: center;
    padding: 40px;
    background: rgba(0,0,0,.86);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .image-lightbox.open {
    opacity: 1;
    pointer-events: auto;
  }
  .lightbox-art {
    width: min(1180px, 92vw);
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    box-shadow: 0 28px 90px rgba(0,0,0,.5);
  }
.lightbox-close {
  position: absolute;
  top: 28px;
  right: 28px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 8px;
    background: rgba(255,255,255,.1);
  color: #ffffff;
  cursor: pointer;
  font-size: 24px;
}

.image-lightbox .gallery-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

  @media (max-width: 1100px) {
    .hero {
      padding: 168px 32px 96px;
    }

    .projects-masonry {
      column-count: 2;
      margin-top: 72px;
    }

    .case-cta {
      gap: 40px;
    }
  }

  @media (max-width: 980px) {
    .hero {
      padding: 160px 20px 84px;
    }
    .hero-media-col {
      align-items: flex-start;
    }
    .filter-bar {
      padding-left: 20px;
      padding-right: 20px;
    }
  }

  @media (max-width: 780px) {
    .hero {
      padding: 148px 20px 72px;
    }

    .hero-breadcrumb {
      margin-bottom: 28px;
      flex-wrap: wrap;
    }

    .hero-eyebrow {
      margin-bottom: 20px;
    }

    .hero h1 {
      font-size: clamp(38px, 13vw, 58px);
      margin-bottom: 24px;
    }

    .hero-sub {
      font-size: 14px;
      line-height: 1.7;
    }

    .filter-bar {
      padding: 18px 20px 20px;
      border-bottom: 0;
      gap: 10px;
      flex-wrap: wrap;
    }

    .filter-btn {
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.02);
    }

    .filter-btn.active {
      background: rgba(236, 105, 29, 0.12);
      border-bottom-color: var(--border-orange);
    }

    .case-featured {
      margin-top: 64px;
      margin-bottom: 28px;
    }

    .projects-masonry {
      column-count: 1;
      column-gap: 0;
      margin-top: 56px;
    }

    .project-tile {
      margin-bottom: 20px;
    }

    .project-tile::before,
    .project-tile--xl::before,
    .project-tile--tall::before,
    .project-tile--short::before {
      padding-top: 78%;
    }

    .project-overlay {
      opacity: 1;
      transform: none;
      padding: 22px 18px 18px;
      background: linear-gradient(180deg, rgba(10, 10, 10, 0.06) 0%, rgba(10, 10, 10, 0.18) 34%, rgba(10, 10, 10, 0.7) 100%);
    }

    .project-media--secondary {
      opacity: .28;
      transform: none;
    }

    .project-title {
      font-size: clamp(22px, 8vw, 30px);
    }

    .project-abstract {
      font-size: 12.5px;
      line-height: 1.6;
    }

    .case-featured-visual {
      min-height: 320px;
    }

    .case-meta,
    .card-meta {
      flex-wrap: wrap;
      gap: 10px;
    }

    .case-featured-content,
    .modal-header,
    .modal-body {
      padding-right: 24px;
      padding-left: 24px;
    }

    .case-featured-content {
      padding-top: 34px;
      padding-bottom: 34px;
    }

    .case-title {
      font-size: clamp(26px, 9vw, 38px);
    }

    .case-problem,
    .card-excerpt,
    .cta-body {
      font-size: 13.5px;
      line-height: 1.72;
    }

    .case-results {
      flex-direction: column;
      gap: 18px;
      margin-bottom: 30px;
    }

    .result-item {
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border);
    }

    .result-item:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }

    .case-art::after {
      opacity: 1;
      transform: none;
    }

    .case-cta {
      padding: 84px 24px;
    }

    .cta-actions {
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
    }

    .cta-actions a {
      width: 100%;
      justify-content: center;
    }

    .modal-overlay,
    .image-lightbox {
      padding: 18px;
    }

    .modal-results-grid {
      grid-template-columns: 1fr;
    }

    .gallery-frame,
    .lightbox-art {
      aspect-ratio: 4 / 3;
    }

    .pull-quote {
      min-height: 480px;
      padding: 96px 24px;
    }

    .pull-quote blockquote {
      font-size: clamp(24px, 8vw, 34px);
      margin-bottom: 22px;
    }
  }

  /* ─── PULL QUOTE ─── */
  .pull-quote {
    min-height: 620px;
    padding: 140px 56px;
    border-top: 1px solid var(--border);
    text-align: center;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #0f0f11;
  }

  .pull-quote-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: brightness(0.58) saturate(0.9);
  }

  @media (prefers-reduced-motion: reduce) {
    .pull-quote-video {
      display: none;
    }
  }

  .pull-quote::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(10,10,10,.76), rgba(10,10,10,.42) 42%, rgba(10,10,10,.24)),
      radial-gradient(circle at 38% 50%, rgba(236,105,29,.16), transparent 38%);
    pointer-events: none;
    z-index: 1;
  }
  .pull-quote blockquote,
  .pull-quote cite {
    position: relative;
    z-index: 2;
  }
  .pull-quote blockquote {
    font-family: 'Sora', sans-serif;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 300; font-style: italic;
    line-height: 1.22; letter-spacing: 0;
    max-width: 1040px; margin: 0 auto 28px;
    color: #ffffff;
  }
  .pull-quote blockquote em { color: var(--orange); }
  .pull-quote cite {
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    color: #d9d9d9; font-style: normal;
  }

  /* ─── CTA ─── */
  .case-cta {
    padding: 120px 56px;
    border-top: 1px solid var(--border);
    display: block;
  }
  .cta-headline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(32px, 4.5vw, 64px);
    font-weight: 300; line-height: 1.05; letter-spacing: -.025em;
  }
  .cta-headline em { font-style: italic; color: var(--orange); }
  .cta-body { font-size: 15px; line-height: 1.85; color: var(--gray); margin-bottom: 40px; max-width: 400px; }
  .cta-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

  @keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
  @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  .reveal {
    opacity:0; transform:translateY(28px);
    transition: opacity .8s cubic-bezier(.25,.46,.45,.94), transform .8s cubic-bezier(.25,.46,.45,.94);
  }
  .reveal.visible { opacity:1; transform:none; }
  .reveal-delay-1 { transition-delay:.1s; }
  .reveal-delay-2 { transition-delay:.2s; }
  .reveal-delay-3 { transition-delay:.3s; }


/* ===== clever_chi_siamo.css ===== */
.page--chi-siamo {
  background: #f7f7f7;
  color: #1b1b1b;
}

.page--chi-siamo main {
  overflow: hidden;
}

.about-hero {
  min-height: 82vh;
  padding: var(--hero-nav-offset, 132px) 56px 52px;
  background:
    radial-gradient(circle at 82% 30%, rgba(236, 105, 29, 0.1), transparent 24%),
    #ffffff;
  border-bottom: 1px solid rgba(236, 105, 29, 0.12);
}

.about-hero .row {
  min-height: calc(82vh - var(--hero-nav-offset, 132px) - 52px);
}

.about-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 42px;
}

.section-page-hero--about .hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-bottom: 18px;
  color: #8a8a8a;
  font-family: 'Epilogue', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.section-page-hero--about .hero-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.section-page-hero--about .hero-breadcrumb .sep,
.section-page-hero--about .hero-breadcrumb .current {
  color: var(--orange);
}

.section-page-hero--about .hero-eyebrow,
.section-page-hero--about .section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--orange);
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.section-page-hero--about .hero-eyebrow {
  margin-bottom: 30px;
}

.section-page-hero--about .hero-eyebrow::before,
.section-page-hero--about .section-tag::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--orange);
}

.about-hero h1,
.why-section h2,
.direction-section h2,
.audience-header h2,
.invisible-section h2,
.about-cta h2 {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-size: clamp(40px, 5.4vw, 82px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: 0;
}

.accent-word {
  color: var(--orange);
}

.hero-sub,
.body-copy,
.point-card p,
.direction-note,
.audience-card p,
.audience-card blockquote,
.offer-list p,
.invisible-copy,
.belief-inner p {
  color: #585858;
  font-size: 17px;
  line-height: 1.75;
}

.hero-sub {
  max-width: 690px;
  margin: 32px 0 0;
  padding-left: 22px;
  border-left: 2px solid var(--orange);
}

.about-hero-visual-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: visible;
}

.about-hero-visual {
  position: relative;
  width: clamp(360px, 34vw, 560px);
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  isolation: isolate;
  overflow: visible;
}

.perception-ring {
  position: absolute;
  inset: 50%;
  border: 1px solid rgba(236, 105, 29, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ring-one {
  width: 96%;
  height: 96%;
}

.ring-two {
  width: 72%;
  height: 72%;
  border-color: rgba(0, 156, 156, 0.22);
}

.ring-three {
  width: 46%;
  height: 46%;
  border-color: rgba(236, 105, 29, 0.32);
}

.orbit-layer {
  --angle: 0deg;
  --radius: 160px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-radius: 0;
  transform-origin: 0 0;
  animation: orbitItemRotate var(--orbit-duration, 32s) linear infinite;
}

.orbit-primary,
.orbit-secondary-one,
.orbit-secondary-two,
.orbit-secondary-three {
  width: 0;
  height: 0;
}

.orbit-primary {
  --angle: 8deg;
  --radius: 132px;
  --orbit-duration: 28s;
}

.orbit-secondary-one {
  --angle: 30deg;
  --radius: 268px;
  --orbit-duration: 42s;
}

.orbit-secondary-two {
  --angle: 18deg;
  --radius: 202px;
  --orbit-duration: 34s;
}

.orbit-secondary-three {
  --angle: 48deg;
  --radius: 202px;
  --orbit-duration: 24s;
}

.orbit-planet {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}

.orbit-item-inner {
  position: relative;
  display: block;
  width: max-content;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: orbitItemCounter var(--orbit-duration, 32s) linear infinite;
  transform-origin: center center;
}

.orbit-dot {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  flex: 0 0 24px;
  transform: none;
  box-shadow: none !important;
  filter: none !important;
  margin: 0 auto;
}

.orbit-label {
  position: absolute;
  top: 100%;
  left: 50%;
  display: block;
  min-width: max-content;
  white-space: nowrap;
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.15;
  color: rgba(30, 30, 30, 0.62);
  text-align: center;
  text-transform: uppercase;
  padding-top: 30px !important;
  transform: translateX(-50%) !important;
}

.page--chi-siamo .orbit-label {
  padding-top: 20px !important;
}

.planet-perception .orbit-dot {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  background: var(--orange);
}

.planet-position .orbit-dot {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  background: #009c9c;
}

.planet-meaning .orbit-dot {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  background: #3f7fbd;
}

.planet-connection .orbit-dot {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  background: #a6c437;
}

@media (max-width: 1024px) {
  .about-hero-visual {
    width: clamp(320px, 42vw, 460px);
  }

  .orbit-primary { --radius: 112px; }
  .orbit-secondary-three { --radius: 168px; }
  .orbit-secondary-two { --radius: 168px; }
  .orbit-secondary-one { --radius: 224px; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-layer,
  .orbit-item-inner {
    animation: none !important;
  }
}

@keyframes orbitItemRotate {
  from {
    transform: rotate(var(--angle)) translateX(var(--radius));
  }

  to {
    transform: rotate(calc(var(--angle) + 360deg)) translateX(var(--radius));
  }
}

@keyframes orbitItemCounter {
  from {
    transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle)));
  }

  to {
    transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle) - 360deg));
  }
}

.why-section,
.point-grid-section,
.direction-section,
.audience-section,
.offer-section,
.invisible-section,
.about-cta {
  padding: 112px 56px;
}

.why-section {
  background: #ffffff;
}

.why-section h2,
.direction-section h2,
.audience-header h2,
.invisible-section h2 {
  font-size: clamp(34px, 4.5vw, 66px);
}

.body-copy {
  max-width: 780px;
  margin-top: 34px;
}

.body-copy p + p,
.invisible-copy p + p {
  margin-top: 22px;
}

.why-visual {
  margin-top: 42px;
  width: min(100%, 440px);
}

.why-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.point-grid-section {
  background: #f7f7f7;
}

.about-video-break {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #0f0f0f;
  overflow: hidden;
}

.about-video-break-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.about-video-break-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0f0f0f;
}

.about-video-break-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 15, 15, 0.06), rgba(15, 15, 15, 0.18));
  pointer-events: none;
}

.about-video-break-centerpiece {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170px;
  height: 170px;
  transform: translate(-50%, -50%);
  display: block;
  z-index: 5;
  pointer-events: auto;
}

.about-video-break-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86px;
  height: 86px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(236, 105, 29, 0.5);
  background: rgba(16, 16, 16, 0.58);
  color: #fffaf5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(8px);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
  z-index: 2;
}

.about-video-break-play:hover {
  transform: translate(-50%, -50%) scale(1.04);
  background: rgba(236, 105, 29, 0.88);
  border-color: var(--orange);
}

.about-video-break-play-icon {
  font-size: 28px;
  line-height: 1;
  margin-left: 4px;
}

.about-video-break-orbit {
  position: absolute;
  left: 5%;
  top: 5%;
  width: 150px;
  height: 150px;
  aspect-ratio: 1 / 1;
  transform: none;
  transform-origin: center center;
  pointer-events: none;
  animation: orbitSpin 16s linear infinite;
  z-index: 1;
}

.about-video-break-orbit svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.about-video-break-centerpiece > * {
  margin: 0;
}

.about-video-break-orbit text {
  fill: var(--orange);
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.point-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.point-card,
.audience-card {
  position: relative;
  min-height: 100%;
  padding: 34px;
  border: 1px solid rgba(236, 105, 29, 0.14);
  border-radius: 8px;
  background: #ffffff;
}

.point-card span,
.audience-card span,
.offer-list span {
  color: var(--orange);
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.point-card h3,
.audience-card h3,
.offer-list h3 {
  margin: 24px 0 18px;
  font-family: 'Sora', sans-serif;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.12;
}

.direction-section {
  background: #101010;
}

.direction-section .section-tag,
.direction-section h2,
.belief-inner,
.belief-inner strong {
  color: #ffffff;
}

.direction-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.direction-list li {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  min-height: 74px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-family: 'Sora', sans-serif;
  font-size: clamp(20px, 2.2vw, 34px);
  line-height: 1.2;
}

.direction-list span {
  color: var(--orange);
  font-size: 11px;
  letter-spacing: 0.16em;
}

.direction-note {
  margin: 32px 0 0;
  color: #bdbdbd;
}

.audience-section {
  position: relative;
  background:
    linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.9)),
    url("../img/cases/pull-quote-bg.jpg") center / cover fixed;
}

.audience-header {
  margin-bottom: 58px;
}

.audience-grid-row { margin-top: 0; }

.audience-card blockquote {
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(236, 105, 29, 0.22);
  color: #1b1b1b;
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  line-height: 1.35;
}

.belief-band {
  --belief-progress: 0;
  display: grid;
  align-items: center;
  min-height: calc(58vh + (42vh * var(--belief-progress)));
  padding: 112px 56px;
  overflow: hidden;
  background:
    linear-gradient(rgba(16, 16, 16, calc(0.82 - (0.1 * var(--belief-progress)))), rgba(16, 16, 16, calc(0.82 - (0.1 * var(--belief-progress))))),
    radial-gradient(circle at 50% 50%, rgba(236, 105, 29, calc(0.16 + (0.3 * var(--belief-progress)))) 0, transparent calc(18% + (30% * var(--belief-progress)))),
    radial-gradient(circle at 18% 24%, rgba(0, 156, 156, calc(0.04 + (0.08 * var(--belief-progress)))) 0, transparent calc(16% + (18% * var(--belief-progress)))),
    #101010;
  transition: min-height 0.18s linear;
}

.belief-inner {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
  transform: scale(calc(0.72 + (0.28 * var(--belief-progress))));
  transform-origin: center;
  transition: filter 0.35s ease;
  will-change: transform;
}

.belief-inner p {
  margin: 0;
  color: #e6e6e6;
  font-size: clamp(25px, 3vw, 48px);
  line-height: 1.22;
  transition: color 0.35s ease;
}

.belief-inner strong {
  display: block;
  margin-top: 32px;
  font-family: 'Sora', sans-serif;
  font-size: clamp(24px, 3.2vw, 52px);
  line-height: 1.08;
  transition: color 0.35s ease;
}

.belief-band:hover .belief-inner,
.belief-inner:hover,
.belief-inner:focus-within {
  filter: none;
}

.belief-band:hover .belief-inner p,
.belief-band:hover .belief-inner strong,
.belief-inner:hover p,
.belief-inner:hover strong,
.belief-inner:focus-within p,
.belief-inner:focus-within strong {
  color: transparent;
  background:
    radial-gradient(circle at 54% 50%, rgba(255, 226, 198, 0.96) 0 18%, rgba(236, 105, 29, 0.92) 36%, rgba(255, 255, 255, 0.96) 70%),
    linear-gradient(90deg, #ffffff 0%, #f7d2b8 36%, var(--orange) 58%, #ffffff 100%);
  background-size: 180% 180%, 100% 100%;
  background-position: 50% 50%, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
}

.offer-section {
  position: relative;
  background: #f7f7f7;
}

.offer-row {
  margin-top: 0;
}

.offer-tag {
  margin-top: 6px;
}

.offer-list {
  display: grid;
  gap: 0;
}

.offer-list article {
  display: grid;
  grid-template-columns: 80px minmax(220px, 0.6fr) minmax(0, 1fr);
  gap: 28px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(236, 105, 29, 0.16);
}

.offer-list article:first-child {
  padding-top: 0;
}

.offer-list h3 {
  margin: 0;
}

.offer-list p {
  margin: 0;
}

.invisible-section {
  background: #ffffff;
}

.invisible-section .section-tag {
  margin-bottom: 18px;
}

.invisible-copy {
  max-width: 820px;
}

.closing-line {
  color: #1b1b1b !important;
  font-family: 'Sora', sans-serif;
  font-size: clamp(22px, 2.3vw, 34px) !important;
  line-height: 1.25 !important;
}

.manifesto-open {
  margin-top: 40px;
  display: inline-block;
}

.manifesto-open.btn-primary.btn-primary-boxed {
  margin-top: 40px !important;
}

.about-cta {
  background: #f7f7f7;
}

.about-cta-inner {
  padding: 28px 0 18px;
}

.about-cta h2 {
  max-width: 780px;
  font-size: clamp(32px, 4.2vw, 64px);
}

.about-cta .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: flex-end;
}

.manifesto-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}

.manifesto-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.manifesto-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 16, 0.72);
  backdrop-filter: blur(10px);
}

.manifesto-dialog {
  position: relative;
  width: min(100%, 900px);
  max-height: min(86vh, 780px);
  overflow: auto;
  padding: clamp(34px, 5vw, 62px);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.24);
}

.manifesto-dialog h2 {
  margin: 28px 0;
  font-family: 'Sora', sans-serif;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 0.98;
}

.manifesto-full-copy {
  color: #585858;
  font-size: 17px;
  line-height: 1.75;
}

.manifesto-full-copy p + p {
  margin-top: 20px;
}

.manifesto-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(236, 105, 29, 0.2);
  border-radius: 50%;
  background: #ffffff;
  color: #1b1b1b;
  font-size: 28px;
  line-height: 1;
  cursor: none;
}

.page--chi-siamo.modal-open {
  overflow: hidden;
}

@media (max-width: 1100px) {
  .about-hero,
  .why-section,
  .point-grid-section,
  .direction-section,
  .audience-section,
  .offer-section,
  .invisible-section,
  .about-cta {
    padding-left: 32px;
    padding-right: 32px;
  }

  .about-hero {
    background: #ffffff;
  }

  .about-hero .row {
    min-height: auto;
  }

  .about-hero-copy {
    padding-top: 20px;
  }

  .about-hero-visual-wrap {
    margin-top: 8px;
  }

  .point-grid {
    grid-template-columns: 1fr;
  }

  .why-visual {
    width: min(100%, 360px);
    margin-top: 32px;
  }

  .offer-list article {
    grid-template-columns: 64px 1fr;
  }

  .offer-list p {
    grid-column: 2;
  }

  .about-cta .cta-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .about-hero,
  .why-section,
  .point-grid-section,
  .direction-section,
  .audience-section,
  .offer-section,
  .invisible-section,
  .about-cta {
    padding-left: 22px;
    padding-right: 22px;
  }

  .about-hero {
    min-height: auto;
    padding-top: 148px;
    padding-bottom: 38px;
  }

  .about-hero h1 {
    font-size: clamp(38px, 13vw, 58px);
  }

  .about-hero-copy {
    padding-top: 8px;
  }

  .hero-sub {
    margin-top: 24px;
    font-size: 15px;
    line-height: 1.7;
    padding-left: 18px;
  }

  .about-hero-visual-wrap {
    justify-content: center;
    margin-top: 12px;
  }

  .about-hero-visual {
    width: min(100%, 280px);
  }

  .why-visual {
    width: min(100%, 300px);
    margin-top: 24px;
  }

  .about-video-break-frame {
    aspect-ratio: 16 / 9;
  }

  .about-video-break-centerpiece {
    width: 140px;
    height: 140px;
  }

  .about-video-break-play {
    width: 72px;
    height: 72px;
  }

  .about-video-break-orbit {
    width: 124px;
    height: 124px;
  }

  .about-video-break-orbit text {
    font-size: 8px;
  }

  .why-section,
  .point-grid-section,
  .direction-section,
  .audience-section,
  .offer-section,
  .invisible-section,
  .about-cta {
    padding-top: 78px;
    padding-bottom: 78px;
  }

  .point-card,
  .audience-card {
    padding: 28px 24px;
  }

  .direction-list li {
    grid-template-columns: 52px 1fr;
    min-height: 66px;
    align-items: start;
    padding: 12px 0;
  }

  .belief-band {
    min-height: calc(62vh + (38vh * var(--belief-progress)));
    padding: 86px 22px;
    background-attachment: scroll;
  }

  .belief-inner p {
    font-size: clamp(22px, 7.5vw, 32px);
  }

  .belief-inner strong {
    margin-top: 22px;
    font-size: clamp(24px, 8vw, 38px);
  }

  .audience-section {
    background-attachment: scroll;
  }

  .planet-perception {
    --dot-size: 22px;
  }

  .planet-position,
  .planet-meaning,
  .planet-connection {
    --dot-size: 14px;
  }

  .planet-perception .orbit-dot {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }

  .planet-position .orbit-dot,
  .planet-meaning .orbit-dot,
  .planet-connection .orbit-dot {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }

  .orbit-label {
    max-width: none;
    font-size: 7px;
    letter-spacing: 0.1em;
    line-height: 1.1;
    white-space: nowrap;
  }

  .offer-list article {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 0;
  }

  .offer-list p {
    grid-column: auto;
  }

  .offer-tag {
    margin-top: 0;
  }

  .audience-header {
    margin-bottom: 36px;
  }

  .manifesto-open {
    width: 100%;
    max-width: 320px;
    margin-top: 40px;
    text-align: center;
  }

  .manifesto-open.btn-primary.btn-primary-boxed {
    margin-top: 40px !important;
  }

  .about-cta h2 {
    max-width: 12ch;
  }

  .about-cta .cta-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .about-cta .cta-actions a {
    width: 100%;
    justify-content: center;
  }
}

/* ===== mobile-qa-fixes ===== */
@media (max-width: 768px) {
  .footer-home .footer-divider {
    width: auto;
    margin: 25px 0;
  }

  body.page--homepage,
  body.page--origin,
  body.page--expression,
  body.page--traction,
  body.page--vti,
  body.page--chi-siamo,
  body.page--about-me,
  body.page--elementi {
    overflow-x: hidden;
  }

  .page--homepage .ai-banner,
  .page--elementi .ai-banner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 20px;
  }

  .page--homepage .ai-cta,
  .page--elementi .ai-cta {
    justify-self: flex-start;
    align-self: flex-start;
  }

  .page--blog .post-featured .post-title {
    max-width: none;
  }

  .page--blog .post-featured-content {
    padding: 20px 18px 22px !important;
  }

  .page--blog .post-featured-visual {
    min-height: 190px !important;
    aspect-ratio: 4 / 3;
  }

  .page--blog .post-featured-visual svg {
    left: 16px;
    width: calc(100% - 16px);
  }

  .page--expression .hero {
    padding-bottom: 64px;
  }

  .page--expression .hero-ink {
    top: 170px;
    right: -22px;
    width: 172px;
    height: 172px;
    opacity: 0.18;
    z-index: 1;
  }

  .page--expression .expression-hero-label {
    display: none;
  }

  .page--expression .hero-copy,
  .page--expression .hero-copy > * {
    position: relative;
    z-index: 2;
  }

  .page--expression .hero-question {
    max-width: 300px;
    margin-bottom: 30px !important;
  }

  .page--origin .strategy-orange-blur,
  .page--expression .service-orange-blur,
  .page--traction .service-orange-blur {
    left: 50%;
    width: 72vw;
    filter: blur(18px);
  }

  .page--chi-siamo .about-hero {
    padding-bottom: 36px;
  }

  .page--chi-siamo .about-hero-visual {
    width: min(320px, 84vw);
  }

  .page--chi-siamo .orbit-primary {
    --angle: 26deg;
    --radius: 106px;
  }

  .page--chi-siamo .orbit-secondary-one {
    --angle: 74deg;
    --radius: 154px;
  }

  .page--chi-siamo .orbit-secondary-two {
    --angle: 48deg;
    --radius: 132px;
  }

  .page--chi-siamo .orbit-secondary-three {
    --angle: 104deg;
    --radius: 148px;
  }

  .page--chi-siamo .orbit-label {
    padding-top: 20px !important;
    font-size: 8px;
    letter-spacing: 0.12em;
  }

  .page--origin .hero-question {
    max-width: 34ch;
    margin-bottom: 24px;
  }

  .page--origin .hero-right {
    min-height: 274px;
    padding-top: 12px;
  }

  .page--origin .compass-wrap {
    width: min(82vw, 336px);
    height: min(82vw, 336px);
  }

  .page--origin .compass-ticks {
    opacity: 0.7;
  }
}


/* ===== clever_contatti.css ===== */


  /* ─── LAYOUT: full-height split ─── */
  .page-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
  }

  /* ─── LEFT PANEL — editorial/statement ─── */
  .left-panel {
    position: sticky; top: 0;
    height: 100vh;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 140px 72px 64px 56px;
    border-right: 0px solid var(--border);
    overflow: hidden;
  }

  /* Subtle background texture */
  .left-bg {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 60% at 30% 60%, #0d0b04 0%, #0a0a0a 65%);
    pointer-events: none;
  }
  .left-bg-num {
    position: absolute; right: -20px; bottom: 40px;
    font-family: 'Sora', sans-serif;
    font-size: 280px; font-weight: 300; line-height: 1;
    color: rgba(236,105,29,0.025);
    pointer-events: none; user-select: none;
  }

  .left-content { position: relative; z-index: 2; }

  .left-eyebrow {
    font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 36px;
    display: flex; align-items: center; gap: 12px;
    opacity: 0; animation: fadeUp .8s .2s forwards;
  }
  .left-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--orange); }

  .left-headline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(44px, 5vw, 76px);
    font-weight: 300; line-height: 1.05; letter-spacing: -.025em;
    margin-bottom: 40px;
    opacity: 0; animation: fadeUp .9s .35s forwards;
  }
  .left-headline em { font-style: italic; color: var(--orange); }

  .left-statement {
    font-family: 'Sora', sans-serif;
    font-size: 18px; font-weight: 300; font-style: italic;
    line-height: 1.7; color: var(--gray);
    border-left: 2px solid var(--border-orange);
    padding-left: 24px; max-width: 380px;
    margin-bottom: 48px;
    opacity: 0; animation: fadeUp .8s .5s forwards;
  }

  /* Three path pills */
  .left-paths {
    display: flex; flex-direction: column; gap: 8px;
    opacity: 0; animation: fadeUp .8s .65s forwards;
  }
  .path-pill {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 20px;
    border: 1px solid var(--border);
    text-decoration: none; color: inherit;
    transition: border-color .2s, background .2s;
  }
  .path-pill:hover { border-color: var(--border-orange); background: rgba(236,105,29,.02); }
  .path-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--orange); flex-shrink: 0;
    box-shadow: 0 0 6px rgba(236,105,29,.4);
  }
  .path-label {
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--orange); flex-shrink: 0; width: 80px;
  }
  .path-desc { font-size: 12.5px; color: var(--gray); line-height: 1.4; }

  /* Bottom of left panel */
  .left-footer {
    position: relative; z-index: 2;
    padding-top: 40px;
    border-top: 1px solid var(--border);
    opacity: 0; animation: fadeIn 1s .9s forwards;
  }
  .left-footer-top {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 8px;
  }
  .left-footer-name {
    font-size: 13px; font-weight: 400; color: var(--off-white);
  }
  .left-footer-title { font-size: 11px; color: var(--gray); }
  .left-footer-contacts {
    display: flex; gap: 24px; margin-top: 12px;
  }
  .left-footer-link {
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--gray); text-decoration: none;
    transition: color .2s;
    display: flex; align-items: center; gap: 6px;
  }
  .left-footer-link:hover { color: var(--orange); }

  /* ─── RIGHT PANEL — form ─── */
  .right-panel {
    padding: 140px 56px 64px 72px;
    display: flex; flex-direction: column;
    min-height: 100vh;
  }

  .form-intro {
    margin-bottom: 56px;
    opacity: 0; animation: fadeUp .8s .4s forwards;
  }
  .form-intro-label {
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
  }
  .form-intro-label::before { content: ''; width: 24px; height: 1px; background: var(--orange); }
  .form-intro-text {
    font-size: 14px; line-height: 1.85; color: var(--gray);
    max-width: 440px;
  }
  .form-intro-text strong { color: var(--off-white); font-weight: 400; }

  /* The form */
  .contact-form {
    display: flex; flex-direction: column; gap: 0;
    flex: 1;
    opacity: 0; animation: fadeUp .8s .55s forwards;
  }

  .form-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  }

  .form-field {
    border: 1px solid var(--border);
    margin: -1px 0 0 -1px; /* overlap borders */
    padding: 0;
    position: relative;
    transition: border-color .2s, background .2s;
  }
  .form-field:focus-within {
    border-color: var(--orange);
    background: rgba(236,105,29,.02);
    z-index: 1;
  }
  .form-field label {
    display: block;
    font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--gray); padding: 18px 24px 0;
    transition: color .2s;
  }
  .form-field:focus-within label { color: var(--orange); }
  .form-field input,
  .form-field select,
  .form-field textarea {
    display: block; width: 100%;
    background: none; border: none; outline: none;
    font-family: 'Epilogue', sans-serif;
    font-size: 14px; font-weight: 300;
    color: var(--off-white);
    padding: 8px 24px 18px;
    resize: none;
    -webkit-appearance: none;
  }
  .form-field input::placeholder,
  .form-field textarea::placeholder { color: var(--gray-mid); }
  .form-field select { cursor: pointer; }
  .form-field select option { background: #111; color: var(--off-white); }

  /* The key question — full width, larger */
  .form-field.key-question {
    border-color: var(--border-orange);
    background: rgba(236,105,29,.015);
  }
  .form-field.key-question label {
    color: rgba(236,105,29,.6);
    padding-top: 24px;
  }
  .form-field.key-question:focus-within { border-color: var(--orange); }
  .form-field.key-question textarea {
    font-family: 'Sora', sans-serif;
    font-size: 18px; font-weight: 300; font-style: italic;
    color: var(--off-white); line-height: 1.65;
    padding: 12px 24px 28px;
    min-height: 140px;
  }
  .form-field.key-question textarea::placeholder {
    color: rgba(236,105,29,.25);
    font-style: italic;
  }

  /* Consent & submit row */
  .form-bottom {
    border: 1px solid var(--border);
    margin-top: -1px;
    padding: 28px 24px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
  }
  .form-consent {
    display: flex; align-items: flex-start; gap: 12px;
    flex: 1; min-width: 200px;
  }
  .consent-check {
    width: 18px; height: 18px; flex-shrink: 0;
    border: 1px solid var(--border-orange);
    background: none; cursor: pointer;
    appearance: none; -webkit-appearance: none;
    margin-top: 2px; position: relative;
    transition: border-color .2s, background .2s;
  }
  .consent-check:checked { background: var(--orange); border-color: var(--orange); }
  .consent-check:checked::after {
    content: '✓'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: var(--black); font-weight: 500;
  }
  .consent-label {
    font-size: 11px; line-height: 1.6; color: var(--gray);
  }
  .consent-label a { color: var(--gray); transition: color .2s; }
  .consent-label a:hover { color: var(--orange); }

  /* Success state */
  .form-success {
    display: none;
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center; flex: 1;
    padding: 80px 40px;
  }
  .form-success.show { display: flex; }
  .success-icon {
    width: 64px; height: 64px;
    border: 1px solid var(--border-orange);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: var(--orange);
    margin-bottom: 32px;
  }
  .success-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 300; line-height: 1.15;
    letter-spacing: -.02em; margin-bottom: 20px;
  }
  .success-title em { font-style: italic; color: var(--orange); }
  .success-body { font-size: 14px; line-height: 1.85; color: var(--gray); max-width: 360px; }

  /* ─── BELOW FOLD: social proof strip ─── */
  .proof-strip {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border);
  }
  .proof-row {
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .proof-item {
    height: 100%;
    padding: 56px 48px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .proof-num {
    font-family: 'Sora', sans-serif;
    font-size: 52px; font-weight: 300; color: var(--orange);
    line-height: 1;
  }
  .proof-label {
    font-size: 12px; line-height: 1.6; color: var(--gray);
    max-width: 180px;
  }

  /* ─── FAQ ─── */
  .faq-section {
    grid-column: 1 / -1;
    padding: 120px 56px;
    border-top: 1px solid var(--border);
  }
  .faq-row {
    align-items: start;
  }
  .faq-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 300; line-height: 1.15; letter-spacing: -.02em;
    position: sticky; top: 120px;
  }
  .faq-title em { font-style: italic; color: var(--orange); }
  .faq-list { display: flex; flex-direction: column; }
  .faq-item {
    border-top: 1px solid var(--border);
    cursor: pointer;
    transition: background .2s;
  }
  .faq-item:last-child { border-bottom: 1px solid var(--border); }
  .faq-item.open { background: rgba(236,105,29,.015); }
  .faq-question {
    display: flex; justify-content: space-between; align-items: center;
    gap: 20px; padding: 24px 0;
  }
  .faq-q-text {
    font-size: 15px; font-weight: 400; color: var(--off-white);
    line-height: 1.4;
    transition: color .2s;
  }
  .faq-item.open .faq-q-text { color: var(--orange); }
  .faq-toggle {
    width: 28px; height: 28px; flex-shrink: 0;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--gray);
    transition: transform .3s, border-color .2s, color .2s;
  }
  .faq-item.open .faq-toggle { transform: rotate(45deg); border-color: var(--orange); color: var(--orange); }
  .faq-answer {
    font-size: 14px; line-height: 1.85; color: var(--gray);
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .45s cubic-bezier(.25,.46,.45,.94), opacity .35s, padding .3s;
    padding-bottom: 0;
  }
  .faq-answer strong { color: var(--off-white); font-weight: 400; }
  .faq-item.open .faq-answer { max-height: 300px; opacity: 1; padding-bottom: 28px; }

  @keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
  @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

  .reveal {
    opacity:0; transform:translateY(24px);
    transition: opacity .8s cubic-bezier(.25,.46,.45,.94), transform .8s cubic-bezier(.25,.46,.45,.94);
  }
  .reveal.visible { opacity:1; transform:none; }
  .reveal-delay-1 { transition-delay:.1s; }
  .reveal-delay-2 { transition-delay:.2s; }
  .reveal-delay-3 { transition-delay:.3s; }

  .page-wrap {
    position: relative;
    background:
      linear-gradient(90deg, rgba(244,241,235,0.02), transparent 28%),
      linear-gradient(180deg, rgba(236,105,29,0.04), transparent 24%);
  }

  .left-panel {
    background: linear-gradient(180deg, rgba(244,241,235,0.03), rgba(244,241,235,0.01));
  }

  .left-panel::after {
    content: '';
    position: absolute;
    inset: 32px;
    border: 1px solid rgba(236,105,29,0.08);
    border-radius: 30px;
    pointer-events: none;
  }

  .left-statement {
    color: rgba(244,241,235,0.72);
  }

  .path-pill {
    border-radius: 22px;
    padding: 18px 22px;
    background: rgba(244,241,235,0.015);
    backdrop-filter: blur(8px);
  }

  .path-pill:hover {
    transform: translateX(8px);
  }

  .path-label {
    width: 92px;
  }

  .right-panel {
    position: relative;
  }

  .form-intro {
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(236,105,29,0.12);
  }

  .form-intro-text {
    font-size: 15px;
    color: rgba(244,241,235,0.7);
  }

  .contact-form {
    background: linear-gradient(180deg, rgba(244,241,235,0.02), rgba(244,241,235,0.01));
    border: 1px solid rgba(236,105,29,0.08);
    border-radius: 30px;
    padding: 10px;
    box-shadow: 0 28px 64px rgba(0,0,0,0.18);
  }

  .form-field {
    border-radius: 18px;
    overflow: hidden;
    margin: 0;
    border-color: rgba(236,105,29,0.08);
  }

  .form-row {
    gap: 10px;
    margin-bottom: 10px;
  }

  .form-field + .form-field,
  .contact-form > .form-field,
  .contact-form > .form-bottom {
    margin-top: 10px;
  }

  .form-field.key-question {
    background:
      linear-gradient(180deg, rgba(236,105,29,0.06), rgba(236,105,29,0.02)),
      rgba(244,241,235,0.01);
    box-shadow: inset 0 0 0 1px rgba(236,105,29,0.08);
  }

  .form-field textarea {
    min-height: 180px;
  }

  .form-success {
    border: 1px solid rgba(236,105,29,0.14);
    border-radius: 32px;
    background: linear-gradient(180deg, rgba(236,105,29,0.06), rgba(244,241,235,0.015));
    box-shadow: 0 24px 60px rgba(0,0,0,0.18);
  }

  .proof-strip {
    gap: 14px;
    background: linear-gradient(90deg, rgba(236,105,29,0.05), transparent 20%, transparent 80%, rgba(236,105,29,0.05));
  }

  .proof-item {
    border-radius: 22px;
    border: 1px solid rgba(236,105,29,0.08);
    background: rgba(244,241,235,0.015);
    padding: 26px 22px;
  }

  .faq-item {
    padding: 0 18px;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    transition: background .2s, border-color .2s, transform .2s;
  }

  .faq-item:hover,
  .faq-item.open {
    transform: translateX(8px);
    border-left-color: rgba(236,105,29,0.22);
    border-right-color: rgba(236,105,29,0.08);
    background: linear-gradient(90deg, rgba(236,105,29,0.06), rgba(236,105,29,0.015));
  }

  @media (max-width: 980px) {
    .page-wrap {
      display: block;
    }

    .left-panel,
    .right-panel {
      min-height: auto;
      height: auto;
    }

    .left-panel {
      position: relative;
      top: auto;
      padding: 124px 28px 32px;
      border-right: 0;
      border-bottom: 1px solid var(--border);
    }

    .right-panel {
      padding: 36px 28px 40px;
    }

    .left-headline {
      margin-bottom: 24px;
    }

    .left-statement {
      max-width: none;
      margin-bottom: 32px;
    }

    .left-paths {
      gap: 10px;
    }

    .left-panel::after {
      inset: 20px;
    }

    .contact-form {
      padding: 0;
      border-radius: 24px;
      border: 0;
      box-shadow: none;
      background: transparent;
    }

    .path-pill:hover,
    .faq-item:hover,
    .faq-item.open {
      transform: none;
    }

    .proof-row {
      padding-top: 20px;
      padding-bottom: 20px;
    }

    .faq-section {
      padding: 72px 28px;
    }

    .faq-title {
      position: static;
      margin-bottom: 12px;
    }
  }

  @media (max-width: 720px) {
    .left-panel {
      padding: 116px 20px 28px;
    }

    .left-panel::after {
      inset: 14px;
      border-radius: 20px;
    }

    .left-bg-num {
      right: -8px;
      bottom: 20px;
      font-size: 160px;
      color: rgba(236,105,29,0.04);
    }

    .contact-breadcrumb {
      margin-bottom: 18px;
      font-size: 10px;
      gap: 10px;
      flex-wrap: wrap;
    }

    .left-eyebrow {
      margin-bottom: 20px;
      font-size: 10px;
      gap: 10px;
    }

    .left-headline {
      font-size: clamp(38px, 12vw, 52px);
      line-height: 1.02;
      margin-bottom: 20px;
    }

    .left-statement {
      font-size: 15px;
      line-height: 1.65;
      padding-left: 18px;
      margin-bottom: 24px;
    }

    .path-pill {
      align-items: flex-start;
      gap: 12px;
      padding: 16px 16px 15px;
      border-radius: 18px;
    }

    .path-label {
      width: auto;
      min-width: 82px;
      font-size: 10px;
    }

    .path-desc {
      font-size: 12px;
      line-height: 1.45;
    }

    .right-panel {
      padding: 28px 20px 32px;
    }

    .form-intro {
      margin-bottom: 28px;
      padding-bottom: 14px;
    }

    .form-intro-label {
      margin-bottom: 12px;
      font-size: 10px;
      gap: 8px;
    }

    .form-intro-text {
      font-size: 14px;
      line-height: 1.72;
      max-width: none;
    }

    .form-row {
      grid-template-columns: 1fr;
      gap: 10px;
      margin-bottom: 10px;
    }

    .form-field {
      border-radius: 16px;
      background: #f6f6f6;
      border-color: rgba(236,105,29,0.08);
    }

    .form-field label {
      padding: 16px 18px 0;
      font-size: 9px;
      color: #6a6a6a;
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
      padding: 8px 18px 16px;
      font-size: 15px;
      color: #222;
    }

    .form-field input::placeholder,
    .form-field textarea::placeholder {
      color: #9a9a9a;
    }

    .form-field select option {
      background: #ffffff;
      color: #222;
    }

    .form-field.key-question {
      background:
        linear-gradient(180deg, rgba(236,105,29,0.08), rgba(236,105,29,0.03)),
        #f8f5f1;
    }

    .form-field.key-question textarea {
      min-height: 132px;
      font-size: 16px;
      line-height: 1.55;
      padding: 10px 18px 20px;
      color: #1b1b1b;
    }

    .form-bottom {
      padding: 20px 18px;
      flex-direction: column;
      align-items: stretch;
      gap: 18px;
      border-radius: 16px;
      background: #f6f6f6;
      border-color: rgba(236,105,29,0.08);
    }

    .form-consent {
      gap: 10px;
      min-width: 0;
    }

    .consent-label {
      font-size: 12px;
      line-height: 1.55;
      color: #5a5a5a;
    }

    .btn-submit {
      width: 100%;
      justify-content: center;
      text-align: center;
      min-height: 52px;
      border-radius: 8px;
    }

    .path-pill,
    .proof-item,
    .form-success {
      border-radius: 18px;
    }

    .proof-strip {
      padding: 0 20px;
    }

    .faq-item {
      padding: 0 2px;
      border-left: 0;
      border-right: 0;
    }

    .proof-item {
      padding: 20px 16px;
    }

    .proof-num {
      font-size: 40px;
    }

    .proof-label {
      max-width: none;
      font-size: 12px;
      line-height: 1.55;
    }

    .faq-section {
      padding: 56px 20px;
    }

    .faq-title {
      font-size: clamp(28px, 10vw, 38px);
      margin-bottom: 18px;
    }

    .faq-question {
      gap: 14px;
      padding: 18px 0;
      align-items: flex-start;
    }

    .faq-q-text {
      font-size: 14px;
      line-height: 1.45;
    }

    .faq-toggle {
      width: 24px;
      height: 24px;
      font-size: 14px;
      margin-top: 2px;
    }

    .faq-answer {
      font-size: 13px;
      line-height: 1.7;
    }

    .faq-item.open .faq-answer {
      padding-bottom: 18px;
    }
  }


/* ===== clever_ecosistema.css ===== */
.page--ecosistema {
  background: #f7f7f7;
  color: #1b1b1b;
}

.page--ecosistema {
  overflow-x: hidden;
}

.page--ecosistema main {
  overflow: visible;
}

.ecosystem-hero {
  position: relative;
  min-height: 100vh;
  padding-top: var(--hero-nav-offset, 132px);
  padding-bottom: 72px;
  border-bottom: 1px solid rgba(236, 105, 29, 0.12);
  background:
    linear-gradient(90deg, rgba(236, 105, 29, 0.1), transparent 32%),
    radial-gradient(circle at 78% 28%, rgba(0, 156, 156, 0.12), transparent 24%),
    #ffffff;
}

.ecosystem-hero .hero-layout > .row {
  min-height: calc(100vh - var(--hero-nav-offset, 132px) - 72px);
}

.ecosystem-hero-copy {
  padding-left: 0 !important;
}

.section-page-hero--ecosystem .hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-bottom: 18px;
  color: #8a8a8a;
  font-family: 'Epilogue', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.section-page-hero--ecosystem .hero-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.section-page-hero--ecosystem .hero-breadcrumb .sep,
.section-page-hero--ecosystem .hero-breadcrumb .current {
  color: var(--orange);
}

.ecosystem-hero h1 {
  max-width: 720px;
  margin: 0 0 34px;
  font-family: 'Sora', sans-serif;
  font-size: clamp(42px, 5.6vw, 82px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: 0;
}

.ecosystem-hero h1 em {
  color: var(--orange);
  font-style: normal;
}

.ecosystem-hero-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.heart-hero-visual {
  width: min(100%, 440px);
  margin: 0;
}

.heart-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 28px 48px rgba(0, 0, 0, 0.1));
}

.eurotarget-logo span {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 300;
  letter-spacing: 0.02em;
}

.eurotarget-logo span::before {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-right: -0.32em;
  border-radius: 50%;
  background: #009c9c;
  transform: translateX(2.46em);
}

.eurotarget-logo small {
  color: #009c9c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.38em;
  text-transform: uppercase;
}

.section-page-hero--ecosystem .hero-eyebrow {
  margin-bottom: 30px !important;
}

.section-page-hero--ecosystem .hero-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--orange);
}

.purpose-section {
  padding: 116px 56px;
  background: #f7f7f7;
  border-bottom: 1px solid rgba(236, 105, 29, 0.1);
}

.purpose-row {
  align-items: start;
}

.purpose-kicker,
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--orange);
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.purpose-kicker::before,
.section-tag::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--orange);
}

.purpose-section h2,
.map-header h2,
.competence-intro h2 {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-size: clamp(36px, 4.5vw, 66px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: 0;
}

.purpose-copy p,
.competence-intro p {
  max-width: 760px;
  margin: 34px 0 0;
  color: #585858;
  font-size: 18px;
  line-height: 1.75;
}

.purpose-visual {
  margin: 0;
  align-self: stretch;
}

.purpose-visual svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 360px;
}

.ecosystem-map {
  padding: 116px 56px 190px;
  background: #ffffff;
}

.map-header {
  display: grid;
  grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
  gap: clamp(40px, 8vw, 120px);
  margin-bottom: 96px;
}

.map-stage {
  position: relative;
  min-height: 1420px;
  isolation: isolate;
}

.map-stage::before {
  content: "";
  position: absolute;
  inset: 50%;
  width: min(78vw, 1120px);
  aspect-ratio: 1;
  border: 1px solid rgba(236, 105, 29, 0.12);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.map-stage::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: min(58vw, 840px);
  aspect-ratio: 1;
  border: 1px solid rgba(0, 156, 156, 0.12);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.map-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: min(34vw, 460px);
  aspect-ratio: 1;
  transform: translate(-50%, -48%);
}

.center-orbit {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(236, 105, 29, 0.14);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(236, 105, 29, 0.16), transparent 58%),
    radial-gradient(circle at 62% 34%, rgba(0, 156, 156, 0.18), transparent 24%);
}

.center-orbit::before,
.center-orbit::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(0, 156, 156, 0.14);
  border-radius: 50%;
}

.center-orbit::after {
  inset: 28%;
  border-color: rgba(236, 105, 29, 0.18);
}

.center-card {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(92%, 360px);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(236, 105, 29, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  padding: 26px;
  text-align: center;
}

.center-card small {
  display: block;
  color: #585858;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.center-card img {
  display: block;
  width: min(100%, 250px);
  margin: 0 auto 18px;
  height: auto;
}

.ecosystem-node {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 0;
  height: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
  transform: rotate(var(--orbit-start));
  animation: orbitRotate 82s linear infinite;
  transform-origin: 0 0;
}

.node-inner {
  display: block;
  width: clamp(260px, 22vw, 330px);
  min-height: 230px;
  border: 1px solid rgba(236, 105, 29, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  padding: 28px;
  color: inherit;
  text-decoration: none;
  transform: translateX(var(--orbit-radius)) translate(-50%, -50%) rotate(var(--counter-start));
  animation: orbitCounter 82s linear infinite;
  transform-origin: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.node-inner:hover,
.node-inner:focus-visible {
  border-color: rgba(236, 105, 29, 0.48);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.1);
  outline: none;
}

.ecosystem-node h3 {
  margin: 18px 0 18px;
  font-family: 'Sora', sans-serif;
  font-size: 26px;
  line-height: 1.08;
}

.node-logo {
  display: block;
  width: min(100%, 210px);
  max-height: 72px;
  margin: 22px 0 0;
  object-fit: contain;
  object-position: left center;
}

.node-logo-clever {
  max-height: 64px;
}

.node-logo-monsters {
  max-width: 190px;
  max-height: 76px;
}

.ecosystem-node ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 18px;
  color: #333333;
  font-size: 14px;
  line-height: 1.45;
}

.node-label {
  display: inline-flex;
  border-radius: 8px;
  padding: 9px 14px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.node-label.orange { background: var(--orange); }
.node-label.blue { background: #3f78b7; }
.node-label.green { background: #95bd52; }
.node-label.amber { background: #d77a32; }
.node-label.yellow { background: #f0b44e; }

.node-incentive {
  --orbit-start: 198deg;
  --counter-start: -198deg;
  --counter-end: -558deg;
  --orbit-radius: min(34vw, 520px);
}

.node-events {
  --orbit-start: 126deg;
  --counter-start: -126deg;
  --counter-end: -486deg;
  --orbit-radius: min(34vw, 520px);
}

.node-services {
  --orbit-start: 54deg;
  --counter-start: -54deg;
  --counter-end: -414deg;
  --orbit-radius: min(34vw, 520px);
}

.node-digital {
  --orbit-start: -18deg;
  --counter-start: 18deg;
  --counter-end: -342deg;
  --orbit-radius: min(34vw, 520px);
}

.node-clever {
  --orbit-start: -90deg;
  --counter-start: 90deg;
  --counter-end: -270deg;
  --orbit-radius: min(34vw, 520px);
}

@keyframes orbitRotate {
  from { transform: rotate(var(--orbit-start)); }
  to { transform: rotate(calc(var(--orbit-start) + 360deg)); }
}

@keyframes orbitCounter {
  from { transform: translateX(var(--orbit-radius)) translate(-50%, -50%) rotate(var(--counter-start)); }
  to { transform: translateX(var(--orbit-radius)) translate(-50%, -50%) rotate(var(--counter-end)); }
}

.competence-section {
  padding: 116px 56px;
  background: #f7f7f7;
  border-top: 1px solid rgba(236, 105, 29, 0.1);
}

.competence-intro {
  align-items: end;
  margin-bottom: 64px;
}

.competence-heading {
  display: grid;
  gap: 28px;
  justify-items: start;
}

.competence-body {
  justify-self: end;
  text-align: right;
}

.competence-grid-row article {
  min-height: 300px;
  border-radius: 8px;
  background: #ffffff;
  padding: 32px;
}

.competence-grid-row span {
  color: var(--orange);
  font-family: 'Sora', sans-serif;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
}

.competence-grid-row h3 {
  margin: 36px 0 18px;
  font-family: 'Sora', sans-serif;
  font-size: 28px;
  line-height: 1.08;
}

.competence-grid-row p {
  margin: 0;
  color: #585858;
  font-size: 15px;
  line-height: 1.75;
}

.statement-band {
  padding: 250px 56px 104px;
  background:
    radial-gradient(circle at 50% 0%, rgba(236, 105, 29, 0.12), transparent 34%),
    #f6f6f6;
}

.video-section {
  padding: 116px 56px 0;
  background:
    radial-gradient(circle at 72% 24%, rgba(236, 105, 29, 0.18), transparent 28%),
    radial-gradient(circle at 18% 76%, rgba(0, 156, 156, 0.16), transparent 26%),
    #171717;
  border-top: 1px solid rgba(236, 105, 29, 0.2);
}

.video-copy {
  text-align: center;
}

.video-copy .section-tag {
  justify-content: center;
}

.video-copy h2 {
  max-width: 820px;
  margin: 28px auto 24px;
  color: #f7f7f7;
  font-family: 'Sora', sans-serif;
  font-size: clamp(34px, 4.6vw, 68px);
  font-weight: 800;
  line-height: 1;
}

.video-copy p {
  max-width: 720px;
  margin: 0 auto;
  color: #bdbdbd;
  font-size: 16px;
  line-height: 1.75;
  text-align: center;
}

.video-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 1120px);
  aspect-ratio: 1920 / 1080;
  min-height: 0;
  margin: 48px auto -148px;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.26), rgba(10, 10, 10, 0.52)),
    radial-gradient(circle at 50% 50%, rgba(236, 105, 29, 0.16), transparent 34%),
    radial-gradient(circle at 72% 30%, rgba(0, 156, 156, 0.14), transparent 26%),
    #2a2a2a;
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.28);
}

.video-frame::before {
  content: none;
}

.video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 16, 16, 0.2), rgba(16, 16, 16, 0.38));
  pointer-events: none;
}

.video-mark {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: min(82%, 620px);
  opacity: 0.92;
}

.video-mark img {
  width: min(34vw, 230px);
  height: auto;
}

.video-mark > span {
  color: var(--orange);
  font-family: 'Sora', sans-serif;
  font-size: 38px;
  font-weight: 800;
}

.play-button {
  position: absolute;
  z-index: 2;
  width: 76px;
  height: 76px;
  border: 1px solid var(--orange);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
}

.play-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 53%;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid var(--orange);
  transform: translate(-50%, -50%);
}

.statement-band .row {
  justify-content: center;
}

.statement-quote,
.statement-band blockquote {
  max-width: 980px;
  margin: 0 auto;
  color: #1b1b1b;
  font-family: 'Sora', sans-serif;
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 800;
  line-height: 1.08;
  text-align: center;
}

.statement-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.statement-actions .btn-primary {
  border-radius: 8px !important;
}

@media (max-width: 1100px) {
  .map-header {
    margin-bottom: 48px;
  }

  .map-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: auto;
    gap: 18px;
  }

  .map-stage::before,
  .map-stage::after,
  .map-center {
    display: none;
  }

  .ecosystem-node,
  .node-incentive,
  .node-events,
  .node-services,
  .node-digital,
  .node-clever {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    transform: none;
    animation: none;
  }

  .node-inner {
    width: auto;
    transform: none;
    animation: none;
  }

  .ecosystem-node,
  .node-incentive,
  .node-events,
  .node-services,
  .node-digital,
  .node-clever {
    margin-top: 0;
  }
}

@media (max-width: 980px) {
  .ecosystem-hero {
    min-height: auto;
    padding-bottom: 56px;
  }

  .ecosystem-hero .hero-layout > .row {
    min-height: auto;
  }

  .ecosystem-hero h1 {
    font-size: clamp(38px, 10.8vw, 62px);
  }

  .heart-hero-visual {
    width: min(100%, 360px);
    margin-top: 24px;
  }

  .purpose-section,
  .ecosystem-map,
  .competence-section,
  .video-section,
  .statement-band {
    padding-right: 24px;
    padding-left: 24px;
  }

  .purpose-section,
  .ecosystem-map,
  .competence-section,
  .video-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .statement-band {
    padding-top: 180px;
    padding-bottom: 76px;
  }

  .competence-body {
    justify-self: start;
    text-align: left;
  }

  .purpose-visual svg {
    min-height: auto;
  }

  .video-frame {
    width: 100%;
    margin: 40px auto -104px;
  }
}

@media (max-width: 720px) {
  .ecosystem-hero h1 {
    font-size: clamp(34px, 11vw, 48px);
  }

  .purpose-section h2,
  .map-header h2,
  .competence-intro h2,
  .video-copy h2 {
    font-size: clamp(32px, 10vw, 44px);
  }

  .purpose-copy p,
  .competence-intro p,
  .video-copy p {
    font-size: 16px;
  }

  .map-stage {
    grid-template-columns: 1fr;
  }

  .ecosystem-node,
  .competence-grid-row article {
    min-height: auto;
  }

  .statement-actions,
  .statement-actions .btn-primary,
  .statement-actions .btn-ghost {
    width: 100%;
  }

  .statement-actions {
    flex-direction: column;
  }

  .statement-band blockquote {
    font-size: clamp(26px, 8.2vw, 36px);
  }

  .video-mark {
    flex-direction: column;
    gap: 12px;
  }

  .statement-band {
    padding-top: 148px;
  }

  .video-frame {
    margin-bottom: -88px;
  }

  .video-mark img {
    width: min(72vw, 220px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ecosystem-node,
  .node-inner {
    animation: none !important;
  }
}


/* ===== clever_elementi.css ===== */
body.page--elementi {
  min-height: 100vh;
}

.page--elementi .elements-hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 120px 0 72px;
  position: relative;
}

.page--elementi .elements-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 8%, rgba(236, 105, 29, 0.22), transparent 28%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.62));
  pointer-events: none;
}

.page--elementi .elements-hero-copy,
.page--elementi .elements-hero-panel {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.page--elementi .elements-hero-panel {
  overflow: hidden;
  padding-right: clamp(20px, 4vw, 56px);
}

.page--elementi .elements-hero .row {
  align-items: center;
}

.page--elementi .elements-title {
  max-width: 10ch;
  margin-bottom: 24px;
  font-size: clamp(56px, 7vw, 92px);
  line-height: 0.97;
}

.page--elementi .elements-subtitle {
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.8;
  color: #5d5d5d;
  margin-bottom: 40px;
}

.page--elementi .hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
}

.page--elementi .hero-chip-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.page--elementi .hero-chip {
  padding: 10px 14px;
  border: 1px solid rgba(236, 105, 29, 0.18);
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4d4d4d;
  background: rgba(255, 255, 255, 0.82);
}

.page--elementi .elements-showcase-card {
  width: 100%;
  max-width: 100%;
  padding: 34px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 247, 247, 0.92));
  border: 1px solid rgba(34, 34, 42, 0.08);
  box-shadow: 0 22px 54px rgba(34, 34, 42, 0.08);
}

.page--elementi .elements-showcase-label {
  margin-bottom: 14px;
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}

.page--elementi .elements-showcase-card p {
  font-size: 15px;
  line-height: 1.8;
  color: #575757;
}

.page--elementi .elements-ticker {
  box-shadow: none;
}

.page--elementi .elements-main {
  padding-bottom: 100px;
}

.page--elementi .elements-section {
  padding: 96px 56px 0;
}

.page--elementi .elements-section--intro {
  padding-top: 56px;
}

.page--elementi .elements-section--dark {
  padding-bottom: 24px;
}

.page--elementi .elements-section-head {
  margin-bottom: 34px;
  max-width: 860px;
}

.page--elementi .section-tag,
.page--elementi .type-label,
.page--elementi .button-card-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}

.page--elementi .section-tag::before,
.page--elementi .type-label::before,
.page--elementi .button-card-label::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--orange);
}

.page--elementi .section-title {
  margin-bottom: 12px;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.04;
}

.page--elementi .section-intro {
  font-size: 15px;
  line-height: 1.8;
  color: #606060;
}

.page--elementi .anchor-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page--elementi .anchor-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(34, 34, 42, 0.08);
  background: rgba(255, 255, 255, 0.88);
  color: #4f4f4f;
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.page--elementi .catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.page--elementi .catalog-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page--elementi .catalog-card {
  padding: 30px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(34, 34, 42, 0.08);
}

.page--elementi .catalog-card h3 {
  margin-bottom: 18px;
  font-size: 28px;
  line-height: 1.08;
}

.page--elementi .catalog-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  color: #5d5d5d;
  line-height: 1.6;
}

.page--elementi .catalog-list--columns {
  columns: 2;
  column-gap: 32px;
}

.page--elementi .catalog-list--columns li {
  break-inside: avoid;
  margin-bottom: 10px;
}

.page--elementi .demo-gap {
  margin-top: 28px;
}

.page--elementi .demo-subsection {
  padding-left: 0;
  padding-right: 0;
}

.page--elementi .type-scale {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.page--elementi .type-card,
.page--elementi .button-card,
.page--elementi .tab-panel {
  padding: 30px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(34, 34, 42, 0.08);
}

.page--elementi .type-card h1,
.page--elementi .type-card h2,
.page--elementi .type-card h3,
.page--elementi .type-card h4,
.page--elementi .type-card p {
  margin: 0;
}

.page--elementi .type-card h1 { font-size: clamp(42px, 4vw, 68px); line-height: 0.98; }
.page--elementi .type-card h2 { font-size: clamp(30px, 3vw, 48px); line-height: 1.03; }
.page--elementi .type-card h3 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; }
.page--elementi .type-card h4 { font-size: 22px; line-height: 1.2; }
.page--elementi .type-card p { font-size: 15px; line-height: 1.8; color: #606060; }

.page--elementi .type-card--body {
  grid-column: 1 / -1;
}

.page--elementi .button-grid,
.page--elementi .news-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.page--elementi .button-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

.page--elementi .cta-showcase {
  margin-top: 24px;
  padding: 34px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(243, 243, 243, 0.94));
  border: 1px solid rgba(34, 34, 42, 0.08);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  gap: 28px;
  align-items: center;
}

.page--elementi .cta-showcase-title {
  margin-bottom: 12px;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.08;
}

.page--elementi .cta-showcase p {
  max-width: 46ch;
  color: #5d5d5d;
}

.page--elementi .cta-showcase-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.page--elementi .post-card {
  min-height: 100%;
}

.page--elementi .tabs-demo {
  display: grid;
  gap: 20px;
}

.page--elementi .tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.page--elementi .tab-panel h3 {
  margin-bottom: 12px;
  font-size: 28px;
}

.page--elementi .tab-panel p {
  color: #5f5f5f;
  line-height: 1.75;
}

.page--elementi .accordion-list {
  display: grid;
  gap: 0;
}

.page--elementi .faq-item {
  padding: 0 28px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(34, 34, 42, 0.08);
  border-bottom: 0;
}

.page--elementi .faq-item:last-child {
  border-bottom: 1px solid rgba(34, 34, 42, 0.08);
}

.page--elementi .faq-q {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 26px 0;
  cursor: pointer;
}

.page--elementi .faq-q::-webkit-details-marker {
  display: none;
}

.page--elementi .faq-q-text {
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  line-height: 1.35;
  color: #1f1f24;
}

.page--elementi .faq-toggle {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(236, 105, 29, 0.28);
  color: var(--orange);
  transition: transform 0.2s ease;
}

.page--elementi .faq-item[open] .faq-toggle {
  transform: rotate(45deg);
}

.page--elementi .faq-answer {
  padding: 0 0 24px;
}

.page--elementi .faq-answer p {
  max-width: 58ch;
  color: #5d5d5d;
  line-height: 1.8;
}

.page--elementi .clients-strip {
  margin-top: 0;
}

.page--elementi .elements-section--dark .ai-banner {
  margin: 0;
}

@media (max-width: 1180px) {
  .page--elementi .elements-section {
    padding-left: 32px;
    padding-right: 32px;
  }

  .page--elementi .catalog-grid,
  .page--elementi .catalog-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page--elementi .button-grid,
  .page--elementi .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .page--elementi .elements-hero {
    min-height: auto;
    padding-top: 104px;
  }

  .page--elementi .elements-title {
    max-width: 12ch;
    font-size: clamp(42px, 10vw, 64px);
  }

  .page--elementi .elements-subtitle {
    max-width: none;
  }

  .page--elementi .hero-actions,
  .page--elementi .cta-showcase,
  .page--elementi .framework-steps,
  .page--elementi .type-scale {
    grid-template-columns: 1fr;
  }

  .page--elementi .catalog-grid,
  .page--elementi .catalog-grid--three {
    grid-template-columns: 1fr;
  }

  .page--elementi .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .page--elementi .cta-showcase {
    padding: 26px;
  }

  .page--elementi .cta-showcase-actions {
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  .page--elementi .elements-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .page--elementi .elements-hero {
    padding-top: 88px;
    padding-bottom: 48px;
  }

  .page--elementi .button-grid,
  .page--elementi .news-grid,
  .page--elementi .type-scale {
    grid-template-columns: 1fr;
  }

  .page--elementi .catalog-list--columns {
    columns: 1;
  }

  .page--elementi .type-card,
  .page--elementi .button-card,
  .page--elementi .tab-panel,
  .page--elementi .catalog-card,
  .page--elementi .elements-showcase-card,
  .page--elementi .cta-showcase {
    padding: 22px;
    border-radius: 24px;
  }

  .page--elementi .faq-item {
    padding: 0 20px;
  }

  .page--elementi .faq-q {
    padding: 20px 0;
  }

  .page--elementi .faq-q-text {
    font-size: 16px;
  }
}


/* ===== clever_expression.css ===== */


  /* ─── HERO ─── */
  .hero {
    min-height: 100vh;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 56px 100px;
  }

  /* Ink-spread background — abstract, painterly */
  .hero-bg {
    position: absolute; inset: 0;
    background: var(--black);
  }
  .hero-ink {
    position: absolute; top: 20%; right: 4%;
    width: 32%; height: 56%;
    overflow: visible;
    opacity: 0.98;
  }
  .hero-ink svg { width: 100%; height: 100%; display: block; }
  .smile-visual {
    filter: drop-shadow(0 28px 54px rgba(236,105,29,0.12));
  }
  .section-page-hero--expression .hero-ink,
  .section-page-hero--expression .smile-visual {
    box-shadow: none !important;
    filter: none !important;
  }
  .smile-face {
    opacity: 0;
    animation: smileCycle 16s infinite steps(1, end);
  }
  .smile-face--worried { animation-delay: 0s; }
  .smile-face--angry { animation-delay: -2s; }
  .smile-face--doubtful { animation-delay: -4s; }
  .smile-face--happy { animation-delay: -6s; }
  .smile-face--excited { animation-delay: -8s; }
  .smile-face--laughing { animation-delay: -10s; }
  .smile-face--sad { animation-delay: -12s; }
  .smile-face--wink { animation-delay: -14s; }

  @keyframes smileCycle {
    0%, 12.4% { opacity: 1; }
    12.5%, 100% { opacity: 0; }
  }

  .expression-hero-label {
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(34, 34, 42, 0.5);
    font-family: 'Sora', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .hero-content { position: relative; z-index: 2; max-width: 740px; }

  .hero-breadcrumb {
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--gray); margin-bottom: 48px;
    display: flex; align-items: center; gap: 10px;
    opacity: 0; animation: fadeUp 0.6s 0.1s forwards;
  }
  .hero-breadcrumb a { color: var(--gray); text-decoration: none; transition: color 0.2s; }
  .hero-breadcrumb a:hover { color: var(--off-white); }
  .hero-breadcrumb .sep { color: var(--gray-mid); }
  .hero-breadcrumb .current { color: var(--orange); }

  .hero-eyebrow {
    font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 28px;
    display: flex; align-items: center; gap: 12px;
    opacity: 0; animation: fadeUp 0.8s 0.2s forwards;
  }
  .hero-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--orange); }

  .hero h1 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(52px, 6.5vw, 96px);
    font-weight: 300; line-height: 1.0; letter-spacing: -0.025em;
    margin-bottom: 36px;
    opacity: 0; animation: fadeUp 0.9s 0.35s forwards;
  }
  .hero h1 em { font-style: normal; color: var(--orange); }

  .hero-question {
    font-family: 'Sora', sans-serif;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 300; font-style: italic;
    color: var(--gray); line-height: 1.55; max-width: 500px;
    border-left: 2px solid var(--border-orange); padding-left: 24px;
    margin-bottom: 52px;
    opacity: 0; animation: fadeUp 0.8s 0.5s forwards;
  }

  .hero-actions {
    display: flex; align-items: center; gap: 28px;
    opacity: 0; animation: fadeUp 0.8s 0.65s forwards;
  }

  /* ─── PREMISE ─── */
  .premise {
    padding: 160px 56px;
    border-top: 1px solid var(--border);
  }
  .premise-row { align-items: center; }
  .premise-left {}
  .section-tag {
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 28px;
    display: flex; align-items: center; gap: 10px;
  }
  .section-tag::before { content: ''; width: 24px; height: 1px; background: var(--orange); }
  .premise-headline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(30px, 3.5vw, 50px);
    font-weight: 300; line-height: 1.15; letter-spacing: -0.02em;
    margin-bottom: 32px;
  }
  .premise-headline em { font-style: normal; color: var(--orange); }
  .premise-body { font-size: 14px; line-height: 1.9; color: var(--gray); }
  .premise-body p + p { margin-top: 20px; }
  .premise-body strong { color: var(--off-white); font-weight: 400; }

  /* Visual: before/after perception slider */
  .premise-right {}
  .perception-demo {
    border: 0;
    border-radius: 8px;
    background: transparent;
    overflow: visible;
    box-shadow: none;
  }
  .perception-label-row {
    display: grid; grid-template-columns: 1fr 1fr;
    background: transparent;
    margin-bottom: 12px;
  }
  .perception-label {
    padding: 0 18px 14px;
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  }
  .perception-label.before { color: #8a8a8a; border-right: 1px solid rgba(236,105,29,0.14); }
  .perception-label.after { color: var(--orange); }

  .perception-pair {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 8px 0;
    background: transparent;
    transition: transform 0.32s ease;
  }
  .perception-pair:last-child { border-bottom: none; }
  .perception-pair:hover { transform: translateX(8px); }
  .perception-cell {
    padding: 22px 24px; font-size: 13.5px; line-height: 1.5;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.32s ease, border-color 0.32s ease, background 0.32s ease, color 0.32s ease, font-weight 0.32s ease;
  }
  .perception-cell.before {
    color: #8a8a8a;
    background: rgba(255,255,255,0.025);
    font-style: italic;
  }
  .perception-cell.after {
    color: var(--off-white);
    background: rgba(236,105,29,0.07);
    border-color: rgba(236,105,29,0.22);
    box-shadow: inset 3px 0 0 rgba(236,105,29,0.75);
  }
  .perception-pair:hover .perception-cell.before {
    transform: translateX(-4px);
    color: #a0a0a0;
    border-color: rgba(255,255,255,0.16);
  }
  .perception-pair:hover .perception-cell.after {
    transform: translateX(4px);
    color: var(--orange);
    font-weight: 700;
    background: rgba(236,105,29,0.14);
    border-color: rgba(236,105,29,0.5);
  }

  /* ─── DISCIPLINES ─── */
  .section-disciplines {
    padding: 160px 56px;
    background: linear-gradient(180deg, transparent, rgba(236,105,29,0.015), transparent);
  }
  .section-disciplines--stacked {
    position: relative;
    isolation: isolate;
  }
  .section-disciplines .disciplines-header {
    align-items: start; margin-bottom: 80px;
  }
  .section-disciplines .disciplines-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(32px, 4.5vw, 60px);
    font-weight: 300; line-height: 1.05; letter-spacing: -0.02em;
    margin-bottom: 22px;
  }
  .section-disciplines .disciplines-title em { font-style: normal; color: var(--orange); }
  .section-disciplines .disciplines-intro {
    max-width: 42ch;
    font-size: 14px; line-height: 1.85; color: var(--gray);
  }
  .section-disciplines .expression-services {
    padding-top: 4px;
  }
  .section-disciplines .expression-services-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .section-disciplines .expression-services-list li {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 18px;
    align-items: baseline;
    padding: 13px 0;
    border-bottom: 1px solid rgba(34,34,42,0.1);
    color: #505050;
    font-size: 14px;
    line-height: 1.45;
  }
  .section-disciplines .expression-services-list li:first-child {
    border-top: 1px solid rgba(34,34,42,0.1);
  }
  .section-disciplines .expression-services-list span {
    color: rgba(236,105,29,0.72);
    font-family: 'Sora', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
  }

  /* Sticky overlapping discipline cards */
  .section-disciplines .disciplines-grid {
    display: block;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }
  .section-disciplines--stacked .disciplines-grid {
    padding-bottom: 160px;
  }
  .section-disciplines .disc-card {
    border: 0;
    border-radius: 8px;
    padding: 52px 56px;
    position: relative; overflow: hidden;
    position: sticky;
    top: 140px;
    min-height: 420px;
    margin-bottom: 32px;
    background: #ffffff;
    color: #202020;
    box-shadow: 0 28px 80px rgba(0,0,0,0.13);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: default;
  }
  .section-disciplines .disc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 34px 90px rgba(0,0,0,0.16);
  }
  .section-disciplines .disc-card.featured {
    background: #ffffff;
  }
  .section-disciplines .disc-card:nth-child(1) { z-index: 1; }
  .section-disciplines .disc-card:nth-child(2) { z-index: 2; }
  .section-disciplines .disc-card:nth-child(3) { z-index: 3; }
  .section-disciplines .disc-card:nth-child(4) { z-index: 4; }
  .section-disciplines .disc-card:nth-child(5) { z-index: 5; }
  .section-disciplines .disc-num {
    font-family: 'Sora', sans-serif;
    font-size: 52px; font-weight: 300;
    color: rgba(236,105,29,0.18); line-height: 1; margin-bottom: 28px;
  }
  .section-disciplines .disc-label {
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
  }
  .section-disciplines .disc-label::before { content: ''; width: 16px; height: 1px; background: var(--orange); }
  .section-disciplines .disc-name {
    font-family: 'Sora', sans-serif;
    font-size: 26px; font-weight: 400;
    margin-bottom: 16px; line-height: 1.2;
    color: #202020;
  }
  .section-disciplines .disc-desc { font-size: 13.5px; line-height: 1.75; color: #5f5f5f; }

  /* Detail tag list */
  .section-disciplines .disc-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
  .section-disciplines .disc-tag {
    font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    color: #606060; border: 1px solid rgba(236,105,29,0.16);
    padding: 5px 12px; transition: border-color 0.2s, color 0.2s;
  }
  .section-disciplines .disc-card:hover .disc-tag { border-color: rgba(236,105,29,0.2); color: rgba(236,105,29,0.7); }

  /* ─── CREATIVE PROCESS ─── */
  .creative-process {
    padding: 160px 56px;
    border-top: 1px solid var(--border);
  }
  .cp-header { margin-bottom: 80px; }
  .cp-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 300; line-height: 1.1; letter-spacing: -0.02em;
  }
  .cp-title em { font-style: normal; color: var(--orange); }
  .cp-subtitle {
    font-size: 14px; color: var(--gray); line-height: 1.75;
    margin-top: 20px; max-width: 520px;
  }

  /* Horizontal process track */
  .cp-track {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: relative; margin-top: 80px;
  }
  .cp-track::before {
    content: '';
    position: absolute; top: 20px; left: 20px; right: 20px; height: 1px;
    background: linear-gradient(90deg, var(--orange), rgba(236,105,29,0.15));
    z-index: 0;
  }
  .cp-step {
    padding: 0 20px; padding-top: 60px; position: relative;
  }
  .cp-dot {
    position: absolute; top: 13px; left: 20px;
    width: 16px; height: 16px;
    border: 2px solid var(--orange); border-radius: 50%;
    background: var(--black);
    box-shadow: 0 0 10px rgba(236,105,29,0.25);
    z-index: 1;
    transition: background 0.3s, box-shadow 0.3s;
  }
  .cp-step:hover .cp-dot {
    background: var(--orange);
    box-shadow: 0 0 20px rgba(236,105,29,0.5);
  }
  .cp-num {
    font-family: 'Sora', sans-serif;
    font-size: 11px; letter-spacing: 0.15em; color: var(--orange);
    margin-bottom: 10px; opacity: 0.6;
  }
  .cp-name {
    font-size: 14px; font-weight: 400; color: var(--off-white);
    margin-bottom: 10px; line-height: 1.3;
  }
  .cp-desc { font-size: 12.5px; line-height: 1.65; color: var(--gray); }

  /* ─── PROOF STRIP ─── */
  .proof-strip {
    padding: 100px 56px;
    border-top: 0;
    background: linear-gradient(135deg, #fff3eb 0%, #f6f6f6 62%, #eef2f8 100%);
  }
  .proof-headline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 300; line-height: 1.2; letter-spacing: -0.02em;
  }
  .proof-headline em { font-style: normal; color: var(--orange); }

  .proof-quotes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
  .proof-quote {
    padding: 32px 36px;
    border: 0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 58px rgba(0,0,0,0.08);
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .proof-quote:hover { transform: translateY(-4px); box-shadow: 0 24px 70px rgba(0,0,0,0.12); }
  .proof-quote-text {
    font-family: 'Sora', sans-serif;
    font-size: 18px; font-weight: 300; font-style: italic;
    line-height: 1.6; color: #202020; margin-bottom: 16px;
  }
  .proof-quote-author {
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray);
  }
  .proof-quote-author span { color: var(--orange); display: block; margin-bottom: 2px; font-weight: 500; }

  /* ─── NOT FOR ─── */
  .not-for {
    padding: 120px 56px;
    border-top: 0;
    background: #151515;
  }
  .not-for-headline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 300; line-height: 1.2; letter-spacing: -0.02em;
  }
  .not-for-headline { color: #ffffff; }
  .not-for-headline em { font-style: normal; color: var(--orange); }
  .not-for-body { font-size: 14px; line-height: 1.85; color: #d6d6d6; margin-top: 24px; }
  .not-for-list { display: flex; flex-direction: column; gap: 12px; }
  .nf-item {
    display: flex; align-items: baseline; gap: 16px; padding: 18px 24px;
    border: 0;
    border-radius: 8px;
    background: rgba(255,255,255,0.07);
    font-size: 13.5px; color: #d6d6d6; line-height: 1.5;
  }
  .nf-item::before { content: '×'; color: var(--gray-mid); font-size: 16px; flex-shrink: 0; }

  /* ─── CTA ─── */
  .expr-cta {
    padding: 160px 56px;
    border-top: 1px solid var(--border);
  }
  .cta-headline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(36px, 5vw, 72px);
    font-weight: 300; line-height: 1.05; letter-spacing: -0.025em;
  }
  .cta-headline em { font-style: normal; color: var(--orange); }
  .cta-body { font-size: 15px; line-height: 1.85; color: var(--gray); margin-bottom: 48px; max-width: 420px; }
  .cta-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

  /* Prev/Next nav */
  .page-nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    margin: 0 56px;
  }
  .page-nav-item {
    padding: 36px 48px;
    border: 1px solid var(--border);
    text-decoration: none; display: flex; align-items: center;
    transition: border-color 0.3s, background 0.3s;
    gap: 20px;
  }
  .page-nav-item:hover { border-color: var(--border-orange); background: rgba(236,105,29,0.02); }
  .page-nav-item.prev { justify-content: flex-start; }
  .page-nav-item.next { justify-content: flex-end; text-align: right; }
  .pn-dir { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); margin-bottom: 6px; }
  .pn-title { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 300; color: var(--off-white); }
  .pn-arrow { font-size: 24px; color: var(--orange); transition: transform 0.2s; flex-shrink: 0; }
  .page-nav-item.prev:hover .pn-arrow { transform: translateX(-4px); }
  .page-nav-item.next:hover .pn-arrow { transform: translate(4px, -4px); }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  .reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.25,0.46,0.45,0.94),
                transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
  }
  .reveal.visible { opacity: 1; transform: none; }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }

  /* ===== umbraco-component-roots ===== */
  .section-proof-strip {
    grid-column: 1 / -1;
    width: 100%;
    border-top: 1px solid var(--border);
  }

  .section-proof-strip .proof-row {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .section-proof-strip .proof-item {
    height: 100%;
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .section-proof-strip .proof-num {
    font-family: 'Sora', sans-serif;
    font-size: 52px;
    font-weight: 300;
    color: var(--orange);
    line-height: 1;
  }

  .section-proof-strip .proof-label {
    font-size: 12px;
    line-height: 1.6;
    color: var(--gray);
    max-width: 180px;
  }

  .section-proof-strip--contact {
    width: 100% !important;
    padding-left: 56px !important;
    padding-right: 56px !important;
    border-top: 1px solid rgba(236, 105, 29, 0.1) !important;
  }

  .section-proof-strip--contact > .container-fluid {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .section-proof-strip--contact .proof-item {
    border: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }

  .section-faq {
    grid-column: 1 / -1;
    width: 100%;
    padding: 120px 56px;
    border-top: 1px solid var(--border);
  }

  .section-faq .faq-row {
    align-items: start;
  }

  .section-faq .faq-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.02em;
    position: sticky;
    top: 120px;
  }

  .section-faq .faq-title em {
    font-style: italic;
    color: var(--orange);
  }

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

  .section-faq .faq-item {
    border-top: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s;
  }

  .section-faq .faq-item:last-child {
    border-bottom: 1px solid var(--border);
  }

  .section-faq .faq-item.open {
    background: rgba(236, 105, 29, 0.015);
  }

  .section-faq .faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 24px 0;
  }

  .section-faq .faq-q-text {
    font-size: 15px;
    font-weight: 400;
    color: var(--off-white);
    line-height: 1.4;
    transition: color 0.2s;
  }

  .section-faq .faq-item.open .faq-q-text {
    color: var(--orange);
  }

  .section-faq .faq-toggle {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--gray);
    transition: transform 0.3s, border-color 0.2s, color 0.2s;
  }

  .section-faq .faq-item.open .faq-toggle {
    transform: rotate(45deg);
    border-color: var(--orange);
    color: var(--orange);
  }

  .section-faq .faq-answer {
    font-size: 14px;
    line-height: 1.85;
    color: var(--gray);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s cubic-bezier(.25,.46,.45,.94), opacity 0.35s, padding 0.3s;
    padding-bottom: 0;
  }

  .section-faq .faq-answer strong {
    color: var(--off-white);
    font-weight: 400;
  }

  .section-faq .faq-item.open .faq-answer {
    max-height: 300px;
    opacity: 1;
    padding-bottom: 28px;
  }

  .section-faq--contact {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    clear: both !important;
    width: 100% !important;
  }

  .section-faq--contact > .container-fluid {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .section-faq--contact .faq-row {
    display: grid !important;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.6fr) !important;
    gap: clamp(48px, 7vw, 100px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .section-faq--contact .faq-row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .section-faq--contact .faq-list {
    min-width: 0;
    padding-right: 56px !important;
  }

  .section-editorial-cta {
    width: 100%;
  }

  .section-editorial-cta .cta-headline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(36px, 5vw, 72px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.025em;
  }

  .section-editorial-cta .cta-headline em {
    font-style: normal;
    color: var(--orange);
  }

  .section-editorial-cta .cta-body {
    font-size: 15px;
    line-height: 1.85;
    color: var(--gray);
    margin-bottom: 40px;
    max-width: 420px;
  }

  .section-editorial-cta .cta-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
  }

  .section-editorial-cta--origin {
    padding: 88px 0 0;
  }

  .section-editorial-cta--origin .cta-body {
    margin-bottom: 24px;
  }

  .section-editorial-cta--origin .cta-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .section-editorial-cta--expression {
    padding: 120px 56px;
  }

  .section-editorial-cta--traction {
    padding: 96px 56px 160px;
    border-top: 0;
  }

  .section-editorial-cta--cases {
    padding: 120px 56px;
    border-top: 1px solid var(--border);
    display: block;
  }

  .section-editorial-cta--cases .cta-actions {
    gap: 14px;
    align-items: stretch;
  }

  .section-editorial-cta--about .cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: flex-end;
  }

  .section-editorial-cta--compact {
    padding-top: 84px;
    padding-bottom: 84px;
  }

  @media (min-width: 720px) {
    .section-editorial-cta--origin .cta-actions {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 18px;
    }
  }

  @media (min-width: 980px) {
    .section-editorial-cta--origin {
      padding: 128px 0 0;
    }
  }

  @media (max-width: 980px) {
    .section-faq--contact .faq-title {
      max-width: 100%;
      position: relative !important;
      top: auto !important;
    }

    .section-faq--contact .faq-row {
      grid-template-columns: 1fr !important;
      gap: 32px !important;
      width: 100% !important;
      min-width: 0 !important;
    }

    .section-faq--contact .faq-list {
      padding-right: 0 !important;
    }

    .section-proof-strip--contact {
      padding-left: 24px !important;
      padding-right: 24px !important;
    }
  }

  @media (max-width: 760px) {
    .section-proof-strip--contact,
    .section-faq--contact {
      width: 100dvw !important;
      max-width: 100dvw !important;
      overflow-x: clip !important;
    }

    .section-proof-strip--contact > .container-fluid,
    .section-faq--contact > .container-fluid {
      width: min(100%, calc(100dvw - 40px)) !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .section-faq {
      padding: 72px 24px !important;
    }

    .section-editorial-cta .cta-actions {
      width: 100%;
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
    }

    .section-editorial-cta .cta-actions > * {
      width: 100%;
      justify-content: center;
    }

    .section-editorial-cta--about .cta-actions {
      justify-content: flex-start;
    }
  }


/* ===== homepage-mobile-nav-readability-final ===== */
@media (max-width: 980px) {
  body.page--homepage.nav-locked #nav,
  body.page--homepage.nav-locked #nav.scrolled,
  body.page--homepage #nav.nav-open,
  body.page--homepage #nav.nav-open.scrolled {
    background: #fffaf5 !important;
    color: #1f1f1f !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.page--homepage #nav.nav-open .nav-menu-stack,
  body.page--homepage.nav-locked #nav .nav-menu-stack {
    background: #fffaf5 !important;
    color: #1f1f1f !important;
    opacity: 1 !important;
    z-index: 10000 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.page--homepage #nav.nav-open .nav-links,
  body.page--homepage #nav.nav-open .top-nav,
  body.page--homepage.nav-locked #nav .nav-links,
  body.page--homepage.nav-locked #nav .top-nav,
  body.page--homepage #nav.nav-open .nav-links li,
  body.page--homepage #nav.nav-open .top-nav li {
    background: #fffaf5 !important;
    color: #1f1f1f !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  body.page--homepage #nav.nav-open .nav-links a,
  body.page--homepage.nav-locked #nav .nav-links a {
    color: #1f1f1f !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-bottom: 1px solid rgba(236, 105, 29, 0.25) !important;
    text-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  body.page--homepage #nav.nav-open .top-nav a,
  body.page--homepage.nav-locked #nav .top-nav a {
    color: #2a2a2a !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  body.page--homepage #nav.nav-open .top-nav,
  body.page--homepage.nav-locked #nav .top-nav {
    border-top: 0px solid rgba(236, 105, 29, 0.25) !important;
  }

  body.page--homepage #nav.nav-open .nav-cta,
  body.page--homepage.nav-locked #nav .nav-cta {
    color: #1f1f1f !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.page--homepage #nav.nav-open .nav-toggle,
  body.page--homepage.nav-locked #nav .nav-toggle {
    background: transparent !important;
    opacity: 1 !important;
    z-index: 10001 !important;
  }

  body.page--homepage #nav.nav-open .nav-toggle span,
  body.page--homepage.nav-locked #nav .nav-toggle span {
    background: #1f1f1f !important;
    opacity: 1 !important;
  }

  body.page--homepage .nav-backdrop,
  body.page--homepage .nav-backdrop.is-visible {
    z-index: 9998 !important;
  }
}

/* ===== light-hero-strategia-comunicazione ===== */
.page--origin .hero,
.page--expression .hero {
  background: linear-gradient(180deg, #ffffff 0%, #f7f4ef 58%, #f1ece5 100%) !important;
}

.page--origin .hero-bg {
  background:
    radial-gradient(circle at 0% 0%, rgba(236, 105, 29, 0.24), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 246, 246, 0.88) 56%, rgba(179, 187, 221, 0.22) 100%) !important;
}

.page--expression .hero-bg {
  background:
    radial-gradient(circle at 78% 20%, rgba(236, 105, 29, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 244, 239, 0.96) 54%, rgba(241, 236, 229, 0.92) 100%) !important;
}

.section-page-hero--expression .hero-breadcrumb a:hover {
  color: #22222a !important;
}

.section-page-hero--expression .hero h1,
.section-page-hero--expression .hero-question,
.section-page-hero--expression .hero-breadcrumb,
.section-page-hero--expression .hero-breadcrumb a,
.section-page-hero--expression .hero-breadcrumb .sep {
  color: #22222a;
}

.section-page-hero--expression .hero-breadcrumb .current,
.section-page-hero--expression .hero h1 em,
.section-page-hero--expression .hero-eyebrow {
  color: var(--orange);
}

.section-page-hero--expression .hero-question {
  border-left-color: rgba(236, 105, 29, 0.72);
}

/* ===== strategy-expression-hero-like-traction ===== */
.section-page-hero--origin,
.section-page-hero--expression {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%) !important;
}

.section-page-hero--expression {
  background: linear-gradient(180deg, #ffffff 0%, #f7f4ef 58%, #f1ece5 100%) !important;
}

.section-page-hero--origin::before,
.section-page-hero--expression::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(236, 105, 29, 0.2), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(90, 129, 193, 0.12), transparent 22%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 246, 246, 0.86) 62%, rgba(179, 187, 221, 0.14) 100%);
  pointer-events: none;
  z-index: 0;
}

.section-page-hero--origin .hero-bg,
.section-page-hero--expression .hero-bg {
  background: transparent !important;
}

.section-page-hero--origin .hero-left,
.section-page-hero--origin .hero-right,
.section-page-hero--expression .hero-content,
.section-page-hero--expression .hero-right {
  position: relative;
  z-index: 2;
}

.section-page-hero--origin .hero h1,
.section-page-hero--expression .hero h1 {
  color: var(--off-white) !important;
}

.section-page-hero--origin .hero h1 em,
.section-page-hero--expression .hero h1 em {
  color: var(--orange) !important;
}

.section-page-hero--origin .hero-question,
.section-page-hero--expression .hero-question {
  color: #5d5d5d !important;
  border-left-color: rgba(236, 105, 29, 0.72) !important;
}

.section-page-hero--origin .hero-breadcrumb,
.section-page-hero--expression .hero-breadcrumb,
.section-page-hero--origin .hero-eyebrow,
.section-page-hero--expression .hero-eyebrow,
.section-page-hero--expression .expression-hero-label {
  color: var(--orange) !important;
}

.section-page-hero--origin .hero-breadcrumb a,
.section-page-hero--expression .hero-breadcrumb a {
  color: #7a7a7a !important;
}

.section-page-hero--origin .hero-breadcrumb a:hover,
.section-page-hero--expression .hero-breadcrumb a:hover {
  color: var(--off-white) !important;
}

.section-page-hero--origin .hero-breadcrumb .sep,
.section-page-hero--expression .hero-breadcrumb .sep {
  color: #a3a3a3 !important;
}

.section-page-hero--origin .hero-breadcrumb .current,
.section-page-hero--expression .hero-breadcrumb .current {
  color: var(--orange) !important;
}

.page--expression .hero-ink {
  opacity: 0.42;
}

.page--expression #main-content,
.page--expression main {
  background: transparent !important;
}

.page--expression .premise-body,
.page--expression .premise-body p,
.page--expression .premise-body li,
.page--expression .premise-body strong,
.page--expression .premise-body ul,
.page--expression .premise-body ol {
  color: #5f5f5f !important;
}

.page--expression .not-for-body {
  color: rgba(255, 255, 255, 0.82) !important;
  line-height: 1.65 !important;
}

.page--expression .nf-item {
  color: rgba(255, 255, 255, 0.80) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
}

.page--expression .nf-item::before {
  color: rgba(255, 255, 255, 0.55) !important;
}

.page--traction .not-for-body {
  color: rgba(255, 255, 255, 0.82) !important;
  line-height: 1.65 !important;
}

.page--traction .nf-item {
  color: rgba(255, 255, 255, 0.80) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
}

.page--traction .nf-item::before {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ===== strategy-hero-top-left-cleanup ===== */
.page--origin .hero::before {
  background:
    radial-gradient(circle at 8% 10%, rgba(236, 105, 29, 0.10) 0%, rgba(236, 105, 29, 0.04) 22%, rgba(236, 105, 29, 0) 42%),
    radial-gradient(circle at 82% 42%, rgba(210, 220, 232, 0.30) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(90deg, #fffaf5 0%, #ffffff 45%, #f7f9fb 100%) !important;
  box-shadow: none !important;
  filter: none !important;
}

.page--origin .hero,
.page--origin .hero-bg,
.page--origin #nav,
.page--origin .brandmark,
.page--origin .brandmark img {
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

.page--expression .service-parallax-break,
.page--traction .service-parallax-break {
  position: relative;
  --blur-left: 12%;
  --blur-top: 70%;
  width: 100%;
  height: clamp(260px, 30vw, 430px);
  background-image: url("../img/parallax-strategia.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
  z-index: 1;
}

.page--expression .service-orange-blur,
.page--traction .service-orange-blur {
  position: absolute;
  left: var(--blur-left);
  top: var(--blur-top);
  width: clamp(360px, 42vw, 720px);
  aspect-ratio: 1 / 1;
  background-image: url("../img/blurred-orange.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 3;
  opacity: 0.78;
  will-change: left, top, transform;
  transform: translate3d(-50%, -50%, 0) rotate(-8deg);
  transition: left 0.35s ease-out, top 0.35s ease-out, transform 0.35s ease-out;
  filter: blur(28px);
}

.page--expression .premise,
.page--traction .premise {
  position: relative;
  z-index: 2;
}

/* ===== vti-cesare-phone ===== */
@media (max-width: 768px) {
  .page--vti .diagram-flow {
    overflow: hidden;
    padding-right: 0;
  }

  .page--vti .cesare-iphone-float {
    position: relative;
    right: auto;
    top: auto;
    display: block;
    width: min(78vw, 300px);
    height: auto;
    margin: 32px auto 0;
    transform: none;
    animation: cesarePhoneFloatMobile 5.5s ease-in-out infinite;
  }
}

@keyframes cesarePhoneFloatMobile {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

@media (hover: none) {
  .page--origin .strategy-orange-blur {
    left: -20vw;
    top: 75%;
    transform: translate3d(-50%, -50%, 0) rotate(-8deg);
  }

  .page--expression .service-orange-blur,
  .page--traction .service-orange-blur {
    left: -20vw;
    top: 75%;
    transform: translate3d(-50%, -50%, 0) rotate(-8deg);
  }
}

@media (max-width: 1024px) {
  .page--expression .service-parallax-break,
  .page--traction .service-parallax-break {
    background-position: center center;
  }

  .page--expression .service-orange-blur,
  .page--traction .service-orange-blur {
    left: -10vw;
    top: 74%;
    width: clamp(320px, 48vw, 560px);
    opacity: 0.74;
    transform: translate3d(-50%, -50%, 0) rotate(-8deg);
  }
}

@media (max-width: 768px) {
  .page--expression .service-parallax-break,
  .page--traction .service-parallax-break {
    height: 260px;
    background-attachment: scroll;
    background-position: center center;
  }

  .page--expression .service-orange-blur,
  .page--traction .service-orange-blur {
    left: -28vw;
    top: 76%;
    width: 90vw;
    opacity: 0.72;
    transform: translate3d(-50%, -50%, 0) rotate(-8deg);
  }

  .page--origin .strategy-orange-blur {
    transform: rotate(-8deg);
  }
}
/* ===== mobile-nav-refinement-terminal ===== */
@media (max-width: 980px) {
  #nav,
  #nav.scrolled,
  .nav-menu-stack,
  .nav-links,
  .top-nav {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #nav,
  #nav.scrolled {
    padding: 16px 24px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fffdfa !important;
    border-bottom: 1px solid rgba(232, 128, 26, 0.10) !important;
    overflow: hidden;
  }

  .nav-backdrop {
    background: rgba(18, 18, 18, 0.22) !important;
  }

  .nav-logo {
    max-width: calc(100% - 52px);
  }

  .nav-toggle,
  .nav-open .nav-toggle {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: rgba(255, 250, 245, 0.96) !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .nav-toggle span {
    width: 18px !important;
    height: 1px !important;
    background: #383838 !important;
  }

  .nav-open .nav-menu-stack {
    max-height: calc(100dvh - 84px) !important;
    margin-top: 10px !important;
    padding-top: 8px !important;
    padding-right: 0 !important;
    border-top: 0 !important;
    background: #fffdfa !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
  }

  .nav-open .nav-links,
  .nav-open .top-nav {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .nav-open .nav-links {
    order: 1;
    margin-bottom: 18px !important;
  }

  .nav-open .nav-links li,
  .nav-open .top-nav li {
    width: 100%;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .nav-open .nav-links a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    min-height: 56px !important;
    padding: 22px 0 !important;
    font-family: 'Epilogue', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: #242424 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(232, 128, 26, 0.22) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    white-space: normal;
  }

  .nav-open .nav-links a::before,
  .nav-open .nav-links a::after,
  .nav-open .top-nav a::before,
  .nav-open .top-nav a::after {
    display: none !important;
    content: none !important;
  }

  .nav-open .nav-links a.active,
  .nav-open .nav-links a[aria-current="page"] {
    color: var(--orange) !important;
  }

  .nav-open .top-nav {
    order: 2;
    gap: 0 !important;
    margin-top: 0 !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(232, 128, 26, 0.16) !important;
  }

  .nav-open .top-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 40px !important;
    padding: 12px 0 !important;
    font-family: 'Epilogue', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    color: #5b5b5b !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    white-space: normal;
  }

  .nav-open .top-nav a.active,
  .nav-open .top-nav a[aria-current="page"] {
    color: var(--orange) !important;
  }
}

/* ===== mobile-nav-refinement-final ===== */
@media (max-width: 980px) {
  #nav,
  #nav.scrolled,
  .nav-menu-stack,
  .nav-links,
  .top-nav {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #nav,
  #nav.scrolled {
    padding: 16px 24px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fffdfa !important;
    border-bottom: 1px solid rgba(232, 128, 26, 0.10) !important;
    overflow: hidden;
  }

  .nav-backdrop {
    background: rgba(18, 18, 18, 0.22) !important;
  }

  .nav-logo {
    max-width: calc(100% - 52px);
  }

  .nav-toggle,
  .nav-open .nav-toggle {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: rgba(255, 250, 245, 0.96) !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .nav-toggle span {
    width: 18px !important;
    height: 1px !important;
    background: #383838 !important;
  }

  .nav-open .nav-menu-stack {
    max-height: calc(100dvh - 84px) !important;
    margin-top: 10px !important;
    padding-top: 8px !important;
    padding-right: 0 !important;
    border-top: 0 !important;
    background: #fffdfa !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
  }

  .nav-open .nav-links,
  .nav-open .top-nav {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .nav-open .nav-links {
    order: 1;
    margin-bottom: 18px !important;
  }

  .nav-open .nav-links li,
  .nav-open .top-nav li {
    width: 100%;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .nav-open .nav-links a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    min-height: 56px !important;
    padding: 22px 0 !important;
    font-family: 'Epilogue', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: #242424 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(232, 128, 26, 0.22) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    white-space: normal;
  }

  .nav-open .nav-links a::before,
  .nav-open .nav-links a::after,
  .nav-open .top-nav a::before,
  .nav-open .top-nav a::after {
    display: none !important;
    content: none !important;
  }

  .nav-open .nav-links a.active,
  .nav-open .nav-links a[aria-current="page"] {
    color: var(--orange) !important;
  }

  .nav-open .top-nav {
    order: 2;
    gap: 0 !important;
    margin-top: 0 !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(232, 128, 26, 0.16) !important;
  }

  .nav-open .top-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 40px !important;
    padding: 12px 0 !important;
    font-family: 'Epilogue', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    color: #5b5b5b !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    white-space: normal;
  }

  .nav-open .top-nav a.active,
  .nav-open .top-nav a[aria-current="page"] {
    color: var(--orange) !important;
  }
}

/* ===== mobile-nav-refinement ===== */
@media (max-width: 980px) {
  #nav,
  #nav.scrolled,
  .nav-menu-stack,
  .nav-links,
  .top-nav {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #nav,
  #nav.scrolled {
    padding: 16px 24px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fffdfa !important;
    border-bottom: 1px solid rgba(232, 128, 26, 0.10) !important;
    overflow: hidden;
  }

  .nav-backdrop {
    background: rgba(18, 18, 18, 0.22) !important;
  }

  .nav-logo {
    max-width: calc(100% - 52px);
  }

  .nav-toggle,
  .nav-open .nav-toggle {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: rgba(255, 250, 245, 0.96) !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .nav-toggle span {
    width: 18px !important;
    height: 1px !important;
    background: #383838 !important;
  }

  .nav-open .nav-menu-stack {
    max-height: calc(100dvh - 84px) !important;
    margin-top: 10px !important;
    padding-top: 8px !important;
    padding-right: 0 !important;
    border-top: 0 !important;
    background: #fffdfa !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
  }

  .nav-open .nav-links,
  .nav-open .top-nav {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .nav-open .nav-links {
    order: 1;
    margin-bottom: 18px !important;
  }

  .nav-open .nav-links li,
  .nav-open .top-nav li {
    width: 100%;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .nav-open .nav-links a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    min-height: 56px !important;
    padding: 22px 0 !important;
    font-family: 'Epilogue', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: #242424 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(232, 128, 26, 0.22) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    white-space: normal;
  }

  .nav-open .nav-links a::before,
  .nav-open .nav-links a::after,
  .nav-open .top-nav a::before,
  .nav-open .top-nav a::after {
    display: none !important;
    content: none !important;
  }

  .nav-open .nav-links a.active,
  .nav-open .nav-links a[aria-current="page"] {
    color: var(--orange) !important;
  }

  .nav-open .top-nav {
    order: 2;
    gap: 0 !important;
    margin-top: 0 !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(232, 128, 26, 0.16) !important;
  }

  .nav-open .top-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 40px !important;
    padding: 12px 0 !important;
    font-family: 'Epilogue', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    color: #5b5b5b !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    white-space: normal;
  }

  .nav-open .top-nav a.active,
  .nav-open .top-nav a[aria-current="page"] {
    color: var(--orange) !important;
  }
}

/* ===== homepage-hero-final ===== */
.page--homepage .hero {
  position: relative !important;
  overflow: hidden !important;
  --spotlight-x: 70%;
  --spotlight-y: 45%;
  --spotlight-size: 240px;
  min-height: 800px !important;
  background-color: #050505 !important;
  background-image: url("../img/sfondo-home.jpg") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: 60% center !important;
}

.page--homepage .hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(
    circle var(--spotlight-size) at var(--spotlight-x) var(--spotlight-y),
    rgba(0, 0, 0, 0.10) 0%,
    rgba(0, 0, 0, 0.28) 28%,
    rgba(0, 0, 0, 0.62) 55%,
    rgba(0, 0, 0, 0.90) 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  transition: background 0.08s linear !important;
}

.page--homepage .hero-layout,
.page--homepage .hero-layout > .row {
  position: relative !important;
  min-height: 800px !important;
}

.page--homepage .hero-layout {
  max-width: 1640px !important;
  margin: 0 auto !important;
  padding-left: 52px !important;
  padding-right: 52px !important;
}

.page--homepage .hero-left {
  position: relative !important;
  z-index: 2 !important;
  width: 42% !important;
  max-width: 700px !important;
  padding: 64px 0 88px 34px !important;
  justify-content: flex-start !important;
}

.page--homepage .hero-right,
.page--homepage .hero-visual,
.page--homepage .hero-image,
.page--homepage .hero-spotlight,
.page--homepage .hero-grid,
.page--homepage .hero-circle,
.page--homepage .hero-circle-2,
.page--homepage .hero-tagline-vertical,
.page--homepage .hero-number {
  display: none !important;
}

.page--homepage .hero-headline,
.page--homepage .hero-sub,
.page--homepage .hero-eyebrow,
.page--homepage .hero-actions {
  position: relative !important;
  z-index: 2 !important;
}

.page--homepage .hero-eyebrow {
  margin-bottom: 22px !important;
}

.page--homepage .hero-headline {
  color: #f5efe8 !important;
  font-size: clamp(72px, 6vw, 100px) !important;
  font-weight: 800 !important;
  line-height: 0.94 !important;
  letter-spacing: -0.04em !important;
  max-width: 7.2ch !important;
  margin-bottom: 54px !important;
}

.page--homepage .hero-headline em {
  font-style: normal !important;
  color: var(--orange) !important;
}

.page--homepage .hero-sub {
  color: rgba(245, 239, 232, 0.82) !important;
  max-width: 470px !important;
  margin-bottom: 58px !important;
  padding-left: 24px !important;
  border-left: 2px solid rgba(236, 105, 29, 0.9) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
}

.page--homepage .hero-actions {
  gap: 18px !important;
  align-items: center !important;
}

.page--homepage .hero-actions .btn-primary {
  min-width: 144px !important;
  min-height: 48px !important;
  padding: 14px 28px !important;
  background: transparent !important;
  color: var(--orange) !important;
  border: 1px solid rgba(236, 105, 29, 0.9) !important;
  box-shadow: none !important;
}

.page--homepage .hero-actions .btn-ghost,
.page--homepage .hero-actions .btn-ghost-nav {
  min-height: 48px !important;
  padding: 14px 0 !important;
  color: #808080 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  letter-spacing: 0.18em !important;
}

@media (max-width: 980px) {
  .page--homepage .hero,
  .page--homepage .hero-layout,
  .page--homepage .hero-layout > .row {
    min-height: 720px !important;
  }

  .page--homepage .hero {
    background-position: 62% center !important;
  }

  .page--homepage .hero::before {
    background: radial-gradient(
      circle 180px at 62% 40%,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.38) 30%,
      rgba(0, 0, 0, 0.72) 58%,
      rgba(0, 0, 0, 0.86) 100%
    ) !important;
  }

  .page--homepage .hero-layout {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .page--homepage .hero-left {
    width: min(100%, 520px) !important;
    max-width: none !important;
    padding: 44px 0 44px !important;
  }

  .page--homepage .hero-headline {
    font-size: clamp(54px, 8.8vw, 76px) !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .page--homepage .hero::before {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.78) 45%,
      rgba(0, 0, 0, 0.62) 100%
    ) !important;
  }
}

@media (max-width: 720px) {
  .page--homepage .hero,
  .page--homepage .hero-layout,
  .page--homepage .hero-layout > .row {
    min-height: 640px !important;
  }

  .page--homepage .hero {
    background-position: 68% center !important;
  }

  .page--homepage .hero-layout {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .page--homepage .hero-left {
    width: 100% !important;
    padding: 24px 0 28px !important;
  }

  .page--homepage .hero-headline {
    font-size: clamp(40px, 11vw, 56px) !important;
    max-width: 7.8ch !important;
    margin-bottom: 28px !important;
  }

  .page--homepage .hero-sub {
    font-size: 18px !important;
    line-height: 1.55 !important;
    padding-left: 18px !important;
    margin-bottom: 28px !important;
    max-width: 320px !important;
  }

  .page--homepage .hero-actions {
    gap: 12px !important;
    flex-wrap: wrap !important;
  }
}

/* ===== mobile-overflow-fix ===== */
@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  main,
  section,
  header,
  footer {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
    height: auto;
  }

  .page--homepage,
  .page--homepage #nav,
  .page--homepage .hero,
  .page--homepage .hero-layout,
  .page--homepage .hero-layout > .row,
  .page--homepage .hero-left,
  .page--homepage .hero-ticker,
  .page--homepage .clients-strip,
  .page--homepage .clients-lane,
  .page--homepage .showreel-shell,
  .page--homepage .showreel-window,
  .page--homepage .ai-banner,
  .page--homepage .footer-home {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .page--homepage #nav {
    left: 0 !important;
    right: 0 !important;
    overflow: hidden !important;
  }

  .page--homepage .hero,
  .page--homepage .hero-layout,
  .page--homepage .hero-left {
    overflow: hidden !important;
  }

  .page--homepage .hero-layout {
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .page--homepage .hero-ticker,
  .page--homepage .clients-strip,
  .page--homepage .clients-lane,
  .page--homepage .showreel-shell,
  .page--homepage .ai-banner {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .page--homepage .hero-ticker,
  .page--homepage .clients-strip,
  .page--homepage .clients-lane {
    overflow: hidden !important;
  }

  .page--homepage .hero-ticker-track,
  .page--homepage .clients-track {
    width: max-content;
    min-width: 100%;
  }

  .page--homepage .showreel-shell {
    margin-bottom: -46px !important;
  }

  .page--homepage .ai-banner {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* ===== site-wide-ux-refresh ===== */
html {
  scroll-padding-top: 112px;
}

@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}

body {
  text-rendering: optimizeLegibility;
}

.skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 999;
  padding: 12px 16px;
  border-radius: 999px;
  background: #fffaf5;
  color: #111;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(236, 105, 29, 0.3);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
  transform: translateY(-140%);
  transition: transform 0.2s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.page main > section,
.page .page-wrap > * {
  scroll-margin-top: 116px;
}

.page :is(
  .hero-sub,
  .hero-question,
  .form-intro-text,
  .manifesto-body,
  .article-body,
  .case-article-body,
  .seo-article-content,
  .seo-article-content--wide,
  .vti-hero-sub,
  .vti-hero-summary,
  .left-statement,
  .faq-answer,
  .post-excerpt,
  .card-excerpt,
  .contact-body
) {
  text-wrap: pretty;
}

.page :is(.article-body, .case-article-body, .seo-article-content, .seo-article-content--wide) {
  max-width: 72ch;
}

.page :is(.article-body, .case-article-body, .seo-article-content, .seo-article-content--wide) > :is(p, h2, h3, ul, ol, blockquote, figure) {
  max-width: 100%;
}

.page :is(.article-body, .case-article-body, .seo-article-content, .seo-article-content--wide) :is(img, video, iframe) {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 24px;
  overflow: hidden;
}

.page :is(.post-card, .case-card, .proof-item, .faq-item, .step, .path-pill, .elements-showcase-card, .testimonial, .page-nav-item) {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .page :is(.post-card, .case-card, .proof-item, .faq-item, .path-pill, .elements-showcase-card, .page-nav-item):hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.14);
  }
}

.page :is(.post-card, .case-card, .proof-item, .faq-item, .step, .path-pill, .elements-showcase-card, .testimonial, .page-nav-item):focus-within {
  box-shadow: 0 0 0 1px rgba(236, 105, 29, 0.26), 0 18px 42px rgba(0, 0, 0, 0.14);
}

#nav,
#nav.scrolled {
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    padding 0.25s ease;
}

#nav.scrolled {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
}

.hero-actions,
.contact-action,
.footer-newsletter-fields,
.form-bottom {
  row-gap: 12px;
}

.footer-newsletter-input,
.footer-newsletter-submit,
.btn-submit,
.btn-primary,
.btn-ghost,
.nav-cta {
  min-height: 48px;
}

.footer-newsletter-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(125, 125, 125, 0.86);
}

@media (max-width: 980px) {
  .nav-open .nav-menu-stack {
    width: 100%;
    padding: 14px 16px 18px;
    background: linear-gradient(180deg, rgba(255, 250, 245, 0.98), rgba(255, 247, 240, 0.96));
    border: 1px solid rgba(236, 105, 29, 0.12);
    border-radius: 24px;
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.12);
  }

  .nav-open .top-nav,
  .nav-open .nav-links {
    width: 100%;
  }

  .nav-open .top-nav a,
  .nav-open .nav-links a {
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-radius: 14px;
  }

  .nav-open .nav-links a:hover,
  .nav-open .top-nav a:hover,
  .nav-open .nav-links a:focus-visible,
  .nav-open .top-nav a:focus-visible {
    background: rgba(236, 105, 29, 0.08);
  }

  .nav-open .nav-cta {
    position: sticky;
    bottom: 0;
    z-index: 2;
    box-shadow: 0 16px 28px rgba(236, 105, 29, 0.18);
  }

  .page :is(.hero, .manifesto, .framework, .testimonials, .proof-strip, .faq-section, .contact-strip, .article-header, .seo-article, .case-article-page, .sitemap-page) {
    padding-top: clamp(28px, 6vw, 52px);
    padding-bottom: clamp(28px, 6vw, 52px);
  }

  .page :is(.hero-sub, .hero-question, .form-intro-text, .manifesto-body, .article-body, .case-article-body, .seo-article-content, .seo-article-content--wide, .faq-answer, .contact-body) {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .skip-link {
    left: 10px;
    right: 10px;
    top: 10px;
    text-align: center;
  }

  .page main > section,
  .page .page-wrap > * {
    scroll-margin-top: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skip-link,
  #nav,
  #nav.scrolled,
  .page :is(.post-card, .case-card, .proof-item, .faq-item, .step, .path-pill, .elements-showcase-card, .testimonial, .page-nav-item),
  .reveal {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== key-pages-ux-refinement ===== */
.page--homepage .hero-left {
  max-width: 38rem;
}

.page--homepage .hero-sub {
  max-width: 34ch;
}

.page--homepage .hero-layout {
  align-items: center;
}

.page--homepage .hero-actions {
  align-items: stretch;
  gap: 14px;
}

.page--homepage .hero-actions > * {
  flex: 0 0 auto;
}

.page--homepage .showreel-play {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24), 0 0 0 10px rgba(236, 105, 29, 0.05);
}

.page--homepage .showreel-window {
  padding-left: 50px;
  padding-right: 50px;
}

.page--homepage .clients-lane {
  padding-top: 6px;
  padding-bottom: 6px;
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.page--homepage .clients-track > * {
  flex: 0 0 auto;
}

.page--homepage .clients-track {
  gap: clamp(34px, 4vw, 54px);
}

.page--homepage .client-logo-image {
  opacity: 0.94;
}

.page--homepage .contact-body {
  max-width: 34ch;
}

.page--homepage .contact-action {
  gap: 14px;
  align-items: stretch;
}

.page--contatti .left-content {
  position: sticky;
  top: 112px;
  display: grid;
  gap: 24px;
}

.page--contatti .form-intro {
  max-width: 44rem;
  display: grid;
  gap: 16px;
}

.page--contatti .contact-form {
  max-width: 44rem;
  display: grid;
  gap: 14px;
}

.page--contatti .contact-form > .form-bottom {
  align-items: flex-start;
  gap: 16px;
}

.page--contatti .left-paths {
  display: grid;
  gap: 14px;
}

.page--contatti .path-pill {
  min-height: 124px;
  align-content: start;
}

.page--contatti .form-row {
  align-items: stretch;
}

.page--contatti .form-field textarea,
.page--contatti .form-field.key-question textarea {
  min-height: 176px;
}

.page--contatti .btn-submit {
  min-width: 176px;
}

.page--contatti .proof-num {
  line-height: 0.92;
}

.page--contatti .faq-title {
  max-width: 10ch;
}

.page--contatti .proof-row {
  align-items: stretch;
}

.page--contatti .proof-item {
  height: 100%;
}

.section-filter-bar--cases {
  position: sticky;
  top: 88px;
  z-index: 18;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  padding: 14px clamp(18px, 4vw, 56px);
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  scrollbar-width: none;
  box-shadow: none;
}

.section-filter-bar--cases::-webkit-scrollbar {
  display: none;
}

.section-filter-bar--cases .filter-btn {
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(236, 105, 29, 0.14);
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.72);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.page--cases .filter-btn.active {
  background: rgba(236, 105, 29, 0.08);
  box-shadow: inset 0 0 0 1px rgba(236, 105, 29, 0.08);
}

.section-project-grid .section-project-tile {
  break-inside: avoid;
  border-radius: 12px;
}

.section-project-grid .project-overlay {
  background:
    linear-gradient(180deg, rgba(8, 8, 8, 0.08) 0%, rgba(8, 8, 8, 0.72) 58%, rgba(8, 8, 8, 0.88) 100%);
  padding: 30px 26px 24px;
}

.section-project-grid .project-abstract {
  max-width: 36ch;
}

.section-project-grid .project-kicker {
  row-gap: 10px;
}

.section-project-grid .project-title {
  text-wrap: balance;
}

.section-editorial-cta--cases .cta-actions {
  gap: 14px;
  align-items: stretch;
}

.section-page-hero--seo .seo-hero h1 {
  max-width: none;
}

.section-page-hero--seo .seo-hero-abstract {
  justify-self: end;
  max-width: none;
}

.section-editorial-article .editorial-split--2-1 {
  gap: clamp(32px, 4vw, 56px);
}

.section-editorial-article .section-editorial-note {
  position: sticky;
  top: 132px;
}

.section-editorial-article .section-editorial-card,
.section-editorial-article .section-editorial-note {
  border-radius: 18px;
}

.section-editorial-band .editorial-band-inner {
  max-width: 960px;
  margin: 0 auto;
}

.section-editorial-article .section-editorial-content p {
  max-width: 70ch;
}

.section-page-hero--seo .seo-hero-preview {
  margin-top: 48px;
}

.section-editorial-article .section-editorial-content h2,
.section-editorial-article .editorial-col h2 {
  text-wrap: balance;
}

.section-editorial-article .section-editorial-content p,
.section-editorial-article .editorial-col p,
.section-editorial-article .section-editorial-note p,
.section-editorial-article .section-editorial-card p {
  text-wrap: pretty;
}

.section-editorial-article .seo-figure figcaption,
.section-editorial-article .seo-video-figure figcaption {
  max-width: 54ch;
}

.section-editorial-article .section-editorial-note,
.section-editorial-article .section-editorial-card {
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.045);
}

.section-editorial-article .section-editorial-card {
  min-height: 100%;
}

.section-editorial-band .editorial-band-inner h2 {
  text-wrap: balance;
}

.page--vti .hero-layout > .row {
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 980px) {
  .page--contatti .left-content {
    position: static;
    gap: 20px;
  }

  .section-filter-bar--cases {
    top: 76px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .section-editorial-article .section-editorial-note {
    position: static;
  }

  .page--seo-article .seo-hero h1,
  .section-editorial-article .section-editorial-content p,
  .section-project-grid .project-abstract,
  .page--homepage .hero-sub,
  .page--homepage .contact-body {
    max-width: 100%;
  }

  .section-editorial-cta--cases .cta-actions > * {
    width: 100%;
  }

  .page--homepage .hero-actions > * {
    width: 100%;
  }

  .page--contatti .faq-title {
    max-width: 100%;
  }

  .page--contatti .btn-submit {
    width: 100%;
  }

  .section-page-hero--seo .seo-hero-abstract {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .section-filter-bar--cases {
    top: 70px;
    gap: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .section-filter-bar--cases .filter-btn {
    padding: 10px 14px;
    font-size: 12px;
  }

  .section-project-grid .project-overlay {
    padding: 22px 18px 18px;
  }

  .page--seo-article .seo-hero-preview {
    margin-top: 36px;
  }

  .page--homepage .clients-lane {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .page--homepage .hero-actions {
    width: 100%;
  }

  .page--homepage .showreel-play {
    width: 84px !important;
    height: 84px !important;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    flex: 0 0 auto;
    justify-content: center;
  }

  .page--homepage .contact-action > * {
    width: 100%;
  }
}

.page--blog_article .article-header-inner {
  max-width: 1080px;
  gap: clamp(28px, 4vw, 44px);
}

.page--blog_article .article-lede {
  max-width: 38ch;
  text-wrap: pretty;
}

.page--blog_article .article-body {
  max-width: 72ch;
}

.page--blog_article .article-body > p,
.page--blog_article .article-body > h2,
.page--blog_article .article-body > figure,
.page--blog_article .article-body > .pullquote {
  max-width: 100%;
}

.page--blog_article .toc {
  position: sticky;
  top: 132px;
}

.page--blog_article .article-hero-visual,
.page--blog_article .article-figure img {
  border-radius: 22px;
  overflow: hidden;
}

@media (max-width: 980px) {
  .page--blog_article .toc {
    position: static;
  }

  .page--blog_article .article-header-inner,
  .page--blog_article .article-body {
    max-width: 100%;
  }

  .page--blog_article .article-lede {
    max-width: 100%;
  }
}

/* ===== mobile-experience-upgrade ===== */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 94;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(21, 21, 21, 0.36);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s ease, visibility 0.24s ease;
}

.nav-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.nav-locked {
  overflow: hidden;
}

@media (max-width: 980px) {
  .btn-ghost,
  .btn-ghost-nav {
    border: 1px solid #d5d5d5 !important;
    color: #808080 !important;
    width: 100% !important;
    min-height: 64px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    border-radius: 8px !important;
    padding: 18px 28px !important;
    font-size: 11px !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .section-page-hero--expression .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    width: 100%;
  }

  .section-page-hero--expression .hero-actions .btn-primary,
  .section-page-hero--expression .hero-actions .btn-ghost,
  .section-page-hero--expression .hero-actions .btn-ghost-nav,
  .section-page-hero--expression .hero-actions a {
    width: 100%;
    min-height: 64px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    border-radius: 8px !important;
    padding: 18px 28px !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 11px !important;
  }

  .section-page-hero--expression .hero-actions .btn-ghost,
  .section-page-hero--expression .hero-actions .btn-ghost-nav {
    border: 1px solid #d5d5d5 !important;
    color: #808080 !important;
    background: transparent !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .nav-toggle,
  .nav-open .nav-toggle {
    background: none !important;
    border: none !important;
  }

  body:not(.page--homepage) .nav-toggle,
  body:not(.page--homepage) .nav-open .nav-toggle {
    color: #1f1f1f !important;
  }

  body:not(.page--homepage) .nav-toggle span,
  body:not(.page--homepage) .nav-open .nav-toggle span {
    background: #1f1f1f !important;
  }

  body.nav-locked #nav,
  body.nav-locked #nav.scrolled,
  #nav.nav-open,
  #nav.nav-open.scrolled {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 9999 !important;
    background: #fffdfa !important;
    opacity: 1 !important;
    color: #1f1f1f !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .nav-backdrop,
  .nav-backdrop.is-visible {
    z-index: 9998 !important;
    background: rgba(20, 20, 20, 0.22) !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  #nav.nav-open .nav-menu-stack,
  body.nav-locked #nav .nav-menu-stack {
    position: relative;
    z-index: 10000 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #fffdfa !important;
    opacity: 1 !important;
    color: #1f1f1f !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  #nav.nav-open .nav-links,
  #nav.nav-open .top-nav,
  body.nav-locked #nav .nav-links,
  body.nav-locked #nav .top-nav {
    background: #fffdfa !important;
    opacity: 1 !important;
    color: #1f1f1f !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  #nav.nav-open .nav-links a,
  #nav.nav-open .top-nav a,
  #nav.nav-open .nav-cta,
  body.nav-locked #nav .nav-links a,
  body.nav-locked #nav .top-nav a,
  body.nav-locked #nav .nav-cta {
    opacity: 1 !important;
    visibility: visible !important;
    color: #1f1f1f !important;
    text-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  #nav.nav-open .nav-links a {
    border-bottom: 1px solid rgba(236, 105, 29, 0.25) !important;
  }

  #nav.nav-open .top-nav {
    border-top: 0px solid rgba(236, 105, 29, 0.25) !important;
  }

  #nav.nav-open .top-nav a {
    color: #2a2a2a !important;
  }

  #nav.nav-open .nav-toggle,
  #nav.nav-open .nav-toggle span {
    color: #1f1f1f !important;
    opacity: 1 !important;
  }

  .page--homepage .hero,
  .page--homepage .hero::before,
  .page--homepage .hero::after,
  .page--homepage .hero-ticker,
  .page--homepage .hero-ticker-track {
    z-index: auto !important;
  }

  body {
    -webkit-text-size-adjust: 100%;
  }

  #nav,
  #nav.scrolled {
    z-index: 95;
    align-items: center !important;
    padding: 16px 24px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fffdfa !important;
    border-bottom: 1px solid rgba(232, 128, 26, 0.10) !important;
    overflow: hidden;
  }

  .nav-logo {
    min-width: 0;
    max-width: calc(100% - 52px);
  }

  .nav-logo img {
    width: min(168px, 100%);
    height: auto;
  }

  .nav-toggle {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .nav-open .nav-toggle {
    background: rgba(255, 250, 245, 0.96) !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .nav-toggle span {
    width: 18px !important;
    height: 1px !important;
    background: #383838 !important;
  }

  .nav-open .nav-menu-stack {
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0;
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 0 !important;
    background: #fffdfa !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
  }

  .nav-open .nav-links {
    order: 1;
    margin-bottom: 18px !important;
    background: transparent !important;
  }

  .nav-open .nav-links a,
  .nav-open .top-nav a {
    display: flex !important;
    display: flex !important;
    align-items: center;
  }

  .nav-open .nav-links a {
    justify-content: flex-start !important;
    gap: 0 !important;
    min-height: 56px !important;
    padding: 22px 0 !important;
    font-family: 'Epilogue', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: #242424 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(232, 128, 26, 0.22) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    white-space: normal;
  }

  .nav-open .top-nav {
    order: 2;
    gap: 0 !important;
    margin-top: 0 !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(232, 128, 26, 0.16) !important;
    background: transparent !important;
  }

  .nav-open .top-nav a {
    justify-content: flex-start !important;
    min-height: 40px !important;
    font-family: 'Epilogue', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.14em !important;
    padding: 12px 0 !important;
    color: #5b5b5b !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    white-space: normal;
  }

  .nav-open .top-nav li,
  .nav-open .nav-links li {
    width: 100%;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .nav-open .nav-links a::before,
  .nav-open .nav-links a::after,
  .nav-open .top-nav a::before,
  .nav-open .top-nav a::after {
    display: none !important;
    content: none !important;
  }

  .hero,
  .hero-inner,
  .featured-wrap,
  .grid-wrap,
  .featured-section,
  .faq-section,
  .page-nav,
  .topic-bar,
  .proof-strip,
  .contact-strip,
  .manifesto,
  .framework,
  .testimonials,
  footer,
  .hero-right,
  .hero-left,
  .article-wrap,
  .article-shell,
  .content-wrap,
  .section-wrap,
  .section-shell,
  .featured-case,
  .featured-content,
  .form-intro,
  .right-panel,
  .left-panel,
  .page main > section > .container-fluid,
  .page main > section > .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .page main > section {
    overflow-x: clip;
  }

  .page-wrap,
  .article-grid,
  .story-grid,
  .signals-grid,
  .modules-grid,
  .principles-grid,
  .metrics-grid,
  .section-disciplines .disciplines-grid,
  .posts-grid,
  .cases-grid {
    gap: 18px !important;
  }

  h1,
  .hero h1,
  .hero-headline,
  .left-headline,
  .article-title,
  .post-title,
  .section-title {
    font-size: clamp(36px, 10.5vw, 54px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.04em !important;
    text-wrap: balance;
  }

  h2,
  .framework-title,
  .manifesto-quote,
  .contact-headline,
  .ai-headline {
    text-wrap: balance;
  }

  .hero-sub,
  .manifesto-body,
  .contact-body,
  .form-intro-text,
  .post-excerpt,
  .card-excerpt,
  .faq-answer,
  .article-body,
  .case-article-body,
  .seo-article-content,
  .seo-article-content--wide {
    font-size: 17px !important;
    line-height: 1.68 !important;
  }

  .article-body,
  .case-article-body,
  .seo-article-content,
  .seo-article-content--wide {
    max-width: 100% !important;
  }

  .article-body p,
  .case-article-body p,
  .seo-article-content p,
  .seo-article-content--wide p {
    margin-bottom: 1.1em;
  }

  .post-card,
  .case-card,
  .topic-card,
  .proof-item,
  .faq-item,
  .step,
  .path-pill,
  .newsletter,
  .testimonial,
  .form-success {
    border-radius: 20px !important;
  }

  .post-card-content,
  .case-card-content,
  .post-featured-content,
  .featured-case-content {
    padding: 22px 20px 24px !important;
  }

  .post-card-media,
  .case-card-visual,
  .post-featured-visual,
  .featured-case-visual,
  .hero-visual {
    min-height: 220px !important;
    aspect-ratio: 4 / 3;
  }

  .btn-primary,
  .btn-ghost,
  .nav-cta,
  .btn-submit,
  .nl-btn,
  .sticky-cta-btn {
    min-height: 48px;
    padding: 14px 20px !important;
  }

  input,
  textarea,
  select,
  .footer-newsletter-input {
    min-height: 48px;
    font-size: 16px !important;
  }

  textarea {
    min-height: 132px;
  }

  .sticky-cta,
  #stickyCta {
    left: 18px !important;
    right: 18px !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
  }

  .footer-row,
  .footer-newsletter,
  .footer-newsletter-fields {
    gap: 16px !important;
  }
}

@media (max-width: 640px) {
  :root {
    --container-padding-x: 16px;
  }

  #nav,
  #nav.scrolled {
    padding: 14px 16px !important;
  }

  .hero,
  .hero-inner,
  .featured-wrap,
  .grid-wrap,
  .featured-section,
  .faq-section,
  .page-nav,
  .topic-bar,
  .proof-strip,
  .contact-strip,
  .manifesto,
  .framework,
  .testimonials,
  footer,
  .hero-right,
  .hero-left,
  .article-wrap,
  .article-shell,
  .content-wrap,
  .section-wrap,
  .section-shell,
  .featured-case,
  .featured-content,
  .form-intro,
  .right-panel,
  .left-panel,
  .page main > section > .container-fluid,
  .page main > section > .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .nav-logo img {
    width: 150px;
  }

  .nav-open .nav-menu-stack {
    max-height: calc(100dvh - 86px);
  }

  .post-card-content,
  .case-card-content,
  .post-featured-content,
  .featured-case-content {
    padding: 20px 18px 22px !important;
  }

  .post-card-media,
  .case-card-visual,
  .post-featured-visual,
  .featured-case-visual,
  .hero-visual {
    min-height: 200px !important;
  }

  .hero-sub,
  .manifesto-body,
  .contact-body,
  .form-intro-text,
  .post-excerpt,
  .card-excerpt,
  .faq-answer,
  .article-body,
  .case-article-body,
  .seo-article-content,
  .seo-article-content--wide {
    font-size: 16px !important;
    line-height: 1.64 !important;
  }

  .sticky-cta,
  #stickyCta {
    left: 16px !important;
    right: 16px !important;
  }
}

/* ===== cursor-stability-fix ===== */
html,
body,
a,
button,
input,
textarea,
select,
label,
summary,
[role="button"] {
  cursor: auto !important;
}

button,
[type="button"],
[type="submit"],
.nav-toggle,
.btn-primary,
.btn-ghost,
.nav-cta,
.topic-btn,
.testimonial-dot,
.showreel-play,
.sticky-cta-btn {
  cursor: pointer !important;
}

.cursor,
.cursor-dot,
.cursor-ring {
  display: none !important;
}
  .reveal-delay-4 { transition-delay: 0.4s; }

  @media (max-width: 1100px) {
    .cp-track {
      grid-template-columns: 1fr;
      gap: 28px;
      margin-top: 48px;
    }

    .cp-track::before {
      left: 8px;
      right: auto;
      top: 0;
      bottom: 0;
      width: 1px;
      height: auto;
    }

    .cp-step {
      padding-top: 0;
      padding-left: 44px;
    }

    .cp-dot {
      top: 0;
      left: 0;
    }

    .proof-quotes {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 760px) {
    .page--expression .hero {
      display: flex !important;
      flex-direction: column;
      align-items: stretch !important;
    }

    .page--expression .hero > .container-fluid.hero-layout {
      order: 1;
    }

    .page--expression .hero-content {
      order: 1;
      position: relative;
      z-index: 2;
    }

    .page--expression .hero-ink {
      order: 2;
      position: relative;
      top: auto;
      right: auto;
      bottom: auto;
      left: auto;
      width: min(72vw, 320px);
      height: auto;
      margin: 32px auto 0;
      opacity: 0.24;
      transform: none;
      z-index: 1;
    }

    .page--expression .hero-ink .smile-visual {
      display: block;
      width: 100%;
      height: auto;
      margin: 0 auto;
    }

    .page--expression .expression-hero-label {
      position: static;
      margin-top: 14px;
      text-align: center;
      font-size: 9px;
      letter-spacing: 0.14em;
    }

    .premise,
    .section-disciplines,
    .creative-process,
    .proof-strip,
    .not-for,
    .expr-cta {
      padding: 96px 24px;
    }

    .perception-label-row,
    .perception-pair,
    .page-nav {
      grid-template-columns: 1fr;
    }

    .perception-label.before {
      border-right: 0;
    }

    .section-disciplines .disc-card {
      position: relative;
      top: auto;
      min-height: auto;
      padding: 36px 28px;
      margin-bottom: 22px;
    }

    .proof-quote {
      padding: 28px;
    }

    .page-nav {
      margin: 0 24px;
    }

    .page-nav-item,
    .page-nav-item.next {
      justify-content: flex-start;
      text-align: left;
      padding: 28px;
    }
  }


/* ===== clever_homepage.css ===== */
  /* Hero */
  .hero {
    min-height: 100vh;
    display: block;
    position: relative;
    overflow: hidden;
    background: #080808;
  }

  .hero-left {
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 80px 100px 56px;
    position: relative; z-index: 2;
  }

  .hero-eyebrow {
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 32px;
    opacity: 0; animation: fadeUp 0.8s 0.2s forwards;
    display: flex; align-items: center; gap: 12px;
  }
  .hero-eyebrow::before {
    content: ''; display: block; width: 32px; height: 1px; background: var(--orange);
  }

  .hero-headline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(48px, 6vw, 88px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 40px;
    opacity: 0; animation: fadeUp 0.9s 0.35s forwards;
  }
  .hero-headline em {
    font-style: italic;
    color: var(--orange);
  }

  .hero-sub {
    font-size: 15px; line-height: 1.75; color: var(--gray);
    max-width: 440px; margin-bottom: 56px;
    opacity: 0; animation: fadeUp 0.8s 0.5s forwards;
  }

  .hero-actions {
    display: flex; align-items: center; gap: 32px;
    opacity: 0; animation: fadeUp 0.8s 0.65s forwards;
  }
  .hero-right {
    position: relative; overflow: hidden;
  }
  .hero-visual {
    position: absolute; inset: 0;
    --spotlight-x: 70%;
    --spotlight-y: 52%;
    --spotlight-size: 280px;
    background: linear-gradient(135deg, #090909 0%, #070707 42%, #100c08 100%);
  }
  .hero-image {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(8,8,8,0.14), rgba(8,8,8,0.22)),
      url('../img/woman-fox-hero.png') center right / cover no-repeat;
    transform: scale(1.02);
    filter: saturate(0.92) contrast(1.02);
  }
  .hero-spotlight {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(
        circle var(--spotlight-size) at var(--spotlight-x) var(--spotlight-y),
        rgba(255, 218, 187, 0.28) 0,
        rgba(255, 196, 143, 0.18) 12%,
        rgba(30, 22, 16, 0.16) 24%,
        rgba(8, 8, 8, 0.78) 44%,
        rgba(7, 7, 7, 0.94) 68%,
        rgba(7, 7, 7, 0.98) 100%
      );
    mix-blend-mode: normal;
    transition: opacity 0.25s ease;
  }
  .hero-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(236,105,29,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(236,105,29,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.42; animation: fadeIn 1.2s 0.8s forwards;
  }
  .hero-circle {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 380px; height: 380px;
    border: 1px solid rgba(236,105,29,0.12);
    border-radius: 50%;
    animation: pulse 4s ease-in-out infinite;
  }
  .hero-circle-2 {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 260px; height: 260px;
    border: 1px solid rgba(236,105,29,0.08);
    border-radius: 50%;
    animation: pulse 4s ease-in-out 0.8s infinite;
  }
  .hero-tagline-vertical {
    position: absolute; right: 40px; top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
    color: rgba(236,105,29,0.4);
    white-space: nowrap;
    opacity: 0; animation: fadeIn 1s 1s forwards;
  }
  .hero-number {
    position: absolute; bottom: 48px; left: 48px;
    font-family: 'Sora', sans-serif;
    font-size: 120px; font-weight: 300;
    color: rgba(236,105,29,0.06);
    line-height: 1; user-select: none;
    opacity: 0; animation: fadeIn 1s 0.9s forwards;
  }

  /* Scroll indicator */
  .scroll-indicator {
    position: absolute; bottom: 48px; left: 56px;
    display: flex; align-items: center; gap: 12px;
    opacity: 0; animation: fadeIn 1s 1.2s forwards;
  }
  .scroll-line {
    width: 40px; height: 1px; background: var(--gray);
    position: relative; overflow: hidden;
  }
  .scroll-line::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%; background: var(--orange);
    animation: scrollLine 2s 1.5s ease-in-out infinite;
  }
  .scroll-text {
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gray);
  }

  /* Divider */
  .section-divider {
    height: 1px; background: var(--border);
    margin: 0 56px;
  }

  /* Manifesto section */
  .manifesto {
    padding: 140px 56px;
  }
  .manifesto-label {
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--orange); padding-top: 8px;
    position: sticky; top: 120px;
  }
  .manifesto-content {}
  .manifesto-quote {
    font-family: 'Sora', sans-serif;
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 300;
    line-height: 1.35;
    letter-spacing: -0.01em;
    margin-bottom: 48px;
    color: var(--off-white);
  }
  .manifesto-quote em { font-style: italic; color: var(--orange); }
  .manifesto-body {
    font-size: 15px; line-height: 1.85; color: var(--gray);
    max-width: 580px;
  }

  /* Bounce divider */
  .bounce-divider {
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(236,105,29,0.02), transparent 36%, transparent 64%, rgba(236,105,29,0.03));
  }

  .bounce-divider-track {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .bounce-divider-track::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(236,105,29,0.14) 10%, rgba(236,105,29,0.22) 50%, rgba(236,105,29,0.14) 90%, transparent 100%);
  }

  .bounce-divider-ball {
    position: absolute;
    left: 0;
    bottom: 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffd2af 0%, #ec691d 38%, #cc5712 100%);
    box-shadow: 0 0 0 8px rgba(236,105,29,0.06), 0 14px 30px rgba(236,105,29,0.18);
    transform: translateX(-36px);
    animation: bounceBallX 8s linear infinite, bounceBallY 8s ease-in-out infinite;
    will-change: transform;
  }

  .bounce-divider-shadow {
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 34px;
    height: 10px;
    border-radius: 50%;
    background: rgba(34,34,42,0.12);
    filter: blur(3px);
    transform: translateX(-42px) scale(0.7);
    transform-origin: center center;
    animation: bounceShadowX 8s linear infinite, bounceShadowScale 8s ease-in-out infinite;
    will-change: transform;
  }

  /* Framework section */
  .framework {
    padding: 140px 56px;
    background: linear-gradient(180deg, transparent, rgba(236,105,29,0.02), transparent);
  }
  .framework-header {
    margin-bottom: 80px;
  }
  .framework-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 300; letter-spacing: -0.02em;
  }
  .framework-subtitle {
    font-size: 13px; color: var(--gray); letter-spacing: 0.04em;
    max-width: 280px; text-align: right; line-height: 1.6;
    margin-left: auto;
  }
  .framework-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
  }
  .step {
    padding: 48px 40px 56px;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s;
    cursor: pointer;
  }
  .step::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(236,105,29,0.04), transparent);
    opacity: 0; transition: opacity 0.3s;
  }
  .step:hover { border-color: rgba(236,105,29,0.3); }
  .step:hover::before { opacity: 1; }
  .step-num {
    font-family: 'Sora', sans-serif;
    font-size: 64px; font-weight: 300;
    color: rgba(236,105,29,0.15);
    line-height: 1; margin-bottom: 32px;
  }
  .step-icon {
    font-family: 'Sora', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
  }
  .step-label {
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
  }
  .step-label::before {
    content: ''; display: block; width: 20px; height: 1px; background: var(--orange);
  }
  .step-name {
    font-family: 'Sora', sans-serif;
    font-size: 28px; font-weight: 700;
    margin-bottom: 20px; line-height: 1.2;
  }
  .step-desc {
    font-size: 13.5px; line-height: 1.75; color: var(--gray);
  }
  .step-arrow {
    position: absolute; bottom: 28px; right: 32px;
    font-size: 20px; color: rgba(236,105,29,0.3);
    transition: transform 0.2s, color 0.2s;
  }
  .step:hover .step-arrow { transform: translate(3px, -3px); color: var(--orange); }

  /* Showreel */
  .showreel-shell {
    position: relative;
    z-index: 3;
    margin: 0 56px -92px;
  }

  .showreel-window {
    width: 100%;
  }

  @keyframes bounceBallX {
    from { left: 0; }
    to { left: calc(100% + 36px); }
  }

  @keyframes bounceBallY {
    0%, 100% { transform: translateX(-36px) translateY(0); }
    8% { transform: translateX(-36px) translateY(-28px); }
    16% { transform: translateX(-36px) translateY(0); }
    28% { transform: translateX(-36px) translateY(-42px); }
    40% { transform: translateX(-36px) translateY(0); }
    54% { transform: translateX(-36px) translateY(-22px); }
    66% { transform: translateX(-36px) translateY(0); }
    80% { transform: translateX(-36px) translateY(-36px); }
    92% { transform: translateX(-36px) translateY(0); }
  }

  @keyframes bounceShadowX {
    from { left: 0; }
    to { left: calc(100% + 42px); }
  }

  @keyframes bounceShadowScale {
    0%, 100% { transform: translateX(-42px) scale(0.72); opacity: 0.5; }
    8% { transform: translateX(-42px) scale(0.56); opacity: 0.28; }
    16% { transform: translateX(-42px) scale(0.78); opacity: 0.55; }
    28% { transform: translateX(-42px) scale(0.48); opacity: 0.22; }
    40% { transform: translateX(-42px) scale(0.84); opacity: 0.6; }
    54% { transform: translateX(-42px) scale(0.6); opacity: 0.32; }
    66% { transform: translateX(-42px) scale(0.8); opacity: 0.56; }
    80% { transform: translateX(-42px) scale(0.52); opacity: 0.24; }
    92% { transform: translateX(-42px) scale(0.8); opacity: 0.58; }
  }

  .showreel-frame {
    position: relative;
    min-height: 440px;
    overflow: hidden;
    border-radius: 30px;
    /*background: #130d08 url('../img/woman-fox-hero.png') center center / cover no-repeat;*/
    box-shadow: 0 28px 80px rgba(0,0,0,0.24);
  }

  .showreel-overlay {
    display: none;
  }

  .showreel-centerpiece {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .showreel-play {
    position: relative;
    z-index: 2;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 1px solid rgba(236,105,29,0.5);
    background: rgba(16,16,16,0.58);
    color: #fffaf5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
  }

.showreel-play:hover {
    transform: translate(-50%, -50%) scale(1.04);
    background: rgba(236,105,29,0.88);
    border-color: var(--orange);
  }

  .showreel-play-icon {
    font-size: 24px;
    line-height: 1;
    margin-left: 4px;
  }

  .showreel-orbit {
    position: absolute;
    width: 188px;
    height: 188px;
    animation: orbitSpin 14s linear infinite;
    pointer-events: none;
  }

  .showreel-orbit span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg) translateY(-94px);
    transform-origin: center;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    font-family: 'Sora', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--orange);
  }

  .showreel-orbit span::before {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--orange);
  }

  /* AI banner */
  .ai-banner {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    padding: 72px 80px;
    background: linear-gradient(135deg, #0e0c07, #111008);
    border: 1px solid rgba(236,105,29,0.15);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 60px;
    position: relative;
    overflow: hidden;
  }
  .ai-banner::before {
    content: 'AI'; position: absolute;
    right: -20px; top: 50%; transform: translateY(-50%);
    font-family: 'Sora', sans-serif;
    font-size: 200px; font-weight: 300;
    color: rgba(236,105,29,0.04);
    pointer-events: none; user-select: none;
    line-height: 1;
  }
  .ai-label {
    font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 20px;
    display: flex; align-items: center; gap: 10px;
  }
  .ai-label::before {
    content: ''; width: 24px; height: 1px; background: var(--orange);
  }
  .ai-headline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 300; line-height: 1.3;
    margin-bottom: 20px;
  }
  .ai-headline em { font-style: italic; color: var(--orange); }
  .ai-body {
    font-size: 14px; line-height: 1.75; color: var(--gray);
    max-width: 520px;
  }
  .ai-cta {
    flex: 0 0 auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 144px;
    min-height: 48px;
    max-width: none;
    box-sizing: border-box;
    padding: 14px 28px;
    font-family: 'Epilogue', sans-serif !important;
    font-size: 11px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--orange);
    background: transparent;
    border: 1px solid rgba(236,105,29,0.9);
    border-radius: 8px;
    box-shadow: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  .ai-cta:hover { background: var(--orange); color: #fffaf5; border-color: var(--orange); }

  /* Testimonials */
  .testimonials {
    padding: 140px 56px;
  }
  .testimonials-header {
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 64px;
    display: flex; align-items: center; gap: 16px;
  }
  .testimonials-header::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
  }
  .testimonials-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
  }
  .testimonial {
    padding: 48px; border: 1px solid var(--border);
    position: relative;
  }
  .testimonial-quote-mark {
    font-family: 'Sora', sans-serif;
    font-size: 80px; color: var(--orange);
    opacity: 0.2; line-height: 0.8;
    margin-bottom: 24px;
  }
  .testimonial-text {
    font-family: 'Sora', sans-serif;
    font-size: 20px; font-weight: 300; font-style: italic;
    line-height: 1.65; color: var(--off-white);
    margin-bottom: 32px;
  }
  .testimonial-author {
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--gray);
  }
  .testimonial-author span {
    display: block; color: var(--orange); margin-bottom: 4px;
    font-weight: 500;
  }

  /* Contact strip */
  .contact-strip {
    padding: 120px 56px;
    border-top: 1px solid var(--border);
  }
  .contact-headline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(32px, 4vw, 60px);
    font-weight: 300; line-height: 1.15;
    letter-spacing: -0.02em;
  }
  .contact-headline em { font-style: italic; color: var(--orange); }
  .contact-content { }
  .contact-body {
    font-size: 14px; line-height: 1.85; color: var(--gray);
    margin-bottom: 40px; max-width: 420px;
  }
  .contact-action {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  }

  /* Animations */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.04); opacity: 1; }
  }
  @keyframes scrollLine {
    0% { left: -100%; }
    50% { left: 0; }
    100% { left: 100%; }
  }

  @keyframes orbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* Scroll reveal */
  .reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.25,0.46,0.45,0.94),
                transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
  }
  .reveal.visible { opacity: 1; transform: none; }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }

  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(10,10,10,0.96) 0%, rgba(10,10,10,0.7) 42%, rgba(10,10,10,0.18) 100%),
      radial-gradient(circle at 74% 48%, rgba(236,105,29,0.16), transparent 26%);
    pointer-events: none;
    z-index: 1;
  }

  .hero-left {
    max-width: 760px;
  }

  .hero-sub {
    font-size: 16px;
    color: rgba(244,241,235,0.68);
  }

  .hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    padding: 10px 16px;
    border: 1px solid rgba(236,105,29,0.18);
    background: rgba(244,241,235,0.04);
    border-radius: 999px;
    backdrop-filter: blur(10px);
  }

  .hero-kicker::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 18px rgba(236,105,29,0.55);
  }

  .hero-actions {
    margin-top: 8px;
  }

  .hero-visual::after {
    content: '';
    position: absolute;
    inset: 12% 10%;
    border: 1px solid rgba(236,105,29,0.14);
    border-radius: 32px;
    box-shadow: inset 0 0 40px rgba(236,105,29,0.04);
    pointer-events: none;
  }

  .manifesto {
    position: relative;
  }

  .manifesto::after {
    content: '';
    position: absolute;
    left: 56px;
    right: 56px;
    bottom: 52px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(236,105,29,0.18), transparent);
  }

  .manifesto-quote {
    max-width: 18ch;
  }

  .manifesto-body {
    max-width: 64ch;
    color: rgba(244,241,235,0.72);
  }

  .framework-header {
    align-items: end;
    margin-bottom: 24px;
  }

  .framework-subtitle {
    max-width: 32ch;
    color: rgba(244,241,235,0.62);
  }

  .framework-steps {
    gap: 24px;
  }

  .step {
    position: relative;
    background:
      linear-gradient(180deg, rgba(244,241,235,0.03), rgba(244,241,235,0.01)),
      radial-gradient(circle at top right, rgba(236,105,29,0.14), transparent 34%);
    border: 1px solid rgba(236,105,29,0.1);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 22px 44px rgba(0,0,0,0.18);
  }

  .step::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(236,105,29,0.08), transparent 40%);
    opacity: 0;
    transition: opacity .25s ease;
  }

  .step:hover {
    transform: translateY(-10px);
    border-color: rgba(236,105,29,0.22);
  }

  .step:hover::before {
    opacity: 1;
  }

  .step-name {
    max-width: 10ch;
  }

  .ai-banner {
    border-radius: 34px;
    border-color: rgba(236,105,29,0.18);
    background:
      linear-gradient(135deg, rgba(236,105,29,0.09), rgba(10,10,10,0.92) 35%, rgba(10,10,10,0.96) 100%);
    box-shadow: 0 28px 70px rgba(0,0,0,0.2);
  }

  .ai-headline {
    max-width: 14ch;
  }

  .testimonials-grid {
    gap: 24px;
  }

  .testimonial {
    background: linear-gradient(180deg, rgba(244,241,235,0.035), rgba(244,241,235,0.01));
    border-radius: 28px;
    border-color: rgba(236,105,29,0.1);
    box-shadow: 0 18px 42px rgba(0,0,0,0.14);
  }

  .contact-strip {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(236,105,29,0.1);
    border-bottom: 1px solid rgba(236,105,29,0.1);
    background: linear-gradient(90deg, rgba(236,105,29,0.06), transparent 28%, transparent 72%, rgba(236,105,29,0.06));
  }

  .contact-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at right center, rgba(236,105,29,0.14), transparent 26%);
    pointer-events: none;
  }

  .contact-body {
    color: rgba(244,241,235,0.68);
  }

  /* Home reusable section roots */
  .section-home-manifesto {
    position: relative;
  }

  .section-home-manifesto::after {
    content: '';
    position: absolute;
    left: 56px;
    right: 56px;
    bottom: 52px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(236,105,29,0.18), transparent);
  }

  .section-home-manifesto .manifesto-quote {
    max-width: 18ch;
  }

  .section-home-manifesto .manifesto-body {
    max-width: 64ch;
    color: rgba(244,241,235,0.72);
  }

  .section-home-framework .framework-header {
    align-items: end;
    margin-bottom: 24px;
  }

  .section-home-framework .framework-subtitle {
    max-width: 32ch;
    color: rgba(244,241,235,0.62);
  }

  .section-home-framework .framework-steps {
    gap: 24px;
  }

  .section-home-framework .step {
    position: relative;
    background:
      linear-gradient(180deg, rgba(244,241,235,0.03), rgba(244,241,235,0.01)),
      radial-gradient(circle at top right, rgba(236,105,29,0.14), transparent 34%);
    border: 1px solid rgba(236,105,29,0.1);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 22px 44px rgba(0,0,0,0.18);
  }

  .section-home-framework .step::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(236,105,29,0.08), transparent 40%);
    opacity: 0;
    transition: opacity .25s ease;
  }

  .section-home-framework .step:hover {
    transform: translateY(-10px);
    border-color: rgba(236,105,29,0.22);
  }

  .section-home-framework .step:hover::before {
    opacity: 1;
  }

  .section-home-framework .step-name {
    max-width: 10ch;
  }

  .section-home-showreel {
    position: relative;
    z-index: 3;
    margin: 0 56px -92px;
  }

  .section-home-ai-banner {
    border-radius: 34px;
    border-color: rgba(236,105,29,0.18);
    background:
      linear-gradient(135deg, rgba(236,105,29,0.09), rgba(10,10,10,0.92) 35%, rgba(10,10,10,0.96) 100%);
    box-shadow: 0 28px 70px rgba(0,0,0,0.2);
  }

  .section-home-testimonials .testimonials-grid {
    gap: 24px;
  }

  .section-home-testimonials .testimonial {
    background: linear-gradient(180deg, rgba(244,241,235,0.035), rgba(244,241,235,0.01));
    border-radius: 28px;
    border-color: rgba(236,105,29,0.1);
    box-shadow: 0 18px 42px rgba(0,0,0,0.14);
  }

  @media (max-width: 980px) {
    .showreel-shell {
      margin: 0 20px -68px;
    }

    .section-home-showreel {
      margin: 0 20px -68px;
    }

    .showreel-frame {
      min-height: 320px;
      border-radius: 24px;
    }

    .hero::before {
      background:
        linear-gradient(180deg, rgba(10,10,10,0.9), rgba(10,10,10,0.72) 38%, rgba(10,10,10,0.18) 100%),
        radial-gradient(circle at 50% 28%, rgba(236,105,29,0.16), transparent 34%);
    }

    .hero-visual {
      --spotlight-x: 58%;
      --spotlight-y: 36%;
      --spotlight-size: 220px;
    }

    .hero-spotlight {
      background:
        linear-gradient(180deg, rgba(8, 8, 8, 0.28), rgba(8, 8, 8, 0.74)),
        radial-gradient(circle at 58% 32%, rgba(255, 196, 143, 0.18), transparent 30%);
    }

    .manifesto::after,
    .section-home-manifesto::after {
      left: 20px;
      right: 20px;
      bottom: 28px;
    }

    .framework-steps,
    .testimonials-grid,
    .section-home-framework .framework-steps,
    .section-home-testimonials .testimonials-grid {
      gap: 18px;
    }
  }

  @media (max-width: 720px) {
    .showreel-shell {
      margin: 0 20px -46px;
    }

    .section-home-showreel {
      margin: 0 20px -46px;
    }

    .showreel-frame {
      min-height: 240px;
      border-radius: 20px;
    }

    .showreel-play {
      width: 74px;
      height: 74px;
    }

    .showreel-play-icon {
      font-size: 20px;
    }

    .showreel-orbit {
      width: 150px;
      height: 150px;
    }

    .showreel-orbit span {
      font-size: 8px;
      letter-spacing: 0.16em;
      transform: translate(-50%, -50%) rotate(-90deg) translateY(-76px);
    }

    .hero-kicker {
      font-size: 11px;
      letter-spacing: 0.12em;
    }

    .step,
    .testimonial,
    .ai-banner,
    .section-home-framework .step,
    .section-home-testimonials .testimonial,
    .section-home-ai-banner {
      border-radius: 22px;
    }
  }


/* ===== clever_origin.css ===== */
body.page--origin {
  background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 52%, #f2f2f2 100%);
  color: #22222a;
  overflow-x: hidden;
}

.page--origin .cursor-ring {
  display: none;
}

.page--origin .hero {
  position: relative;
  min-height: auto;
  padding: 94px 0 0;
  overflow: hidden;
}

.page--origin .hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(236, 105, 29, 0.24), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 246, 246, 0.88) 56%, rgba(179, 187, 221, 0.22) 100%);
  pointer-events: none;
}

.page--origin .line-field {
  position: absolute;
  inset: 0 0 auto auto;
  width: 100%;
  height: 52%;
  opacity: 0.55;
  pointer-events: none;
}

.page--origin .line-field svg {
  width: 100%;
  height: 100%;
}

.page--origin .hero-layout,
.page--origin .hero-left,
.page--origin .hero-right {
  position: relative;
  z-index: 2;
}

.page--origin .hero .row {
  align-items: center;
}

.page--origin .hero-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 0 4px;
}

.page--origin .hero-path-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  color: #7a7a7a;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page--origin .hero-path-indicator a {
  color: #7a7a7a;
  text-decoration: none;
}

.page--origin .hero-path-indicator .current {
  color: #ec691d;
}

.page--origin .hero-eyebrow,
.page--origin .section-tag,
.page--origin .tl-week,
.page--origin .output-time {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ec691d;
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.page--origin .hero-eyebrow,
.page--origin .section-tag {
  margin-bottom: 18px;
}

.page--origin .hero-eyebrow::before,
.page--origin .section-tag::before {
  content: "";
  width: 22px;
  height: 1px;
  background: #ec691d;
}

.page--origin .hero h1,
.page--origin .section-headline,
.page--origin .outputs-title,
.page--origin .not-for-headline,
.page--origin .process-title,
.page--origin .cta-headline {
  font-family: 'Sora', sans-serif;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #22222a;
}

.page--origin .hero h1 {
  max-width: 700px;
  margin-bottom: 18px;
  font-size: clamp(40px, 13vw, 62px);
  line-height: 0.96;
}

.page--origin .hero h1 em,
.page--origin .section-headline em,
.page--origin .outputs-title em,
.page--origin .not-for-headline em,
.page--origin .process-title em,
.page--origin .cta-headline em {
  font-style: normal;
  color: #ec691d;
}

.page--origin .hero-question,
.page--origin .section-body,
.page--origin .outputs-subtitle,
.page--origin .output-desc,
.page--origin .not-for-body,
.page--origin .tl-desc,
.page--origin .cta-body,
.page--origin .profile-pain {
  color: #5f5f5f;
  font-size: 14px;
  line-height: 1.75;
}

.page--origin .hero-question {
  max-width: 42ch;
  margin-bottom: 28px;
  padding-left: 18px;
  border-left: 2px solid rgba(236, 105, 29, 0.24);
}

.section-page-hero--origin .hero-actions,
.section-editorial-cta--origin .cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.page--origin .hero-right {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0 0;
}

.page--origin .compass-wrap {
  position: relative;
  width: min(92vw, 420px);
  height: min(92vw, 420px);
}

.page--origin .compass-outer,
.page--origin .compass-mid,
.page--origin .compass-inner {
  position: absolute;
  border-radius: 50%;
}

.page--origin .compass-outer {
  inset: 0;
  border: 1px solid rgba(236, 105, 29, 0.2);
}

.page--origin .compass-mid {
  inset: 14%;
  border: 1px solid rgba(236, 105, 29, 0.12);
}

.page--origin .compass-inner {
  inset: 33%;
  border: 1px solid rgba(90, 129, 193, 0.16);
  background: rgba(255, 255, 255, 0.66);
}

.page--origin .compass-ticks {
  position: absolute;
  inset: 0;
  animation: spin 60s linear infinite;
}

.page--origin .tick {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  background: rgba(236, 105, 29, 0.24);
  transform-origin: bottom center;
}

.page--origin .tick-long { height: 14px; }
.page--origin .tick-short { height: 7px; }

.page--origin .cardinal {
  position: absolute;
  color: rgba(34, 34, 42, 0.5);
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page--origin .cardinal-n { top: 16px; left: 50%; transform: translateX(-50%); }
.page--origin .cardinal-s { bottom: 16px; left: 50%; transform: translateX(-50%); }
.page--origin .cardinal-e { right: 16px; top: 50%; transform: translateY(-50%); }
.page--origin .cardinal-w { left: 16px; top: 50%; transform: translateY(-50%); }

.page--origin .compass-needle-wrap {
  position: absolute;
  inset: 0;
  animation: needleFloat 6s ease-in-out infinite;
}

.page--origin .compass-needle,
.page--origin .compass-needle-back {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  transform: translateX(-50%) rotate(-26deg);
  transform-origin: bottom center;
}

.page--origin .compass-needle {
  height: 28%;
  background: linear-gradient(to top, transparent, #ec691d);
  transform: translate(-50%, -100%) rotate(-26deg);
}

.page--origin .compass-needle::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #ec691d;
  box-shadow: 0 0 18px rgba(236, 105, 29, 0.38);
}

.page--origin .compass-needle-back {
  height: 16%;
  background: linear-gradient(to bottom, transparent, rgba(90, 129, 193, 0.26));
  transform: translate(-50%, 0) rotate(-26deg);
  transform-origin: top center;
}

.page--origin .compass-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #ec691d;
}

.page--origin .compass-label {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(34, 34, 42, 0.5);
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.page--origin .for-whom,
.page--origin .outputs,
.page--origin .not-for,
.page--origin .process,
.page--origin .origin-cta {
  padding: 88px 0 0;
}

.page--origin .strategy-parallax-break {
  position: relative;
  --blur-left: 12%;
  --blur-top: 70%;
  width: 100%;
  height: clamp(260px, 30vw, 430px);
  /*background-image: url("../img/parallax-strategia.jpg");*/
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
  z-index: 1;
}

.page--origin .strategy-orange-blur {
  position: absolute;
  left: var(--blur-left);
  top: var(--blur-top);
  width: clamp(360px, 42vw, 720px);
  aspect-ratio: 1 / 1;
  background-image: url("../img/blurred-orange.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 3;
  opacity: 0.78;
  will-change: transform;
  transform: translate3d(-50%, -50%, 0) rotate(-8deg);
  transition: left 0.35s ease-out, top 0.35s ease-out, transform 0.35s ease-out;
  filter: blur(28px);
}

.page--origin .for-whom {
  position: relative;
  z-index: 2;
}

.page--origin .section-headline,
.page--origin .outputs-title,
.page--origin .not-for-headline,
.page--origin .process-title,
.page--origin .cta-headline {
  margin-bottom: 18px;
  font-size: clamp(30px, 9vw, 46px);
  line-height: 1.02;
}

.page--origin .section-body p + p {
  margin-top: 16px;
}

.page--origin .profile-cards {
  display: grid;
  gap: 14px;
}

.page--origin .profile-card,
.page--origin .output-item,
.page--origin .nf-item,
.page--origin .tl-item {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(34, 34, 42, 0.08);
  box-shadow: 0 18px 44px rgba(34, 34, 42, 0.05);
}

.page--origin .profile-card {
  position: relative;
  padding: 24px 22px;
  cursor: pointer;
  overflow: hidden;
}

.page--origin .profile-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(180deg, #ec691d, #f59e28);
  transition: width 0.25s ease;
}

.page--origin .profile-card.active::before,
.page--origin .profile-card:hover::before {
  width: 3px;
}

.page--origin .profile-role {
  margin-bottom: 8px;
  color: #ec691d;
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page--origin .profile-name,
.page--origin .output-name,
.page--origin .tl-title {
  color: #22222a;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
}

.page--origin .profile-name {
  margin-bottom: 10px;
  font-size: 21px;
  line-height: 1.18;
}

.page--origin .profile-pain {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}

.page--origin .profile-card.active .profile-pain {
  max-height: 220px;
  opacity: 1;
}

.page--origin .outputs-header,
.page--origin .process-header {
  margin-bottom: 30px;
}

.page--origin .outputs {
  position: relative;
  margin-top: 88px;
  padding-top: 84px;
  padding-bottom: 14px;
  background:
    linear-gradient(180deg, rgba(179, 187, 221, 0.16), rgba(255, 255, 255, 0.88) 42%, rgba(255, 255, 255, 0.4) 100%);
}

.page--origin .outputs::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: min(300px, 52vw);
  height: 220px;
  background: radial-gradient(circle at 0% 0%, rgba(236, 105, 29, 0.16), transparent 72%);
  pointer-events: none;
}

.page--origin .outputs-subtitle,
.page--origin .cta-body {
  max-width: 42ch;
}

.page--origin .outputs-header {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1fr);
  gap: 72px;
  align-items: start;
}

.page--origin .services-inline {
  padding-top: 6px;
}

.page--origin .services-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page--origin .services-list li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid rgba(34, 34, 42, 0.1);
  color: #505050;
  font-size: 14px;
  line-height: 1.45;
}

.page--origin .services-list li:first-child {
  border-top: 1px solid rgba(34, 34, 42, 0.1);
}

.page--origin .services-list span {
  color: rgba(236, 105, 29, 0.72);
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

@media (max-width: 719px) {
  .page--origin .outputs-header {
    grid-template-columns: 1fr;
    gap: 38px;
  }
}

.page--origin .outputs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page--origin .fox-divider {
  position: relative;
  height: 84px;
  margin: 18px 0 -6px;
  overflow: hidden;
  z-index: 3;
  background: transparent;
}

.page--origin .fox-wave-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.page--origin .fox-wave-fox {
  position: absolute;
  left: 0;
  top: 50%;
  width: 59px;
  height: auto;
  transform: translate(-140px, -50%);
  animation: foxWaveRun 12s linear infinite;
  will-change: transform;
}

.page--origin .output-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  padding: 22px;
  align-items: start;
}

.page--origin .output-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(236, 105, 29, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ec691d;
  font-size: 16px;
}

.page--origin .output-name {
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.2;
}

.page--origin .output-time {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.page--origin .output-time-label {
  color: rgba(34, 34, 42, 0.44);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page--origin .output-time-week {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(236, 105, 29, 0.1);
  color: #ec691d;
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page--origin .not-for-list {
  display: grid;
  gap: 12px;
}

.page--origin .not-for {
  position: relative;
  background:
    radial-gradient(circle at 10% 0%, rgba(236, 105, 29, 0.14), transparent 24%),
    linear-gradient(180deg, #111111 0%, #171717 100%);
  overflow: hidden;
}

.page--origin .not-for::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), transparent 30%, transparent 70%, rgba(255, 255, 255, 0.02));
  pointer-events: none;
}

.page--origin .not-for .container-fluid,
.page--origin .not-for .row,
.page--origin .not-for .reveal,
.page--origin .not-for .not-for-list {
  position: relative;
  z-index: 1;
}

.page--origin .not-for-headline {
  color: #f5f1eb;
}

.page--origin .not-for-body,
.page--origin .nf-item,
.page--origin .nf-copy {
  color: rgba(245, 241, 235, 0.76);
}

.page--origin .nf-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page--origin .nf-index {
  color: rgba(236, 105, 29, 0.7);
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.page--origin .nf-copy {
  flex: 1;
}

.page--origin .timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page--origin .process {
  position: relative;
  background:
    radial-gradient(circle at 100% 0%, rgba(236, 105, 29, 0.14), transparent 24%),
    linear-gradient(180deg, #121212 0%, #1a1a1a 100%);
  overflow: visible;
}

.page--origin .process::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent 28%, transparent 72%, rgba(255,255,255,0.02));
  pointer-events: none;
}

.page--origin .process .container-fluid,
.page--origin .process .process-header,
.page--origin .process .timeline {
  position: relative;
  z-index: 1;
}

.page--origin .strategy-pieces {
  position: absolute;
  top: -92px;
  right: clamp(24px, 4.5vw, 72px);
  width: min(31vw, 360px);
  height: 430px;
  z-index: 2;
  pointer-events: none;
}

.page--origin .strategy-piece {
  position: absolute;
  display: block;
  height: auto;
  will-change: transform;
  filter: drop-shadow(0 28px 40px rgba(0, 0, 0, 0.3));
}

.page--origin .strategy-piece-king {
  top: 0;
  left: 0;
  width: 45%;
  animation: strategyPieceFloatUp 4.8s ease-in-out infinite;
}

.page--origin .strategy-piece-knight {
  right: -40px;
  bottom: -102px;
  width: 56%;
  z-index: -1;
  opacity: 0.66;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.28)) saturate(0.95);
  animation: strategyPieceFloatDown 5.4s ease-in-out infinite;
}

@keyframes strategyPieceFloatUp {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-16px);
  }
}

@keyframes strategyPieceFloatDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(14px);
  }
}

.page--origin .process-title,
.page--origin .process .tl-title {
  color: #f5f1eb;
}

.page--origin .process .tl-week,
.page--origin .process .section-tag {
  color: #ec691d;
}

.page--origin .process .section-tag::before {
  background: #ec691d;
}

.page--origin .process .tl-desc {
  color: rgba(245, 241, 235, 0.72);
}

.page--origin .timeline::before {
  content: none;
}

.page--origin .tl-item {
  position: relative;
  padding: 26px 24px 28px;
}

.page--origin .process .tl-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
  overflow: visible;
}

.page--origin .tl-item--week5 {
  z-index: 2;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(27, 27, 27, 0.97) 0%, rgba(21, 21, 21, 0.95) 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

.page--origin .tl-item--week5::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(21, 21, 21, 0) 52%, rgba(21, 21, 21, 0.88) 76%, rgba(21, 21, 21, 0.98) 100%);
  z-index: 0;
  pointer-events: none;
}

.page--origin .tl-item--week5 > *:not(.strategy-piece-knight) {
  position: relative;
  z-index: 2;
}

.page--origin .tl-dot {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 0 18px;
  border-radius: 50%;
  border: 2px solid #ec691d;
  background: #1a1a1a;
  box-shadow: 0 0 0 6px rgba(236, 105, 29, 0.08);
}

.page--origin .process .tl-week {
  display: block;
  margin-bottom: 8px;
}

.page--origin .tl-title {
  margin-bottom: 10px;
  font-size: 19px;
  line-height: 1.18;
}

.page--origin .origin-cta {
  padding-bottom: 0;
}

.page--origin .cta-body {
  margin-bottom: 24px;
}

.page--origin .page-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin: 72px 20px 0;
}

.page--origin .page-nav-single {
  justify-items: stretch;
}

.page--origin .page-nav-item {
  padding: 24px 22px;
  border: 1px solid var(--border);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: border-color 0.3s, background 0.3s;
}

.page--origin .page-nav-item:hover {
  border-color: var(--border-orange);
  background: rgba(236, 105, 29, 0.02);
}

.page--origin .page-nav-item.next {
  justify-content: flex-end;
  text-align: right;
}

.page--origin .pn-dir {
  margin-bottom: 6px;
  color: var(--gray);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.page--origin .pn-title {
  color: var(--off-white);
  font-family: 'Sora', sans-serif;
  font-size: 22px;
  font-weight: 300;
}

.page--origin .pn-arrow {
  color: var(--orange);
  font-size: 24px;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.page--origin .page-nav-item.next:hover .pn-arrow {
  transform: translate(4px, -4px);
}

.page--origin .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.page--origin .reveal.visible {
  opacity: 1;
  transform: none;
}

.page--origin .reveal-delay-1 { transition-delay: 0.1s; }
.page--origin .reveal-delay-2 { transition-delay: 0.2s; }
.page--origin .reveal-delay-3 { transition-delay: 0.3s; }

@keyframes needleFloat {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-3deg); }
  70% { transform: rotate(3deg); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes foxWaveRun {
  0% {
    transform: translate(-140px, -50%) translateY(4px);
  }
  12% {
    transform: translate(calc(12vw - 140px), -50%) translateY(-8px);
  }
  25% {
    transform: translate(calc(25vw - 140px), -50%) translateY(10px);
  }
  38% {
    transform: translate(calc(38vw - 140px), -50%) translateY(-10px);
  }
  50% {
    transform: translate(calc(50vw - 140px), -50%) translateY(8px);
  }
  64% {
    transform: translate(calc(64vw - 140px), -50%) translateY(-12px);
  }
  78% {
    transform: translate(calc(78vw - 140px), -50%) translateY(10px);
  }
  90% {
    transform: translate(calc(90vw - 140px), -50%) translateY(-8px);
  }
  100% {
    transform: translate(calc(100vw + 140px), -50%) translateY(4px);
  }
}

@media (min-width: 720px) {
  .page--origin .strategy-parallax-break {
    background-attachment: fixed;
  }

  .page--origin .fox-divider {
    height: 48px;
    margin: 24px 0 -8px;
  }

  .page--origin .fox-wave-fox {
    width: 66px;
    animation-duration: 13s;
  }

  .page--origin .hero {
    padding: 102px 0 0;
  }

  .section-page-hero--origin .hero-actions,
  .section-editorial-cta--origin .cta-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px;
  }

  .page--origin .outputs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page--origin .not-for-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page--origin .timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page--origin .strategy-pieces {
    top: -80px;
    right: 28px;
    width: 250px;
    height: 300px;
  }

  .page--origin .strategy-piece-knight {
    right: -20px;
    bottom: -72px;
    width: 54%;
  }

  .page--origin .page-nav {
    grid-template-columns: 1fr 1fr;
    margin-left: 32px;
    margin-right: 32px;
  }

  .page--origin .page-nav-single .page-nav-item.next {
    grid-column: 2;
  }

}

@media (min-width: 980px) {
  .page--origin .fox-divider {
    height: 56px;
    margin: 32px 0 -8px;
  }

  .page--origin .fox-wave-fox {
    width: 74px;
    animation-duration: 14s;
  }

  .page--origin .hero {
    min-height: 100vh;
    padding: 120px 0 72px;
  }

  .page--origin .line-field {
    width: 50%;
    height: 100%;
  }

  .page--origin .hero-left {
    justify-content: center;
    padding: 0 30px 32px 0;
  }

  .page--origin .hero-path-indicator {
    margin-bottom: 28px;
  }

  .page--origin .hero h1 {
    max-width: 700px;
    font-size: clamp(54px, 6.1vw, 88px);
    margin-bottom: 26px;
  }

  .page--origin .hero-question {
    margin-bottom: 34px;
    font-size: 16px;
    max-width: 36ch;
  }

  .page--origin .hero-right {
    min-height: 620px;
    justify-content: flex-end;
    padding-top: 20px;
  }

  .page--origin .compass-wrap {
    width: min(38vw, 520px);
    height: min(38vw, 520px);
  }

  .page--origin .for-whom,
  .page--origin .outputs,
  .page--origin .not-for,
  .page--origin .process,
  .page--origin .origin-cta {
    padding: 128px 0 0;
  }

  .page--origin .outputs-header,
  .page--origin .process-header {
    margin-bottom: 52px;
  }

  .page--origin .outputs {
    margin-top: 120px;
    padding-top: 112px;
    padding-bottom: 112px;
  }

  .page--origin .section-headline,
  .page--origin .outputs-title,
  .page--origin .not-for-headline,
  .page--origin .process-title,
  .page--origin .cta-headline {
    font-size: clamp(38px, 4vw, 60px);
  }

  .page--origin .timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .page--origin .tl-item {
    padding: 26px 24px 28px;
  }

  .page--origin .tl-dot {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
    margin: 0 0 18px 0 !important;
  }

  .page--origin .process .tl-week {
    display: block !important;
    margin-bottom: 8px;
  }

  .page--origin .page-nav {
    margin: 92px 56px 0;
  }

  .page--origin .page-nav-item {
    padding: 34px 38px;
  }

  .page--origin .process {
    padding-bottom: 100px;
  }

  .page--origin .strategy-pieces {
    top: -110px;
    right: 42px;
    width: 340px;
    height: 430px;
  }

  .page--origin .strategy-piece-knight {
    right: -52px;
    bottom: -112px;
    width: 58%;
  }
}

@media (max-width: 1024px) {
  .page--origin .strategy-parallax-break {
    background-position: center center;
  }

  .page--origin .strategy-orange-blur {
    left: -10vw;
    bottom: -38%;
    width: clamp(320px, 48vw, 560px);
    opacity: 0.74;
  }
}


@media (min-width: 1280px) {
  .page--origin .hero {
    padding-top: 132px;
  }

  .page--origin .page-nav {
    margin-left: 64px;
    margin-right: 64px;
  }

}

@media (max-width: 719px) {
  .page--origin .strategy-parallax-break {
    height: 260px;
    background-attachment: scroll;
    background-position: center center;
  }

  .page--origin .strategy-orange-blur {
    left: -28vw;
    top: 76%;
    width: 90vw;
    opacity: 0.72;
    transform: translate3d(-50%, -50%, 0) rotate(-8deg);
  }

  .page--origin .fox-divider {
    height: 36px;
    margin: 14px 0 0;
  }

  .page--origin .fox-wave-fox {
    width: 48px;
    animation-duration: 10s;
  }

  .page--origin .strategy-pieces {
    position: relative;
    top: auto;
    right: auto;
    width: 180px;
    height: 220px;
    margin: 14px 0 18px auto;
  }

  .page--origin .strategy-piece-king {
    width: 44%;
  }

  .page--origin .strategy-piece-knight {
    right: -18px;
    bottom: -42px;
    width: 46%;
    opacity: 0.42;
  }
}


/* ===== clever_seo_article.css ===== */
.page--seo-article .seo-article-page {
  --seo-shell-max: 1320px;
  --seo-shell-x: clamp(40px, 6vw, 96px);
  --seo-hero-top: clamp(120px, 14vh, 180px);
  --seo-hero-bottom: clamp(56px, 8vh, 96px);
  --seo-section-space: clamp(80px, 10vh, 130px);
  --seo-grid-gap: clamp(56px, 7vw, 110px);
  background: linear-gradient(180deg, #fffaf5 0%, #f7f5f1 100%);
}

.seo-hero .container-fluid,
.seo-article > .container-fluid {
  width: 100%;
  max-width: var(--seo-shell-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--seo-shell-x);
  padding-right: var(--seo-shell-x);
  box-sizing: border-box;
}

.seo-hero {
  padding: var(--seo-hero-top) 0 var(--seo-hero-bottom);
  position: relative;
  overflow: hidden;
  border-bottom: 0;
}

.seo-hero-top {
  display: grid;
  grid-template-columns: minmax(560px, 0.9fr) minmax(320px, 0.45fr);
  gap: clamp(72px, 8vw, 140px);
  align-items: end;
  min-height: auto;
  padding-bottom: 0;
  margin-right: 0;
  margin-left: 0;
}

.seo-hero-top > * {
  width: auto;
  max-width: none;
  padding-right: 0;
  padding-left: 0;
}

.seo-hero h1 {
  max-width: 760px;
  margin-bottom: 0;
  font-size: clamp(48px, 4.2vw, 78px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.seo-hero-abstract {
  max-width: 360px;
  justify-self: end;
  align-self: end;
  padding-top: 0;
}

.seo-hero .hero-sub {
  max-width: 360px;
  margin: 0;
  padding-left: 32px;
  border-left: 2px solid var(--orange);
  color: #5f5f5f;
  font-size: clamp(20px, 1.45vw, 26px);
  font-weight: 400;
  line-height: 1.55;
}

.seo-hero-preview {
  position: relative;
  max-width: 1120px;
  margin: clamp(56px, 8vh, 96px) auto 0;
  padding-top: 0;
}

.seo-hero-preview-frame {
  position: relative;
  height: auto;
  aspect-ratio: 16 / 7;
  overflow: hidden;
}

.seo-hero-visual {
  margin: 0;
  position: absolute;
  inset: 0;
  will-change: transform;
}

.seo-hero-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 0;
  box-shadow: none;
}

.section-page-hero--seo .hero-breadcrumb {
  margin-bottom: 36px;
  color: var(--orange);
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-page-hero--seo .hero-breadcrumb a {
  color: #7a7a7a !important;
  text-decoration: none;
}

.section-page-hero--seo .hero-breadcrumb .sep {
  color: #a3a3a3 !important;
  margin: 0 8px;
}

.section-page-hero--seo .hero-breadcrumb .current {
  color: var(--orange) !important;
}

.section-page-hero--seo .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
  color: var(--orange);
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-page-hero--seo .hero-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--orange);
}

.seo-article {
  padding: 0 0 clamp(100px, 12vh, 150px);
}

.article-section-shell {
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.article-section-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
}

.article-section--split .article-main {
  grid-column: 1 / span 8;
  min-width: 0;
}

.article-section--split .article-aside {
  grid-column: 9 / span 4;
  min-width: 0;
}

.article-section--single .article-section-shell > .article-main {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
}

.article-section--single .article-content,
.article-section--single .rich-text,
.article-section--single .article-body {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
}

.seo-article-layout.article-section-shell.article-section-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}

.seo-article-layout .article-main,
.seo-article-layout .article-content,
.seo-article-layout .article-body,
.seo-article-layout .rich-text,
.seo-article-layout .seo-article-content,
.seo-article-layout .seo-article-content--wide {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.article-section--single .article-main > :is(p, h2, h3, figure, .text-content, .rich-text) {
  width: 100%;
  max-width: none;
}

.article-section--single .article-main > figure,
.article-section--single .article-main > .seo-figure,
.article-section--single .article-main > .article-image {
  max-width: none;
}

.editorial-block {
  margin-top: var(--seo-section-space);
  margin-bottom: var(--seo-section-space);
}

.editorial-block--intro {
  padding-top: 0;
  margin-top: 0;
}

.seo-article-content {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.seo-article-content--wide {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.seo-article-content > p,
.seo-article-content > h2,
.seo-article-content > figure,
.seo-article-content--wide > p,
.seo-article-content--wide > h2,
.seo-article-content--wide > figure {
  width: 100%;
  max-width: 100%;
}

.seo-article-content h2 {
  margin: 0 0 28px;
  font-family: "Sora", sans-serif;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.12;
  color: #1b1b1b;
}

.seo-article-content p {
  margin-bottom: 0;
  font-size: 18px;
  line-height: 1.75;
  color: #4f4f4f;
}

.seo-article-content p + p,
.editorial-col p + p,
.editorial-band p + p {
  margin-top: 20px;
}

.seo-figure {
  margin: clamp(48px, 7vh, 80px) auto;
  width: 100%;
}

.seo-figure img {
  width: 100%;
  display: block;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06);
}

.seo-figure-wide img {
  aspect-ratio: 16 / 9;
}

.seo-figure-mid img {
  aspect-ratio: 4 / 3;
}

.seo-figure-narrow img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
  max-width: none;
}

.seo-figure figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: #7a7a7a;
}

.editorial-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--seo-grid-gap);
  align-items: start;
  max-width: 1180px;
  margin: var(--seo-section-space) auto;
}

.editorial-split--2-1 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.editorial-col h2 {
  margin: 0 0 18px;
  font-family: "Sora", sans-serif;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  color: #1b1b1b;
}

.editorial-col p {
  margin: 0;
  font-size: 18px;
  line-height: 1.75;
  color: #585858;
}

.editorial-note {
  padding: 28px;
  border: 1px solid rgba(236, 105, 29, 0.14);
  border-radius: 18px;
  background: #fbfaf8;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.04);
}

.editorial-note-label {
  display: inline-flex;
  margin-bottom: 16px;
  color: var(--orange);
  font-family: "Sora", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.seo-video-figure {
  margin: 0;
  width: 100%;
}

.seo-video-figure video {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  background: #111111;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.1);
}

.seo-video-figure figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: #7a7a7a;
}

.editorial-grid {
  display: grid;
  gap: 24px;
  max-width: 1180px;
  margin: clamp(56px, 8vh, 96px) auto;
}

.editorial-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.editorial-card {
  height: 100%;
  padding: 28px;
  border: 1px solid rgba(236, 105, 29, 0.14);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.04);
}

.editorial-card h3 {
  margin: 0 0 14px;
  font-family: "Sora", sans-serif;
  font-size: 28px;
  line-height: 1.12;
  color: #1b1b1b;
}

.editorial-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #585858;
}

.editorial-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(64px, 9vh, 110px) 0;
  margin-top: var(--seo-section-space);
  margin-bottom: var(--seo-section-space);
  background: linear-gradient(135deg, #151515 0%, #23232b 100%);
}

.editorial-band-inner {
  width: 100%;
  max-width: var(--seo-shell-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--seo-shell-x);
  padding-right: var(--seo-shell-x);
  box-sizing: border-box;
}

.editorial-band h2 {
  margin: 0 0 18px;
  max-width: none;
  color: #ffffff;
  font-family: "Sora", sans-serif;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.04;
}

.editorial-band p {
  margin: 0;
  max-width: none;
  width: 100%;
  color: rgba(255,255,255,0.76);
  font-size: 18px;
  line-height: 1.85;
}

@media (max-width: 980px) {
  .seo-hero .container-fluid,
  .seo-article > .container-fluid {
    width: 100%;
    max-width: none;
    padding-left: var(--seo-shell-x);
    padding-right: var(--seo-shell-x);
  }

  .seo-hero {
    padding: 132px 0 72px;
  }

  .seo-hero-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    min-height: auto;
  }

  .seo-hero h1 {
    max-width: none;
    font-size: clamp(38px, 6vw, 56px);
  }

  .seo-hero-abstract {
    max-width: 560px;
    justify-self: start;
    padding-top: 0;
  }

  .seo-hero-preview-frame {
    height: auto;
    aspect-ratio: 16 / 8;
  }

  .seo-article {
    padding-left: 0;
    padding-right: 0;
  }

  .seo-article-layout {
    display: block;
  }

  .article-section-grid,
  .editorial-split--2-1,
  .editorial-grid--3 {
    grid-template-columns: 1fr;
  }

  .article-section--split .article-main,
  .article-section--split .article-aside,
  .article-section--single .article-section-shell > .article-main {
    grid-column: 1 / -1;
  }

  .editorial-band {
    padding: 72px 0;
  }

}

@media (max-width: 720px) {
  .seo-hero {
    padding: 116px 0 56px;
  }

  .seo-hero h1 {
    max-width: none;
    font-size: clamp(40px, 11vw, 56px);
    line-height: 0.96;
  }

  .seo-hero .hero-sub {
    padding-left: 24px;
    font-size: clamp(18px, 4.7vw, 20px);
    line-height: 1.6;
  }

  .seo-hero-preview-frame {
    aspect-ratio: 4 / 3;
  }

  .section-page-hero--seo .hero-breadcrumb {
    margin-bottom: 22px;
  }

  .seo-article {
    padding-left: 0;
    padding-right: 0;
  }

  .editorial-block + .editorial-block {
    margin-top: 54px;
  }

  .seo-article-content p {
    font-size: 16px;
    line-height: 1.85;
  }

  .seo-figure-narrow img {
    max-width: none;
    width: 100%;
  }

  .editorial-note,
  .editorial-card {
    padding: 24px;
  }

  .editorial-band {
    padding: 56px 0;
  }

  .editorial-band-inner,
  .seo-hero .container-fluid,
  .seo-article > .container-fluid {
    padding-left: 28px;
    padding-right: 28px;
  }

  .article-section--single .article-main > :is(p, h2, h3, figure, .text-content, .rich-text) {
    max-width: 100%;
  }
}


/* ===== clever_sitemap.css ===== */
.page--sitemap .sitemap-page {
  background: linear-gradient(180deg, #ffffff 0%, #f7f5f1 100%);
}

.sitemap-hero {
  padding: 152px 56px 46px;
  position: relative;
  overflow: hidden;
}

.sitemap-hero::after {
  content: "";
  position: absolute;
  right: 56px;
  top: 126px;
  width: min(28vw, 340px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(236,105,29,0.12);
  box-shadow:
    0 0 0 20px rgba(236,105,29,0.02),
    0 0 0 44px rgba(236,105,29,0.01);
  pointer-events: none;
}

.sitemap-hero-row {
  min-height: 320px;
  align-items: center;
}

.section-page-hero--sitemap .hero-breadcrumb {
  margin-bottom: 20px;
  color: var(--orange);
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-page-hero--sitemap .hero-breadcrumb a {
  color: #7a7a7a !important;
  text-decoration: none;
}

.section-page-hero--sitemap .hero-breadcrumb .sep {
  color: #a3a3a3 !important;
  margin: 0 8px;
}

.section-page-hero--sitemap .hero-breadcrumb .current {
  color: var(--orange) !important;
}

.section-page-hero--sitemap .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--orange);
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-page-hero--sitemap .hero-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--orange);
}

.sitemap-sub {
  max-width: 620px;
}

.sitemap-grid-wrap {
  padding: 12px 56px 100px;
}

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.sitemap-group {
  padding: 30px 32px;
  border: 1px solid rgba(236,105,29,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.86);
}

.sitemap-label {
  margin-bottom: 18px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}

.sitemap-group ul {
  list-style: none;
}

.sitemap-group li + li {
  margin-top: 14px;
}

.sitemap-group a {
  color: #505050;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.5;
  transition: color .2s ease, transform .2s ease;
  display: inline-flex;
}

.sitemap-group a:hover,
.sitemap-group a[aria-current="page"] {
  color: var(--orange);
  transform: translateX(2px);
}

@media (max-width: 980px) {
  .sitemap-hero {
    padding: 132px 32px 34px;
  }

  .sitemap-hero::after {
    display: none;
  }

  .sitemap-grid-wrap {
    padding-left: 32px;
    padding-right: 32px;
  }

  .sitemap-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .sitemap-hero {
    padding: 116px 22px 28px;
  }

  .section-page-hero--sitemap .hero-breadcrumb {
    margin-bottom: 16px;
  }

  .sitemap-grid-wrap {
    padding-left: 22px;
    padding-right: 22px;
  }

  .sitemap-group {
    padding: 24px 22px;
  }
}


/* ===== clever_traction.css ===== */


  /* ─── HERO ─── */
  .hero {
    min-height: 100vh;
    display: grid; grid-template-columns: 1fr 1fr;
    position: relative; overflow: hidden;
  }

  .hero-bg {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 55% 65% at 75% 55%, #0c0e08 0%, #0a0a0a 60%);
  }

  /* Right panel: minimal rocket visual — momentum and lift */
  .hero-right {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .signal-wrap {
    position: relative; width: min(480px, 80vw); height: min(480px, 80vw);
    opacity: 0; animation: fadeIn 1s 0.6s forwards;
  }
  /* Pulse rings */
  .pulse-ring {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(236,105,29,0.15);
    animation: pulseOut 3s ease-out infinite;
  }
  .pulse-ring:nth-child(1) { width: 80px; height: 80px; animation-delay: 0s; }
  .pulse-ring:nth-child(2) { width: 80px; height: 80px; animation-delay: 0.9s; }
  .pulse-ring:nth-child(3) { width: 80px; height: 80px; animation-delay: 1.8s; }

  @keyframes pulseOut {
    0%   { width: 80px; height: 80px; opacity: 0.8; border-color: rgba(236,105,29,0.5); }
    100% { width: 460px; height: 460px; opacity: 0; border-color: rgba(236,105,29,0); }
  }

  .signal-chart {
    position: absolute; inset: 18px;
  }
  .signal-chart svg { width: 100%; height: 100%; }
  .rocket-visual {
    filter: drop-shadow(0 26px 54px rgba(236,105,29,0.12));
  }
  .rocket {
    transform-origin: 244px 230px;
    animation: rocketFloat 5.5s ease-in-out infinite;
  }
  .rocket-trail {
    transform-origin: 150px 350px;
    animation: trailPulse 2.8s ease-in-out infinite;
  }

  .signal-label-x {
    position: absolute; bottom: 8px; right: 0;
    font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(236,105,29,0.3);
  }
  .signal-label-y {
    position: absolute; top: 8px; left: 0;
    font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(236,105,29,0.3);
    writing-mode: vertical-rl; transform: rotate(180deg);
  }

  @keyframes rocketFloat {
    0%, 100% { transform: rotate(28deg) translate3d(0, 0, 0); }
    50% { transform: rotate(28deg) translate3d(0, -10px, 0); }
  }

  @keyframes trailPulse {
    0%, 100% { opacity: 0.72; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.04); }
  }

  .hero-left {
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 80px 100px 56px;
    position: relative; z-index: 2;
  }

  .hero-breadcrumb {
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--gray); margin-bottom: 48px;
    display: flex; align-items: center; gap: 10px;
    opacity: 0; animation: fadeUp 0.6s 0.1s forwards;
  }
  .hero-breadcrumb a { color: var(--gray); text-decoration: none; transition: color 0.2s; }
  .hero-breadcrumb a:hover { color: var(--off-white); }
  .hero-breadcrumb .sep { color: var(--gray-mid); }
  .hero-breadcrumb .current { color: var(--orange); }

  .hero-eyebrow {
    font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 28px;
    display: flex; align-items: center; gap: 12px;
    opacity: 0; animation: fadeUp 0.8s 0.2s forwards;
  }
  .hero-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--orange); }

  .hero h1 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(52px, 6.5vw, 96px);
    font-weight: 300; line-height: 1.0; letter-spacing: -0.025em;
    margin-bottom: 36px;
    opacity: 0; animation: fadeUp 0.9s 0.35s forwards;
  }
  .hero h1 em { font-style: italic; color: var(--orange); }

  .hero-question {
    font-family: 'Sora', sans-serif;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 300; font-style: italic;
    color: var(--gray); line-height: 1.55; max-width: 460px;
    border-left: 2px solid var(--border-orange); padding-left: 24px;
    margin-bottom: 52px;
    opacity: 0; animation: fadeUp 0.8s 0.5s forwards;
  }

  .hero-actions {
    display: flex; align-items: center; gap: 28px;
    opacity: 0; animation: fadeUp 0.8s 0.65s forwards;
  }

  /* ─── PREMISE ─── */
  .premise {
    padding: 160px 56px 0;
    border-top: 1px solid var(--border);
  }
  .premise-row { align-items: start; }
  .section-tag {
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 28px;
    display: flex; align-items: center; gap: 10px;
  }
  .section-tag::before { content: ''; width: 24px; height: 1px; background: var(--orange); }
  .premise-headline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(30px, 3.5vw, 50px);
    font-weight: 300; line-height: 1.15; letter-spacing: -0.02em;
    margin-bottom: 32px;
  }
  .premise-headline em { font-style: italic; color: var(--orange); }
  .premise-body { font-size: 14px; line-height: 1.9; color: var(--gray); }
  .premise-body p + p { margin-top: 20px; }
  .premise-body strong { color: var(--off-white); font-weight: 400; }

  /* KPI distinction panel */
  .kpi-panel {
    display: flex; flex-direction: column; gap: 14px;
  }
  .kpi-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .kpi-cell {
    padding: 26px 28px;
    border: 0;
    border-radius: 8px;
    background: #f6f6f6;
  }
  .kpi-cell.wrong { opacity: 1; background: #f2f2f2; }
  .kpi-cell.right { background: #fff3eb; box-shadow: inset 3px 0 0 rgba(236,105,29,0.75); }
  .kpi-cell-header {
    font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
    margin-bottom: 14px;
  }
  .kpi-cell.wrong .kpi-cell-header { color: #8d8d8d; }
  .kpi-cell.right .kpi-cell-header { color: var(--orange); }
  .kpi-metric {
    font-family: 'Sora', sans-serif;
    font-size: 17px; font-weight: 300;
    line-height: 1.4; color: #4f4f4f;
    display: flex; align-items: baseline; gap: 8px;
  }
  .kpi-metric.active { color: #202020; }
  .kpi-icon { font-size: 12px; }

  /* ─── TRAJECTORY BAND ─── */
  .trajectory-band {
    padding: 32px 0 12px;
    overflow: hidden;
  }
  .trajectory-band > .container-fluid {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .trajectory-stage {
    position: relative;
    width: 100%;
    min-height: 260px;
  }
  .trajectory-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .trajectory-glow {
    fill: none;
    stroke: url(#trajectoryGlow);
    stroke-width: 16;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.34;
    filter: url(#trajectoryBlur);
    stroke-dasharray: 2200;
    stroke-dashoffset: 2200;
    animation: trajectoryDraw 7.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  }
  .trajectory-line {
    fill: none;
    stroke: var(--orange);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 2200;
    stroke-dashoffset: 2200;
    animation: trajectoryDraw 7.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  }
  .trajectory-markers circle {
    fill: rgba(236,105,29,0.78);
    opacity: 0;
    animation: trajectoryMarkers 7.2s ease-in-out infinite;
  }
  .trajectory-rocket {
    opacity: 1;
    transform-box: fill-box;
    transform-origin: center;
  }
  .trajectory-rocket-shape {
    filter: drop-shadow(0 8px 16px rgba(236,105,29,0.22));
  }

  @keyframes trajectoryDraw {
    0% { stroke-dashoffset: 2200; }
    18% { stroke-dashoffset: 2200; }
    68% { stroke-dashoffset: 680; }
    100% { stroke-dashoffset: 0; }
  }

  @keyframes trajectoryMarkers {
    0%, 42% { opacity: 0; }
    54%, 100% { opacity: 1; }
  }

  /* ─── CHANNELS ─── */
  .channels {
    padding: 60px 56px 160px;
    background: linear-gradient(180deg, transparent, rgba(236,105,29,0.015), transparent);
  }
  .channels-header {
    align-items: start; margin-bottom: 80px;
  }
  .channels-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(32px, 4.5vw, 60px);
    font-weight: 300; line-height: 1.05; letter-spacing: -0.02em;
    margin-bottom: 22px;
  }
  .channels-title em { font-style: normal; color: var(--orange); }
  .channels-intro {
    max-width: 42ch;
    font-size: 14px; line-height: 1.85; color: var(--gray);
  }
  .traction-services {
    padding-top: 4px;
  }
  .traction-services-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .traction-services-list li {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 18px;
    align-items: baseline;
    padding: 13px 0;
    border-bottom: 1px solid rgba(34,34,42,0.1);
    color: #505050;
    font-size: 14px;
    line-height: 1.45;
  }
  .traction-services-list li:first-child {
    border-top: 1px solid rgba(34,34,42,0.1);
  }
  .traction-services-list span {
    color: rgba(236,105,29,0.72);
    font-family: 'Sora', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
  }

  /* Channel accordion */
  .channel-list { display: flex; flex-direction: column; gap: 0; }
  .channel-item {
    border-top: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s;
  }
  .channel-item:last-child { border-bottom: 1px solid var(--border); }
  .channel-item.open { background: rgba(236,105,29,0.02); }
  .channel-header {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 32px; align-items: center;
    padding: 28px 0;
  }
  .channel-num {
    font-family: 'Sora', sans-serif;
    font-size: 40px; font-weight: 300;
    color: rgba(236,105,29,0.2); line-height: 1;
    transition: color 0.3s;
  }
  .channel-item.open .channel-num { color: rgba(236,105,29,0.55); }
  .channel-info {}
  .channel-tag {
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 6px;
  }
  .channel-name {
    font-family: 'Sora', sans-serif;
    font-size: 24px; font-weight: 400;
  }
  .channel-toggle {
    width: 32px; height: 32px;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--gray);
    transition: transform 0.3s, border-color 0.3s, color 0.3s;
    flex-shrink: 0;
  }
  .channel-item.open .channel-toggle {
    transform: rotate(45deg);
    border-color: var(--orange); color: var(--orange);
  }
  .channel-body {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
    padding-bottom: 36px; padding-left: 92px;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.5s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.4s, padding 0.3s;
  }
  .channel-item.open .channel-body { max-height: 400px; opacity: 1; }
  .channel-desc { font-size: 13.5px; line-height: 1.8; color: var(--gray); }
  .channel-desc strong { color: var(--off-white); font-weight: 400; }
  .channel-outputs { }
  .ch-output-label {
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
  }
  .ch-output-label::before { content: ''; width: 14px; height: 1px; background: var(--orange); }
  .ch-output-list { display: flex; flex-direction: column; gap: 8px; }
  .ch-output-item {
    font-size: 12.5px; color: var(--gray);
    display: flex; align-items: baseline; gap: 10px;
  }
  .ch-output-item::before { content: '—'; color: rgba(236,105,29,0.4); font-size: 12px; flex-shrink: 0; }

  /* ─── HOW WE MEASURE ─── */
  .measurement {
    padding: 160px 56px;
    border-top: 0;
    position: relative;
    overflow: hidden;
/*    background:
      linear-gradient(rgba(14,14,14,0.72), rgba(14,14,14,0.82)),
      url("../img/cases/pull-quote-bg.jpg") center / cover fixed;*/
    color: #ffffff;
  }
  .measurement::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(236,105,29,0.18), transparent 34%);
    pointer-events: none;
  }
  .measurement > * {
    position: relative;
    z-index: 1;
  }
  .measurement-header { margin-bottom: 80px; }
  .measurement-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 300; line-height: 1.1; letter-spacing: -0.02em;
    color: #ffffff;
  }
  .measurement-title em { font-style: normal; color: var(--orange); }
  .measurement-sub {
    font-size: 14px; color: #f0f0f0; line-height: 1.75;
    margin-top: 20px; max-width: 540px;
  }

  .measurement-grid { margin-top: 0; }
  .meas-card {
    height: 100%;
    padding: 44px 40px;
    border: 0;
    border-radius: 8px;
    background: rgba(28,28,28,0.78);
    backdrop-filter: blur(12px);
    transition: background 0.3s, transform 0.3s;
  }
  .meas-card:hover { background: rgba(38,38,38,0.86); transform: translateY(-4px); }
  .meas-icon {
    width: 44px; height: 44px;
    border: 1px solid var(--border-orange);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--orange);
    margin-bottom: 28px;
  }
  .meas-title {
    font-size: 15px; font-weight: 400; color: #ffffff;
    margin-bottom: 12px; line-height: 1.3;
  }
  .meas-body { font-size: 13px; line-height: 1.75; color: #eeeeee; }

  /* ─── FUNNEL ─── */
  .funnel-section {
    padding: 160px 56px;
    border-top: 1px solid var(--border);
  }
  .funnel-text {}
  .funnel-headline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(30px, 3.5vw, 50px);
    font-weight: 300; line-height: 1.15; letter-spacing: -0.02em;
    margin-bottom: 28px;
  }
  .funnel-headline em { font-style: normal; color: var(--orange); }
  .funnel-body { font-size: 14px; line-height: 1.9; color: var(--gray); }
  .funnel-body p + p { margin-top: 16px; }
  .funnel-body strong { color: var(--off-white); font-weight: 400; }

  /* Visual funnel */
  .funnel-visual {
    display: flex; flex-direction: column; gap: 10px;
    align-items: center;
    padding: 34px 24px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(236,105,29,0.08), rgba(255,255,255,0.025));
  }
  .funnel-stage {
    padding: 20px 28px;
    border: 0;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    transition: transform 0.3s, background 0.3s;
    position: relative; overflow: hidden;
    min-height: 72px;
    clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
    background: rgba(255,255,255,0.055);
  }
  .funnel-stage:hover { transform: translateY(-2px); background: rgba(236,105,29,0.12); }
  .funnel-stage-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(236,105,29,0.18), rgba(236,105,29,0.03));
    transition: width 0.3s;
  }
  .funnel-stage:nth-child(1) { width: 100%; }
  .funnel-stage:nth-child(2) { width: 88%; }
  .funnel-stage:nth-child(3) { width: 74%; }
  .funnel-stage:nth-child(4) { width: 60%; }
  .funnel-stage:nth-child(5) { width: 46%; }
  .funnel-stage:nth-child(1) .funnel-stage-fill,
  .funnel-stage:nth-child(2) .funnel-stage-fill,
  .funnel-stage:nth-child(3) .funnel-stage-fill,
  .funnel-stage:nth-child(4) .funnel-stage-fill,
  .funnel-stage:nth-child(5) .funnel-stage-fill { width: 100%; }
  .funnel-stage-label {
    font-size: 13px; color: var(--off-white); position: relative; z-index: 1;
  }
  .funnel-stage-pct {
    font-family: 'Sora', sans-serif;
    font-size: 22px; font-weight: 300; color: var(--orange);
    position: relative; z-index: 1; flex-shrink: 0;
  }

  /* ─── NOT FOR ─── */
  .not-for {
    padding: 120px 56px;
    border-top: 1px solid var(--border);
  }
  .not-for-headline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 300; line-height: 1.2; letter-spacing: -0.02em;
  }
  .not-for-headline em { font-style: normal; color: var(--orange); }
  .not-for-body { font-size: 14px; line-height: 1.85; color: var(--gray); margin-top: 24px; }
  .not-for-list { display: flex; flex-direction: column; gap: 12px; }
  .nf-item {
    display: flex; align-items: baseline; gap: 16px; padding: 18px 24px;
    border: 1px solid var(--border);
    font-size: 13.5px; color: var(--gray); line-height: 1.5;
  }
  .nf-item::before { content: '×'; color: var(--gray-mid); font-size: 16px; flex-shrink: 0; }

  /* ─── CTA ─── */
  .traction-cta {
    padding: 96px 56px 160px;
    border-top: 0;
  }
  .cta-headline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(36px, 5vw, 72px);
    font-weight: 300; line-height: 1.05; letter-spacing: -0.025em;
  }
  .cta-headline em { font-style: normal; color: var(--orange); }
  .cta-body { font-size: 15px; line-height: 1.85; color: var(--gray); margin-bottom: 48px; max-width: 420px; }
  .cta-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

  /* System strip */
  .system-strip {
    margin: -40px 56px 96px;
    padding: 48px 56px;
    border: 0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(0,0,0,0.12);
    display: flex; align-items: center; justify-content: space-between;
    gap: 40px; flex-wrap: wrap;
    position: relative;
    z-index: 3;
  }
  .system-strip-text {}
  .system-strip-label {
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 8px;
    display: flex; align-items: center; gap: 8px;
  }
  .system-strip-label::before { content: ''; width: 16px; height: 1px; background: var(--orange); }
  .system-strip-headline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(20px, 2.5vw, 32px);
    font-weight: 300; line-height: 1.2;
    color: #1f1f1f;
  }
  .system-strip-headline em { font-style: normal; color: var(--orange); }
  .system-steps {
    display: flex; align-items: center; gap: 16px; flex-shrink: 0;
  }
  .sys-step {
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--gray); padding: 10px 20px;
    border: 1px solid var(--border);
    white-space: nowrap;
    transition: border-color 0.2s, color 0.2s;
  }
  .sys-step:hover { border-color: var(--border-orange); color: #1f1f1f; }
  .sys-step.active { border-color: var(--orange); color: var(--orange); }
  .sys-arrow { color: rgba(236,105,29,0.3); font-size: 16px; flex-shrink: 0; }

  /* Page nav */
  .page-nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    margin: 0 56px;
  }
  .page-nav-item {
    padding: 36px 48px; border: 1px solid var(--border);
    text-decoration: none; display: flex; align-items: center;
    transition: border-color 0.3s, background 0.3s; gap: 20px;
  }
  .page-nav-item:hover { border-color: var(--border-orange); background: rgba(236,105,29,0.02); }
  .page-nav-item.prev { justify-content: flex-start; }
  .page-nav-item.next { justify-content: flex-end; text-align: right; }
  .pn-dir { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); margin-bottom: 6px; }
  .pn-title { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 300; color: var(--off-white); }
  .pn-arrow { font-size: 24px; color: var(--orange); transition: transform 0.2s; flex-shrink: 0; }
  .page-nav-item.prev:hover .pn-arrow { transform: translateX(-4px); }
  .page-nav-item.next:hover .pn-arrow { transform: translate(4px, -4px); }

  @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  .reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.25,0.46,0.45,0.94),
                transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
  }
  .reveal.visible { opacity: 1; transform: none; }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }

  @media (max-width: 1100px) {
    .funnel-stage:nth-child(1),
    .funnel-stage:nth-child(2),
    .funnel-stage:nth-child(3),
    .funnel-stage:nth-child(4),
    .funnel-stage:nth-child(5) {
      width: 100%;
    }
  }

  @media (max-width: 760px) {
    .premise,
    .trajectory-band,
    .channels,
    .measurement,
    .funnel-section,
    .not-for,
    .traction-cta {
      padding: 96px 24px;
    }

    .premise {
      padding-bottom: 0;
    }

    .channels {
      padding-top: 60px;
    }

    .trajectory-band {
      padding-top: 20px;
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 8px;
    }

    .system-strip {
      margin-top: -24px;
    }

    .trajectory-stage {
      min-height: 132px;
    }

    .trajectory-rocket {
      transform: scale(2);
      transform-box: fill-box;
      transform-origin: center;
    }

    .kpi-row {
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .kpi-panel {
      gap: 10px;
    }

    .kpi-cell {
      padding: 16px 14px;
      min-height: 0;
    }

    .kpi-cell-header {
      margin-bottom: 10px;
      font-size: 8px;
      letter-spacing: 0.18em;
      line-height: 1.35;
    }

    .kpi-metric {
      font-size: 13px;
      line-height: 1.45;
    }

    .channel-body,
    .page-nav {
      grid-template-columns: 1fr;
    }

    .channel-header {
      grid-template-columns: 44px 1fr auto;
      gap: 18px;
      align-items: start;
      padding: 22px 0;
    }

    .channel-tag {
      font-size: 9px;
      letter-spacing: 0.16em;
      margin-bottom: 5px;
    }

    .channel-name {
      font-size: 20px;
      line-height: 1.18;
    }

    .channel-toggle {
      width: 28px;
      height: 28px;
      font-size: 16px;
    }

    .channel-body {
      padding-left: 0;
      gap: 18px;
      padding-bottom: 24px;
    }

    .channel-item.open .channel-body {
      max-height: 960px;
      opacity: 1;
    }

    .channel-desc,
    .ch-output-item {
      font-size: 13px;
      line-height: 1.65;
    }

    .ch-output-label {
      margin-bottom: 10px;
      font-size: 9px;
      letter-spacing: 0.16em;
    }

    .ch-output-list {
      gap: 10px;
    }

    .measurement {
      background-attachment: scroll;
    }

    .funnel-visual {
      padding: 22px 12px;
    }

    .funnel-stage {
      clip-path: none;
      padding: 18px;
      min-height: auto;
    }

    .system-strip {
      margin: 0 24px 72px;
      padding: 36px 28px;
    }

    .system-steps {
      width: 100%;
      flex-wrap: wrap;
    }

    .page-nav {
      margin: 0 24px;
    }

    .page-nav-item,
    .page-nav-item.next {
      justify-content: flex-start;
      text-align: left;
      padding: 28px;
    }
  }


/* ===== clever_vti.css ===== */
  /* ─── HERO ─── */
  .vti-hero {
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 56px 100px;
    position: relative; overflow: hidden;
  }

  /* Background canvas */
  .vti-bg {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 70% 40%, #100e04 0%, #0a0a0a 60%);
  }
  .vti-bg-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(236,105,29,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(236,105,29,0.03) 1px, transparent 1px);
    background-size: 80px 80px;
  }
  .vti-hero-loop {
    position: absolute;
    right: 8%;
    bottom: 100px;
    z-index: 1;
    width: clamp(180px, 16vw, 230px);
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    mix-blend-mode: normal;
    pointer-events: none;
  }
  /* Orbiting rings */
  .orbit-wrap {
    position: absolute; top: 50%; right: 8%;
    z-index: 0;
    transform: translateY(-50%);
    width: 560px; height: 560px;
  }
  .orbit {
    position: absolute; top: 50%; left: 50%;
    border: 1px solid var(--border-orange);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: spin linear infinite;
  }
  .orbit-1 { width: 560px; height: 560px; animation-duration: 40s; }
  .orbit-2 { width: 400px; height: 400px; animation-duration: 28s; animation-direction: reverse; }
  .orbit-3 { width: 260px; height: 260px; animation-duration: 18s; border-color: rgba(236,105,29,0.08); }
  .orbit-dot {
    position: absolute; width: 6px; height: 6px;
    background: var(--orange); border-radius: 50%;
    top: -3px; left: 50%; transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(236,105,29,0.6);
  }
  .orbit-center {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 80px;
    border: 1px solid rgba(236,105,29,0.25);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }
  .orbit-center-dot {
    width: 12px; height: 12px; background: var(--orange);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(236,105,29,0.5), 0 0 60px rgba(236,105,29,0.2);
  }

  @keyframes spin { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }

  /* Hero text */
  .vti-hero-content { position: relative; z-index: 2; max-width: 760px; }
  .hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 48px;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--orange);
    opacity: 0;
    animation: fadeUp 0.6s 0.1s forwards;
  }
  .hero-breadcrumb a {
    color: #7a7a7a;
    text-decoration: none;
    transition: color 0.2s;
  }
  .hero-breadcrumb a:hover { color: var(--orange); }
  .hero-breadcrumb .sep { color: #a3a3a3; }
  .hero-breadcrumb .current { color: var(--orange); }
  .vti-eyebrow {
    font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 32px;
    display: flex; align-items: center; gap: 12px;
    opacity: 0; animation: fadeUp 0.8s 0.2s forwards;
  }
  .vti-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--orange); }
  .vti-hero h1 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(52px, 7vw, 100px);
    font-weight: 300; line-height: 1.0; letter-spacing: -0.025em;
    margin-bottom: 36px;
    opacity: 0; animation: fadeUp 0.9s 0.35s forwards;
  }
  .vti-hero h1 em { font-style: normal; color: var(--orange); }
  .vti-hero-sub {
    font-size: 16px; line-height: 1.75; color: var(--gray);
    max-width: 520px; margin-bottom: 56px;
    opacity: 0; animation: fadeUp 0.8s 0.5s forwards;
  }
  .vti-hero-meta {
    display: flex; gap: 48px;
    opacity: 0; animation: fadeUp 0.8s 0.65s forwards;
  }
  .vti-hero-summary {
    display: block;
  }
  .vti-hero-loop-mobile {
    display: none;
  }
  .meta-item { }
  .meta-num {
    font-family: 'Sora', sans-serif;
    font-size: 36px; font-weight: 300; color: var(--orange);
    line-height: 1;
  }
  .meta-label {
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--gray); margin-top: 4px;
  }

  /* ─── PARADIGM SHIFT ─── */
.paradigm {
  padding: 160px 56px;
  border-top: 1px solid var(--border);
}
.paradigm > .row {
  align-items: center;
}
  .paradigm-visual {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    height: auto;
  }
  .paradigm-card {
    position: relative;
    padding: 32px 36px;
    border: 1px solid rgba(236,105,29,0.14);
    border-radius: 8px;
    background: #f6f6f6;
    color: #1b1b1b;
  }
  .paradigm-card-before {
    width: auto;
    top: auto;
    left: auto;
    opacity: 1;
  }
  .paradigm-card-after {
    width: auto;
    bottom: auto;
    right: auto;
    border-color: rgba(236,105,29,0.42);
    background: #ffffff;
  }
  .card-label {
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: #8a8a8a; margin-bottom: 16px;
  }
  .card-label-orange {
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 16px;
  }
  .card-text {
    font-family: 'Sora', sans-serif;
    font-size: 18px; font-weight: 300; line-height: 1.5;
    color: #585858;
  }
  .card-text-bright {
    font-family: 'Sora', sans-serif;
    font-size: 20px; font-weight: 300; line-height: 1.5;
    color: #1b1b1b;
  }
  .paradigm-connector {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    align-self: center;
    width: 44px; height: 44px;
    border: 1px solid var(--border-orange);
    border-radius: 50%; background: #ffffff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--orange); z-index: 2;
  }

  .paradigm-text {}
  .paradigm-tag {
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 28px;
    display: flex; align-items: center; gap: 10px;
  }
  .paradigm-tag::before { content: ''; width: 24px; height: 1px; background: var(--orange); }
  .paradigm-headline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(30px, 3.5vw, 48px);
    font-weight: 300; line-height: 1.2; letter-spacing: -0.02em;
    margin-bottom: 32px;
  }
  .paradigm-headline em { font-style: italic; color: var(--orange); }
  .paradigm-body {
    font-size: 14px; line-height: 1.9; color: var(--gray);
  }
  .paradigm-body p + p { margin-top: 20px; }
  .paradigm-body strong { color: var(--off-white); font-weight: 400; }

  /* ─── VTI TICKER ─── */
  .vti-ticker {
    overflow: hidden;
    padding: 24px 0;
    border-top: 1px solid rgba(236,105,29,0.2);
    border-bottom: 1px solid rgba(236,105,29,0.2);
    background: #151515;
    color: #f6f6f6;
  }
  .ticker-track {
    display: flex;
    gap: 80px;
    width: max-content;
    animation: tickerScroll 28s linear infinite;
    will-change: transform;
  }
  .ticker-track span {
    white-space: nowrap;
    font-family: 'Sora', sans-serif;
    font-size: clamp(18px, 2vw, 30px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
  }
  .ticker-track strong {
    color: var(--orange);
    font-weight: 700;
  }

  /* ─── METHOD STEPS ─── */
.method {
  padding: 160px 56px 80px;
  background: linear-gradient(180deg, transparent, rgba(236,105,29,0.015), transparent);
}
.method-header {
  align-items: end;
  margin-bottom: 100px;
}
  .method-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 300; line-height: 1.05; letter-spacing: -0.02em;
  }
  .method-title em { font-style: normal; color: var(--orange); }
  .method-intro {
    max-width: 560px;
    font-size: 16px; line-height: 1.75; color: #585858;
  }

  .impact-arrow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    gap: 2px;
    margin: 0 0 120px;
    padding: 0;
    background: transparent;
    filter: none;
  }
  .impact-segment {
    --segment-color: var(--orange);
    position: relative;
    min-height: 124px;
    padding: 18px 26px 54px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease, color 0.25s ease;
    isolation: isolate;
  }
  .impact-segment::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(90deg, var(--segment-color), rgba(236,105,29,0.58));
    clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 50%, calc(100% - 32px) 100%, 0 100%);
    opacity: 0.86;
    transition: background 0.25s ease, opacity 0.25s ease;
  }
  .impact-segment:hover,
  .impact-segment:focus-visible {
    transform: translateY(-6px);
    filter: saturate(1.08) brightness(1.03);
    z-index: 2;
    outline: none;
  }
  .impact-segment:hover::before,
  .impact-segment:focus-visible::before {
    background: linear-gradient(90deg, var(--orange), rgba(236,105,29,0.74));
    opacity: 1;
  }
  .impact-segment-1 { --segment-color: rgba(236,105,29,0.42); }
  .impact-segment-2 { --segment-color: rgba(236,105,29,0.5); }
  .impact-segment-3 { --segment-color: rgba(236,105,29,0.64); }
  .impact-segment-4 { --segment-color: rgba(236,105,29,0.78); }
  .impact-segment-5 { --segment-color: rgba(236,105,29,0.92); }
  .impact-band {
    display: none;
  }
  .impact-phase {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    display: inline-block;
    color: rgba(255,255,255,0.82);
    font-family: 'Epilogue', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
  }
  .impact-phase strong {
    display: inline;
    font-family: 'Epilogue', sans-serif;
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
  }
  .impact-name {
    font-family: 'Sora', sans-serif;
    width: 100%;
    margin-top: 12px;
    font-size: clamp(17px, 1.7vw, 27px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: center;
  }
  .impact-caption {
    position: absolute;
    left: 18px;
    right: 24px;
    top: 110px;
    min-height: 0;
    margin-top: 0;
    color: #202020;
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    transform: none;
    white-space: normal;
  }

  .method-steps {
    display: flex; flex-direction: column; gap: 0;
  }
  .method-step {
    display: grid;
    grid-template-columns: 80px 1fr 1fr;
    gap: 48px;
    padding: 56px 0;
    border-top: 1px solid var(--border);
    align-items: start;
    cursor: pointer;
    transition: background 0.3s;
    position: relative;
  }
  .method-step:last-child { border-bottom: 1px solid var(--border); }
  .method-step.active { background: rgba(236,105,29,0.02); }
  .method-step-num {
    font-family: 'Sora', sans-serif;
    font-size: 48px; font-weight: 300;
    color: rgba(236,105,29,0.2);
    line-height: 1; padding-top: 4px;
    transition: color 0.3s;
  }
  .method-step.active .method-step-num { color: rgba(236,105,29,0.6); }
  .method-step-left {}
  .method-step-phase {
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 12px;
  }
  .method-step-name {
    font-family: 'Sora', sans-serif;
    font-size: 28px; font-weight: 400;
    line-height: 1.2; margin-bottom: 16px;
  }
  .method-step-desc {
    font-size: 13.5px; line-height: 1.75; color: var(--gray);
  }
  .method-step-right {
    padding-top: 40px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.4s;
  }
  .method-step.active .method-step-right {
    max-height: 400px; opacity: 1;
  }
  .method-detail-label {
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
  }
  .method-detail-label::before { content: ''; width: 16px; height: 1px; background: var(--orange); }
  .method-detail-title {
    font-size: 13px; font-weight: 500; color: var(--off-white);
    margin-bottom: 8px;
  }
  .method-detail-text {
    font-size: 13px; line-height: 1.75; color: var(--gray);
    margin-bottom: 24px;
  }
  .method-output {
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px;
  }
  .output-tag {
    font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--orange); border: 1px solid var(--border-orange);
    padding: 6px 14px;
  }
  .method-step-toggle {
    position: absolute; right: 0; top: 56px;
    width: 32px; height: 32px;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--gray);
    transition: transform 0.3s, border-color 0.3s, color 0.3s;
  }
  .method-step.active .method-step-toggle {
    transform: rotate(45deg);
    border-color: var(--orange);
    color: var(--orange);
  }

  /* ─── CESARE ─── */
.cesare {
  padding: 80px 56px 50px;
  border-top: 0;
  position: relative;
  z-index: 2;
}
.cesare-inner {
  align-items: start;
}
  .cesare-left {}
  .cesare-tag {
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 28px;
    display: flex; align-items: center; gap: 10px;
  }
  .cesare-tag::before { content: ''; width: 24px; height: 1px; background: var(--orange); }
  .cesare-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(36px, 4.5vw, 64px);
    font-weight: 300; line-height: 1.05; letter-spacing: -0.025em;
    margin-bottom: 36px;
  }
  .cesare-title em { font-style: normal; color: var(--orange); }
  .cesare-body {
    font-size: 14px; line-height: 1.9; color: var(--gray);
  }
  .cesare-body p + p { margin-top: 20px; }
  .cesare-body strong { color: var(--off-white); font-weight: 400; }

  .cesare-right {
    position: relative;
    z-index: 3;
  }
  .cesare-diagram {
    background: #f6f6f6;
    border: 1px solid rgba(236,105,29,0.16);
    border-radius: 8px;
    padding: 44px;
    margin-bottom: 32px;
    position: relative; overflow: visible;
    box-shadow: 0 24px 58px rgba(0,0,0,0.08);
  }
  .cesare-diagram::before {
    content: 'C'; position: absolute; right: -10px; bottom: -20px;
    font-family: 'Sora', sans-serif;
    font-size: 180px; font-weight: 300;
    color: rgba(236,105,29,0.06); line-height: 1;
    pointer-events: none;
  }
  .diagram-flow {
    display: flex; flex-direction: column; gap: 0;
    position: relative;
    overflow: visible;
    padding-right: 240px;
  }
  .diagram-flow::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 28px;
    bottom: 28px;
    width: 1px;
    background: rgba(236,105,29,0.28);
  }
  .diagram-node {
    display: flex; align-items: flex-start; gap: 20px;
    padding: 18px 0 18px 56px;
    border-bottom: 0;
    position: relative;
    z-index: 1;
  }
  .diagram-node:last-child { border-bottom: none; }
  .node-icon {
    position: absolute;
    left: 0;
    top: 18px;
    width: 36px; height: 36px; flex-shrink: 0;
    border: 1px solid rgba(236,105,29,0.36);
    border-radius: 50%;
    background: #ffffff;
    color: var(--orange);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
  }
  .node-label {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 2px 0;
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #585858;
    line-height: 1.6;
  }
  .node-label strong {
    display: block;
    font-size: 16px;
    color: #1f1f1f;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 0;
    text-transform: none;
  }
  .node-label span {
    display: block;
    max-width: 30ch;
    color: #666666;
    font-size: 13px;
    line-height: 1.65;
  }
  .diagram-arrow {
    display: none;
  }
  .cesare-iphone-float {
    position: absolute;
    right: -8px;
    top: 50%;
    width: clamp(260px, 23vw, 420px);
    height: auto;
    z-index: 3;
    pointer-events: none;
    will-change: transform;
    transform: translateY(-50%);
    animation: cesarePhoneFloat 5.5s ease-in-out infinite;
    filter: drop-shadow(0 28px 42px rgba(0,0,0,0.18));
  }

  @keyframes cesarePhoneFloat {
    0% {
      transform: translateY(-50%) translateX(0) rotate(0deg);
    }
    50% {
      transform: translateY(calc(-50% - 12px)) translateX(4px) rotate(1deg);
    }
    100% {
      transform: translateY(-50%) translateX(0) rotate(0deg);
    }
  }

  /* Not section */
  .cesare-not {
    border: 1px solid rgba(236,105,29,0.28);
    border-radius: 8px;
    padding: 36px 40px;
    margin-bottom: -200px;
    position: relative;
    z-index: 4;
    background: linear-gradient(180deg, rgba(38,24,14,0.98), rgba(18,18,18,0.98));
    box-shadow: 0 32px 76px rgba(0,0,0,0.28);
  }
  .not-title {
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: #ffffff; margin-bottom: 24px;
  }
  .not-items { display: flex; flex-direction: column; gap: 12px; }
  .not-item {
    display: flex; align-items: baseline; gap: 12px;
    font-size: 14.5px; color: #f3ece4; line-height: 1.7;
  }
  .not-item::before {
    content: '×'; color: rgba(236,105,29,0.96);
    font-size: 22px; font-weight: 700; flex-shrink: 0; line-height: 0.9;
  }

  /* ─── MEASUREMENT SYSTEM ─── */
  .measurement-system {
    padding: 180px 56px 140px;
    border-top: 1px solid rgba(236,105,29,0.12);
    background:
      radial-gradient(circle at 18% 10%, rgba(236,105,29,0.14), transparent 24%),
      linear-gradient(180deg, rgba(236,105,29,0.04), transparent 36%),
      #171717;
  }
  .measurement-header {
    align-items: end;
    margin-bottom: 72px;
  }
  .measurement-tag {
    font-family: 'Sora', sans-serif;
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    font-weight: 700;
    color: var(--orange); margin-bottom: 24px;
    display: flex; align-items: center; gap: 10px;
    line-height: 1.2;
  }
  .measurement-tag::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--orange);
  }
  .measurement-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(34px, 4.4vw, 62px);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: #ffffff;
  }
  .measurement-intro {
    max-width: 620px;
    margin-left: auto;
    color: #bdbdbd;
    font-size: 15px;
    line-height: 1.85;
  }
  .measurement-grid-row {
    margin-top: 0;
  }
  .measurement-card {
    height: 100%;
    padding: 34px 32px 32px;
    border: 1px solid rgba(236,105,29,0.14);
    border-radius: 8px;
    background: rgba(255,255,255,0.045);
    box-shadow: 0 22px 52px rgba(0,0,0,0.12);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  }
  .measurement-card:hover {
    border-color: rgba(236,105,29,0.28);
    box-shadow: 0 26px 60px rgba(236,105,29,0.08);
    transform: translateY(-4px);
  }
  .measurement-card-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
  }
  .measurement-num {
    font-family: 'Sora', sans-serif;
    font-size: 42px;
    font-weight: 300;
    line-height: 1;
    color: rgba(236,105,29,0.28);
  }
  .measurement-code {
    font-family: 'Sora', sans-serif;
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 800;
    line-height: 1;
    color: var(--orange);
    text-transform: uppercase;
    text-align: right;
  }
  .measurement-card-title {
    margin-bottom: 10px;
    font-family: 'Sora', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.12;
    color: #ffffff;
  }
  .measurement-context {
    margin-bottom: 18px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.5;
    text-transform: uppercase;
    color: #8a8a8a;
  }
  .measurement-body {
    color: #bdbdbd;
    font-size: 14px;
    line-height: 1.8;
  }

  /* ─── BENEFITS ─── */
  .benefits {
    padding: 120px 56px 140px;
    border-top: 1px solid rgba(236,105,29,0.18);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.1)),
      url("../img/vti/benefits-bg.jpg") center / cover no-repeat;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  .benefits::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(248,248,248,0.1), rgba(248,248,248,0.22)),
      radial-gradient(circle at 16% 82%, rgba(255,255,255,0.42), transparent 26%);
    pointer-events: none;
  }
  .benefits-header {
    font-family: 'Sora', sans-serif;
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 300; line-height: 1.2; letter-spacing: -0.02em;
    margin-bottom: 72px; max-width: 560px;
    color: #1b1b1b;
  }
  .benefits-header em { font-style: normal; color: var(--orange); }
.benefits-grid-row {
  margin-top: 0;
  position: relative;
  z-index: 1;
  overflow: visible;
}
.benefit {
  height: 100%;
  padding: 48px 40px;
  border: 1px solid rgba(236,105,29,0.18);
  border-radius: 8px;
    background: rgba(255,255,255,0.92);
    position: relative;
    overflow: visible;
    backdrop-filter: blur(4px);
    box-shadow: 0 20px 48px rgba(137, 118, 190, 0.08);
    transition: border-color 0.3s, box-shadow 0.3s;
  }
.benefit > *:not(.benefit-prism) {
  position: relative;
  z-index: 1;
}
  .benefit:hover {
    border-color: var(--border-orange);
    box-shadow: 0 26px 56px rgba(236,105,29,0.12);
  }
  .benefit-num {
    font-family: 'Sora', sans-serif;
    font-size: 56px; font-weight: 300;
    color: rgba(236,105,29,0.12); line-height: 1;
    margin-bottom: 32px;
  }
  .benefit-title {
    font-size: 15px; font-weight: 400; color: #1b1b1b;
    margin-bottom: 16px; line-height: 1.4;
  }
  .benefit-body {
    font-size: 13.5px; line-height: 1.75; color: #5d5d5d;
  }
  .benefit-prism {
    position: absolute;
    top: -168px;
    right: -8px;
    width: clamp(180px, 20vw, 290px);
    height: auto;
    pointer-events: none;
    z-index: 6;
    transform-origin: 58% 48%;
    animation: prismFloat 6.8s ease-in-out infinite;
    filter: drop-shadow(0 26px 42px rgba(123, 92, 174, 0.18));
  }

  @keyframes prismFloat {
    0% { transform: rotate(-7deg) translateY(0); }
    50% { transform: rotate(6deg) translateY(-6px); }
    100% { transform: rotate(-7deg) translateY(0); }
  }

  /* ─── CTA ─── */
  .vti-cta {
    padding: 140px 56px;
    text-align: center;
    border-top: 1px solid var(--border);
    position: relative; overflow: hidden;
  }
  .vti-cta::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(236,105,29,0.04) 0%, transparent 70%);
    pointer-events: none;
  }
  .vti-cta-label {
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 28px;
  }
  .vti-cta h2 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(36px, 5vw, 68px);
    font-weight: 300; line-height: 1.1; letter-spacing: -0.02em;
    margin-bottom: 28px;
  }
  .vti-cta h2 em { font-style: normal; color: var(--orange); }
  .vti-cta p {
    font-size: 15px; color: var(--gray); line-height: 1.75;
    max-width: 480px; margin: 0 auto 52px;
  }

@media (max-width: 1100px) {
  .vti-hero,
  .paradigm,
  .method,
  .cesare,
  .measurement-system,
  .benefits,
  .vti-cta {
    padding-left: 32px;
    padding-right: 32px;
  }

  .vti-hero-loop {
    right: 40px;
    width: 170px;
  }

  .method-header {
    margin-bottom: 64px;
  }

    .impact-arrow {
      grid-template-columns: 1fr;
      gap: 12px;
      padding: 0;
      filter: none;
    }

    .impact-segment {
      width: 100%;
      min-height: auto;
      gap: 10px;
      border-radius: 8px;
      padding: 24px 24px 28px;
    }

    .impact-segment::before {
      height: 100%;
      clip-path: none;
      border-radius: 8px;
    }

    .impact-caption {
      position: static;
      min-height: 0;
      margin-top: 18px;
      color: rgba(255,255,255,0.9);
      text-align: left;
      white-space: normal;
    }

    .cesare {
      padding-bottom: 120px;
    }

    .cesare-not {
      margin-bottom: 0;
    }

  .benefits {
    padding-top: 120px;
  }
}

  @media (max-width: 760px) {
    .vti-hero,
    .paradigm,
    .method,
    .cesare,
    .measurement-system,
    .benefits,
    .vti-cta {
      padding-left: 20px;
      padding-right: 20px;
    }

    .vti-hero {
      min-height: auto;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 148px;
      padding-bottom: 56px;
    }

    .vti-hero .hero-layout {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .vti-hero .hero-layout > .row {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    .vti-hero .hero-layout > .row > * {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .vti-hero-content {
      padding-left: 20px !important;
      padding-right: 20px !important;
    }

    .vti-hero-loop {
      display: none;
    }

    .orbit-wrap {
      display: none;
    }

    .vti-hero h1 {
      font-size: clamp(38px, 12vw, 58px);
      margin-bottom: 26px;
    }

    .vti-hero-sub {
      font-size: 14px;
      line-height: 1.72;
      margin-bottom: 34px;
      max-width: none;
    }

    .vti-hero-summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 20px;
    }

    .paradigm-visual {
      grid-template-columns: 1fr;
    }

    .paradigm-connector {
      justify-self: center;
      transform: rotate(90deg);
    }

    .cesare-diagram,
    .cesare-not,
    .measurement-card,
    .benefit {
      padding: 28px;
    }

    .diagram-node {
      align-items: flex-start;
    }

    .diagram-flow {
      padding-right: 170px;
    }

    .cesare-iphone-float {
      width: clamp(220px, 30vw, 320px);
      right: -10px;
    }

    .node-label {
      gap: 6px;
    }

    .node-label span {
      max-width: none;
      font-size: 12px;
      line-height: 1.6;
    }

    .vti-hero-meta {
      flex-direction: column;
      gap: 14px;
      min-width: 0;
      align-self: start;
    }

    .vti-hero-loop-mobile {
      display: block;
      width: min(48vw, 160px);
      height: auto;
      align-self: start;
      justify-self: end;
      margin: 4px 0 0;
      opacity: 0.92;
      pointer-events: none;
    }

    .meta-num {
      font-size: 27px;
    }

    .meta-label {
      font-size: 10px;
      line-height: 1.45;
      max-width: 20ch;
    }

    .paradigm {
      padding-top: 50px;
      padding-bottom: 50px;
    }

    .paradigm-headline {
      font-size: clamp(28px, 9vw, 40px);
      margin-bottom: 22px;
    }

    .paradigm-body {
      font-size: 13.5px;
      line-height: 1.75;
    }

    .method {
      padding-top: 84px;
      padding-bottom: 84px;
    }

    .measurement-system {
      padding-top: 120px;
      padding-bottom: 84px;
    }

    .measurement-header {
      margin-bottom: 42px;
    }

    .measurement-title {
      font-size: clamp(30px, 10vw, 44px);
    }

    .measurement-intro,
    .measurement-body {
      font-size: 13.5px;
      line-height: 1.72;
    }

    .measurement-intro {
      margin-left: 0;
    }
    .measurement-card-top {
      align-items: center;
      margin-bottom: 18px;
    }

    .measurement-num {
      font-size: 34px;
    }

    .measurement-code {
      font-size: 20px;
    }

    .measurement-card-title {
      font-size: 22px;
    }

    .measurement-context {
      font-size: 9px;
      line-height: 1.6;
    }

    .method-header {
      margin-bottom: 48px;
    }

    .method-title {
      font-size: clamp(30px, 10vw, 46px);
    }

    .method-intro {
      font-size: 14px;
      line-height: 1.72;
    }

    .impact-arrow {
      gap: 10px;
      margin-bottom: 72px;
    }

    .benefit-prism {
      top: -92px;
      right: 8px;
      width: 160px;
      z-index: 0;
      opacity: 0.9;
    }

    .impact-segment {
      padding: 18px 18px 20px;
      border-radius: 12px;
      min-height: 0;
    }

    .impact-segment::before {
      clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
      border-radius: 0;
    }

    .impact-phase {
      font-size: 8px;
      letter-spacing: 0.2em;
      color: rgba(255,255,255,0.76);
    }

    .impact-phase strong {
      font-size: 8px;
    }

    .impact-name {
      margin-top: 12px;
      font-size: 24px;
      line-height: 1.02;
      text-align: left;
    }

    .impact-caption {
      margin-top: 12px;
      font-size: 12px;
      line-height: 1.45;
      color: rgba(255,255,255,0.92);
    }

    .method-step {
      grid-template-columns: 1fr;
      gap: 14px;
      padding: 28px 44px 28px 0;
    }

    .method-step-num {
      font-size: 34px;
      padding-top: 0;
    }

    .method-step-phase {
      font-size: 9px;
      letter-spacing: 0.18em;
      margin-bottom: 10px;
    }

    .method-step-name {
      font-size: 24px;
      line-height: 1.14;
      margin-bottom: 12px;
    }

    .method-step-desc,
    .method-detail-text {
      font-size: 13.5px;
      line-height: 1.72;
    }

    .method-step-right {
      padding-top: 8px;
    }

    .method-output {
      gap: 10px;
      margin-top: 16px;
    }

    .output-tag {
      font-size: 9px;
      padding: 7px 12px;
    }

    .method-step-toggle {
      top: 28px;
      width: 34px;
      height: 34px;
      font-size: 18px;
    }

    .impact-band {
      font-size: 11px;
    }

    .impact-name {
      margin-top: 18px;
      text-align: left;
    }

    .cesare {
      padding-top: 84px;
      padding-bottom: 84px;
    }

    .benefits {
      padding-top: 84px;
      padding-bottom: 84px;
    }

    .vti-cta {
      padding-top: 84px;
      padding-bottom: 84px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ticker-track {
      animation: none;
    }
  }

  /* Animations */
  @keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-33.333%); }
  }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  .reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.25,0.46,0.45,0.94),
                transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
  }
  .reveal.visible { opacity: 1; transform: none; }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }

  /* ===== reusable-hero-roots ===== */
  .section-page-hero {
    position: relative;
    width: 100%;
  }

  .section-page-hero .section-hero-copy {
    width: 100%;
    max-width: 720px;
    min-width: 0;
  }

  .section-page-hero .hero-breadcrumb,
  .section-page-hero .hero-eyebrow {
    width: fit-content;
  }

  .section-page-hero .hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-family: 'Epilogue', sans-serif;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .section-page-hero .hero-breadcrumb a {
    color: inherit;
    text-decoration: none;
  }

  .section-page-hero .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    font-family: 'Sora', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .section-page-hero .hero-sub,
  .section-page-hero .hero-question {
    max-width: 42ch;
    font-size: 14px;
    line-height: 1.75;
  }

  .section-page-hero .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
  }

  .section-page-hero .section-hero-visual {
    min-width: 0;
  }

  .section-page-hero--contact .section-hero-copy {
    max-width: 620px;
  }

  .section-page-hero--contact .hero-breadcrumb,
  .section-page-hero--contact .hero-eyebrow,
  .section-page-hero--contact .hero-sub,
  .section-page-hero--contact .hero-question {
    width: 100%;
  }

  .section-page-hero--contact .hero-question,
  .section-page-hero--contact .hero-sub {
    max-width: 540px;
  }

  .section-page-hero--seo .hero-breadcrumb {
    margin-bottom: 36px;
    color: var(--orange);
    font-family: 'Sora', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .section-page-hero--seo .seo-hero-abstract {
    justify-self: end;
    max-width: none;
  }

  .section-page-hero--seo .hero-breadcrumb a {
    color: #7a7a7a !important;
    text-decoration: none;
  }

  .section-page-hero--seo .hero-breadcrumb .sep {
    color: #a3a3a3 !important;
    margin: 0 8px;
  }

  .section-page-hero--seo .hero-breadcrumb .current,
  .section-page-hero--seo .hero-eyebrow {
    color: var(--orange) !important;
  }

  .section-page-hero--seo .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
    font-family: 'Sora', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .section-page-hero--seo .hero-eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--orange);
  }

  .section-page-hero--blog .hero-breadcrumb,
  .section-page-hero--blog .hero-breadcrumb a,
  .section-page-hero--blog .hero-breadcrumb .sep {
    color: rgba(20, 20, 20, 0.58) !important;
  }

  .section-page-hero--blog .hero-breadcrumb .current,
  .section-page-hero--blog .hero-eyebrow {
    color: var(--orange) !important;
  }

  .section-page-hero--ecosystem .hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin-bottom: 18px;
    color: #8a8a8a;
    font-family: 'Epilogue', sans-serif;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .section-page-hero--ecosystem .hero-breadcrumb a {
    color: inherit;
    text-decoration: none;
  }

  .section-page-hero--ecosystem .hero-breadcrumb .sep,
  .section-page-hero--ecosystem .hero-breadcrumb .current {
    color: var(--orange);
  }

  .section-page-hero--ecosystem .hero-eyebrow {
    margin-bottom: 30px !important;
  }

  .section-page-hero--ecosystem .hero-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--orange);
  }

  .section-page-hero--origin .hero-breadcrumb,
  .section-page-hero--expression .hero-breadcrumb,
  .section-page-hero--cases .hero-breadcrumb,
  .section-page-hero--traction .hero-breadcrumb,
  .section-page-hero--origin .hero-eyebrow,
  .section-page-hero--expression .hero-eyebrow,
  .section-page-hero--cases .hero-eyebrow,
  .section-page-hero--traction .hero-eyebrow {
    color: var(--orange) !important;
  }

  .section-page-hero--origin .hero-breadcrumb a,
  .section-page-hero--expression .hero-breadcrumb a,
  .section-page-hero--cases .hero-breadcrumb a,
  .section-page-hero--traction .hero-breadcrumb a {
    color: #7a7a7a !important;
  }

  .section-page-hero--origin .hero-breadcrumb .sep,
  .section-page-hero--expression .hero-breadcrumb .sep,
  .section-page-hero--cases .hero-breadcrumb .sep,
  .section-page-hero--traction .hero-breadcrumb .sep {
    color: #a3a3a3 !important;
  }

  .section-page-hero--origin .hero-breadcrumb .current,
  .section-page-hero--expression .hero-breadcrumb .current,
  .section-page-hero--cases .hero-breadcrumb .current,
  .section-page-hero--traction .hero-breadcrumb .current {
    color: var(--orange) !important;
  }

  .section-page-hero--expression .hero h1,
  .section-page-hero--expression .hero-question,
  .section-page-hero--expression .hero-breadcrumb,
  .section-page-hero--expression .hero-breadcrumb a,
  .section-page-hero--expression .hero-breadcrumb .sep {
    color: #22222a;
  }

  .section-page-hero--expression .hero-breadcrumb .current,
  .section-page-hero--expression .hero h1 em,
  .section-page-hero--expression .hero-eyebrow {
    color: var(--orange);
  }

  .section-page-hero--expression .hero-question,
.section-page-hero--cases .hero-sub,
.section-page-hero--traction .hero-question {
  color: #5d5d5d !important;
}

@media (min-width: 981px) {
  .section-page-hero--cases .hero-layout > .row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  .section-page-hero--cases .section-hero-copy.hero-content {
    order: 1;
    flex: 0 0 58.333333% !important;
    width: 58.333333% !important;
    max-width: 58.333333% !important;
    min-width: 0 !important;
  }

  .section-page-hero--cases .section-hero-visual.hero-media-col {
    order: 2;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    flex: 0 0 41.666667% !important;
    width: 41.666667% !important;
    max-width: 41.666667% !important;
    min-width: 0 !important;
  }

  .section-page-hero--cases .hero-video-shell {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .section-page-hero--cases .hero-video-frame {
    width: 100%;
    max-width: 100%;
  }
}

.section-page-hero--expression .hero-question,
.section-page-hero--traction .hero-question {
  border-left-color: rgba(236, 105, 29, 0.72) !important;
}

  @media (max-width: 768px) {
    .section-page-hero .section-hero-copy,
    .section-page-hero .section-hero-visual {
      max-width: 100%;
      width: 100%;
    }

    .section-page-hero .hero-actions {
      width: 100%;
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
    }

    .section-page-hero .hero-actions > * {
      width: 100%;
      justify-content: center;
    }

    .section-page-hero .hero-sub,
    .section-page-hero .hero-question {
      max-width: 100%;
    }

    .section-page-hero--seo .seo-hero-abstract {
      justify-self: start;
    }
  }

  .section-page-hero--about .hero-breadcrumb,
  .section-page-hero--about .hero-eyebrow,
  .section-page-hero--about .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--orange);
    font-family: 'Sora', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .section-page-hero--about .hero-breadcrumb {
    margin-bottom: 18px;
    color: #8a8a8a;
    font-family: 'Epilogue', sans-serif;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .section-page-hero--about .hero-breadcrumb a {
    color: inherit;
    text-decoration: none;
  }

  .section-page-hero--about .hero-breadcrumb .sep,
  .section-page-hero--about .hero-breadcrumb .current {
    color: var(--orange);
  }

  .section-page-hero--about .hero-eyebrow {
    margin-bottom: 30px;
  }

  .section-page-hero--about .hero-eyebrow::before,
  .section-page-hero--about .section-tag::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--orange);
  }

  .section-page-hero--about-me .hero-breadcrumb,
  .section-page-hero--about-me .hero-eyebrow,
  .section-page-hero--about-me .section-tag {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Sora', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .section-page-hero--about-me .hero-breadcrumb {
    margin-bottom: 30px;
    color: rgba(246, 241, 235, 0.45);
    font-family: 'Epilogue', sans-serif;
    font-weight: 400;
    letter-spacing: 0.14em;
  }

  .section-page-hero--about-me .hero-breadcrumb a {
    color: inherit;
    text-decoration: none;
  }

  .section-page-hero--about-me .hero-breadcrumb .sep,
  .section-page-hero--about-me .hero-breadcrumb .current,
  .section-page-hero--about-me .hero-eyebrow,
  .section-page-hero--about-me .section-tag {
    color: var(--orange);
  }

  .section-page-hero--about-me .hero-eyebrow::before,
  .section-page-hero--about-me .section-tag::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--orange);
  }

  .section-page-hero--sitemap .hero-breadcrumb {
    margin-bottom: 20px;
    color: var(--orange);
    font-family: 'Sora', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .section-page-hero--sitemap .hero-breadcrumb a {
    color: #7a7a7a !important;
    text-decoration: none;
  }

  .section-page-hero--sitemap .hero-breadcrumb .sep {
    color: #a3a3a3 !important;
    margin: 0 8px;
  }

  .section-page-hero--sitemap .hero-breadcrumb .current {
    color: var(--orange) !important;
  }

  .section-page-hero--sitemap .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--orange);
    font-family: 'Sora', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .section-page-hero--sitemap .hero-eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--orange);
  }

  /* ===== editorial-and-listing-roots ===== */
  .section-post-index {
    display: grid;
    grid-template-columns: 286px minmax(0, 1fr);
    gap: 36px;
    padding: 48px 56px 0;
    align-items: start;
  }

  .section-post-index .blog-sidebar {
    position: sticky;
    top: 110px;
    align-self: start;
  }

  .section-post-index .blog-content {
    min-width: 0;
  }

  .section-post-featured {
    padding: 0;
  }

  .section-post-featured .post-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border);
    margin-top: 0;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s;
  }

  .section-post-featured .post-featured:hover {
    border-color: var(--border-orange);
  }

  .section-post-featured-card .post-title {
    max-width: none;
  }

  .section-post-featured-content {
    padding: 20px 18px 22px !important;
  }

  .section-post-featured-visual {
    min-height: 190px !important;
    aspect-ratio: 4 / 3;
  }

  .section-post-featured-visual svg {
    left: 16px;
    width: calc(100% - 16px);
  }

  .section-post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  .section-post-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    text-decoration: none;
    color: inherit;
  }

  .section-post-card-media {
    width: 100%;
  }

  .section-post-card-header,
  .section-post-card-content,
  .section-post-card-footer {
    width: 100%;
  }

  .section-newsletter-signup {
    margin: 0 56px 80px;
    border: 1px solid var(--border-orange);
    background: linear-gradient(135deg, #0e0c07, #0a0a0a);
    padding: 64px 72px;
    display: grid;
    grid-template-columns: minmax(360px, 0.84fr) minmax(520px, 1.16fr);
    gap: clamp(40px, 5vw, 84px);
    align-items: center;
    position: relative;
    overflow: hidden;
  }

  .section-newsletter-signup .nl-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
    width: 100%;
    max-width: 760px;
    justify-self: end;
  }

  .section-newsletter-signup .nl-fields {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) auto;
    gap: 20px;
    width: 100%;
  }

  .section-filter-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .section-filter-bar::-webkit-scrollbar {
    display: none;
  }

  .section-filter-bar--cases {
    position: sticky;
    top: 88px;
    z-index: 18;
    padding: 14px clamp(18px, 4vw, 56px);
    border-bottom: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  .section-filter-bar--cases .filter-btn {
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid rgba(236, 105, 29, 0.14);
    padding: 11px 16px;
    background: rgba(255, 255, 255, 0.72);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }

  .section-filter-bar--cases .filter-btn.active {
    background: rgba(236, 105, 29, 0.08);
    box-shadow: inset 0 0 0 1px rgba(236, 105, 29, 0.08);
  }

  .section-editorial-cta--cases .cta-actions {
    gap: 14px;
    align-items: stretch;
  }

  .section-project-grid {
    column-count: 3;
    column-gap: 28px;
    margin-top: 96px;
  }

  .section-project-grid .section-project-tile {
    break-inside: avoid;
    border-radius: 12px;
  }

  .section-project-grid .project-overlay {
    background:
      linear-gradient(180deg, rgba(8, 8, 8, 0.08) 0%, rgba(8, 8, 8, 0.72) 58%, rgba(8, 8, 8, 0.88) 100%);
    padding: 30px 26px 24px;
  }

  .section-project-grid .project-abstract {
    max-width: 36ch;
  }

  .section-project-grid .project-kicker {
    row-gap: 10px;
  }

  .section-project-grid .project-title {
    text-wrap: balance;
  }

  .section-editorial-article .seo-article-content,
  .section-editorial-article .seo-article-content--wide {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .section-editorial-article .editorial-split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--seo-grid-gap);
    align-items: start;
    max-width: 1180px;
    margin: var(--seo-section-space) auto;
  }

  .section-editorial-article .editorial-grid {
    display: grid;
    gap: 24px;
    max-width: 1180px;
    margin: clamp(56px, 8vh, 96px) auto;
  }

  .section-editorial-article .editorial-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .section-editorial-article .section-editorial-content p {
    max-width: 70ch;
  }

  .section-editorial-article .editorial-split--2-1 {
    gap: clamp(32px, 4vw, 56px);
  }

  .section-editorial-article .section-editorial-note {
    position: sticky;
    top: 132px;
    border-radius: 18px;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.045);
  }

  .section-editorial-article .section-editorial-card {
    min-height: 100%;
    border-radius: 18px;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.045);
  }

  .section-editorial-article :is(.section-editorial-content h2, .editorial-col h2, .editorial-band h2) {
    text-wrap: balance;
  }

  .section-editorial-article :is(.section-editorial-content p, .editorial-col p, .section-editorial-note p, .section-editorial-card p) {
    text-wrap: pretty;
  }

  .section-editorial-article :is(.seo-figure figcaption, .seo-video-figure figcaption) {
    max-width: 54ch;
  }

  .section-editorial-band .editorial-band-inner h2 {
    text-wrap: balance;
  }

  .section-editorial-band {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(64px, 9vh, 110px) 0;
    margin-top: var(--seo-section-space);
    margin-bottom: var(--seo-section-space);
    background: linear-gradient(135deg, #151515 0%, #23232b 100%);
  }

  .section-editorial-band .editorial-band-inner {
    width: 100%;
    max-width: var(--seo-shell-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--seo-shell-x);
    padding-right: var(--seo-shell-x);
    box-sizing: border-box;
  }

  .section-editorial-band .editorial-band-inner h2 {
    text-wrap: balance;
  }

  @media (max-width: 980px) {
    .section-post-index {
      grid-template-columns: 1fr;
      gap: 28px;
      padding-top: 32px;
    }

    .section-newsletter-signup {
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }

    .section-editorial-article .editorial-grid--3 {
      grid-template-columns: 1fr;
    }

    .section-filter-bar--cases {
      top: 76px;
      padding-left: 18px;
      padding-right: 18px;
    }

    .section-project-grid .project-abstract,
    .section-editorial-cta--cases .cta-actions > * {
      max-width: 100%;
      width: 100%;
    }
  }

  @media (max-width: 780px) {
    .section-editorial-article .section-editorial-note {
      position: static;
      top: auto;
    }

    .section-editorial-article .section-editorial-content p,
    .section-editorial-article :is(.seo-figure figcaption, .seo-video-figure figcaption) {
      max-width: 100%;
    }

    .section-filter-bar--cases {
      padding: 18px 20px 20px;
      gap: 10px;
      flex-wrap: wrap;
    }

    .section-filter-bar--cases .filter-btn {
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.02);
    }

    .section-filter-bar--cases .filter-btn.active {
      background: rgba(236, 105, 29, 0.12);
      border-bottom-color: var(--border-orange);
    }

    .section-project-grid {
      column-count: 1;
      column-gap: 0;
      margin-top: 56px;
    }
  }

  @media (max-width: 760px) {
    .section-newsletter-signup {
      margin: 0 20px 64px;
      padding: 40px 24px;
      grid-template-columns: 1fr;
      gap: 28px;
    }

    .section-newsletter-signup .nl-fields {
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .section-post-grid {
      grid-template-columns: 1fr;
    }

    .section-post-featured .post-featured {
      grid-template-columns: 1fr;
    }

    .section-post-featured-content {
      padding: 20px 18px 22px !important;
    }

    .section-post-featured-visual {
      min-height: 190px !important;
      aspect-ratio: 4 / 3;
    }

    .section-post-featured-visual svg {
      left: 16px;
      width: calc(100% - 16px);
    }
  }

  /* Final restore: Comunicazione hero must stay light like Strategia */
  .page--expression .hero.section-page-hero--expression {
    background: linear-gradient(180deg, #ffffff 0%, #f7f4ef 58%, #f1ece5 100%) !important;
  }

  .page--expression .hero.section-page-hero--expression::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 8% 10%, rgba(236, 105, 29, 0.10) 0%, rgba(236, 105, 29, 0.04) 22%, rgba(236, 105, 29, 0) 42%),
      radial-gradient(circle at 82% 42%, rgba(210, 220, 232, 0.30) 0%, rgba(255, 255, 255, 0) 58%),
      linear-gradient(90deg, #fffaf5 0%, #ffffff 45%, #f7f9fb 100%) !important;
    pointer-events: none;
    z-index: 0;
    box-shadow: none !important;
    filter: none !important;
  }