.hero-concept { position: relative; isolation: isolate; width: 100%; padding: 86px max(32px, calc((100vw - 1264px)/2)) 56px; color: var(--site-ink); }
.hero-concept *, .hero-concept *::before, .hero-concept *::after { box-sizing: border-box; }
/* Match the live hero container: centered, capped at 1392px, fluid below it. */
.hero-field { position: absolute; top: 0; bottom: 0; left: 50%; width: 100%; max-width: 1392px; transform: translateX(-50%); z-index: -1; overflow: hidden; opacity: .72; pointer-events: none; }
.hero-field canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-concept h1 { margin: 0; font-family: 'Season Mix Regular', sans-serif; font-weight: 420; font-size: clamp(56px, 6.1vw, 88px); line-height: 1.09; letter-spacing: -.035em; }
.hero-concept h1 > span { display: block; }
.hero-concept .hero-changing { margin-top: 9px; min-height: 1.1em; }
.hero-typed { display: inline; }
.hero-cursor { display: inline-block; width: 2px; height: .79em; margin-left: .09em; vertical-align: -.01em; background: currentColor; animation: hero-blink 1.1s step-end infinite; }
.hero-cursor.writing { animation: none; }
.hero-sr { position: absolute; width: 1px; height: 1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hero-context { margin-top: 46px; max-width: 620px; }
.hero-description { margin:0; font-family:'Season Sans Regular',sans-serif; font-size:21px; line-height:1.5; letter-spacing:-.012em; color:var(--site-ink-muted); text-wrap:pretty; }
.hero-concept a { color:var(--site-ink-muted); text-decoration:none; text-underline-offset:5px; }
.hero-concept a:hover { color:var(--site-ink); text-decoration:underline; }
.hero-concept :focus-visible { outline:2px solid var(--site-accent); outline-offset:6px; border-radius:2px; }
.hero-concept ::selection { color:var(--site-canvas); background:var(--site-ink); }
@keyframes hero-blink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
@media (max-width:1199px) { .hero-concept { padding-top:66px; } .hero-description { font-size:19px; } }
@media (max-width:809px) {
 .hero-concept { padding:58px 30px 36px; }
 .hero-concept h1 { font-size:clamp(39px,7.5vw,60px); line-height:1.14; letter-spacing:-.028em; }
 .hero-concept .hero-changing { min-height:2.28em; margin-top:8px; max-width:100%; }
 .hero-context { margin-top:24px; }
 .hero-description { font-size:18px; line-height:1.5; max-width:35ch; }
}
@media (prefers-reduced-motion:reduce) { .hero-cursor { animation:none; display:none; } }


/* Reuse the homepage Framer appear animation: 150px rise, 1.3s spring, bounce .1. */
.hero-entrance { position:relative; }
@media (prefers-reduced-motion:reduce) { .hero-entrance { opacity:1!important; transform:none!important; } }

.hero-cursor[hidden] { display:none; }

/* Proof row: under the description on one left edge. The figure leads (h3 size,
   Season Mix) and the label names the case study, with an arrow so it reads as a
   link on touch screens too. Two columns from tablet up; stacked on phones. */
.hero-proof { list-style: none; margin: 32px 0 0; padding: 24px 0 0; border-top: 1px solid var(--site-line);
  display: grid; grid-template-columns: repeat(2, max-content); column-gap: 64px; row-gap: 20px; }
.hero-proof li { margin: 0; }
.hero-proof a { display: flex; flex-direction: column; gap: 6px; color: var(--site-ink); }
.hero-proof a:hover { text-decoration: none; }
.hero-proof-figure { font-family: 'Season Mix Regular', serif; font-weight: 420; font-size: var(--type-h3); line-height: 1.2; color: var(--site-ink); }
.hero-proof-label { font-family: 'Season Sans Regular', sans-serif; font-size: var(--type-small); line-height: 1.4; color: var(--site-ink-muted); transition: color .2s ease; }
.hero-proof-arrow { display: inline-block; margin-left: .35em; transition: transform .25s var(--site-ease-spring); }
.hero-proof a:hover .hero-proof-label, .hero-proof a:focus-visible .hero-proof-label { color: var(--site-ink); }
.hero-proof a:hover .hero-proof-arrow { transform: translateX(4px); }
@media (max-width: 1199px) { .hero-proof { column-gap: 48px; } }
@media (max-width: 809px) {
  .hero-proof { margin-top: 28px; padding-top: 20px; grid-template-columns: 1fr; row-gap: 18px; }
  .hero-proof a { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .hero-proof-arrow, .hero-proof-label { transition: none; } }