/*
 * Verso Design System — Global CSS
 * =================================
 * Source of truth for all design tokens.
 * All measurements verified from the Claude Design prototype
 * via JavaScript (April 2026).
 *
 * Usage: these variables are consumed by Elementor's Global
 * Colours/Fonts settings and by any custom CSS added in
 * the Elementor editor or Additional CSS panel.
 */


/* ─────────────────────────────────────────────
   1. Design Tokens (CSS Custom Properties)
   ───────────────────────────────────────────── */
:root {

    /* Colour palette */
    --verso-cream:       #F8F4EF;   /* page background */
    --verso-text:        #121212;   /* primary text */
    --verso-warm-grey:   #6B635A;   /* secondary / supporting text */
    --verso-footer-bg:   #111111;   /* footer + dark sections */
    --verso-white:       #FFFFFF;
    --verso-border:      rgba(18, 18, 18, 0.08);

    /* Typography */
    --verso-font:        'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Nav */
    --verso-nav-height:    88px;
    --verso-nav-padding-x: 75.6px;
    --verso-nav-max-width: 1140px;

    /* Logo sizes */
    --verso-logo-height:   40px;

    /* Spacing scale */
    --verso-space-xs:   8px;
    --verso-space-sm:  16px;
    --verso-space-md:  24px;
    --verso-space-lg:  40px;
    --verso-space-xl:  80px;
    --verso-space-2xl: 120px;

    /* Transitions */
    --verso-transition: 0.2s ease;
}


/* ─────────────────────────────────────────────
   2. Global Typography Reset
   ───────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--verso-font);
    font-weight: 400;
    color: var(--verso-text);
    background-color: var(--verso-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

/* Ensure General Sans loads before any Elementor font assignments.
   Elementor's global font setting should be set to 'General Sans' in
   Elementor > Site Settings > Global Fonts. */
h1, h2, h3, h4, h5, h6,
p, a, span, li, td, th, label, button, input, textarea {
    font-family: var(--verso-font);
}

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


/* ─────────────────────────────────────────────
   3. Nav — Global Chrome
   ───────────────────────────────────────────── */

/* These selectors target Elementor Pro's header template.
   They enforce the exact prototype measurements regardless of
   how Elementor renders the nav widget internally.          */

/* Nav container height */
.elementor-location-header .elementor-section,
.elementor-location-header .e-con {
    min-height: var(--verso-nav-height) !important;
}

/* Logo sizing */
.elementor-location-header .elementor-site-logo img,
.elementor-location-header img.e-logo-wrapper {
    height: var(--verso-logo-height) !important;
    width: auto !important;
}

/* Nav link typography */
.elementor-location-header .elementor-nav-menu a.elementor-item {
    font-family: var(--verso-font) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: var(--verso-text) !important;
}

/* Client Portal pill button */
.elementor-location-header .client-portal-btn a.elementor-item {
    border: 1.5px solid var(--verso-text) !important;
    border-radius: 6px !important;
    padding: 7px 18px !important;
    font-weight: 600 !important;
    transition: background var(--verso-transition), color var(--verso-transition) !important;
}
.elementor-location-header .client-portal-btn a.elementor-item:hover {
    background: var(--verso-text) !important;
    color: var(--verso-cream) !important;
}


/* ─────────────────────────────────────────────
   4. Footer — Global Chrome
   ───────────────────────────────────────────── */

.elementor-location-footer {
    background-color: var(--verso-footer-bg) !important;
    color: var(--verso-white) !important;
}

/* Footer logo — white version, 40px height */
.elementor-location-footer .elementor-site-logo img,
.elementor-location-footer img.e-logo-wrapper {
    height: var(--verso-logo-height) !important;
    width: auto !important;
}

.elementor-location-footer a,
.elementor-location-footer p,
.elementor-location-footer span {
    color: rgba(255, 255, 255, 0.7);
}

.elementor-location-footer a:hover {
    color: var(--verso-white);
}


/* ─────────────────────────────────────────────
   5. Page backgrounds
   ───────────────────────────────────────────── */

/* All Elementor pages default to cream */
.elementor-page,
.elementor-template-full-width {
    background-color: var(--verso-cream);
}


/* ─────────────────────────────────────────────
   6. Stats strip — used on homepage + Our Work
   ───────────────────────────────────────────── */
.verso-stats-strip {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-top: 1px solid var(--verso-border);
}

.verso-stat {
    padding: var(--verso-space-lg) 0;
    border-right: 1px solid var(--verso-border);
}

.verso-stat:last-child {
    border-right: none;
}

.verso-stat-value {
    font-size: 56px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--verso-text);
    margin: 0 0 8px 0;
}

.verso-stat-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--verso-warm-grey);
    margin: 0;
}


/* ─────────────────────────────────────────────
   7. Case study card grid (Our Work page)
   ───────────────────────────────────────────── */
.verso-case-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--verso-border);
}

.verso-card {
    background: var(--verso-cream);
    padding: var(--verso-space-xl) var(--verso-space-lg);
}

.verso-card-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--verso-warm-grey);
    margin: 0 0 var(--verso-space-sm) 0;
}

.verso-card-title {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 4px 0;
}

.verso-card-subtitle {
    font-size: 14px;
    color: var(--verso-warm-grey);
    margin: 0 0 var(--verso-space-lg) 0;
}

/* Challenge / Built / Outcome rows */
.verso-story-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 0;
    padding: var(--verso-space-sm) 0;
    border-top: 1px solid var(--verso-border);
    align-items: start;
}

.verso-story-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--verso-warm-grey);
    padding-top: 2px;
}

.verso-story-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--verso-text);
    margin: 0;
}

/* Scroll reveal */
.verso-reveal-card {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.verso-reveal-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ─────────────────────────────────────────────
   8. Dark CTA section
   ───────────────────────────────────────────── */
.verso-cta-dark {
    background-color: var(--verso-footer-bg);
    color: var(--verso-white);
    padding: var(--verso-space-xl) var(--verso-nav-padding-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.verso-cta-heading {
    font-size: 64px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    max-width: 500px;
    margin: 0;
}

.verso-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--verso-white);
    color: var(--verso-text);
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 100px;
    padding: 18px 32px;
    cursor: pointer;
    transition: background var(--verso-transition), color var(--verso-transition);
    text-decoration: none;
}

.verso-cta-button:hover {
    background: var(--verso-cream);
}


/* ─────────────────────────────────────────────
   9. Responsive — Mobile
   ───────────────────────────────────────────── */
@media (max-width: 768px) {

    :root {
        --verso-nav-height: 64px;
        --verso-nav-padding-x: 24px;
    }

    .verso-case-grid {
        grid-template-columns: 1fr;
    }

    .verso-cta-dark {
        flex-direction: column;
        gap: var(--verso-space-lg);
        padding: var(--verso-space-xl) var(--verso-space-md);
        text-align: left;
    }

    .verso-cta-heading {
        font-size: 40px;
    }

    .verso-stat-value {
        font-size: 40px;
    }
}