/* ── blog 02 Hero — blog/sections/02-hero/brief.md ──
   Figma (y relative to the hero top = page y 103): 1:1211 "insights &" 96/.94 @ top 207 · 1:1212 "resources" #ff7376 @ 307 ·
   left edge x 140 · 1:1228 coral line 31×2 @ (140,464) · 1:1226 intro 28/1 w616 @ (140,502) ·
   1:1267 building 1429×956 @ (704,21) (pre-cropped to its visible area) · 1:1270 birds 630×445 @ (918,63) ·
   1:1266 coral asterisk outline 605×340 @ (1548,85), clipped by the right edge.
   The 1px black frame outline in Figma (1:1217) is removed — agreed at sign-off. */

.bl-hero { height: calc(977 * var(--u)); background: var(--bl-page); }
.bl-hero__building { left: calc(704 * var(--u)); top: calc(21 * var(--u)); width: calc(1429 * var(--u)); }
.bl-hero__birds    { left: calc(918 * var(--u)); top: calc(63 * var(--u)); width: calc(630 * var(--u)) !important; }
.bl-hero__asterisk { left: calc(1548 * var(--u)); top: calc(85 * var(--u)); width: calc(605 * var(--u)) !important; }

.bl-hero__text { position: absolute; z-index: 2; left: calc(140 * var(--u)); top: calc(207 * var(--u)); }
.bl-hero__title {
    font-size: clamp(44px, 5vw, 96px);
    font-weight: 400;
    line-height: calc(100 / 96);
    text-transform: lowercase;
}
.bl-hero__title em { font-style: normal; color: var(--skin-coral); }
.bl-hero__rule { display: block; width: calc(31 * var(--u)); height: 2px; margin-top: calc(53 * var(--u)); background: var(--skin-coral); }
.bl-hero__intro { width: calc(616 * var(--u)); margin-top: calc(36 * var(--u)); font-size: clamp(17px, 1.458vw, 28px); line-height: 1; }

@media (max-width: 991.98px) {
    .bl-hero { height: auto; display: flex; flex-direction: column-reverse; padding-top: 64px; }
    .bl-hero__text { position: static; padding: 0 var(--skin-gutter); }
    .bl-hero__title { font-size: 56px; }
    .bl-hero__rule { width: 31px; margin-top: 24px; }
    .bl-hero__intro { width: auto; max-width: 560px; margin-top: 20px; font-size: 18px; line-height: 1.4; }
    .bl-hero .bl-stage { position: relative; left: auto; translate: none; width: 100%; height: 72vw; margin-top: 24px; }
    .bl-hero__building { left: 0; top: 8%; width: 100%; }
    .bl-hero__birds { left: 40%; top: 0; width: 40% !important; }
    .bl-hero__asterisk { left: 70%; top: -6%; width: 42% !important; }
}
@media (max-width: 575.98px) {
    .bl-hero__title { font-size: 44px; }
}