/* One quiet Grain surface below the hero. Cards retain their own opaque surfaces. */
body.cb-grain-page::before { display: none; }
body.cb-grain-page { background-color: var(--primary-bg); }
.cb-grain-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
    background: radial-gradient(ellipse at 90% 20%, #94bfa6 0%, transparent 60%),
        radial-gradient(ellipse at 10% 85%, #b8d3c1 0%, transparent 55%), #fff;
}
body.dark-mode .cb-grain-background {
    background: radial-gradient(ellipse at 90% 20%, #245f3f 0%, transparent 60%),
        radial-gradient(ellipse at 10% 85%, #16472f 0%, transparent 55%), #0a0c0b;
}
.cb-grain-background canvas { display: block; width: 100%; height: 100%; }
.cb-grain-background canvas[hidden] { display: none; }
body.cb-grain-page :is(.inventory-section, .import-header-section, .usps-section,
    .import-service-section, .inspection-section, .financing-section,
    .transportation-section, .contact-section) {
    position: relative;
    z-index: 1;
    background: transparent !important;
}
/* The collection deliberately gets less colour than the service sections. */
body.cb-grain-page.light-mode .inventory-section { background: rgba(255,255,255,.48) !important; }
body.cb-grain-page.dark-mode .inventory-section { background: rgba(10,10,10,.48) !important; }
body.cb-grain-page .site-footer { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
    .cb-grain-background { transition: none; }
}
/* Keep secondary copy readable against the richer moving colour fields. */
body.cb-grain-page.light-mode :is(.inventory-section, .import-header-section, .usps-section,
    .import-service-section, .inspection-section, .financing-section,
    .transportation-section, .contact-section) { --text-muted: #405046; }
body.cb-grain-page.dark-mode :is(.inventory-section, .import-header-section, .usps-section,
    .import-service-section, .inspection-section, .financing-section,
    .transportation-section, .contact-section) { --text-muted: #c4d5c9; }

/* Mobile: attach the existing green surface to the document, not the moving
   visual viewport. Browser toolbars cannot stretch it or restart a GPU canvas. */
body.cb-grain-mobile { background-attachment: scroll; }
body.cb-grain-mobile .cb-grain-background {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    contain: paint;
    clip-path: none !important;
    transition: none;
    animation: none;
}
body.cb-grain-mobile #hero {
    height: 100svh;
    min-height: 100svh;
}
@media (prefers-reduced-motion: reduce) {
    body.cb-grain-page .cb-grain-background { animation: none; }
}