/* The initializer waits for this stylesheet before changing the hero. */
main.designer-home > .hero { --gm2-styles-ready:1; }
/* Component overrides only: keep the site's header, navigation and content intact. */
.hero.gm2-hero { isolation:isolate; background:#08060d; }
.hero.gm2-hero::before { z-index:0; background:linear-gradient(90deg,rgba(8,6,13,.96) 0%,rgba(8,6,13,.72) 40%,rgba(8,6,13,.08) 78%),linear-gradient(0deg,rgba(8,6,13,.94),transparent 70%); transform:none; animation:none; pointer-events:none; }
.hero.gm2-hero::after { z-index:0; opacity:.18; }
.gm2-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
/* Reserve the final layout before JavaScript initializes the canvas. */
main.designer-home > .hero .hero-inner { padding-bottom:112px; }
.gm2-controls { position:absolute; z-index:2; bottom:26px; left:var(--gutter); right:var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:16px; color:#c5b1e3; font:11px/1.4 'DM Sans',sans-serif; }
.gm2-scenes { display:flex; gap:24px; }
.gm2-scenes button { position:relative; display:flex; align-items:center; gap:10px; padding:12px 0; color:inherit; background:transparent; border:0; font:inherit; letter-spacing:.08em; cursor:pointer; }
.gm2-scenes button span { color:#9c7cc4; font-size:9px; }
.gm2-scenes button[aria-pressed=true] { color:#fff; }
.gm2-scenes button::after { content:''; position:absolute; left:0; right:0; bottom:3px; height:1px; background:#b78cff; transform:scaleX(0); transform-origin:left; }
.gm2-scenes button[aria-pressed=true]::after { transform:scaleX(var(--gm2-progress,0)); }
.gm2-pause { width:38px; height:38px; border:1px solid #bba0df55; border-radius:50%; background:#0b081155; color:#ddcbf8; font:14px 'DM Sans',sans-serif; cursor:pointer; }
.gm2-controls button:focus-visible { outline:2px solid #c6a5ff; outline-offset:5px; }
@media(max-width:700px) { .gm2-controls { bottom:24px; gap:10px; } .gm2-scenes { gap:20px; } .gm2-scenes button { font-size:10px; gap:6px; } main.designer-home > .hero .hero-inner { padding-bottom:110px; } }


/* Match the supplied mobile previews: full-width actions in one column. */
@media(max-width:700px) { main.designer-home > .hero .hero-actions { flex-direction:column; align-items:stretch; } main.designer-home > .hero .hero-actions .button { width:100%; } }

/* The text and controls share the same content column at every viewport width. */
main.designer-home > .hero { min-height:100svh; }
main.designer-home > .hero .display { font-size:clamp(50px,calc(37.44px + 5.4vw),122px); }
.gm2-controls { left:max(var(--gutter),calc((100% - var(--container)) / 2));right:max(var(--gutter),calc((100% - var(--container)) / 2)); }
@media(min-width:701px) {
 main.designer-home > .hero .hero-actions { flex-direction:row;flex-wrap:nowrap;align-items:center; }
 main.designer-home > .hero .hero-actions .button { flex:0 0 auto; }
}
@media(min-width:1021px) {
 main.designer-home > .hero .hero-bottom { grid-template-columns:minmax(0,1fr) auto; }
}
/* On tall phones, anchor the content above the sculpture instead of shifting it down. */
@media(max-width:700px) { main.designer-home > .hero { align-items:flex-start; } }
/* The narrow heading overlaps the sculpture. Preserve readable purple text. */
@media(max-width:700px) {
 .hero.gm2-hero::before { background:linear-gradient(90deg,rgba(8,6,13,.96) 0%,rgba(8,6,13,.72) 40%,rgba(8,6,13,.58) 78%),linear-gradient(0deg,rgba(8,6,13,.94),transparent 70%); }
}