/* ==========================================================================
   Project detail page (/en/project/<slug>) — headings only.

   Loaded after v3.css and scoped to .erada-project. Every type value below
   resolves to a v3 token, so the headings land on the same two roles the
   commercial fit-out landing page uses (.fo-h2 and .fo-*__title in
   fitout.css) — a visitor arriving from /en/commercial-fit-out does not meet
   a second typeface. This file adds nothing else: the body of the page is
   production Webflow markup and is untouched. See CLAUDE.md.
   ========================================================================== */

/* display — the project name. Same role as .fo-h2.

   text-align is declared rather than inherited: .motto-wrap and
   .about-story-wrap centre their contents, and the old markup only escaped
   that through .heading-jumbo-small.service-head. Dropping that class drops
   the left alignment with it, and a centred headline over left-aligned prose
   reads as a mistake. The fit-out page centres its headings because its
   sections are centred throughout; this page is not. */
.erada-project .pd-title {
    margin: 0 0 var(--v3-space-5);
    text-align: left;
    font-family: var(--v3-font-display);
    font-weight: 400;
    font-size: var(--v3-size-display);
    line-height: var(--v3-lh-display);
    letter-spacing: var(--v3-tracking-display);
    text-transform: none;
    color: var(--primary, #595a20);
}

/* title — the Description / Scope / Images labels. Same role as the fit-out
   page's card headings.

   Not the display size the fit-out page gives an <h2>: there an h2 heads a
   whole section, here it labels a block a few lines long, and at
   clamp(2.4rem, 5vw, 4.25rem) each label would outweigh the project name it
   sits under. Display for the page title, title for the labels — the same two
   roles the fit-out page uses, mapped to this page's depth. */
.erada-project .pd-label {
    margin: 0 0 var(--v3-space-4);
    text-align: left;
    font-family: var(--v3-font-display);
    font-weight: 400;
    font-size: var(--v3-size-title);
    line-height: var(--v3-lh-title);
    text-transform: none;
    color: var(--primary, #595a20);
}