/* Development single — title band (Figma node 28:15 + name 35:203).
   NOTE: the frame's actual fill is #32383b (= --vl-ink) — NOT cornflower as
   the task brief assumed going in. Ink matches an existing token exactly, so
   no new value was invented, but this corrects the brief's premise; flag to
   Liam if a cornflower band was in fact intended here. */
.vl-dev-titleband {
    background: var(--vl-ink);
    min-height: 200px; /* node 28:15: 1920×200 */
    display: flex;
    align-items: center;
}

@media (max-width: 767px) {
    .vl-dev-titleband {
        /* Let the band grow if a long development name wraps at this
           font-size on narrow viewports rather than clipping it (the same
           trade-off other --vl-text-hero pages already accept). */
        min-height: auto;
    }
}

.vl-dev-titleband .vl-container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* title↔address, Liam review 2026-07-23 (tried 40, settled on 20) */
    /* width: 100% — the band section is display:flex, so without this the
       container shrinks to its content and its auto margins centre the
       shrunken box (looked like centred text — Liam review, 2026-07-23). */
    width: 100%;
    /* Content is 144px (90 + 20 gap + 34); padding must stay ≤28px or it
       pushes the band past its exact 200px (Liam ruling). Acts only as
       breathing room if a long name wraps. 15→20px (Liam, 2026-07-24 —
       all viewports; 144 + 40 = 184, still inside the 200px band). */
    padding-block: 20px;
}

.vl-dev-titleband h1 {
    margin: 0;
    color: var(--vl-white);
    /* Frame node 120:19 (real text, replaced the old outlined layer):
       Omnes SemiBold 90/95, with "Phase 2" dropped to Regular — the
       vl_title_emphasis_html() rule (Liam, 2026-07-23): prefix/suffix
       quiet, core name semibold. */
    font-size: var(--vl-text-hero);
    font-weight: var(--vl-weight-semibold);
    line-height: 1; /* = font-size at every breakpoint (Liam, 2026-07-23: big headings line-height equals size) */
}

.vl-dev-titleband h1 .vl-title-quiet {
    font-weight: var(--vl-weight-regular);
}

.vl-dev-titleband__address {
    margin: 0;
    /* Read from the frame's address node (67:2854, Liam review 2026-07-23):
       Omnes Italic 30/34, white — replaces the build-time inference of
       regular cream. Italic at --vl-weight-regular (500) = the kit's i5
       face (Adobe shifted numbering: 400-italic would be LIGHT italic). */
    color: var(--vl-white);
    font-size: var(--vl-text-input); /* 30px, node-exact */
    font-style: italic;
    font-weight: var(--vl-weight-regular);
    line-height: 1.133; /* node ratio 34/30, unitless so the mobile token size scales it */
}