/*
  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: 1fr 1fr 1.2fr 1.6fr 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: 240px;
            max-width: 100%;
        }

    .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-stack ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: contents; /* i <li> diventano figli diretti del flex .filter-stack */
}

.filter-stack li {
    display: contents; /* anche il <li> sparisce come "scatola", passa il testimone al link */
}

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

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

.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 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.case-masonry-item {
    margin: 0;
}

@media (max-width: 768px) {
    .case-masonry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .case-masonry-grid {
        grid-template-columns: 1fr;
    }
}

    .case-masonry-item button {
        width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: left;
    }

.case-masonry-art {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    cursor: zoom-in;
    position: relative;
}

.case-masonry-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.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);
    }

.filter-chip {
    display: inline-block;
    padding: 10px 14px;
    border: 1px solid rgba(236,105,29,0.18);
    border-radius: 8px;
    background: transparent;
    color: #505050;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    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;
    }

/* ─── 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;
    }

body.modal-open {
    overflow: hidden;
}

.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;
    }

/* ─── CUSTOM NOT FOR ─── */
.custom-not-for {
    padding: 120px 56px;
    border-top: 0;
    /*background: #151515;*/
}

.custom-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;
}

.custom-not-for-headline {
    color: #ffffff;
}

    .custom-not-for-headline em {
        font-style: normal;
        color: var(--orange);
    }

.custom-not-for-body {
    font-size: 14px;
    line-height: 1.85;
    margin-top: 24px;
}

.custom-not-for-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.custom-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;
}

    .custom-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: 17px;
    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: #ffffff;
}

.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 {
    background: #ffffff;
    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;
    }