/* Declaring Our Tech Futures — Hero C (illustration on an arch). Loads after redesign.css; tokens only. */

/* ---------- Shared ---------- */
.hv-copy{position:relative;z-index:2;padding:72px 0 128px}
.hv-tag{margin:0;font:400 44px/52px var(--font-display);letter-spacing:-.01em;color:var(--text-muted)}
.hv-lead{margin:0;font:300 24px/36px var(--font-sans);max-width:none}
.hv-copy .r-hero__cols{margin-top:48px}

/* =====================================================================
   C — illustration on an arch. Aqua arch with the hands-and-devices illustration sitting on its base,
   headline overlapping on the left with "Futures" set flush right under it.
   ===================================================================== */
.hc-hero{position:relative;overflow:hidden;padding:120px 0 0}
.hc-grid{position:relative}
.hc-h1{position:relative;z-index:3;width:fit-content;margin:0;font:400 clamp(80px,13.2vw,192px)/.86 var(--font-display);letter-spacing:-.04em}
.hc-h1 span{display:block;white-space:nowrap}
.hc-l3{text-align:left}
.hc-h1 em{font-style:italic;color:var(--accent-text)}
.hc-top{position:relative;padding-bottom:48px}
.hc-tag{margin-top:56px;position:relative;z-index:2}
.hc-art{position:absolute;right:0;bottom:0;z-index:1;width:min(39%,476px);height:449px;pointer-events:none}
.hc-photo{position:absolute;left:12%;right:4%;top:0;bottom:0;z-index:2}
.hc-fill{position:absolute;inset:0;overflow:hidden;border-radius:999px 999px 0 0;background:var(--accent-cool)}
.hc-illo{position:absolute;left:-10%;bottom:0;z-index:1;display:block;width:120%;height:auto}
.hc-below{position:relative;z-index:2;margin-top:0}
.hc-below .r-hero__cols{margin-top:0}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes hc-par-a{to{transform:translateY(88px)}}
    .hc-photo{animation:hc-par-a linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  }
}
@media (prefers-reduced-motion:no-preference){
  @keyframes hc-reveal{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes hc-slide{from{transform:translateY(40px);opacity:0}}
  .hc-fill{animation:hc-reveal 1.3s cubic-bezier(.2,.8,.2,1) both}
  .hc-illo{animation:hc-slide 1.1s cubic-bezier(.2,.8,.2,1) .45s both}
  .hc-h1 span{animation:hc-slide 1s cubic-bezier(.2,.8,.2,1) both}
  .hc-h1 span:nth-child(2){animation-delay:.1s}
  .hc-h1 span:nth-child(3){animation-delay:.2s}
}
/* Headline size: 150px at 1440 (the artboard), scaling down with the viewport */
.hc-h1{font-size:clamp(80px,10.4vw,150px)}
.hc-below.hv-copy{padding-top:0}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .hv-copy .r-hero__cols{grid-template-columns:minmax(0,1fr)}
  .hc-top{display:flex;flex-direction:column;padding-bottom:0}
  .hc-art{position:relative;right:auto;bottom:auto;order:3;width:min(85%,442px);height:425px;margin:48px auto 0}
  .hc-h1{font-size:clamp(80px,17vw,172px)}
}
@media (max-width:760px){
  .hv-copy{padding:48px 0 80px}
  .hv-tag{font-size:30px;line-height:36px}
  .hv-lead{font-size:20px;line-height:30px}
  .hv-copy .r-hero__cols{margin-top:28px}
  .hc-hero{padding-top:64px}
  .hc-art{height:280px;margin-top:40px}
  .hc-tag{margin-top:32px}
  .hc-below .r-hero__cols{margin-top:0}
}