/* Canonical layout schema: preserve variable names/order and keep selectors in style.css. */
:root {
    /* sparkcleanusa - LAYOUT (canonical structural variable contract). */

    --REF--layout-content-width: 1200px;
    --REF--layout-content-width-narrow: 820px;
    --REF--layout-nav-height: 4.75rem;
    --REF--layout-topbar-height: 4.75rem;
    --REF--layout-sidebar-width: 260px;
    --REF--layout-hero-home-height: min(92svh, 940px);
    --REF--layout-hero-inner-min: 18rem;
    --REF--layout-hero-inner-max: 28rem;
    --REF--layout-section-gap: clamp(4rem, 8vw, 7rem);
    --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), calc(100vw - 2rem));
    --layout-content-inset: clamp(1.1rem, 3vw, 1.6rem);
    --layout-nav-height: var(--REF--layout-nav-height);
    --layout-nav-padding: 0 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: calc(var(--layout-nav-height) + clamp(3rem, 8vw, 6.5rem)) 0 clamp(3rem, 6vw, 5rem);
    --layout-hero-home-align-block: center;
    --layout-hero-home-align-inline: flex-start;
    --layout-hero-home-text-align: start;
    --layout-hero-inner-height: clamp(var(--REF--layout-hero-inner-min), 34vw, var(--REF--layout-hero-inner-max));
    --layout-hero-inner-padding: calc(var(--layout-nav-height) + clamp(2.75rem, 6vw, 4.5rem)) 0 clamp(2.75rem, 6vw, 4rem);
    --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: clamp(3.5rem, 6vw, 5rem) 0 2.25rem;
    --layout-footer-gap: clamp(1.5rem, 3vw, 2.5rem);
    --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: var(--REF--layout-card-cols);
    --layout-essence-cols: var(--REF--layout-essence-cols);
    --layout-pillars-cols: var(--REF--layout-pillars-cols);
    --layout-services-cols: var(--REF--layout-services-cols);
    --layout-metrics-cols: var(--REF--layout-metrics-cols);
    --layout-audience-cols: var(--REF--layout-audience-cols);
    --layout-founder-template: minmax(0, 1fr) minmax(0, 1.05fr);
    --layout-box-padding: var(--REF--layout-box-padding-block) var(--REF--layout-box-padding-inline);
    --layout-control-padding: var(--REF--layout-control-padding-block) var(--REF--layout-control-padding-inline);
    --REF--layout-essence-cols: 2;
    --REF--layout-pillars-cols: 3;
    --REF--layout-services-cols: 3;
    --REF--layout-metrics-cols: 4;
    --REF--layout-audience-cols: 3;
    --REF--layout-box-padding-block: clamp(1.6rem, 2.4vw, 2.1rem);
    --REF--layout-box-padding-inline: clamp(1.6rem, 2.4vw, 2.1rem);
    --REF--layout-control-padding-block: 0.85rem;
    --REF--layout-control-padding-inline: 1.35rem;
    --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: 2;
        --layout-card-cols-wide: 2;
        --layout-essence-cols: 1;
        --layout-pillars-cols: 2;
        --layout-services-cols: 2;
        --layout-metrics-cols: 4;
        --layout-audience-cols: 2;
        --layout-founder-template: 1fr;
    }
}

@media (max-width: 640px) {
    :root {
        --layout-card-cols: 1;
        --layout-card-cols-wide: 1;
        --layout-content-inset: clamp(1.1rem, 3vw, 1.6rem);
        --layout-hero-home-padding: calc(var(--layout-nav-height) + clamp(3rem, 8vw, 6.5rem)) 0 clamp(3rem, 6vw, 5rem);
        --layout-hero-inner-padding: calc(var(--layout-nav-height) + clamp(2.75rem, 6vw, 4.5rem)) 0 clamp(2.75rem, 6vw, 4rem);
        --layout-essence-cols: 1;
        --layout-pillars-cols: 1;
        --layout-services-cols: 1;
        --layout-metrics-cols: 2;
        --layout-audience-cols: 1;
        --layout-founder-template: 1fr;
        --layout-box-padding: 1.6rem;
        --layout-control-padding: 0.85rem 1.35rem;
    }
}