:root {
    /* asvideoandmotion - LAYOUT (canonical structural variable contract). */

    --REF--layout-content-width: 100vw;
    --REF--layout-content-width-narrow: 62.5rem;
    --REF--layout-nav-height: 5rem;
    --REF--layout-topbar-height: 5rem;
    --REF--layout-sidebar-width: 260px;
    --REF--layout-hero-home-height: min(88svh, 45rem);
    --REF--layout-hero-inner-min: 24rem;
    --REF--layout-hero-inner-max: 34rem;
    --REF--layout-section-gap: clamp(3rem, 8vw, 5.5rem);
    --REF--layout-card-cols: 3;
    --REF--layout-soft-radius: 8px;
    --layout-content-width: calc(var(--REF--layout-content-width) - (2 * var(--layout-content-inset)));
    --layout-content-width-narrow: min(var(--REF--layout-content-width-narrow), calc(100vw - 2.5rem));
    --layout-content-inset: clamp(1.25rem, 5vw, 3.5rem);
    --layout-nav-height: var(--REF--layout-nav-height);
    --layout-nav-padding: calc(var(--REF--layout-nav-height) * 0.24) 0;
    --layout-topbar-height: var(--REF--layout-topbar-height);
    --layout-sidebar-width: var(--REF--layout-sidebar-width);
    --layout-hero-home-height: var(--REF--layout-hero-home-height);
    --layout-hero-home-padding: clamp(2rem, 7vw, 4rem) var(--layout-content-inset);
    --layout-hero-home-align-block: flex-end;
    --layout-hero-home-align-inline: flex-start;
    --layout-hero-home-text-align: start;
    --layout-hero-inner-height: clamp(var(--REF--layout-hero-inner-min), 54vw, var(--REF--layout-hero-inner-max));
    --layout-hero-inner-padding: calc(var(--REF--layout-nav-height) * 1.1) 1rem 2.25rem;
    --layout-hero-inner-align-block: center;
    --layout-hero-inner-align-inline: flex-start;
    --layout-hero-inner-text-align: start;
    --layout-section-gap: var(--REF--layout-section-gap);
    --layout-footer-padding: 1.5rem 0;
    --layout-footer-gap: 0.875rem;
    --layout-card-cols: var(--REF--layout-card-cols);
    --layout-card-grid-template: repeat(var(--layout-card-cols), minmax(0, 1fr));
    --layout-control-min-height: 2.75rem;
    --layout-card-cols-wide: var(--REF--layout-card-cols);
    --layout-essence-cols: 2;
    --layout-pillars-cols: 3;
    --layout-services-cols: 3;
    --layout-metrics-cols: 3;
    --layout-audience-cols: 2;
    --layout-founder-template: 20rem minmax(0, 1fr);
    --layout-box-padding: 1.75rem 1.5rem;
    --layout-control-padding: 1rem 1.75rem;
    --layout-soft-radius: var(--REF--layout-soft-radius);
    --REF--layout-essence-cols: 2;
    --REF--layout-pillars-cols: 3;
    --REF--layout-services-cols: 2;
    --REF--layout-metrics-cols: 4;
    --REF--layout-audience-cols: 2;
    --REF--layout-box-padding-block: 2.5rem;
    --REF--layout-box-padding-inline: 2.5rem;
    --REF--layout-control-padding-block: 1.15rem;
    --REF--layout-control-padding-inline: 2.4rem;
    --REF--layout-control-min-height: 3rem;
    --layout-hero-home-media-fit: cover;
    --layout-hero-home-media-position: center;
    --layout-hero-inner-media-fit: cover;
    --layout-hero-inner-media-position: center;
}

@media (min-width: 641px) and (max-width: 960px) {
    :root {
        --layout-card-cols: min(2, var(--REF--layout-card-cols));
        --layout-card-cols-wide: min(3, var(--REF--layout-card-cols));
        --layout-essence-cols: 1;
        --layout-pillars-cols: 1;
        --layout-services-cols: 1;
        --layout-metrics-cols: 2;
        --layout-audience-cols: 1;
        --layout-founder-template: 1fr;
    }
}

@media (max-width: 640px) {
    :root {
        --layout-card-cols: 1;
        --layout-card-cols-wide: 1;
        --layout-content-inset: 1.25rem;
        --layout-hero-home-padding: calc(var(--REF--layout-nav-height) * 1.2) 1.25rem 2.5rem;
        --layout-hero-inner-padding: calc(var(--REF--layout-nav-height) * 1.1) 1rem 2.25rem;
        --layout-essence-cols: 1;
        --layout-pillars-cols: 1;
        --layout-services-cols: 1;
        --layout-metrics-cols: 1;
        --layout-audience-cols: 1;
        --layout-founder-template: 1fr;
        --layout-box-padding: 1.75rem 1.5rem;
        --layout-control-padding: 1rem 1.75rem;
    }
}