/* hero — the two-column grid and the stage the dish sits on. The dish itself is dish.css. */
.hero{position:relative;overflow:hidden;padding-block:clamp(40px,5vw,72px) clamp(36px,4vw,56px)}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,58px);align-items:center}
@media(max-width:940px){.hero .grid{grid-template-columns:1fr}}
.lines{position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none}
.hero .grid,.hero .wrap{position:relative;z-index:1}
.hero h1{margin-bottom:20px}
/* the eyebrow sits inside the left grid column (width:max-content + nowrap) so it stays one line
   but 10px above the H1; above the grid it opened a ~110px void against the 520px dish */
.hero .mono.eyebrow{letter-spacing:.06em;white-space:nowrap;margin-bottom:10px;width:max-content;max-width:none}
@media(max-width:700px){.hero .mono.eyebrow{white-space:normal}}
.hero .grid>*{min-width:0}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.stage{position:relative;height:calc(var(--D) + 60px);display:flex;align-items:center;justify-content:center}
.dish-wrap{position:relative;width:var(--D);height:var(--D)}