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

    --REF--layout-content-width: 1160px;
    --REF--layout-content-width-narrow: 760px;
    --REF--layout-nav-height: 4.25rem;
    --REF--layout-topbar-height: 4.25rem;
    --REF--layout-sidebar-width: 260px;
    --REF--layout-hero-home-height: 100svh;
    --REF--layout-hero-inner-min: 100svh;
    --REF--layout-hero-inner-max: 100svh;
    --REF--layout-section-gap: clamp(4rem, 8vw, 6.5rem);
    --REF--layout-card-cols: 3;
    --layout-content-width: min(var(--REF--layout-content-width), 92vw);
    --layout-content-width-narrow: min(var(--REF--layout-content-width-narrow), 92vw);
    --layout-content-inset: clamp(1.5rem, 5vw, 4rem);
    --layout-nav-height: var(--REF--layout-nav-height);
    --layout-nav-padding: 1.1rem 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: 8rem 0 4rem;
    --layout-hero-home-align-block: end;
    --layout-hero-home-align-inline: center;
    --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: 5.5rem 0 3rem;
    --layout-hero-inner-align-block: flex-end;
    --layout-hero-inner-align-inline: flex-start;
    --layout-hero-inner-text-align: start;
    --layout-section-gap: var(--REF--layout-section-gap);
    --layout-footer-padding: 3rem 0 1.8rem;
    --layout-footer-gap: 2.2rem;
    --layout-card-cols: var(--REF--layout-card-cols);
    --layout-card-grid-template: repeat(var(--layout-card-cols), minmax(0, 1fr));
    --layout-control-min-height: var(--REF--layout-control-min-height);
    --layout-card-cols-wide: 1;
    --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;
    --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: 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: clamp(1.5rem, 5vw, 4rem);
        --layout-hero-home-padding: 6rem 0 3.5rem;
        --layout-hero-inner-padding: 5.5rem 0 3rem;
        --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;
    }
}