.home-section { margin-block: var(--saarbon-space-9); }
.hero { position: relative; border-radius: 2rem; background: var(--saarbon-surface-alt); overflow: hidden; }
.hero-slide { display: grid; align-items: center; min-height: 34rem; }
/* Head script sets this before body paint; no-JS retains every readable slide. */
html[data-hero-pending] [data-slider]:not([data-slider-ready]) [data-slide] ~ [data-slide] { display: none; }
/* Reserve the real controls' layout before initialization, without exposing inert buttons.
   Override base [hidden] only during this short progressive-enhancement window. */
html[data-hero-pending] [data-slider]:not([data-slider-ready]) .slider-controls[hidden] { display: flex !important; visibility: hidden; }
.hero-copy { padding: clamp(1.5rem, 5vw, 4.5rem); position: relative; z-index: 1; }
.hero-copy h2 { font-size: clamp(2.1rem, 4.4vw, 4rem); max-width: 12em; line-height: 1.45; letter-spacing: -.035em; margin-block: 1rem; }
.hero-copy > p:not(.eyebrow) { max-width: 34em; color: var(--saarbon-muted); }
.hero-visual { display: block; height: 100%; min-height: 20rem; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-art { position: relative; min-height: 26rem; overflow: hidden; }
.art-orbit { width: 80%; aspect-ratio: 1; border-radius: 50%; background: var(--saarbon-gold); opacity: .35; position: absolute; inset: 10% 10%; }
.art-card { position: absolute; inset-block-start: 12%; inset-inline-start: 15%; width: 55%; height: 65%; background: var(--saarbon-surface); border: 1px solid var(--saarbon-border); border-radius: 1rem; transform: rotate(-12deg); box-shadow: var(--saarbon-shadow-md); display: grid; place-items: center; font-size: 8rem; color: var(--saarbon-accent); }
.art-bookmark { position: absolute; inset-block-start: 8%; inset-inline-end: 19%; width: 22%; height: 65%; transform: rotate(13deg); background: var(--saarbon-green); clip-path: polygon(0 0,100% 0,100% 100%,50% 85%,0 100%); }
.art-seal { position: absolute; inset-block-end: 10%; inset-inline-end: 10%; border-radius: 50%; width: 7rem; aspect-ratio: 1; background: var(--saarbon-gold); color: #2f4a21; display: grid; place-items: center; font-size: .8rem; letter-spacing: .08em; transform: rotate(12deg); }
.slider-controls { display: flex; justify-content: center; align-items: center; gap: 1rem; padding: 1rem; border-block-start: 1px solid var(--saarbon-border); }
.slider-dots { display: flex; gap: .5rem; }
.slider-dots button { border-radius: 50%; min-width: 44px; min-height: 44px; background: var(--saarbon-surface); color: var(--saarbon-accent); border: 1px solid var(--saarbon-border); }
.slider-dots button[aria-pressed="true"] { background: var(--saarbon-green); color: var(--saarbon-on-brand); }
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 1rem; }
.category-card { padding: 1.3rem; background: var(--saarbon-surface); border: 1px solid var(--saarbon-border); border-radius: var(--saarbon-radius-lg); text-align: center; }
.category-card img { width: 100%; height: 8rem; object-fit: contain; }
.category-card h3 { margin-block: .5rem; font-size: 1.05rem; }
.category-card a { text-decoration: none; }
.category-card p { font-size: .85rem; color: var(--saarbon-muted); }
.stores-showcase { padding: clamp(1.25rem, 4vw, 3rem); background: var(--saarbon-surface-alt); border-radius: 2rem; }
.about-section, .social-showcase { display: grid; align-items: center; gap: var(--saarbon-space-7); }
.about-mark { aspect-ratio: 1.25; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--saarbon-accent); background: var(--saarbon-surface-alt); border-radius: 50% 50% 1rem 1rem; font-size: 4rem; }
.about-mark span { font-size: .8rem; letter-spacing: .35em; }
.about-section h2, .social-showcase h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
.social-showcase { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--saarbon-border); border-radius: 2rem; }
.social-art { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.social-art span { min-height: 10rem; border-radius: 1rem; display: grid; place-items: center; background: var(--saarbon-surface-alt); color: var(--saarbon-accent); font-size: 3rem; }
.social-art span:nth-child(2) { background: var(--saarbon-gold); color: #2f4a21; transform: translateY(-1rem); }
@media (min-width: 50rem) { .hero-slide { grid-template-columns: 1.1fr 1fr; } .about-section, .social-showcase { grid-template-columns: 1fr 1fr; } .stores-showcase .store-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 49.99rem) { .home-section { margin-block: var(--saarbon-space-8); } .hero-slide { min-height: 0; } .hero-art { min-height: 20rem; } .hero-copy { padding-block-end: 1rem; } .hero-visual { aspect-ratio: 4/3; } .slider-controls { flex-wrap: wrap; gap: .4rem; } .slider-dots { gap: .2rem; } }