/* Home New 125:719: hero content and navigation. */
.hero h1 { visibility: hidden; pointer-events: none; }
.hero .hero-eyebrow { display: none; }
.site-header > .project-cta, .mobile-menu-action { display: none; }
.site-header .site-nav { font: 500 20px/24px Arturm,sans-serif; letter-spacing: .8px; text-transform: lowercase; }
.mobile-menu-primary a { font-family: Arturm,sans-serif; text-transform: lowercase; }
.hero .hero-details { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; position: absolute; left: 8.333333%; top: 19.833333%; bottom: auto; width: 342px; max-width: 30%; }
.hero .hero-intro { font: 400 clamp(20px,1.944444vw,28px)/1.285714 'Helixa',sans-serif; color: #fff; margin: 0; }
.hero .hero-details .button { margin: 0; padding: 24px 32px; gap: 12px; border-radius: 12px; font: 500 18px/24px Arturm,sans-serif; text-transform: none; letter-spacing: .72px; }
.hero-explore { position: absolute; left: 8.333333%; top: 80.833333%; color: #fff; font: 400 16px/24px 'Helixa',sans-serif; text-decoration: none; z-index: 3; }
.hero .scroll-cue { display: none; }
@media(min-width:1024px) { .site-header .site-nav { left:auto; right:56px; transform:none; top:51px; gap:48px; } .site-header { padding-left:56px; } }
@media(max-width:760px) {
 .hero .hero-details { top: 18%; left: 30px; width: min(290px,75%); max-width: none; gap: 24px; }
 .hero .hero-intro { font-size: 22px; }
 .hero .hero-details .button { padding:18px 24px; font-size:16px; }
 .hero-explore { left:30px; top:auto; bottom:30px; }
}

/* Figma 125:827 — 16×24 white mouse beside the scroll prompt. */
.hero .scroll-cue { display:block; left:calc(8.333333% + 136px); top:80.833333%; bottom:auto; width:16px; height:24px; transform:none; opacity:1; }
.hero .scroll-cue svg { width:16px; height:24px; }
.hero .scroll-cue svg rect:first-child { stroke:#30271f; }
.hero .scroll-cue svg rect:last-child { fill:#30271f; }
@media(max-width:760px) { .hero .scroll-cue { left:166px; top:auto; bottom:30px; } }

/* Light studio palette: keep supporting text readable on pale plaster. */
.hero .hero-intro { color:#30271f; }
.hero-explore { color:#30271f; }
.hero .scroll-cue svg rect:first-child { stroke:#30271f; }
.hero .scroll-cue svg rect:last-child { fill:#30271f; }


@media (min-width: 761px) {
  .hero-explore { font-size: 18px; }
  .hero .scroll-cue { left: calc(8.333333% + 152px); }
}

/* Shared section gutters and Figma's black hero action. */
.hero { --content-max: 1440px; --hero-content-gutter: max(8.333333vw, calc((100vw - var(--content-max)) / 2)); }
.hero .hero-details, .hero .hero-explore { left: var(--hero-content-gutter); }
.hero .scroll-cue { left: calc(var(--hero-content-gutter) + 152px); }
.hero .hero-details .button { background: var(--black, #201E1C); color: #fff; }
.hero .hero-details .button:is(:hover,:focus-visible) { background: #30271f; }
@media (min-width: 761px) {
 .hero .hero-details { width:362px; max-width:30%; }
 .hero .hero-intro { width:100%;max-width:362px;white-space:normal; }
 .hero .hero-intro span { display: block; white-space: nowrap; }
}
@media (min-width: 761px) and (max-width: 1100px) {
 .hero { --hero-content-gutter: clamp(48px, 6vw, 64px); }
}
@media (max-width: 760px) {
 .hero { --hero-content-gutter: clamp(20px, 5.56vw, 24px); }
 .hero .scroll-cue { left: calc(var(--hero-content-gutter) + 136px); }
}