/* =====================================================================
   Shared styles for the unified concept-design subpages
   (our-roots, our-work, contact). Extends concept.css. Promote shared
   bits into concept.css over time.
   ===================================================================== */

/* Intro block reused across subpages */
.sub-intro { padding-top: 26vh; }
.sub-intro .display { font-size: clamp(40px, 6vw, 80px); max-width: 16ch; }
.sub-intro .body-line { margin-top: 28px; max-width: 50ch; }
@media (max-width: 720px) { .sub-intro { padding-top: 20vh; } }

/* Origin story (our-roots) */
.story-prose { display: flex; flex-direction: column; gap: 26px; max-width: 64ch; }
.story-prose p {
    font-family: var(--sans); font-weight: 300;
    font-size: clamp(18px, 1.7vw, 23px); line-height: 1.55;
    color: var(--ink); opacity: 0.9; margin: 0;
}

/* Case-study cards (our-work) — reuse .services-row/.service with a tag + lead */
.work-tag {
    align-self: flex-start;
    font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--accent); margin: 0 0 2px;
}
.work-lead { font-style: italic; opacity: 0.72; }
.work-headline {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.015em;
    line-height: 1.15; color: var(--ink); margin: 0;
}

/* Inline contact form (contact) */
.contact-form-wrap { max-width: 560px; display: flex; flex-direction: column; gap: 22px; }
.contact-note { font-family: var(--sans); font-size: 14px; color: var(--ink-soft); margin: 8px 0 0; }
.contact-note a { color: var(--accent); text-decoration: none; }
.contact-note a:hover { text-decoration: underline; }

/* Inline links within card body text */
.service-subtitle a, a.inline-em {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-soft);
}
.service-subtitle a:hover, a.inline-em:hover { border-bottom-color: var(--accent); }

/* Our Work: placeholder portfolio tiles (until real apps ship) */
.work-placeholder {
    flex: 1 1 260px; max-width: 380px;
    display: flex; flex-direction: column; gap: 14px;
    padding: 30px 28px;
    border: 1px dashed var(--rule); border-radius: 20px;
    font-family: var(--sans);
    opacity: 0.9;
    transition: opacity 200ms ease, border-color 200ms ease;
}
.work-placeholder:hover { opacity: 1; border-color: var(--accent-soft); }
@media (max-width: 720px) { .work-placeholder { flex: 1 1 100%; max-width: none; } }